@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');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --navy:    #17556f;
    --navy2:   #1f6a88;
    --blue:    #49a1ba;
    --yellow:  #ecc144;
    --amber:   #d3a52e;
    --white:   #ffffff;
    --offwhite:#f1f8fa;
    --mid:     #4a5568;
    --light:   #718096;
    --rule:    rgba(255,255,255,0.1);
    --max:     1100px;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Barlow', sans-serif;
    background: var(--white);
    color: var(--navy);
    font-size: 16px;
    line-height: 1.6;
  }

  /* ── UTILITY ── */
  .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
  .tag {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--yellow); margin-bottom: 12px;
  }
  .rule-y { width: 40px; height: 4px; background: var(--yellow); margin-bottom: 20px; }

  /* ── HAZARD STRIPE ── */
  .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);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    position: sticky; top: 0; z-index: 100;
  }
  .nav-brand {
    display: flex; align-items: center; gap: 14px;
  }
  .nav-logo {
    height: 42px; width: auto; display: block;
  }
  .nav-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--white); text-decoration: none;
  }
  .nav-name span { color: var(--yellow); }
  .nav-cta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--yellow); color: var(--navy);
    padding: 10px 22px; text-decoration: none;
    transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--amber); }

  /* ── HERO ── */
  .hero {
    background: var(--navy);
    padding: 72px 24px 64px;
    position: relative; overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(73,161,186,0.6) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-grid {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center;
    position: relative; z-index: 1;
  }
  .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: 0.15em;
    text-transform: uppercase; padding: 5px 12px;
    border: 2px solid var(--yellow); color: var(--yellow);
  }
  .hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(36px, 6vw, 62px);
    font-weight: 900; text-transform: uppercase;
    color: var(--white); line-height: 1.0;
    letter-spacing: 0.01em; margin-bottom: 20px;
  }
  .hero h1 em {
    font-style: normal; color: var(--yellow);
    display: block;
  }
  .hero-sub {
    font-size: clamp(14px, 2.5vw, 17px);
    color: rgba(255,255,255,0.65);
    line-height: 1.65; margin-bottom: 32px;
    max-width: 480px;
  }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-primary {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--yellow); color: var(--navy);
    padding: 14px 28px; text-decoration: none;
    transition: background 0.2s; display: inline-block;
  }
  .btn-primary:hover { background: var(--amber); }
  .btn-ghost {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    border: 2px solid rgba(255,255,255,0.3); color: var(--white);
    padding: 12px 26px; text-decoration: none;
    transition: border-color 0.2s; display: inline-block;
  }
  .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-radius: 2px;
    border: 3px solid rgba(236,193,68,0.25);
    background: #ffffff;
    padding: 20px;
  }
  .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: 0.15em;
    text-transform: uppercase; opacity: 0.7;
  }

  /* ── STATS BAR ── */
  .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,0.1);
  }
  .stat:last-child { border-right: none; }
  .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: 0.15em;
    text-transform: uppercase; color: rgba(23,85,111,0.65);
  }

  /* ── USP SECTION ── */
  .usp {
    background: var(--offwhite);
    padding: 72px 24px;
  }
  .usp-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 3px; margin-top: 36px;
  }
  .usp-card {
    background: var(--white);
    padding: 32px 28px;
    border-top: 4px solid var(--yellow);
  }
  .usp-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px; font-weight: 900; color: var(--yellow);
    line-height: 1; margin-bottom: 8px; opacity: 0.35;
  }
  .usp-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--navy);
    margin-bottom: 10px; line-height: 1.2;
  }
  .usp-desc {
    font-size: 14px; color: var(--mid); line-height: 1.65;
  }

  /* ── PRODUCT SHOWCASE ── */
  .products {
    background: var(--navy);
    padding: 72px 24px;
  }
  .products h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800; text-transform: uppercase;
    color: var(--white); margin-bottom: 8px; line-height: 1.05;
  }
  .product-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 16px; margin-top: 40px;
  }
  .product-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
  }
  .product-card img {
    width: 100%; aspect-ratio: 4/3;
    object-fit: contain; display: block;
    background: #ffffff;
    padding: 20px;
  }
  .product-card-body { padding: 20px; }
  .product-card-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.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;
  }

  /* ── WHO IS THIS FOR ── */
  .sectors {
    background: var(--white);
    padding: 72px 24px;
  }
  .sectors h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800; text-transform: uppercase;
    color: var(--navy); line-height: 1.05;
  }
  .sectors-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 40px; margin-top: 40px; align-items: start;
  }
  .sector-list { list-style: none; }
  .sector-list li {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--offwhite);
    font-size: 15px; color: var(--mid);
  }
  .sector-list li:first-child { border-top: 1px solid var(--offwhite); }
  .sector-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    background: var(--yellow); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
  }
  .sector-icon svg { width: 16px; height: 16px; }
  .sector-text strong { display: block; color: var(--navy); font-weight: 600; font-size: 15px; }
  .sector-text span { font-size: 13px; color: var(--light); }

  .problem-box {
    background: var(--navy);
    padding: 36px;
  }
  .problem-box h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 22px; font-weight: 700; text-transform: uppercase;
    color: var(--yellow); margin-bottom: 20px;
  }
  .problem-item {
    display: flex; gap: 12px; margin-bottom: 16px;
    font-size: 14px; color: rgba(255,255,255,0.7);
    align-items: flex-start; line-height: 1.55;
  }
  .problem-item::before {
    content: '→';
    color: var(--yellow); font-weight: 700;
    flex-shrink: 0; margin-top: 1px;
  }

  /* ── CERTIFICATIONS ── */
  .certs {
    background: var(--offwhite);
    padding: 64px 24px;
  }
  .certs-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 3px; margin-top: 36px;
  }
  .cert-card {
    background: var(--navy);
    padding: 32px 24px; text-align: center;
  }
  .cert-badge-large {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px; font-weight: 900; color: var(--yellow);
    letter-spacing: 0.05em; display: block; margin-bottom: 10px;
  }
  .cert-desc {
    font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.55;
  }

  /* ── WHY SPILLRITE ── */
  .why {
    background: var(--white);
    padding: 72px 24px;
  }
  .why-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center; margin-top: 40px;
  }
  .why h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800; text-transform: uppercase;
    color: var(--navy); line-height: 1.05;
  }
  .why-points { margin-top: 28px; }
  .why-point {
    display: flex; gap: 16px; margin-bottom: 22px;
    align-items: flex-start;
  }
  .why-point-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--yellow); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
  }
  .why-point-icon svg { width: 18px; height: 18px; }
  .why-point-text strong {
    display: block; font-weight: 600;
    color: var(--navy); font-size: 15px; margin-bottom: 3px;
  }
  .why-point-text span { font-size: 14px; color: var(--mid); line-height: 1.55; }
  .why-img {
    width: 100%; height: auto; display: block;
    border-radius: 2px; border: 3px solid var(--offwhite); background: #ffffff;
  }

  /* ── GEOGRAPHIC MARKETS ── */
  .markets {
    background: var(--navy2);
    padding: 48px 24px;
  }
  .markets-inner {
    max-width: var(--max); margin: 0 auto;
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 32px;
  }
  .markets h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 700; text-transform: uppercase;
    color: rgba(255,255,255,0.5); letter-spacing: 0.1em;
    flex-shrink: 0;
  }
  .market-flags { display: flex; gap: 8px; flex-wrap: wrap; }
  .market-flag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--navy);
    background: var(--yellow); padding: 6px 16px;
  }

  /* ── CUSTOM OPTION ── */
  .custom {
    background: var(--yellow);
    padding: 64px 24px; text-align: center;
  }
  .custom h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900; text-transform: uppercase;
    color: var(--navy); line-height: 1.05;
    margin-bottom: 16px;
  }
  .custom p {
    font-size: 17px; color: rgba(23,85,111,0.7);
    max-width: 580px; margin: 0 auto 32px;
    line-height: 1.65;
  }
  .btn-dark {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--navy); color: var(--white);
    padding: 14px 32px; text-decoration: none;
    display: inline-block; transition: background 0.2s;
  }
  .btn-dark:hover { background: var(--blue); }

  /* ── CONTACT ── */
  .contact {
    background: var(--navy);
    padding: 72px 24px;
  }
  .contact-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: start;
  }
  .contact h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800; text-transform: uppercase;
    color: var(--white); line-height: 1.05;
    margin-bottom: 12px;
  }
  .contact-intro {
    font-size: 15px; color: rgba(255,255,255,0.55);
    line-height: 1.65; margin-bottom: 32px;
  }
  .contact-item {
    display: flex; gap: 16px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--rule);
  }
  .contact-item-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--yellow); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
  }
  .contact-item-icon svg { width: 18px; height: 18px; }
  .contact-item-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.4);
    display: block; margin-bottom: 2px;
  }
  .contact-item a, .contact-item-val {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 600; color: var(--white);
    text-decoration: none; letter-spacing: 0.02em;
  }
  .contact-item a:hover { color: var(--yellow); }
  .sites-grid { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
  .site-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--rule);
    text-decoration: none; transition: border-color 0.2s;
  }
  .site-link:hover { border-color: rgba(236,193,68,0.4); }
  .site-link-flag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--navy);
    background: var(--yellow); padding: 3px 8px; flex-shrink: 0;
  }
  .site-link-url {
    font-size: 13px; color: rgba(255,255,255,0.5);
  }

  /* ── FOOTER ── */
  footer {
    background: #0f3d51;
    padding: 24px;
    text-align: center;
  }
  .footer-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.3);
    margin-bottom: 8px;
  }
  .footer-logo span { color: var(--yellow); }
  footer p { font-size: 11px; color: rgba(255,255,255,0.2); }
  .footer-links {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 6px 16px;
    margin: 8px 0;
  }
  .footer-links a {
    font-size: 11px; color: rgba(255,255,255,0.35);
    text-decoration: none;
  }
  .footer-links a:hover { color: rgba(255,255,255,0.7); }

  /* ── RESPONSIVE ── */
  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-img-wrap { display: none; }
    .stats-inner { grid-template-columns: repeat(2,1fr); }
    .usp-grid { grid-template-columns: 1fr 1fr; }
    .product-grid { grid-template-columns: 1fr 1fr; }
    .sectors-grid { grid-template-columns: 1fr; }
    .certs-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .stats-inner { grid-template-columns: 1fr 1fr; }
    .usp-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: 1fr; }
    nav { padding: 0 16px; }
  }

  /* ── NAV DROPDOWN ── */
  .nav-links { display: flex; align-items: stretch; }
  .nav-item { position: relative; display: flex; align-items: center; }
  .nav-item > a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.75);
    text-decoration: none; padding: 0 18px;
    display: flex; align-items: center; gap: 6px;
    height: 100%; transition: color 0.2s; white-space: nowrap;
  }
  .nav-item > a:hover { color: var(--yellow); }
  .nav-arrow { font-size: 9px; opacity: 0.55; transition: transform 0.2s; }
  .nav-item:hover .nav-arrow { transform: rotate(180deg); }
  .nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--navy); border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--yellow);
    min-width: 180px; z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .nav-item:hover .nav-dropdown { display: block; }
  .nav-dropdown a {
    display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255,255,255,0.65);
    text-decoration: none; padding: 11px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s, color 0.15s; white-space: nowrap;
  }
  .nav-dropdown a:last-child { border-bottom: none; }
  .nav-dropdown a:hover { background: rgba(236,193,68,0.08); color: var(--yellow); }
  @media (max-width: 700px) { .nav-links { display: none; } }

  /* ── CLICKABLE PRODUCT CARDS ── */
  a.product-card {
    text-decoration: none; display: block;
    transition: border-color 0.2s, transform 0.2s;
  }
  a.product-card:hover {
    border-color: rgba(236,193,68,0.5);
    transform: translateY(-3px);
  }
  .product-card-cta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--yellow);
    margin-top: 12px; display: inline-block;
  }

  /* ── BROWSE-ALL CTA ── */
  .browse-cta { text-align: center; margin-top: 44px; }
  .btn-browse {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--yellow); color: var(--navy);
    padding: 16px 36px; text-decoration: none;
    display: inline-block; transition: background 0.2s;
  }
  .btn-browse:hover { background: var(--amber); }

  /* ── PRODUCTS / RANGE PAGE ── */
  .range-head {
    background: var(--navy);
    padding: 64px 24px 56px;
    position: relative; overflow: hidden;
  }
  .range-head::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 75% 40%, rgba(73,161,186,0.55) 0%, transparent 70%);
    pointer-events: none;
  }
  .range-head-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
  .range-head h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(32px, 5.5vw, 54px); font-weight: 900;
    text-transform: uppercase; color: var(--white);
    line-height: 1.02; margin-bottom: 16px;
  }
  .range-head h1 em { font-style: normal; color: var(--yellow); }
  .range-head p {
    font-size: clamp(14px, 2.4vw, 17px); color: rgba(255,255,255,0.6);
    line-height: 1.65; max-width: 600px;
  }

  .filter-bar {
    background: var(--navy2);
    border-top: 1px solid var(--rule);
    border-bottom: 3px solid var(--yellow);
    padding: 16px 24px;
    position: sticky; top: 60px; z-index: 50;
  }
  .filter-inner {
    max-width: var(--max); margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .filter-chip {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--rule); cursor: pointer;
    padding: 9px 18px; transition: all 0.15s;
  }
  .filter-chip:hover { border-color: rgba(236,193,68,0.4); color: var(--white); }
  .filter-chip.active { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

  .range-section { background: var(--offwhite); padding: 56px 24px 72px; }
  .range-grid {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  }
  .range-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    display: flex; flex-direction: column;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .range-card:hover {
    border-color: rgba(236,193,68,0.6);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(23,85,111,0.10);
  }
  .range-card-img {
    width: 100%; aspect-ratio: 4/3; object-fit: contain;
    background: var(--white); padding: 24px; display: block;
    border-bottom: 1px solid var(--offwhite);
  }
  .range-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
  .range-card-cat {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--amber); margin-bottom: 6px;
  }
  .range-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 19px; font-weight: 700; text-transform: uppercase;
    color: var(--navy); line-height: 1.15; margin-bottom: 12px;
  }
  .range-spec { list-style: none; margin: 0 0 18px; }
  .range-spec li {
    font-size: 13px; color: var(--mid); padding: 5px 0;
    display: flex; gap: 8px; align-items: flex-start;
    border-bottom: 1px solid var(--offwhite);
  }
  .range-spec li::before { content: '✓'; color: var(--amber); font-weight: 700; flex-shrink: 0; }
  .range-card-foot { margin-top: auto; }
  .range-card-quote {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--navy);
    background: var(--yellow); padding: 12px 18px;
    text-decoration: none; display: block; text-align: center;
    transition: background 0.2s;
  }
  .range-card-quote:hover { background: var(--amber); }

  @media (max-width: 860px) { .range-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) {
    .range-grid { grid-template-columns: 1fr; }
    .filter-bar { position: static; }
  }

  /* ── CATEGORY (ENQUIRY CATALOGUE) CARDS ── */
  .cat-grid {
    max-width: var(--max); margin: 0 auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  }
  .cat-card {
    background: var(--white); border: 1px solid #e2e8f0;
    padding: 28px 26px; display: flex; flex-direction: column; min-width: 0;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .cat-card:hover {
    border-color: rgba(236,193,68,0.6); transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(23,85,111,0.10);
  }
  .cat-icon {
    width: 48px; height: 48px; background: var(--yellow); border-radius: 2px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  }
  .cat-icon svg { width: 24px; height: 24px; }
  .cat-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 700; text-transform: uppercase;
    color: var(--navy); line-height: 1.15; margin-bottom: 12px;
  }
  .cat-desc { font-size: 14px; color: var(--mid); line-height: 1.6; margin-bottom: 20px; }
  /* ── product gallery inside a category card: one main view plus up to
        three detail thumbs. Images are hosted on the Shopify CDN. ── */
  .cat-gallery { margin: -28px -26px 20px; max-width: none; }
  .cat-gallery-main {
    display: block; width: 100%; max-width: 100%; aspect-ratio: 4/3; object-fit: contain;
    background: var(--white); padding: 18px;
    border-bottom: 1px solid var(--offwhite);
  }
  .cat-thumbs {
    display: flex;                       /* white tail when there are under 3 */
    background: var(--white);
    border-top: 1px solid var(--offwhite);
  }
  .cat-thumbs img + img { border-left: 1px solid var(--offwhite); }
  .cat-thumbs img {
    flex: 0 0 33.3333%;                  /* always thumb-sized, 1, 2 or 3 of them */
    min-width: 0; max-width: 100%; display: block; aspect-ratio: 1/1; object-fit: contain;
    background: var(--white); padding: 8px;
  }
  .cat-card:has(.cat-gallery) { padding-top: 0; }
  .cat-card:has(.cat-gallery) .cat-card-name { padding-top: 4px; }

  /* spec list inside a category card - used on trolley-vacuums.html */
  .cat-spec {
    list-style: none; margin: 0 0 20px; padding: 0;
    border-top: 1px solid rgba(23,85,111,0.08);
  }
  .cat-spec li {
    font-size: 13px; color: var(--mid); line-height: 1.5;
    padding: 8px 0 8px 18px; position: relative;
    border-bottom: 1px solid rgba(23,85,111,0.06);
  }
  .cat-spec li::before {
    content: ""; position: absolute; left: 0; top: 14px;
    width: 7px; height: 2px; background: var(--yellow);
  }
  .cat-card-foot { margin-top: auto; }
  .cat-quote {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--navy); background: var(--yellow);
    padding: 11px 18px; text-decoration: none; display: inline-block;
    transition: background 0.2s;
  }
  .cat-quote:hover { background: var(--amber); }
  @media (max-width: 860px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

  /* ── QUOTE / ENQUIRY FORM ── */
  .quote-form { display: flex; flex-direction: column; gap: 16px; position: relative; }
  .qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .qf-field { display: flex; flex-direction: column; gap: 6px; }
  .qf-field label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
  }
  .qf-field input, .qf-field select, .qf-field textarea {
    font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--white);
    background: rgba(255,255,255,0.05); border: 1px solid var(--rule);
    padding: 12px 14px; border-radius: 2px; width: 100%;
    transition: border-color 0.2s;
  }
  .qf-field input::placeholder, .qf-field textarea::placeholder { color: rgba(255,255,255,0.3); }
  .qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus {
    outline: none; border-color: var(--yellow);
  }
  .qf-field select option { background: var(--navy); color: var(--white); }
  .qf-field textarea { resize: vertical; min-height: 120px; }
  .qf-submit {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; background: var(--yellow); color: var(--navy);
    border: none; padding: 16px 34px; cursor: pointer;
    transition: background 0.2s; align-self: flex-start;
  }
  .qf-submit:hover { background: var(--amber); }
  .qf-submit:disabled { opacity: 0.6; cursor: default; }
  .qf-hp { position: absolute; left: -9999px; top: 0; }
  .qf-msg { display: none; padding: 16px 18px; border-radius: 2px; font-size: 15px; line-height: 1.5; }
  .qf-msg.show { display: block; }
  .qf-msg.ok { background: rgba(236,193,68,0.12); border: 1px solid rgba(236,193,68,0.4); color: var(--yellow); }
  .qf-msg.err { background: rgba(226,75,74,0.14); border: 1px solid rgba(226,75,74,0.45); color: #ff9b9b; }
  @media (max-width: 560px) { .qf-row { grid-template-columns: 1fr; } }

  /* ── MENU v2 (Sep 2026): 10 categories, third-level flyout, wrap, mobile ── */
  nav { flex-wrap: wrap; row-gap: 0; }
  .nav-links { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-start; padding: 6px 0; }
  .nav-item { min-height: 40px; }
  .nav-item > a { padding: 0 12px; height: 40px; }
  .nav-sub { position: relative; }
  .nav-sub > a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .nav-flyout {
    display: none; position: absolute; top: -1px; left: 100%;
    background: var(--navy); border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--yellow);
    min-width: 200px; z-index: 210;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .nav-sub:hover > .nav-flyout, .nav-sub.open > .nav-flyout,
  .nav-item.open > .nav-dropdown { display: block; }
  .nav-flyout a { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav-toggle { display: none; }

  /* hamburger layout */
  @media (max-width: 900px) {
    nav { justify-content: space-between; }
    .nav-toggle {
      display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; margin-left: auto; padding: 0 10px;
      background: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; cursor: pointer;
    }
    .nav-toggle span { display: block; height: 2px; background: var(--yellow); }
    .nav-cta { margin-left: 12px; }
    .nav-links { display: none; flex-basis: 100%; order: 10; flex-direction: column; padding: 8px 0 12px;
      border-top: 1px solid rgba(255,255,255,0.1); margin-top: 6px; }
    nav.menu-open .nav-links { display: flex; }
    .nav-item { flex-direction: column; align-items: stretch; }
    .nav-item > a { padding: 0 6px; }
    .nav-dropdown, .nav-flyout { position: static; display: none; min-width: 0; border: 0;
      border-left: 3px solid var(--yellow); box-shadow: none; margin: 0 0 6px 12px; }
    .nav-item.open > .nav-dropdown, .nav-sub.open > .nav-flyout { display: block; }
    .nav-item:hover > .nav-dropdown, .nav-sub:hover > .nav-flyout { display: none; }
    .nav-item.open:hover > .nav-dropdown, .nav-sub.open:hover > .nav-flyout { display: block; }
  }
  @media (hover: none) and (min-width: 901px) {
    .nav-flyout { position: static; border: 0; border-left: 3px solid var(--yellow); box-shadow: none; margin-left: 10px; }
  }

  /* ── ARTICLE PAGES v2_2 (Sep 2026): category articles under Vacuums Industrial ── */
  .crumb {
    background: var(--navy2); border-bottom: 1px solid var(--rule);
    padding: 10px 24px; font-size: 13px;
  }
  .crumb-inner { max-width: var(--max); margin: 0 auto; color: rgba(255,255,255,0.4); }
  .crumb-inner a { color: rgba(255,255,255,0.65); text-decoration: none; }
  .crumb-inner a:hover { color: var(--yellow); }
  .crumb-sep { padding: 0 8px; color: rgba(255,255,255,0.2); }

  .art { padding: 56px 24px 8px; background: var(--white); }
  .art-wrap { max-width: 860px; margin: 0 auto; }
  .art-wrap > p { font-size: 17px; line-height: 1.75; color: var(--mid); margin-bottom: 18px; }
  .art-wrap > p.lead {
    font-size: clamp(17px, 2.6vw, 20px); line-height: 1.7; color: var(--navy);
    font-weight: 500; margin-bottom: 26px;
  }
  .art-wrap h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(24px, 4vw, 34px); font-weight: 800; text-transform: uppercase;
    color: var(--navy); line-height: 1.08; margin: 44px 0 6px;
  }
  .art-wrap h2 + .rule-y { margin-bottom: 18px; }
  .art-wrap h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--navy); margin: 28px 0 8px;
  }
  .art-wrap ul { list-style: none; margin: 8px 0 20px; }
  .art-wrap ul li {
    position: relative; padding-left: 22px; margin-bottom: 9px;
    font-size: 16px; line-height: 1.65; color: var(--mid);
  }
  .art-wrap ul li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 10px; height: 3px; background: var(--yellow);
  }
  .art-wrap ul li strong { color: var(--navy); }

  .art-fig { margin: 30px 0 34px; max-width: 600px; }
  .art-fig img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 640px;
    background: var(--offwhite); border: 1px solid rgba(23,85,111,0.1);
  }
  .art-fig figcaption {
    font-size: 13px; color: var(--light); line-height: 1.55;
    padding: 10px 2px 0; border-left: 3px solid var(--yellow); padding-left: 12px; margin-top: 12px;
  }
  .art-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0 34px; }
  .art-gallery figure { margin: 0; }
  .art-gallery img {
    display: block; width: 100%; max-width: 600px; height: 230px; object-fit: contain;
    background: var(--offwhite); border: 1px solid rgba(23,85,111,0.1); padding: 10px;
  }
  .art-gallery figcaption {
    font-size: 12px; color: var(--light); line-height: 1.5; margin-top: 8px;
    border-left: 3px solid var(--yellow); padding-left: 10px;
  }
  @media (max-width: 620px) { .art-gallery { grid-template-columns: 1fr; } }

  .art-specs { width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-size: 15px; }
  .art-specs caption {
    text-align: left; font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--navy); padding-bottom: 10px;
  }
  .art-specs th, .art-specs td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(23,85,111,0.1); }
  .art-specs th { width: 42%; color: var(--navy); font-weight: 600; background: var(--offwhite); }
  .art-specs td { color: var(--mid); }
  .art-specs-wrap { overflow-x: auto; }

  .art-note {
    background: rgba(236,193,68,0.1); border-left: 4px solid var(--yellow);
    padding: 20px 22px; margin: 28px 0;
  }
  .art-note strong { display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--navy); margin-bottom: 6px; }
  .art-note p { font-size: 15px; line-height: 1.7; color: var(--mid); margin: 0; }

  .art-related { background: var(--offwhite); padding: 44px 24px; border-top: 1px solid rgba(23,85,111,0.08); }
  .art-related-inner { max-width: 860px; margin: 0 auto; }
  .art-related h2 {
    font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800;
    text-transform: uppercase; color: var(--navy); margin-bottom: 14px;
  }
  .art-related-links { display: flex; flex-wrap: wrap; gap: 10px; }
  .art-related-links a {
    font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
    color: var(--navy); background: var(--white); border: 1px solid rgba(23,85,111,0.15);
    padding: 9px 16px; transition: all 0.18s;
  }
  .art-related-links a:hover { background: var(--navy); color: var(--yellow); border-color: var(--navy); }

  /* ── SITE SEARCH v2_3 (Sep 2026): under the menu, self-contained ── */
  .sitesearch {
    background: var(--navy2);
    border-bottom: 1px solid var(--rule);
    padding: 12px 24px;
    position: relative; z-index: 90;
  }
  .ss-inner { max-width: var(--max); margin: 0 auto; position: relative; }
  .ss-field {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--rule); border-radius: 2px;
    padding: 0 12px; transition: border-color 0.18s, background 0.18s;
  }
  .ss-field:focus-within { border-color: var(--yellow); background: rgba(255,255,255,0.09); }
  .ss-icon { width: 17px; height: 17px; flex: none; stroke: var(--yellow); fill: none; stroke-width: 2.2; }
  .ss-input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: none;
    font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--white);
    padding: 12px 0; appearance: none; -webkit-appearance: none;
  }
  .ss-input::placeholder { color: rgba(255,255,255,0.4); }
  .ss-input::-webkit-search-cancel-button { display: none; }
  .ss-clear {
    border: 0; background: none; cursor: pointer; padding: 4px 2px;
    font-size: 22px; line-height: 1; color: rgba(255,255,255,0.45);
  }
  .ss-clear:hover { color: var(--yellow); }

  .ss-panel {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120;
    background: var(--navy); border: 1px solid rgba(255,255,255,0.12);
    border-top: 3px solid var(--yellow);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
    max-height: 68vh; overflow-y: auto;
  }
  .ss-group + .ss-group { border-top: 1px solid rgba(255,255,255,0.08); }
  .ss-group-head {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--yellow); padding: 12px 16px 6px;
  }
  .ss-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .ss-row:last-child { border-bottom: 0; }
  .ss-row:hover, .ss-row.is-on { background: rgba(236,193,68,0.12); }
  .ss-thumb {
    width: 46px; height: 46px; flex: none; object-fit: contain;
    background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.12); padding: 3px;
  }
  .ss-mark { width: 4px; height: 26px; flex: none; background: var(--yellow); opacity: 0.85; }
  .ss-row-text { min-width: 0; }
  .ss-row-name {
    display: block; font-size: 15px; font-weight: 600; color: var(--white);
    line-height: 1.35; margin-bottom: 2px;
  }
  .ss-row-sub {
    display: block; font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ss-row mark { background: none; color: var(--yellow); font-weight: 700; }
  .ss-empty { padding: 18px 16px; font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; }
  .ss-empty strong { color: var(--white); }
  .ss-empty a { color: var(--yellow); }
  .ss-more {
    padding: 10px 16px; font-size: 12px; color: rgba(255,255,255,0.35);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  @media (max-width: 560px) {
    .sitesearch { padding: 10px 16px; }
    .ss-input { font-size: 16px; padding: 10px 0; }   /* 16px stops iOS zooming on focus */
    .ss-row-sub { white-space: normal; }
  }

  /* ── HOME HERO FIGURE + PARTS KEY v2_4 (Sep 2026) ── */
  .hero-figure { display: flex; gap: 18px; align-items: flex-start; margin: 0; }
  .hero-figure img {
    flex: 1 1 auto; min-width: 0; max-width: 350px;
    width: 100%; height: auto; display: block;
    border-radius: 2px; border: 3px solid rgba(236,193,68,0.25);
    background: #ffffff; padding: 10px;
  }
  .hero-legend { flex: 0 0 152px; padding-top: 4px; }
  .hero-legend-title {
    display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; font-weight: 800; line-height: 1.12;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--yellow); margin-bottom: 12px;
  }
  .hero-legend-list { list-style: none; counter-reset: part; margin: 0; padding: 0; }
  .hero-legend-list li {
    counter-increment: part; position: relative;
    padding-left: 26px; margin-bottom: 7px;
    font-size: 14px; line-height: 1.35; color: rgba(255,255,255,0.78);
  }
  .hero-legend-list li::before {
    content: counter(part) ".";
    position: absolute; left: 0; top: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; font-weight: 800; color: var(--yellow);
  }
  @media (max-width: 860px) {
    .hero-img-wrap { display: block; }            /* keep the diagram on phones */
    .hero-figure { flex-direction: column; gap: 18px; }
    .hero-figure img { max-width: 100%; }
    .hero-legend { flex: none; padding-top: 0; }
    .hero-legend-list { columns: 2; column-gap: 20px; }
    .hero-legend-list li { break-inside: avoid; }
  }

  /* ── QUOTE FORM: which page the enquiry came from (v2_4) ── */
  .qf-ref {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(236,193,68,0.1); border-left: 4px solid var(--yellow);
    padding: 12px 16px; margin-bottom: 4px;
  }
  .qf-ref-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--yellow);
  }
  .qf-ref-name { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.4; }
  .qf-ref-clear {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    font-family: 'Barlow', sans-serif; font-size: 13px;
    color: rgba(255,255,255,0.45); text-decoration: underline;
  }
  .qf-ref-clear:hover { color: var(--yellow); }

  /* ── HOME INTRO: the full range, above the hero (v2_4) ── */
  .intro {
    background: var(--offwhite);
    border-bottom: 1px solid rgba(23,85,111,0.08);
    padding: 56px 24px 60px;
  }
  .intro-inner { max-width: var(--max); margin: 0 auto; }
  .intro-h {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(28px, 5vw, 46px); font-weight: 900;
    text-transform: uppercase; color: var(--navy);
    line-height: 1.04; margin-bottom: 16px;
  }
  .intro-h em { font-style: normal; color: var(--amber); }
  .intro-lead {
    font-size: clamp(15px, 2.4vw, 18px); line-height: 1.7;
    color: var(--mid); max-width: 720px;
  }
  .intro-figure { margin: 32px 0 8px; }
  .intro-figure img {
    display: block; width: 100%; max-width: 900px; height: auto;
    border: 3px solid var(--yellow); background: var(--white);
  }
  .intro-figure figcaption {
    font-size: 13px; color: var(--light); line-height: 1.55;
    border-left: 3px solid var(--yellow); padding-left: 12px;
    margin-top: 12px; max-width: 720px;
  }
  .intro-cats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 32px;
  }
  .intro-cat {
    display: block; text-decoration: none;
    background: var(--white); border: 1px solid rgba(23,85,111,0.12);
    border-left: 3px solid var(--yellow);
    padding: 14px 16px; transition: background 0.18s, border-color 0.18s, transform 0.18s;
  }
  .intro-cat:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-2px); }
  .intro-cat-name {
    display: block; font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--navy); line-height: 1.2;
  }
  .intro-cat-desc {
    display: block; font-size: 13px; color: var(--light);
    line-height: 1.45; margin-top: 4px;
  }
  .intro-cat:hover .intro-cat-name { color: var(--yellow); }
  .intro-cat:hover .intro-cat-desc { color: rgba(255,255,255,0.6); }
  .intro-foot {
    font-size: 15px; color: var(--mid); line-height: 1.7; margin-top: 26px;
  }
  .intro-foot a { color: var(--navy); font-weight: 600; }
  .intro-foot a:hover { color: var(--amber); }
  @media (max-width: 900px) { .intro-cats { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .intro-cats { grid-template-columns: 1fr; } }

  /* ── The yellow eyebrow reads at 1.48:1 on the light sections. Navy on
        light, yellow stays on the dark ones. The rule-y under it keeps the
        yellow accent either way. ── */
  .intro .tag,
  .usp .tag,
  .sectors .tag,
  .certs .tag,
  .why .tag,
  .range-section .tag,
  .art .tag,
  .art-related .tag,
  .custom .tag { color: var(--navy); }

/* ==========================================================================
   PRODUCT PAGES  (/vacuums/*.html)
   Added v2_6. Until now the 41 product pages carried their own embedded copy
   of the site chrome and never loaded this stylesheet, so design changes here
   stopped at the category pages. They are now built on the same nav, footer
   and tokens as every other page; these are the only rules unique to them.
   ========================================================================== */

.crumbbar { border-bottom: 1px solid #e2e8f0; background: var(--white); }
nav.crumb {
  /* the site nav rule sets a navy sticky flex bar; none of that applies here */
  background: transparent; border-bottom: 0; position: static; z-index: auto;
  display: block; min-height: 0; align-items: normal; justify-content: normal;
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--light);
}
nav.crumb a { color: var(--mid); text-decoration: none; }
nav.crumb a:hover { color: var(--navy); }
nav.crumb span { color: var(--navy); }

.prod-section { background: var(--white); padding: 40px 24px 56px; }
.product {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start;
}
.product .hero { background: var(--offwhite); border: 1px solid #e2e8f0; padding: 20px; }
.product .hero img { width: 100%; height: auto; display: block; }
.product .hero .noimg {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  color: var(--light); font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px;
}
.product .info { min-width: 0; }
.product h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; text-transform: uppercase;
  color: var(--navy); line-height: 1.05; margin-bottom: 14px;
}
.product .rule-y { width: 40px; height: 4px; background: var(--yellow); margin-bottom: 18px; }
.sku {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--light);
  margin-bottom: 14px;
}
.lede { font-size: 16px; color: var(--mid); line-height: 1.6; margin-bottom: 22px; }
.price {
  font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 800;
  color: var(--navy); line-height: 1; margin-bottom: 22px;
}
.price small {
  font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--light); letter-spacing: 0.04em; margin-left: 6px;
}
.cta {
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
  background: var(--yellow); padding: 13px 22px; text-decoration: none;
  display: inline-block; transition: background 0.2s;
}
.cta:hover { background: var(--amber); }

.specwrap { margin-top: 30px; overflow-x: auto; }
table.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
table.specs th, table.specs td {
  text-align: left; padding: 11px 2px; border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
}
table.specs th {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--light);
  font-size: 13px; width: 45%;
}
table.specs td { color: var(--navy); font-weight: 600; }
table.specs tr:last-child th, table.specs tr:last-child td { border-bottom: 0; }

section.detail { background: var(--offwhite); padding: 52px 24px 64px; }
section.detail > .container { max-width: var(--max); margin: 0 auto; }
section.detail h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(22px, 3vw, 30px); font-weight: 800; text-transform: uppercase;
  color: var(--navy); line-height: 1.1; margin-bottom: 18px;
}
section.detail p { font-size: 16px; color: var(--mid); line-height: 1.7; max-width: 80ch; }

/* product listing at /vacuums/ */
.prod-grid {
  max-width: var(--max); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px;
}
.prod-card {
  background: var(--white); border: 1px solid #e2e8f0; text-decoration: none;
  display: flex; flex-direction: column; min-width: 0;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.prod-card:hover {
  border-color: var(--yellow); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23,85,111,0.08);
}
/* height:auto is required — the img height attribute is a presentational
   hint that otherwise wins over aspect-ratio and stretches the card */
.prod-card img {
  width: 100%; height: auto; aspect-ratio: 4/3;
  object-fit: cover; display: block; background: var(--offwhite);
}
.prod-card .cardbody { padding: 20px 20px 24px; }
.prod-card h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  text-transform: uppercase; color: var(--navy); line-height: 1.2; margin-bottom: 9px;
}
.prod-card p { font-size: 13.5px; color: var(--mid); line-height: 1.55; }

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; gap: 28px; }
  .prod-section { padding: 28px 16px 40px; }
  section.detail { padding: 40px 16px 48px; }
  nav.crumb { padding: 12px 16px; }
}


/* ── ELECTRIC RANGE (v1_2): Depureco product pages + grouped listing ── */
.product .hero.hero-dark { background: #000810; border-color: #000810; padding: 0; }
.product .hero.hero-dark::before, .product .hero.hero-dark::after { display: none; }
.elec-group { padding-top: 8px; scroll-margin-top: 90px; }
#drum-vac { scroll-margin-top: 90px; }
.elec-head { max-width: var(--max); margin: 0 auto 24px; }
.elec-head h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(22px, 3vw, 30px);
  font-weight: 800; text-transform: uppercase; color: var(--navy); line-height: 1.1;
  padding-top: 18px; border-top: 4px solid var(--yellow); display: inline-block; margin-bottom: 10px;
}
.elec-head p { font-size: 15px; color: var(--mid); max-width: 75ch; }
.elec-jump { max-width: var(--max); margin: 0 auto 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.elec-jump a {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--navy); background: var(--white); border: 1px solid #d5dde0; padding: 8px 14px;
}
.elec-jump a:hover { border-color: var(--yellow); }
.elec-group .prod-card img { background: #000810; object-fit: contain; }
section.detail h2 + p, section.detail p + p { margin-top: 0; }
section.detail p { margin-bottom: 16px; }
section.detail h2:not(:first-child) { margin-top: 36px; }
.featlist { list-style: none; margin: 0 0 8px; padding: 0; max-width: 80ch; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.featlist li {
  font-size: 15px; color: var(--mid); line-height: 1.5; padding: 10px 0 10px 20px;
  position: relative; border-bottom: 1px solid rgba(23,85,111,0.08);
}
.featlist li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 3px; background: var(--yellow); }
.featfig { margin: 36px 0 0; max-width: 980px; }
.featfig img { width: 100%; height: auto; display: block; }
.featfig figcaption { font-size: 12.5px; color: var(--light); margin-top: 8px; }
.variantwrap { overflow-x: auto; margin-bottom: 8px; }
table.variants { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--white); min-width: 620px; }
table.variants th, table.variants td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
table.variants thead th {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 12.5px; color: var(--white); background: var(--navy);
}
table.variants tbody th { color: var(--navy); font-weight: 700; }
table.variants td { color: var(--mid); }
.prodnote { font-size: 14px !important; color: var(--light) !important; border-left: 3px solid var(--yellow); padding-left: 14px; margin-top: 32px; }
@media (max-width: 700px) { .featlist { grid-template-columns: 1fr; } }