/* ==========================================================================
   SERIVON SURGICAL — FLAGSHIP DESIGN SYSTEM
   Built from scratch. Mobile-first. Red / white / charcoal.
   This file owns the entire look; no legacy stylesheet dependencies.
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root{
  /* Brand red — the existing #731719 lineage, extended into a full scale */
  --red-50:#FDF3F3;
  --red-100:#FBE4E5;
  --red-200:#F5C3C5;
  --red-300:#E88E92;
  --red-400:#D4535A;
  --red-500:#C22127;
  --red-600:#9E1A20;
  --red-700:#7A1218;
  --red-800:#5C0F14;
  --red-900:#3D0A0D;

  /* Neutrals — warm charcoal, not pure grey */
  --ink-900:#0B0C0E;
  --ink-800:#131519;
  --ink-700:#1D2025;
  --ink-600:#2B2F36;
  --ink-500:#4A4F58;
  --ink-400:#6B7079;
  --ink-300:#9BA0A8;
  --ink-200:#D4D7DC;
  --ink-100:#E9EBEE;
  --ink-50:#F4F5F7;
  --paper:#FFFFFF;

  /* Semantic */
  --brand:var(--red-600);
  --brand-hi:var(--red-500);
  --brand-deep:var(--red-700);
  --on-brand:#FFFFFF;
  --fg:var(--ink-900);
  --fg-muted:var(--ink-500);
  --fg-subtle:var(--ink-400);
  --bg:var(--paper);
  --bg-wash:var(--ink-50);
  --line:var(--ink-200);
  --focus:#2563EB;

  /* Type */
  --font-display:'Sora','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --t-xs:0.75rem;
  --t-sm:0.8125rem;
  --t-base:0.9375rem;
  --t-md:1rem;
  --t-lg:clamp(1.0625rem,0.4vw + 0.97rem,1.1875rem);
  --t-xl:clamp(1.25rem,1vw + 1rem,1.5rem);
  --t-2xl:clamp(1.5rem,1.8vw + 1.1rem,2rem);
  --t-3xl:clamp(1.875rem,2.6vw + 1.2rem,2.75rem);
  --t-4xl:clamp(2.25rem,4vw + 1.1rem,3.75rem);
  --t-5xl:clamp(2.75rem,6vw + 0.9rem,5rem);

  /* Space — 4px base */
  --s-1:0.25rem;  --s-2:0.5rem;   --s-3:0.75rem;  --s-4:1rem;
  --s-5:1.5rem;   --s-6:2rem;     --s-7:2.5rem;   --s-8:3rem;
  --s-9:4rem;     --s-10:5rem;    --s-11:6.5rem;  --s-12:8rem;

  /* Radius */
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-full:999px;

  /* Elevation */
  --e-1:0 1px 2px rgba(11,12,14,.06), 0 1px 3px rgba(11,12,14,.05);
  --e-2:0 4px 12px rgba(11,12,14,.07), 0 2px 4px rgba(11,12,14,.04);
  --e-3:0 12px 28px rgba(11,12,14,.10), 0 4px 10px rgba(11,12,14,.05);
  --e-4:0 24px 56px rgba(11,12,14,.16), 0 8px 20px rgba(11,12,14,.07);
  --e-brand:0 18px 40px rgba(158,26,32,.28);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --d-1:160ms; --d-2:280ms; --d-3:450ms; --d-4:700ms;

  /* Layout */
  --wrap:1280px;
  --wrap-wide:1480px;
  --wrap-narrow:920px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --nav-h:72px;
}
@media (min-width:992px){ :root{ --nav-h:84px; } }

/* ==========================================================================
   02 · RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-600);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; transition:color var(--d-1) var(--ease); }
a:hover{ color:var(--brand-hi); }
button{ font:inherit; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0 0 var(--s-4); font-family:var(--font-display); color:var(--fg); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
p{ margin:0 0 var(--s-4); }
p:last-child{ margin-bottom:0; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s-7) 0; }
::selection{ background:var(--red-600); color:#fff; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-xs); }

.sv-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--brand); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
  font-weight:700; font-size:var(--t-sm);
}
.sv-skip:focus{ left:0; color:#fff; }
.sv-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   03 · TYPOGRAPHY
   ========================================================================== */
.t-display{ font-size:var(--t-5xl); font-weight:800; letter-spacing:-.035em; line-height:1.02; }
.t-h1{ font-size:var(--t-4xl); font-weight:800; letter-spacing:-.03em; line-height:1.08; }
.t-h2{ font-size:var(--t-3xl); font-weight:800; letter-spacing:-.025em; line-height:1.12; }
.t-h3{ font-size:var(--t-2xl); font-weight:700; letter-spacing:-.02em; }
.t-h4{ font-size:var(--t-xl); font-weight:700; letter-spacing:-.015em; }
.t-lead{ font-size:var(--t-lg); line-height:1.75; color:var(--fg-muted); }
.t-body{ font-size:var(--t-base); color:var(--fg-muted); }
.t-meta{ font-size:var(--t-sm); color:var(--fg-subtle); }

.sv-eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-body);
  font-size:var(--t-xs); font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand); margin-bottom:var(--s-4);
}
.sv-eyebrow::before{ content:""; width:28px; height:2px; background:currentColor; border-radius:2px; flex:none; }
.sv-eyebrow--center{ justify-content:center; }
.sv-eyebrow--light{ color:var(--red-300); }

.sv-accent{ color:var(--brand); }

.sv-shead{ max-width:720px; margin-bottom:var(--s-8); }
.sv-shead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.sv-shead p{ font-size:var(--t-lg); color:var(--fg-muted); margin-top:var(--s-4); }

/* ==========================================================================
   04 · LAYOUT
   ========================================================================== */
.sv-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.sv-wrap--wide{ max-width:var(--wrap-wide); }
.sv-wrap--narrow{ max-width:var(--wrap-narrow); }

.sv-section{ padding-block:var(--s-9); }
@media (min-width:768px){ .sv-section{ padding-block:var(--s-11); } }
.sv-section--tight{ padding-block:var(--s-8); }
.sv-section--wash{ background:var(--bg-wash); }
.sv-section--ink{ background:var(--ink-900); color:var(--ink-300); }
.sv-section--ink h1,.sv-section--ink h2,.sv-section--ink h3,.sv-section--ink h4{ color:#fff; }

.sv-grid{ display:grid; gap:var(--s-5); }
.sv-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.sv-grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.sv-grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.sv-grid--products{ grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); }
@media (max-width:575px){
  .sv-grid--4,.sv-grid--products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); }
}

.sv-split{ display:grid; gap:var(--s-7); align-items:center; }
@media (min-width:992px){
  .sv-split{ grid-template-columns:1fr 1fr; gap:var(--s-9); }
  .sv-split--media-first > .sv-split__media{ order:-1; }
}
.sv-stack > * + *{ margin-top:var(--s-4); }
.sv-center{ text-align:center; }

/* ==========================================================================
   05 · BUTTONS
   ========================================================================== */
.sv-btn{
  --btn-bg:var(--brand);
  --btn-fg:#fff;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:0 var(--s-6);
  background:var(--btn-bg); color:var(--btn-fg) !important;
  border:1.5px solid var(--btn-bg); border-radius:var(--r-full);
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; text-align:center;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease),
             background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.sv-btn i{ font-size:1em; transition:transform var(--d-2) var(--ease); }
.sv-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:60%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg); transition:left var(--d-4) var(--ease);
}
.sv-btn:hover{ transform:translateY(-3px); box-shadow:var(--e-brand); color:#fff !important; }
.sv-btn:hover::after{ left:130%; }
.sv-btn:hover i{ transform:translateX(3px); }
.sv-btn:active{ transform:translateY(-1px); }

.sv-btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; border-color:rgba(255,255,255,.45); }
.sv-btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; box-shadow:none; }

.sv-btn--outline{ --btn-bg:transparent; --btn-fg:var(--fg); border-color:var(--line); }
.sv-btn--outline:hover{ background:var(--brand); border-color:var(--brand); color:#fff !important; box-shadow:var(--e-brand); }

.sv-btn--sm{ min-height:44px; padding:0 var(--s-5); font-size:var(--t-xs); }
.sv-btn--lg{ min-height:58px; padding:0 var(--s-7); }
.sv-btn--block{ width:100%; }

.sv-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:var(--t-sm); letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand);
}
.sv-link i{ transition:transform var(--d-2) var(--ease); }
.sv-link:hover i{ transform:translateX(5px); }

/* ==========================================================================
   06 · HEADER / NAVIGATION
   ========================================================================== */
.sv-topbar{ background:var(--ink-900); color:var(--ink-300); font-size:var(--t-xs); }
.sv-topbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-height:42px; padding-block:var(--s-2);
}
.sv-topbar a{ color:var(--ink-300); }
.sv-topbar a:hover{ color:#fff; }
.sv-topbar__contact{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; }
.sv-topbar__contact span,.sv-topbar__contact a{ display:inline-flex; align-items:center; gap:.5rem; }
.sv-topbar__contact i{ color:var(--red-400); }
.sv-topbar__social{ display:flex; align-items:center; gap:var(--s-2); }
.sv-topbar__social a{
  width:30px; height:30px; border-radius:var(--r-full);
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.14);
  transition:background var(--d-1) var(--ease), border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.sv-topbar__social a:hover{ background:var(--brand); border-color:var(--brand); transform:translateY(-2px); }
@media (max-width:767px){ .sv-topbar{ display:none; } }

.sv-header{
  position:sticky; top:0; z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--d-2) var(--ease);
}
.sv-header.is-stuck{ box-shadow:var(--e-2); }
.sv-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-height:var(--nav-h);
}
.sv-brand{ display:flex; align-items:center; gap:.75rem; flex:none; }
.sv-brand img{ height:42px; width:auto; transition:height var(--d-2) var(--ease); }
@media (min-width:992px){ .sv-brand img{ height:50px; } }
.sv-header.is-stuck .sv-brand img{ height:38px; }

.sv-nav{ display:none; }
@media (min-width:992px){ .sv-nav{ display:flex; align-items:center; gap:var(--s-1); margin-inline:auto; } }
.sv-nav__item{ position:relative; }
.sv-nav__link{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.9rem 1rem; color:var(--fg); font-family:var(--font-body);
  font-size:var(--t-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.sv-nav__link i{ font-size:.7em; opacity:.75; transition:transform var(--d-2) var(--ease); }
.sv-nav__link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.55rem; height:2px;
  background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform var(--d-2) var(--ease);
}
.sv-nav__link:hover,.sv-nav__link.is-active{ color:var(--brand); }
.sv-nav__link:hover::after,.sv-nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.sv-nav__item:hover > .sv-nav__link i{ transform:rotate(180deg); }

/* Dropdown + mega panel */
.sv-drop{
  position:absolute; top:100%; left:0; min-width:250px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--e-4); padding:var(--s-3);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.99);
  transition:opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), visibility var(--d-2);
}
.sv-nav__item:hover > .sv-drop,
.sv-nav__item:focus-within > .sv-drop{ opacity:1; visibility:visible; transform:translateY(8px) scale(1); }
.sv-drop a{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .85rem; border-radius:var(--r-sm);
  color:var(--ink-600); font-size:var(--t-base); font-weight:600;
  transition:background var(--d-1) var(--ease), color var(--d-1) var(--ease), padding-left var(--d-1) var(--ease);
}
.sv-drop a:hover{ background:var(--red-50); color:var(--brand); padding-left:1.15rem; }

.sv-mega{
  position:absolute; left:50%; transform:translate(-50%,14px) scale(.99);
  width:min(1180px,94vw); border-radius:var(--r-lg);
  padding:var(--s-7); max-height:min(76vh,700px); overflow-y:auto;
}
.sv-nav__item:hover > .sv-mega,
.sv-nav__item:focus-within > .sv-mega{ transform:translate(-50%,8px) scale(1); }
.sv-mega__grid{ display:grid; gap:var(--s-5) var(--s-6); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.sv-mega__col-title{
  display:block; margin-bottom:var(--s-3); padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
}
.sv-mega a{ padding:.35rem .5rem; font-size:var(--t-sm); font-weight:500; color:var(--ink-500); }
.sv-mega a:hover{ padding-left:.9rem; }
.sv-mega__cta{
  grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-4); margin-top:var(--s-3); padding:var(--s-5);
  background:linear-gradient(120deg,var(--ink-900),var(--red-800));
  border-radius:var(--r-md); color:#fff;
}
.sv-mega__cta h4{ color:#fff; margin:0 0 .25rem; font-size:var(--t-lg); }
.sv-mega__cta p{ margin:0; color:rgba(255,255,255,.72); font-size:var(--t-sm); }

/* Header actions */
.sv-actions{ display:flex; align-items:center; gap:var(--s-2); flex:none; }
/* Line-weight icon actions — no heavy ring, thin strokes, quiet hover.
   Reads like a modern storefront rather than a row of filled buttons. */
.sv-icon-btn{
  position:relative; width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:0; border-radius:var(--r-full);
  color:var(--ink-600); font-size:1rem; cursor:pointer;
  transition:background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sv-icon-btn svg{ width:22px; height:22px; display:block; overflow:visible; }
.sv-icon-btn:hover{ background:var(--ink-50); color:var(--brand); }
.sv-icon-btn:active{ background:var(--ink-100); }
.sv-icon-btn__badge{
  position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--brand); color:#fff; font-size:9.5px; font-weight:800; line-height:1;
  border:2px solid #fff;
}
.sv-actions__cta{ display:none; }
@media (min-width:1200px){ .sv-actions__cta{ display:inline-flex; } }
.sv-burger{ display:grid; }
@media (min-width:992px){ .sv-burger{ display:none; } }

/* Search overlay */
.sv-search{
  position:fixed; inset:0; z-index:1200;
  background:rgba(11,12,14,.74); backdrop-filter:blur(10px);
  display:grid; place-items:start center; padding:12vh var(--gutter) var(--gutter);
  opacity:0; visibility:hidden; transition:opacity var(--d-2) var(--ease), visibility var(--d-2);
}
.sv-search.is-open{ opacity:1; visibility:visible; }
.sv-search__panel{ width:100%; max-width:720px; transform:translateY(-18px); transition:transform var(--d-3) var(--ease); }
.sv-search.is-open .sv-search__panel{ transform:translateY(0); }
.sv-search__label{ color:rgba(255,255,255,.6); font-size:var(--t-xs); font-weight:800; letter-spacing:.22em; text-transform:uppercase; margin-bottom:var(--s-4); display:block; }
.sv-search__field{ display:flex; align-items:center; gap:var(--s-3); border-bottom:2px solid rgba(255,255,255,.3); padding-bottom:var(--s-3); }
.sv-search__field input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:#fff; font-family:var(--font-display); font-size:var(--t-2xl); font-weight:700;
}
.sv-search__field input::placeholder{ color:rgba(255,255,255,.35); }
.sv-search__field button{
  background:var(--brand); border:0; color:#fff; width:52px; height:52px; flex:none;
  border-radius:var(--r-full); cursor:pointer;
  transition:transform var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.sv-search__field button:hover{ background:var(--brand-hi); transform:scale(1.06); }
.sv-search__hint{ margin-top:var(--s-4); color:rgba(255,255,255,.45); font-size:var(--t-sm); }
.sv-search__close{
  position:absolute; top:var(--s-6); right:var(--gutter);
  width:48px; height:48px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:1.1rem; cursor:pointer;
  transition:background var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-search__close:hover{ background:var(--brand); transform:rotate(90deg); }

/* Mobile drawer */
.sv-scrim{
  position:fixed; inset:0; z-index:1100; background:rgba(11,12,14,.55);
  opacity:0; visibility:hidden; transition:opacity var(--d-2) var(--ease), visibility var(--d-2);
}
.sv-scrim.is-open{ opacity:1; visibility:visible; }
.sv-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:1150;
  width:min(88vw,380px); background:#fff;
  display:flex; flex-direction:column;
  transform:translateX(-101%); transition:transform var(--d-3) var(--ease);
  box-shadow:var(--e-4);
}
.sv-drawer.is-open{ transform:translateX(0); }
.sv-drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); flex:none;
}
.sv-drawer__head img{ height:38px; width:auto; }
.sv-drawer__body{ flex:1; overflow-y:auto; padding:var(--s-4) var(--s-5) var(--s-8); -webkit-overflow-scrolling:touch; }
.sv-drawer__foot{ flex:none; padding:var(--s-5); border-top:1px solid var(--line); background:var(--bg-wash); }
.sv-drawer__foot a{ display:flex; align-items:center; gap:.6rem; font-size:var(--t-sm); color:var(--ink-500); font-weight:600; min-height:32px; }
.sv-drawer__foot i{ color:var(--brand); width:18px; text-align:center; }
.sv-drawer__social{ display:flex; gap:var(--s-2); margin-top:var(--s-4); }
.sv-drawer__social a{
  width:38px; height:38px; border-radius:var(--r-full); display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-500);
}
.sv-drawer__social a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }

.sv-mnav__item + .sv-mnav__item{ border-top:1px solid var(--ink-100); }
.sv-mnav__link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  width:100%; min-height:56px; padding:var(--s-3) 0;
  background:none; border:0; text-align:left;
  color:var(--fg); font-family:var(--font-display); font-size:var(--t-md); font-weight:700;
  letter-spacing:-.01em; cursor:pointer;
}
.sv-mnav__link i{ color:var(--brand); font-size:.85rem; transition:transform var(--d-2) var(--ease); }
.sv-mnav__item.is-open > .sv-mnav__link i{ transform:rotate(180deg); }
.sv-mnav__panel{ display:none; padding:0 0 var(--s-4) var(--s-3); border-left:2px solid var(--red-100); margin-bottom:var(--s-3); }
.sv-mnav__item.is-open > .sv-mnav__panel{ display:block; }
.sv-mnav__group{ display:block; margin:var(--s-4) 0 var(--s-2); font-size:var(--t-xs); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); }
.sv-mnav__panel a{ display:block; padding:.6rem 0 .6rem .9rem; color:var(--ink-500); font-size:var(--t-base); font-weight:500; min-height:44px; }
.sv-mnav__panel a:hover{ color:var(--brand); }

/* ==========================================================================
   07 · HERO
   ========================================================================== */
.sv-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - var(--nav-h));
  padding-block:var(--s-5);
  display:flex; align-items:center;
  background:var(--ink-900); color:#fff;
}
.sv-hero__media{ position:absolute; inset:0; z-index:0; }
.sv-hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.2s var(--ease), transform 7s linear;
}
.sv-hero__slide.is-active{ opacity:1; transform:scale(1); }
.sv-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(11,12,14,.92) 0%, rgba(11,12,14,.72) 42%, rgba(11,12,14,.34) 72%, rgba(11,12,14,.5) 100%),
    radial-gradient(80% 60% at 15% 50%, rgba(122,18,24,.42), transparent 70%);
}
/* (bottom fade removed — it washed out the stat row) */
.sv-hero__inner{ position:relative; z-index:2; width:100%; padding-block:var(--s-4); }
.sv-hero__content{ max-width:980px; }
.sv-hero__content .sv-eyebrow{ color:var(--red-300); font-size:.82rem; letter-spacing:.2em; }
.sv-hero h1{
  color:#fff; font-size:clamp(2.2rem,3.9vw + 0.85rem,4rem); font-weight:800; line-height:1.04; letter-spacing:-.032em;
  margin-bottom:var(--s-4);
}
.sv-hero h1 .sv-accent{ color:var(--red-400); }
.sv-hero__lead{ font-size:clamp(1.0625rem,0.45vw + 0.95rem,1.3rem); line-height:1.6; color:rgba(255,255,255,.86); max-width:58ch; margin-bottom:var(--s-5); }
.sv-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); }
.sv-hero__stats{
  display:flex; flex-wrap:wrap; gap:var(--s-7);
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.16);
}
.sv-hero__stat b{
  display:block; font-family:var(--font-display); font-size:clamp(2rem,2.2vw + 1.2rem,3.1rem); font-weight:800;
  color:#fff; line-height:1; letter-spacing:-.03em;
}
.sv-hero__stat span{ display:block; margin-top:.5rem; font-size:.82rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.64); }
.sv-hero__dots{ position:absolute; left:var(--gutter); bottom:var(--s-6); z-index:3; display:flex; gap:.5rem; }
.sv-hero__dots button{
  width:32px; height:4px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background var(--d-2) var(--ease), width var(--d-2) var(--ease);
}
.sv-hero__dots button.is-active{ background:var(--red-400); width:52px; }
@media (max-width:767px){
  .sv-hero{ min-height:auto; padding-block:var(--s-8); }
  .sv-hero__stats{ gap:var(--s-5); margin-top:var(--s-7); }
  .sv-hero__actions .sv-btn{ width:100%; }
  .sv-hero__dots{ bottom:var(--s-4); }
}

/* ==========================================================================
   08 · MARQUEE / TICKER
   ========================================================================== */
.sv-marquee{
  background:var(--ink-900); color:#fff; overflow:hidden;
  padding-block:var(--s-4); border-block:1px solid rgba(255,255,255,.08);
}
.sv-marquee__track{
  display:flex; align-items:center; gap:var(--s-8); width:max-content;
  animation:sv-scroll 34s linear infinite;
}
.sv-marquee:hover .sv-marquee__track{ animation-play-state:paused; }
.sv-marquee__item{
  display:inline-flex; align-items:center; gap:.75rem; flex:none;
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.86);
}
.sv-marquee__item i{ color:var(--red-400); font-size:.9em; }
@keyframes sv-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   09 · CARDS
   ========================================================================== */
.sv-cat{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); background:var(--ink-800);
  aspect-ratio:4/5; box-shadow:var(--e-1);
  transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.sv-cat img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-4) var(--ease); }
.sv-cat::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,0) 34%, rgba(11,12,14,.82) 100%);
  transition:background var(--d-3) var(--ease);
}
.sv-cat__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--s-5); color:#fff; }
.sv-cat__title{
  font-family:var(--font-display); font-size:var(--t-md); font-weight:700;
  letter-spacing:-.01em; line-height:1.25; color:#fff; margin:0;
}
.sv-cat__more{
  display:flex; align-items:center; gap:.45rem; margin-top:.5rem;
  font-size:var(--t-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-300); opacity:0; transform:translateY(8px);
  transition:opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.sv-cat:hover{ transform:translateY(-6px); box-shadow:var(--e-4); }
.sv-cat:hover img{ transform:scale(1.08); }
.sv-cat:hover::after{ background:linear-gradient(180deg, rgba(122,18,24,.15) 20%, rgba(11,12,14,.9) 100%); }
.sv-cat:hover .sv-cat__more{ opacity:1; transform:translateY(0); }
@media (max-width:575px){ .sv-cat{ aspect-ratio:1/1; } .sv-cat__body{ padding:var(--s-4); } }

/* Product card */
.sv-prod{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.sv-prod__media{ position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden; }
.sv-prod__media img{ width:100%; height:100%; object-fit:contain; padding:0; transition:transform var(--d-4) var(--ease); }
.sv-prod__overlay{
  position:absolute; inset:auto 0 0 0; padding:var(--s-3);
  display:flex; justify-content:center; gap:var(--s-2);
  background:linear-gradient(to top, rgba(11,12,14,.75), transparent);
  opacity:0; transform:translateY(12px);
  transition:opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-prod__body{
  position:relative; padding:var(--s-4); display:flex; flex-direction:column; gap:.35rem; flex:1;
  border-top:1px solid var(--line);
}
/* Short red rule marking where the picture ends and the name/code begin */
.sv-prod__body::before{
  content:""; position:absolute; top:-1px; left:var(--s-4);
  width:30px; height:2px; border-radius:2px; background:var(--brand);
  transition:width var(--d-3) var(--ease);
}
.sv-prod__title{
  font-family:var(--font-display); font-size:var(--t-base); font-weight:700; line-height:1.35;
  color:var(--fg); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sv-prod__code{ font-size:var(--t-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin:0; }
.sv-prod:hover{ transform:translateY(-6px); box-shadow:var(--e-3); border-color:transparent; }
.sv-prod:hover .sv-prod__media img{ transform:scale(1.07); }
.sv-prod:hover .sv-prod__body::before{ width:58px; }
.sv-prod:hover .sv-prod__overlay{ opacity:1; transform:translateY(0); }
.sv-prod__link{ position:absolute; inset:0; z-index:3; }

/* Feature card */
.sv-feature{
  position:relative; height:100%; padding:var(--s-6);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.sv-feature::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--red-600),var(--red-400));
  transform:scaleX(0); transform-origin:left; transition:transform var(--d-3) var(--ease);
}
.sv-feature__icon{
  width:58px; height:58px; border-radius:var(--r-md);
  display:grid; place-items:center; margin-bottom:var(--s-5);
  background:var(--red-50); color:var(--brand); font-size:1.35rem;
  transition:background var(--d-3) var(--ease), color var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.sv-feature h3{ font-size:var(--t-lg); margin-bottom:var(--s-2); }
.sv-feature p{ font-size:var(--t-base); color:var(--fg-muted); margin:0; }
.sv-feature:hover{ transform:translateY(-6px); box-shadow:var(--e-3); border-color:transparent; }
.sv-feature:hover::before{ transform:scaleX(1); }
.sv-feature:hover .sv-feature__icon{ background:var(--brand); color:#fff; transform:rotate(-6deg) scale(1.06); }

/* Numbered step card */
.sv-step{ position:relative; padding:var(--s-6); border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); height:100%; transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.sv-step__num{
  font-family:var(--font-display); font-size:var(--t-3xl); font-weight:800; line-height:1;
  color:var(--red-100); letter-spacing:-.04em; margin-bottom:var(--s-4); display:block;
  transition:color var(--d-3) var(--ease);
}
.sv-step h3{ font-size:var(--t-lg); margin-bottom:var(--s-2); }
.sv-step p{ font-size:var(--t-base); color:var(--fg-muted); margin:0; }
.sv-step:hover{ transform:translateY(-5px); box-shadow:var(--e-3); }
.sv-step:hover .sv-step__num{ color:var(--brand); }

/* Stat block */
.sv-stat{ text-align:center; padding:var(--s-5) var(--s-3); }
.sv-stat b{ display:block; font-family:var(--font-display); font-size:var(--t-4xl); font-weight:800; color:var(--brand); line-height:1; letter-spacing:-.03em; }
.sv-stat span{ display:block; margin-top:.6rem; font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-subtle); }

/* Trust strip item */
.sv-trust{ display:flex; align-items:center; gap:var(--s-4); }
.sv-trust__icon{
  width:52px; height:52px; flex:none; border-radius:var(--r-full);
  display:grid; place-items:center; font-size:1.15rem;
  border:1.5px solid var(--red-200); color:var(--brand); background:#fff;
  transition:background var(--d-3) var(--ease), color var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.sv-trust:hover .sv-trust__icon{ background:var(--brand); color:#fff; transform:translateY(-3px) rotate(-6deg); }
.sv-trust__label{ font-family:var(--font-display); font-size:var(--t-sm); font-weight:700; color:var(--fg); line-height:1.35; }

/* News card */
.sv-news{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.sv-news__media{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-wash); }
.sv-news__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-4) var(--ease); }
.sv-news__body{ padding:var(--s-5); flex:1; display:flex; flex-direction:column; gap:var(--s-3); }
.sv-news__tag{ font-size:var(--t-xs); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.sv-news h3{ font-size:var(--t-md); margin:0; line-height:1.35; }
.sv-news:hover{ transform:translateY(-6px); box-shadow:var(--e-3); }
.sv-news:hover .sv-news__media img{ transform:scale(1.06); }

/* Gallery tile */
.sv-gal{ position:relative; display:block; overflow:hidden; border-radius:var(--r-md); aspect-ratio:4/3; background:var(--bg-wash); }
.sv-gal img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-4) var(--ease); }
.sv-gal::after{
  content:"\f00e"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(122,18,24,.72); color:#fff; font-size:1.5rem;
  opacity:0; transition:opacity var(--d-2) var(--ease);
}
.sv-gal:hover img{ transform:scale(1.08); }
.sv-gal:hover::after{ opacity:1; }

/* ==========================================================================
   10 · SECTIONS
   ========================================================================== */
/* Page hero for inner pages */
.sv-phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink-900); color:#fff;
  padding-block:var(--s-9) var(--s-9);
}
.sv-phero__bg{ position:absolute; inset:0; z-index:0; opacity:.42; }
.sv-phero__bg img{ width:100%; height:100%; object-fit:cover; }
.sv-phero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.72) 55%, rgba(61,10,13,.6) 100%);
}
.sv-phero__inner{ position:relative; z-index:2; }
.sv-phero h1{ color:#fff; font-size:var(--t-4xl); margin:0; letter-spacing:-.03em; }
.sv-phero p{ color:rgba(255,255,255,.72); font-size:var(--t-lg); max-width:60ch; margin-top:var(--s-4); }
@media (min-width:768px){ .sv-phero{ padding-block:var(--s-10); } }

/* Breadcrumb */
.sv-crumb{ background:var(--bg-wash); border-bottom:1px solid var(--line); }
.sv-crumb__inner{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding-block:var(--s-3); font-size:var(--t-sm); color:var(--fg-subtle);
}
.sv-crumb a{ color:var(--fg-subtle); font-weight:600; }
.sv-crumb a:hover{ color:var(--brand); }
.sv-crumb span{ color:var(--ink-300); }

/* Split media block with layered frame */
.sv-frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e-3); }
.sv-frame img{ width:100%; height:100%; object-fit:cover; }
.sv-frame--offset::before{
  content:""; position:absolute; inset:auto auto -14px -14px; width:60%; height:60%;
  border:2px solid var(--red-200); border-radius:var(--r-lg); z-index:-1;
}
.sv-media-stack{ position:relative; padding-bottom:var(--s-6); padding-right:var(--s-6); }
.sv-media-stack__main{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e-3); }
.sv-media-stack__main img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.sv-media-stack__badge{
  position:absolute; right:0; bottom:0; z-index:2;
  background:var(--brand); color:#fff; border-radius:var(--r-md);
  padding:var(--s-5) var(--s-6); box-shadow:var(--e-brand); text-align:center;
}
.sv-media-stack__badge b{ display:block; font-family:var(--font-display); font-size:var(--t-2xl); font-weight:800; line-height:1; }
.sv-media-stack__badge span{ display:block; margin-top:.35rem; font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.86; }

/* Checklist */
.sv-checks{ display:grid; gap:var(--s-3); margin-top:var(--s-5); }
.sv-checks li{ display:flex; align-items:flex-start; gap:.75rem; font-size:var(--t-base); color:var(--fg-muted); }
.sv-checks i{ color:var(--brand); margin-top:.35rem; flex:none; }

/* CTA band */
.sv-cta{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(115deg,var(--ink-900) 0%,var(--red-900) 55%,var(--red-700) 100%);
  color:#fff; border-radius:var(--r-xl);
  padding:var(--s-8) var(--s-6);
}
.sv-cta::before{
  content:""; position:absolute; inset:auto -10% -60% auto; width:520px; height:520px; z-index:-1;
  background:radial-gradient(circle, rgba(194,33,39,.5), transparent 65%);
}
.sv-cta h2{ color:#fff; font-size:var(--t-3xl); margin-bottom:var(--s-3); }
.sv-cta p{ color:rgba(255,255,255,.76); font-size:var(--t-lg); max-width:56ch; margin:0; }
.sv-cta__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-6); }
@media (min-width:992px){
  .sv-cta{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-8); padding:var(--s-9) var(--s-9); }
  .sv-cta__actions{ margin-top:0; flex:none; }
}

/* ==========================================================================
   11 · SIDEBAR CATEGORY TREE
   ========================================================================== */
.sv-shell{ display:grid; gap:var(--s-6); align-items:start; }
@media (min-width:992px){ .sv-shell{ grid-template-columns:290px minmax(0,1fr); gap:var(--s-8); } }

.sv-side{ position:relative; }
@media (min-width:992px){ .sv-side{ position:sticky; top:calc(var(--nav-h) + 20px); } }
.sv-side__head{ margin-bottom:var(--s-4); }
.sv-side__head h2{ font-size:var(--t-xl); margin:0; }
.sv-tree{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s-2) var(--s-4);
  max-height:min(70vh,640px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--ink-200) transparent;
}
.sv-tree::-webkit-scrollbar{ width:8px; }
.sv-tree::-webkit-scrollbar-track{ background:transparent; }
.sv-tree::-webkit-scrollbar-thumb{ background:var(--ink-200); border-radius:var(--r-full); border:2px solid #fff; }
.sv-tree::-webkit-scrollbar-thumb:hover{ background:var(--brand); }
.sv-tree input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0; }
.sv-tree li{ position:relative; }
.sv-tree > li + li{ border-top:1px solid var(--ink-100); }
.sv-tree label{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin:0; padding:.85rem 0; min-height:48px; cursor:pointer;
  font-family:var(--font-display); font-size:var(--t-base); font-weight:700; color:var(--fg);
  transition:color var(--d-1) var(--ease);
}
.sv-tree label::after{
  content:"\f078"; font-family:"Font Awesome 5 Free"; font-weight:900;
  font-size:.62rem; color:var(--brand); transition:transform var(--d-2) var(--ease);
}
.sv-tree label:hover{ color:var(--brand); }
.sv-tree input:checked + label::after{ transform:rotate(180deg); }
.sv-tree ul{ display:none; padding:0 0 var(--s-3) var(--s-3); border-left:2px solid var(--red-100); margin-bottom:var(--s-2); }
.sv-tree input:checked + label + ul{ display:block; }
.sv-tree ul li a{
  display:block; padding:.5rem .75rem; min-height:40px;
  font-size:var(--t-sm); font-weight:500; color:var(--ink-500);
  border-radius:var(--r-sm); transition:background var(--d-1) var(--ease), color var(--d-1) var(--ease), padding-left var(--d-1) var(--ease);
}
.sv-tree ul li a:hover{ background:var(--red-50); color:var(--brand); padding-left:1.1rem; }
.sv-tree ul ul{ padding-left:var(--s-3); }
.sv-tree a.is-current,.sv-tree a.cat_active{ color:var(--brand); font-weight:700; background:var(--red-50); }
.sv-tree > li > a{
  display:block; padding:.85rem 0; min-height:48px;
  font-family:var(--font-display); font-size:var(--t-base); font-weight:700; color:var(--fg);
}
.sv-tree > li > a:hover{ color:var(--brand); }

/* Toolbar above product grid */
.sv-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding-bottom:var(--s-5); margin-bottom:var(--s-6); border-bottom:1px solid var(--line);
}
.sv-toolbar h1{ font-size:var(--t-2xl); margin:0; }
.sv-toolbar__count{ font-size:var(--t-sm); color:var(--fg-subtle); font-weight:600; }

/* Empty state */
.sv-empty{ text-align:center; padding:var(--s-10) var(--s-5); border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--bg-wash); }
.sv-empty i{ font-size:2.5rem; color:var(--ink-300); margin-bottom:var(--s-4); }
.sv-empty h3{ font-size:var(--t-lg); margin-bottom:var(--s-2); }
.sv-empty p{ color:var(--fg-subtle); margin:0; }

/* ==========================================================================
   12 · PRODUCT DETAIL
   ========================================================================== */
.sv-pd{ display:grid; gap:var(--s-7); }
@media (min-width:992px){ .sv-pd{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-9); align-items:start; } }
.sv-pd__stage{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.sv-pd__stage img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:var(--s-6); }
.sv-pd__zoom{
  position:absolute; right:var(--s-4); bottom:var(--s-4); z-index:4;
  width:46px; height:46px; border-radius:var(--r-full); display:grid; place-items:center;
  background:rgba(11,12,14,.72); color:#fff; font-size:.95rem; backdrop-filter:blur(4px);
  transition:background var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-pd__zoom:hover{ background:var(--brand); color:#fff; transform:scale(1.08); }
.sv-pd__thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3); margin-top:var(--s-3); }
.sv-pd__thumb{ border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff; transition:border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease); }
.sv-pd__thumb img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:var(--s-2); }
.sv-pd__thumb:hover{ border-color:var(--brand); transform:translateY(-3px); }
.sv-pd__code{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:var(--r-full); background:var(--red-50); color:var(--brand); font-size:var(--t-xs); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sv-pd h1{ font-size:var(--t-3xl); margin:var(--s-4) 0 var(--s-3); }
.sv-pd__desc{ color:var(--fg-muted); font-size:var(--t-base); }
.sv-pd__panel{ margin-top:var(--s-6); padding:var(--s-6); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-wash); }
.sv-pd__row{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:flex-end; }
.sv-pd__meta{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }
.sv-pd__meta li{ display:flex; align-items:center; gap:.75rem; font-size:var(--t-sm); color:var(--fg-muted); }
.sv-pd__meta i{ color:var(--brand); width:20px; text-align:center; }

/* ==========================================================================
   13 · FORMS
   ========================================================================== */
.sv-field{ display:block; margin-bottom:var(--s-5); }
.sv-label{ display:block; margin-bottom:.5rem; font-size:var(--t-sm); font-weight:700; color:var(--fg); letter-spacing:.01em; }
.sv-label .req{ color:var(--brand); }
.sv-input,.sv-select,.sv-textarea{
  width:100%; min-height:52px; padding:.85rem 1rem;
  background:#fff; color:var(--fg);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:var(--t-base); line-height:1.5;
  transition:border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.sv-textarea{ min-height:140px; resize:vertical; padding-top:.9rem; }
.sv-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A4F58' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; padding-right:2.75rem;
}
.sv-input:hover,.sv-select:hover,.sv-textarea:hover{ border-color:var(--ink-300); }
.sv-input:focus,.sv-select:focus,.sv-textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--red-50);
}
.sv-input::placeholder,.sv-textarea::placeholder{ color:var(--ink-300); }
.sv-form-grid{ display:grid; gap:0 var(--s-5); }
@media (min-width:768px){ .sv-form-grid--2{ grid-template-columns:1fr 1fr; } }
.sv-form-grid .sv-field--full{ grid-column:1/-1; }
.sv-help{ margin-top:.4rem; font-size:var(--t-xs); color:var(--fg-subtle); }
.sv-captcha{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.sv-captcha__code{
  display:inline-flex; align-items:center; justify-content:center; min-width:110px; height:52px; padding:0 var(--s-4);
  background:var(--ink-900); color:#fff; border-radius:var(--r-sm);
  font-family:var(--font-display); font-size:var(--t-lg); font-weight:800; letter-spacing:.28em;
  user-select:all;
}
.sv-captcha .sv-input{ flex:1; min-width:180px; }

/* Alerts */
.sv-alert{ display:flex; align-items:flex-start; gap:.75rem; padding:var(--s-4) var(--s-5); border-radius:var(--r-md); font-size:var(--t-base); margin-bottom:var(--s-5); border:1px solid transparent; }
.sv-alert i{ margin-top:.25rem; }
.sv-alert--ok{ background:#ECFDF3; border-color:#A6E9C2; color:#08502F; }
.sv-alert--err{ background:var(--red-50); border-color:var(--red-200); color:var(--red-800); }
.sv-alert--info{ background:#EFF6FF; border-color:#BFDBFE; color:#1E3A8A; }

/* Quantity stepper */
.sv-qty{ display:inline-flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--r-full); overflow:hidden; background:#fff; }
.sv-qty button{ width:46px; border:0; background:transparent; color:var(--fg); font-size:.9rem; cursor:pointer; transition:background var(--d-1) var(--ease), color var(--d-1) var(--ease); }
.sv-qty button:hover{ background:var(--brand); color:#fff; }
.sv-qty input{ width:64px; border:0; text-align:center; font-family:var(--font-display); font-weight:700; font-size:var(--t-md); color:var(--fg); background:transparent; -moz-appearance:textfield; }
.sv-qty input::-webkit-outer-spin-button,.sv-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ==========================================================================
   14 · TABLES / PAGINATION
   ========================================================================== */
.sv-table-wrap{ width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.sv-table{ width:100%; border-collapse:collapse; min-width:640px; }
.sv-table th{
  padding:var(--s-4) var(--s-5); text-align:left; background:var(--bg-wash);
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-subtle);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.sv-table td{ padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--ink-100); vertical-align:middle; font-size:var(--t-base); }
.sv-table tr:last-child td{ border-bottom:0; }
.sv-table tbody tr{ transition:background var(--d-1) var(--ease); }
.sv-table tbody tr:hover{ background:var(--red-50); }
.sv-table__thumb{ width:72px; height:72px; object-fit:contain; background:var(--bg-wash); border-radius:var(--r-sm); padding:6px; }

.sv-pager{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem; margin-top:var(--s-8); }
.sv-pager a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 .85rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  color:var(--fg); font-size:var(--t-sm); font-weight:700;
  transition:background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-pager a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px); }
.sv-pager a.paging_act,.sv-pager .is-current{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }

/* ==========================================================================
   15 · FOOTER
   ========================================================================== */
.sv-footer{ position:relative; background:var(--ink-900); color:var(--ink-300); overflow:hidden; }
.sv-footer::before{
  content:""; position:absolute; inset:auto auto -40% -10%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(122,18,24,.32), transparent 68%); pointer-events:none;
}
.sv-footer__top{ position:relative; z-index:1; padding-block:var(--s-9) var(--s-8); }
.sv-footer__grid{ display:grid; gap:var(--s-7); }
@media (min-width:768px){ .sv-footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .sv-footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s-8); } }
.sv-footer__brand img{ height:48px; width:auto; margin-bottom:var(--s-5); }
.sv-footer__brand p{ font-size:var(--t-sm); line-height:1.8; color:var(--ink-400); max-width:38ch; }
.sv-footer h4{
  color:#fff; font-size:var(--t-sm); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:var(--s-5);
}
.sv-footer li{ margin-bottom:.7rem; }
.sv-footer li a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--ink-300); font-size:var(--t-sm);
  transition:color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-footer li a::before{ content:""; width:0; height:1px; background:var(--brand); transition:width var(--d-2) var(--ease); }
.sv-footer li a:hover{ color:#fff; transform:translateX(4px); }
.sv-footer li a:hover::before{ width:12px; }
.sv-footer__contact li{ display:flex; align-items:flex-start; gap:.75rem; font-size:var(--t-sm); color:var(--ink-300); line-height:1.7; }
.sv-footer__contact i{ color:var(--brand); margin-top:.4rem; width:16px; text-align:center; flex:none; }
.sv-footer__social{ display:flex; gap:var(--s-2); margin-top:var(--s-5); }
.sv-footer__social a{
  width:42px; height:42px; border-radius:var(--r-full); display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); color:var(--ink-300);
  transition:background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-footer__social a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-3px); }
.sv-footer__bottom{
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:var(--s-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4);
  font-size:var(--t-xs); color:var(--ink-400);
}
.sv-footer__bottom a{ color:var(--ink-300); }
.sv-footer__bottom a:hover{ color:#fff; }
.sv-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--s-4); }

/* Back-to-top */
.sv-top{
  position:fixed; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:900;
  width:50px; height:50px; border-radius:var(--r-full); border:0;
  background:var(--brand); color:#fff; font-size:1rem; cursor:pointer;
  box-shadow:var(--e-brand);
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), visibility var(--d-2), background var(--d-2) var(--ease);
}
.sv-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.sv-top:hover{ background:var(--ink-900); transform:translateY(-4px); }

/* Floating WhatsApp / contact bubble */
.sv-fab{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:900;
  display:inline-flex; align-items:center; gap:.6rem;
  height:52px; padding:0 var(--s-5); border-radius:var(--r-full);
  background:#fff; color:var(--fg) !important; box-shadow:var(--e-3);
  font-size:var(--t-sm); font-weight:700;
  transition:transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sv-fab i{ color:var(--brand); font-size:1.1rem; }
.sv-fab:hover{ transform:translateY(-4px); box-shadow:var(--e-4); }
@media (max-width:575px){ .sv-fab span{ display:none; } .sv-fab{ padding:0; width:52px; justify-content:center; } }

/* ==========================================================================
   16 · MOTION LAYER
   Every animated element is VISIBLE BY DEFAULT. JS adds the hidden state
   only after confirming GSAP loaded and reduced-motion is not requested,
   so no-JS / blocked-CDN / crawler visitors always see full content.
   ========================================================================== */
.sv-reveal{ will-change:transform,opacity; }
.sv-tilt{ transform-style:preserve-3d; transition:transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease); }
.sv-tilt__inner{ transform:translateZ(0); }
.sv-parallax{ will-change:transform; }

/* Magnetic hover for primary CTAs (JS-driven translate) */
.sv-magnetic{ will-change:transform; }

/* Count-up numbers keep their static value until JS animates them */
.sv-count{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .sv-marquee__track{ animation:none !important; }
  .sv-hero__slide{ transition:opacity .001ms !important; transform:none !important; }
}

/* ==========================================================================
   17 · VENDOR OVERRIDES (fancybox / owl / slick remain in use)
   ========================================================================== */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next{
  width:46px; height:46px; border-radius:var(--r-full);
  background:#fff !important; border:1px solid var(--line) !important; color:var(--fg) !important;
  box-shadow:var(--e-2); transition:background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.owl-carousel .owl-nav button:hover{ background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
.owl-theme .owl-dots .owl-dot span{ background:var(--ink-200) !important; width:9px !important; height:9px !important; }
.owl-theme .owl-dots .owl-dot.active span{ background:var(--brand) !important; width:26px !important; border-radius:5px !important; }
.slick-prev:before,.slick-next:before{ color:#fff !important; }

/* ==========================================================================
   18 · UTILITIES
   ========================================================================== */
.u-mt-0{ margin-top:0 !important; }
.u-mb-0{ margin-bottom:0 !important; }
.u-mt-4{ margin-top:var(--s-4); }
.u-mt-6{ margin-top:var(--s-6); }
.u-mt-8{ margin-top:var(--s-8); }
.u-flex{ display:flex; }
.u-wrap{ flex-wrap:wrap; }
.u-gap-3{ gap:var(--s-3); }
.u-gap-4{ gap:var(--s-4); }
.u-items-center{ align-items:center; }
.u-justify-between{ justify-content:space-between; }
.u-text-center{ text-align:center; }
.u-w-full{ width:100%; }
.u-prose{ max-width:74ch; }
.u-prose h2{ font-size:var(--t-2xl); margin-top:var(--s-7); }
.u-prose h3{ font-size:var(--t-xl); margin-top:var(--s-6); }
.u-prose p{ color:var(--fg-muted); font-size:var(--t-md); line-height:1.85; }
.u-prose ul{ margin:0 0 var(--s-4); padding-left:var(--s-5); }
.u-prose ul li{ list-style:disc; color:var(--fg-muted); margin-bottom:.5rem; }
.u-prose img{ border-radius:var(--r-md); margin-block:var(--s-5); }
.u-prose table{ width:100%; border-collapse:collapse; margin-block:var(--s-5); }
.u-prose th,.u-prose td{ border:1px solid var(--line); padding:.7rem .9rem; font-size:var(--t-base); }
.u-prose th{ background:var(--bg-wash); font-weight:700; }

/* Small-screen safety: nothing may cause horizontal scroll */
@media (max-width:575px){
  .sv-cta{ padding:var(--s-7) var(--s-5); border-radius:var(--r-lg); }
  .sv-media-stack{ padding-bottom:var(--s-5); padding-right:0; }
  .sv-media-stack__badge{ position:static; margin-top:var(--s-4); }
  .sv-pd__thumbs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sv-toolbar h1{ font-size:var(--t-xl); }
}

/* Print */
@media print{
  .sv-header,.sv-topbar,.sv-footer,.sv-top,.sv-fab,.sv-drawer,.sv-scrim,.sv-search,.sv-marquee{ display:none !important; }
  body{ color:#000; }
}

/* Responsive visibility helpers */
.sv-hide-sm{ display:none; }
@media (min-width:768px){ .sv-hide-sm{ display:block; } }
.sv-hide-md{ display:none; }
@media (min-width:1200px){ .sv-hide-md{ display:inline-flex; } }

/* ==========================================================================
   19 · RED HEADER ADJUSTMENTS
   The main bar is brand red, so its controls invert: white logo, white
   links, and a white CTA that reads as the brightest thing on the bar.
   ========================================================================== */
.sv-btn--onred{ --btn-bg:var(--brand); --btn-fg:#fff; border-color:var(--brand); }
.sv-btn--onred:hover{ background:var(--brand-hi); border-color:var(--brand-hi); color:#fff !important; }
.sv-header .sv-brand img{ filter:none; }
.sv-burger{ border-color:var(--line); }

/* Mega/dropdown panels stay white cards under the red bar */
.sv-header .sv-drop{ color:var(--ink-600); }

/* Mega menu: "view all" affordance per column */
.sv-mega__more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.35rem;
  padding:.35rem .5rem;
  font-size:var(--t-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand) !important;
}
.sv-mega__more i{ font-size:.8em; transition:transform var(--d-2) var(--ease); }
.sv-mega__more:hover i{ transform:translateX(4px); }

/* Sidebar tree: sticky "showing N of M" hint above the scroll area */
.sv-side__hint{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  margin-bottom:var(--s-3); font-size:var(--t-xs); color:var(--fg-subtle);
}

/* ==========================================================================
   20 · HERO VIDEO / EMBED SLIDES
   Video and YouTube slides fill the same stage as image slides and inherit
   the crossfade. Both are decorative background: muted, non-interactive,
   and never the only source of information.
   ========================================================================== */
.sv-hero__slide--video,
.sv-hero__slide--embed{ background-size:cover; background-position:center; overflow:hidden; }
.sv-hero__slide--video video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
.sv-hero__slide--embed iframe{
  position:absolute; top:50%; left:50%;
  /* 16:9 kept larger than the stage so the frame is always covered */
  width:100vw; height:56.25vw; min-height:100%; min-width:177.77vh;
  transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .sv-hero__slide--video video{ display:none; }
  .sv-hero__slide--embed iframe{ display:none; }
}

/* ==========================================================================
   21 · CATALOGUE CARDS
   Cover-led cards for the downloads page. Covers keep a portrait book
   ratio; rows with no cover (or a cover file that 404s) fall back to a
   tinted placeholder rather than a broken image.
   ========================================================================== */
.sv-cata{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.sv-cata:hover{ transform:translateY(-6px); box-shadow:var(--e-3); border-color:transparent; }
.sv-cata__cover{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(150deg, var(--ink-100), var(--ink-50));
  display:grid; place-items:center;
}
.sv-cata__cover img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-4) var(--ease); }
.sv-cata:hover .sv-cata__cover img{ transform:scale(1.05); }
.sv-cata__ph,
.sv-cata__cover.is-fallback::after{
  content:"\f1c1"; font-family:"Font Awesome 5 Free"; font-weight:900;
  font-size:2.6rem; color:var(--red-200);
  display:grid; place-items:center; width:100%; height:100%;
}
.sv-cata__cover.is-fallback{ display:grid; }
.sv-cata__badge{
  position:absolute; top:var(--s-3); left:var(--s-3); z-index:2;
  padding:.25rem .6rem; border-radius:var(--r-full);
  background:var(--brand); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.sv-cata__body{ padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.sv-cata__title{ font-size:var(--t-md); margin:0; line-height:1.3; }
.sv-cata__desc{
  font-size:var(--t-sm); color:var(--fg-muted); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sv-cata__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:auto; }

/* ==========================================================================
   22 · HERO FIT + CATALOGUE CARD SIZING
   ========================================================================== */
/* Keep the whole hero — heading, lead, buttons AND the stat row — inside the
   first screen. Short laptop viewports get progressively tighter spacing
   rather than pushing the stats below the fold. */
.sv-hero__inner{ padding-block:var(--s-6); }
.sv-hero__lead{ margin-bottom:var(--s-5); }

@media (min-width:992px) and (max-height:900px){
  .sv-hero h1{ font-size:clamp(2.2rem,3.3vw + 0.7rem,3.55rem); margin-bottom:var(--s-3); }
  .sv-hero__lead{ font-size:1.0625rem; margin-bottom:var(--s-4); }
  .sv-hero__inner{ padding-block:var(--s-5); }
  .sv-hero__stats{ margin-top:var(--s-5); padding-top:var(--s-4); gap:var(--s-6); }
  .sv-hero__stat b{ font-size:var(--t-2xl); }
}
@media (min-width:992px) and (max-height:760px){
  .sv-hero .sv-eyebrow{ margin-bottom:var(--s-2); }
  .sv-hero h1{ font-size:2.6rem; }
  .sv-hero__lead{ display:none; }
  .sv-hero__stats{ margin-top:var(--s-4); }
}

/* Catalogue covers were stretching to fill the row when only one or two
   catalogues exist. Cap the card so a single PDF does not become a
   full-page cover. */
.sv-grid--cata{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  justify-content:start;
}
.sv-cata{ max-width:300px; width:100%; }
.sv-cata__cover{ aspect-ratio:3/4; max-height:340px; }

/* ==========================================================================
   23 · HERO ON PHONES — full-bleed media, whole hero on one screen
   The background media must fill the hero box, and everything the visitor
   is meant to read (eyebrow, headline, buttons, all three figures) has to
   be there the moment the page opens, without scrolling.
   ========================================================================== */

/* A YouTube/Vimeo frame sized in viewport units letterboxes as soon as the
   hero is taller than one screen's worth of 16:9 — that is what produced the
   black band under the header on phones. Container units size the frame
   against the slide itself, so it always overflows and crops instead. */
.sv-hero__slide--embed{
  background-color:var(--ink-900);
  background-image:linear-gradient(140deg,var(--ink-900) 0%,var(--red-900) 55%,var(--ink-800) 100%);
}
@supports (width:1cqw){
  .sv-hero__slide--embed{ container-type:size; }
  .sv-hero__slide--embed iframe{
    width:100cqw; height:56.25cqw;
    min-width:177.7778cqh; min-height:100cqh;
  }
}

@media (max-width:767px){
  .sv-hero{
    min-height:calc(100svh - var(--nav-h));
    padding-block:var(--s-5);
  }
  .sv-hero__inner{ padding-block:var(--s-4); }
  .sv-hero .sv-eyebrow{ font-size:10px; letter-spacing:.14em; margin-bottom:var(--s-2); }
  .sv-hero h1{ font-size:clamp(1.8rem,7.6vw,2.45rem); margin-bottom:var(--s-3); }
  .sv-hero__lead{
    font-size:var(--t-base); line-height:1.6; margin-bottom:var(--s-5);
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sv-hero__actions{ gap:var(--s-3); }
  .sv-hero__actions .sv-btn{ width:100%; }

  /* Three figures side by side instead of three stacked rows — the row that
     used to push "Instrument families" and "OEM" below the fold. */
  .sv-hero__stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3);
    margin-top:var(--s-5); padding-top:var(--s-4);
  }
  .sv-hero__stat b{ font-size:var(--t-xl); }
  .sv-hero__stat span{
    margin-top:.35rem; font-size:9.5px; letter-spacing:.07em; line-height:1.35;
    color:rgba(255,255,255,.66);
  }
  .sv-hero__dots{ bottom:var(--s-3); }
}

/* Short phones (and landscape): trim the paragraph before letting the
   figures fall off the screen. */
@media (max-width:767px) and (max-height:720px){
  .sv-hero h1{ font-size:1.75rem; }
  .sv-hero__lead{ -webkit-line-clamp:2; margin-bottom:var(--s-4); }
  .sv-hero__stats{ margin-top:var(--s-4); }
}
@media (max-width:767px) and (max-height:600px){
  .sv-hero__lead{ display:none; }
}

/* ==========================================================================
   24 · MOBILE MENU — CATEGORIES FIRST
   The drawer opens on a short list of categories; sub-categories appear
   only when a category is tapped, one open at a time.
   ========================================================================== */
.sv-mnav__panel .sv-mnav__all{
  display:block; padding:.7rem 0 .7rem .9rem; min-height:44px;
  color:var(--brand); font-weight:800; font-size:var(--t-base);
}
.sv-mnav__sub{ border-top:1px solid var(--ink-100); }
.sv-mnav__sublink{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  width:100%; min-height:48px; padding:.55rem .5rem .55rem .9rem;
  background:none; border:0; text-align:left; cursor:pointer;
  color:var(--fg); font-family:var(--font-body); font-size:var(--t-base);
  font-weight:700; line-height:1.35;
}
.sv-mnav__sublink i{
  flex:none; color:var(--ink-300); font-size:.7rem;
  transition:transform var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sv-mnav__sub.is-open > .sv-mnav__sublink{ color:var(--brand); }
.sv-mnav__sub.is-open > .sv-mnav__sublink i{ transform:rotate(180deg); color:var(--brand); }
.sv-mnav__subpanel{
  display:none; margin:0 0 var(--s-3) .9rem;
  padding:var(--s-1) 0 0; border-left:2px solid var(--red-100);
}
.sv-mnav__sub.is-open > .sv-mnav__subpanel{ display:block; }
.sv-mnav__subpanel a{
  display:block; padding:.5rem 0 .5rem .9rem; min-height:40px;
  color:var(--ink-500); font-size:var(--t-sm); font-weight:500; line-height:1.4;
}
.sv-mnav__subpanel a:hover{ color:var(--brand); }
.sv-mnav__subpanel .sv-mnav__more{ color:var(--brand); font-weight:700; }
.sv-search__close svg{ width:22px; height:22px; display:block; }

/* ==========================================================================
   25 · CERTIFICATIONS / ASSURANCE
   Credential marks are managed from cx-panel, so the grid has to look right
   with three logos or with nine. Marks sit quiet until hovered — a wall of
   full-contrast logos competes with the page.
   ========================================================================== */
/* The credential strip is a rail: it creeps sideways on its own, and can be
   dragged, swiped, arrowed or tabbed through by hand. Scroll snapping is
   deliberately absent — it fights the continuous auto-scroll. */
/* Generic rail: a row that creeps sideways on its own and can be driven by
   hand. Arrows sit beside the track, never over it — overlaying them covered
   the first and last card. Used by the credential strip and, on phones, by
   card rows that would otherwise squeeze into unreadable columns. */
.sv-rail{ display:flex; align-items:center; gap:var(--s-3); }
.sv-rail__track{
  flex:1 1 auto; min-width:0;
  display:flex; gap:var(--s-4);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-behavior:auto; /* the rAF creep must not be re-smoothed */
  scrollbar-width:none; -ms-overflow-style:none;
  padding-block:var(--s-1);
  justify-content:safe center;
  align-items:stretch;
}
.sv-rail__track::-webkit-scrollbar{ display:none; }
.sv-rail__track:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--r-md); }
.sv-rail.is-scrollable .sv-rail__track{
  justify-content:flex-start; cursor:grab;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.sv-rail.is-scrollable .sv-rail__track.is-dragging{ cursor:grabbing; }
.sv-rail.is-scrollable .sv-rail__track.is-dragging > *{ pointer-events:none; }

.sv-rail__nav{ display:none; }
.sv-rail.is-scrollable .sv-rail__nav{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; padding:0; border-radius:var(--r-full); cursor:pointer;
  background:#fff; border:1px solid var(--line); color:var(--fg);
  box-shadow:var(--e-1);
  transition:background var(--d-2) var(--ease), color var(--d-2) var(--ease),
             border-color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sv-rail.is-scrollable .sv-rail__nav:hover{
  background:var(--brand); border-color:var(--brand); color:#fff; transform:scale(1.07);
}
.sv-rail__nav svg{ width:18px; height:18px; display:block; }

/* Credential strip */
.sv-certs{ margin-bottom:var(--s-7); }

/* Feature cards as a rail — one readable card at a time on a phone instead
   of two columns two words wide. */
.sv-rail--features .sv-rail__track{ gap:var(--s-5); align-items:stretch; }
.sv-rail--features .sv-feature{ flex:0 0 clamp(250px,24vw,310px); height:auto; }
@media (max-width:767px){
  .sv-rail--features .sv-feature{ flex:0 0 min(78vw,320px); }
}
@media (max-width:575px){
  .sv-rail.is-scrollable .sv-rail__nav{ display:none; }
}
.sv-cert{
  flex:0 0 clamp(158px,17vw,200px);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
  margin:0; padding:var(--s-5) var(--s-4);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  text-align:center;
  transition:box-shadow var(--d-3) var(--ease), transform var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.sv-cert:hover{ transform:translateY(-4px); box-shadow:var(--e-2); border-color:transparent; }
.sv-cert__mark{ height:68px; display:grid; place-items:center; }
.sv-cert__mark img{
  max-height:68px; max-width:100%; width:auto; object-fit:contain;
  opacity:.66; transition:opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.sv-cert:hover .sv-cert__mark img{ opacity:1; transform:scale(1.04); }
/* Credential published before its certificate image — a plain typographic
   mark, never a facsimile of an official seal. */
.sv-cert__mark--text span{
  display:grid; place-items:center;
  padding:.5rem .85rem; border:2px solid var(--red-200); border-radius:var(--r-sm);
  font-family:var(--font-display); font-size:1.45rem; font-weight:800;
  letter-spacing:.06em; line-height:1; color:var(--brand);
  transition:background var(--d-3) var(--ease), color var(--d-3) var(--ease), border-color var(--d-3) var(--ease);
}
.sv-cert:hover .sv-cert__mark--text span{ background:var(--brand); border-color:var(--brand); color:#fff; }
.sv-cert figcaption{ display:flex; flex-direction:column; gap:.35rem; }
.sv-cert figcaption b{
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:700;
  line-height:1.35; color:var(--fg);
}
.sv-cert figcaption span{ font-size:var(--t-xs); line-height:1.5; color:var(--fg-muted); }

.sv-assure{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  padding-top:var(--s-6); border-top:1px solid var(--line);
}
.sv-assure__item{ display:flex; align-items:flex-start; gap:var(--s-4); }
.sv-assure__item i{
  flex:none; width:44px; height:44px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--red-50); color:var(--brand); font-size:1.05rem;
}
.sv-assure__item b{
  display:block; font-family:var(--font-display); font-size:var(--t-base);
  font-weight:700; color:var(--fg); margin-bottom:.3rem;
}
.sv-assure__item span{ display:block; font-size:var(--t-sm); line-height:1.6; color:var(--fg-muted); }

/* Captioned photograph (About Us photo grid) */
.sv-shot{ margin:0; display:flex; flex-direction:column; gap:var(--s-3); }
.sv-shot figcaption{
  font-size:var(--t-sm); font-weight:600; color:var(--fg-muted);
  line-height:1.45; padding-inline:var(--s-1);
}

/* ==========================================================================
   26 · IMAGE PLACEHOLDERS + CATEGORY BROWSE
   Rows with no photograph used to fall back to the company logo, which read
   as a wall of repeated logos across a grid. A quiet mark is calmer and
   makes the gap obvious to whoever fills the catalogue in.
   ========================================================================== */
.sv-prod__ph,
.sv-cat__ph{
  display:grid; place-items:center; width:100%; height:100%;
  background:linear-gradient(150deg,var(--ink-50),var(--ink-100));
  color:var(--ink-300); font-size:1.9rem;
}
.sv-cat__ph{ background:linear-gradient(150deg,var(--red-50),var(--ink-100)); color:var(--red-200); font-size:2.4rem; }
.sv-cat--blank .sv-cat__title{ color:var(--fg); }

/* Discipline blocks on the top-level Products page */
.sv-browse + .sv-browse{ margin-top:var(--s-9); }
.sv-browse .sv-toolbar{ margin-bottom:var(--s-5); }