/* ==========================================================================
   Hanekom Innovations Limited — site stylesheet
   Dark glass treatment. Deep green-slate ground, translucent surfaces,
   brand green #5FA83C lifted to #8CC85F for legibility on dark, amber for
   anything carrying live data. Every text pair checked to WCAG AA.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* grounds and surfaces */
  --ground:#121A16;          /* page base                                 */
  --ground-2:#0D1310;        /* deepest — footer, nav bar                 */
  --surf:#1B2721;            /* card / panel                              */
  --surf-2:#24322B;          /* raised panel, table header, input         */
  --glass:rgba(255,255,255,.062);
  --glass-2:rgba(255,255,255,.085);
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.16);
  --plate:#FFFFFF;           /* flat white: catalogue photos are cut-outs on white */

  /* text */
  --text:#E6EDE7;            /* 12.98:1 on --surf */
  --text-2:#B6C2B9;          /*  8.39:1 */
  --mute:#9DABA2;            /*  6.46:1 */
  --faint:#8B998F;           /*  5.19:1 */

  /* brand */
  --green:#8CC85F;           /* 7.76:1 on --surf — accent text and icons  */
  --green-2:#5FA83C;         /* the logo green, used under dark ink       */
  --green-deep:#3E7723;
  --green-glow:rgba(140,200,95,.22);
  --green-tint:rgba(140,200,95,.10);
  --amber:#E8B53A;           /* 8.17:1 — reserved for live data           */
  --amber-tint:rgba(232,181,58,.12);
  --danger:#F08379;

  --r:12px; --r-lg:20px; --r-xl:26px;
  --motion-half:.21s; --motion-beat:.42s; --motion-double:.84s; --motion-quad:1.68s;
  --blur:saturate(150%) blur(18px);
  --shadow:0 4px 18px rgba(0,0,0,.30);
  --shadow-lg:0 18px 44px rgba(0,0,0,.46);
  --max:1200px;
  --sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ease:cubic-bezier(.4,1.25,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--ground)}
body{
  margin:0;font-family:var(--sans);color:var(--text-2);background:var(--ground);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:0;
}
/* Keep an unexpectedly long label, product title, or pop-out panel from
   widening the visual viewport on phones. Components still wrap internally. */
@supports (overflow:clip){html,body{overflow-x:clip}}

/* Prices are provided privately on Hanekom's written quotation. Keeping these
   hidden in CSS also prevents legacy pre-rendered values flashing on load. */
.price,.pdp-price,.b-total,.code,.qp-code{display:none!important}
.product .foot{justify-content:flex-end}

/* Atmosphere: a fixed, heavily blurred site photograph so the glass
   surfaces have something real to refract instead of flat colour. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 620px at 82% -6%, rgba(140,200,95,.16), transparent 62%),
    radial-gradient(760px 540px at 6% 8%, rgba(60,120,150,.12), transparent 60%),
    linear-gradient(178deg,#16211C 0%,#121A16 46%,#0E1512 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/atmos.webp");
  background-size:cover;background-position:center 30%;
  filter:blur(24px) saturate(.55) brightness(.42);
  opacity:.30;
}

img{max-width:100%;height:auto;display:block}

/* Let the browser skip paint/layout work for content that is far below the
   viewport. The remembered intrinsic size keeps long catalogue pages stable
   while sections and cards are being deferred. */
@supports (content-visibility:auto){
  main>section:not(.hero),.site-footer{content-visibility:auto;contain-intrinsic-block-size:auto 720px}
  .product-grid .product{content-visibility:auto;contain-intrinsic-size:auto 540px}
}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--text);line-height:1.16;margin:0 0 .5em;font-weight:800;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.1vw,2.3rem)}
h3{font-size:clamp(1.08rem,1.9vw,1.32rem);font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
li{margin-bottom:.4rem}
li::marker{color:var(--faint)}
strong{color:var(--text)}
hr{border:0;border-top:1px solid var(--edge);margin:2.5rem 0}
::selection{background:var(--green-glow);color:#fff}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;position:relative}
.narrow{max-width:760px}
section{padding:72px 0;position:relative}
section.tight{padding:48px 0}
@media (max-width:700px){
  .wrap{padding-inline:16px}
  section{padding-block:52px}
  section.tight{padding-block:36px}
}
@media (max-width:360px){
  .wrap{padding-inline:12px}
}
.bg-2,.bg-tint,.bg-navy{position:relative;isolation:isolate}
.bg-2::before,.bg-tint::before,.bg-navy::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.030);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
}
.bg-navy::before{background:rgba(0,0,0,.26)}
.bg-tint::before{background:var(--green-tint)}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* ---------- eyebrow / section heads ---------- */
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:.7rem;
}
.lead{font-size:1.1rem;color:var(--mute);max-width:62ch}
.sec-head{max-width:70ch;margin-bottom:2.5rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:99px;font-weight:700;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  line-height:1.2;min-height:48px;font-family:inherit;
  transition:transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,#A8DE7C,#7FC153);color:#0E1512;box-shadow:0 6px 18px rgba(140,200,95,.26)}
.btn-primary:hover{background:linear-gradient(180deg,#B6E58C,#8CC85F);color:#0E1512;box-shadow:0 10px 26px rgba(140,200,95,.34)}
.btn-amber{background:linear-gradient(180deg,#F0C255,#E0A625);color:#14181C;box-shadow:0 6px 18px rgba(232,181,58,.24)}
.btn-amber:hover{background:linear-gradient(180deg,#F5CE70,#E8B53A);color:#14181C}
.btn-ghost{
  background:var(--glass);color:var(--text);border-color:var(--edge-2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(255,255,255,.30);color:var(--text)}
.btn-wa{background:linear-gradient(180deg,#4FE68E,#2FC46E);color:#04301A;box-shadow:0 6px 18px rgba(61,216,126,.22)}
.btn-wa:hover{background:linear-gradient(180deg,#63EF9D,#3DD87E);color:#04301A}
.btn-sm{padding:.5rem 1.05rem;font-size:.84rem;min-height:40px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.75rem}

/* ---------- top bar ---------- */
.topbar{background:rgba(0,0,0,.34);color:var(--mute);font-size:.8rem;border-bottom:1px solid var(--edge)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}
.topbar a{color:var(--text-2)}
.topbar a:hover{color:var(--green)}
.topbar-links{display:flex;flex-wrap:wrap;gap:1.25rem}
@media (max-width:700px){
  .topbar .wrap{justify-content:center;text-align:center}
  /* Keep the top bar to one line on a phone by dropping ONE link. It used to
     drop the second, which is the email address — the one contact with no
     other shortcut on a small screen. WhatsApp already has a floating button
     on every page down here, so that is the redundant one. */
  .topbar-links a:nth-child(3){display:none}
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(14,21,18,.94);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--edge);
}
.topbar{display:none}
.site-header{
  display:block;position:fixed;top:16px;left:16px;right:auto;z-index:90;
  background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-header .nav{padding:0;margin:0}
.site-header .brand img{
  width:138px;height:auto;padding:7px 11px;border-radius:15px;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
@media (max-width:1120px){.site-header{display:none}}
.nav{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.65rem 24px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.brand img{height:44px;width:auto;background:#fff;padding:6px 10px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.brand:hover{text-decoration:none}
.nav-links{display:none}
.nav-links a{
  color:var(--text-2);font-weight:600;font-size:.92rem;padding:.55rem .8rem;
  border-radius:99px;white-space:nowrap;transition:background .18s,color .18s;
}
.nav-links a:hover{background:var(--glass);color:var(--text);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--green);background:var(--green-tint)}
.nav-cta{margin-left:.5rem}
.quote-pill{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--amber-tint);border:1px solid rgba(232,181,58,.42);color:var(--amber);
  padding:.45rem .9rem;border-radius:99px;font-weight:700;font-size:.84rem;
}
.quote-pill:hover{text-decoration:none;background:rgba(232,181,58,.2)}
.quote-pill .n{
  background:var(--amber);color:#14181C;border-radius:99px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;padding:0 5px;
  font-variant-numeric:tabular-nums;
}
.nav-toggle{
  display:none;margin-left:auto;background:var(--glass);border:1px solid var(--edge-2);
  border-radius:10px;padding:.5rem .72rem;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--text);
}

@media (max-width:1000px){
  .nav-toggle,.nav-links,.nav-cta{display:none}
  .nav{padding:.6rem 18px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:transparent}
.hero picture{position:absolute;inset:0}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg, rgba(9,14,11,.62) 0%, rgba(9,14,11,.46) 34%,
                           rgba(9,14,11,.22) 60%, rgba(9,14,11,.06) 82%, rgba(9,14,11,0) 100%),
    linear-gradient(to top, rgba(9,14,11,.55) 0%, transparent 36%);
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%;filter:saturate(1.08) contrast(1.02)}
@media (max-width:700px){
  /* the narrow crop already centres the three workers */
  .hero-bg{object-position:52% 38%}
  .hero::after{
    background:
      linear-gradient(180deg, rgba(9,14,11,.62) 0%, rgba(9,14,11,.40) 38%,
                              rgba(9,14,11,.58) 70%, rgba(9,14,11,.86) 100%);
  }
}
.hero-inner{position:relative;z-index:2;padding:164px 0 92px;max-width:680px}
@media (max-width:700px){
  /* clear the fixed top navigation while retaining a compact mobile hero */
  .hero-inner{padding:148px 0 40px}
  .hero p{font-size:1rem;line-height:1.55}
  .hero-meta{gap:.4rem;margin-bottom:1.1rem}
  .chip{font-size:.72rem;padding:.3rem .7rem}
  .hero .btn-row{margin-top:1.35rem;gap:.6rem}
  .hero .btn{width:100%}
}
.hero h1{color:#fff;margin-bottom:1.1rem;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero h1 .hl{
  background:linear-gradient(100deg,#A8DE7C,#6FBA46);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:#CBD6CC;font-size:1.15rem;max-width:54ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.hero-search{margin-top:1.35rem;padding:1rem;border:1px solid rgba(255,255,255,.24);border-radius:var(--r-lg);background:rgba(9,25,17,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 45px rgba(0,0,0,.25)}
.hero-search label{display:block;margin-bottom:.48rem;color:#fff;font-weight:800}
.hero-search-row{display:flex;gap:.55rem}
.hero-search input{min-width:0;flex:1;padding:.84rem 1rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.96);color:#14251b;font:inherit}
.hero-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(126,209,79,.22)}
.hero-search small{display:block;margin-top:.55rem;color:#cbd6cc;line-height:1.35}
@media (max-width:640px){.hero-search-row{flex-direction:column}.hero-search-row .btn{width:100%}.hero-search{padding:.85rem}}
.nav-search-trigger{display:inline-flex;align-items:center;gap:.38rem;padding:.55rem .75rem;border:1px solid rgba(140,200,95,.3);border-radius:999px;background:rgba(140,200,95,.08);color:inherit;font:inherit;font-weight:800;cursor:pointer}
.nav-search-trigger svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-search-trigger:hover,.nav-search-trigger:focus-visible,.nav-search-trigger.is-open{color:#79ca4e;border-color:#79ca4e;background:rgba(121,202,78,.14);outline:none}
.site-search-strip{position:fixed;top:calc(134px + env(safe-area-inset-top));left:0;right:0;z-index:79;padding:.72rem 1rem;background:rgba(14,32,22,.94);border-block:1px solid rgba(140,200,95,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 30px rgba(0,0,0,.24);animation:search-drop .22s ease both}
.site-search-strip[hidden]{display:none}
@keyframes search-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.site-search-strip form{display:flex;align-items:center;gap:.55rem;max-width:1180px;margin:0 auto}
.site-search-strip label{flex:0 0 auto;color:#a9dd84;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.site-search-strip input{min-width:0;flex:1;padding:.58rem .9rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:inherit}
.site-search-strip input::placeholder{color:#b9c5bd}
.site-search-strip input:focus{outline:none;border-color:#8cc85f;box-shadow:0 0 0 3px rgba(140,200,95,.18)}
.site-search-strip button{padding:.58rem 1rem;border:0;border-radius:999px;background:#72c947;color:#102018;font:inherit;font-weight:900;cursor:pointer}
.site-search-strip button:hover,.site-search-strip button:focus-visible{background:#91df65;transform:translateY(-1px)}
@media (max-width:900px){.nav-search-trigger{width:100%;justify-content:center}.site-search-strip{padding:.58rem .7rem}}
@media (max-width:520px){.site-search-strip label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.site-search-strip input{font-size:.86rem}.site-search-strip button{padding:.58rem .78rem}}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--glass);
  border:1px solid var(--edge-2);color:var(--text);border-radius:99px;
  padding:.36rem .9rem;font-size:.79rem;font-weight:600;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}

/* ---------- page header (interior) ---------- */
.page-head{position:relative;padding:164px 0 46px;border-bottom:1px solid var(--edge);background:rgba(255,255,255,.028)}
.page-head h1{margin-bottom:.6rem}
.crumbs{font-size:.82rem;color:var(--faint);margin-bottom:.85rem}
.crumbs a{color:var(--mute)}

/* ---------- trust bar ---------- */
.trustbar{background:rgba(0,0,0,.30);border-block:1px solid var(--edge);padding:0}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);padding:0;max-width:none}
.trustbar .cell{background:rgba(13,19,16,.82);padding:26px 24px;text-align:center}
.trustbar .k{font-size:1.85rem;font-weight:800;color:var(--amber);line-height:1.05;display:block;letter-spacing:-.03em}
.trustbar .v{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);font-weight:700}
@media (max-width:760px){.trustbar .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- grid helpers ---------- */
.grid{display:grid;gap:1.35rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.25rem;align-items:center}
.split > *{min-width:0}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:minmax(0,1fr);gap:2.25rem}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split img{border-radius:var(--r-xl)!important;box-shadow:var(--shadow-lg)}

/* ---------- glass cards ---------- */
.card{
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:1.6rem 1.7rem;color:var(--text-2);
  transition:transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
}
.card:hover{background:var(--glass-2);border-color:var(--edge-2);box-shadow:var(--shadow)}
.card h3{margin-bottom:.45rem}
.card p:last-child{margin-bottom:0}
.card .ico{
  width:48px;height:48px;border-radius:14px;background:var(--green-tint);color:var(--green);
  border:1px solid rgba(140,200,95,.24);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;font-size:1.4rem;
}
a.card{color:inherit;display:block}
a.card:hover{text-decoration:none;transform:translateY(-3px)}
.card .more{color:var(--green);font-weight:700;font-size:.88rem;margin-top:.85rem;display:inline-flex;align-items:center;gap:.3rem;transition:gap .2s}
a.card:hover .more{gap:.55rem}

/* category tile */
.cat-tile{
  position:relative;display:block;border:1px solid var(--edge);border-radius:var(--r-lg);
  overflow:hidden;background:var(--glass);color:inherit;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.cat-tile:hover{text-decoration:none;transform:translateY(-3px);border-color:rgba(140,200,95,.36);box-shadow:var(--shadow)}
.cat-tile .thumb{aspect-ratio:4/3;background:var(--plate);display:flex;align-items:center;justify-content:center;padding:16px}
.cat-tile .thumb picture{display:contents}
.cat-tile .thumb img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.cat-tile .body{padding:1.05rem 1.15rem 1.25rem;border-top:1px solid var(--edge)}
.cat-tile .body h3{font-size:1rem;margin-bottom:.3rem}
.cat-tile .body p{font-size:.84rem;color:var(--mute);margin:0}
.cat-tile .count{font-size:.72rem;font-weight:800;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-top:.6rem;display:block}

/* Keep the homepage category showcase visually balanced as one centered unit. */
.category-section>.wrap{text-align:center}
.category-section .sec-head{margin-inline:auto;text-align:center}
.category-section .sec-head>*{margin-inline:auto;text-align:center}
.category-section .sec-head .lead{margin-inline:auto;text-align:center}
.category-section #cat-grid{justify-items:stretch;text-align:center}
.category-section .cat-tile{text-align:center}
.category-section .cat-tile .thumb{place-items:center;text-align:center}
.category-section .cat-tile .thumb picture{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
}
.category-section .cat-tile .thumb img{margin-inline:auto}
.category-section .cat-tile .body{
  display:flex;min-height:185px;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.category-section .cat-tile .body>*{width:100%;margin-inline:auto;text-align:center}
.category-section .cat-tile .body p{max-width:29ch;text-wrap:balance}
.category-section .cat-tile .count{margin-top:auto;padding-top:.75rem;text-align:center}
.category-section>.wrap>.btn-row{justify-content:center}
@media (max-width:600px){
  .category-section .cat-tile .body{min-height:auto;padding:1rem 1.15rem 1.15rem}
}

/* ---------- product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:1.35rem}
.product-grid .product,.empty{scroll-margin-top:1.25rem}
/* Phones browse a catalogue two-up, like a shop shelf. The description and
   spec line are reference detail — they stay for larger screens and for
   crawlers, but scrolling past 45 full-height cards on a phone is a chore. */
@media (max-width:640px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .product .desc,.product .spec{display:none}
  .product .ph{padding:12px}
  .product .pb{padding:.75rem .8rem .85rem}
  .product h3{font-size:.88rem}
  .product .tag{font-size:.58rem;letter-spacing:.1em}
  .product .var{font-size:.74rem;margin-bottom:.4rem}
  .product .foot{flex-direction:column;align-items:stretch;gap:.5rem;padding-top:.7rem}
  .product .foot>span:last-child{flex-direction:column}
  .product .foot .btn-ghost{display:inline-flex}
  .price{font-size:.96rem}
  .price .cur{display:inline;margin-right:.2rem}
  .add-btn{width:100%;padding:.55rem .6rem}
  .product .code{top:8px;left:8px;font-size:.62rem;padding:.2rem .45rem}
}
@media (max-width:360px){
  .product-grid{grid-template-columns:minmax(0,1fr)}
  .product-grid .product{display:grid;grid-template-columns:96px minmax(0,1fr)}
  .product-grid .product .ph{height:100%;min-height:200px;aspect-ratio:auto;padding:8px}
  .product-grid .product .pb{min-width:0;text-align:left}
  .product-grid .product .foot{align-items:stretch}
  .product-grid .product .code{max-width:calc(100% - 16px);overflow-wrap:anywhere}
}
.product{
  display:flex;flex-direction:column;background:var(--glass);
  border:1px solid var(--edge);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.product:hover{transform:translateY(-3px);border-color:rgba(140,200,95,.34);box-shadow:var(--shadow-lg)}
/* Every catalogue photo is a cut-out on white, so it gets a light plate to
   sit on even inside a dark card. Without this they read as white blocks. */
.product .ph{
  position:relative;aspect-ratio:1/1;padding:18px;display:flex;align-items:center;justify-content:center;
  background:var(--plate);
}
.product .ph picture{display:contents}
.product .ph img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.product .code{
  position:absolute;top:11px;left:11px;background:rgba(13,19,16,.88);color:#fff;font-size:.68rem;
  font-weight:800;letter-spacing:.07em;padding:.26rem .58rem;border-radius:7px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.product .pb{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;align-items:stretch;flex:1;text-align:center}
.product .tag{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:.45rem}
.product h3{font-size:.99rem;margin-bottom:.22rem;line-height:1.3}
.product .var{font-size:.81rem;color:var(--faint);margin:0 0 .55rem}
.product .desc{font-size:.845rem;color:var(--mute);margin:0 0 .9rem;flex:1}
.product .spec{
  font-size:.74rem;color:var(--text-2);background:rgba(255,255,255,.05);
  border:1px solid var(--edge);border-radius:8px;padding:.4rem .6rem;margin-bottom:.9rem;font-weight:600;
}
.product .foot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--edge);text-align:center;overflow:visible}
.product .foot>span:last-child{display:flex!important;align-items:stretch;justify-content:center;flex-wrap:nowrap;gap:.55rem!important;width:100%;min-width:0}
.price{font-weight:800;color:var(--text);font-size:1.04rem;white-space:nowrap;letter-spacing:-.02em}
.price .cur{font-size:.66rem;color:var(--faint);font-weight:700;letter-spacing:.1em;display:block;line-height:1;text-align:center}
.add-btn{
  background:linear-gradient(180deg,#A8DE7C,#7FC153);color:#0E1512;border:0;border-radius:99px;
  padding:.62rem .78rem;font-weight:800;font-size:.76rem;cursor:pointer;font-family:inherit;
  white-space:normal;line-height:1.2;min-height:40px;min-width:0;flex:1 1 56%;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  transition:transform .18s var(--ease),background .18s,box-shadow .18s,color .18s;
}
.add-btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,#C1ED9D,#91D066);box-shadow:0 8px 22px rgba(140,200,95,.28)}
.add-btn:focus-visible{outline:3px solid rgba(140,200,95,.48);outline-offset:3px;box-shadow:0 0 0 5px rgba(140,200,95,.12)}
.add-btn:active{transform:translateY(0) scale(.97)}
.add-btn.added{background:var(--surf-2);color:var(--green);box-shadow:inset 0 0 0 1px rgba(140,200,95,.4)}
/* WhatsApp on a card is secondary to "add to quote" */
.product .foot .btn-ghost{padding:.58rem .7rem;min-height:40px;font-size:.76rem;flex:1 1 44%;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;text-align:center}

/* Product WhatsApp action: a restrained double-beat, then a long rest. */
.product .foot a[href*="wa.me"]::before{
  content:"";width:16px;height:16px;flex:0 0 16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.16c-.24.68-1.4 1.3-1.94 1.34-.5.05-1.13.07-1.82-.11-.42-.13-.96-.31-1.65-.61-2.9-1.25-4.8-4.17-4.94-4.36-.15-.19-1.18-1.57-1.18-3s.75-2.13 1.02-2.42c.27-.29.58-.36.78-.36.19 0 .39 0 .56.01.18.01.42-.7.8.61.39.7 1.33 2.44 1.45 2.62.12.18.19.39.04.63-.15.24-.22.39-.44.6-.22.21-.46.47-.66.63-.22.18-.44.37-.19.73.25.36 1.11 1.83 2.38 2.96 1.63 1.45 3 1.9 3.42 2.11.42.21.67.18.92-.11.24-.29 1.06-1.24 1.34-1.66.28-.42.56-.35.94-.21.39.14 2.45 1.16 2.87 1.37.42.21.7.32.8.5.1.18.1 1.04-.14 1.72z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.16c-.24.68-1.4 1.3-1.94 1.34-.5.05-1.13.07-1.82-.11-.42-.13-.96-.31-1.65-.61-2.9-1.25-4.8-4.17-4.94-4.36-.15-.19-1.18-1.57-1.18-3s.75-2.13 1.02-2.42c.27-.29.58-.36.78-.36.19 0 .39 0 .56.01.18.01.42-.7.8.61.39.7 1.33 2.44 1.45 2.62.12.18.19.39.04.63-.15.24-.22.39-.44.6-.22.21-.46.47-.66.63-.22.18-.44.37-.19.73.25.36 1.11 1.83 2.38 2.96 1.63 1.45 3 1.9 3.42 2.11.42.21.67.18.92-.11.24-.29 1.06-1.24 1.34-1.66.28-.42.56-.35.94-.21.39.14 2.45 1.16 2.87 1.37.42.21.7.32.8.5.1.18.1 1.04-.14 1.72z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.product .foot a[href*="wa.me"]{position:relative;overflow:visible;animation:wa-card-heartbeat 5.2s ease-in-out infinite;transform-origin:center}
.product .foot a[href*="wa.me"]:hover{animation-play-state:paused;transform:translateY(-2px) scale(1.035);color:#fff;border-color:#31D77C;background:rgba(37,211,102,.18);box-shadow:0 0 0 1px rgba(37,211,102,.14),0 9px 24px rgba(37,211,102,.18)}
.product .foot a[href*="wa.me"]:focus-visible{animation-play-state:paused;outline:3px solid rgba(37,211,102,.44);outline-offset:3px;color:#fff;border-color:#31D77C;background:rgba(37,211,102,.18)}
.product .foot a[href*="wa.me"]:active{animation-play-state:paused;transform:scale(.96);background:#25D366;color:#092E1A}
@keyframes wa-card-heartbeat{0%,8%,16%,100%{transform:scale(1)}4%{transform:scale(1.055)}12%{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.product .foot a[href*="wa.me"]{animation:none}}

/* ---------- add-to-quotation picker ---------- */
.quote-picker{
  width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;
  border:1px solid var(--edge-2);border-radius:var(--r-lg);padding:0;
  background:var(--surf);color:var(--text-2);box-shadow:var(--shadow-lg);
}
.quote-picker::backdrop{background:rgba(8,12,10,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.quote-picker form{position:relative;padding:1.45rem}
.qp-close{position:absolute;right:.9rem;top:.75rem;width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:var(--glass);color:var(--text);font-size:1.65rem;line-height:1;cursor:pointer}
.qp-close:hover{border-color:var(--green);color:var(--green)}
.qp-head{display:grid;grid-template-columns:92px 1fr;gap:1rem;align-items:center;padding-right:2.2rem;margin-bottom:1.25rem}
.qp-img{width:92px;height:92px;border-radius:12px;background:var(--plate);display:flex;align-items:center;justify-content:center;padding:8px}
.qp-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.qp-code{display:inline-block;color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.qp-head h2{font-size:1.25rem;margin:.15rem 0 .15rem;line-height:1.25}
.qp-head p{margin:0;color:var(--faint);font-size:.84rem}
.qp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}
.qp-fields .field:first-child input{text-align:center}
.qp-note{font-size:.78rem;color:var(--faint);border-left:2px solid var(--amber);padding:.55rem .75rem;margin:1rem 0 0;background:var(--amber-tint);border-radius:0 8px 8px 0}
.qp-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1.2rem}
.qp-view{display:block;text-align:center;margin-top:.9rem;font-size:.84rem;font-weight:700}
@media (max-width:560px){
  .quote-picker form{padding:1.15rem}.qp-head{grid-template-columns:72px 1fr}.qp-img{width:72px;height:72px}
  .qp-fields{grid-template-columns:1fr}.qp-actions{flex-direction:column-reverse}.qp-actions .btn{width:100%}
}
@media (prefers-reduced-motion:no-preference){.quote-picker[open]{animation:qp-in .2s var(--ease)}@keyframes qp-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.75rem;min-height:88px}
.filter{
  background:var(--glass);border:1px solid var(--edge);border-radius:99px;padding:.5rem 1.05rem;
  font-size:.845rem;font-weight:600;cursor:pointer;color:var(--text-2);font-family:inherit;
  transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease);
}
.filter:hover{border-color:rgba(140,200,95,.42);color:var(--text);transform:translateY(-1px)}
.filter[aria-pressed="true"]{
  background:linear-gradient(180deg,#A8DE7C,#7FC153);border-color:transparent;color:#0E1512;
  font-weight:800;box-shadow:0 4px 14px rgba(140,200,95,.24);
}
.search-guide{margin-bottom:1.5rem;padding:1.4rem;border:1px solid rgba(140,200,95,.28);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(140,200,95,.12),rgba(255,255,255,.035));box-shadow:0 14px 34px rgba(0,0,0,.12)}
.search-guide-copy{max-width:720px;margin-bottom:1rem}
.search-guide-copy h2{font-size:clamp(1.22rem,2.4vw,1.65rem);margin:.2rem 0 .35rem}
.search-guide-copy p{margin:0;color:var(--mute);font-size:.92rem}
.toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between;margin-bottom:0;min-height:52px}
@media (max-width:640px){
  .filters{min-height:184px}      /* the pills wrap to more rows on a phone */
  .toolbar{min-height:96px}
}
.search{position:relative;flex:1;min-width:240px;max-width:660px}
.search label{display:block;margin-bottom:.45rem}
.search input{
  width:100%;padding:.95rem 1rem .95rem 2.8rem;border:1px solid var(--edge-2);border-radius:14px;
  font-size:1rem;font-family:inherit;color:var(--text);
  background:rgba(255,255,255,.06) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DABA2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .85rem center/1.05rem;
}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--green-glow)}
#result-count{min-width:9ch;display:inline-block}
.result-count{font-size:.87rem;color:var(--mute);font-weight:600}
.empty{padding:3rem 1.25rem;text-align:center;color:var(--mute);border:1px dashed rgba(140,200,95,.42);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(140,200,95,.08),var(--glass))}
.empty p{max-width:620px;margin-left:auto;margin-right:auto}
.empty-icon{width:54px;height:54px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;background:var(--green-tint);border:1px solid rgba(140,200,95,.35);color:var(--green);font-size:1.55rem;font-weight:800}
.empty-wa{margin-top:.65rem;background:#25D366;color:#092e1a;border-color:#25D366}
.empty-wa:hover{background:#38e578;color:#092e1a;border-color:#38e578}
@media (max-width:640px){.search-guide{padding:1.05rem}.search{min-width:100%}.result-count{width:100%}}

/* ---------- notes ---------- */
.note{
  border:1px solid var(--edge);border-left:3px solid var(--amber);
  background:var(--amber-tint);border-radius:var(--r);
  padding:1.1rem 1.35rem;font-size:.9rem;color:var(--text-2);
}
.note strong{color:var(--text)}
.note.green{border-left-color:var(--green);background:var(--green-tint)}
.note p:last-child{margin-bottom:0}

/* ---------- tables ---------- */
.table-wrap{
  overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r-lg);
  background:var(--glass);
}
table{border-collapse:collapse;width:100%;font-size:.89rem;min-width:520px}
th,td{padding:.75rem .95rem;text-align:left;border-bottom:1px solid var(--edge);vertical-align:top}
th{background:rgba(255,255,255,.05);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap}
td{color:var(--text-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.035)}
td.num,td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--text)}
@media (max-width:640px){
  .vendor-table table{min-width:0}
  .vendor-table tr{display:block;padding:.7rem .8rem;border-bottom:1px solid var(--edge)}
  .vendor-table tr:last-child{border-bottom:0}
  .vendor-table th,.vendor-table td{display:block;width:100%;padding:0;border:0;overflow-wrap:anywhere}
  .vendor-table th{margin-bottom:.25rem;white-space:normal;background:none;line-height:1.35}
  .vendor-table td a{display:inline-block;max-width:100%}
  /* The standards reference is a three-column table on desktop. On phones it
     becomes a labelled list, so the explanation never disappears off-screen. */
  .resource-standards table{min-width:0}
  .resource-standards thead{display:none}
  .resource-standards tr{display:block;padding:1rem;border-bottom:1px solid var(--edge)}
  .resource-standards tr:last-child{border-bottom:0}
  .resource-standards td{display:block;padding:0;border:0;overflow-wrap:anywhere}
  .resource-standards td+td{margin-top:.5rem}
  .resource-standards td:nth-child(2)::before,.resource-standards td:nth-child(3)::before{display:block;margin-bottom:.15rem;color:var(--faint);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  .resource-standards td:nth-child(2)::before{content:"Applies to"}
  .resource-standards td:nth-child(3)::before{content:"What it covers"}
}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
label{font-weight:700;font-size:.85rem;color:var(--text)}
label .req{color:var(--danger)}
.hint{font-size:.79rem;color:var(--faint);font-weight:500}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:.8rem .95rem;border:1px solid var(--edge);border-radius:var(--r);
  font-family:inherit;font-size:.95rem;background:rgba(255,255,255,.06);color:var(--text);
}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DABA2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1.05rem;padding-right:2.4rem;
}
select option{background:#1B2721;color:#E6EDE7}
textarea{min-height:140px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--green-glow)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.remember-details{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;margin:-.45rem 0 1.25rem;
  padding:.75rem .9rem;border:1px solid var(--edge);border-radius:var(--r);
  background:rgba(255,255,255,.04);
}
.remember-choice{display:inline-flex;align-items:center;gap:.55rem;margin:0;color:var(--text-2);font-size:.86rem}
.remember-choice input{width:1.05rem;height:1.05rem;accent-color:var(--green)}
.link-btn{
  margin-left:auto;background:none;border:0;color:var(--green);font:inherit;font-size:.82rem;
  font-weight:700;cursor:pointer;padding:.2rem 0;
}
.link-btn:hover{text-decoration:underline}
@media (max-width:560px){.link-btn{margin-left:0}}

/* ---------- quote basket ---------- */
.basket{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.6rem}
.quote-details{
  margin:-.55rem 0 1.6rem;
  background:rgba(255,255,255,.045);
}
.quote-details table{min-width:760px}
.quote-details th:first-child,.quote-details td:first-child{width:4.5rem}
.quote-details th:nth-child(4),.quote-details td:nth-child(4){width:5.5rem}
.quote-details td{font-size:.84rem}
.quote-details strong{display:block;font-size:.88rem;line-height:1.3}
.quote-code{
  display:inline-flex;align-items:center;min-height:24px;padding:.1rem .45rem;
  border-radius:6px;background:rgba(232,181,58,.12);color:var(--amber);
  font-weight:800;font-size:.74rem;letter-spacing:.04em;white-space:nowrap;
}
.quote-variant{display:block;margin-top:.18rem;color:var(--faint);font-size:.78rem;line-height:1.35}
.b-item{
  display:grid;grid-template-columns:66px 1fr auto auto;gap:1rem;align-items:center;
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);padding:.8rem;
}
.b-item .bi-img{width:66px;height:66px;background:var(--plate);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:7px}
.b-item .bi-img img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.b-item .bi-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.b-item .bi-name{display:block;font-weight:700;font-size:.92rem;color:var(--text);line-height:1.3}
.b-item .bi-meta{display:block;font-size:.78rem;color:var(--faint)}
/* quantity + the size and colour dropdowns. They wrap rather than squeeze,
   because a boot line carries a size and a conti suit carries size AND colour. */
.b-item .bi-opts{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}
.b-item .bi-opt{display:block}
.b-item .bi-opt input,.b-item .bi-opt select{
  padding:.5rem .6rem;font-size:.85rem;width:auto;min-width:0;
}
.b-item .bi-qty input{width:78px;text-align:center}
.b-item .bi-opt select{max-width:11rem;padding-right:1.9rem}
.b-item .rm{background:none;border:1px solid var(--edge);border-radius:9px;color:var(--mute);cursor:pointer;padding:.45rem .65rem;font-size:.84rem;font-family:inherit;transition:.18s;align-self:center}
.b-item .rm:hover{border-color:var(--danger);color:var(--danger)}
.opt-note{margin:-.9rem 0 1.5rem;padding:.7rem .85rem;border-left:2px solid var(--amber);
  background:rgba(232,181,58,.06);border-radius:0 8px 8px 0;line-height:1.55}
/* A line with a quantity, a size AND a colour needs about 700px. The basket
   sits in a column roughly 600px wide on a desktop, so a viewport media query
   asks the wrong question entirely — it reported "desktop, plenty of room"
   while a conti-suit row was squeezing its name down to one word per line.
   A container query asks the right one: how wide is the basket itself. */
.basket{container-type:inline-size}
@container (max-width:700px){
  .b-item{grid-template-columns:58px 1fr auto;grid-template-areas:"i n r" "i q q"}
  .b-item .bi-img{grid-area:i}.b-item .bi-txt{grid-area:n}
  .b-item .bi-opts{grid-area:q;justify-content:flex-start}
  .b-item .rm{grid-area:r;align-self:start}
  .b-item .bi-opt select{max-width:none;flex:1 1 8rem}
}
/* the same rules by viewport, for anything without container query support */
@media (max-width:640px){
  .b-item{grid-template-columns:58px 1fr auto;grid-template-areas:"i n r" "i q q"}
  .b-item .bi-img{grid-area:i}.b-item .bi-txt{grid-area:n}
  .b-item .bi-opts{grid-area:q;justify-content:flex-start}
  .b-item .rm{grid-area:r;align-self:start}
  .b-item .bi-opt select{max-width:none;flex:1 1 8rem}
}
.b-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:.35rem 1rem;
  flex-wrap:wrap;                 /* the label carries a long parenthetical; let
                                     it drop to its own line rather than crowd
                                     the figure, which is the thing being read */
  padding:1.1rem 1.25rem;background:var(--glass-2);border:1px solid var(--edge-2);
  border-radius:var(--r);font-weight:700;min-height:66px;color:var(--text);
}
.b-total > span:first-child{flex:1 1 14rem}
.b-total .amt{margin-left:auto;white-space:nowrap}
.b-total .amt{font-size:1.4rem;font-weight:800;color:var(--green);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- gallery ---------- */
.gallery{columns:3;column-gap:1.15rem}
.gallery figure{break-inside:avoid;margin:0 0 1.15rem;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--edge);background:var(--glass)}
.gallery picture{display:block}
.gallery img{width:100%;display:block}
.gallery figcaption{padding:.7rem .95rem;font-size:.8rem;color:var(--mute);background:rgba(255,255,255,.04);border-top:1px solid var(--edge)}
@media (max-width:900px){.gallery{columns:2}}
@media (max-width:560px){.gallery{columns:1}}

/* ---------- brand strip ---------- */
.brands{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.brand-chip{
  border:1px solid var(--edge);background:var(--glass);border-radius:99px;padding:.7rem 1.35rem;
  font-weight:800;letter-spacing:.06em;color:var(--text);font-size:.9rem;transition:.2s var(--ease);
}
.brand-chip:hover{border-color:rgba(140,200,95,.4);transform:translateY(-2px)}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.35rem;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;position:relative;padding-top:3rem}
.step::before{
  content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;
  font-size:1rem;font-weight:800;color:var(--green);background:var(--green-tint);
  border:1px solid rgba(140,200,95,.26);border-radius:12px;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:1.02rem;margin-bottom:.35rem}
.step p{font-size:.9rem;color:var(--mute);margin:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(680px 300px at 50% 0%, rgba(140,200,95,.20), transparent 70%), rgba(255,255,255,.04);
  border-block:1px solid var(--edge);
}
.cta-band h2{color:var(--text)}
.cta-band p{color:var(--mute);font-size:1.05rem}

/* ---------- footer ---------- */
.site-footer{
  background:rgba(8,12,10,.72);color:var(--mute);font-size:.9rem;padding:64px 0 0;
  border-top:1px solid var(--edge);
}
.site-footer h4{color:var(--text);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer a{color:var(--text-2)}
.site-footer a:hover{color:var(--green)}
.site-footer strong{color:var(--text)}
.f-grid{display:grid;grid-template-columns:1.35fr .85fr .85fr .85fr 1.45fr;gap:2.25rem}
@media (max-width:1100px){.f-grid{grid-template-columns:1fr 1fr 1fr;gap:2rem}}
@media (max-width:760px){.f-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-grid ul{list-style:none;padding:0;margin:0}
/* A telephone number broken across two lines is unreadable and un-diallable —
   keep each contact line whole even when the column is tight. */
.f-grid address a,.f-grid address strong{white-space:nowrap}
.f-grid address{font-style:normal;line-height:1.75}
.f-grid li{margin-bottom:.5rem}
.f-logo{background:#fff;border-radius:12px;padding:10px 13px;display:inline-block;margin-bottom:1.1rem}
.f-logo img{height:40px;width:auto}
/* Keep the final footer line clear of the fixed WhatsApp button at every width. */
.f-bottom{border-top:1px solid var(--edge);margin-top:2.75rem;padding:1.35rem 0 calc(1.35rem + 62px);font-size:.81rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;color:var(--faint)}
@media (max-width:1000px){.f-bottom{padding-bottom:calc(1.35rem + 62px + env(safe-area-inset-bottom))}}
address{font-style:normal;line-height:1.75}

/* ---------- floating WhatsApp ---------- */
/* ---------- the "who is this quote for?" dialog ----------
   A native <dialog>: it gives focus trapping, Escape-to-close and inertness of
   the page behind it without a line of script, which a hand-rolled overlay
   would have to reimplement and usually gets wrong. */
.pdf-dialog{
  border:1px solid var(--edge-2);border-radius:var(--r-lg);padding:0;
  background:var(--surf);color:var(--text-2);
  max-width:min(560px,calc(100vw - 32px));width:100%;
  max-height:calc(100dvh - 28px);overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.pdf-dialog::backdrop{background:rgba(8,12,10,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pdf-dialog form{padding:1.5rem 1.6rem 1.6rem}
.pdf-dialog h2{font-size:1.15rem;margin-bottom:.35rem}
.pdf-dialog .hint{margin-bottom:1.1rem}
.pdf-fields{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.pdf-fields .full{grid-column:1/-1}
.pdf-dialog .field label{display:block;font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:.3rem}
.pdf-dialog .field input{width:100%}
.pdf-dialog .form-status{margin:.9rem 0 0}
/* the browser's own :invalid styling fires before the visitor has typed
   anything, which looks like an error they have not made yet */
.pdf-dialog .field input:user-invalid{border-color:var(--danger)}
@media (max-width:520px){
  .pdf-fields{grid-template-columns:1fr}
  .pdf-dialog form{padding:1.25rem 1.15rem 1.35rem}
}
@media (prefers-reduced-motion:no-preference){
  .pdf-dialog[open]{animation:pdf-in .22s var(--ease)}
  @keyframes pdf-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}

/* ---------- floating contact button ----------
   Built on <details>/<summary> rather than a JS toggle, so it still opens and
   every number is still a real link with JavaScript switched off. This is the
   site's most-used contact route; it must not depend on script running.

   The heartbeat is deliberately a burst-then-rest cycle rather than a constant
   throb, it stops the moment the button is hovered, focused or opened, and it
   is switched off entirely under prefers-reduced-motion. A permanently
   animating element in the corner of every page is a vestibular trigger and a
   WCAG 2.2.2 problem; a couple of beats every four seconds reads as alive
   without nagging. */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:85;transition:opacity .16s ease,transform .16s ease}
.wa-float[open]{z-index:95}
.wa-float summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wa-float summary::-webkit-details-marker{display:none}
.wa-float summary::marker{content:""}

.wa-fab{
  position:relative;
  background:linear-gradient(180deg,#4FE68E,#2FC46E);color:#04301A;
  width:52px;height:52px;border-radius:50%;padding:0;font-weight:800;font-size:.9rem;
  /* justify-content is load-bearing: the .lbl label is hidden, so without it
     the lone WhatsApp icon lands at flex-start and sits hard against the left
     edge of the circle instead of in the middle. */
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;line-height:1;
  /* No 300ms double-tap delay and no accidental pinch-zoom while tapping. */
  touch-action:manipulation;
  /* a steady halo, plus the depth shadow — the halo does not animate */
  box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 22px rgba(61,216,126,.42);
  transition:transform .22s var(--ease),box-shadow .3s;
  /* A FINITE burst, not a perpetual throb. ONE cycle is 4s, which is under the
     five-second threshold WCAG 2.2.2 draws for motion that starts on its own:
     a single lub-dub is enough to be noticed and it has settled before anyone
     tries to press it. The steady glow above stays; the motion stops.
     initFloatingContact() replays two beats when a product is added to the
     quote -- that one is user-initiated, so it does not have to obey the same
     limit. Do not raise the count here. */
  animation:wa-beat 4s var(--ease) 1;
}
.wa-fab .lbl{display:none}
.wa-fab:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wa-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 34px rgba(0,0,0,.46),0 0 30px rgba(61,216,126,.6)}
/* Touch screens have no real hover: a tap leaves :hover stuck on, so the button
   used to stay lifted until the next tap elsewhere. Keep the lift for pointers
   that can hover and give taps their own immediate press instead. */
@media (hover:none){
  .wa-fab:hover{transform:none;box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 22px rgba(61,216,126,.42)}
}
.wa-fab:active{animation:none;transform:scale(.96);transition-duration:.1s}

/* Two rings, offset in time, so each beat throws its own pulse outwards. */
.wa-ring{
  position:absolute;inset:0;border-radius:99px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(61,216,126,.55);
  animation:wa-ring 4s var(--ease) 1;
}
.wa-ring-2{animation-delay:.42s}

@keyframes wa-beat{
  /* lub - dub - rest, the shape of a real heartbeat rather than a sine wave */
  0%,34%,100%{transform:scale(1)}
  6%{transform:scale(1.085)}
  13%{transform:scale(1)}
  20%{transform:scale(1.055)}
  27%{transform:scale(1)}
}
@keyframes wa-ring{
  0%{box-shadow:0 0 0 0 rgba(61,216,126,.5)}
  14%{box-shadow:0 0 0 15px rgba(61,216,126,0)}
  100%{box-shadow:0 0 0 15px rgba(61,216,126,0)}
}

/* It has done its job once the visitor has noticed it. */
.wa-float[open] .wa-fab,.wa-fab:hover,.wa-fab:focus-visible{animation:none}
/* replayed by script when the quote list changes */
.wa-float.wa-again .wa-fab{animation:wa-beat 4s var(--ease) 2}
.wa-float.wa-again .wa-ring{animation:wa-ring 4s var(--ease) 2}
.wa-float.wa-again .wa-ring-2{animation-delay:.42s}
.wa-float[open] .wa-ring,.wa-fab:hover .wa-ring,.wa-fab:focus-visible .wa-ring{animation:none;box-shadow:none}

/* icon swap */
.wa-ico{transition:transform .28s var(--ease),opacity .2s}
/* 24px glyph in a 52px target (the Material 24-in-56 ratio, and comfortably
   inside the 44px minimum touch target). The markup carries width/height="20"
   for the no-CSS case; this is the visual size. */
.wa-fab .wa-ico{width:24px;height:24px}
/* Centred on the circle's own axis rather than a hard-coded left offset, so it
   stays put whatever the icon or button size becomes. */
.wa-ico-x{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.6)}
.wa-float[open] .wa-ico-wa{opacity:0;transform:rotate(90deg) scale(.6)}
.wa-float[open] .wa-ico-x{opacity:1;transform:translate(-50%,-50%)}
.wa-float[open] .wa-fab{background:linear-gradient(180deg,#2FC46E,#23A75B)}

/* ---- the panel that flies out ---- */
.wa-pop{
  position:absolute;right:0;bottom:calc(100% + 12px);
  display:flex;flex-direction:column;gap:.5rem;
  /* Flat fallback first, then the shrinkable value for browsers with min(). */
  min-width:262px;
  min-width:min(262px, calc(100vw - 30px));
  max-width:calc(100vw - 30px);
  /* Never taller than the space above the button. Short landscape phones and
     small laptops previously pushed the first option off the top of the
     screen; the panel now scrolls inside itself instead. */
  max-height:calc(100vh - 140px);
  max-height:calc(100dvh - 140px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.wa-opt{
  display:flex;align-items:center;gap:.7rem;
  background:rgba(20,30,25,.92);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge-2);border-radius:14px;padding:.62rem .8rem;
  box-shadow:var(--shadow-lg);color:var(--text);
  transform-origin:bottom right;
  opacity:0;transform:translateY(16px) scale(.86);
  transition:border-color .18s,background .18s;
}
.wa-opt:hover{text-decoration:none;background:rgba(30,44,36,.96);border-color:var(--green)}
.wa-badge{
  flex:0 0 34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#4FE68E,#2FC46E);color:#04301A;
}
.wa-mail .wa-badge{background:linear-gradient(180deg,#F0C255,#E0A625);color:#14181C}
.wa-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.wa-txt strong{font-size:.86rem;font-weight:700;color:var(--text);line-height:1.25}
.wa-txt small{font-size:.78rem;color:var(--mute);font-variant-numeric:tabular-nums}

/* The explode: nearest option first, so it reads as bursting out of the button. */
.wa-float[open] .wa-opt{animation:wa-burst .36s var(--ease) forwards}
.wa-float[open] .wa-opt:nth-child(3){animation-delay:0s}
.wa-float[open] .wa-opt:nth-child(2){animation-delay:.055s}
.wa-float[open] .wa-opt:nth-child(1){animation-delay:.11s}
@keyframes wa-burst{
  0%{opacity:0;transform:translateY(16px) scale(.86)}
  60%{opacity:1;transform:translateY(-3px) scale(1.02)}
  100%{opacity:1;transform:none}
}
/* closing is driven by JS so it can animate out before <details> collapses */
.wa-float.wa-closing .wa-opt{animation:wa-unburst .17s ease-in forwards}
@keyframes wa-unburst{to{opacity:0;transform:translateY(10px) scale(.9)}}

@media (max-width:1000px){
  /* The 0px fallbacks matter: a browser that does not understand env() would
     otherwise drop the whole declaration and fall back to the desktop inset,
     which on a notched phone puts the button under the home indicator or the
     rounded corner. All pages also carry viewport-fit=cover, without which
     env(safe-area-inset-*) is always 0 on iOS. */
  .wa-float{
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    right:calc(14px + env(safe-area-inset-right, 0px));
  }
}
/* Do not cover the field a visitor is currently trying to complete. The
   contact control returns as soon as focus leaves the form. */
@supports selector(body:has(input:focus)){
  body:has(input:focus,select:focus,textarea:focus) .wa-float{
    opacity:0;pointer-events:none;transform:translateY(16px);
  }
}

/* Motion is a nicety; legibility is not. Under reduced motion the button still
   glows and the panel still appears — it simply does not move. */
@media (prefers-reduced-motion:reduce){
  .wa-fab,.wa-ring{animation:none!important}
  .wa-ring{box-shadow:none}
  .wa-fab:hover{transform:none}
  .wa-float[open] .wa-opt{animation:none;opacity:1;transform:none}
  .wa-float.wa-closing .wa-opt{animation:none}
  .wa-ico{transition:none}
}

/* Windows High Contrast / forced-colors. The glyph is a white SVG image, so it
   is not recoloured by the OS; keep the brand green behind it (otherwise it can
   land white-on-white in the light theme) and add a system-coloured edge so the
   target is unmistakable in either HC theme. */
@media (forced-colors:active){
  .wa-fab{
    forced-color-adjust:none;
    background:#2FC46E;color:#04301A;
    border:2px solid ButtonText;
    box-shadow:none;
  }
  .wa-float[open] .wa-fab{background:#23A75B}
  .wa-opt{border-color:ButtonText}
}

/* ---------- article ---------- */
.article{max-width:760px}
.article h2{margin-top:2.5rem}
.article h3{margin-top:1.9rem}
.article ul li{margin-bottom:.55rem}
.toc{
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:1.35rem 1.6rem;margin-bottom:2.25rem;
}
.toc-title{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 .7rem;font-weight:800}
.toc ul{margin:0;padding-left:1.1rem}
.meta{font-size:.82rem;color:var(--faint);margin-bottom:1.6rem}

.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}
.skip{position:absolute;left:-9999px;background:var(--green);color:#0E1512;padding:.8rem 1.35rem;z-index:100;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0;top:0}

/* ========================================================================== 
   PRIMARY FLOATING NAVIGATION — reference-style raised active tab
   ========================================================================== */
@property --notch-x{
  syntax:'<percentage>';
  inherits:true;
  initial-value:50%;
}
.hn-nav{
  --notch-x:50%;
  --lift:35px;
  display:block;position:fixed;left:50%;width:min(720px,calc(100% - 28px));
  transform:translateX(-50%);
  top:calc(10px + env(safe-area-inset-top));bottom:auto;
  z-index:80;padding-top:var(--lift);transition:--notch-x var(--motion-beat) cubic-bezier(.22,.78,.28,1);
}
body{padding-top:0;padding-bottom:24px}

.hn-bar{
  position:relative;height:82px;border-radius:25px;
  background:rgba(244,250,241,.52);border:1px solid rgba(255,255,255,.68);
  box-shadow:0 8px 22px rgba(2,13,7,.14),inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(105,167,63,.12);
  /* A clean, flowing scoop cradles the selected button.  The bar alone is
     translucent; the button never inherits its blur or transparency. */
  -webkit-mask-image:radial-gradient(ellipse 116px 78px at var(--notch-x) -7px,
    transparent 0 52px,rgba(0,0,0,.12) 55px,
    rgba(0,0,0,.55) 60px,#000 65px);
          mask-image:radial-gradient(ellipse 116px 78px at var(--notch-x) -7px,
    transparent 0 52px,rgba(0,0,0,.12) 55px,
    rgba(0,0,0,.55) 60px,#000 65px);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* The precise SVG-like path is supplied at runtime where supported. This
   preserves the glass blur while drawing a continuous liquid curve. */
.hn-bar.is-fluid{-webkit-mask-image:none;mask-image:none;border:0}
.hn-items{position:absolute;inset:var(--lift) 0 0;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;padding:9px 65px 12px}
.hn-item{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;height:100%;padding:0 2px;
  background:none;border:0;cursor:pointer;font-family:inherit;color:#34423a;
  text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:background .22s ease,color .22s ease,transform .28s var(--ease);
}
/* Six distinct shades are drawn from Hanekom green, deep industrial green,
   and safety gold. The active puck uses the same shade as its destination. */
.hn-item:nth-child(1){--item-fill:#69A73F;--item-ring:#DAB416;--item-ink:#121A16;--item-hover:#E0F0D5;--item-text:#315F1D}
.hn-item:nth-child(2){--item-fill:#3E7723;--item-ring:#8CC85F;--item-ink:#F2CA46;--item-hover:#D5E9C9;--item-text:#2E5C1D}
.hn-item:nth-child(3){--item-fill:#DAB416;--item-ring:#3E7723;--item-ink:#121A16;--item-hover:#F5E8B8;--item-text:#655000}
.hn-item:nth-child(4){--item-fill:#5FA83C;--item-ring:#DAB416;--item-ink:#121A16;--item-hover:#E6F2D8;--item-text:#336822}
.hn-item:nth-child(5){--item-fill:#274D36;--item-ring:#8CC85F;--item-ink:#F2CA46;--item-hover:#D8E9DE;--item-text:#274D36}
.hn-item:nth-child(6){--item-fill:#8CC85F;--item-ring:#3E7723;--item-ink:#121A16;--item-hover:#EAF4DB;--item-text:#3E7723}
.hn-item:focus-visible,.hn-item.is-preview{background:transparent;color:#1D3324;transform:none}
.hn-item.is-preview{justify-content:flex-end;padding-bottom:2px}
@media (hover:hover) and (pointer:fine){
  .hn-item:hover{text-decoration:none;background:transparent;color:#1D3324;transform:none}
}
.hn-item.is-preview .ico{display:none}
.hn-item.is-preview .lbl{font-weight:850;color:#172D1E}
.hn-item.is-preview .hn-badge{visibility:visible}
.hn-item .ico{width:25px;height:25px;display:block;transition:transform .28s var(--ease),opacity .2s,color .2s}
.hn-search-item{border:0;background:transparent;font:inherit;cursor:pointer}
.hn-search-item .ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hn-item .lbl{font-size:12px;font-weight:750;line-height:1.15;white-space:nowrap;color:#102418;text-shadow:0 1px 1px rgba(255,255,255,.8);transition:color .2s,font-weight .2s}
.hn-item:focus-visible{outline:none}
.hn-item:focus-visible .lbl{text-decoration:underline;text-decoration-color:var(--item-fill);text-decoration-thickness:2px;text-underline-offset:4px}
.hn-item[aria-current]{color:#121A16;justify-content:flex-end;padding-bottom:2px}
.hn-item[aria-current] .lbl{font-weight:850;color:#102418}
.hn-item[aria-current] .ico{display:none}

.hn-puck{
  position:absolute;top:2px;left:var(--notch-x);width:66px;height:66px;margin-left:-33px;
  border-radius:50%;background:var(--puck-color,#69A73F);border:3px solid var(--puck-ring,#DAB416);
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,255,255,.04) 48%,rgba(5,32,13,.12)),
    color-mix(in srgb,var(--puck-color,#69A73F) 68%,transparent);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);backdrop-filter:blur(9px) saturate(1.2);
  display:flex;align-items:center;justify-content:center;color:var(--puck-ink,#fff);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.58),inset 0 -2px 6px rgba(4,26,10,.12),0 8px 20px rgba(2,18,7,.14);
  z-index:3;pointer-events:none;
  transition:left var(--motion-beat) cubic-bezier(.22,.78,.28,1),
    background .24s ease,border-color .24s ease,color .24s ease;
}
/* Hover keeps the icon in the dock with a quiet glass-like glint. */
.hn-item.is-preview{justify-content:center;padding-bottom:0}
.hn-item.is-preview .ico{display:block;transform:translateY(-2px);color:#274D36;filter:drop-shadow(0 1px 3px rgba(255,255,255,.55))}
.hn-item.is-preview .lbl{font-weight:800;color:#1D3324}
/* Navigation hover accents stay inside each fixed-size tab. */
.hn-item .lbl{position:relative}
.hn-item .lbl::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  border-radius:2px;background:var(--item-fill);transform:scaleX(0);transform-origin:center;
}
.hn-item.is-preview .lbl::after,.hn-item:focus-visible .lbl::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .hn-item[aria-current]:hover .lbl::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:no-preference){
  .hn-item .lbl::after{transition:transform .24s var(--ease)}
  .hn-item.is-preview .ico{animation:hn-hover-lift .42s cubic-bezier(.22,.78,.28,1) both}
  .hn-nav:has(.hn-item[aria-current]:focus-visible) .hn-puck .ico{
    animation:hn-hover-puck .42s cubic-bezier(.22,.78,.28,1) both;
  }
  @media (hover:hover) and (pointer:fine){
    .hn-nav:has(.hn-item[aria-current]:hover) .hn-puck .ico{
      animation:hn-hover-puck .42s cubic-bezier(.22,.78,.28,1) both;
    }
  }
  @keyframes hn-hover-lift{
    0%{transform:translateY(0) scale(1)}
    60%{transform:translateY(-5px) scale(1.12)}
    100%{transform:translateY(-3px) scale(1.06)}
  }
  @keyframes hn-hover-puck{
    0%{transform:scale(1)}
    60%{transform:translateY(-2px) scale(1.12)}
    100%{transform:scale(1.06)}
  }
}
@media (prefers-reduced-motion:reduce){
  .hn-item.is-preview .ico{transform:none}
}
.hn-puck .ico{width:34px;height:34px}
.hn-item .ico-solid{--icon-cut:#EAF3E5}
.hn-search-item .ico-solid{stroke:none}
.hn-puck .ico-solid{--icon-cut:var(--puck-color,#69A73F)}
@media (max-width:700px){.hn-puck .ico-3d{width:30px;height:30px}}
.hn-puck::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,255,255,.52);z-index:-1}
.hn-nav.is-hopping.is-forward .hn-puck{
  animation:hn-nav-hop-forward var(--motion-beat) cubic-bezier(.22,.78,.28,1);
}
.hn-nav.is-hopping.is-backward .hn-puck{
  animation:hn-nav-hop-backward var(--motion-beat) cubic-bezier(.22,.78,.28,1);
}
.hn-nav.is-hopping .hn-item.is-next{
  animation:hn-nav-button-hop var(--motion-beat) cubic-bezier(.22,.78,.28,1);
}
.hn-nav.is-hopping .hn-puck,.hn-nav.is-hopping .hn-item.is-next{will-change:transform}
@keyframes hn-nav-hop-forward{
  0%{transform:translateY(0) rotate(0) scale(1,1)}
  18%{transform:translateY(-18px) rotate(8deg) scale(.96,1.05)}
  48%{transform:translateY(-42px) rotate(18deg) scale(1.06,.96)}
  76%{transform:translateY(6px) rotate(3deg) scale(1.08,.9)}
  90%{transform:translateY(-5px) rotate(-2deg) scale(.98,1.03)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes hn-nav-hop-backward{
  0%{transform:translateY(0) rotate(0) scale(1,1)}
  18%{transform:translateY(-18px) rotate(-8deg) scale(.96,1.05)}
  48%{transform:translateY(-42px) rotate(-18deg) scale(1.06,.96)}
  76%{transform:translateY(6px) rotate(-3deg) scale(1.08,.9)}
  90%{transform:translateY(-5px) rotate(2deg) scale(.98,1.03)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes hn-nav-button-hop{
  0%{transform:translateY(0)}
  42%{transform:translateY(-14px) scale(1.05)}
  72%{transform:translateY(3px) scale(.98)}
  100%{transform:translateY(0)}
}

.hn-badge{
  position:absolute;min-width:20px;height:20px;padding:0 5px;
  background:var(--amber);color:#14181C;border-radius:99px;border:2.5px solid #fff;
  font-size:11px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;z-index:4;
}
.hn-item .hn-badge{top:10px;right:calc(50% - 20px)}
.hn-puck .hn-badge{top:-3px;right:-5px;border-color:#fff}
.hn-grip{display:none}
@media (max-width:700px){.hn-items{padding-left:36px;padding-right:36px}}
@media (max-width:380px){
  .hn-nav{width:calc(100% - 16px);top:calc(8px + env(safe-area-inset-top))}.hn-items{padding-left:28px;padding-right:28px}.hn-item .lbl{font-size:9px;letter-spacing:.01em}.hn-puck{width:62px;height:62px;margin-left:-31px;top:4px}.hn-puck::after{inset:-4px}
  .hn-item .ico{width:23px;height:23px}.hn-grip{width:96px}
}
@media (max-width:320px){
  .hn-nav{width:calc(100% - 12px)}
  .hn-items{padding-left:16px;padding-right:16px}
}
@media (max-width:300px){.hn-items{padding-left:10px;padding-right:10px}.hn-item .lbl{font-size:8px}}

@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .hn-nav{top:calc(4px + env(safe-area-inset-top));padding-top:0}
  .hn-bar{height:60px;border-radius:18px;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .hn-items{inset:0;padding:3px 34px}
  .hn-item,.hn-item[aria-current]{justify-content:center;padding:0 2px;gap:1px}
  .hn-item .ico,.hn-item[aria-current] .ico{display:block;width:20px;height:20px}
  .hn-item .lbl{font-size:11px}
  .hn-puck{display:none}
  .page-head{padding-top:96px}
  .hero-inner{padding-top:100px}
  .site-search-strip{top:calc(72px + env(safe-area-inset-top))}
  .wa-pop{max-height:calc(100dvh - 160px);overflow-y:auto}
  .wa-float{right:10px;bottom:10px}
  .wa-fab{padding:.7rem}
}

/* At the top edge, keep the mobile hop subtle so the active puck remains
   fully visible instead of jumping outside the viewport. */
@media (hover:none),(pointer:coarse){
  @keyframes hn-nav-hop-forward{
    0%,100%{transform:translateY(0) rotate(0) scale(1)}
    45%{transform:translateY(-7px) rotate(7deg) scale(1.04,.97)}
    75%{transform:translateY(3px) rotate(1deg) scale(1.02,.98)}
  }
  @keyframes hn-nav-hop-backward{
    0%,100%{transform:translateY(0) rotate(0) scale(1)}
    45%{transform:translateY(-7px) rotate(-7deg) scale(1.04,.97)}
    75%{transform:translateY(3px) rotate(-1deg) scale(1.02,.98)}
  }
  @keyframes hn-nav-button-hop{
    0%,100%{transform:translateY(0)}
    45%{transform:translateY(-5px) scale(1.03)}
    75%{transform:translateY(2px) scale(.99)}
  }
}

/* Frosted dock and tinted glass button; the icon glyph stays crisp. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hn-bar{
    background:linear-gradient(135deg,rgba(255,255,255,.57),rgba(236,247,231,.47) 55%,rgba(255,255,255,.52));
    -webkit-backdrop-filter:blur(13px) saturate(1.18);
    backdrop-filter:blur(13px) saturate(1.18);
  }
  @media (hover:none),(pointer:coarse){
    .hn-bar{
      background:linear-gradient(135deg,rgba(255,255,255,.63),rgba(236,247,231,.54));
      -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    }
  }
}
@media (prefers-reduced-transparency:reduce),(forced-colors:active){
  .hn-bar{background:#f8fbf6;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hn-puck{background:var(--puck-color,#69A73F);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:700px){body::after{filter:blur(12px) saturate(.55) brightness(.42)}}

/* ==========================================================================
   Motion — content is visible at rest; this is arrival polish only
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

@media print{
  body::before,body::after{display:none}
  .site-header,.topbar,.site-footer,.wa-float,.btn,.filters,.toolbar,.hn-nav{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;padding:0}
  .card,.product,.table-wrap{background:#fff;border-color:#bbb;backdrop-filter:none}
  h1,h2,h3,h4,td,th,p,li,.lead{color:#000}
}

/* ---------- product detail page ---------- */
.pdp{grid-template-columns:.95fr 1.05fr;align-items:start;gap:2.75rem}
@media (max-width:960px){.pdp{grid-template-columns:1fr;gap:1.75rem}}
.pdp-media{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--plate);
  padding:34px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--edge);box-shadow:var(--shadow-lg);
}
.pdp-media picture{display:contents}
.pdp-media img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pdp-media .code{
  position:absolute;top:16px;left:16px;background:rgba(13,19,16,.88);color:#fff;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;padding:.3rem .7rem;border-radius:8px;
}
.pdp-info h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:.35rem}
.pdp-var{color:var(--faint);font-size:1rem;margin:0 0 1rem}
.pdp-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem 1rem;
  margin:1.5rem 0 .5rem;padding:1.1rem 1.3rem;
  background:var(--glass-2);border:1px solid var(--edge-2);border-radius:var(--r);
}
.pdp-price .cur{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--faint)}
.pdp-price .amt{font-size:2rem;font-weight:800;color:var(--green);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pdp-price .pdp-note{font-size:.76rem;color:var(--faint);flex-basis:100%;line-height:1.5}
.pdp-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin:1.75rem 0}
@media (max-width:520px){.pdp-spec{grid-template-columns:1fr}}
.pdp-spec > div{background:rgba(255,255,255,.04);padding:.85rem 1.05rem}
.pdp-spec dt{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:800;margin-bottom:.25rem}
.pdp-spec dd{margin:0;font-size:.92rem;color:var(--text);font-weight:600}

/* the whole product photo is a link to its page */
.product .ph-link{position:absolute;inset:0;z-index:2}
.product h3 a{color:inherit;text-decoration:none}
.product h3 a:hover{color:var(--green)}

/* ---------- starter kits (empty quote list) ---------- */
.empty.kits{padding:2rem 1.5rem;text-align:left}
.empty.kits > p{text-align:center}
.kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;margin:1.5rem 0;min-height:330px}
@media (max-width:640px){.kit-grid{min-height:664px}}
@media (max-width:640px){.kit-grid{grid-template-columns:1fr}}
.kit{
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  padding:.95rem 1rem 1.05rem;cursor:pointer;font-family:inherit;text-align:left;
  transition:transform .2s var(--ease),border-color .2s,background .2s;
}
.kit:hover{transform:translateY(-2px);border-color:rgba(140,200,95,.4);background:var(--glass-2)}
.kit-imgs{display:flex;gap:-4px;margin-bottom:.55rem}
.kit-imgs i{
  width:38px;height:38px;border-radius:9px;background:var(--plate);
  display:flex;align-items:center;justify-content:center;padding:4px;
  margin-right:-8px;border:2px solid var(--surf);
}
.kit-imgs i:last-child{margin-right:0}
.kit-imgs img{max-width:100%;max-height:100%;width:auto;mix-blend-mode:multiply}
.kit-name{font-weight:800;color:var(--text);font-size:.95rem;line-height:1.3}
.kit-blurb{font-size:.81rem;color:var(--mute);line-height:1.45}
.kit-meta{font-size:.74rem;color:var(--green);font-weight:700;letter-spacing:.03em;margin-top:.35rem}

/* ---------- conversion microcopy ---------- */
.promise{
  display:flex;align-items:center;gap:.5rem;margin:1rem 0 0;
  font-size:.86rem;color:var(--green);font-weight:600;
}
.trust-strip{
  margin:1.25rem 0 0;text-align:center;font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
}

/* ---------- form status: never let a failure look like a success ---------- */
.form-status{
  margin:1.1rem 0 0;padding:1rem 1.15rem;border-radius:var(--r);
  border:1px solid var(--edge);border-left:3px solid var(--mute);
  background:rgba(255,255,255,.05);font-size:.9rem;color:var(--text-2);
}
.form-status strong{color:var(--text)}
.form-status.warn{border-left-color:var(--amber);background:var(--amber-tint)}
.form-status.error{border-left-color:var(--danger);background:rgba(240,131,121,.10)}
.form-status.busy{border-left-color:var(--green);background:var(--green-tint)}
.form-status .fs-detail{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;color:var(--danger);background:rgba(0,0,0,.25);
  padding:.1rem .4rem;border-radius:5px;margin:0 .15rem;
}
.form-status .fs-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.85rem}

/* honest marker where one photo stands for several colour options */
.product .var-note{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  color:var(--amber);background:var(--amber-tint);border:1px solid rgba(232,181,58,.3);
  padding:.06rem .4rem;border-radius:5px;vertical-align:middle;
}

/* a form built without a working endpoint says so, with or without JavaScript */
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
form[data-form-offline] .promise{display:none}

@media (prefers-reduced-motion:reduce){
  .hn-nav.is-hopping .hn-puck,.hn-nav.is-hopping .hn-item.is-next{animation:none}
}

/* ==========================================================================
   Working indicator — the gear from the Hanekom mark
   Used ONLY where there is genuine waiting: a form being sent, a slow filter.
   Deliberately NOT a page-transition curtain: on a static site the browser
   already reports progress, and an artificial overlay would delay first paint
   and could mask a real failure.
   ========================================================================== */
.hn-gear{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.25em;height:1.25em;flex:none;vertical-align:-.28em;
}
.hn-gear svg{width:100%;height:100%;fill:currentColor}
.hn-gear .g-a{animation:hn-spin 2.6s linear infinite;transform-origin:50% 50%}
.hn-gear .g-b{
  animation:hn-spin 2.6s linear infinite reverse;transform-origin:50% 50%;
  opacity:.55;
}
@keyframes hn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hn-gear .g-a,.hn-gear .g-b{animation:none}
  .hn-gear .g-b{opacity:.35}
}
.form-status.busy .hn-gear{color:var(--green)}

/* two gears meshing, at the size of a line of text */
.hn-gear.duo{width:1.6em;height:1.25em}
.hn-gear.duo .g-b{transform:translate(9px,4px) scale(.62)}

/* where the supplied photograph is not the product itself */
.product .ph-note{
  position:absolute;bottom:10px;left:10px;z-index:3;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#14181C;background:var(--amber);border-radius:5px;padding:.14rem .45rem;
}