@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700;1,900&display=swap');

/* ============================================================
   STONERIDGE — design system
   white / near-black / construction yellow-green
   ============================================================ */
:root{
  --bg:        #FFFFFF;
  --bg-2:      #F3F3F0;
  --bg-3:      #E8E8E3;
  --ink:       #101010;
  --ink-70:    #4E4E48;
  --ink-45:    #8A8A82;
  --line:      #E2E2DC;
  --line-2:    #EDEDE8;
  --hi:        #E4FF3D;
  --hi-dark:   #C8E600;
  --hi-ink:    #101010;
  --dark:      #0E0E0C;

  /* aliases kept for inline styles on legacy markup */
  --bg-warm:   #F3F3F0;
  --bg-deep:   #0E0E0C;
  --ink-40:    #8A8A82;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --pad: clamp(16px, 3.4vw, 48px);
  --max: 1480px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:0.98;
  margin:0;
}
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.eyebrow.dark{ color:rgba(255,255,255,.5); }
.serif-i{ font-style:italic; font-weight:400; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 26px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1.5px solid var(--ink);
  background:var(--ink);
  color:#fff;
  border-radius:0;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:#000; border-color:#000; }

.btn-hi{ background:var(--hi); color:var(--hi-ink); border-color:var(--hi); }
.btn-hi:hover{ background:var(--hi-dark); border-color:var(--hi-dark); color:var(--hi-ink); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }

.btn-light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-light:hover{ background:var(--hi); color:var(--ink); border-color:var(--hi); }

.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-outline-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn-block{ width:100%; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }

.tag-link{
  display:inline-block;
  background:var(--hi);
  color:var(--hi-ink);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 13px;
  transition:background .25s var(--ease);
}
.tag-link:hover{ background:var(--hi-dark); }

.link-u{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:1.5px solid currentColor;
  padding-bottom:3px;
  transition:opacity .25s var(--ease);
}
.link-u:hover{ opacity:.5; }

/* ============================================================
   ANNOUNCEMENT + HEADER
   ============================================================ */
.announce{
  background:var(--dark);
  color:rgba(255,255,255,.72);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-align:center;
  padding:8px 14px;
}
.announce b{ color:var(--hi); font-weight:700; }

.site-head{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  height:66px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
}
.brand{
  font-size:15px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.05;
}
.brand span{
  display:block;
  font-size:7px;
  letter-spacing:.34em;
  color:var(--ink-45);
  font-weight:600;
  margin-top:3px;
}

.nav{ display:flex; gap:26px; justify-content:center; }
.nav a{
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-70);
  transition:color .2s var(--ease);
  position:relative;
  padding:5px 0;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--hi); transition:width .25s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }
.nav a.on{ color:var(--ink); }
.nav a.on::after{ width:100%; }

.head-tools{ display:flex; align-items:center; gap:18px; justify-content:flex-end; }
.tool{
  font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-70); transition:color .2s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.tool:hover{ color:var(--ink); }
.cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--ink); color:#fff;
  font-size:9px; font-weight:700; letter-spacing:0;
  border-radius:8px;
}
.cart-count[data-empty="true"]{ background:var(--line); color:var(--ink-45); }

.burger{ display:none; flex-direction:column; gap:4px; padding:8px; }
.burger i{ display:block; width:18px; height:1.6px; background:var(--ink); }

/* ============================================================
   HERO — angled split
   ============================================================ */
.hero{
  position:relative;
  min-height:min(74vh, 680px);
  display:flex;
  align-items:center;
  background:#fff;
  overflow:hidden;
}
.hero-media{
  position:absolute;
  top:0; right:0; bottom:0;
  width:62%;
  clip-path:polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  background:var(--bg-2);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }

.hero-in{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--pad);
}
.hero-copy{ max-width:min(600px, 45vw); }

.hero-kicker{
  display:inline-block;
  background:var(--hi);
  color:var(--ink);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:6px 11px;
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.5rem, 5.4vw, 4.8rem);
  font-weight:900;
  letter-spacing:-0.045em;
  line-height:0.92;
  margin-bottom:22px;
  text-transform:uppercase;
}
.hero h1 em{
  display:block;
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-0.03em;
}
.hero-sub{
  font-size:clamp(14px,1.4vw,16px);
  color:var(--ink-70);
  max-width:40ch;
  line-height:1.55;
  margin-bottom:30px;
}
.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

.hero-meta{
  margin-top:36px;
  display:flex; gap:26px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:16px;
  max-width:440px;
}
.hero-meta div{ display:flex; flex-direction:column; gap:2px; }
.hero-meta b{ font-size:12.5px; font-weight:800; letter-spacing:-0.01em; }
.hero-meta span{ font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45); }

/* ============================================================
   VALUE STRIP
   ============================================================ */
.value-strip{ background:var(--dark); color:#fff; }
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
}
.value-item{
  padding:22px 22px 22px 0;
  border-right:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:4px;
}
.value-item:last-child{ border-right:none; }
.value-item:not(:first-child){ padding-left:24px; }
.value-item strong{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hi);
}
.value-item span{ font-size:12px; color:rgba(255,255,255,.55); line-height:1.5; }

.value-grid.light{ border-top:1px solid var(--line); }
.value-grid.light .value-item{ border-right-color:var(--line-2); }
.value-grid.light .value-item strong{ color:var(--ink); }
.value-grid.light .value-item span{ color:var(--ink-45); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(48px,6.5vw,88px) 0; }
.section-tight{ padding:clamp(36px,4.5vw,60px) 0; }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:28px; margin-bottom:30px; flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  letter-spacing:-0.035em;
  max-width:26ch;
}
.section-head .eyebrow{ margin-bottom:12px; }
.section-head p{ font-size:13.5px; color:var(--ink-45); max-width:40ch; margin:10px 0 0; }

/* ============================================================
   CATEGORY BLOCKS
   ============================================================ */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--line);
}
.cat-card{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg-2);
  aspect-ratio:4/3.4;
}
.cat-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.cat-card:hover img{ transform:scale(1.04); }
.cat-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,.03) 58%);
  transition:opacity .35s var(--ease);
}
.cat-card:hover::after{ opacity:.85; }
.cat-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 20px; color:#fff;
  display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
}
.cat-body h3{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.cat-body span{ font-size:11px; color:rgba(255,255,255,.7); line-height:1.35; display:block; }
.cat-tag{
  display:inline-block;
  background:var(--hi); color:var(--ink);
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; margin-bottom:9px;
}
.cat-arrow{
  font-size:14px; line-height:1; opacity:0;
  transform:translateX(-5px); transition:all .35s var(--ease);
}
.cat-card:hover .cat-arrow{ opacity:1; transform:none; }

/* ============================================================
   PRODUCT CARDS — dense, vertical
   ============================================================ */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.6vw,24px) clamp(10px,1.2vw,16px);
}
.prod-grid.four{ grid-template-columns:repeat(4,1fr); }
.prod-grid.three{ grid-template-columns:repeat(3,1fr); }

.card{ position:relative; display:flex; flex-direction:column; }
.card-media{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--bg-2);
  aspect-ratio:4/5;
  margin-bottom:11px;
}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.card:hover .card-media img{ transform:scale(1.035); }

.badge{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--ink); color:#fff;
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 8px;
}
.badge.hi{ background:var(--hi); color:var(--ink); }

.card-quick{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:var(--hi);
  color:var(--ink);
  text-align:center;
  padding:10px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(100%);
  transition:transform .3s var(--ease);
}
.card:hover .card-quick{ transform:none; }

.card-cat{
  font-size:9.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:4px;
}
.card-title{
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-0.005em;
  margin:0 0 3px;
  min-height:2.7em;
}
.card-sub{ font-size:11px; color:var(--ink-45); margin-bottom:6px; line-height:1.4; }
.card-price{ font-size:12.5px; font-weight:800; letter-spacing:-0.01em; }
.card-price small{ font-size:10.5px; color:var(--ink-45); font-weight:500; }

/* ============================================================
   SPLIT
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(24px,4.5vw,72px);
}
.split-media img{ width:100%; aspect-ratio:4/4.2; object-fit:cover; }
.split-copy h2{ font-size:clamp(1.5rem,2.6vw,2.15rem); margin-bottom:16px; max-width:22ch; }
.split-copy p{ color:var(--ink-70); font-size:13.5px; max-width:46ch; }
.split-copy .btn{ margin-top:10px; }

/* ============================================================
   TRADE BAND
   ============================================================ */
.trade-band{ background:var(--dark); color:#fff; padding:clamp(46px,6vw,84px) 0; }
.trade-band .split-copy h2{ color:#fff; }
.trade-band p{ color:rgba(255,255,255,.6); }
.trade-figs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px; margin-top:30px;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:22px;
}
.trade-figs div strong{
  display:block; font-size:1.6rem; font-weight:900; letter-spacing:-0.03em;
  color:var(--hi); margin-bottom:2px;
}
.trade-figs div span{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.45); }

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.5vw,32px); }
.rev{ border-top:2px solid var(--ink); padding-top:16px; }
.rev blockquote{
  margin:0 0 14px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink);
  font-weight:500;
}
.rev cite{
  font-style:normal; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45); display:block;
}
.rev cite b{ display:block; color:var(--ink); font-weight:700; margin-bottom:2px; }

/* ============================================================
   SAMPLE CTA
   ============================================================ */
.sample-band{ background:var(--hi); }
.sample-in{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(18px,3.4vw,40px);
  padding:clamp(24px,3.4vw,34px) 0;
}
.sample-in img{ width:82px; aspect-ratio:1; object-fit:cover; }
.sample-in h3{ font-size:1.15rem; margin-bottom:4px; letter-spacing:-0.03em; }
.sample-in p{ font-size:12.5px; color:rgba(0,0,0,.7); margin:0; max-width:52ch; }
.sample-band .btn{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sample-band .btn:hover{ background:#000; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{
  background:var(--dark);
  color:rgba(255,255,255,.58);
  padding:clamp(44px,5.5vw,68px) 0 24px;
  font-size:12.5px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(22px,3.4vw,48px);
  padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand{
  font-size:14px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  margin-bottom:12px;
}
.foot-brand span{ display:block; font-size:7px; letter-spacing:.34em; color:rgba(255,255,255,.4); margin-top:3px; font-weight:600; }
.foot-grid p{ font-size:11.5px; line-height:1.7; color:rgba(255,255,255,.5); }
.foot-col h4{
  font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.38); margin:0 0 12px;
}
.foot-col a{ display:block; font-size:11.5px; color:rgba(255,255,255,.68); padding:3.5px 0; transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--hi); }
.foot-bot{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding-top:20px; flex-wrap:wrap;
  font-size:10.5px; color:rgba(255,255,255,.32);
}
.pay-row{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.pay-chip{
  border:1px solid rgba(255,255,255,.18);
  padding:3px 6px;
  font-size:8.5px; letter-spacing:.06em; font-weight:700;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.page-head{
  padding:clamp(28px,4vw,52px) 0 clamp(18px,2.4vw,26px);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.page-head .wm{
  position:absolute; right:var(--pad); top:50%;
  transform:translateY(-50%);
  font-size:clamp(4rem,11vw,9rem);
  font-weight:900; letter-spacing:-0.05em; line-height:.8;
  color:var(--bg-2);
  text-transform:uppercase;
  pointer-events:none; user-select:none;
  z-index:0;
}
.page-head > *{ position:relative; z-index:1; }
.crumb{
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:12px;
}
.crumb a:hover{ color:var(--ink); }
.crumb span{ margin:0 6px; opacity:.5; }
.page-head h1{
  font-size:clamp(1.7rem,3.6vw,2.8rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.04em;
  margin-bottom:10px;
}
.page-head p{ font-size:13.5px; color:var(--ink-70); max-width:58ch; }

/* ============================================================
   SHOP: sidebar + grid
   ============================================================ */
.shop-layout{
  display:grid;
  grid-template-columns:186px 1fr;
  gap:clamp(20px,3vw,44px);
  padding:24px 0 clamp(48px,6vw,80px);
  align-items:start;
}
.shop-side{
  position:sticky; top:82px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.side-group{ margin-bottom:26px; }
.side-group h4{
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45); margin:0 0 9px;
}
.side-group a{
  display:block;
  font-size:12px;
  color:var(--ink-70);
  padding:4px 0;
  transition:color .18s var(--ease);
  line-height:1.4;
}
.side-group a:hover{ color:var(--ink); }
.side-group a.on{ color:var(--ink); font-weight:700; }
.side-group a.sub{ padding-left:10px; font-size:11.5px; color:var(--ink-45); }
.side-group a.sub:hover{ color:var(--ink); }

.toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:0 0 16px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:20px;
}
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  padding:7px 12px;
  border:1px solid var(--line);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-70);
  transition:all .2s var(--ease);
  background:transparent;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.toolbar-right{ display:flex; align-items:center; gap:14px; font-size:11px; color:var(--ink-45); }
.sortsel{
  border:1px solid var(--line);
  background:transparent;
  padding:7px 9px;
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
}

/* ============================================================
   PDP
   ============================================================ */
.pdp{
  display:grid;
  grid-template-columns:76px 1.15fr .85fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(22px,3vw,40px) 0 clamp(46px,6vw,80px);
  align-items:start;
}
.pdp-thumbs{ display:flex; flex-direction:column; gap:7px; }
.pdp-thumbs div{
  width:100%; aspect-ratio:1; overflow:hidden; background:var(--bg-2);
  border:1.5px solid transparent; cursor:pointer;
}
.pdp-thumbs div.active{ border-color:var(--ink); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; }

.pdp-media{ background:var(--bg-2); overflow:hidden; }
.pdp-media img{ width:100%; aspect-ratio:4/4.6; object-fit:cover; }

.pdp-info{ position:sticky; top:86px; }
.pdp-info h1{
  font-size:clamp(1.4rem,2.3vw,1.95rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin:8px 0 6px;
}
.pdp-sub{ font-size:12.5px; color:var(--ink-45); margin-bottom:16px; }
.pdp-price{
  font-size:1.5rem; font-weight:900; letter-spacing:-0.03em;
  margin-bottom:4px;
}
.pdp-price small{ font-size:11.5px; color:var(--ink-45); font-weight:500; letter-spacing:0; }
.pdp-blurb{ font-size:13px; color:var(--ink-70); line-height:1.65; margin:16px 0 18px; max-width:44ch; }

.stock-line{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--ink-70); margin-bottom:18px;
  font-weight:500;
}
.dot{ width:5px; height:5px; border-radius:50%; background:var(--hi-dark); flex:none; box-shadow:0 0 0 3px rgba(200,230,0,.18); }

.qty-row{ display:flex; gap:8px; align-items:stretch; margin-bottom:12px; }
.qty{
  display:flex; align-items:center; border:1.5px solid var(--line);
  height:50px;
}
.qty button{ width:38px; height:100%; font-size:15px; color:var(--ink-70); transition:color .2s; }
.qty button:hover{ color:var(--ink); }
.qty input{
  width:56px; height:100%; border:none; background:transparent; text-align:center;
  font-size:13px; font-weight:700;
  border-left:1px solid var(--line-2); border-right:1px solid var(--line-2);
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-row .btn{ height:50px; flex:1; }

.calc{
  background:var(--bg-2);
  border:none;
  padding:16px 18px;
  margin:18px 0;
}
.calc h4{
  font-size:9.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-45); margin:0 0 11px;
}
.calc-row{ display:flex; gap:8px; align-items:center; margin-bottom:9px; }
.calc-row input{
  width:100%; padding:8px 10px; border:1px solid var(--line);
  background:#fff; font-size:12.5px;
}
.calc-row label{ font-size:11px; color:var(--ink-45); white-space:nowrap; }
.calc-out{ font-size:11.5px; color:var(--ink-70); }
.calc-out b{ color:var(--ink); font-weight:800; }

.acc{ border-top:1px solid var(--line); margin-top:22px; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; text-align:left;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.acc-btn i{ font-style:normal; font-size:14px; color:var(--ink-45); transition:transform .25s var(--ease); }
.acc-item.open .acc-btn i{ transform:rotate(45deg); }
.acc-body{ display:none; padding:0 0 18px; font-size:12.5px; color:var(--ink-70); line-height:1.7; }
.acc-item.open .acc-body{ display:block; }
.spec-table{ width:100%; border-collapse:collapse; font-size:12px; }
.spec-table tr{ border-bottom:1px solid var(--line-2); }
.spec-table tr:last-child{ border-bottom:none; }
.spec-table td{ padding:8px 0; vertical-align:top; }
.spec-table td:first-child{ color:var(--ink-45); width:42%; }
.spec-table td:last-child{ color:var(--ink); font-weight:500; }

/* ============================================================
   CART / CHECKOUT
   ============================================================ */
.cart-wrap{
  display:grid; grid-template-columns:1.6fr .9fr;
  gap:clamp(24px,4vw,56px);
  padding:clamp(22px,3vw,40px) 0 clamp(48px,6vw,80px);
  align-items:start;
}
.cart-line{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line-2);
  align-items:start;
}
.cart-line:first-child{ padding-top:0; }
.cart-line img{ width:88px; aspect-ratio:4/5; object-fit:cover; background:var(--bg-2); }
.cart-line h3{ font-size:12.5px; font-weight:700; margin:0 0 3px; line-height:1.35; }
.cart-line .meta{ font-size:11.5px; color:var(--ink-45); margin-bottom:9px; }
.cart-line .qty{ height:36px; }
.cart-line .qty button{ width:30px; font-size:13px; }
.cart-line .qty input{ width:44px; font-size:12px; }
.cart-line .rm{
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45);
  border-bottom:1px solid var(--line); margin-left:12px;
}
.cart-line .rm:hover{ color:var(--ink); border-color:var(--ink); }
.cart-line .amt{ font-size:13px; font-weight:800; white-space:nowrap; }

.summary{
  background:var(--bg-2);
  border:none;
  padding:22px;
}
.summary h2{
  font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-45); margin:0 0 16px;
}
.sum-row{
  display:flex; justify-content:space-between; gap:14px;
  font-size:12.5px; padding:7px 0; color:var(--ink-70);
}
.sum-row.total{
  border-top:1.5px solid var(--ink); margin-top:8px; padding-top:14px;
  font-size:14px; color:var(--ink); font-weight:900; letter-spacing:-0.02em;
}
.sum-note{ font-size:11px; color:var(--ink-45); line-height:1.6; margin-top:12px; }

.empty-cart{ padding:56px 0; text-align:center; }
.empty-cart h2{ font-size:1.4rem; margin-bottom:10px; }
.empty-cart p{ color:var(--ink-45); margin-bottom:20px; font-size:13px; }

.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%; padding:12px 13px;
  border:1px solid var(--line); background:#fff;
  font-size:13.5px; transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink);
}
.field textarea{ min-height:110px; resize:vertical; }
.field-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-step{ margin-bottom:30px; }
.form-step h2{
  font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); margin:0 0 16px; padding-bottom:10px;
  border-bottom:2px solid var(--ink);
}
.check{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12px; color:var(--ink-70); line-height:1.55; margin-bottom:10px;
}
.check input{ margin-top:3px; flex:none; accent-color:var(--ink); }

/* ============================================================
   TRADE
   ============================================================ */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin:28px 0; }
.tier{
  border:none;
  padding:26px 22px;
  background:#fff;
  display:flex; flex-direction:column;
}
.tier.hi{ background:var(--dark); color:#fff; }
.tier.hi h3{ color:#fff; }
.tier.hi .spend{ color:rgba(255,255,255,.45); }
.tier.hi li{ border-bottom-color:rgba(255,255,255,.14); color:rgba(255,255,255,.85); }
.tier.hi li span{ color:rgba(255,255,255,.45); }
.tier.hi .disc{ color:var(--hi); }
.tier h3{ font-size:1.05rem; margin-bottom:3px; text-transform:uppercase; letter-spacing:.02em; font-weight:900; }
.tier .spend{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); margin-bottom:16px; }
.tier .disc{ font-size:1.5rem; font-weight:900; letter-spacing:-0.03em; margin-bottom:16px; }
.tier ul{ list-style:none; padding:0; margin:0 0 20px; font-size:12px; color:var(--ink-70); }
.tier li{ padding:6px 0; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; gap:10px; }
.tier li:last-child{ border-bottom:none; }
.tier li span{ color:var(--ink-45); }
.tier .btn{ margin-top:auto; }
.tier.hi .btn{ background:var(--hi); color:var(--ink); border-color:var(--hi); }
.tier.hi .btn:hover{ background:#fff; border-color:#fff; color:var(--ink); }

/* ============================================================
   PROSE
   ============================================================ */
.prose{
  max-width:70ch;
  padding:clamp(28px,4vw,48px) 0 clamp(48px,6vw,80px);
}
.prose h2{ font-size:1.25rem; margin:34px 0 12px; font-weight:800; letter-spacing:-0.025em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin:24px 0 9px; }
.prose p{ font-size:13.5px; color:var(--ink-70); line-height:1.75; }
.prose ul{ font-size:13.5px; color:var(--ink-70); line-height:1.75; padding-left:18px; }
.prose li{ margin-bottom:6px; }
.prose .updated{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); margin-bottom:24px; }
.prose table{ width:100%; border-collapse:collapse; font-size:12.5px; margin:16px 0; color:var(--ink-70); }
.prose th{
  text-align:left; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-45); padding:9px 12px 9px 0; border-bottom:1.5px solid var(--ink); font-weight:700;
}
.prose td{ padding:10px 12px 10px 0; border-bottom:1px solid var(--line-2); vertical-align:top; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(28px,5vw,80px);
  padding:clamp(28px,4vw,48px) 0 clamp(48px,6vw,80px);
}
.contact-block{ margin-bottom:28px; }
.contact-block h3{
  font-size:9.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-45); margin:0 0 9px;
}
.contact-block p,.contact-block a{ font-size:13.5px; color:var(--ink); line-height:1.7; }
.contact-block a:hover{ color:var(--hi-dark); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px);
  background:var(--dark); color:#fff;
  padding:12px 20px;
  font-size:11.5px; font-weight:600; letter-spacing:.05em;
  opacity:0; pointer-events:none;
  transition:all .35s var(--ease);
  z-index:300;
  border-left:3px solid var(--hi);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .prod-grid{ grid-template-columns:repeat(4,1fr); }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .foot-grid > div:last-child{ grid-column:span 3; }
  .shop-layout{ grid-template-columns:160px 1fr; }
}
@media (max-width:1000px){
  .hero-media{ width:58%; clip-path:polygon(24% 0, 100% 0, 100% 100%, 0% 100%); }
  .hero-copy{ max-width:min(420px, 50vw); }
  .pdp{ grid-template-columns:64px 1fr; }
  .pdp-info{ grid-column:1 / -1; position:static; }
  .pdp-thumbs{ grid-row:1; }
}
@media (max-width:900px){
  .head-in{ grid-template-columns:1fr auto; height:60px; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .value-grid{ grid-template-columns:1fr 1fr; }
  .value-item{ padding:18px 14px 18px 0 !important; }
  .value-item:nth-child(2n){ border-right:none; }
  .value-item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); }
  .value-grid.light .value-item:nth-child(n+3){ border-top-color:var(--line); }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:24px; }
  .split-media img{ aspect-ratio:4/3; }
  .shop-side{ display:none; }
  .shop-layout{ grid-template-columns:1fr; }
  .cart-wrap{ grid-template-columns:1fr; }
  .tier-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .sample-in{ grid-template-columns:1fr; }
  .sample-in img{ width:68px; }
  .rev-grid{ grid-template-columns:1fr; gap:20px; }
  .page-head .wm{ display:none; }
  .hero{ display:block; min-height:auto; padding:0; }
  .hero-media{ position:relative; width:100%; height:290px; clip-path:none; }
  .hero-in{ padding:32px var(--pad) 40px; }
  .hero-copy{ max-width:none; }
  .hero-meta{ margin-top:26px; }
}
@media (max-width:640px){
  .prod-grid, .prod-grid.four, .prod-grid.three{ grid-template-columns:1fr 1fr; }
  .cat-grid{ grid-template-columns:1fr; }
  .card-quick{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid > div:last-child{ grid-column:span 2; }
  .foot-grid > div:first-child{ grid-column:span 2; }
  .trade-figs{ grid-template-columns:1fr; gap:12px; }
  .field-2{ grid-template-columns:1fr; }
  .cart-line{ grid-template-columns:70px 1fr; }
  .cart-line img{ width:70px; }
  .cart-line .amt{ grid-column:2; }
  .announce{ font-size:9.5px; letter-spacing:.02em; }
  .tool.only-desktop{ display:none; }
  .hero h1{ font-size:clamp(2rem,9vw,2.8rem); }
}

/* ============================================================
   ENGINEERING LAYER — technical type, spec components
   ============================================================ */
:root{
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --steel: #1B1D1F;
  --steel-2: #2A2D30;
  --grid: #D8D8D2;
}

/* --- technical type -------------------------------------------------- */
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; }
.code{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-45);
}
.eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; font-weight:500; }

/* --- hero: technical overlay ---------------------------------------- */
.hero-spec{
  position:absolute; left:var(--pad); right:var(--pad); bottom:22px;
  display:flex; gap:clamp(16px,3vw,44px); flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.66);
  z-index:3; pointer-events:none;
}
.hero-spec b{ color:var(--hi); font-weight:500; }

/* --- spec meta line under the product title ------------------------- */
.spec-meta{
  display:flex; flex-wrap:wrap; gap:0 18px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-45);
  padding:10px 0 12px; margin-top:2px;
  border-top:1px solid var(--line);
}
.spec-meta span{ position:relative; }
.spec-meta span + span::before{ content:"/"; position:absolute; left:-11px; color:var(--grid); }

/* --- full specification table --------------------------------------- */
.spec-full{ width:100%; border-collapse:collapse; font-size:12.5px; }
.spec-full tr{ border-bottom:1px solid var(--line-2); }
.spec-full tr:last-child{ border-bottom:none; }
.spec-full th{
  text-align:left; font-family:var(--mono); font-weight:500;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-45); padding:9px 0; width:46%;
}
.spec-full td{
  padding:9px 0; text-align:right;
  font-family:var(--mono); font-size:11.5px; color:var(--ink); font-weight:500;
}

/* --- certification chips -------------------------------------------- */
.cert-row{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 4px; }
.cert-chip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-70);
  border:1px solid var(--grid); padding:5px 8px; line-height:1;
  display:inline-flex; align-items:center; gap:6px;
}
.cert-chip::before{ content:""; width:5px; height:5px; background:var(--hi-dark); display:block; }

/* --- document / submittal rows -------------------------------------- */
.doc-list{ border-top:1px solid var(--line); }
.doc-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:14px; padding:13px 2px; border-bottom:1px solid var(--line-2);
  transition:background .18s var(--ease);
}
.doc-row:hover{ background:var(--bg-2); }
.doc-ic{
  width:26px; height:32px; border:1px solid var(--grid);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:8px; letter-spacing:.02em;
  color:var(--ink-45); background:#fff;
}
.doc-t{ display:block; font-size:12.5px; font-weight:600; line-height:1.3; }
.doc-s{ display:block; font-family:var(--mono); font-size:9.5px; color:var(--ink-45); letter-spacing:.04em; margin-top:3px; }
.doc-a{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:1px; }

/* --- stat strip ------------------------------------------------------ */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.stat{ padding:22px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat b{
  display:block; font-family:var(--mono); font-size:clamp(1.35rem,2.4vw,1.9rem);
  font-weight:500; letter-spacing:-.02em; line-height:1;
}
.stat span{
  display:block; margin-top:8px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45);
}

/* --- capability grid ------------------------------------------------- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.cap{ background:#fff; padding:26px 22px 24px; }
.cap .cap-n{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-45); margin-bottom:16px; }
.cap h3{ font-size:13.5px; text-transform:uppercase; letter-spacing:.02em; font-weight:800; margin-bottom:9px; }
.cap p{ font-size:12.5px; color:var(--ink-70); line-height:1.6; margin:0; }

/* --- project case cards --------------------------------------------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.case{ display:block; border:1px solid var(--line); background:#fff; transition:border-color .2s var(--ease); }
.case:hover{ border-color:var(--ink); }
.case-media{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); }
.case-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.case:hover .case-media img{ transform:scale(1.04); }
.case-body{ padding:16px 16px 18px; }
.case-meta{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; }
.case h3{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; line-height:1.25; margin-bottom:7px; }
.case p{ font-size:11.5px; color:var(--ink-70); line-height:1.55; margin:0; }
.case .case-line{ margin-top:11px; padding-top:10px; border-top:1px solid var(--line-2); font-family:var(--mono); font-size:9.5px; color:var(--ink-45); letter-spacing:.03em; line-height:1.5; }

/* --- RFQ form -------------------------------------------------------- */
.rfq-wrap{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,4vw,64px); align-items:start; padding:clamp(24px,3.5vw,46px) 0 clamp(48px,6vw,84px); }
.rfq-item{ display:grid; grid-template-columns:1fr 96px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-2); }
.rfq-item label{ font-size:12.5px; line-height:1.35; }
.rfq-item .u{ font-family:var(--mono); font-size:9.5px; color:var(--ink-45); display:block; margin-top:2px; }
.rfq-item input{ border:1px solid var(--grid); padding:8px 9px; font-family:var(--mono); font-size:12px; width:100%; background:#fff; color:var(--ink); }
.rfq-item input:focus{ outline:none; border-color:var(--ink); }
.rfq-aside{ background:var(--bg-2); padding:24px 22px; }
.rfq-aside h4{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); margin-bottom:14px; }
.rfq-aside ol{ margin:0; padding-left:16px; font-size:12px; color:var(--ink-70); line-height:1.6; }
.rfq-aside li{ margin-bottom:10px; }

/* --- spec band (dark, technical) ------------------------------------- */
.spec-band{ background:var(--steel); color:#fff; }
.spec-band .wrap{ padding:clamp(28px,3.4vw,40px) var(--pad); }
.spec-band-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); }
.spec-band-item{ background:var(--steel); padding:20px 18px; }
.spec-band-item b{ display:block; font-family:var(--mono); font-size:1.1rem; font-weight:500; color:var(--hi); line-height:1; }
.spec-band-item span{ display:block; margin-top:8px; font-size:10.5px; color:rgba(255,255,255,.55); letter-spacing:.04em; }

/* --- tweaks ---------------------------------------------------------- */
.card-title{ letter-spacing:-.005em; }
.card-price small{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-45); }
.card-cat{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; }
.badge{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.trade-figs strong, .rev cite b{ font-family:var(--mono); }

/* --- grid modifiers on the engineering catalog ------------------------ */
.cat-grid.four{ grid-template-columns:repeat(4,1fr); }
.sample-in.no-media{ grid-template-columns:1fr auto; }

@media (max-width:1000px){
  .cat-grid.four{ grid-template-columns:1fr 1fr; }
  .cap-grid{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr 1fr; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .spec-band-grid{ grid-template-columns:1fr 1fr; }
  .rfq-wrap{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .case-grid{ grid-template-columns:1fr; }
  .cat-grid.four{ grid-template-columns:1fr 1fr; }
  .cat-grid.four .cat-body h3{ font-size:11px; }
  .cat-grid.four .cat-body span{ font-size:10px; }
  .sample-in.no-media{ grid-template-columns:1fr; }
  .hero-spec{ display:none; }
  .spec-full th{ width:56%; }
}

/* ============================================================
   INDUSTRIAL LAYER — solution grid, platform mock, spec lists
   ============================================================ */
.sol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.sol{ background:#fff; display:grid; grid-template-columns:200px 1fr; }
.sol-media{ overflow:hidden; background:var(--bg-2); }
.sol-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.sol:hover .sol-media img{ transform:scale(1.04); }
.sol-body{ padding:22px 24px 20px; }
.sol-kicker{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:11px;
}
.sol-body h3{ font-size:15.5px; font-weight:800; letter-spacing:-.015em; margin:0 0 9px; }
.sol-body p{ font-size:12.5px; line-height:1.62; color:var(--ink-70); margin:0 0 15px; }
.sol-metrics{ display:flex; gap:22px; border-top:1px solid var(--line-2); padding-top:12px; }
.sol-metrics b{ display:block; font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.sol-metrics span{ font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45); }

/* platform dashboard mock */
.pf-mock{ display:grid; grid-template-columns:238px 1fr; background:#0E0F10; border:1px solid #23262A; }
.pf-col{ padding:16px 18px 18px; }
.pf-col + .pf-col{ border-left:1px solid #23262A; background:#141618; }
.pf-lab{
  font-family:var(--mono); font-size:9px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(255,255,255,.34); margin-bottom:13px;
}
.pf-tree{ font-family:var(--mono); font-size:11px; line-height:2; color:rgba(255,255,255,.6); }
.pf-tree em{ font-style:normal; color:var(--hi); }
.pf-tree s{ text-decoration:none; color:rgba(255,255,255,.26); }
.pf-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#23262A; }
.pf-kpi{ background:#141618; padding:13px 14px 14px; }
.pf-kpi b{
  display:block; font-family:var(--mono); font-size:19px; font-weight:500;
  color:#fff; line-height:1; margin-bottom:6px;
}
.pf-kpi span{ font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.38); }
.pf-rows{ display:grid; gap:1px; background:#23262A; margin-top:1px; }
.pf-row{
  background:#141618; display:grid; grid-template-columns:64px 1fr auto;
  gap:12px; align-items:center; padding:8px 14px; font-size:11px; color:rgba(255,255,255,.68);
}
.pf-row b{
  font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--hi);
}
.pf-row i{ font-style:normal; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.32); }

/* revenue model table */
.rev-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.rev-table th{
  text-align:left; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-45); font-weight:700; padding:0 14px 10px 0; border-bottom:1px solid var(--ink);
}
.rev-table td{ padding:13px 14px 13px 0; border-bottom:1px solid var(--line-2); vertical-align:top; }
.rev-table td:first-child{ font-weight:700; }
.rev-table td:nth-child(2){ color:var(--ink-70); }
.rev-table td:nth-child(3){ font-family:var(--mono); font-size:11.5px; white-space:nowrap; }
.rev-table td:last-child{ color:var(--ink-45); font-size:12px; }

/* service steps */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.svc{ background:#fff; padding:26px 22px 24px; }
.svc-n{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--hi-dark); margin-bottom:14px; }
.svc h3{ font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin:0 0 8px; }
.svc .svc-lead{ font-size:12px; font-weight:700; color:var(--ink); margin:0 0 10px; }
.svc p{ font-size:12.5px; color:var(--ink-70); line-height:1.6; margin:0 0 14px; }
.svc ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); padding-top:12px; }
.svc li{ font-size:11.5px; color:var(--ink-70); line-height:1.7; padding-left:14px; position:relative; }
.svc li::before{ content:"·"; position:absolute; left:4px; color:var(--ink-45); }

@media (max-width:900px){
  .sol-grid{ grid-template-columns:1fr; }
  .sol{ grid-template-columns:1fr; }
  .sol-media{ aspect-ratio:16/9; }
  .pf-mock{ grid-template-columns:1fr; }
  .pf-col + .pf-col{ border-left:none; border-top:1px solid #23262A; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .svc-grid{ grid-template-columns:1fr; }
  .rev-table td:last-child{ display:none; }
  .rev-table th:last-child{ display:none; }
}

/* point lists + solution rows */
.pts{ list-style:none; margin:20px 0 0; padding:0; }
.pts li{
  font-size:13px; color:var(--ink-70); line-height:1.62;
  padding-left:22px; position:relative; margin-bottom:10px;
}
.pts li::before{ content:"—"; position:absolute; left:0; top:1px; color:var(--ink-45); font-size:11px; }
.sol-meta-row{
  display:flex; flex-wrap:wrap; gap:28px;
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line-2);
}
.sol-meta-row b{ display:block; font-family:var(--mono); font-size:12.5px; font-weight:500; line-height:1.3; }
.sol-meta-row span{ font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45); }
.anchor-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.anchor-nav a{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); padding:8px 14px; color:var(--ink-70);
    transition:all .18s var(--ease);
}
.anchor-nav a:hover{ border-color:var(--ink); color:var(--ink); }

/* ============================================================
   LIGHTING + PRACTICE — luminaire comparison, methodology cards
   ============================================================ */
.sec-sub{
  font-size:13px; line-height:1.68; color:var(--ink-70);
  max-width:76ch; margin:12px 0 0;
}
/* the trailing link should sit on the baseline of the copy, not float above it */
.section-head:has(.sec-sub){ align-items:flex-end; }
.split.split-top{ align-items:start; }
.split-top .split-media img{ aspect-ratio:4/3.4; }

/* luminaire replacement table — scoped, .rev-table is used by the revenue table too */
.lt-table{ margin-top:0; }
.lt-table td:last-child{
  font-family:var(--mono); font-size:11.5px; white-space:nowrap;
  color:var(--hi-dark); font-weight:500;
}
.lt-table td:nth-child(2){ color:var(--ink-45); white-space:nowrap; }
.lt-table td:nth-child(3){ font-weight:700; }
.lt-note{
  font-size:12px; line-height:1.7; color:var(--ink-70);
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--line-2);
}
.lt-caveat{
  margin-top:18px; padding:16px 18px; background:#fff;
  border-left:2px solid var(--hi-dark);
  font-size:12px; line-height:1.68; color:var(--ink-70);
}
.lt-caveat b{ display:block; color:var(--ink); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:7px; }

/* practice cards */
.rev-tag{
  display:inline-block; font-family:var(--mono); font-size:9px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-45);
  margin-bottom:12px;
}
.rev-body{
  font-size:12.5px; line-height:1.68; color:var(--ink-70); margin:0;
}
.rev blockquote{ font-size:14px; line-height:1.45; letter-spacing:-.015em; }

@media (max-width:640px){
  .lt-table td:last-child{ white-space:normal; }
  .split-top .split-media img{ aspect-ratio:16/10; }
}

/* list price is not a project price */
.price-note{
  display:block; font-family:var(--body, inherit); font-size:10.5px;
  font-weight:400; letter-spacing:0; line-height:1.55;
  color:var(--ink-45); margin-top:7px; max-width:38ch;
}

/* stated basis for every figure on the site */
.figure-basis{
  font-size:11.5px; line-height:1.72; color:var(--ink-45);
  max-width:88ch; margin:18px 0 0; padding-top:14px;
  border-top:1px solid var(--line-2);
}
.figure-basis b{ color:var(--ink-70); font-weight:700; }

/* ============================================================
   EXTENDED RANGE — the five groups beyond metering and lighting
   ============================================================ */
.range-media{ margin:0 0 2px; }
.range-media img{
  width:100%; aspect-ratio:16/9.4; object-fit:cover;
  background:var(--bg-2);
}
.range-cap{
  font-size:11.5px; line-height:1.66; color:var(--ink-45);
  padding:11px 0 22px; max-width:96ch;
  border-bottom:1px solid var(--line);
}
.range-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px; background:var(--line);
}
.range-item{
  background:#fff; padding:24px 20px 22px;
  display:flex; flex-direction:column;
  transition:background .25s var(--ease);
}
.range-item:hover{ background:var(--bg-2); }
.rn{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45);
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line-2);
}
.range-item h3{
  font-size:15px; font-weight:800; letter-spacing:-.02em;
  line-height:1.16; margin:0 0 10px;
}
.range-item p{
  font-size:12px; line-height:1.62; color:var(--ink-70);
  margin:0 0 18px;
}
.range-item .rs{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.05em;
  color:var(--ink-45); margin-top:auto; line-height:1.5;
}
.range-item:hover .rn{ color:var(--ink); }

/* an odd number of solutions: the last one runs the full width */
.sol-grid > a:last-child:nth-child(odd){ grid-column:1 / -1; }
.sol-grid > a:last-child:nth-child(odd) .sol-body{ max-width:74ch; }

@media (max-width:1180px){
  .range-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .range-media img{ aspect-ratio:4/3; }
  .range-grid{ grid-template-columns:1fr; }
  .range-item{ padding:20px 18px; }
}

/* a full third row of category cards: the last one widens rather than
   leaving a hole in the grid when the count is not a multiple of three */
.cat-grid > a:last-child:nth-child(3n+2){ grid-column:span 2; }
@media (max-width:900px){
  .cat-grid > a:last-child:nth-child(3n+2){ grid-column:auto; }
}

/* ============================================================
   SYSTEMS LAYER
   Each system is read as three tiers plus an origin split, because
   since April 2026 the duty on a steel enclosure and the duty on a
   control board are different numbers.
   ============================================================ */
.sys-list{ display:flex; flex-direction:column; gap:clamp(56px,7vw,104px); }

.sys{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,3.6vw,56px); align-items:start;
}
.sys:nth-child(even) .sys-media{ order:2; }

.sys-media img{
  width:100%; aspect-ratio:4/3.1; object-fit:cover; background:var(--bg-2);
}
.sys-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-45);
  padding-bottom:12px; margin-bottom:18px;
  border-bottom:1px solid var(--line); display:block;
}
.sys-body h2{
  font-size:clamp(24px,2.7vw,34px); line-height:1.03; margin:0 0 16px;
}
.sys-body > p{
  font-size:14px; line-height:1.62; color:var(--ink-70); margin:0 0 26px; max-width:60ch;
}

.layer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-bottom:26px; }
.layer{ background:#fff; padding:18px 16px 20px; }
.layer h4{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45);
  margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line-2);
}
.layer ul{ margin:0; padding:0; list-style:none; }
.layer li{
  font-size:11.5px; line-height:1.5; color:var(--ink-70);
  padding:0 0 8px 11px; position:relative;
}
.layer li::before{
  content:""; position:absolute; left:0; top:7px;
  width:4px; height:1px; background:var(--ink-45);
}

.origin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-bottom:24px; }
.origin-col{ padding:16px 16px 18px; }
.origin-col.us{ background:var(--bg-2); }
.origin-col.imp{ background:#fff; }
.origin-col h5{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 11px; display:flex; align-items:center; gap:7px;
}
.origin-col h5 i{ width:6px; height:6px; border-radius:50%; flex:none; }
.origin-col.us h5 i{ background:var(--ink); }
.origin-col.imp h5 i{ background:var(--hi-dark); }
.origin-col ul{ margin:0; padding:0; list-style:none; }
.origin-col li{ font-size:11.5px; line-height:1.5; color:var(--ink-70); padding:0 0 7px; }

.sys-meta{ display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; border-top:1px solid var(--line); padding-top:18px; }
.sys-meta div{ min-width:0; }
.sys-meta h6{
  font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45); margin:0 0 7px;
}
.sys-meta p{ font-size:11.5px; line-height:1.55; color:var(--ink-70); margin:0; }
.sys-meta .price{ grid-column:1 / -1; margin-top:6px; padding-top:12px; border-top:1px solid var(--line-2); font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink); }

/* ---------------- procurement gates ---------------- */
.gate-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.gate{ background:#fff; padding:26px 24px 28px; }
.gate-n{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-45); display:block; margin-bottom:14px;
}
.gate h3{ font-size:17px; font-weight:800; letter-spacing:-.02em; margin:0 0 5px; line-height:1.16; }
.gate .who{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink-45);
  display:block; margin-bottom:14px; text-transform:uppercase;
}
.gate p{ font-size:12.5px; line-height:1.62; color:var(--ink-70); margin:0 0 12px; }
.gate p.note{
  font-size:11.5px; color:var(--ink-45); padding-left:12px;
  border-left:2px solid var(--line); margin-bottom:14px;
}
.gate .ref{
  font-family:var(--mono); font-size:9px; letter-spacing:.03em; color:var(--ink-45);
  display:block; padding-top:12px; border-top:1px solid var(--line-2); line-height:1.5;
}

/* ---------------- tier matrix ---------------- */
.tier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tier{ background:#fff; padding:22px 20px 24px; display:flex; flex-direction:column; }
.tier-head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.tier-key{
  width:22px; height:22px; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:600;
}
.tier.a .tier-key{ background:var(--ink); color:#fff; }
.tier.b .tier-key{ background:var(--hi); color:var(--hi-ink); }
.tier.c .tier-key{ background:var(--dark); color:var(--hi); }
.tier.d .tier-key{ background:var(--bg-3); color:var(--ink); }
.tier h3{ font-size:14px; font-weight:800; letter-spacing:-.01em; margin:0; }
.tier > p{ font-size:11.5px; line-height:1.55; color:var(--ink-45); margin:0 0 16px; }
.tier ul{ margin:0; padding:0; list-style:none; }
.tier li{
  font-size:11.5px; line-height:1.5; color:var(--ink-70);
  padding:0 0 9px 12px; position:relative;
}
.tier li::before{ content:""; position:absolute; left:0; top:7px; width:4px; height:1px; background:var(--ink-45); }
.tier.c li{ color:var(--ink); }

/* ---------------- closed table ---------------- */
.closed-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.closed-table th{
  font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-45); text-align:left;
  padding:0 16px 11px 0; border-bottom:1px solid var(--ink); vertical-align:bottom;
}
.closed-table td{
  padding:15px 16px 15px 0; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink-70); line-height:1.55;
}
.closed-table td:first-child{ color:var(--ink); font-weight:600; width:23%; }
.closed-table td.date{
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--ink); white-space:nowrap; width:11%;
}
.closed-table td.basis{ width:22%; font-size:11.5px; }
.closed-table tr:last-child td{ border-bottom:1px solid var(--ink); }

/* ---------------- origin claim ---------------- */
.claim-box{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:28px;
}
.claim-box > div{ padding:24px 22px; background:#fff; }
.claim-box .yes{ background:var(--bg-2); }
.claim-box h4{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-45); margin:0 0 10px;
}
.claim-box .yes strong{ font-size:19px; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.15; }
.claim-box .no strong{ font-size:19px; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.15; color:var(--ink-45); text-decoration:line-through; text-decoration-thickness:1px; }
.claim-box p{ font-size:11.5px; line-height:1.55; color:var(--ink-70); margin:10px 0 0; }

.stack-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.stack-table td{ padding:12px 16px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-70); line-height:1.55; }
.stack-table td:first-child{ width:26%; color:var(--ink); font-weight:600; }
.stack-table tr:last-child td{ border-bottom:none; }

/* ---------------- extended range ---------------- */
.ext-group{ margin-bottom:clamp(30px,4vw,44px); }
.ext-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--ink); padding-bottom:10px; margin-bottom:2px; }
.ext-head h3{ font-size:15px; font-weight:800; letter-spacing:-.01em; margin:0; }
.ext-head span{ font-size:11.5px; color:var(--ink-45); }
.ext-table{ width:100%; border-collapse:collapse; font-size:12px; }
.ext-table td{ padding:9px 14px 9px 0; border-bottom:1px solid var(--line-2); vertical-align:top; color:var(--ink-70); line-height:1.5; }
.ext-table td.code{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink); white-space:nowrap; width:12%; }
.ext-table td.desc{ width:42%; color:var(--ink); }
.ext-table td.spec{ font-size:11px; color:var(--ink-45); }

/* ---------------- callout ---------------- */
.callout{
  border-left:3px solid var(--hi-dark); background:var(--bg-2);
  padding:20px 22px; margin:26px 0;
}
.callout p{ font-size:12.5px; line-height:1.62; color:var(--ink-70); margin:0; }
.callout p + p{ margin-top:9px; }
.callout strong{ color:var(--ink); }

@media (max-width:1080px){
  .sys{ grid-template-columns:1fr; }
  .sys:nth-child(even) .sys-media{ order:0; }
  .tier-grid{ grid-template-columns:repeat(2,1fr); }
  .gate-list{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .layer-grid{ grid-template-columns:1fr; }
  .origin-grid{ grid-template-columns:1fr; }
  .sys-meta{ grid-template-columns:1fr; }
  .tier-grid{ grid-template-columns:1fr; }
  .claim-box{ grid-template-columns:1fr; }
  .closed-table{ font-size:11.5px; }
  .closed-table td:first-child{ width:auto; }
  .closed-table td.date, .closed-table td.basis{ width:auto; }
  .closed-table thead{ display:none; }
  .closed-table tr{ display:block; padding:14px 0; border-bottom:1px solid var(--line); }
  .closed-table td{ display:block; padding:0 0 6px; border:none; }
  .ext-table td.code{ width:26%; }
  .ext-table td.desc{ width:auto; }
}

/* ---------------- closed strip on the home page ---------------- */
.closed-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cs-item{ background:#fff; padding:20px 18px 22px; display:flex; flex-direction:column; }
.cs-date{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  color:var(--ink-45); display:block; margin-bottom:12px;
}
.cs-cat{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25; display:block; margin-bottom:9px; }
.cs-effect{ font-size:11.5px; line-height:1.55; color:var(--ink-70); }
.cs-foot{
  margin-top:18px; font-size:12.5px; color:var(--ink-70); max-width:78ch;
}
@media (max-width:1080px){ .closed-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .closed-strip{ grid-template-columns:1fr; } }

/* ============================================================
   CORPORATE RECORD
   Two spec tables rather than one: a bank checks identity and
   address against separate records, and merging them reads as
   a summary someone wrote rather than a filing someone can find.
   ============================================================ */
.corp-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,60px);
  border-top:1px solid var(--line); padding-top:clamp(18px,2.4vw,28px);
}
.corp-grid .spec-table td{ padding:9px 0; }
@media (max-width:860px){
  .corp-grid{ grid-template-columns:1fr; gap:0; }
  .corp-grid .spec-table:last-child{ border-top:1px solid var(--line); margin-top:6px; padding-top:6px; }
}

/* a form that fell back to the visitor's mail client has not been sent yet —
   say so plainly instead of showing a delivery confirmation */
.fallback-note{
  margin-top:14px; padding:12px 14px; border-left:2px solid var(--ink);
  background:var(--bg-warm); font-size:12.5px; line-height:1.65; color:var(--ink-70);
}

/* ---------- 产品详情：典型应用列表 ---------- */
.app-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.app-list li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; line-height: 1.65; color: var(--ink-70);
}
.app-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--hi);
}

/* ---------- 产品卡：库存与交期 ---------- */
.card-avail{
  display:flex; align-items:flex-start; gap:6px;
  font-size:10.5px; line-height:1.45; color:var(--ink-45);
  margin-top:5px;
}
.card-avail::before{
  content:""; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--hi-dark); margin-top:4px;
}
.card-avail.bto::before{ background:var(--ink-45); }