/* ============================================================
   SAFEPOINT — site styles
   ------------------------------------------------------------
   EVERYTHING YOU'RE LIKELY TO CHANGE IS IN THE :root BLOCK BELOW.
   Edit a value, save, re-upload this one file. Nothing else moves.

   THE COLOURS (taken from the shop signboard)
     --accent        brand red  #be1e2d   buttons, links, highlights
     --ink           near-black #231f20   headings
     --bg            page background
     --surface       cards and panels
     --panel         the dark bands (header, hero, footer)

   There are three colour blocks:
     1. :root                         -> normal / light mode
     2. @media (prefers-color-scheme: dark)  -> visitors on dark mode
     3. :root[data-theme="dark"]      -> same, for an explicit toggle
   If you change a colour, change it in all three or the page will
   look right in one mode and wrong in the other.

   THE FONTS  (loaded from Google Fonts in index.html <head>)
     Oswald            headings          — swap in index.html AND in the
     IBM Plex Sans     body text           font-family lines below
     IBM Plex Mono     part numbers, labels
     IBM Plex Sans Arabic  Arabic lines

   SPACING
     .band { padding-block: 64px }  -> vertical space between sections
     .wrap { max-width: 1120px }    -> how wide the content runs
   ============================================================ */

:root{
  --bg:#f2efec;
  --surface:#ffffff;
  --surface-2:#f8f6f3;
  --ink:#191617;
  --text:#4a4443;
  --muted:#7d7674;
  --line:#e6e1dc;
  --hair:#efeae5;
  --line-strong:#d0c9c3;
  --accent:#be1e2d;
  --accent-deep:#9c1524;
  --accent-soft:#fbeced;
  --ok:#1b7a4c;
  --panel:#121011;
  --panel-2:#1a1718;
  --panel-3:#221e1f;
  --panel-line:#2e2829;
  --panel-text:#f4f1f0;
  --panel-muted:#968e8d;
  --panel-accent:#e8404c;
  --tile:#ffffff;
  --shadow-sm:0 1px 2px rgba(25,22,23,.04);
  --shadow-md:0 2px 4px rgba(25,22,23,.04), 0 14px 30px -18px rgba(25,22,23,.3);
  --shadow-lg:0 3px 8px rgba(25,22,23,.06), 0 30px 60px -30px rgba(25,22,23,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d0b0c;--surface:#161314;--surface-2:#1d1a1b;--ink:#f4f1f0;--text:#cdc6c5;
    --muted:#918a88;--line:#272223;--hair:#211d1e;--line-strong:#393233;
    --accent:#e8404c;--accent-deep:#be1e2d;--accent-soft:#2a1416;
    --ok:#4ec98a;--panel:#121011;--panel-2:#1a1718;--panel-3:#221e1f;--panel-line:#2e2829;
    --panel-text:#f4f1f0;--panel-muted:#968e8d;--panel-accent:#e8404c;--tile:#f2efec;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 2px 4px rgba(0,0,0,.5), 0 16px 34px -20px rgba(0,0,0,.9);
    --shadow-lg:0 3px 10px rgba(0,0,0,.55), 0 34px 68px -34px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --bg:#0d0b0c;--surface:#161314;--surface-2:#1d1a1b;--ink:#f4f1f0;--text:#cdc6c5;
  --muted:#918a88;--line:#272223;--hair:#211d1e;--line-strong:#393233;
  --accent:#e8404c;--accent-deep:#be1e2d;--accent-soft:#2a1416;
  --ok:#4ec98a;--panel:#121011;--panel-2:#1a1718;--panel-3:#221e1f;--panel-line:#2e2829;
  --panel-text:#f4f1f0;--panel-muted:#968e8d;--panel-accent:#e8404c;--tile:#f2efec;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 2px 4px rgba(0,0,0,.5), 0 16px 34px -20px rgba(0,0,0,.9);
  --shadow-lg:0 3px 10px rgba(0,0,0,.55), 0 34px 68px -34px rgba(0,0,0,1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:700;color:var(--ink);
  margin:0;line-height:1.08;letter-spacing:-.022em;text-wrap:balance;
}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.ar{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;direction:rtl;text-align:left}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:28px}
@media (max-width:640px){.wrap{padding-inline:18px}}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.rule{display:block;width:30px;height:2px;background:var(--accent);margin-bottom:18px}

/* ============ header ============ */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(18,16,17,.9);backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--panel-line);
}
.bar{display:flex;align-items:center;gap:28px;min-height:72px}
.mark{display:flex;align-items:center;gap:13px;text-decoration:none;margin-inline-end:auto}
.mark svg{width:38px;height:auto;flex:none;display:block}
.mark b{font-family:Archivo,sans-serif;font-weight:700;font-size:23px;letter-spacing:-.024em;color:var(--panel-text);display:block;line-height:1.1}
.mark .sub{display:block;font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--panel-muted);margin-top:1px}
nav{display:flex;gap:28px}
nav a{color:var(--panel-muted);text-decoration:none;font-size:13.5px;font-weight:500;position:relative;padding-block:4px;transition:color .18s ease}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--panel-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
nav a:hover{color:var(--panel-text)}
nav a:hover::after{transform:scaleX(1)}
.call{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--accent);color:#fff;
  font-family:Archivo,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  padding-block:11px;padding-inline:18px;white-space:nowrap;
  box-shadow:0 8px 22px -12px rgba(190,30,45,.95);transition:background .18s ease, transform .18s ease;
}
.call:hover{background:var(--accent-deep);transform:translateY(-1px)}
@media (max-width:1000px){nav{display:none}}
@media (max-width:420px){.call{font-size:11.5px;padding-inline:13px;letter-spacing:.05em}}

/* ============ hero ============ */
.hero{background:var(--panel);color:var(--panel-text);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 12% 0%, rgba(232,64,76,.13), transparent 62%);
}
.hero .wrap{position:relative;z-index:1;padding-block:78px 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero .rule{background:var(--panel-accent)}
.hero .eyebrow{color:var(--panel-accent)}
.hero h1{
  color:var(--panel-text);font-size:clamp(42px,6vw,76px);font-weight:800;
  letter-spacing:-.04em;line-height:.97;margin-block:16px 16px;
}
.hero h1 em{font-style:normal;color:var(--panel-accent)}
.hero-ar{font-size:clamp(17px,2vw,21px);color:var(--panel-muted);margin-bottom:22px}
.hero .lede{font-size:16.5px;color:var(--panel-muted);max-width:46ch;line-height:1.75}

.herosearch{margin-top:30px;max-width:460px}
.herosearch form{display:flex;gap:0;border:1px solid var(--panel-line);background:var(--panel-2);box-shadow:var(--shadow-lg)}
.herosearch input{
  flex:1;min-width:0;font-family:inherit;font-size:15.5px;color:var(--panel-text);
  background:transparent;border:0;padding-block:16px;padding-inline:18px;
}
.herosearch input::placeholder{color:var(--panel-muted)}
.herosearch input:focus{outline:2px solid var(--panel-accent);outline-offset:-2px}
.herosearch button{
  border:0;background:var(--accent);color:#fff;cursor:pointer;
  font-family:Archivo,sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding-inline:22px;transition:background .18s ease;
}
.herosearch button:hover{background:var(--accent-deep)}
.herohint{margin-top:11px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--panel-muted);letter-spacing:.02em}
.herohint b{color:var(--panel-text);font-weight:500}

/* product mosaic */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mtile{
  background:var(--tile);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  padding:20px;border:1px solid rgba(255,255,255,.06);
}
.mtile img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero .wrap{padding-block:54px 0}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mtile:nth-child(n+5){display:none}
}
@media (max-width:520px){.mosaic{grid-template-columns:repeat(3,1fr)}.mtile:nth-child(n+4){display:none}}

/* utility rail under hero */
.rail{margin-top:56px;border-top:1px solid var(--panel-line);display:grid;grid-template-columns:repeat(4,1fr)}
.rail > div{padding-block:22px;padding-inline:26px;border-inline-start:1px solid var(--panel-line)}
.rail > div:first-child{border-inline-start:0;padding-inline-start:0}
.rail dt{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--panel-muted);margin-bottom:6px}
.rail dd{margin:0;font-size:14.5px;color:var(--panel-text);line-height:1.45}
.rail dd a{color:var(--panel-accent);text-decoration:none;font-weight:600}
.rail dd small{display:block;font-size:12px;color:var(--panel-muted);margin-top:2px}
.rail .live{display:inline-flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(27,122,76,.2)}
.dot.off{background:var(--panel-muted);box-shadow:none}
@media (max-width:860px){
  .rail{grid-template-columns:1fr 1fr;margin-top:38px}
  .rail > div{padding-inline:18px}
  .rail > div:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .rail > div:nth-child(n+3){border-top:1px solid var(--panel-line)}
}

/* ============ sections ============ */
.band{padding-block:104px}
@media (max-width:860px){.band{padding-block:64px}}
.band.tight{padding-block:80px}
.sec-head{max-width:58ch;margin-bottom:46px}
.sec-head h2{font-size:clamp(32px,4vw,50px);margin-block:12px 16px}
.sec-head p{color:var(--muted);font-size:16.5px;line-height:1.72}
.sec-head.split{max-width:none;display:grid;grid-template-columns:1fr minmax(280px,34ch);gap:48px;align-items:end}
.sec-head.split h2{margin-bottom:0}
.sec-head.split p{padding-bottom:6px}
@media (max-width:860px){.sec-head.split{grid-template-columns:1fr;gap:18px}.sec-head.split p{padding-bottom:0}}

/* ============ catalogue ============ */
.cats{
  display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line);background:var(--line);gap:1px;margin-bottom:28px;
}
@media (max-width:1040px){.cats{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.cats{grid-template-columns:repeat(2,1fr)}}
.ctile{
  background:var(--surface);border:0;cursor:pointer;text-align:start;
  padding-block:20px;padding-inline:18px;display:flex;flex-direction:column;gap:9px;
  transition:background .18s ease, color .18s ease;font-family:inherit;
}
.ctile:hover{background:var(--surface-2)}
.ctile svg{width:24px;height:24px;color:var(--accent);transition:color .18s ease}
.ctile b{font-family:Archivo,sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-.012em;line-height:1.25}
.ctile span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:auto}
.ctile[aria-pressed="true"]{background:var(--accent)}
.ctile[aria-pressed="true"] svg{color:#fff}
.ctile[aria-pressed="true"] b,.ctile[aria-pressed="true"] span{color:#fff}

.toolbar{
  position:sticky;top:calc(72px + env(safe-area-inset-top,0px));z-index:30;
  display:grid;grid-template-columns:1fr 230px auto;gap:12px;align-items:center;
  background:var(--bg);padding-block:14px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
@media (max-width:760px){.toolbar{grid-template-columns:1fr;position:static}}
.toolbar input,.toolbar select{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);padding-block:13px;padding-inline:14px;width:100%;border-radius:0;
  transition:border-color .16s ease;
}
.toolbar input:hover,.toolbar select:hover{border-color:var(--muted)}
.toolbar input:focus,.toolbar select:focus{outline:2px solid var(--accent);outline-offset:1px}
.cat-count{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-align:end}
@media (max-width:760px){.cat-count{text-align:start}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:20px;margin-top:26px}
@media (max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}}
.pcard{
  background:var(--surface);display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hair);box-shadow:var(--shadow-sm);
  transition:box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--line-strong)}
.pcard-img{
  aspect-ratio:1;background:var(--tile);display:flex;align-items:center;justify-content:center;
  padding:18px;border-bottom:1px solid var(--hair);
}
.pcard-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.pcard-body{padding-block:15px;padding-inline:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard .pb{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.pcard .pn{
  font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;font-weight:600;line-height:1.38;
  letter-spacing:0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard .pc{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);word-break:break-word;line-height:1.45;margin-top:auto;padding-top:8px}
.pcard mark{background:var(--accent-soft);color:var(--accent);padding-inline:1px}
.pask{
  font-family:Archivo,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:0;border-top:1px solid var(--hair);
  padding-block:12px;cursor:pointer;width:100%;transition:background .16s ease, color .16s ease;
}
.pask:hover{background:var(--accent);color:#fff}
.cat-empty{grid-column:1/-1;padding-block:70px;text-align:center;color:var(--muted);font-size:16px}
.cat-empty a{color:var(--accent);font-weight:600}
.cat-more{display:flex;justify-content:center;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font-family:Archivo,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding-block:15px;padding-inline:28px;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px -14px rgba(190,30,45,.95)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost{border-color:rgba(255,255,255,.2);color:var(--panel-text);background:transparent}
.btn-ghost:hover{border-color:var(--panel-accent);color:var(--panel-accent)}

/* ============ banner ============ */
.banner{background:#0b0a0a}
.banner img{display:block;width:100%;height:auto}
/* the banner sits at the very top of the home page and runs into the hero */
.banner-top{border-bottom:3px solid var(--accent)}

/* ============ fitment ============ */
.fit{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:stretch}
@media (max-width:900px){.fit{grid-template-columns:1fr}}
.fit-main{
  background:var(--panel);color:var(--panel-text);
  padding-block:40px;padding-inline:40px;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.fit-main::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 88% 6%, rgba(232,64,76,.14), transparent 62%);pointer-events:none}
.fit-main > *{position:relative}
.fit-main .eyebrow{color:var(--panel-accent)}
.fit-main h3{color:var(--panel-text);font-size:clamp(26px,3vw,38px);margin-block:12px 8px}
.fit-main .gens{display:flex;flex-wrap:wrap;gap:8px;margin-block:22px 20px}
.fit-main .gens span{
  font-family:Archivo,sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;
  border:1px solid var(--panel-line);color:var(--panel-text);padding-block:8px;padding-inline:14px;background:var(--panel-2);
}
.fit-main p{color:var(--panel-muted);font-size:14.5px;line-height:1.7;max-width:56ch}
.fit-main .count{margin-top:auto;padding-top:26px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-accent)}
@media (max-width:640px){.fit-main{padding-block:28px;padding-inline:24px}}
.fit-side{display:grid;gap:20px;align-content:stretch}
.fcard{background:var(--surface);border:1px solid var(--line);padding-block:24px;padding-inline:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}
.fcard h4{font-size:19px}
.fcard .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:11px;border:1px solid var(--line-strong);color:var(--text);padding-block:5px;padding-inline:9px;background:var(--surface-2)}
.fcard p{font-size:13.5px;color:var(--muted);line-height:1.6}
.fcard.dashed{background:transparent;border-style:dashed;box-shadow:none}
.fcard.dashed .chip{background:transparent;color:var(--muted)}

/* ============ steps ============ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;margin-top:8px}
.flow::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:var(--line)}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr;gap:34px 28px}}
@media (max-width:520px){.flow{grid-template-columns:1fr}.flow::before{display:none}}
.fstep{position:relative;padding-top:34px}
.fstep::before{content:"";position:absolute;top:2px;inset-inline-start:0;width:11px;height:11px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--bg)}
.fstep .n{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px}
.fstep h3{font-size:18px;margin-bottom:9px}
.fstep p{font-size:14px;color:var(--muted);line-height:1.65}

/* ============ contact band ============ */
.contact{background:var(--panel);color:var(--panel-text)}
.contact .sec-head h2{color:var(--panel-text)}
.contact .sec-head p{color:var(--panel-muted)}
.contact .eyebrow{color:var(--panel-accent)}
.contact-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr;gap:44px}}
form{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
label{display:grid;gap:8px}
label > span{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--panel-muted)}
input,select,textarea{
  font-family:inherit;font-size:15px;color:var(--panel-text);background:var(--panel-2);
  border:0;border-bottom:1px solid var(--panel-line);
  padding-block:11px;padding-inline:13px;width:100%;max-width:100%;border-radius:0;
  transition:border-color .16s ease, background .16s ease;
}
input:hover,select:hover,textarea:hover{background:var(--panel-3)}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--panel-accent);background:var(--panel-3)}
textarea{resize:vertical;min-height:92px;line-height:1.55}
select option{background:#1a1718;color:#f4f1f0}
.form-note{font-size:12.5px;color:var(--panel-muted)}
.form-note a{color:var(--panel-accent);font-weight:600}
.fallback{display:grid;gap:9px}
.fallback textarea{font-family:"IBM Plex Mono",monospace;font-size:12.5px;min-height:150px}

.branches{display:grid;gap:1px;background:var(--panel-line);border:1px solid var(--panel-line)}
.branch{background:var(--panel-2);padding-block:26px;padding-inline:26px;display:flex;flex-direction:column;gap:11px}
.branch-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.branch-head h3{color:var(--panel-text);font-size:24px}
.tag{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--panel-muted);border:1px solid var(--panel-line);padding-block:3px;padding-inline:7px}
.branch .addr{font-size:14.5px;color:var(--panel-text);line-height:1.55}
.branch .addr-ar{color:var(--panel-muted);font-size:13.5px}
.branch .links{font-size:14px}
.branch .links a{color:var(--panel-accent);text-decoration:none;font-weight:600}
.branch .links a:hover{text-decoration:underline}
.plus{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--panel-muted);border:1px solid var(--panel-line);padding-block:2px;padding-inline:6px;white-space:nowrap}
.hours{margin-top:20px;border:1px solid var(--panel-line);padding-block:22px;padding-inline:26px;background:var(--panel-2)}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
th,td{text-align:start;padding-block:8px;border-bottom:1px solid var(--panel-line);color:var(--panel-muted);font-weight:400}
tr:last-child th,tr:last-child td{border-bottom:0}
td{font-family:"IBM Plex Mono",monospace;font-size:12px;font-variant-numeric:tabular-nums;text-align:end}
tr.today th,tr.today td{color:var(--panel-accent);font-weight:600}
.breakrow th,.breakrow td{color:var(--panel-muted);opacity:.75}
.hours .eyebrow{color:var(--panel-muted)}
.note{margin-top:18px;font-size:13px;color:var(--panel-muted);line-height:1.65;border-inline-start:2px solid var(--panel-accent);padding-inline-start:14px}

/* ============ footer ============ */
footer{background:var(--panel);color:var(--panel-muted);padding-block:0 46px;font-size:13px}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--panel-line);padding-top:40px}
.foot a{color:var(--panel-text);text-decoration:none}
.foot a:hover{color:var(--panel-accent)}
.foot strong{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.022em;color:var(--panel-text);font-size:20px;display:block;margin-bottom:5px}
.disclaim{margin-top:28px;padding-top:22px;border-top:1px solid var(--panel-line);font-size:11.5px;max-width:84ch;line-height:1.75}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ============================================================
   BASE — browser reset. Leave this alone unless you know why.
   ============================================================ */
:root{
  color-scheme: light dark;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img{max-width:100%}
[hidden]{display:none !important}


/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */
nav a.here{color:var(--panel-text)}
nav a.here::after{transform:scaleX(1)}
.navtoggle{
  display:none;background:transparent;border:1px solid var(--panel-line);color:var(--panel-text);
  width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;padding:0;
}
.navtoggle svg{width:20px;height:20px}
@media (max-width:1000px){
  .navtoggle{display:inline-flex}
  nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--panel);border-bottom:1px solid var(--panel-line);
    flex-direction:column;gap:0;padding-block:8px;
  }
  nav.open{display:flex}
  nav a{padding-block:14px;padding-inline:28px;font-size:15px}
  nav a::after{display:none}
  nav a.here{color:var(--panel-accent)}
  header{position:sticky}
  .bar{position:relative}
}
@media (max-width:640px){.call{display:none}}

/* page hero on the inner pages */
.pagehero{
  background:var(--panel);color:var(--panel-text);position:relative;overflow:hidden;
  padding-block:64px 58px;
}
.pagehero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 10% 0%, rgba(232,64,76,.12), transparent 62%)}
.pagehero .wrap{position:relative}
.pagehero .rule{background:var(--panel-accent)}
.pagehero .eyebrow{color:var(--panel-accent)}
.pagehero h1{color:var(--panel-text);font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.035em;margin-block:14px 16px}
.pagehero .lede{color:var(--panel-muted);font-size:16.5px;max-width:58ch;line-height:1.72}
@media (max-width:640px){.pagehero{padding-block:44px 40px}}

/* category tiles also work as links */
a.ctile{text-decoration:none}
a.ctile:hover b{color:var(--accent)}

.clearbtn{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding-block:12px;padding-inline:16px;cursor:pointer;transition:border-color .16s ease,color .16s ease;
}
.clearbtn:hover{border-color:var(--accent);color:var(--accent)}
.toolbar{grid-template-columns:1fr 210px auto auto}
@media (max-width:760px){.toolbar{grid-template-columns:1fr}}

/* spec grid on the fitment page */
.specgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.specgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.specgrid{grid-template-columns:1fr}}
.specitem{background:var(--surface);padding-block:26px;padding-inline:24px}
.specitem b{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;color:var(--ink);display:block;margin-bottom:9px;letter-spacing:-.018em}
.specitem p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* closing call to action */
.cta{background:var(--panel);color:var(--panel-text);padding-block:56px}
.cta-inner{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.cta h2{color:var(--panel-text);font-size:clamp(26px,3vw,36px);margin-bottom:8px}
.cta p{color:var(--panel-muted);font-size:15px;max-width:56ch;line-height:1.7}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* contact page */
.statusbox{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
  border:1px solid var(--panel-line);background:var(--panel-2);
  padding-block:16px;padding-inline:22px;margin-bottom:20px;
}
.statusbox #statusText{font-family:Archivo,sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--panel-text)}
.statusbox #statusNote{font-size:12.5px;color:var(--panel-muted)}
.contact .branches .branch{background:var(--panel-2)}

/* footer nav */
.footnav{display:flex;flex-wrap:wrap;gap:20px}
.footnav a{font-size:13.5px;color:var(--panel-muted)}
.footnav a:hover{color:var(--panel-accent)}

/* product photographs are full resolution now — let them fill the frame */
.pcard-img img{max-width:100%;max-height:100%}
.mtile img{max-width:100%;max-height:100%}