/* ==========================================================================
   Honvale — Industrial Venting Solutions
   Global stylesheet / design system
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* dark industrial surfaces — deep navy, matched to the logo navy (#022562)
     and lit with the logo orange. Not a cold near-black any more: the brand
     mark leads with navy, so every dark band carries the same cast. */
  --ink-950:#04102B;
  --ink-900:#071A3E;
  --ink-850:#0B2350;
  --ink-800:#102C60;
  --ink-700:#17396F;
  --ink-600:#21477E;

  /* light surfaces — cool grey with a faint navy bias so the two halves
     of the palette belong to the same family */
  --paper:#FFFFFF;
  --paper-soft:#F4F6F9;
  --paper-line:#D9DEE7;
  --paper-line-2:#E9EDF3;

  /* type */
  --text:#0B1424;
  --text-soft:#4E5970;
  --text-mute:#828D9F;
  --on-dark:#EEF2F8;
  --on-dark-soft:#A8B8D0;
  --on-dark-mute:#7186A6;

  /* brand — taken straight off the logo: navy #022562 / blue #0E56A2 / orange #F0801F */
  --accent:#F0801F;
  --accent-deep:#C4600A;
  --accent-lite:#FF9A4D;   /* 深底上的浅橙，用于小标签与图标 */
  --accent-soft:#FEF4EA;
  --accent-glow:rgba(240,128,31,.30);
  --steel:#0E56A2;
  --steel-soft:#E9F1FB;
  --teal:#0E56A2;
  --teal-soft:#E9F1FB;
  --amber:#F5A623;
  --amber-soft:#FDF3E2;

  /* structure — square corners, hard edges, almost no elevation */
  --line-dark:rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.18);
  --radius:0px;
  --radius-lg:0px;
  --shadow-sm:none;
  --shadow-md:0 1px 0 rgba(11,20,36,.06);
  --shadow-lg:0 24px 48px -18px rgba(4,10,26,.45);

  --font-display:"Archivo","IBM Plex Sans",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  --font-body:"IBM Plex Sans",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.015em;color:inherit}
p{margin:0}
table{border-collapse:collapse;width:100%}

/* Keyboard-only skip link. articles.html and article.html carry this element,
   but .skip had no rule anywhere, so it rendered as a plain visible line pinned
   to the very top of the page. Parked off-canvas until focused, then shown. */
.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1200;
  background:var(--accent);
  color:var(--ink-950);
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:12px 20px;
}
.skip:focus{left:0;outline:2px solid var(--ink-950);outline-offset:-4px}

/* ---------- 3. Layout ---------- */
.container{max-width:var(--max);margin:0 auto;padding:0 28px;width:100%}
.section{padding:104px 0;position:relative}
.section-sm{padding:68px 0}
.section-dark{background:var(--ink-900);color:var(--on-dark)}
.section-soft{background:var(--paper-soft)}
.section-line{border-top:1px solid var(--paper-line)}

.grid{display:grid;gap:24px}
/* A grid or flex item defaults to min-width:auto, which resolves to its content's
   min-content width. A wide child — a 620px spec table, a long unbroken string —
   then widens the whole track and pushes the document past the viewport instead of
   scrolling inside its own container. Pinning every direct child to min-width:0
   lets the track hold the viewport and leaves .table-wrap to do the scrolling. */
.grid>*,.split>*,.split-wide>*{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-wide{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}

/* ---------- 4. Typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.section-dark .eyebrow,.page-hero .eyebrow,.cta-band .eyebrow{color:var(--accent-lite)}

.h-xl{font-size:clamp(35px,4.9vw,57px);line-height:1.08;text-wrap:balance}
.h-lg{font-size:clamp(30px,3.6vw,44px)}
.h-md{font-size:clamp(24px,2.4vw,30px)}
.h-sm{font-size:20px}

.lead{font-size:18px;line-height:1.72;color:var(--text-soft)}
.section-dark .lead{color:var(--on-dark-soft)}
.body-soft{color:var(--text-soft);font-size:15.5px;line-height:1.78}
.section-dark .body-soft{color:var(--on-dark-soft)}
.mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em}

.section-head{max-width:760px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{margin-top:16px}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 28px;border-radius:var(--radius);
  font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  border:1px solid transparent;transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-dark{background:var(--ink-900);color:#fff}
.btn-dark:hover{background:var(--ink-700)}
.btn-outline{border-color:var(--paper-line);color:var(--text);background:#fff}
.btn-outline:hover{border-color:var(--text);color:var(--text);background:var(--paper-soft)}
.btn-ghost{border-color:var(--line-dark-2);color:#fff}
.btn-ghost:hover{border-color:var(--accent);color:#fff;background:rgba(240,128,31,.16)}
.btn-sm{height:42px;padding:0 20px;font-size:13px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  transition:gap .22s var(--ease);
}
.link-arrow:hover{gap:14px}

/* ---------- 6. Topbar + Navigation ---------- */
.topbar{background:var(--ink-950);border-bottom:1px solid var(--line-dark);font-size:13px;color:var(--on-dark-soft)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:42px;gap:24px}
.topbar-left{display:flex;gap:26px;align-items:center}
.topbar a{transition:color .2s}
.topbar a:hover{color:#fff}
.topbar-item{display:inline-flex;align-items:center;gap:8px}
.topbar-item svg{opacity:.6;flex:none}
.topbar-right{display:flex;align-items:center;gap:18px}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;
  border:1px solid var(--line-dark-2);border-radius:3px;padding:3px 9px;letter-spacing:.08em}
.lang b{color:#fff}

.nav{position:sticky;top:0;z-index:60;background:rgba(4,16,43,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:22px}

.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand-mark{width:44px;height:44px;flex:none;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:19.5px;letter-spacing:.015em;color:#fff}
.brand-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;color:var(--on-dark-mute);text-transform:uppercase}

.menu{display:flex;align-items:center;gap:4px}
.menu > li{position:relative}
.menu > li > a{
  display:block;padding:10px 12px;border-radius:0;white-space:nowrap;
  font-family:var(--font-display);font-size:13.6px;font-weight:600;letter-spacing:.035em;color:#D5DEEA;
  transition:color .2s,background .2s;
}
.menu > li > a:hover,.menu > li.active > a{color:#fff;background:rgba(255,255,255,.07)}
.menu > li.active > a{box-shadow:inset 0 -2px 0 var(--accent)}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:320px;
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .22s var(--ease);border:1px solid var(--paper-line);
  /* Nine items is a tall block. On a short laptop viewport the scroll cap keeps
     the menu inside the window instead of hanging off the bottom edge. */
  max-height:calc(100vh - 150px);overflow-y:auto;
}
.menu > li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:7px 13px;border-radius:3px;font-size:14px;color:var(--text-soft);
  font-weight:500;transition:all .18s;white-space:nowrap;
}
.dropdown a:hover{background:var(--paper-soft);color:var(--accent)}
.dropdown a span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-mute);letter-spacing:.06em;white-space:nowrap}
/* The menu is long enough to need grouping: products first, then the pages that
   explain how to use them. Labels are inert spans so the whole block stays free
   of nested divs and can be replaced as one unit by nav-sync.js. */
.dropdown .dd-label{
  display:block;padding:9px 13px 5px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-mute);
}
.dropdown .dd-label:first-child{padding-top:4px}
.dropdown .dd-sep{display:block;height:1px;background:var(--paper-line);margin:7px 13px}

.nav-cta{display:flex;align-items:center;gap:14px;flex:none}
.nav-phone{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.nav-phone small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--on-dark-mute);text-transform:uppercase}
.nav-phone b{font-family:var(--font-display);font-size:15px;color:#fff;letter-spacing:.02em}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line-dark-2);border-radius:3px}
.burger i{display:block;width:19px;height:1.6px;background:#fff;transition:.25s var(--ease)}
.burger.open i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.mobile-menu{display:none;background:var(--ink-850);border-bottom:1px solid var(--line-dark);padding:12px 0 26px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:13px 0;color:#CFDAE7;font-family:var(--font-display);font-size:16px;
  font-weight:600;border-bottom:1px solid var(--line-dark)}
.mobile-menu .sub{padding-left:16px;font-family:var(--font-body);font-size:14px;font-weight:400;color:var(--on-dark-soft)}
.mobile-menu .mm-label{
  display:block;padding:18px 0 4px;border-bottom:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.mobile-menu .mm-sep{height:1px;background:var(--line-dark);margin:12px 0}

/* ---------- 7. Hero ---------- */
.hero{position:relative;background:var(--ink-950);color:#fff;overflow:hidden;padding:96px 0 0}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 70% 15%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 15%,#000 20%,transparent 78%);
}
.hero-glow{
  position:absolute;width:760px;height:760px;right:-260px;top:-300px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,128,31,.17) 0%,rgba(240,128,31,.04) 45%,transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
  padding-bottom:84px}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--accent-lite)}
.hero .lead{color:#A9B8CC;max-width:560px;font-size:17.5px}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 34px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark-2);color:#C6D3E2;
}
.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none}
.chip.amber .dot{background:var(--amber)}

.hero-visual{position:relative}
.hero-visual svg{width:100%;height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.55))}

/* --- Hero media reel: rotating showcase of the production steps --- */
.hero-reel{position:relative}
.reel-track{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--ink-900);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 34px 64px rgba(0,0,0,.6);
}
.reel-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity .85s var(--ease),visibility .85s var(--ease);
}
.reel-slide.is-active{opacity:1;visibility:visible}
.reel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.reel-slide.is-drawing{
  background:
    radial-gradient(circle at 68% 22%,rgba(240,128,31,.16),transparent 62%),
    radial-gradient(circle at 10% 96%,rgba(14,86,162,.28),transparent 60%),
    var(--ink-950);
}
.reel-slide.is-drawing img{object-fit:contain;padding:30px}
.reel-cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:38px 18px 15px;
  background:linear-gradient(to top,rgba(4,16,43,.9),rgba(4,16,43,.5) 45%,transparent);
  color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.4;
}
.reel-cap::before{
  content:"";display:inline-block;width:6px;height:6px;background:var(--accent);
  margin-right:9px;vertical-align:1px;
}
.reel-tag{
  position:absolute;top:14px;left:14px;
  padding:5px 11px;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#DCE6F2;
  background:rgba(4,16,43,.72);border:1px solid rgba(255,255,255,.2);
}
.reel-dots{display:flex;gap:9px;justify-content:center;margin-top:18px}
.reel-dot{
  width:30px;height:3px;padding:0;border:0;background:rgba(255,255,255,.22);
  cursor:pointer;transition:background .3s var(--ease);
}
.reel-dot.is-active{background:var(--accent)}
.reel-dot:hover{background:rgba(255,255,255,.48)}
.reel-dot:focus-visible{outline:2px solid var(--accent-lite);outline-offset:3px}
@media (max-width:680px){
  .reel-track{aspect-ratio:16/11}
  .reel-slide.is-drawing img{padding:16px}
  .reel-cap{font-size:10px;padding:30px 14px 12px}
  .reel-tag{font-size:9px;top:10px;left:10px}
  .reel-dots{margin-top:14px}
}

.hero-stats{position:relative;border-top:1px solid var(--line-dark);background:rgba(255,255,255,.015)}
.hero-stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hstat{padding:30px 26px 30px 0;border-right:1px solid var(--line-dark)}
.hstat:last-child{border-right:0}
.hstat .num{font-family:var(--font-display);font-size:34px;font-weight:700;color:#fff;letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:4px}
.hstat .num i{font-style:normal;font-size:22px;color:var(--accent);font-weight:600;padding:0 3px}
.hstat .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-dark-mute);margin-top:6px}

/* ---------- 8. Page hero (inner pages) ---------- */
.page-hero{position:relative;background:var(--ink-900);color:#fff;padding:74px 0 64px;overflow:hidden}
.page-hero .hero-grid-bg{opacity:.7}
.page-hero-inner{position:relative}
.page-hero h1{color:#fff;margin-bottom:16px}
.page-hero p{color:#A9B8CC;max-width:680px;font-size:17px;line-height:1.7}
.crumb{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:20px}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}

/* ---------- 9. Cards ---------- */
.card{
  position:relative;background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius-lg);
  padding:34px 30px;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.card:hover{border-color:var(--text-soft);background:#FCFCFD}
.card-num{
  position:absolute;top:0;right:0;font-family:var(--font-mono);font-size:11px;color:var(--text-mute);
  padding:11px 15px;letter-spacing:.1em;
}
.card-icon{width:46px;height:46px;margin-bottom:22px}
.card h3{font-size:19px;margin-bottom:11px}
.card p{font-size:14.8px;line-height:1.72;color:var(--text-soft)}
.card-line{width:34px;height:2px;background:var(--accent);margin-bottom:20px}

/* feature card on dark */
.card-dark{background:var(--ink-850);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:34px 30px;transition:border-color .3s,background .3s}
.card-dark:hover{border-color:rgba(240,128,31,.5);background:var(--ink-800)}
.card-dark h3{color:#fff;font-size:19px;margin-bottom:11px}
.card-dark p{font-size:14.8px;color:var(--on-dark-soft);line-height:1.72}

/* ---------- 10. Product cards ---------- */
.prod-card{
  position:relative;background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s var(--ease);
}
.prod-card:hover{border-color:var(--text-soft)}
.prod-media{
  position:relative;background:
    radial-gradient(120% 120% at 50% 0%,#F7F8FA 0%,#EDEFF2 100%);
  padding:30px;display:flex;align-items:center;justify-content:center;min-height:236px;
  border-bottom:1px solid var(--paper-line);
}
.prod-media svg{width:100%;max-width:216px;height:auto}
/* Raster photos (uploaded parts, supplier shots) get one fixed square frame so
   every card in the grid lines up and nothing jumps when the file arrives.
   `contain` keeps a non-square drawing from being cropped or stretched. */
.prod-media img{width:186px;height:186px;object-fit:contain}
.prod-media::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(16,44,96,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,44,96,.04) 1px,transparent 1px);
  background-size:26px 26px;pointer-events:none;
}
.prod-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.prod-code{font-family:var(--font-mono);font-size:11.5px;color:var(--accent);letter-spacing:.1em;margin-bottom:9px}
.prod-body h3{font-size:19.5px;margin-bottom:12px}
.prod-body > p{font-size:14.3px;color:var(--text-soft);line-height:1.7;margin-bottom:18px}
.prod-specs{margin:0 0 22px;border-top:1px solid var(--paper-line-2)}
.prod-specs div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--paper-line-2);font-size:13.3px}
.prod-specs dt{color:var(--text-mute);flex:none}
.prod-specs dd{margin:0;font-family:var(--font-mono);font-size:12.3px;color:var(--text);text-align:right}
.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}

.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:3px;white-space:nowrap}
.tag-blue{background:var(--accent-soft);color:var(--accent-deep)}
.tag-teal{background:var(--teal-soft);color:#0B8055}
.tag-amber{background:var(--amber-soft);color:#9A6410}
.tag-grey{background:#EEF1F5;color:#5A6A80}
.tag-ondark{background:rgba(255,255,255,.08);color:#C3D1E1}

/* filter bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filter-btn{
  padding:10px 20px;border:1px solid var(--paper-line);border-radius:0;background:#fff;
  font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--text-soft);
  transition:all .22s var(--ease);
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent)}
.filter-btn.active{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.filter-btn span{font-family:var(--font-mono);font-size:11px;opacity:.6;margin-left:6px}

/* ---------- 11. Spec table ---------- */
.table-wrap{border:1px solid var(--paper-line);border-radius:var(--radius-lg);overflow:auto;background:#fff}
table.spec{font-size:14px}
table.spec thead th{
  background:var(--ink-900);color:#fff;text-align:left;padding:15px 13px;
  font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
table.spec tbody td{padding:14px 13px;border-bottom:1px solid var(--paper-line-2);color:var(--text-soft);vertical-align:top}
table.spec tbody tr:last-child td{border-bottom:0}
table.spec tbody tr:nth-child(even){background:#FAFAFB}
table.spec tbody tr:hover{background:var(--accent-soft)}
table.spec td:first-child{font-family:var(--font-mono);font-size:12.5px;color:var(--text);white-space:nowrap}
.tbd{color:var(--amber);font-family:var(--font-mono);font-size:12px;white-space:nowrap}

/* ---------- 12. Stats band ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--paper-line);
  border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.stat{padding:32px 26px;border-right:1px solid var(--paper-line)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--ink-900);
  letter-spacing:-.02em;display:flex;align-items:baseline;gap:3px}
.stat .num i{font-style:normal;font-size:19px;color:var(--accent)}
.stat .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);margin-top:7px}
.stat .sub{font-size:13px;color:var(--text-soft);margin-top:9px;line-height:1.55}

/* ---------- 13. Applications ---------- */
.app-card{
  position:relative;padding:30px 26px;border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:all .3s var(--ease);overflow:hidden;
}
.app-card::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent);
  transition:height .35s var(--ease);
}
.app-card:hover{border-color:rgba(240,128,31,.55);background:rgba(240,128,31,.07)}
.app-card:hover::before{height:100%}
.app-ico{width:40px;height:40px;margin-bottom:18px}
.app-card h3{color:#fff;font-size:17.5px;margin-bottom:9px}
.app-card p{font-size:13.8px;color:var(--on-dark-soft);line-height:1.68}
.app-card .app-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;display:block}

/* ---------- 14. Technology / timeline ---------- */
.spec-list{border-top:1px solid var(--line-dark)}
.spec-list li{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-dark);align-items:flex-start}
.spec-list .k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);flex:none;width:132px;padding-top:3px}
.spec-list .v{color:var(--on-dark-soft);font-size:14.6px;line-height:1.68}
.spec-list .v b{color:#fff;font-weight:600}

.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--paper-line)}
.tl-item{position:relative;padding-bottom:38px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:5px;width:11px;height:11px;border-radius:0;
  background:#fff;border:2px solid var(--paper-line);
}
.tl-item.done::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tl-item.active::before{border-color:var(--amber);background:#fff;box-shadow:0 0 0 4px var(--amber-soft)}
.tl-when{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:7px}
.tl-item h4{font-size:17px;margin-bottom:7px}
.tl-item p{font-size:14.3px;color:var(--text-soft);line-height:1.7}

/* ---------- 15. CTA band ---------- */
.cta-band{position:relative;background:var(--ink-900);color:#fff;padding:78px 0;overflow:hidden}
.cta-band .hero-grid-bg{opacity:.55}
.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta-inner h2{color:#fff;max-width:640px}
.cta-inner p{color:#A9B8CC;margin-top:14px;max-width:620px;font-size:16px}

/* ---------- 16. Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.field label i{color:var(--accent);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--paper-line);border-radius:var(--radius);
  font-family:var(--font-body);font-size:15px;color:var(--text);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.form-note{font-size:12.8px;color:var(--text-mute);line-height:1.65}
.form-msg{display:none;padding:14px 16px;border-radius:var(--radius);font-size:14px;margin-top:18px}
.form-msg.ok{display:block;background:var(--teal-soft);color:#0B8055;border:1px solid #B7E7D7}
.form-msg.err{display:block;background:#FDECEC;color:#B4262A;border:1px solid #F6CFCF}

/* Optional technical block — collapsed by default so the visible form stays at
   four fields. Every field a buyer actually has to read costs conversions. */
.form-more{margin-top:22px;border:1px dashed var(--paper-line);border-radius:var(--radius);padding:0 18px}
.form-more[open]{padding-bottom:20px;border-style:solid}
.form-more>summary{
  cursor:pointer;list-style:none;padding:16px 0;display:flex;align-items:flex-start;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-deep);line-height:1.5;
}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary::before{content:"+";font-size:14px;line-height:1.1;color:var(--accent);flex:none;width:11px}
.form-more[open]>summary::before{content:"–"}
.form-more>summary:hover{color:var(--accent)}
/* Honeypot — kept in the layout box rather than pushed to left:-9999px, so it
   never shows up as a phantom horizontal-overflow element during layout audits.
   Bots that skip display:none still fill a clipped 1px input. */
.hp-field{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}

/* ---------- 17. Contact blocks ---------- */
.contact-item{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--paper-line)}
.contact-item:first-child{padding-top:0}
.contact-ico{width:44px;height:44px;flex:none;border-radius:var(--radius);background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;color:var(--accent-deep)}
.contact-item h4{font-size:15.5px;margin-bottom:5px}
.contact-item p,.contact-item a{font-size:14.5px;color:var(--text-soft);line-height:1.6}
.contact-item a:hover{color:var(--accent)}
.map-frame{border:1px solid var(--paper-line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-soft);
  min-height:300px;display:flex;align-items:center;justify-content:center;position:relative}
.map-frame iframe{width:100%;height:100%;min-height:300px;border:0;display:block}

/* ---------- 18. Accordion ---------- */
.acc-item{border:1px solid var(--paper-line);border-radius:var(--radius-lg);background:#fff;margin-bottom:12px;overflow:hidden}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;
  cursor:pointer;font-family:var(--font-display);font-size:16.5px;font-weight:600;transition:color .2s}
.acc-head:hover{color:var(--accent)}
.acc-ico{width:22px;height:22px;flex:none;position:relative}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--text-mute);
  transition:transform .28s var(--ease),background .2s}
.acc-ico::before{top:10px;left:2px;width:18px;height:1.6px}
.acc-ico::after{left:10px;top:2px;width:1.6px;height:18px}
.acc-item.open .acc-ico::after{transform:rotate(90deg);opacity:0}
.acc-item.open .acc-ico::before{background:var(--accent)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .34s var(--ease)}
.acc-body-inner{padding:0 24px 22px;font-size:14.8px;color:var(--text-soft);line-height:1.75}

/* ---------- 19. Footer ---------- */
.footer{background:var(--ink-950);color:var(--on-dark-soft);padding:74px 0 0;font-size:14px;
  border-top:1px solid var(--line-dark)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:48px;padding-bottom:52px}
.footer h5{color:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:20px}
.footer-brand p{margin:18px 0 22px;line-height:1.75;font-size:13.8px;max-width:340px}
.footer-links li{margin-bottom:11px}
.footer-links a{font-size:14px;transition:color .2s;display:inline-block}
.footer-links a:hover{color:var(--accent);transform:translateX(3px)}
.footer-links .fl-sep{height:1px;background:var(--line-dark);margin:15px 0 14px;list-style:none;pointer-events:none}
.footer-contact li{display:flex;gap:12px;margin-bottom:15px;font-size:13.8px;line-height:1.6;align-items:flex-start}
.footer-contact svg{flex:none;margin-top:3px;opacity:.55}
.footer-contact a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--line-dark);padding:24px 0;display:flex;justify-content:space-between;
  gap:22px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--on-dark-mute)}
.footer-bottom a:hover{color:#fff}

.to-top{
  position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:0;
  background:var(--ink-900);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all .3s var(--ease);z-index:70;
  border:1px solid var(--line-dark-2);
}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--accent);border-color:var(--accent)}

/* ---------- 20. Misc utilities ---------- */
[id]{scroll-margin-top:98px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Catalog cards are injected after load, so they carry their own entrance
   animation instead of relying on the IntersectionObserver in main.js.
   @keyframes cpIn is referenced inline by catalog.js. */
@keyframes cpIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.prod-media img[data-no-image]{opacity:.22;filter:grayscale(1)}
/* A card whose photo has not arrived yet. The frame is drawn, not shimmered:
   a moving gradient reads as a generic app skeleton, a dashed drawing frame
   reads as "artwork pending" on a technical sheet. Alt text is suppressed so
   the part name does not print across the media area. */
.prod-media img:not([src]){
  color:transparent;font-size:0;line-height:0;overflow:hidden;
  border:1px dashed rgba(16,44,96,.18);border-radius:3px;
  background-image:linear-gradient(rgba(16,44,96,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,44,96,.055) 1px,transparent 1px);
  background-size:23px 23px;background-position:center;
}
#catalog-filters:empty{display:none}
/* zero-height deep-link targets: land below the sticky header */
.anchor{display:block;height:0;scroll-margin-top:110px}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.mb-0{margin-bottom:0}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.text-center{text-align:center}
.divider{height:1px;background:var(--paper-line);border:0;margin:0}
.note{font-size:12.8px;color:var(--text-mute);line-height:1.7}
.note-dark{font-size:12.8px;color:var(--on-dark-mute);line-height:1.7}
.badge-rd{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:3px;
  background:rgba(245,166,35,.13);border:1px solid rgba(245,166,35,.34);color:#F5A623;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.badge-rd .pulse{width:6px;height:6px;border-radius:50%;background:var(--amber);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}

.quote-box{border-left:2px solid var(--accent);padding:4px 0 4px 24px;margin:32px 0}
.quote-box p{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.5;color:var(--ink-900);
  letter-spacing:-.01em}
.section-dark .quote-box p{color:#fff}

.check-list li{display:flex;gap:13px;padding:11px 0;font-size:15px;color:var(--text-soft);line-height:1.6}
.check-list svg{flex:none;margin-top:4px;color:var(--accent)}
.section-dark .check-list li{color:var(--on-dark-soft)}

/* ---------- 21. Responsive ---------- */

/* --- Nav fit ------------------------------------------------------------
   .nav-inner is a nowrap flex row — brand / .menu / .nav-cta — so it needs a
   hard pixel budget. The container's content box is only
   min(1240px, viewport) - 15px scrollbar - 56px padding.

   Measured with all three blocks in play at 1024px:
       brand 234 (mark 44 + gap 13 + tagline 177)
     + 7 menu items                                       604
     + CTA button                                         168
     + 2 x 22px .nav-inner gap                             44
     = 1050px needed, against 953px available. The row spilled 69px past the
   right edge and body{overflow-x:hidden} silently clipped the right half of the
   "Get a Quote" button — on all 13 pages, since the nav is shared.

   Peeling it back one block at a time, each band verified to keep >=30px slack:
       >=1400px   everything            1214px    container capped at 1240
       1320-1399  compressed menu       1197px
       1151-1319  compressed, no phone  1050px
       1025-1150  tagline dropped        924px
       <=1024px   burger
   The phone block is the most expensive item in the row (it pushes .nav-cta
   from 168px to 315px) and the most redundant — .topbar already prints the same
   number at every viewport above 680px — so it goes first. */
@media (max-width:1399px){
  .menu > li > a{padding:10px 11px;font-size:13.5px}
}
@media (max-width:1319px){
  .nav-phone{display:none}
}
@media (max-width:1150px){
  /* 177px of .brand is .brand-sub ("Enclosure Sealing Solutions"). Dropping the
     tagline here is far cheaper than shaving every menu item, and the logo plus
     the wordmark still identify the brand. */
  .brand-sub{display:none}
  .nav-inner{gap:14px}
  .menu{gap:2px}
}
@media (max-width:1024px){
  /* Last resort for the nav: below this the row genuinely cannot hold 7 items,
     a wordmark and a CTA button. The topbar still carries the phone number and
     .mobile-menu carries its own "Get a Quote" button, so nothing is lost. */
  .menu,.nav-cta .btn{display:none}
  .burger{display:flex}

  .section{padding:80px 0}
  .split,.split-wide{grid-template-columns:1fr;gap:44px}
  .hero-inner{grid-template-columns:1fr;gap:44px;padding-bottom:64px}
  .hero-visual{width:100%;max-width:520px;margin:0 auto}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--paper-line)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+3){border-bottom:0}
  .hero-stats .container{grid-template-columns:repeat(2,1fr)}
  .hstat{padding:24px 20px}
  .hstat:nth-child(2n){border-right:0}
  .hstat:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
}
/* Content grids only. The nav swap that used to live here moved up to the
   1150px block above, because with 7 menu items the row no longer fits at
   1024px — the two concerns are unrelated and no longer share a breakpoint. */
@media (max-width:900px){
  .g-3{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .container{padding:0 20px}

  /* .btn is nowrap on desktop so a short label stays on one line. A long one
     ("View all products & specifications") then measured 404px on a 390px
     phone, which pushed the document wider than the screen — and dragged
     every position:fixed element along with it, because they size against
     that same widened viewport. Let the label wrap and cap the button at the
     column width instead. */
  .btn{white-space:normal;height:auto;min-height:48px;padding:12px 20px;max-width:100%}

  .section{padding:64px 0}
  .section-sm{padding:48px 0}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--paper-line)}
  .stat:last-child{border-bottom:0}
  .hero{padding-top:64px}
  .hero-stats .container{grid-template-columns:1fr}
  .hstat{border-right:0;border-bottom:1px solid var(--line-dark);padding:22px 0}
  .hstat:last-child{border-bottom:0}
  .topbar-left .topbar-item:last-child{display:none}
  .form-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:34px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .to-top{right:16px;bottom:16px}
  /* Wide tables keep their reading width and scroll inside .table-wrap.
     The min-width:0 pinning that makes this work is set globally, next to .grid. */
  table.spec{min-width:620px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 23. Editable background photo layer ----------
   Each dark band carries an empty <div class="c-bg" data-c-bg="key">.
   Nothing shows until the owner uploads a photo in the admin panel;
   content.js then sets both the image and data-set="1". The dark
   gradient baked into the background stack keeps headline contrast
   intact over any photo the owner chooses. */
.c-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  pointer-events:none;opacity:0;transition:opacity .6s ease;
}
.c-bg[data-set="1"]{opacity:1}
.hero .c-bg,.page-hero .c-bg{inset:0}
.page-hero .c-bg{opacity:0}
.page-hero .c-bg[data-set="1"]{opacity:.9}

/* ---------- 24. Right quick-action rail ----------
   Fixed vertical rail on the right edge — the "reach us right now"
   pattern used across industrial sites: quote / call / email / top.
   main.js injects the markup (see section 10 there) so the six pages
   never carry it twice and the four entries cannot drift apart.

   The call and email tiles reuse the site-wide data-c keys, which means
   content.js paints them like any other node: change the phone number
   once in the admin panel and the rail follows. If the cloud read fails
   the authored defaults below stay on screen. */
.qrail{
  position:fixed;right:0;top:50%;z-index:60;
  display:flex;flex-direction:column;
  background:var(--ink-850);
  border:1px solid var(--line-dark);border-right:0;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transform:translateY(-50%) translateX(100%);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s var(--ease);
}
.qrail.show{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}

.qrail-item{position:relative}
.qrail-item + .qrail-item{border-top:1px solid var(--line-dark)}

.qrail-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:62px;padding:12px 3px;margin:0;
  background:transparent;border:0;color:var(--on-dark-soft);
  font-family:var(--font-body);font-size:10px;font-weight:600;line-height:1.25;letter-spacing:.01em;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease);
}
.qrail-btn svg{display:block;width:19px;height:19px;flex:none}
.qrail-item:hover .qrail-btn,
.qrail-item:focus-within .qrail-btn{background:var(--accent);color:#fff}

/* Detail panel slides out to the left so a buyer can read or copy the
   number without leaving the page. pointer-events:none keeps it inert —
   the whole tile stays one big click target. */
.qrail-pop{
  position:absolute;right:100%;top:50%;
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:11px 15px;white-space:nowrap;pointer-events:none;
  background:var(--ink-900);border:1px solid var(--line-dark-2);border-right:0;
  opacity:0;visibility:hidden;
  transform:translateY(-50%) translateX(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease);
}
.qrail-item:hover .qrail-pop,
.qrail-item:focus-within .qrail-pop{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.qrail-pop em{
  font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-lite);
}
.qrail-pop b{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--on-dark)}

@media (max-width:1150px){
  .qrail-btn{width:56px;padding:11px 2px;gap:4px;font-size:9.5px}
  .qrail-btn svg{width:18px;height:18px}
}

/* Phones get a bottom action bar instead of a side rail: the rail would
   sit on top of the content column, and a bar along the bottom edge is
   where a thumb already is. The footer gains matching clearance so the
   bar never covers the last line of the page. */
@media (max-width:680px){
  .qrail{
    top:auto;bottom:0;left:0;right:0;width:100%;
    flex-direction:row;border:0;border-top:1px solid var(--line-dark-2);
    transform:translateY(100%);
  }
  .qrail.show{transform:translateY(0)}
  .qrail-item{flex:1 1 0}
  .qrail-item + .qrail-item{border-top:0;border-left:1px solid var(--line-dark)}
  .qrail-btn{width:auto;padding:9px 2px;gap:3px;font-size:9.5px}
  .qrail-btn svg{width:18px;height:18px}
  .qrail-pop{display:none}
  .footer{padding-bottom:58px}
}

/* ---------- Pressure equalisation calculator (vent plug size chart) ----------
   Inputs on the left, results on the right; on narrow screens the two stack.
   The result values are display type because they are the answer the visitor
   came for, and the hint line under each one says what the number assumes —
   the number is meaningless without it. */
.calc{
  display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;
  border:1px solid var(--paper-line);border-radius:var(--radius-lg);overflow:hidden;
}
.calc-inputs{display:grid;grid-template-columns:1fr;border-right:1px solid var(--paper-line);align-content:start}
.calc-field{display:flex;flex-direction:column;gap:9px;padding:18px 22px;border-bottom:1px solid var(--paper-line-2)}
.calc-field:last-child{border-bottom:0}
.calc-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.calc-input{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:8px 13px;transition:border-color .18s;
}
.calc-input:focus-within{border-color:var(--accent)}
.calc-input input{
  flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;
  font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink-900);
  -moz-appearance:textfield;
}
.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-input b{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-mute);flex:none}
.calc-out{padding:24px 26px;display:flex;flex-direction:column;justify-content:center;gap:17px}
.calc-row{display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:baseline}
.calc-row-k{font-size:13.6px;color:var(--text-soft)}
.calc-row-v{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink-900);white-space:nowrap}
.calc-row-v b{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-mute);margin-left:5px}
.calc-row-h{grid-column:1/-1;font-size:12.4px;line-height:1.55;color:var(--text-mute)}
.calc-warn{margin:0;font-size:14px;line-height:1.6;color:var(--accent-deep)}
.calc-verdict{margin:0;padding:14px 16px;border-radius:var(--radius);border-left:3px solid;font-size:13.6px;line-height:1.62}
.calc-verdict.is-ok{background:#EDF7F1;border-color:#1F8A5B;color:#14603F}
.calc-verdict.is-mid{background:var(--amber-soft);border-color:#C08215;color:#7A5209}
.calc-verdict.is-high{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.calc-foot{margin:0;font-size:12.4px;line-height:1.55;color:var(--text-mute)}
@media (max-width:900px){
  .calc{grid-template-columns:1fr}
  .calc-inputs{border-right:0;border-bottom:1px solid var(--paper-line)}
  .calc-out{padding:22px}
}

/* ---------- 13. Process photo strip ---------- */
.proc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proc-row.proc-strip{margin-top:52px}
.proc-figure{margin:0;background:#fff;border:1px solid var(--paper-line);overflow:hidden;
  transition:border-color .25s var(--ease)}
.proc-figure:hover{border-color:var(--text-soft)}
.proc-media{position:relative;overflow:hidden;background:var(--ink-900);border-bottom:1px solid var(--paper-line)}
.proc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)}
.proc-figure:hover .proc-media img{transform:scale(1.035)}
.proc-media.is-card{aspect-ratio:4/3}
.proc-media.is-wide{aspect-ratio:16/9}
.proc-cap{position:relative;padding:24px 26px 28px}
.proc-step{position:absolute;top:0;right:0;padding:12px 15px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;color:var(--text-mute)}
.proc-cap h3{font-size:17.5px;line-height:1.35;margin-bottom:9px;padding-right:44px}
.proc-cap p{font-size:14.4px;line-height:1.7;color:var(--text-soft);margin:0}
.proc-lede{margin-top:24px}
@media (max-width:1150px){
  .proc-row{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .proc-row{grid-template-columns:1fr}
}