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

/* Spillrite Vacuums — design system carried over from Spillrite Industrial.
   Every page-level rule lives here; pages carry no <style> block, so the
   browser caches one sheet across all 500 pages. */

:root {
  --navy:    #0a1628;
  --navy2:   #0e1f3d;
  --blue:    #1a3a6b;
  --yellow:  #f5c800;
  --amber:   #d4a800;
  --white:   #ffffff;
  --offwhite:#f4f6fa;
  --mid:     #4a5568;
  --light:   #718096;
  --line:    #e5e9f0;
  --rule:    rgba(255,255,255,0.1);
  --sky:     #4da3d8;   /* the blue in the logo — marks the electric range */
  --max:     1100px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--offwhite); color: var(--navy);
  font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.6;
}
img { max-width: 100%; height: auto; }

.hazard-stripe {
  height: 16px;
  background: repeating-linear-gradient(-45deg,
    var(--yellow) 0px, var(--yellow) 12px,
    var(--navy)   12px, var(--navy)   24px);
}

/* ---------------------------------------------------------------- nav */
nav {
  background: var(--navy); border-bottom: 3px solid var(--yellow);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 24px; min-height: 60px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
}
.nav-brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.nav-logo { height: 42px; width: auto; display: block; }
.nav-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--white);
  text-decoration: none;
}
.nav-name span { color: var(--yellow); }
.nav-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.nav-item { position: relative; }
.nav-item > a {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.82); text-decoration: none; white-space: nowrap;
}
.nav-item > a:hover { color: var(--yellow); }
.nav-arrow { font-size: 10px; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 40;
  background: var(--navy2); border: 1px solid var(--rule); min-width: 240px;
  padding: 6px 0;
}
.nav-item:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block; padding: 9px 16px; font-size: 14px;
  color: rgba(255,255,255,.75); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.nav-dropdown a:last-child { border-bottom: 0; }
.nav-dropdown a:hover { color: var(--yellow); background: rgba(255,255,255,.04); }
.nav-cta {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--yellow); color: var(--navy);
  padding: 11px 20px; text-decoration: none; transition: background .2s;
}
.nav-cta:hover { background: var(--amber); }

/* --------------------------------------------------------- breadcrumb */
.crumb-bar {
  background: var(--navy2); border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 11px 24px;
}
.crumb-inner {
  max-width: var(--max); margin: 0 auto;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.crumb-inner a { color: rgba(255,255,255,.6); text-decoration: none; }
.crumb-inner a:hover { color: var(--yellow); }
.crumb-inner .sep { color: rgba(255,255,255,.25); margin: 0 9px; }
.crumb-inner .current { color: var(--yellow); }

/* ----------------------------------------------------- product detail */
.pd-wrap { max-width: var(--max); margin: 0 auto; padding: 48px 24px 0; }
.pd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.pd-main { background: var(--white); border: 1px solid var(--line); padding: 28px; }
.pd-main img { width: 100%; display: block; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb {
  background: #fff; border: 1px solid var(--line); padding: 6px; cursor: pointer;
  width: 72px; height: 72px; flex: 0 0 auto; transition: border-color .15s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-thumb:hover { border-color: #5B6470; }
.pd-thumb.active { border: 2px solid var(--yellow); padding: 5px; }
.pd-eyebrow {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.pd-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(28px, 4.5vw, 40px); line-height: 1.05; text-transform: uppercase;
  color: var(--navy); margin: 10px 0 18px;
}
.pd-cert { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.pd-cert span {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--yellow);
  color: var(--navy); padding: 6px 12px;
}
.pd-cta {
  display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 15px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--yellow); color: var(--navy); padding: 14px 28px;
  text-decoration: none; margin-top: 14px; transition: background .2s;
}
.pd-cta:hover { background: var(--amber); }

/* legacy body copy, restyled — the source HTML keeps its own structure */
.pd-body { max-width: 800px; margin: 56px auto 0; }
.pd-body h1, .pd-body h2, .pd-body h3 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  text-transform: uppercase; color: var(--navy); line-height: 1.15;
  margin: 36px 0 10px;
}
.pd-body h1 { font-size: 28px; } .pd-body h2 { font-size: 24px; } .pd-body h3 { font-size: 20px; }
.pd-body p { font-size: 16px; line-height: 1.75; color: var(--mid); margin: 0 0 16px; }
.pd-body a { color: var(--blue); }
.pd-body img { display: block; margin: 22px auto; border: 1px solid var(--line); background: #fff; }
.pd-body ul, .pd-body ol { color: var(--mid); padding-left: 22px; margin: 0 0 18px; }
.pd-body li { margin-bottom: 7px; }
.pd-body table {
  width: 100%; border-collapse: collapse; margin: 22px 0; background: #fff;
  border: 1px solid var(--line);
}
.pd-body td, .pd-body th {
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  font-size: 15px; vertical-align: top; text-align: left; color: var(--mid);
}
.pd-body th { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  color: var(--navy); font-weight: 700; letter-spacing: .04em; }
/* legacy tables were used for two-column layout — let them reflow on mobile */
.pd-body table ul { list-style: none; padding-left: 0; }

.pd-specs { max-width: 800px; margin: 48px auto 0; border-top: 3px solid var(--yellow); }
.pd-specs h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px;
  text-transform: uppercase; color: var(--navy); margin: 20px 0 12px;
}
.pd-specs table { width: 100%; border-collapse: collapse; }
.pd-specs td { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.pd-specs td:first-child {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--navy); width: 200px;
}
.pd-specs td:last-child { color: var(--mid); }

.pd-band { background: var(--navy); margin-top: 64px; padding: 48px 24px; text-align: center; }
.pd-band h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(22px, 4vw, 32px); text-transform: uppercase; color: var(--white);
  line-height: 1.1; margin: 0 0 8px;
}
.pd-band p { color: rgba(255,255,255,.55); font-size: 15px; margin-bottom: 22px; }

/* ------------------------------------------------------------- footer */
footer { background: var(--navy2); padding: 40px 24px; text-align: center; color: rgba(255,255,255,.4); font-size: 13px; }
.footer-logo {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--white); margin-bottom: 12px;
}
.footer-logo span { color: var(--yellow); }
.footer-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,.55); text-decoration: none; font-size: 13px; }
.footer-links a:hover { color: var(--yellow); }

@media (max-width: 860px) {
  .pd-hero { grid-template-columns: 1fr; gap: 28px; }
  nav { gap: 14px; }
  .nav-links { gap: 14px; order: 3; width: 100%; }
  .pd-specs td:first-child { width: 130px; }
  .pd-body table, .pd-body tbody, .pd-body tr, .pd-body td { display: block; width: 100%; }
}

/* ------------------------------------------------------- listing pages */
.range-head { background: var(--navy2); padding: 54px 24px 46px; }
.range-head-inner { max-width: var(--max); margin: 0 auto; }
.range-head h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.05; text-transform: uppercase;
  color: var(--white); margin: 0 0 10px;
}
.range-head h1 em { color: var(--yellow); font-style: italic; }
.range-head p { color: rgba(255,255,255,.6); font-size: 16px; max-width: 640px; margin: 0; }
.rule-y { width: 54px; height: 4px; background: var(--yellow); margin-bottom: 18px; }

.products { background: var(--navy); padding: 64px 24px; }
.container { max-width: var(--max); margin: 0 auto; }
.products h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(24px, 4vw, 34px);
  font-weight: 800; text-transform: uppercase; color: var(--white);
  margin: 0 0 8px; line-height: 1.05;
}
.products .count { color: rgba(255,255,255,.45); font-size: 14px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
a.product-card { text-decoration: none; display: block; transition: border-color .2s, transform .2s; }
a.product-card:hover { border-color: rgba(245,200,0,.5); transform: translateY(-3px); }
.product-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.product-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block; background: #fff; padding: 20px; }
.product-card-body { padding: 20px; }
.product-card-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--yellow);
  margin-bottom: 6px; display: block;
}
.product-card-name {
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  text-transform: uppercase; color: var(--white); line-height: 1.2;
}
.product-card-cta {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--yellow);
  margin-top: 12px; display: inline-block;
}
.range-intro { max-width: 800px; margin: 44px auto 0; padding: 0 24px; }
.range-intro p { color: var(--mid); line-height: 1.75; }
.browse-cta { text-align: center; margin-top: 40px; }
.btn-browse {
  font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: var(--yellow);
  color: var(--navy); padding: 16px 36px; text-decoration: none; display: inline-block;
  transition: background .2s;
}
.btn-browse:hover { background: var(--amber); }
@media (max-width: 900px) { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ home page */
.hero { background: var(--navy); padding: 72px 24px; position: relative; }
.hero-grid { max-width: var(--max); margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* two ranges, side by side; they stack air-first on narrow screens */
.hero-head { max-width: var(--max); margin: 0 auto 34px; }
.hero-head h1 { margin-bottom: 10px; }
.hero-head p { color: rgba(255,255,255,.65); font-size: 16px; max-width: 720px; margin: 0; }
.hero-split { max-width: var(--max); margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
.hero-half { padding: 34px 30px 30px; display: flex; flex-direction: column; }
.hero-half + .hero-half { border-left: 1px solid var(--rule); }
.hero-half-air { border-top: 4px solid var(--yellow); }
.hero-half-elec { border-top: 4px solid var(--sky); }
.half-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.hero-half-air .half-eyebrow { color: var(--yellow); }
.hero-half-elec .half-eyebrow { color: var(--sky); }
.hero-half h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.05; text-transform: uppercase;
  color: var(--white); margin: 0 0 14px; }
.hero-half p { color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
.half-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.half-pills span { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: 4px 10px; border: 2px solid; }
.hero-half-air .half-pills span { border-color: var(--yellow); color: var(--yellow); }
.hero-half-elec .half-pills span { border-color: var(--sky); color: var(--sky); }
.half-img { margin: 4px 0 18px; background: #fff; padding: 16px; }
.half-img img { width: 100%; height: auto; display: block; }
.half-cta { margin-top: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 14px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 13px 24px;
  text-decoration: none; display: inline-block; text-align: center; transition: background .2s; }
.hero-half-air .half-cta { background: var(--yellow); color: var(--navy); }
.hero-half-air .half-cta:hover { background: var(--amber); }
.hero-half-elec .half-cta { background: var(--sky); color: var(--navy); }
.hero-half-elec .half-cta:hover { background: #3d8dbf; }
.hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(36px, 6vw, 62px); line-height: 1.0; letter-spacing: .01em;
  text-transform: uppercase; color: var(--white); margin: 0 0 20px; }
.hero h1 em { color: var(--yellow); font-style: normal; display: block; }
.hero-certbadge { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.cert { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: 5px 12px;
  border: 2px solid var(--yellow); color: var(--yellow); }
.hero-img-badge { position: absolute; bottom: -16px; right: -16px;
  background: var(--yellow); color: var(--navy); padding: 14px 18px; text-align: center; }
.hero-img-badge strong { font-family: 'Barlow Condensed', sans-serif; font-size: 26px;
  font-weight: 900; display: block; line-height: 1; }
.hero-img-badge span { font-family: 'Barlow Condensed', sans-serif; font-size: 10px;
  font-weight: 700; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.hero-sub { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.65; max-width: 520px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn-primary, .btn-ghost { font-family: 'Barlow Condensed', sans-serif; font-size: 15px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 15px 30px; text-decoration: none; display: inline-block; transition: all .2s; }
.btn-primary { background: var(--yellow); color: var(--navy); }
.btn-primary:hover { background: var(--amber); }
.btn-ghost { border: 2px solid rgba(255,255,255,.25); color: var(--white); }
.btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }
.hero-img-wrap { position: relative; }
.hero-img-wrap img { width: 100%; height: auto; display: block;
  border: 3px solid rgba(245,200,0,.25); background: #fff; padding: 20px; }
.stats-bar { background: var(--yellow); padding: 0; }
.stats-inner { max-width: var(--max); margin: 0 auto; display: grid;
  grid-template-columns: repeat(4, 1fr); }
.stat { padding: 20px 16px; text-align: center; border-right: 1px solid rgba(0,0,0,.1); }
.stat:last-child { border-right: 0; }
.stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 900;
  color: var(--navy); line-height: 1; display: block; margin-bottom: 3px; }
.stat-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(10,22,40,.65); }
.usp { padding: 66px 24px; }
.usp-grid { max-width: var(--max); margin: 30px auto 0; display: grid;
  grid-template-columns: repeat(3,1fr); gap: 26px; }
.usp-card { background: #fff; border: 1px solid var(--line); padding: 26px; }
.usp-num { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: .18em; color: var(--amber); }
.usp-title { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800;
  text-transform: uppercase; color: var(--navy); margin: 8px 0 8px; }
.usp-desc { color: var(--mid); font-size: 15px; line-height: 1.7; }
.sec-head { max-width: var(--max); margin: 0 auto; }
.sec-head h2 { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(26px,4.4vw,38px);
  font-weight: 800; text-transform: uppercase; color: var(--navy); margin: 0 0 6px; }
.sec-head p { color: var(--mid); margin: 0; }
.cat-grid { max-width: var(--max); margin: 32px auto 0; display: grid;
  grid-template-columns: repeat(3,1fr); gap: 16px; }
.cat-card { background: #fff; border: 1px solid var(--line); padding: 24px;
  text-decoration: none; display: block; transition: border-color .2s, transform .2s; }
.cat-card:hover { border-color: var(--yellow); transform: translateY(-3px); }
.cat-card-name { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800;
  text-transform: uppercase; color: var(--navy); }
.cat-desc { color: var(--mid); font-size: 14px; line-height: 1.65; margin-top: 8px; }
.cat-card-foot { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin-top: 14px; display: block; }
.sites-grid { max-width: var(--max); margin: 26px auto 0; display: flex; gap: 12px; flex-wrap: wrap; }
.site-link { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line);
  background: #fff; color: var(--navy); padding: 10px 18px; text-decoration: none; }
.site-link:hover { border-color: var(--yellow); }

/* -------------------------------------------------------------- contact */
.contact-wrap { max-width: 900px; margin: 0 auto; padding: 52px 24px 0; }
.contact-lead { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 34px; }
.contact-item-icon { font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.contact-item-val { font-family: 'Barlow Condensed', sans-serif; font-size: 24px;
  font-weight: 800; color: var(--navy); text-decoration: none; display: block; margin-top: 3px; }
.contact-item-val:hover { color: var(--blue); }
.quote-form { background: #fff; border: 1px solid var(--line); padding: 30px; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qf-field { margin-bottom: 16px; }
.qf-field label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.qf-field input, .qf-field select, .qf-field textarea { width: 100%; padding: 11px 13px;
  border: 1px solid #cfd6e0; font-family: 'Barlow', sans-serif; font-size: 15px;
  color: var(--navy); background: #fff; }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus {
  outline: none; border-color: var(--yellow); }
.qf-field textarea { min-height: 120px; resize: vertical; }
.qf-hp { position: absolute; left: -9999px; }
.qf-submit { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: var(--yellow);
  color: var(--navy); border: 0; padding: 15px 34px; cursor: pointer; transition: background .2s; }
.qf-submit:hover { background: var(--amber); }
.qf-submit:disabled { opacity: .55; cursor: default; }
.qf-msg { display: none; margin-top: 14px; padding: 12px 14px; font-size: 14px; }
.qf-msg.show { display: block; }
.qf-msg.ok { background: #e8f6ec; color: #1d6b32; border: 1px solid #b7e0c2; }
.qf-msg.err { background: #fdecec; color: #96231f; border: 1px solid #f2bfbd; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-half + .hero-half { border-left: 0; border-top: 4px solid var(--sky); }
  .hero-img-wrap { display: none; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .usp-grid, .cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .usp-grid, .cat-grid, .qf-row { grid-template-columns: 1fr; }
}

/* ============================================================ product body
   Components for transcribed product copy. Everything that used to live as
   text baked into a JPEG belongs in here, as real text. */

.ps-lead { font-size: 18px !important; line-height: 1.7 !important; color: var(--navy) !important; }

.ps-key {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 30px 0;
}
.ps-key > div { background: #fff; padding: 13px 16px; }
.ps-key .k {
  display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--light); font-weight: 600; margin-bottom: 3px;
}
.ps-key .v {
  font-family: 'Barlow Condensed', sans-serif; font-size: 23px; font-weight: 700;
  color: var(--navy); line-height: 1.1;
}
.ps-key .v small { font-size: 13px; font-weight: 600; color: var(--mid); }

.ps-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin: 28px 0;
}
.ps-feature { border: 1px solid var(--line); background: #fff; }
.ps-feature img { width: 100%; display: block; margin: 0 !important; border: 0 !important;
  border-bottom: 1px solid var(--line) !important; }
.ps-feature .t {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
  color: var(--navy); font-size: 16px; letter-spacing: .03em; padding: 12px 14px 13px;
}

.ps-warn {
  border: 1px solid #e8d48a; border-left: 4px solid var(--amber); background: #fffbea;
  padding: 15px 18px; margin: 26px 0;
}
.ps-warn > strong:first-child {
  display: block; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .06em; color: #8a6d00; font-size: 15px; margin-bottom: 4px;
}
.ps-warn p { margin: 0 !important; font-size: 15px !important; }

.ps-pills { margin: 0 0 22px; }
.ps-pills span {
  display: inline-block; border: 1px solid var(--line); background: #fff;
  padding: 5px 11px; margin: 0 6px 6px 0; font-size: 13.5px; color: var(--mid);
}

.ps-includes { columns: 2; column-gap: 34px; padding-left: 20px !important; }
.ps-includes li { break-inside: avoid; }

.ps-figure { margin: 26px 0; }
.ps-figure img { margin: 0 auto 9px !important; }
.ps-figure figcaption {
  font-size: 13.5px; color: var(--light); text-align: center; line-height: 1.5;
}

@media (max-width: 700px) {
  .ps-includes { columns: 1; }
  .ps-key { grid-template-columns: repeat(2, 1fr); }
  .ps-key .v { font-size: 20px; }
}

/* long unbroken legacy strings must never widen the page */
.pd-body, .pd-body p, .pd-body li, .crumb-inner { overflow-wrap: anywhere; }
.crumb-inner { display: flex; flex-wrap: wrap; align-items: center; row-gap: 3px; }

/* Line 197 stacks every table on mobile — a workaround for legacy Joomla layout
   tables. Real data tables opt out and scroll sideways instead. */
.pd-body .ps-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }
.pd-body .ps-scroll table.ps-table { margin: 0; min-width: 340px; }
@media (max-width: 860px) {
  .pd-body table.ps-table { display: table !important; width: 100% !important; }
  .pd-body table.ps-table tbody { display: table-row-group !important; width: auto !important; }
  .pd-body table.ps-table tr { display: table-row !important; width: auto !important; }
  .pd-body table.ps-table td,
  .pd-body table.ps-table th { display: table-cell !important; width: auto !important;
    white-space: nowrap; padding: 10px 12px; }
}

/* ------------------------------------------------- section index & sitemap
   Joomla's menus linked every page automatically; the rebuilt nav does not,
   so these two components carry the internal links instead. */
.section-index { max-width: 800px; margin: 44px auto 0; padding: 0 24px 8px; }
.section-index h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--navy);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--yellow);
}
.section-index ul { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }
.section-index li { border-bottom: 1px solid var(--line); }
.section-index a { display: block; padding: 10px 2px; color: var(--blue);
  text-decoration: none; font-size: 15px; }
.section-index a:hover { color: var(--navy); background: var(--offwhite); }

.site-index { max-width: var(--max); margin: 0 auto; padding: 40px 24px 72px; }
.site-index section { margin: 0 0 34px; }
.site-index h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--navy);
  margin: 0 0 12px; padding-bottom: 9px; border-bottom: 2px solid var(--yellow);
}
.site-index h2 span { font-size: 13px; color: var(--light); font-weight: 700; margin-left: 6px; }
.site-index ul { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 30px; }
.site-index li { border-bottom: 1px solid var(--line); }
.site-index a { display: block; padding: 9px 2px; color: var(--blue);
  text-decoration: none; font-size: 14.5px; }
.site-index a:hover { color: var(--navy); background: var(--offwhite); }

/* ------------------------------------------------------------ side menu
   Rebuilt from the Joomla menu-sidemenu module recovered from the archive:
   22 sections, 95 entries, three levels. Collapsed by default; the branch
   containing the current page is opened at build time, so it is correct
   before any script runs. */
.layout {
  display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 40px;
  max-width: var(--max); margin: 0 auto; padding: 0 24px; align-items: start;
}
.layout-main { min-width: 0; }
.layout-main .pd-wrap { max-width: none; padding-left: 0; padding-right: 0; }
.layout-main .pd-body { margin-top: 40px; }
.layout-main .container, .layout-main .range-intro { padding-left: 0; padding-right: 0; }

.layout-side { position: sticky; top: 18px; padding: 34px 0 0; }
.sidenav-wrap > summary { display: none; }
.sidenav { border: 1px solid var(--line); background: var(--white); font-size: 14px; }
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav > ul > li { border-bottom: 1px solid var(--line); }
.sidenav > ul > li:last-child { border-bottom: 0; }

.sidenav .row { display: flex; align-items: stretch; }
.sidenav a, .sidenav .grp { display: block; flex: 1; padding: 9px 14px; text-decoration: none; }
.sidenav > ul > li > .row > a,
.sidenav > ul > li > .row > .grp {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy);
}
.sidenav .grp { color: var(--light); }
.sidenav a { color: var(--mid); }
.sidenav .row:hover { background: var(--offwhite); }
.sidenav a:hover { color: var(--navy); }

/* the disclosure control */
.sidenav .tog {
  flex: none; width: 34px; border: 0; border-left: 1px solid var(--line);
  background: transparent; cursor: pointer; position: relative; padding: 0;
}
.sidenav .tog::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--light); border-bottom: 2px solid var(--light);
  transform: translate(-50%, -70%) rotate(45deg); transition: transform .18s ease;
}
.sidenav .tog:hover::before { border-color: var(--navy); }
.sidenav .tog[aria-expanded="true"]::before { transform: translate(-50%, -20%) rotate(-135deg); }
.sidenav .tog:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }

/* children are hidden until their branch is open */
.sidenav li > ul { display: none; border-top: 1px solid var(--line); background: var(--offwhite); }
.sidenav li.open > ul { display: block; }
.sidenav ul ul a { padding-left: 26px; font-size: 13.5px; }
.sidenav ul ul ul a { padding-left: 38px; font-size: 13px; color: var(--light); }

.sidenav a[aria-current="page"] {
  background: var(--yellow); color: var(--navy); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--navy);
}
.sidenav a[aria-current="page"]:hover { background: var(--yellow); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .layout-side { position: static; padding: 22px 0 0; }
  .sidenav-wrap > summary {
    display: block; cursor: pointer; list-style: none;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
    background: var(--yellow); padding: 12px 16px; border: 1px solid var(--amber);
  }
  .sidenav-wrap > summary::-webkit-details-marker { display: none; }
  .sidenav-wrap > summary::after { content: " \25BE"; }
  .sidenav-wrap[open] > summary::after { content: " \25B4"; }
  .sidenav { border-top: 0; max-height: 65vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .sidenav .tog::before { transition: none; } }