/* Inrico South Africa — Direction B "mission control"
   Dark, operations-room. Deliberately not a restyle of Direction A.
   Every colour derives from the live site palette or the logo artwork:
   the dark scale is the logo navy #002F87 taken down in luminance. */

/* ── tokens ───────────────────────────────────────────────────────────
   Dark is this direction's identity, so the bare :root carries the dark set
   and light is the override. Three states are covered, as the viewer may have
   made no explicit choice at all:
     :root                                 -> dark (default, and "system: dark")
     @media(light) :root:not([data-theme=dark]) -> light when the OS says light
     :root[data-theme=light|dark]          -> the in-page toggle wins either way
   Every surface colour is a token, so nothing is left defined in only one
   theme -- that is the classic unreadable-in-light-mode bug. */
:root{
  /* brand — fixed, from the live site and the logo; identical in both themes */
  --blue:#046bd2;
  --blue-h:#045cb4;
  --navy:#002F87;
  --green:#007A4D;        /* SA flag green — in-stock / live status ONLY */
  --gold:#FFB612;         /* flag gold — accents and certification marks ONLY */
  /* Eyebrow labels — the small uppercase kickers above headings.
     Separate from --gold because gold is a FILL colour that works anywhere,
     while these are TEXT and have to survive the light theme: #FFB612 on the
     light ground is 1.65:1, which is not a contrast failure so much as an
     invisibility. The light override below is a deep amber at 4.72:1. */
  --eyebrow:var(--gold);

  /* ground, derived from --navy */
  --ink:#060a14;
  --ink-2:#0a1120;
  --panel:#0e1626;
  --panel-2:#132039;
  --line:rgba(148,178,224,.14);
  --line-2:rgba(148,178,224,.26);

  --fg:#eaf0fa;
  --fg-2:#a9b8d0;
  --fg-3:#7386a4;

  --tint:rgba(148,178,224,.09);      /* hover wash */
  --tint-2:rgba(148,178,224,.045);   /* faint panel wash */
  --scrim:rgba(6,10,20,.86);         /* sticky nav */
  --scrim-2:rgba(10,17,32,.62);      /* glass panels over imagery */
  --scrim-3:rgba(6,10,20,.5);        /* product-card footer */
  --panel-solid:rgba(10,16,30,.97);  /* nav dropdown */
  --field:rgba(6,10,20,.72);         /* form controls */
  --chip-light:#ffffff;              /* client-logo tiles */
  --chip-dark:#000000;
  --stock:#4ecb96;
  --shadow:0 26px 60px -34px rgba(0,0,0,.95);
  --shadow-s:0 30px 70px -30px rgba(0,0,0,.95);

  /* hero scrim over the mesh, and the mesh's own ink */
  --hero-a:rgba(6,10,20,.90);
  --hero-b:rgba(6,10,20,.62);
  --hero-c:rgba(6,10,20,.12);
  --hero-d:rgba(6,10,20,.94);
  --mesh-line:96,175,255;
  --mesh-node:126,206,255;
  --mesh-glow:56,150,255;
  /* Neon dial for the hero mesh. --mesh-halo is a canvas shadowBlur in px, the
     two -a values are base opacities. On the dark ground the halo can be wide
     and soft without smearing; see the light block, where it cannot. */
  --mesh-halo:9;
  --mesh-line-a:.55;
  --mesh-node-a:.72;

  /* full-bleed image band */
  --band-1:rgba(6,10,20,.99);
  --band-2:rgba(6,10,20,.72);
  --band-3:rgba(6,10,20,.42);
  --band-img:.34;
  --dist-bg-op:.22;

  /* headline gradient */
  --hl-1:#046bd2; --hl-2:#5aa9ff; --hl-3:#FFB612;

  /* spacing scale — 4px base. Added 19 Aug 2026 to match the Figma system.
     The stylesheet previously had no scale: gaps were ad-hoc (6/8/10/11/12/13/14/16/26/32/40).
     New work should use these; existing literals are being migrated, not rewritten wholesale. */
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:40px; --space-3xl:56px; --space-4xl:80px;
  --r:14px;
  --r-s:10px;
  --wrap:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#f6f8fc;
    --ink-2:#eef2f8;
    --panel:#ffffff;
    --panel-2:#e8eef7;
    --line:rgba(18,42,84,.14);
    --line-2:rgba(18,42,84,.26);
    --fg:#0c1a2e;
    --fg-2:#41546e;
    --fg-3:#68798f;
    --tint:rgba(4,107,210,.08);
    --tint-2:rgba(4,107,210,.035);
    --scrim:rgba(246,248,252,.90);
    --scrim-2:rgba(255,255,255,.80);
    --scrim-3:rgba(255,255,255,.66);
    --panel-solid:rgba(255,255,255,.985);
    --field:#ffffff;
    --stock:#0a7a4d;
    --shadow:0 22px 48px -30px rgba(14,32,62,.45);
    --shadow-s:0 26px 56px -28px rgba(14,32,62,.40);
    --hero-a:rgba(246,248,252,.93);
    --hero-b:rgba(246,248,252,.68);
    --hero-c:rgba(246,248,252,.16);
    --hero-d:rgba(246,248,252,.97);
    /* Same neon values as :root[data-theme="light"] below — see the note there
       for why navy at .52 read as grey. Both light paths must carry them or the
       hero looks different depending on whether the viewer chose light or just
       has an OS set to light. */
    --mesh-line:4,107,210;
    --mesh-node:10,124,240;
    --mesh-glow:10,124,240;
    --mesh-halo:5;
    --mesh-line-a:.40;
    --mesh-node-a:.85;
    --band-1:rgba(246,248,252,.99);
    --band-2:rgba(246,248,252,.80);
    --band-3:rgba(246,248,252,.52);
    --band-img:.55;
    --dist-bg-op:.13;
    --hl-1:#046bd2; --hl-2:#002F87; --hl-3:#a8760a;
    --eyebrow:#b45309;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#f6f8fc;
  --ink-2:#eef2f8;
  --panel:#ffffff;
  --panel-2:#e8eef7;
  --line:rgba(18,42,84,.14);
  --line-2:rgba(18,42,84,.26);
  --fg:#0c1a2e;
  --fg-2:#41546e;
  --fg-3:#68798f;
  --tint:rgba(4,107,210,.08);
  --tint-2:rgba(4,107,210,.035);
  --scrim:rgba(246,248,252,.90);
  --scrim-2:rgba(255,255,255,.80);
  --scrim-3:rgba(255,255,255,.66);
  --panel-solid:rgba(255,255,255,.985);
  --field:#ffffff;
  --stock:#0a7a4d;
  --shadow:0 22px 48px -30px rgba(14,32,62,.45);
  --shadow-s:0 26px 56px -28px rgba(14,32,62,.40);
  --hero-a:rgba(246,248,252,.93);
  --hero-b:rgba(246,248,252,.68);
  --hero-c:rgba(246,248,252,.16);
  --hero-d:rgba(246,248,252,.97);
  /* The nodes were navy #002F87 at .52 on a near-white ground, which is a DARK
     colour at half strength — it reads as a grey speck, never as a light. Neon
     on white needs saturation, not weight: a vivid brand blue at high opacity
     with a tight halo. The halo stays small (5 vs the dark theme's 9) because
     a wide glow on white turns the whole hero into blue haze, and the lines
     stay low-opacity because there are hundreds of them. */
  --mesh-line:4,107,210;
  --mesh-node:10,124,240;
  --mesh-glow:10,124,240;
  --mesh-halo:5;
  --mesh-line-a:.40;
  --mesh-node-a:.85;
  --band-1:rgba(246,248,252,.99);
  --band-2:rgba(246,248,252,.80);
  --band-3:rgba(246,248,252,.52);
  --band-img:.55;
  --dist-bg-op:.13;
  --hl-1:#046bd2; --hl-2:#002F87; --hl-3:#a8760a;
  --eyebrow:#b45309;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:"Sora",system-ui,sans-serif;font-weight:700;line-height:1.08;margin:0;letter-spacing:-.022em}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.95rem,3.5vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:600}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 44px);margin-inline:auto}
@media(max-width:620px){.wrap{width:min(var(--wrap),100% - 30px)}}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}
.dim{color:var(--fg-2)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────────────────────── nav ───────────────────────── */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  display:flex;align-items:center;gap:26px;
  padding:14px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
}
.nav.on{background:var(--scrim);backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;width:min(var(--wrap),100% - 44px)}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;margin-right:auto}
.brand img{height:38px;width:auto}
.brand b{display:none}
/* the wordmark is white on dark and navy on light — both ship, CSS picks */
.lg-l{display:none}
:root[data-theme="light"] .lg-d{display:none}
:root[data-theme="light"] .lg-l{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .lg-d{display:none}
  :root:not([data-theme="dark"]) .lg-l{display:block}
}

/* theme toggle */
.themebtn{
  flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--fg-2);cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s;
}
.themebtn:hover{color:var(--fg);background:var(--tint);border-color:var(--fg-3)}
.themebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.themebtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-sun{display:none}
:root[data-theme="light"] .themebtn .i-sun{display:block}
:root[data-theme="light"] .themebtn .i-moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .themebtn .i-sun{display:block}
  :root:not([data-theme="dark"]) .themebtn .i-moon{display:none}
}
.navlinks{display:flex;align-items:center;gap:4px}
/* direct children only — the Products panel has its own link styling */
.navlinks>a:not(.btn),.navdrop>a{
  position:relative;padding:9px 14px;border-radius:999px;
  font-size:.95rem;font-weight:500;color:var(--fg-2);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.navlinks>a:not(.btn):hover,.navdrop>a:hover{color:var(--fg);background:var(--tint)}
.navlinks>a:not(.btn).sel,.navdrop>a.sel{color:var(--fg)}
.navlinks>a:not(.btn).sel::after,.navdrop>a.sel::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--gold));
}
/* Products hover panel */
.navdrop{position:relative;display:inline-flex}
.navdrop>a{display:inline-flex;align-items:center;gap:6px}
.navdrop>a .cv{opacity:.6;transition:transform .3s var(--ease)}
.navdrop:hover>a .cv,.navdrop.open>a .cv{transform:rotate(180deg);opacity:1}
.navpanel{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:0 22px;
  padding:20px 22px 14px;width:max-content;max-width:min(84vw,760px);
  background:var(--panel-solid);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow-s);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:90;
}
.navdrop:hover .navpanel,.navdrop:focus-within .navpanel,.navdrop.open .navpanel{
  opacity:1;visibility:visible;transform:none;
}
.navpanel::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px}
.npg{display:flex;flex-direction:column;min-width:0}
.npt{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);
  padding:0 8px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.npi{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;
  transition:background .2s var(--ease)}
.npi:hover{background:var(--tint)}
.npim{flex:0 0 auto;width:38px;height:38px;border-radius:7px;background:var(--tint);
  display:grid;place-items:center;overflow:hidden}
.npim img{width:100%;height:100%;object-fit:contain;padding:3px}
.npn{font-size:.86rem;font-weight:500;color:var(--fg-2);line-height:1.25;min-width:0}
.npi:hover .npn{color:var(--fg)}
.npb{display:block;font-style:normal;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--eyebrow);margin-top:2px}
.npall{grid-column:1/-1;margin-top:10px;padding:12px 8px 4px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--blue)}
.npall:hover{color:var(--hl-2)}
@media(max-width:1000px){
  .navdrop{display:block;width:100%}
  .navpanel{position:static;translate:none;transform:none;opacity:1;visibility:visible;
    display:none;width:auto;max-width:none;grid-template-columns:1fr;background:none;
    border:0;box-shadow:none;padding:2px 0 6px;backdrop-filter:none}
  .navpanel{display:grid}   /* inside the mobile menu it is simply a list */
  .npt{padding-top:10px}
}

.navtoggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;cursor:pointer}
.navtoggle span{display:block;width:19px;height:2px;background:var(--fg);border-radius:2px}
.navtoggle span+span{margin-top:4px}
@media(max-width:1000px){
  .navtoggle{display:block}
  .navlinks{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--panel-solid);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:8px 22px 16px;
    display:none;
  }
  .navlinks.open{display:flex}
  .navlinks>a:not(.btn),.navdrop>a{padding:13px 8px;border-radius:8px}
  .navlinks>a:not(.btn).sel::after,.navdrop>a.sel::after{left:8px;right:auto;width:18px;bottom:8px}
  .nav .btn{display:none}
  .navlinks .btn{display:inline-flex;margin-top:8px;justify-content:center}
}

/* ───────────────────────── buttons ─────────────────────
   Premium motion: magnetic pull toward the cursor, a gradient
   sweep on hover, and the arrow sliding out. Restrained on purpose. */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-family:"Sora",sans-serif;font-weight:600;font-size:.97rem;letter-spacing:-.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  background:var(--blue);color:#fff;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
  will-change:transform;
  box-shadow:0 6px 22px -10px rgba(4,107,210,.9);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{background:var(--blue-h);box-shadow:0 14px 34px -12px rgba(4,107,210,1)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--fg);box-shadow:none}
.btn.ghost:hover{background:rgba(148,178,224,.09);border-color:var(--fg-3);box-shadow:none}
.btn.gold{background:var(--gold);color:#1a1200;box-shadow:0 6px 22px -10px rgba(255,182,18,.9)}
.btn.gold:hover{background:#ffc53d}
.btn.sm{padding:10px 18px;font-size:.9rem}
.btn.wide{width:100%;justify-content:center}

/* ───────────────────────── hero ───────────────────────── */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;padding:132px 0 76px;overflow:hidden}
#mesh{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 18%,rgba(4,107,210,.22),transparent 62%),
    linear-gradient(100deg,var(--hero-a) 0%,var(--hero-b) 42%,var(--hero-c) 72%),
    linear-gradient(180deg,transparent 55%,var(--hero-d) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:15ch}
.hero h1 .hl{
  background:linear-gradient(100deg,var(--hl-1) 10%,var(--hl-2) 55%,var(--hl-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--fg-2);max-width:56ch;margin:24px 0 34px}
.hero .cta{display:flex;flex-wrap:wrap;gap:13px}
.statusrail{
  display:flex;flex-wrap:wrap;gap:0;margin-top:52px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--scrim-2);backdrop-filter:blur(10px);
  overflow:hidden;
}
.statusrail div{flex:1 1 210px;padding:16px 20px;border-right:1px solid var(--line)}
.statusrail div:last-child{border-right:0}
.statusrail .k{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:5px}
.statusrail .v{font-size:1.02rem;font-weight:600;color:var(--fg)}
.statusrail .v{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.statusrail .v small{font-weight:400;color:var(--fg-2);font-size:.86rem;white-space:nowrap}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(0,122,77,.75);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(0,122,77,0)}100%{box-shadow:0 0 0 0 rgba(0,122,77,0)}}

/* ───────────────────────── sections ───────────────────────── */
section{position:relative}
.sec{padding:96px 0}
.sec-t{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:44px;flex-wrap:wrap}
.sec-t p{max-width:54ch;color:var(--fg-2);margin:14px 0 0}
.rule{height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* leading band — full-bleed scene, copy sitting in the dark half */
.leadband{position:relative;min-height:min(74vh,620px);display:flex;align-items:center;
  overflow:hidden;border-block:1px solid var(--line)}
.leadband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.leadband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--band-1) 4%,var(--band-2) 46%,transparent 82%)}
.leadband .wrap{position:relative;z-index:2;padding:64px 0}
.leadgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:920px){.leadgrid{grid-template-columns:1fr;gap:26px}}
.leadtxt{max-width:44ch}

/* the clickable "how a patrol runs" card */
.patrolcard{
  display:flex;gap:16px;align-items:stretch;text-align:left;width:100%;
  padding:16px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;
  background:var(--scrim-2);backdrop-filter:blur(10px);color:inherit;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.patrolcard:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:var(--shadow)}
.patrolcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pcimg{flex:0 0 34%;border-radius:var(--r-s);overflow:hidden;min-height:132px;position:relative}
.pcimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pctxt{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.pctag{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.pctxt b{font-family:"Sora",sans-serif;font-size:1.08rem;font-weight:600;color:var(--fg)}
.pctxt>span:not(.pctag):not(.pcgo){font-size:.88rem;color:var(--fg-2);line-height:1.5}
.pcgo{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:var(--blue);margin-top:4px}
@media(max-width:560px){.pcimg{display:none}}

/* modal */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-bd{position:absolute;inset:0;background:rgba(2,5,12,.72);backdrop-filter:blur(6px)}
.modal-in{
  position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  padding:34px 36px 36px;box-shadow:var(--shadow-s);
}
@media(max-width:620px){.modal{padding:12px}.modal-in{padding:26px 20px 28px}}
.modal-in h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:10px 0 12px}
.modal-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;
  border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);cursor:pointer;
  transition:background .25s,color .25s;
}
.modal-x:hover{background:var(--tint);color:var(--fg)}
.modal-x svg{stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
/* site-wide search */
.modal.search{align-items:flex-start;padding-top:min(12vh,110px)}
.searchbox{position:relative;width:min(720px,100%);background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-s);
  max-height:76vh;display:flex;flex-direction:column;overflow:hidden}
.searchtop{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;
  border-bottom:1px solid var(--line)}
.searchtop>svg{flex:0 0 auto;stroke:var(--fg-3);fill:none;stroke-width:1.9;stroke-linecap:round}
.searchtop input{flex:1 1 auto;border:0;background:transparent;padding:6px 0;font-size:17px;color:var(--fg)}
.searchtop input:focus{outline:0;box-shadow:none}
.searchtop .modal-x{position:static;width:34px;height:34px}
.searchres{overflow:auto;padding:8px}
.sres-i{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:var(--r-s);
  transition:background .18s var(--ease)}
.sres-i:hover{background:var(--tint)}
.sres-im{flex:0 0 auto;width:44px;height:44px;border-radius:9px;background:var(--tint-2);
  display:grid;place-items:center;overflow:hidden}
.sres-im img{width:100%;height:100%;object-fit:contain;padding:3px}
.sres-g{font-family:"Sora",sans-serif;font-weight:700;color:var(--blue);font-size:1rem}
.sres-t{flex:1 1 auto;min-width:0}
.sres-t b{display:block;font-size:.95rem;font-weight:600;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres-t>span{display:block;font-size:.83rem;color:var(--fg-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres-k{flex:0 0 auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
@media(max-width:560px){.sres-k{display:none}.modal.search{padding-top:8vh}}

.steps{list-style:none;margin:26px 0 0;padding:0;counter-reset:s}
.steps li{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0;padding-top:4px}
.stepn{
  flex:0 0 auto;width:30px;height:30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-size:.82rem;font-weight:500;
  line-height:1;                      /* body line-height was pushing the digit high */
  font-variant-numeric:tabular-nums;
  color:var(--blue);background:rgba(4,107,210,.14);
  border:1px solid rgba(4,107,210,.34);margin-top:1px;
}
.steps b{display:block;font-size:1rem;color:var(--fg);margin-bottom:3px}
/* scoped to the description span — a bare .steps span was out-specifying
   .stepn and turning the numbered circles into plain blocks */
.steps div span{display:block;font-size:.93rem;color:var(--fg-2);line-height:1.6}
.leadtxt h2{margin-bottom:16px;text-wrap:balance}
.leadtxt p{color:var(--fg-2);font-size:1.05rem;margin-bottom:26px}
@media(max-width:760px){
  .leadband{min-height:0;padding:0}
  .leadband>img{object-position:center 30%}
  .leadband::after{background:linear-gradient(180deg,var(--band-3) 0%,var(--band-1) 58%)}
  .leadband .wrap{padding:180px 0 44px}
}

/* ── exploded T522A, scrubbed by scroll ──────────────────────────────
   A tall track with a sticky viewport; scroll position drives the frame
   index. Scroll-driven, so it is user-controlled rather than ambient — it
   stays on under reduced motion, like the hero's pointer response. */
.explode{position:relative;height:340vh}
.exsticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.exsticky::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 72% 50%,rgba(4,107,210,.16),transparent 62%)}
.exgrid{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;width:min(var(--wrap),100% - 44px)}
.excopy h2{margin:12px 0 16px;max-width:16ch}
.excopy p{max-width:46ch}
.exstage{position:relative;display:grid;place-items:center;min-width:0}
.exstage img{width:100%;height:auto;max-height:74vh;object-fit:contain}
.exlist{list-style:none;margin:24px 0 26px;padding:0;border-left:1px solid var(--line)}
.exlist li{padding:9px 0 9px 18px;margin-left:-1px;border-left:2px solid transparent;
  opacity:.34;transition:opacity .35s var(--ease),border-color .35s var(--ease)}
.exlist li.on{opacity:1;border-left-color:var(--blue)}
.exlist b{display:block;font-size:.98rem;color:var(--fg);font-weight:600}
.exlist span{display:block;font-size:.87rem;color:var(--fg-2);line-height:1.45}
.exhint{position:absolute;left:0;bottom:-6vh;display:flex;align-items:center;gap:9px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.exhint span{display:block;width:1px;height:26px;background:linear-gradient(var(--fg-3),transparent)}
@media(max-width:900px){
  .explode{height:300vh}
  .exgrid{grid-template-columns:1fr;gap:14px}
  .exstage img{max-height:42vh}
  .excopy h2{font-size:1.7rem;margin-top:6px}
  .excopy p{display:none}
  .exlist{margin:14px 0 18px}
  .exhint{display:none}
}

/* the range, in one photograph */
.rangeband{padding:78px 0 10px;text-align:center}
.rangetxt{max-width:60ch;margin:0 auto 30px}
.rangetxt h2{margin-bottom:14px}
.rangetxt p{margin:0}
.rangeimg img{width:100%;height:auto;max-width:1180px;margin-inline:auto}
@media(max-width:760px){.rangeband{padding-top:56px}}

/* become a dealer — the range sits ON the band, contained, never cropped */
.dist{
  position:relative;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;
  gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:
    radial-gradient(90% 130% at 88% 50%,rgba(4,107,210,.30),transparent 62%),
    linear-gradient(135deg,var(--panel-2) 0%,var(--ink-2) 58%);
}
.dist::before{                       /* the flag stripe, as a band edge */
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,#007A4D 0 25%,#FFB612 25% 50%,#DE3831 50% 75%,#002F87 75% 100%);
}
.distbg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;
  opacity:var(--dist-bg-op);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 16%,rgba(0,0,0,.45) 50%,#000 86%);
  mask-image:linear-gradient(90deg,transparent 16%,rgba(0,0,0,.45) 50%,#000 86%);
}
.dist>div{position:relative;z-index:1}
.dist>div:first-of-type{padding:44px 40px}
.disttag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--eyebrow);margin-bottom:12px}
.dist ul{list-style:none;margin:20px 0 26px;padding:0}
.dist li{display:flex;gap:11px;align-items:flex-start;padding:6px 0;color:var(--fg-2);font-size:.96rem}
.dist li span{flex:0 0 auto;color:var(--blue);margin-top:2px}
.distpic{display:grid;place-items:center;padding:26px 30px 26px 0;min-width:0}
.distpic img{width:100%;height:auto;max-height:340px;object-fit:contain}
@media(max-width:860px){
  .dist{grid-template-columns:1fr}
  .dist>div:first-child{padding:34px 24px 8px}
  .distpic{padding:0 20px 26px}
  .distpic img{max-height:240px}
}

/* bento — featured products, deliberately unequal cells */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,var(--panel) 0%,var(--ink-2) 100%);
  overflow:hidden;transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card .glow{position:absolute;inset:-1px;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(4,107,210,.30),transparent 70%)}
.card:hover .glow{opacity:1}
.b-hero{grid-column:span 2;grid-row:span 2}
.b-tall{grid-column:span 1;grid-row:span 2}
.b-wide{grid-column:span 1}
.pcard-img{position:relative;width:100%;aspect-ratio:4/3;flex:1 1 auto;min-height:120px}
.pcard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;
  transition:transform .55s var(--ease)}
.card:hover .pcard-img img{transform:scale(1.045)}
.b-hero .pcard-img{aspect-ratio:16/11}
.pcard-b{padding:20px 22px 22px;border-top:1px solid var(--line);background:var(--scrim-3)}
.pcard-b h3{margin-bottom:6px}
.pcard-r{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;margin-top:12px;flex-wrap:wrap}
.price{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:1.2rem;color:var(--fg);white-space:nowrap}
.price s{color:var(--fg-3);font-size:.8rem}
.exvat{font-size:.74rem;color:var(--fg-3);letter-spacing:.04em;white-space:nowrap}
.tag{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:5px 11px;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;font-family:"Sora",sans-serif;
}
.tag.best{background:var(--gold);color:#1a1200}
.tag.new{background:var(--blue);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.04em;
  padding:4px 9px;border-radius:6px;border:1px solid var(--line-2);color:var(--fg-2);
  background:var(--tint-2);
}
.stock{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--stock);white-space:nowrap}
.stock i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-hero{grid-column:span 2;grid-row:auto}
  .b-tall{grid-column:span 1;grid-row:auto}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .b-hero,.b-tall,.b-wide{grid-column:span 1}
}

/* why network radio — one dimension per row, both answers aligned across */
.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp thead th{
  padding:16px 22px;text-align:left;font-family:"Sora",sans-serif;font-weight:600;font-size:.95rem;
  color:var(--fg-2);background:var(--tint-2);border-bottom:1px solid var(--line-2);
}
.cmp thead th:first-child{width:20%}
.cmp thead th.win{color:var(--fg);background:linear-gradient(180deg,rgba(4,107,210,.20),rgba(4,107,210,.07))}
.cmp tbody th{
  padding:18px 22px;text-align:left;vertical-align:top;font-weight:600;font-size:.93rem;
  color:var(--fg);border-bottom:1px solid var(--line);
}
.cmp tbody td{
  padding:18px 22px;vertical-align:top;font-size:.94rem;color:var(--fg-2);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);
}
.cmp tbody td.win{color:var(--fg);background:linear-gradient(180deg,rgba(4,107,210,.075),transparent)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td::before{display:none}
@media(max-width:760px){
  /* stack into labelled blocks rather than scrolling a 3-column table sideways */
  .cmp table,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tbody tr{border-bottom:1px solid var(--line-2);padding:4px 0 14px}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th{padding:16px 20px 6px;font-size:1.02rem;border-bottom:0}
  .cmp tbody td{padding:8px 20px;border:0;border-left:2px solid var(--line);margin-left:20px}
  .cmp tbody td.win{border-left-color:var(--blue);background:none}
  .cmp td::before{
    display:block;content:attr(data-l);font-size:.7rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--fg-3);margin-bottom:4px;
  }
  .cmp tbody td.win::before{color:var(--blue)}
}

/* industries — a rail, not a 7-up grid */
.ind{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:430px}
.indrail{background:var(--tint-2);border-right:1px solid var(--line);padding:10px}
.indrail button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;padding:14px 16px;border-radius:var(--r-s);cursor:pointer;
  color:var(--fg-2);font-weight:500;font-size:.98rem;
  transition:background .25s var(--ease),color .25s;
}
.indrail button:hover{background:var(--tint);color:var(--fg)}
.indrail button.sel{background:rgba(4,107,210,.16);color:var(--fg)}
.indrail .n{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--fg-3);opacity:.45;transition:background .25s,opacity .25s,box-shadow .25s}
.indrail button.sel .n{background:var(--blue);opacity:1;box-shadow:0 0 0 4px rgba(4,107,210,.2)}
.indbody{position:relative;display:grid;grid-template-columns:1fr 1fr}
.indpic{position:relative;overflow:hidden;min-height:220px}
.indpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.indpic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--band-2),transparent 55%)}
.indtxt{padding:34px 32px}
.indtxt h3{margin-bottom:14px}
.indtxt .ch{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:8px}
.indtxt ul{list-style:none;margin:16px 0 22px;padding:0}
.indtxt li{padding-left:20px;position:relative;color:var(--fg-2);font-size:.95rem;margin-bottom:7px}
.indtxt li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--blue)}
@media(max-width:960px){.ind{grid-template-columns:1fr}.indrail{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto}
  .indrail button{white-space:nowrap;width:auto}}
@media(max-width:680px){.indbody{grid-template-columns:1fr}.indpic{aspect-ratio:16/9;min-height:0}}

/* case study band — full bleed */
.ccid{position:relative;padding:110px 0;overflow:hidden;border-block:1px solid var(--line)}
.ccid .bg{position:absolute;inset:0}
.ccid .bg img{width:100%;height:100%;object-fit:cover;opacity:var(--band-img)}
.ccid::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--band-1) 8%,var(--band-2) 52%,var(--band-3))}
.ccid .wrap{position:relative;z-index:2}
.stats{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 30px}
.stat{flex:1 1 165px;border:1px solid var(--line);border-radius:var(--r-s);padding:18px 20px;background:var(--scrim-2);backdrop-filter:blur(8px)}
.stat .v{font-family:"Sora",sans-serif;font-weight:700;font-size:1.9rem;line-height:1;color:var(--fg)}
.stat .l{font-size:.82rem;color:var(--fg-2);margin-top:7px}

/* ── case study, set as an article ───────────────────────────────── */
.post h1{font-size:clamp(2rem,3.9vw,3.1rem);max-width:20ch;text-wrap:balance}
.posttag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--eyebrow);margin-bottom:16px}
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;
  font-size:.88rem;color:var(--fg-3)}
.postmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--fg-3)}
.postmeta a{color:var(--blue);display:inline-flex;align-items:center;gap:6px}
.postmeta a:hover{color:var(--hl-2)}
/* one column for the whole article, header included */
.postcol{width:min(780px,100% - 44px);margin-inline:auto}
@media(max-width:620px){.postcol{width:min(780px,100% - 30px)}}
.postbody{padding:40px 0 90px}
.postbody p{font-size:1.04rem;line-height:1.75;color:var(--fg-2);margin:0 0 1.15em}
.postbody .standfirst{font-size:1.16rem;line-height:1.68;color:var(--fg)}
.postbody h2{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:44px 0 16px}
.postbody h3{font-size:1.12rem;font-weight:600;color:var(--fg);margin:30px 0 10px}
.pf{margin:34px 0;padding:0}
.pf img{width:100%;border:1px solid var(--line);border-radius:var(--r)}
.pf.wide{margin-top:0}
.pf figcaption{margin-top:10px;font-size:.84rem;color:var(--fg-3);line-height:1.5}
.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 40px}
.keyfacts div{border:1px solid var(--line);border-radius:var(--r-s);padding:16px 14px;
  background:var(--tint-2)}
.keyfacts b{display:block;font-family:"Sora",sans-serif;font-size:1.42rem;line-height:1.1;color:var(--fg)}
.keyfacts span{display:block;font-size:.79rem;color:var(--fg-3);margin-top:6px;line-height:1.4}
@media(max-width:700px){.keyfacts{grid-template-columns:repeat(2,1fr)}}
.srcnote{margin-top:30px;padding:16px 18px;border-left:2px solid var(--gold);
  background:rgba(255,182,18,.05);font-size:.87rem;color:var(--fg-3);border-radius:0 var(--r-s) var(--r-s) 0}
.srcnote a{color:var(--eyebrow)}
.srcnote a:hover{text-decoration:underline}
.postrule{border:0;border-top:1px solid var(--line-2);margin:54px 0 40px}
.ourtake h2{margin-top:0}
.takegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:620px){.takegrid{grid-template-columns:1fr}}
.takec{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--tint-2);transition:border-color .25s,transform .25s var(--ease)}
.takec:hover{border-color:var(--line-2);transform:translateY(-2px)}
.takec .takeim{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center}
.takec .takeim img{width:100%;height:100%;object-fit:contain}
.takec>span:nth-child(2){flex:1 1 auto;min-width:0}
.takec b{display:block;font-size:.92rem;font-weight:600;color:var(--fg);line-height:1.3}
.takec b+span{font-size:.79rem;color:var(--fg-3)}
.takec .mono{flex:0 0 auto;font-size:.92rem;color:var(--fg-2)}

/* dispatch + video */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}}
.vids{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:560px){.vids{grid-template-columns:1fr}}
.vid{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--panel);
  transition:border-color .3s,transform .3s var(--ease)}
.vid:hover{border-color:var(--line-2);transform:translateY(-2px)}
.vid .th{position:relative;display:block;width:100%;aspect-ratio:16/9;flex:0 0 auto}
.vid .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.vid:hover .th img{transform:scale(1.05)}
.vid .pl{position:absolute;inset:0;display:grid;place-items:center}
.vid .pl i{
  width:54px;height:54px;border-radius:50%;background:var(--scrim);border:1px solid var(--line-2);
  display:grid;place-items:center;transition:transform .35s var(--ease),background .35s;backdrop-filter:blur(4px);
}
.vid:hover .pl i{transform:scale(1.11);background:var(--blue)}
.vid .cap{padding:14px 16px;font-size:.92rem;font-weight:500;border-top:1px solid var(--line);
  flex:1 1 auto}   /* so both cards match height when one caption wraps */

/* form fields — shared by the quote form and the search page */
.fld{margin-bottom:22px}
.fld label{display:block;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);margin-bottom:9px}
select,input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;padding:13px 15px;font-size:16px;border-radius:var(--r-s);
  background:var(--field);border:1px solid var(--line-2);color:var(--fg);
  transition:border-color .25s,box-shadow .25s;
}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(4,107,210,.22)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237386a4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:40px}

/* client marquee — colour, contained, and it keeps moving even when the
   OS asks for reduced motion (Keagan runs Windows with animations off) */
.marq{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-t{display:flex;gap:14px;width:max-content;animation:slide 62s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clogo{
  flex:0 0 auto;width:170px;height:102px;border-radius:var(--r-s);
  border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;
  background:var(--chip-light);transition:border-color .3s,transform .3s var(--ease);
}
.clogo.dk{background:var(--chip-dark)}
.clogo:hover{border-color:var(--line-2);transform:translateY(-2px)}
.clogo img{width:100%;height:100%;object-fit:contain;padding:7px 10px}

/* quote */
.quote{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:880px){.quote{grid-template-columns:1fr}}
.quote form{padding:34px 32px;background:var(--tint-2)}
.quote .info{padding:34px 32px;background:linear-gradient(165deg,rgba(0,47,135,.3),transparent 70%);border-left:1px solid var(--line)}
@media(max-width:880px){.quote .info{border-left:0;border-top:1px solid var(--line)}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.info dl{margin:0}
.info dt{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);margin-top:20px}
.info dd{margin:5px 0 0;font-size:.98rem}
.info dd a:hover{color:var(--blue)}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 34px;background:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{color:var(--fg-2);font-size:.94rem;transition:color .2s}
footer a:hover{color:var(--fg)}
.flag{display:flex;height:3px;margin-top:34px;border-radius:2px;overflow:hidden}
.flag i{flex:1}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;font-size:.85rem;color:var(--fg-3)}

/* whatsapp bubble */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;box-shadow:0 10px 30px -10px rgba(37,211,102,.85);
  transition:transform .35s var(--ease);
}
.wa:hover{transform:scale(1.09)}
@media(max-width:620px){.wa{right:14px;bottom:14px;width:52px;height:52px}}

/* ───────────────────────── product page ───────────────────────── */
.phero{padding:126px 0 56px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 22% 12%,rgba(4,107,210,.20),transparent 65%)}
.phero .wrap{position:relative}
.pgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start}
@media(max-width:900px){.pgrid{grid-template-columns:1fr;gap:32px}}
.pshot{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(165deg,var(--panel),var(--ink-2));overflow:hidden}
.pshot .main{position:relative;aspect-ratio:1/1}
.pshot .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:30px}
.thumbs{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line);overflow-x:auto}
.thumbs button{
  flex:0 0 auto;width:66px;height:66px;border-radius:9px;border:1px solid var(--line);
  background:var(--field);cursor:pointer;padding:5px;transition:border-color .25s,transform .25s
}
.thumbs button:hover{transform:translateY(-2px)}
.thumbs button.sel{border-color:var(--blue)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.crumb{font-size:.84rem;color:var(--fg-3);margin-bottom:18px}
.crumb a:hover{color:var(--blue)}
.pbuy{display:flex;flex-wrap:wrap;gap:11px;margin:26px 0 8px}
.pprice{display:flex;align-items:baseline;gap:12px;margin:20px 0 4px}
.pprice .n{font-family:"JetBrains Mono",monospace;font-size:2.3rem;font-weight:500}
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:26px 0}
.cap{
  border:1px solid var(--line);border-radius:var(--r-s);padding:13px 12px;text-align:center;
  background:var(--tint-2);
}
.cap svg{width:24px;height:24px;margin:0 auto 8px;display:block;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cap span{font-size:.74rem;color:var(--fg-2);letter-spacing:.03em;display:block;line-height:1.3}
/* manufacturer's headline feature list on the product hero */
.hlwrap{margin:22px 0 4px}
.hltag{display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:10px}
.hllist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px}
.hllist li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--fg-2)}
.hllist li svg{flex:0 0 auto;color:var(--blue)}
@media(max-width:520px){.hllist{grid-template-columns:1fr}}

/* headline figures under the product hero */
.keyspec{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.keyspec div{border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px;
  background:var(--tint-2)}
.keyspec b{display:block;font-family:"Sora",sans-serif;font-size:1.16rem;line-height:1.15;
  color:var(--fg);font-weight:600}
.keyspec span{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);margin-top:7px}
@media(max-width:760px){.keyspec{grid-template-columns:repeat(2,1fr)}}

/* what ships in the box / where it is used */
.boxgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
@media(max-width:760px){.boxgrid{grid-template-columns:1fr}}
.boxcard{border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 28px;
  background:var(--tint-2)}
.boxcard h3{font-size:1.05rem;margin-bottom:14px}
.kit{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kit li{font-size:.86rem;color:var(--fg-2);border:1px solid var(--line-2);border-radius:999px;
  padding:6px 13px;background:var(--panel)}
.kit.opt li{border-style:dashed;color:var(--fg-3)}
.scen{display:flex;flex-wrap:wrap;gap:8px}
.scen span{font-size:.86rem;color:var(--fg);border-radius:999px;padding:6px 13px;
  background:rgba(4,107,210,.14);border:1px solid rgba(4,107,210,.34)}

.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px}
.acc>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 22px;background:var(--tint-2);border:0;border-top:1px solid var(--line);
  cursor:pointer;font-family:"Sora",sans-serif;font-weight:600;font-size:1rem;text-align:left;
  transition:background .25s;
}
.acc>button:first-child{border-top:0}
.acc>button:hover{background:var(--tint)}
.acc>button .cv{transition:transform .35s var(--ease);flex:0 0 auto}
.acc>button[aria-expanded=true] .cv{transform:rotate(180deg)}
.accp{display:none;padding:4px 22px 20px;border-top:1px solid var(--line)}
.accp.open{display:block}
.spec{width:100%;border-collapse:collapse;font-size:.93rem}
.spec tr{border-bottom:1px solid var(--line)}
.spec tr:last-child{border-bottom:0}
.spec th{text-align:left;font-weight:500;color:var(--fg-3);padding:11px 16px 11px 0;width:38%;vertical-align:top}
.spec td{padding:11px 0;color:var(--fg);vertical-align:top}
.specsrc{font-size:.78rem;color:var(--fg-3);margin-top:14px;font-style:italic}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}

/* products index */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.filters button{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:transparent;
  color:var(--fg-2);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .25s var(--ease);
}
.filters button:hover{color:var(--fg);border-color:var(--fg-3)}
.filters button.sel{background:var(--blue);border-color:var(--blue);color:#fff}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}

/* support */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:30px;overflow-x:auto}
.tabs button{
  padding:14px 18px;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--fg-2);cursor:pointer;font-weight:500;white-space:nowrap;transition:color .25s,border-color .25s;
}
.tabs button:hover{color:var(--fg)}
.tabs button.sel{color:var(--fg);border-bottom-color:var(--blue)}
.dl{display:flex;align-items:center;gap:16px;padding:17px 20px;border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:10px;transition:border-color .25s,background .25s}
.dl:hover{border-color:var(--line-2);background:var(--tint-2)}
.dl .ic{flex:0 0 auto;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:rgba(255,182,18,.12)}
.dl .ic svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.8}
.dl .t{flex:1 1 auto;min-width:0}
.dl .t b{display:block;font-weight:600;font-size:.98rem}
.dl .t span{font-size:.83rem;color:var(--fg-3)}

/* scroll reveal — driven by a throttled rect sweep, never IntersectionObserver
   (it can be silently starved inside embedded previews) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  /* the client wall is the exception — it must not freeze */
  .marq-t{animation:slide 62s linear infinite !important;animation-duration:62s !important}
}