/* ============================================================
   ZULUSTEEL — Design System
   Bulawayo, Zimbabwe · Steel merchant & processor
   ------------------------------------------------------------
   Visual thesis: the engineering drawing. Section profiles,
   dimension lines and mill-certificate numbers are the content,
   so they are also the ornament. Metal is rendered as machined
   surface (anisotropic brushed gradients + specular sweep),
   never as photographic texture. Tread plate appears only as a
   low-opacity structural accent.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Core palette — light metallic. Reads off BSi's navy/white, with brushed
     silver as the material and molten orange as the action colour. */
  --paper:      #FFFFFF;   /* card / panel face */
  --hull:       #EDF1F6;   /* page canvas — cool light steel */
  --plate:      #FFFFFF;   /* raised panel */
  --plate-hi:   #F7FAFD;   /* hovered panel */
  --ink:        #0B1420;   /* deep navy — footer and contrast bands */
  --ink-2:      #142235;
  --head:       #0E1A2B;   /* headings */
  --brand:      #2C375B;   /* ZuluSteel navy (BSi lineage) */
  --arc:        #0F62C4;   /* arc-weld blue — links, focus, active */
  --arc-deep:   #0B4C99;
  --molten:     #E05410;   /* steel at temperature — primary action */
  --spark:      #D98209;   /* highlight, specials */
  --mill:       #3A4757;   /* body text */
  --mill-dim:   #64717F;   /* secondary text */
  --mill-faint: #93A0AE;   /* tertiary, captions */

  /* Structural lines */
  --rule:       rgba(14,26,43,.11);
  --rule-strong:rgba(14,26,43,.22);
  --rule-arc:   rgba(15,98,196,.32);

  /* Machined metal surfaces — brushed silver, lit from above */
  --metal-face: linear-gradient(158deg,#FFFFFF 0%,#F2F6FA 40%,#FFFFFF 68%,#E9EFF5 100%);
  --metal-edge: linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 45%);
  --metal-bright: linear-gradient(102deg,#7A8798 0%,#2C375B 20%,#5B6B80 38%,#141F30 52%,#6E7C8E 72%,#39465C 100%);
  --brushed: repeating-linear-gradient(96deg,
              rgba(14,26,43,.022) 0px, rgba(14,26,43,.022) 1px,
              rgba(255,255,255,.85) 1px, rgba(255,255,255,.85) 2px,
              rgba(14,26,43,.012) 2px, rgba(14,26,43,.012) 3px);

  /* Type */
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --data:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (fluid) */
  --t-hero:  clamp(2.6rem, 6.2vw, 5.4rem);
  --t-h1:    clamp(2.1rem, 4.6vw, 3.9rem);
  --t-h2:    clamp(1.65rem, 3.1vw, 2.75rem);
  --t-h3:    clamp(1.15rem, 1.8vw, 1.5rem);
  --t-lead:  clamp(1.02rem, 1.35vw, 1.2rem);
  --t-body:  1rem;
  --t-small: .875rem;
  --t-micro: .72rem;

  /* Rhythm */
  --gut: clamp(1.15rem, 3.4vw, 2.6rem);
  --sec: clamp(4rem, 9vw, 8.5rem);
  --shell: 1320px;
  --radius: 3px;      /* steel is cut, not moulded — keep corners tight */
  --radius-lg: 5px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-steel: cubic-bezier(.16,.84,.32,1);
  --dur: .55s;

  /* Depth */
  --lift-1: 0 1px 2px rgba(14,26,43,.06), 0 8px 20px -12px rgba(14,26,43,.22);
  --lift-2: 0 1px 2px rgba(14,26,43,.07), 0 22px 44px -20px rgba(14,26,43,.30);
  --glow-molten: 0 0 0 1px rgba(224,84,16,.28), 0 12px 28px -14px rgba(224,84,16,.45);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--hull);
  color:var(--mill);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.65;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.03; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{
  outline:2px solid var(--arc);
  outline-offset:3px;
  border-radius:2px;
}
::selection{ background:var(--molten); color:#fff; }

/* ---------- 3. Typography roles ---------- */
.display{
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:"wdth" 118;
  letter-spacing:-.022em;
  text-transform:uppercase;
  color:var(--head);
}
.display-tight{ font-variation-settings:"wdth" 100; letter-spacing:-.03em; }

.eyebrow{
  font-family:var(--data);
  font-size:var(--t-micro);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mill-dim);
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.1rem;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--molten);
  flex:none;
}
.eyebrow--arc::before{ background:var(--arc); }

.lead{
  font-size:var(--t-lead);
  color:var(--mill-dim);
  max-width:62ch;
  line-height:1.7;
}
.data{ font-family:var(--data); font-variant-numeric:tabular-nums; }
.molten{ color:var(--molten); }
.arc{ color:var(--arc); }

/* ---------- 4. Layout shells ---------- */
.shell{
  width:min(100% - (var(--gut) * 2), var(--shell));
  margin-inline:auto;
}
.shell--wide{ width:min(100% - (var(--gut) * 2), 1560px); }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:clamp(2.6rem,5.5vw,4.5rem); }
.section--ink{ background:linear-gradient(168deg,var(--ink),var(--ink-2)); color:#C9D4E1; }
.section--ink .display{ color:#fff; }
.section--ink .lead{ color:#9FB0C2; }
.section--ink .eyebrow{ color:#8397AB; }
.section--ink .rule-x{ background:rgba(255,255,255,.1); }

.grid{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-12{ grid-template-columns:repeat(12,1fr); }
.span-7{ grid-column:span 7; }
.span-5{ grid-column:span 5; }
.span-6{ grid-column:span 6; }
.span-8{ grid-column:span 8; }
.span-4{ grid-column:span 4; }

.stack-sm > * + *{ margin-top:.6rem; }
.stack > * + *{ margin-top:1.15rem; }
.stack-lg > * + *{ margin-top:2.4rem; }

/* Section heading block */
.head{ max-width:70ch; margin-bottom:clamp(2rem,4vw,3.4rem); }
.head h2{ font-size:var(--t-h2); margin-bottom:1rem; }
.head--split{
  max-width:none;
  display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between;
  gap:1.6rem;
}
.head--split > div:first-child{ max-width:62ch; }

/* ---------- 5. Metal surfaces ---------- */
.metal{
  position:relative;
  background-image:var(--brushed), var(--metal-face);
  background-blend-mode:overlay, normal;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  isolation:isolate;
}
.metal::before{
  content:"";
  position:absolute; inset:0;
  background:var(--metal-edge);
  opacity:.55;
  pointer-events:none;
  border-radius:inherit;
}
/* Specular sweep — the light travelling across a machined face */
.sheen{ position:relative; overflow:hidden; }
.sheen::after{
  content:"";
  position:absolute; top:-60%; bottom:-60%;
  left:-140%; width:52%;
  background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.055) 38%,
      rgba(214,232,255,.16) 50%,
      rgba(255,255,255,.055) 62%,
      rgba(255,255,255,0) 100%);
  transform:skewX(-16deg);
  transition:left .95s var(--ease-steel);
  pointer-events:none; z-index:3;
}
.sheen:hover::after, .sheen:focus-within::after{ left:150%; }

/* Tread-plate accent — used sparingly, as structure not wallpaper */
.tread{
  background-image:url("../img/tread.svg");
  background-size:74px 74px;
  opacity:.10;
  filter:invert(1) contrast(.35);
}
.tread-strip{
  height:12px;
  background-image:url("../img/tread.svg");
  background-size:36px 36px;
  opacity:.2; filter:invert(1) contrast(.4);
  border-block:1px solid var(--rule);
}

/* Hairline dividers that read as drawing rules */
.rule-x{ height:1px; background:var(--rule); border:0; margin:0; }
.rule-arc{
  height:2px; border:0; margin:0;
  background:linear-gradient(90deg,var(--molten),var(--spark) 22%,transparent 60%);
}

/* ---------- 6. Buttons ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--head);
  --btn-bd:var(--rule-strong);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  padding:.92em 1.6em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  font-family:var(--data);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--ease-steel), box-shadow .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn > *{ position:relative; z-index:2; }
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,var(--molten),#FF8C42);
  transform:translateY(101%);
  transition:transform .45s var(--ease-steel);
}
.btn:hover{ transform:translateY(-2px); border-color:transparent; color:#fff; }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn--molten{
  --btn-bg:linear-gradient(120deg,var(--molten),#FF8C42);
  --btn-bd:transparent;
  box-shadow:var(--glow-molten);
}
.btn--molten::before{ background:linear-gradient(120deg,#FF8C42,var(--spark)); }
.btn--arc{ --btn-bd:var(--rule-arc); --btn-fg:var(--arc); }
.btn--arc::before{ background:linear-gradient(120deg,var(--arc-deep),var(--arc)); }
.btn--arc:hover{ color:#fff; }
.btn--ghost{ --btn-bd:var(--rule-strong); background:var(--paper); }
.btn--sm{ padding:.62em 1.1em; font-size:var(--t-micro); }
.btn--wide{ width:100%; }
.btn--dark{ --btn-fg:#fff; --btn-bd:transparent; --btn-bg:var(--ink); }
.btn--dark:hover{ --btn-fg:#fff; }

/* Arrow that slides on hover */
.btn .arw{ transition:transform .35s var(--ease-steel); }
.btn:hover .arw{ transform:translateX(4px); }

/* ---------- 7. Chips, badges, pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.32em .72em;
  font-family:var(--data);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--rule-strong);
  border-radius:100px;
  color:var(--mill-dim);
  background:var(--paper);
  white-space:nowrap;
}
.chip--stock{ color:#0E8A57; border-color:rgba(14,138,87,.3); background:rgba(14,138,87,.07); }
.chip--low{ color:var(--spark); border-color:rgba(255,177,61,.34); background:rgba(255,177,61,.08); }
.chip--order{ color:var(--mill-dim); }
.chip--hot{ color:var(--molten); border-color:rgba(255,106,31,.38); background:rgba(255,106,31,.09); }
.chip--arc{ color:var(--arc); border-color:var(--rule-arc); background:rgba(43,143,240,.08); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.dot--pulse{ animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 currentColor; opacity:1; }
  70%{ box-shadow:0 0 0 6px transparent; opacity:.6; }
}

/* ---------- 8. Scroll gauge (signature) ---------- */
/* A steel rule down the page edge. Steel is sold by length —
   so the scrollbar is a measuring tape, marked in metres. */
.gauge{
  position:fixed; left:0; top:0; bottom:0;
  width:34px; z-index:60;
  pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  border-right:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  backdrop-filter:blur(6px);
}
.gauge__ticks{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg,
     var(--rule) 0 1px, transparent 1px 22px);
}
.gauge__ticks::after{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg,
     var(--rule-strong) 0 1px, transparent 1px 110px);
}
.gauge__fill{
  position:absolute; left:0; top:0; width:2px;
  background:linear-gradient(180deg,var(--spark),var(--molten));
  box-shadow:0 0 12px rgba(255,106,31,.75);
  height:0;
}
.gauge__read{
  position:absolute; left:50%; top:0;
  transform:translate(-50%,-50%) rotate(-90deg);
  font-family:var(--data); font-size:9px;
  letter-spacing:.14em;
  color:var(--molten);
  white-space:nowrap;
  text-shadow:0 0 8px rgba(0,0,0,.9);
}
@media (max-width:1100px){ .gauge{ display:none; } }
@media (min-width:1101px){
  body{ padding-left:34px; }
  .hdr{ left:34px; }
}

/* ---------- 9. Header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:70;
  transition:transform .5s var(--ease-steel), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--rule);
}
.hdr.is-hidden{ transform:translateY(-104%); }
.hdr__bar{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem);
  padding-block:clamp(.8rem,1.5vw,1.25rem);
  transition:padding .4s var(--ease);
}
.hdr.is-stuck .hdr__bar{ padding-block:.7rem; }

.brand{ display:flex; align-items:center; gap:.72rem; flex:none; }
.brand__mark{ width:38px; height:38px; flex:none; transition:transform .6s var(--ease-steel); }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.05); }
.brand__word{
  font-family:var(--display); font-weight:800;
  font-variation-settings:"wdth" 112;
  font-size:1.22rem; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--head); line-height:1;
}
.brand__word span{ color:var(--molten); }
.brand__tag{
  display:block;
  font-family:var(--data); font-size:8.5px;
  letter-spacing:.28em; color:var(--mill-faint);
  text-transform:uppercase; margin-top:3px;
}

.nav{ display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1.5rem); margin-left:auto; }
.nav__link{
  position:relative;
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--mill);
  padding:.45rem 0;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--molten);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease-steel);
}
.nav__link:hover{ color:var(--head); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.is-active{ color:var(--head); }
.hdr__actions{ display:flex; align-items:center; gap:.6rem; flex:none; }

/* Quote basket button */
.basket-btn{ position:relative; }
.basket-btn__count{
  position:absolute; top:-6px; right:-6px;
  min-width:19px; height:19px; padding:0 5px;
  display:grid; place-items:center;
  background:var(--molten); color:#fff;
  border-radius:100px;
  font-family:var(--data); font-size:10px; font-weight:700;
  transform:scale(0);
  transition:transform .4s var(--ease-steel);
}
.basket-btn__count.is-on{ transform:scale(1); }

/* Burger */
.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:12px; width:20px; height:1.5px;
  background:var(--head); transition:transform .42s var(--ease-steel), opacity .25s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:21.5px; }
.burger span:nth-child(3){ top:27px; }
.burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; transform:scaleX(.3); }
.burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* Small screens: the quote CTA moves into the menu so the burger stays reachable */
@media (max-width:820px){
  .hdr__bar{ gap:.55rem; }
  .hdr__actions .btn--molten{ display:none; }
}
@media (max-width:430px){
  .brand__tag{ display:none; }
  .brand__word{ font-size:1.08rem; }
  .basket-btn{ padding:.6em .72em; }
}

/* ---------- 10. Mega menu ---------- */
.mega{
  position:fixed; inset:0; z-index:69;
  background:rgba(247,250,253,.98);
  backdrop-filter:blur(20px);
  padding:clamp(6rem,12vh,9rem) 0 3rem;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.mega.is-open{ opacity:1; visibility:visible; }
.mega__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.6rem; }
.mega__col h4{
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--molten); margin-bottom:1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}
.mega__col a{
  display:block; padding:.36rem 0;
  font-size:.925rem; color:var(--mill-dim);
  transition:color .25s var(--ease), transform .3s var(--ease-steel);
}
.mega__col a:hover{ color:var(--head); transform:translateX(5px); }
.mega .stagger-item{ opacity:0; transform:translateY(14px); }
.mega.is-open .stagger-item{ animation:riseIn .6s var(--ease-steel) forwards; }
@keyframes riseIn{ to{ opacity:1; transform:none; } }

@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:block; }
  .mega__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .mega__grid{ grid-template-columns:1fr; }
}

/* ---------- 11. Hero ---------- */
.hero{
  position:relative;
  min-height:min(100svh,940px);
  display:flex; align-items:center;
  padding-top:clamp(6rem,13vh,9rem);
  padding-bottom:clamp(3rem,7vh,6rem);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(44,55,91,.10), transparent 62%),
    radial-gradient(80% 70% at 6% 94%, rgba(224,84,16,.09), transparent 60%),
    linear-gradient(178deg,#FFFFFF 0%,#EAEFF5 100%);
}
.hero__tread{
  position:absolute; inset:0;
  background-image:url("../img/tread.svg");
  background-size:104px 104px;
  opacity:.09; filter:invert(1) contrast(.3);
  mask-image:radial-gradient(70% 70% at 70% 40%, #000 20%, transparent 78%);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
  opacity:.5;
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem,4.5vw,4.5rem);
  align-items:center;
}
.hero__title{
  font-size:var(--t-hero);
  margin-bottom:1.6rem;
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ln > span{
  display:block;
  transform:translateY(104%);
  animation:liftLine .95s var(--ease-steel) forwards;
}
.hero__title .ln:nth-child(1) > span{ animation-delay:.10s; }
.hero__title .ln:nth-child(2) > span{ animation-delay:.20s; }
.hero__title .ln:nth-child(3) > span{ animation-delay:.30s; }
@keyframes liftLine{ to{ transform:none; } }

.hero__title em{
  font-style:normal;
  background:var(--metal-bright);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  background-size:220% 100%;
  animation:sweepMetal 7s linear infinite;
}
/* SplitType rebuilds the headline into per-word nodes, and the clipped
   gradient stops painting on them — the word goes transparent, i.e. invisible.
   With motion on, use a solid mid-steel instead. */
.has-motion .hero__title em{
  background:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:#6E7C8E;
  color:#6E7C8E;
  animation:none;
}
@keyframes sweepMetal{ 0%{ background-position:0% 0; } 100%{ background-position:220% 0; } }

.hero__lead{ max-width:52ch; margin-bottom:2.2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.6rem; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:2.2rem;
  padding-top:1.8rem; border-top:1px solid var(--rule);
}
.fact__n{
  font-family:var(--display); font-weight:800;
  font-variation-settings:"wdth" 105;
  font-size:clamp(1.7rem,3vw,2.5rem);
  color:var(--head); line-height:1; letter-spacing:-.02em;
}
.fact__n sup{ font-size:.42em; color:var(--molten); top:-.9em; }
.fact__l{
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--mill-faint); margin-top:.5rem;
}

/* Hero drawing panel — the signature */
.drawing{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#FFFFFF,#F3F7FB);
  overflow:hidden;
}
.drawing__paper{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:26px 26px;
  opacity:.55;
}
.drawing__corner{
  position:absolute; width:16px; height:16px;
  border-color:var(--molten); border-style:solid; border-width:0;
}
.drawing__corner:nth-child(1){ top:10px; left:10px; border-top-width:1px; border-left-width:1px; }
.drawing__corner:nth-child(2){ top:10px; right:10px; border-top-width:1px; border-right-width:1px; }
.drawing__corner:nth-child(3){ bottom:10px; left:10px; border-bottom-width:1px; border-left-width:1px; }
.drawing__corner:nth-child(4){ bottom:10px; right:10px; border-bottom-width:1px; border-right-width:1px; }
.drawing__svg{ position:absolute; inset:14% 13% 19%; }
.drawing__svg svg{ position:absolute; inset:0; width:100%; height:100%; }
.drawing__title{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.85rem 1.1rem;
  border-top:1px solid var(--rule);
  background:rgba(255,255,255,.85);
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mill-dim);
}
.drawing__title strong{ color:var(--head); font-weight:600; }
.drawing__tabs{
  position:absolute; top:1rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.3rem; z-index:3;
  background:rgba(255,255,255,.9);
  border:1px solid var(--rule);
  border-radius:100px; padding:.24rem;
}
.drawing__tab{
  border:0; background:none; cursor:pointer;
  padding:.34rem .78rem; border-radius:100px;
  font-family:var(--data); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--mill-faint); white-space:nowrap;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.drawing__tab.is-on{ color:#fff; background:var(--molten); }

/* Engineering-drawing SVG language */
.dl-profile{ fill:rgba(15,98,196,.09); stroke:var(--arc); stroke-width:1.6; }
.dl-dim{ fill:none; stroke:var(--molten); stroke-width:.9; }
.dl-hatch{ fill:none; stroke:rgba(58,71,87,.28); stroke-width:.7; }
.dl-centre{ fill:none; stroke:rgba(58,71,87,.35); stroke-width:.7; stroke-dasharray:9 4 2 4; }
.dl-text{ font-family:var(--data); font-size:9.5px; fill:var(--molten); letter-spacing:.06em; }
.draw-in{ stroke-dasharray:var(--len,1400); stroke-dashoffset:var(--len,1400); animation:drawLine 1.5s var(--ease-steel) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; }
  .drawing{ max-width:420px; margin-inline:auto; }
  .hero{ min-height:0; }
}

/* ---------- 12. Ticker ---------- */
.ticker{
  border-block:1px solid var(--rule);
  background:var(--paper);
  overflow:hidden;
  padding-block:.85rem;
}
.ticker__track{
  display:flex; gap:3.4rem;
  width:max-content;
  animation:roll 44s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes roll{ to{ transform:translateX(-50%); } }
.ticker__item{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mill-faint); white-space:nowrap;
}
.ticker__item b{ color:var(--mill); font-weight:600; }
.ticker__item i{ color:var(--molten); font-style:normal; }

/* ---------- 13. Category & product cards ---------- */
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.15rem,2vw,1.7rem);
  background-image:var(--brushed), var(--metal-face);
  background-blend-mode:overlay, normal;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .5s var(--ease-steel), border-color .4s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.card:hover{
  border-color:rgba(15,98,196,.38);
  box-shadow:var(--lift-2);
}
.card__idx{
  position:absolute; top:1rem; right:1.1rem;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.16em; color:var(--mill-faint);
}
.card__fig{
  position:relative;
  height:104px; margin-bottom:1.1rem;
  overflow:hidden;
}
.card__fig svg{ position:absolute; inset:0; width:100%; height:100%; }
.card__name{
  font-family:var(--display); font-weight:700;
  font-variation-settings:"wdth" 106;
  font-size:1.06rem; letter-spacing:-.008em;
  text-transform:uppercase; color:var(--head);
  margin-bottom:.5rem;
}
.card__desc{
  font-size:.885rem; color:var(--mill-dim);
  line-height:1.62; margin-bottom:1rem;
}
.card__meta{
  margin-top:auto; padding-top:.9rem;
  border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  gap:.7rem; flex-wrap:wrap;
}
.card__count{
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--mill-faint);
}
.card__go{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--arc);
  transition:gap .3s var(--ease-steel);
}
.card:hover .card__go{ gap:.75rem; }
.card--link{ cursor:pointer; }

/* Product card grid */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:clamp(.9rem,1.6vw,1.35rem);
}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(298px,1fr));
  gap:clamp(.9rem,1.6vw,1.4rem);
}

/* ---------- 14. Spec tables ---------- */
.spec{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper);
}
.spec__scroll{ overflow-x:auto; }
.spec table{ min-width:520px; }
.spec th{
  text-align:left;
  padding:.85rem 1rem;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mill-dim); font-weight:600;
  background:#F2F6FA;
  border-bottom:1px solid var(--rule-strong);
  white-space:nowrap;
}
.spec td{
  padding:.72rem 1rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--data); font-size:.83rem;
  font-variant-numeric:tabular-nums;
  color:var(--mill);
  white-space:nowrap;
}
.spec tbody tr{ transition:background .25s var(--ease); }
.spec tbody tr:hover{ background:rgba(15,98,196,.05); }
.spec tbody tr:last-child td{ border-bottom:0; }
.spec td:first-child{ color:var(--head); font-weight:600; }
.spec .num{ text-align:right; }
.spec__add{
  border:1px solid var(--rule-strong);
  background:var(--paper); color:var(--arc);
  border-radius:2px; cursor:pointer;
  padding:.2rem .55rem;
  font-family:var(--data); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.spec__add:hover{ background:var(--arc); color:#fff; border-color:var(--arc); }
.spec__add.is-added{ background:rgba(14,138,87,.12); color:#0E8A57; border-color:rgba(14,138,87,.4); }

/* ---------- 15. Forms ---------- */
.field{ display:block; margin-bottom:1rem; }
.field__lab{
  display:block;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--mill-dim); margin-bottom:.5rem;
}
.field__in, .field__sel, .field__ta{
  width:100%;
  padding:.78rem .9rem;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  color:var(--head);
  font-family:var(--body); font-size:.94rem;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field__in:focus, .field__sel:focus, .field__ta:focus{
  outline:none;
  border-color:var(--arc);
  background:#fff;
  box-shadow:0 0 0 3px rgba(15,98,196,.16);
}
.field__ta{ min-height:130px; resize:vertical; }
.field__sel{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237F8FA2' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center;
  padding-right:2.3rem;
}
.field__sel option{ background:#fff; color:var(--head); }
.field__hint{ font-size:var(--t-micro); color:var(--mill-faint); margin-top:.4rem; font-family:var(--data); }
.field-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.field-row--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:620px){ .field-row, .field-row--3{ grid-template-columns:1fr; } }

/* Segmented control */
.seg{
  display:inline-flex; padding:.24rem;
  max-width:100%; overflow-x:auto; scrollbar-width:none;
  background:#E4EAF1;
  border:1px solid var(--rule-strong);
  border-radius:100px; gap:.2rem;
}
.seg::-webkit-scrollbar{ display:none; }
.seg button{
  border:0; background:none; cursor:pointer; flex:none;
  padding:.42rem .95rem; border-radius:100px;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--mill-dim);
  transition:background .35s var(--ease-steel), color .3s var(--ease);
}
.seg button.is-on{ background:var(--arc); color:#fff; }
.seg--molten button.is-on{ background:var(--molten); }

/* ---------- 16. Calculator panels ---------- */
.calc{
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(1rem,2.4vw,2rem);
  align-items:start;
}
@media (max-width:900px){ .calc{ grid-template-columns:1fr; } }
.calc__pane{
  padding:clamp(1.2rem,2.4vw,2rem);
  background-image:var(--brushed), var(--metal-face);
  background-blend-mode:overlay, normal;
  border:1px solid var(--rule);
  border-radius:var(--radius);
}
.calc__out{
  position:sticky; top:100px;
  background:
    linear-gradient(180deg,rgba(224,84,16,.07),transparent 42%),
    linear-gradient(180deg,#FFFFFF,#F6F9FC);
  border:1px solid rgba(224,84,16,.3);
}
.readout{ padding-block:.85rem; border-bottom:1px dashed var(--rule); }
.readout:last-of-type{ border-bottom:0; }
.readout__l{
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.15em; text-transform:uppercase; color:var(--mill-dim);
  margin-bottom:.28rem;
}
.readout__v{
  font-family:var(--display); font-weight:800;
  font-variation-settings:"wdth" 104;
  font-size:clamp(1.5rem,3vw,2.15rem);
  color:var(--head); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.readout__v small{
  font-family:var(--data); font-size:.42em;
  font-weight:500; color:var(--molten);
  letter-spacing:.1em; margin-left:.4rem;
}
.readout--big .readout__v{ font-size:clamp(1.95rem,4.4vw,2.9rem); color:var(--molten); }
.calc__note{
  margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--rule);
  font-size:var(--t-micro); font-family:var(--data);
  color:var(--mill-faint); line-height:1.7;
}
.bom{ margin-top:1.1rem; }
.bom__row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px dotted var(--rule);
  font-family:var(--data); font-size:.82rem;
}
.bom__row span:first-child{ color:var(--mill-dim); }
.bom__row span:last-child{ color:var(--head); font-variant-numeric:tabular-nums; }

/* ---------- 17. Reveal / motion utilities ---------- */
/* With GSAP loaded, motion.js sets the start state itself — the stylesheet
   must not also hold elements at opacity 0 or they can never come back. */
.has-motion [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
.ln-mask{ overflow:hidden; }
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease-steel);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="scale"]{ transform:scale(.955); }
[data-reveal="clip"]{ opacity:1; clip-path:inset(0 100% 0 0); transform:none; transition:clip-path 1s var(--ease-steel); }
[data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); }

/* ---------- 18. Footer ---------- */
.ftr{
  background:var(--ink);
  border-top:1px solid var(--rule);
  padding-top:clamp(3rem,6vw,5rem);
  position:relative; overflow:hidden;
}
.ftr__tread{
  position:absolute; inset:0;
  background-image:url("../img/tread.svg");
  background-size:78px 78px;
  opacity:.05;
  mask-image:linear-gradient(180deg,transparent,#000);
}
.ftr__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.15fr;
  gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:clamp(2.4rem,4vw,3.6rem);
}
.ftr h4{
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--molten); margin-bottom:1.1rem;
}
.ftr{ color:#B9C6D4; }
.ftr a{ color:#9FAEBE; font-size:.9rem; transition:color .25s var(--ease); }
.ftr a:hover{ color:#fff; }
.ftr .brand__word{ color:#fff; }
.ftr p{ color:#9FAEBE !important; }
.ftr li{ padding:.26rem 0; }
.ftr__bottom{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; align-items:center;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.1em; color:#7C8B9C;
}
/* Ndebele-derived chevron band — Bulawayo's own geometry, used once */
.ndebele{
  height:8px;
  background-image:url("../img/ndebele.svg");
  background-size:auto 8px;
  background-repeat:repeat-x;
  opacity:.5;
}
@media (max-width:900px){ .ftr__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ftr__grid{ grid-template-columns:1fr; } }

.ftr-motion{
  background:none; border:1px solid rgba(255,255,255,.18);
  color:#9FAEBE; border-radius:100px; cursor:pointer;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; padding:.3em .8em;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.ftr-motion:hover{ color:#fff; border-color:rgba(255,255,255,.45); }

.zs-cursor{
  position:fixed; top:0; left:0; z-index:500;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1.5px solid var(--molten); border-radius:50%;
  pointer-events:none; mix-blend-mode:multiply;
  transition:width .28s var(--ease-steel), height .28s var(--ease-steel),
             margin .28s var(--ease-steel), background .28s var(--ease),
             opacity .3s var(--ease);
}
.zs-cursor.is-hot{
  width:46px; height:46px; margin:-23px 0 0 -23px;
  background:rgba(224,84,16,.10);
}
.zs-cursor.is-down{ width:18px; height:18px; margin:-9px 0 0 -9px; }
@media (hover:none),(pointer:coarse){ .zs-cursor{ display:none; } }

.zs-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:300;
  background:linear-gradient(90deg,var(--molten),var(--spark));
  transform:scaleX(0); transform-origin:left center;
  pointer-events:none;
}

/* the pinned rail needs its section to hold the viewport */
.section--ink{ overflow:hidden; }

/* ---------- 19. Page transition shutter ---------- */
.shutter{
  position:fixed; inset:0; z-index:200;
  pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr);
}
.shutter i{
  background-image:linear-gradient(180deg,#FFFFFF,#DDE5EE);
  background-color:#EDF1F6;
  transform:scaleY(0); transform-origin:bottom;
}
.shutter.is-out i{ animation:shutClose .62s var(--ease-steel) forwards; }
.shutter.is-in i{ transform:scaleY(1); transform-origin:top; animation:shutOpen .62s var(--ease-steel) forwards; }
.shutter i:nth-child(1){ animation-delay:0s; }
.shutter i:nth-child(2){ animation-delay:.05s; }
.shutter i:nth-child(3){ animation-delay:.1s; }
.shutter i:nth-child(4){ animation-delay:.15s; }
.shutter i:nth-child(5){ animation-delay:.2s; }
@keyframes shutClose{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes shutOpen{ from{ transform:scaleY(1); } to{ transform:scaleY(0); } }

/* ---------- 20. Basket drawer ---------- */
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:120;
  width:min(430px,100%);
  background:linear-gradient(180deg,#FFFFFF,#F4F8FB);
  border-left:1px solid var(--rule-strong);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .55s var(--ease-steel);
  box-shadow:-30px 0 70px -30px rgba(14,26,43,.35);
}
.drawer.is-open{ transform:none; }
.drawer__head{
  padding:1.3rem var(--gut) 1rem;
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.drawer__body{ flex:1; overflow-y:auto; padding:1rem var(--gut); }
.drawer__foot{ padding:1.1rem var(--gut) 1.5rem; border-top:1px solid var(--rule); }
.drawer__x{
  width:36px; height:36px; flex:none;
  border:1px solid var(--rule-strong); background:none;
  border-radius:var(--radius); cursor:pointer; color:var(--mill);
  display:grid; place-items:center;
  transition:background .25s var(--ease), color .25s;
}
.drawer__x:hover{ background:var(--molten); color:#fff; border-color:transparent; }
.scrim{
  position:fixed; inset:0; z-index:119;
  background:rgba(11,20,32,.45);
  backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.scrim.is-open{ opacity:1; visibility:visible; }
.line-item{
  display:grid; grid-template-columns:1fr auto;
  gap:.4rem .8rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.line-item__n{ color:var(--head); font-size:.9rem; font-weight:500; }
.line-item__s{ font-family:var(--data); font-size:var(--t-micro); color:var(--mill-dim); }
.line-item__x{
  border:0; background:none; cursor:pointer;
  color:var(--mill-faint); font-family:var(--data); font-size:var(--t-micro);
  transition:color .25s;
}
.line-item__x:hover{ color:var(--molten); }
.qty{
  display:inline-flex; align-items:center;
  border:1px solid var(--rule-strong); border-radius:var(--radius);
  overflow:hidden;
}
.qty button{
  width:26px; height:26px; border:0; background:#EEF2F7;
  color:var(--mill); cursor:pointer; line-height:1;
  transition:background .2s;
}
.qty button:hover{ background:var(--arc); color:#fff; }
.qty input{
  width:46px; border:0; background:none; text-align:center;
  font-family:var(--data); font-size:.8rem; color:var(--head);
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- 21. Misc components ---------- */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--mill-faint); margin-bottom:1.4rem;
}
.crumb a{ color:var(--mill-dim); transition:color .25s; }
.crumb a:hover{ color:var(--molten); }
.crumb span{ opacity:.45; }

.page-top{
  padding-top:clamp(7.5rem,14vh,10rem);
  padding-bottom:clamp(2.2rem,4vw,3.4rem);
  background:
    radial-gradient(90% 120% at 82% -10%, rgba(44,55,91,.10), transparent 60%),
    linear-gradient(178deg,#FFFFFF,#EEF3F8);
  border-bottom:1px solid var(--rule);
  position:relative; overflow:hidden;
}
.page-top__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,#000,transparent);
  opacity:.45;
}
.page-top > .shell{ position:relative; z-index:2; }
.page-top h1{ font-size:var(--t-h1); margin-bottom:1rem; }

.panel{
  padding:clamp(1.2rem,2.4vw,2rem);
  background-image:var(--brushed), var(--metal-face);
  background-blend-mode:overlay, normal;
  border:1px solid var(--rule);
  border-radius:var(--radius);
}
.panel--arc{ border-color:var(--rule-arc); background-image:linear-gradient(158deg,#F2F7FD,#E7EFF9); }

.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden;
}
.stat{
  padding:clamp(1.1rem,2vw,1.7rem);
  background:var(--plate);
  transition:background .4s var(--ease);
}
.stat:hover{ background:var(--plate-hi); }

.timeline{ position:relative; padding-left:2.2rem; }
.timeline::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px;
  width:1px; background:linear-gradient(180deg,var(--molten),var(--arc),transparent);
}
.timeline li{ position:relative; padding-bottom:2rem; }
.timeline li::before{
  content:""; position:absolute; left:-2.2rem; top:7px;
  width:13px; height:13px; border-radius:50%;
  background:#fff; border:2px solid var(--molten);
}
.timeline__y{
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.18em; color:var(--molten); margin-bottom:.4rem;
}

.accordion__item{ border-bottom:1px solid var(--rule); }
.accordion__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.15rem 0;
  background:none; border:0; cursor:pointer; text-align:left;
  color:var(--head); font-size:1.02rem; font-weight:500;
  transition:color .25s;
}
.accordion__btn:hover{ color:var(--molten); }
.accordion__btn i{
  flex:none; width:22px; height:22px; position:relative;
  border:1px solid var(--rule-strong); border-radius:50%;
}
.accordion__btn i::before,.accordion__btn i::after{
  content:""; position:absolute; inset:50% 5px auto; height:1px; background:currentColor;
  transition:transform .4s var(--ease-steel);
}
.accordion__btn i::after{ transform:rotate(90deg); }
.accordion__item.is-open .accordion__btn i::after{ transform:rotate(0); }
.accordion__body{
  overflow:hidden; max-height:0;
  transition:max-height .55s var(--ease-steel);
}
.accordion__body > div{ padding-bottom:1.3rem; color:var(--mill-dim); font-size:.94rem; }

.map-pin{
  display:flex; gap:1rem; padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
}
.map-pin__n{ color:var(--head); font-weight:600; margin-bottom:.2rem; }
.map-pin__d{ font-size:.87rem; color:var(--mill-dim); }

.toast{
  position:fixed; left:50%; bottom:26px; z-index:300;
  transform:translate(-50%,140%);
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.3rem;
  background:var(--ink);
  border:1px solid rgba(14,138,87,.5);
  border-radius:100px;
  font-family:var(--data); font-size:var(--t-small);
  color:#fff;
  box-shadow:0 20px 50px -20px rgba(14,26,43,.5);
  transition:transform .55s var(--ease-steel);
}
.toast.is-on{ transform:translate(-50%,0); }

.search-wrap{ position:relative; }
.search-in{
  width:100%; padding:1rem 1rem 1rem 3rem;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  color:#fff; font-size:1rem;
  transition:border-color .3s var(--ease), box-shadow .3s;
}
.search-in:focus{ outline:none; border-color:var(--arc); box-shadow:0 0 0 3px rgba(15,98,196,.16); }
.search-ico{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--mill-faint); }

.filter-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1.4rem; }
.filter-bar button{
  padding:.48rem .95rem;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  border-radius:100px; cursor:pointer;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--mill-dim);
  transition:all .3s var(--ease);
}
.filter-bar button:hover{ color:var(--head); border-color:var(--arc); }
.filter-bar button.is-on{ background:var(--molten); border-color:transparent; color:#fff; }

.empty{
  padding:3.5rem 1rem; text-align:center;
  border:1px dashed var(--rule-strong); border-radius:var(--radius);
  color:var(--mill-dim);
}

/* ---------- 22. Preloader ---------- */
.boot{
  position:fixed; inset:0; z-index:400;
  background:linear-gradient(178deg,#FFFFFF,#E9EFF5);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__inner{ text-align:center; width:min(320px,72vw); }
.boot__mark{ margin:0 auto 1.4rem; width:56px; height:56px; }
.boot__bar{ height:2px; background:var(--rule-strong); overflow:hidden; border-radius:2px; }
.boot__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--molten),var(--spark));
  box-shadow:0 0 14px rgba(255,106,31,.8);
  animation:pour 1.15s var(--ease-steel) forwards;
}
@keyframes pour{ to{ width:100%; } }
.boot__t{
  margin-top:.9rem;
  font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.3em; text-transform:uppercase; color:var(--mill-faint);
}

/* ---------- 23. Responsive fallbacks ---------- */
@media (max-width:1024px){
  .g-12 > [class*="span-"]{ grid-column:span 12; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .hero__facts{ gap:1.4rem; }
  .head--split{ align-items:flex-start; }
}

/* ---------- 24. Reduced motion ---------- */
/* Motion is controlled by the tier on <html>, NOT by the media query.
   A media query here would override the visitor's own choice with an OS flag
   they may not know is set — and `!important` on every transition kills hover
   states, sheen sweeps and nav underlines even when the JS is running full. */
html[data-motion="off"]{ scroll-behavior:auto; }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
html[data-motion="off"] [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
html[data-motion="off"] .hero__title .ln > span{ transform:none !important; }
html[data-motion="off"] .ticker__track{ animation:none !important; }
html[data-motion="off"] .draw-in{ stroke-dashoffset:0 !important; }
html[data-motion="off"] .boot{ display:none; }

/* Gentle keeps hover feedback and colour changes; it drops travel and looping. */
html[data-motion="gentle"] .ticker__track{ animation:none !important; }
html[data-motion="gentle"] .hero__title em{ animation:none !important; }
html[data-motion="gentle"] .boot{ display:none; }

.ftr-motion{
  display:inline-flex; align-items:center; gap:.25rem;
  border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:.18rem .3rem;
}
.ftr-motion__lab{
  font-family:var(--data); font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:#7C8B9C; padding:0 .35rem;
}
.ftr-motion button{
  background:none; border:0; cursor:pointer; border-radius:100px;
  color:#9FAEBE; font-family:var(--data); font-size:var(--t-micro);
  letter-spacing:.08em; text-transform:uppercase; padding:.28em .7em;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.ftr-motion button:hover{ color:#fff; }
.ftr-motion button.is-on{ background:var(--molten); color:#fff; }

/* ---------- 25. Print ---------- */
@media print{
  .hdr,.gauge,.mega,.drawer,.scrim,.boot,.shutter,.ticker{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card,.panel,.spec{ border-color:#bbb; background:#fff !important; }
}