/* ════════════════════════════════════════════════════════════════
   NOVA TRADING — HOMEPAGE STYLESHEET
   Loaded only on index.html, after base.css.

   ⚠️ HEADS UP, READ BEFORE EDITING COLORS/FONTS HERE:
   This file is the original homepage CSS, kept EXACTLY as it was
   so the page keeps rendering pixel-for-pixel the same. It is split
   into three parts in this exact order, separated below:
     1) HOME SECTIONS — hero, catalog, gallery, contact, cart, modal etc.
     2) REFINEMENT LAYER — a later pass that tweaked spacing/animation.
     3) FINAL LOOK OVERRIDE — a later redesign pass that overrides the
        colors/fonts from parts 1 & 2 into the grey/minimal look your
        homepage actually shows today (this is why the homepage looks
        different from your other 12 pages — see chat for details).
   Because part 3 overrides parts 1 & 2, edit colors/fonts THERE, not
   in part 1, or your change will appear to silently "not work".
   ════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1) HOME SECTIONS ───────────────────────── */


    /* ── HERO ────────────────────────────────────────────── */

    /* ── NEW HERO v2 STYLES ──────────────────────────────── */

    /* Premium headline */
    .hero-title-v2 {
      font-family: 'Fraunces', serif;
      font-size: clamp(2.6rem, 5.5vw, 5.4rem);
      font-weight: 700;
      color: var(--navy);
      line-height: 1.0;
      margin-bottom: 6px;
      letter-spacing: -.02em;
    }

    .hero-title-sub {
      display: block;
      font-family: 'Fraunces', serif;
      font-size: clamp(1.5rem, 3.2vw, 3.1rem);
      font-weight: 300;
      color: var(--navy-soft);
      font-style: italic;
      margin-top: .18em;
      line-height: 1.15;
      letter-spacing: -.01em;
    }

    /* Checklist grid */
    .hero-checklist {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 32px;
      margin: 28px 0 32px;
      max-width: 440px;
    }

    .hero-check-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .88rem;
      color: var(--navy-soft);
      font-weight: 400;
      line-height: 1.3;
    }

    .hc-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      min-width: 20px;
      border-radius: 50%;
      background: rgba(22,163,74,.12);
      color: #16a34a;
      font-size: .72rem;
      font-weight: 700;
      flex-shrink: 0;
      border: 1px solid rgba(22,163,74,.2);
    }

    /* Big CTA row */
    .hero-actions-v2 {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      align-items: center;
    }

    .hcta-primary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 15px 26px;
      border-radius: 12px;
      background: var(--navy);
      color: var(--cream);
      font-family: 'DM Sans', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
      box-shadow: 0 4px 18px rgba(15,23,42,.2);
      text-decoration: none;
    }

    .hcta-primary:hover {
      background: #0a111e;
      transform: translateY(-2px);
      box-shadow: 0 8px 26px rgba(15,23,42,.28);
    }

    .hcta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 22px;
      border-radius: 12px;
      background: transparent;
      color: var(--navy);
      font-family: 'DM Sans', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1.5px solid rgba(15,23,42,.22);
      cursor: pointer;
      text-decoration: none;
      transition: border-color .2s ease, background .2s ease, transform .18s ease;
    }

    .hcta-secondary:hover {
      border-color: var(--navy);
      background: rgba(15,23,42,.04);
      transform: translateY(-2px);
    }

    .hcta-wa {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 22px;
      border-radius: 12px;
      background: #25D366;
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
      box-shadow: 0 4px 16px rgba(37,211,102,.22);
    }

    .hcta-wa:hover {
      background: #1ebe5c;
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(37,211,102,.32);
    }

    /* Trust stats band */
    .hero-trust-band {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0;
      padding: 16px 20px;
      background: var(--navy);
      border-radius: 12px;
      max-width: 520px;
      margin-bottom: 36px;
    }

    .htb-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 16px;
      flex: 1;
    }

    .htb-num {
      font-family: 'Fraunces', serif;
      font-optical-sizing: auto;
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--gold);
      line-height: 1;
      letter-spacing: -.01em;
      white-space: nowrap;
    }

    .htb-label {
      font-size: .55rem;
      color: rgba(248,250,252,.55);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-top: 4px;
      white-space: nowrap;
      text-align: center;
      line-height: 1.3;
    }

    .htb-divider {
      width: 1px;
      height: 32px;
      background: rgba(255,255,255,.12);
      flex-shrink: 0;
    }

    /* ── MOBILE STICKY BAR ───────────────────────────────── */

    #mobileStickyBar {
      display: none;
    }

    @media (max-width: 767px) {
      #mobileStickyBar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 950;
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background: rgba(15,23,42,.88);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -4px 24px rgba(15,23,42,.25);
      }

      /* Push page content up so it's not hidden behind the bar */
      body { padding-bottom: 80px; }

      /* Hide the desktop sticky bar on mobile */
      #stickyBar { display: none !important; }

      .hero-checklist { grid-template-columns: 1fr 1fr; max-width: 100%; gap: 8px 20px; }
      .hero-trust-band { max-width: 100%; }
      .htb-item { padding: 0 10px; }
      .htb-num { font-size: 1.1rem; }
      .htb-label { font-size: .5rem; }
      .hero-actions-v2 { gap: 8px; }
      .hcta-primary, .hcta-secondary, .hcta-wa { padding: 13px 18px; font-size: .72rem; }
    }

    .msb-call {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.1);
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,.16);
      transition: background .18s ease;
    }

    .msb-call:hover { background: rgba(255,255,255,.18); }

    .msb-wa {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 10px;
      border-radius: 10px;
      background: #25D366;
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-decoration: none;
      transition: background .18s ease;
    }

    .msb-wa:hover { background: #1ebe5c; }
    #home{min-height:100vh;display:flex;align-items:center;padding:110px 48px 80px;position:relative;overflow:hidden}
    .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 78% 50%,rgba(249,115,22,.065) 0%,transparent 65%),radial-gradient(ellipse 45% 75% at 15% 35%,rgba(15,23,42,.04) 0%,transparent 55%)}
    .hero-pipes{position:absolute;right:0;top:0;bottom:0;width:44%;overflow:hidden}
    .hero-pipes img{width:100%;height:100%;object-fit:cover;display:block}
    .hero-pipes-overlay{position:absolute;inset:0;background:linear-gradient(to right,var(--cream,#FAFAF5) 0%,transparent 30%),linear-gradient(to top,rgba(15,23,42,.18) 0%,transparent 40%)}
    .hero-content{position:relative;max-width:1320px;margin:0 auto;width:100%}
    .hero-badge{display:inline-flex;align-items:center;gap:12px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:26px}
    .hero-badge::before{content:'';display:block;width:32px;height:1px;background:var(--gold)}
    .hero-title{font-size:clamp(3rem,6.5vw,6.2rem);font-weight:300;color:var(--navy);line-height:1.05;margin-bottom:6px}
    .hero-title em{font-style:italic;color:var(--navy-soft);font-size:.6em;line-height:1.2;display:inline-block;margin-top:.15em}
    .hero-sub{font-size:clamp(1.8rem,3.5vw,3.5rem);font-weight:600;color:var(--navy);margin-bottom:26px}
    .hero-sub .g{color:var(--gold)}
    .hero-desc{font-size:.97rem;color:var(--muted);max-width:500px;margin-bottom:44px;font-weight:300;line-height:1.8}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
    .btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:var(--cream);padding:15px 32px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;border-radius:var(--r);transition:background var(--tr),transform var(--tr);border:none}
    .btn-primary:hover{background:var(--navy-soft);transform:translateY(-1px)}
    .btn-secondary{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--navy);padding:14px 30px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;border-radius:var(--r);border:1px solid var(--gold);transition:background var(--tr),color var(--tr),transform var(--tr)}
    .btn-secondary:hover{background:var(--gold);color:var(--cream);transform:translateY(-1px)}
    .btn-wa{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:14px 30px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;border-radius:var(--r);border:none;transition:background var(--tr),transform var(--tr)}
    .btn-wa:hover{background:#1ebe5c;transform:translateY(-1px)}
    .hero-stats{display:flex;gap:52px;margin-top:60px;flex-wrap:wrap}
    .stat-div{width:1px;background:var(--border);align-self:stretch}
    .stat-num{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:600;color:var(--navy);line-height:1}
    .stat-lbl{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:4px}
    .hero-proof-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:18px;margin-top:36px;align-items:stretch;max-width:1120px}
    .hero-proof-card,.hero-process-card{background:rgba(255,255,255,.8);border:1px solid rgba(15,23,42,.08);border-radius:20px;box-shadow:0 18px 45px rgba(15,23,42,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
    .hero-proof-card{padding:22px 24px}
    .hero-proof-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
    .hero-proof-head h3{font-size:1.45rem;font-weight:600;color:var(--navy);margin-bottom:6px}
    .hero-proof-head p{font-size:.82rem;color:var(--navy-soft);line-height:1.7;max-width:520px}
    .hero-proof-tag{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid rgba(249,115,22,.35);background:rgba(249,115,22,.08);color:#C2410C;white-space:nowrap}
    .hero-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .hero-service{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:16px;padding:16px 16px 14px;min-height:138px}
    .hero-service-k{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
    .hero-service-v{font-size:1rem;font-weight:500;color:var(--navy);margin-bottom:6px}
    .hero-service-s{font-size:.77rem;line-height:1.65;color:var(--navy-soft)}
    .hero-process-card{padding:22px 24px}
    .hero-process-k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
    .hero-process-title{font-size:1.4rem;font-weight:600;color:var(--navy);margin-bottom:8px}
    .hero-process-copy{font-size:.82rem;line-height:1.72;color:var(--navy-soft);margin-bottom:18px}
    .hero-process-list{display:flex;flex-direction:column;gap:10px}
    .hero-process-step{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
    .hero-process-step span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--cream);font-size:.78rem;font-weight:500}
    .hero-process-step strong{display:block;font-size:.83rem;color:var(--navy);font-weight:500;margin-bottom:2px}
    .hero-process-step small{display:block;font-size:.76rem;line-height:1.6;color:var(--muted)}

    /* ── COMMONS ─────────────────────────────────────────── */
    section{position:relative;z-index:1}
    .si{max-width:1320px;margin:0 auto;padding:0 48px}
    .sec-lbl{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:400;display:flex;align-items:center;gap:12px;margin-bottom:12px}
    .sec-lbl::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
    .sec-title{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:500;color:var(--navy);margin-bottom:10px}
    .sec-desc{font-size:.92rem;color:var(--muted);max-width:600px;line-height:1.8}
    .gline{width:56px;height:1px;background:var(--gold);margin:22px 0}
    .section-shell{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.76));border:1px solid rgba(15,23,42,.08);border-radius:28px;padding:34px;box-shadow:0 18px 60px rgba(15,23,42,.06)}

    /* ── GALLERY STRIP ───────────────────────────────────── */
    .gallery-strip{padding:0 0 90px}
    .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:var(--r);overflow:hidden}
    .gi{position:relative;overflow:hidden;aspect-ratio:4/3}
    .gi img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
    .gi:hover img{transform:scale(1.05)}
    .gcap{position:absolute;bottom:0;left:0;right:0;padding:32px 20px 18px;background:linear-gradient(to top,rgba(15,23,42,.88) 0%,transparent 100%);color:var(--cream)}
    .gcap-t{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600}
    .gcap-s{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-light);margin-top:3px}
    .proof-band{padding:0 0 70px}
    .proof-band-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:16px}
    .proof-lead,.proof-card{border-radius:22px;border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 55px rgba(15,23,42,.06)}
    .proof-lead{background:linear-gradient(135deg,var(--navy),#1E293B);color:var(--cream);padding:28px 28px 26px}
    .proof-lead-k{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(223,192,120,.92);margin-bottom:10px}
    .proof-lead h2{font-size:2rem;font-weight:600;color:var(--cream);margin-bottom:10px}
    .proof-lead p{font-size:.84rem;line-height:1.75;color:rgba(248,250,252,.72);max-width:420px}
    .proof-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
    .proof-meta div strong{display:block;font-family:'Fraunces',serif;font-size:1.55rem;color:var(--cream)}
    .proof-meta div span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,250,252,.52)}
    .proof-card{background:#fff;padding:22px 20px}
    .proof-card-k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
    .proof-card h3{font-size:1.2rem;font-weight:600;color:var(--navy);margin-bottom:6px}
    .proof-card p{font-size:.8rem;line-height:1.68;color:var(--navy-soft)}
    .proof-card ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
    .proof-card li{font-size:.76rem;line-height:1.55;color:var(--navy-soft);padding-left:16px;position:relative}
    .proof-card li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--gold)}

    /* ── PRODUCTS ────────────────────────────────────────── */
    #products{padding:90px 0 100px}

    /* view-toggle */
    .view-toggle{display:flex;background:var(--cream-dark);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
    .vt-btn{display:flex;align-items:center;gap:7px;padding:9px 18px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;background:none;border:none;color:var(--muted);transition:background var(--tr),color var(--tr)}
    .vt-btn.active{background:var(--navy);color:var(--cream)}
    .vt-btn svg{flex-shrink:0}

    .catalog-shell{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.9));border:1px solid rgba(15,23,42,.08);border-radius:20px;padding:28px;box-shadow:0 22px 70px rgba(15,23,42,.08);margin-top:28px}
    .catalog-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
    .catalog-topbar h3{font-family:'Fraunces',serif;font-size:1.75rem;font-weight:600;color:var(--navy);margin:0 0 6px}
    .catalog-topbar p{margin:0;font-size:.83rem;line-height:1.75;color:var(--navy-soft);max-width:700px}
    .catalog-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px}
    .catalog-fact{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:16px 18px;box-shadow:0 8px 32px rgba(15,23,42,.04)}
    .catalog-fact .k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
    .catalog-fact .v{font-size:1rem;font-weight:500;color:var(--navy);margin-bottom:4px}
    .catalog-fact .s{font-size:.76rem;line-height:1.6;color:var(--navy-soft)}
    .catalog-note{display:flex;align-items:flex-start;gap:12px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.28);border-radius:14px;padding:14px 16px;margin:18px 0 20px}
    .catalog-note-icon{font-size:1rem;line-height:1;flex-shrink:0;color:#C2410C}
    .catalog-note-text{font-size:.8rem;line-height:1.75;color:#334155}
    .catalog-note-text strong{color:var(--navy)}
    .catalog-note-text a{color:var(--gold);font-weight:600}
    .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:0;margin-bottom:20px;padding:16px 18px;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;box-shadow:0 10px 30px rgba(15,23,42,.04)}
    .toolbar-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1}
    .search-wrap{position:relative;flex:0 0 260px}
    .search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
    .search-wrap input{width:100%;padding:9px 16px 9px 40px;background:#fff;border:1px solid var(--border);border-radius:999px;font-family:'DM Sans',sans-serif;font-size:.83rem;color:var(--navy);outline:none;transition:border-color var(--tr)}
    .search-wrap input::placeholder{color:var(--muted)}
    .search-wrap input:focus{border-color:var(--gold)}
    .pill{padding:7px 18px;border-radius:999px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;border:1px solid var(--border);background:#fff;color:var(--navy-soft);cursor:pointer;transition:all var(--tr)}
    .pill:hover{border-color:var(--gold);color:var(--gold)}
    .pill.active{background:var(--navy);color:var(--cream);border-color:var(--navy)}

    /* ── GRID VIEW (panel cards) ─────────────────────────── */
    #gridView{}
    .product-panel{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:16px;overflow:hidden;margin-bottom:24px;box-shadow:0 4px 24px rgba(15,23,42,.05);transition:box-shadow var(--tr),transform var(--tr)}
    .product-panel:hover{box-shadow:0 12px 48px rgba(15,23,42,.10);transform:translateY(-1px)}
    .panel-top{display:grid;grid-template-columns:380px 1fr}
    .panel-img{position:relative;overflow:hidden;display:flex;align-items:stretch}
    .panel-img svg{width:100%;flex-shrink:0}
    .panel-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;display:block;min-height:300px}
    .product-panel:hover .panel-img img{transform:scale(1.03)}
    .panel-img-badge{position:absolute;top:14px;left:14px;background:rgba(15,23,42,.78);color:var(--cream);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:4px 11px;border-radius:6px;backdrop-filter:blur(8px)}

    /* category icon badge */
    .cat-icon-wrap{position:absolute;bottom:14px;right:14px;width:48px;height:48px;border-radius:50%;background:rgba(248,250,252,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(15,23,42,.14)}

    .panel-info{padding:28px 32px 22px;display:flex;flex-direction:column;background:#fff}
    .panel-brands{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
    .brand-chip{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border-radius:5px;border:1px solid rgba(232,103,14,.3);color:var(--gold-dark);font-weight:500;background:rgba(232,103,14,.06)}
    .panel-title{font-family:'Fraunces',serif;font-size:1.85rem;font-weight:600;color:var(--navy);margin-bottom:4px}
    .panel-subtitle{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
    .panel-desc{font-size:.85rem;color:var(--navy-soft);line-height:1.78;margin-bottom:14px}
    .uc-title{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:10px}
    .use-cases{display:flex;flex-direction:column;gap:6px}
    .uc-item{display:flex;align-items:flex-start;gap:8px;font-size:.81rem;color:var(--navy-soft);line-height:1.55}
    .uc-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:8px}

    .panel-bottom{border-top:1px solid rgba(15,23,42,.06)}
    .brand-tabs{display:flex;border-bottom:1px solid rgba(15,23,42,.06);padding:0 32px;overflow-x:auto;background:#fff}
    .brand-tab{padding:12px 20px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--tr),border-color var(--tr);white-space:nowrap;text-align:left}
    .brand-tab .tab-sub{font-size:.57rem;opacity:.6;display:block;letter-spacing:.06em;font-style:italic;margin-top:1px;text-transform:none}
    .brand-tab.active{color:var(--navy);border-bottom-color:var(--gold);font-weight:500}
    .brand-tab:hover{color:var(--navy-soft)}
    .size-table-wrap{padding:20px 32px 8px;display:none;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff}
    .size-table-wrap.active{display:block}
    .size-table{width:100%;min-width:560px;border-collapse:collapse}
    .size-table thead tr{border-bottom:1px solid rgba(15,23,42,.07)}
    .size-table th{font-size:.57rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65);font-weight:400;padding:0 12px 10px 0;text-align:left}
    .size-table th:nth-last-child(-n+1){text-align:right}
    .size-table td{padding:15px 14px 15px 0;font-size:.84rem;color:var(--navy-soft);border-bottom:1px solid rgba(15,23,42,.045);vertical-align:middle}
    .size-table td.sz{font-weight:500;color:var(--navy)}
    .size-table td.pr{text-align:right;font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;color:var(--navy)}
    .size-table td.pr .u{font-family:'DM Sans',sans-serif;font-size:.6rem;color:var(--muted);font-weight:300;margin-left:2px}
    .size-table td.ac{text-align:right;padding-left:10px}
    .qbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--cream-dark);border:1px solid var(--border);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);transition:background var(--tr),color var(--tr),border-color var(--tr)}
    .qbtn:hover{background:#25D366;color:#fff;border-color:#25D366}
    .panel-fcta{padding:14px 36px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--border-soft);background:rgba(248,250,252,.68)}
    .price-disc{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--muted);line-height:1.5}
    .price-disc svg{flex-shrink:0;color:var(--gold)}
    .bulk-btn{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--cream);padding:10px 22px;border-radius:var(--r);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;border:none;transition:background var(--tr),transform var(--tr)}
    .bulk-btn:hover{background:var(--navy-soft);transform:translateY(-1px)}

    /* ── TABLE VIEW ──────────────────────────────────────── */
    #tableView{display:none}
    .master-table-wrap{background:#fff;border:1px solid var(--border-soft);border-radius:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:0 16px 50px rgba(15,23,42,.06)}
    .master-table{width:100%;min-width:680px;border-collapse:collapse}
    .master-table thead{background:var(--navy);color:var(--cream)}
    .master-table thead th{padding:14px 16px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;text-align:left;white-space:nowrap}
    .master-table thead th:last-child{text-align:right}
    .master-table tbody tr{border-bottom:1px solid rgba(15,23,42,.06);transition:background var(--tr)}
    .master-table tbody tr:hover{background:rgba(249,115,22,.06)}
    .master-table tbody tr.cat-header-row{background:rgba(15,23,42,.04)}
    .master-table tbody tr.cat-header-row td{padding:10px 16px 8px;font-family:'Fraunces',serif;font-size:1rem;font-weight:600;color:var(--navy-soft);letter-spacing:.04em;border-bottom:2px solid var(--border)}
    .master-table td{padding:11px 16px;font-size:.85rem;color:var(--navy-soft);vertical-align:middle}
    .master-table td.t-sz{font-weight:500;color:var(--navy);font-size:.9rem}
    .master-table td.t-brand{}
    .t-brand-chip{display:inline-block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--navy-soft)}
    .master-table td.t-price{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;color:var(--navy);white-space:nowrap}
    .master-table td.t-price .u{font-family:'DM Sans',sans-serif;font-size:.68rem;color:var(--muted);font-weight:300;margin-left:2px}
    .master-table td.t-stock{}
    .stock-badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
    .stock-badge.in{background:rgba(22,163,74,.1);color:var(--green)}
    .stock-badge.low{background:rgba(249,115,22,.12);color:#C2410C}
    .stock-badge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
    .master-table td.t-act{text-align:right;white-space:nowrap}

    /* table disclaimer row */
    .disc-row td{padding:16px;background:rgba(249,115,22,.05);font-size:.75rem;color:var(--muted);border-top:2px solid var(--border)}

    .no-results{text-align:center;padding:60px 20px;color:var(--muted);font-size:.9rem;display:none}

    /* ── WHY US ──────────────────────────────────────────── */
    #about{padding:100px 0;background:var(--navy);color:var(--cream)}
    #about .sec-lbl{color:var(--gold)}
    #about .sec-lbl::before{background:var(--gold)}
    #about .sec-title{color:var(--cream)}
    .about-top{max-width:740px;margin-bottom:64px}
    .about-body{font-size:.93rem;color:rgba(248,250,252,.62);line-height:1.88;margin-top:18px}
    /* Heritage numbered cards */
    .heritage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2px}
    .heritage-card{background:rgba(255,255,255,.04);border:1px solid rgba(249,115,22,.14);padding:36px 30px;transition:background .26s ease}
    .heritage-card:hover{background:rgba(255,255,255,.07)}
    .heritage-card-num{font-family:'Fraunces',serif;font-size:3rem;font-weight:600;color:rgba(249,115,22,.22);line-height:1;margin-bottom:18px}
    .heritage-card-title{font-family:'Fraunces',serif;font-size:1.22rem;font-weight:600;color:var(--cream);margin-bottom:12px;line-height:1.3}
    .heritage-card-body{font-size:.82rem;color:rgba(248,250,252,.5);line-height:1.78}
    /* Feature tiles */
    .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
    .feat{background:rgba(255,255,255,.04);border:1px solid rgba(249,115,22,.16);padding:32px 28px;transition:background var(--tr)}
    .feat:hover{background:rgba(255,255,255,.07)}
    .feat-icon{width:38px;height:38px;background:rgba(249,115,22,.1);border-radius:999px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--gold)}
    .feat-title{font-family:'Fraunces',serif;font-size:1.18rem;font-weight:600;color:var(--cream);margin-bottom:7px}
    .feat-desc{font-size:.8rem;color:rgba(248,250,252,.5);line-height:1.7}
    .local-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
    .local-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:14px;padding:24px 22px;box-shadow:0 10px 28px rgba(15,23,42,.05)}
    .local-card h3{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;color:var(--navy);margin-bottom:8px}
    .local-card p{font-size:.84rem;line-height:1.75;color:var(--navy-soft)}
    .local-chip{display:inline-flex;align-items:center;gap:6px;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
    .local-chip::before{content:'';width:18px;height:1px;background:var(--gold)}
    .ops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
    .ops-card{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;padding:24px 22px;box-shadow:0 12px 35px rgba(15,23,42,.05)}
    .ops-card-k{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
    .ops-card h3{font-size:1.35rem;font-weight:600;color:var(--navy);margin-bottom:8px}
    .ops-card p{font-size:.83rem;line-height:1.72;color:var(--navy-soft)}
    .ops-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px}
    .ops-card li{font-size:.76rem;line-height:1.58;color:var(--muted);padding-left:15px;position:relative}
    .ops-card li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gold)}

    /* ── TESTIMONIALS ───────────────────────────────────── */
    #testimonials{padding:90px 0 80px}
    .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
    .tcard{background:#fff;border:1px solid var(--border-soft);border-radius:18px;padding:30px 26px;box-shadow:0 16px 50px rgba(15,23,42,.07);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
    .tcard::before{content:'“';position:absolute;right:20px;top:10px;font-family:'Fraunces',serif;font-size:5rem;line-height:1;color:rgba(249,115,22,.16)}
    .tcard-stars{color:var(--gold);font-size:1rem;letter-spacing:2px}
    .tcard-text{font-size:.88rem;color:var(--navy-soft);line-height:1.75;flex:1}
    .tcard-author{font-size:.76rem;color:var(--muted);border-top:1px solid var(--border-soft);padding-top:12px}
    .tcard-author strong{display:block;color:var(--navy);font-size:.82rem}
    @media(max-width:900px){.testimonials-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:900px){.local-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:640px){.testimonials-grid{grid-template-columns:1fr}}

    /* ── CONTACT ─────────────────────────────────────────── */
    #contact{padding:100px 0 0}
    .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:48px;align-items:start}
    .cinfo{display:flex;flex-direction:column;gap:28px}
    .citem{display:flex;gap:16px;align-items:flex-start}
    .cicon{width:40px;height:40px;background:var(--gold-pale);border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
    .clbl{font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
    .cval{font-size:.91rem;color:var(--navy);line-height:1.58;font-weight:300}
    .cval a{color:var(--navy);transition:color var(--tr)}
    .cval a:hover{color:var(--gold)}
    .wa-btn{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:13px 28px;border-radius:var(--r);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;transition:background var(--tr),transform var(--tr);margin-top:6px}
    .wa-btn:hover{background:#1ebe5c;transform:translateY(-1px)}
    .map-box{border-radius:var(--r);overflow:hidden;border:1px solid var(--border);height:340px}
    .map-box iframe{width:100%;height:100%;border:none;filter:grayscale(.15) contrast(1.02)}
    .contact-shell{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.84));border:1px solid rgba(15,23,42,.08);border-radius:28px;padding:32px;box-shadow:0 18px 55px rgba(15,23,42,.06)}
    .contact-aside{background:var(--navy);color:var(--cream);border-radius:22px;padding:24px}
    .contact-aside-k{font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px}
    .contact-aside h3{font-size:1.55rem;font-weight:600;color:var(--cream);margin-bottom:10px}
    .contact-aside p{font-size:.82rem;line-height:1.7;color:rgba(248,250,252,.7)}
    .contact-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
    .contact-point{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;background:rgba(255,255,255,.04)}
    .contact-point strong{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);margin-bottom:6px}
    .contact-point span{display:block;font-size:.8rem;line-height:1.55;color:rgba(248,250,252,.72)}

    /* ── STICKY INQUIRY BAR ──────────────────────────────── */
    #stickyBar{
      position:fixed;bottom:0;left:0;right:0;z-index:900;
      background:rgba(15,23,42,.86);
      backdrop-filter:blur(16px) saturate(1.4);
      -webkit-backdrop-filter:blur(16px) saturate(1.4);
      border-top:2px solid var(--gold);
      padding:12px 48px;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
      transform:translateY(100%);
      transition:transform .4s cubic-bezier(.22,1,.36,1);
    }
    #stickyBar.show{transform:translateY(0)}
    .bar-left{display:flex;align-items:center;gap:16px}
    .bar-icon{width:38px;height:38px;border-radius:50%;background:rgba(249,115,22,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold)}
    .bar-text{color:var(--cream)}
    .bar-title{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;line-height:1.2}
    .bar-sub{font-size:.72rem;color:rgba(248,250,252,.55);letter-spacing:.06em}
    .bar-actions{display:flex;gap:10px;align-items:center}
    .bar-btn-primary{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:10px 22px;border-radius:var(--r);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;border:none;transition:background var(--tr),transform var(--tr);cursor:pointer}
    .bar-btn-primary:hover{background:#1ebe5c;transform:translateY(-1px)}
    .bar-close{background:none;border:none;color:rgba(248,250,252,.4);cursor:pointer;padding:6px;transition:color var(--tr)}
    .bar-close:hover{color:var(--cream)}

    /* ── INQUIRY MODAL ───────────────────────────────────── */
    #inquiryOverlay{
      position:fixed;inset:0;z-index:1100;
      background:rgba(15,23,42,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      display:flex;align-items:center;justify-content:center;padding:20px;
      opacity:0;pointer-events:none;transition:opacity .3s ease;
    }
    #inquiryOverlay.open{opacity:1;pointer-events:all}
    .modal{
      background:var(--cream);border-radius:12px;width:100%;max-width:560px;
      overflow:hidden;box-shadow:0 24px 80px rgba(15,23,42,.25);
      transform:scale(.95) translateY(16px);
      transition:transform .3s cubic-bezier(.22,1,.36,1);
    }
    #inquiryOverlay.open .modal{transform:scale(1) translateY(0)}
    .modal-header{background:var(--navy);padding:28px 32px;position:relative}
    .modal-header h3{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;color:var(--cream);margin-bottom:4px}
    .modal-header p{font-size:.8rem;color:rgba(248,250,252,.55);line-height:1.5}
    .modal-close{position:absolute;top:20px;right:20px;background:none;border:none;color:rgba(248,250,252,.4);cursor:pointer;padding:4px;transition:color var(--tr)}
    .modal-close:hover{color:var(--cream)}
    .modal-body{padding:28px 32px;display:flex;flex-direction:column;gap:18px}
    .field{display:flex;flex-direction:column;gap:6px}
    .field label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400}
    .field input,.field textarea,.field select{
      padding:11px 14px;background:#fff;border:1px solid var(--border-soft);
      border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.88rem;
      color:var(--navy);outline:none;transition:border-color var(--tr);
    }
    .field input:focus,.field textarea:focus{border-color:var(--gold)}
    .field textarea{resize:vertical;min-height:100px;line-height:1.6}
    .field .hint{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.5}
    .modal-footer{padding:0 32px 28px;display:flex;gap:10px;flex-wrap:wrap}
    .submit-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff;padding:13px 24px;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;border:none;cursor:pointer;transition:background var(--tr),transform var(--tr)}
    .submit-btn:hover{background:#1ebe5c;transform:translateY(-1px)}
    .cancel-btn{padding:12px 20px;background:none;border:1px solid var(--border);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:border-color var(--tr),color var(--tr)}
    .cancel-btn:hover{border-color:var(--navy-soft);color:var(--navy)}
    /* prebuilt req example tags */
    .req-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    .req-tag{font-size:.7rem;padding:5px 12px;border-radius:999px;background:var(--cream-dark);border:1px solid var(--border);color:var(--navy-soft);cursor:pointer;transition:background var(--tr),border-color var(--tr)}
    .req-tag:hover{background:var(--gold-pale);border-color:var(--gold)}


    /* ── LIVE PRICE BANNER ──────────────────────────────────── */
    #livePriceBanner {
      display:none; align-items:center; justify-content:space-between;
      gap:12px; flex-wrap:wrap;
      background:rgba(22,163,74,.07); border:1px solid rgba(22,163,74,.25);
      border-radius:var(--r); padding:10px 18px; margin-bottom:16px;
      font-size:.78rem; color:var(--navy-soft);
    }
    #livePriceBanner.show { display:flex; }
    #livePriceBanner .live-dot {
      width:8px; height:8px; border-radius:50%; background:var(--green);
      animation:pulse 2s infinite; flex-shrink:0;
    }
    #livePriceBanner.error {
      background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.2);
    }
    #livePriceBanner.error .live-dot { background:#ef4444; animation:none; }
    .sheets-setup-box {
      background:var(--cream-dark); border:1px dashed var(--border);
      border-radius:var(--r); padding:18px 22px; margin-bottom:20px;
      display:none; position:relative; z-index:100;
    }
    .sheets-setup-box.show { display:block; }
    .sheets-setup-box h4 {
      font-family:'Fraunces',serif; font-size:1.2rem;
      font-weight:600; color:var(--navy); margin-bottom:8px;
    }
    .sheets-setup-box p { font-size:.82rem; color:var(--navy-soft); line-height:1.7; margin-bottom:10px; }
    .sheets-setup-box code {
      display:block; background:#fff; border:1px solid var(--border);
      border-radius:4px; padding:8px 12px; font-size:.78rem;
      color:var(--navy); margin:8px 0; word-break:break-all;
      font-family:monospace;
    }
    .sheets-url-row { display:flex; gap:8px; margin-top:12px; }
    .sheets-url-input {
      flex:1; padding:9px 14px; border:1px solid var(--border);
      border-radius:var(--r); font-family:'DM Sans',sans-serif;
      font-size:.84rem; color:var(--navy); outline:none;
      transition:border-color var(--tr); background:#fff;
    }
    .sheets-url-input:focus { border-color:var(--gold); }
    .sheets-connect-btn {
      padding:9px 20px; background:var(--navy); color:var(--cream);
      border:none; border-radius:var(--r); font-family:'DM Sans',sans-serif;
      font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
      cursor:pointer; transition:background var(--tr); white-space:nowrap;
    }
    .sheets-connect-btn:hover { background:var(--navy-soft); }
    .sheets-toggle-btn {
      font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted); background:none; border:1px solid var(--border);
      border-radius:999px; padding:5px 14px; cursor:pointer;
      transition:all var(--tr); font-family:'DM Sans',sans-serif;
    }
    .sheets-toggle-btn:hover { border-color:var(--gold); color:var(--gold); }
    /* highlight updated prices */
    .price-live { color:var(--green) !important; }


    .enquiry-form{display:flex;flex-direction:column;gap:14px}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .form-field{display:flex;flex-direction:column;gap:6px}
    .form-field label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
    .form-field input,.form-field select,.form-field textarea{padding:11px 14px;border:1px solid var(--border);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--navy);background:#fff;outline:none;transition:border-color var(--tr);width:100%}
    .form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
    .form-field textarea{resize:vertical;min-height:100px}
    .form-submit-btn{background:var(--navy);color:var(--cream);padding:13px 28px;border:none;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background var(--tr),transform var(--tr);display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
    .form-submit-btn:hover{background:var(--navy-soft);transform:translateY(-1px)}
    .form-submit-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none}
    .form-status{padding:12px 16px;border-radius:var(--r);font-size:.84rem;display:none;margin-bottom:12px}
    .form-status.success{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);color:#15803d;display:block}
    .form-status.error{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);color:#dc2626;display:block}
    @media(max-width:640px){.form-row{grid-template-columns:1fr}}
    /* ── URGENCY BADGES ─────────────────────────────────── */
    .urgency-bar{display:flex;align-items:stretch;background:var(--navy);border-radius:var(--r);overflow:hidden;margin-bottom:32px}
    .urgency-item{display:flex;align-items:center;gap:10px;padding:14px 22px;flex:1;border-right:1px solid rgba(255,255,255,.08);color:var(--cream)}
    .urgency-item:last-child{border-right:none}
    .urgency-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.35)}}
    .urgency-text{font-size:.76rem;color:rgba(248,250,252,.8);line-height:1.45}
    .urgency-text strong{color:var(--gold-light);display:block;font-size:.8rem;font-weight:500}
    /* ── PRICE ANCHOR ────────────────────────────────────── */
    .price-anchor-strip{display:flex;gap:2px;margin:24px 0 8px;flex-wrap:wrap}
    .pa-card{flex:1;min-width:160px;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r);padding:16px 20px;position:relative;overflow:hidden}
    .pa-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
    .pa-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
    .pa-range{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1.1}
    .pa-unit{font-size:.7rem;color:var(--muted);margin-top:3px}
    .pa-note{font-size:.68rem;color:var(--gold);margin-top:5px;font-style:italic}
    /* ── PHOTO TIP ───────────────────────────────────────── */
    .photo-tip{background:linear-gradient(135deg,rgba(249,115,22,.1),rgba(249,115,22,.03));border:1px dashed rgba(249,115,22,.38);border-radius:var(--r);padding:14px 20px;display:flex;align-items:center;gap:14px;margin-bottom:6px}
    .photo-tip-icon{color:var(--gold);flex-shrink:0}
    .photo-tip-text{font-size:.78rem;color:var(--navy-soft);line-height:1.55}
    .photo-tip-text strong{color:var(--navy);display:block;font-size:.82rem;margin-bottom:2px}

    /* ── QUOTE CART ─────────────────────────────────────────────── */
    /* Floating cart button */
    #cartBtn {
      position:fixed; bottom:88px; right:24px; z-index:950;
      width:56px; height:56px; border-radius:50%;
      background:var(--navy); border:2px solid var(--gold);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; box-shadow:0 4px 20px rgba(15,23,42,.35);
      transition:transform var(--tr), background var(--tr);
    }
    #cartBtn:hover { transform:scale(1.08); background:var(--navy-soft); }
    #cartBtn.has-items { background:var(--gold); border-color:var(--navy); }
    #cartBtn.has-items svg { color:var(--navy); }
    #cartBtn svg { color:var(--cream); pointer-events:none; }
    #cartCount {
      position:absolute; top:-6px; right:-6px;
      background:#ef4444; color:#fff;
      font-size:.65rem; font-weight:700; font-family:'DM Sans',sans-serif;
      width:20px; height:20px; border-radius:50%;
      display:none; align-items:center; justify-content:center;
      border:2px solid var(--cream);
    }
    #cartCount.show { display:flex; }
    /* Cart drawer */
    #cartOverlay {
      position:fixed; inset:0; z-index:1050;
      background:rgba(15,23,42,.6); backdrop-filter:blur(6px);
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    #cartOverlay.open { opacity:1; pointer-events:all; }
    #cartDrawer {
      position:absolute; right:0; top:0; bottom:0;
      width:100%; max-width:480px;
      background:var(--cream); display:flex; flex-direction:column;
      transform:translateX(100%);
      transition:transform .35s cubic-bezier(.22,1,.36,1);
      box-shadow:-8px 0 40px rgba(15,23,42,.18);
    }
    #cartOverlay.open #cartDrawer { transform:translateX(0); }
    .cart-header {
      background:var(--navy); padding:22px 24px;
      display:flex; align-items:center; justify-content:space-between;
    }
    .cart-header h3 {
      font-family:'Fraunces',serif; font-size:1.5rem;
      font-weight:600; color:var(--cream); line-height:1;
    }
    .cart-header p { font-size:.75rem; color:rgba(248,250,252,.55); margin-top:3px; }
    .cart-close {
      background:none; border:none; color:rgba(248,250,252,.45);
      cursor:pointer; padding:4px; transition:color var(--tr);
    }
    .cart-close:hover { color:var(--cream); }
    .cart-items { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
    .cart-empty {
      flex:1; display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:12px; color:var(--muted); padding:40px;
    }
    .cart-empty svg { opacity:.3; }
    .cart-empty p { font-size:.88rem; text-align:center; line-height:1.6; }
    .cart-item {
      background:#fff; border:1px solid var(--border-soft); border-radius:var(--r);
      padding:12px 14px; display:flex; align-items:flex-start; gap:12px;
    }
    .cart-item-info { flex:1; }
    .cart-item-name { font-size:.85rem; font-weight:500; color:var(--navy); line-height:1.35; }
    .cart-item-sub { font-size:.74rem; color:var(--muted); margin-top:2px; }
    .cart-item-price { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:600; color:var(--navy); white-space:nowrap; }
    .cart-item-controls { display:flex; align-items:center; gap:6px; margin-top:8px; }
    .qty-btn {
      width:26px; height:26px; border-radius:4px;
      background:var(--cream-dark); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; font-size:.9rem; color:var(--navy);
      transition:background var(--tr); line-height:1;
    }
    .qty-btn:hover { background:var(--gold-pale); border-color:var(--gold); }
    .qty-val {
      min-width:32px; text-align:center; font-size:.85rem;
      font-weight:500; color:var(--navy); font-family:'DM Sans',sans-serif;
    }
    .qty-unit { font-size:.7rem; color:var(--muted); }
    .cart-item-remove {
      background:none; border:none; color:var(--muted); cursor:pointer;
      padding:2px; transition:color var(--tr); flex-shrink:0; margin-top:1px;
    }
    .cart-item-remove:hover { color:#ef4444; }
    .cart-footer { border-top:1px solid var(--border-soft); padding:16px; }
    .cart-summary {
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom:14px;
    }
    .cart-summary-label { font-size:.78rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
    .cart-summary-items { font-size:.85rem; color:var(--navy); font-weight:500; }
    .cart-send-btn {
      width:100%; display:flex; align-items:center; justify-content:center;
      gap:10px; background:#25D366; color:#fff; padding:14px;
      border-radius:var(--r); font-family:'DM Sans',sans-serif;
      font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
      font-weight:400; border:none; cursor:pointer;
      transition:background var(--tr), transform var(--tr);
    }
    .cart-send-btn:hover { background:#1ebe5c; transform:translateY(-1px); }
    .cart-send-btn:disabled { background:#a0a8b0; cursor:not-allowed; transform:none; }
    .cart-clear-btn {
      width:100%; margin-top:8px; background:none;
      border:1px solid var(--border); border-radius:var(--r);
      padding:9px; font-family:'DM Sans',sans-serif;
      font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--muted); cursor:pointer; transition:all var(--tr);
    }
    .cart-clear-btn:hover { border-color:#ef4444; color:#ef4444; }
    /* Add to quote button on table rows */
    .atq-btn {
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 12px; border-radius:999px;
      background:rgba(249,115,22,.1); border:1px solid var(--gold);
      font-size:.69rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--gold); cursor:pointer; transition:all var(--tr);
      font-family:'DM Sans',sans-serif;
      white-space:nowrap;
    }
    .atq-btn:hover, .atq-btn.added {
      background:var(--gold); color:var(--navy);
    }
    .atq-btn.added { pointer-events:none; }
    /* Paired row for GI lengths */
    .pair-row td { padding:0; border:none; }
    .pair-cell { padding:11px 12px 11px 0; border-bottom:1px solid rgba(15,23,42,.045); vertical-align:middle; }
    .pair-divider { border-left:1px solid var(--border-soft); }
    .len-label { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
    @media(max-width:640px){
      #cartDrawer{max-width:100%}
      #cartBtn{bottom:76px;right:16px}
    }
    /* ── FADE ANIMATIONS ─────────────────────────────────── */
    .fade-up{opacity:0;transform:translateY(22px);transition:opacity .62s ease,transform .62s ease}
    .fade-up.visible{opacity:1;transform:translateY(0)}

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media(max-width:1060px){.panel-top{grid-template-columns:320px 1fr}}
    @media(max-width:900px){
      .nav-links{display:none}.hamburger{display:flex}
      .about-grid,.contact-grid,.hero-proof-grid{grid-template-columns:1fr;gap:40px}
      .heritage-row{grid-template-columns:1fr}
      .feat-grid{grid-template-columns:1fr}
      .panel-top{grid-template-columns:1fr}
      .panel-img img{min-height:220px;max-height:260px}
      .gallery-grid{grid-template-columns:1fr 1fr}
      .proof-band-grid,.ops-grid{grid-template-columns:1fr}
      .hero-service-grid,.contact-points{grid-template-columns:1fr}
      #stickyBar{padding:12px 20px}
      .bar-left{gap:10px}
      .urgency-bar{flex-direction:column}
      .urgency-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
      .urgency-item:last-child{border-bottom:none}
      .price-anchor-strip{gap:8px}
    }
        @media(max-width:640px){
      .nav-inner,.si,.fi{padding:0 20px}.fi{padding:28px 20px;flex-direction:column;text-align:center}
      #home{padding:130px 20px 60px}
      .gallery-grid{grid-template-columns:1fr}
      .local-grid{grid-template-columns:1fr}
      .catalog-shell,.section-shell,.contact-shell{padding:18px}
      .catalog-topbar{gap:12px}
      .catalog-facts{grid-template-columns:1fr}
      .proof-lead,.proof-card,.hero-proof-card,.hero-process-card{padding:20px 18px}
      .panel-info,.brand-tabs,.panel-fcta{padding-left:16px;padding-right:16px}
      .brand-tabs{padding-left:16px;padding-right:16px}
      /* Table scroll container — no side padding so full width is usable */
      .size-table-wrap{padding:12px 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
      /* Compact table cells on mobile */
      .size-table th{font-size:.58rem;padding:0 8px 8px 0;letter-spacing:.08em}
      .size-table td{padding:7px 8px 7px 0;font-size:.78rem}
      .size-table td.sz{font-size:.85rem}
      /* Smaller stock badges on mobile */
      .stock-badge{font-size:.6rem;padding:2px 7px}
      .stock-badge .dot{width:4px;height:4px}
      /* Brand tabs compact */
      .brand-tab{padding:10px 14px;font-size:.68rem}
      .brand-tab .tab-sub{display:none}
      /* Panel image shorter on mobile */
      .panel-img img{min-height:180px;max-height:200px}
      .panel-top{grid-template-columns:1fr}
      /* Cart btn position */
      #cartBtn{bottom:76px;right:16px;width:48px;height:48px}
      .stat-div{display:none}.hero-stats{gap:28px}
      .hero-proof-head{flex-direction:column}
      .hero-proof-tag{white-space:normal}
      .mobile-menu{padding:20px}
      .modal-header,.modal-body,.modal-footer{padding-left:20px;padding-right:20px}
      .toolbar{flex-direction:column;align-items:stretch}
      .toolbar-left{flex-wrap:wrap}
      .search-wrap{flex:1 1 auto}
      .master-table td,.master-table th{padding:10px 10px}
      #stickyBar{flex-direction:column;gap:10px;align-items:stretch}
      .bar-actions{justify-content:stretch}
      .bar-btn-primary{flex:1;justify-content:center}
      .urgency-bar{flex-direction:column}
      .urgency-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
      .urgency-item:last-child{border-bottom:none}
      .price-anchor-strip{gap:8px}
      .pa-card{min-width:140px}
    }
/* ───────────────────────── 2) REFINEMENT LAYER ───────────────────────── */

    /* ── EXTENDED TOKENS ─────────────────────────────────── */
    :root {
      --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-expo:     cubic-bezier(0.16, 1,    0.3,  1);
      --ease-quart:    cubic-bezier(0.76, 0,    0.24, 1);
      --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --glow-gold:     0 0 40px rgba(249,115,22,.18);
      --glow-navy:     0 0 60px rgba(15,23,42,.25);
      --tr2: 0.45s;
    }

    /* ── KEYFRAMES ───────────────────────────────────────── */
    @keyframes nt-shimmer {
      0%   { transform: translateX(-100%) skewX(-12deg); }
      100% { transform: translateX(200%)  skewX(-12deg); }
    }
    @keyframes nt-float {
      0%,100% { transform: translateY(0px); }
      50%      { transform: translateY(-8px); }
    }
    @keyframes nt-breathe {
      0%,100% { opacity: .055; transform: scale(1); }
      50%      { opacity: .085; transform: scale(1.04); }
    }
    @keyframes nt-hero-in {
      from { opacity:0; transform: translateY(28px); filter: blur(4px); }
      to   { opacity:1; transform: translateY(0);    filter: blur(0); }
    }
    @keyframes nt-badge-in {
      from { opacity:0; transform: translateX(-18px); }
      to   { opacity:1; transform: translateX(0); }
    }
    @keyframes nt-line-grow {
      from { scaleX: 0; }
      to   { scaleX: 1; }
    }
    @keyframes nt-card-rise {
      from { opacity:0; transform: translateY(32px) scale(.98); }
      to   { opacity:1; transform: translateY(0)    scale(1); }
    }
    @keyframes nt-stat-reveal {
      from { opacity:0; transform: translateY(16px) scale(.95); }
      to   { opacity:1; transform: translateY(0)    scale(1); }
    }
    @keyframes nt-glow-pulse {
      0%,100% { box-shadow: 0 0 0 rgba(249,115,22,0); }
      50%      { box-shadow: 0 0 28px rgba(249,115,22,.18); }
    }
    @keyframes nt-underline-in {
      from { transform: scaleX(0); transform-origin: left; }
      to   { transform: scaleX(1); transform-origin: left; }
    }
    @keyframes nt-ripple {
      from { transform: scale(0); opacity: 0.35; }
      to   { transform: scale(4); opacity: 0; }
    }
    @keyframes nt-spin-slow {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes nt-slide-right {
      from { transform: scaleX(0); transform-origin: left; opacity: 0; }
      to   { transform: scaleX(1); transform-origin: left; opacity: 1; }
    }

    /* ── HERO: ANIMATED ENTRANCE ─────────────────────────── */
    /* UUPM: complex transitions ≤400ms; stagger 30-50ms per item */
    #home { overflow: hidden; }
    .hero-bg {
      animation: nt-breathe 8s ease-in-out infinite;
    }
    .hero-pipes {
      animation: nt-breathe 12s ease-in-out infinite;
    }
    /* Animated gradient orb behind hero */
    #home::after {
      content: '';
      position: absolute;
      width: 700px; height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249,115,22,.07) 0%, transparent 70%);
      top: -200px; right: -150px;
      pointer-events: none;
      animation: nt-float 14s ease-in-out infinite;
    }

    /* Hero content staggered entrance — UUPM: 30-50ms stagger, ≤400ms complex */
    .hero-badge {
      animation: nt-badge-in .38s var(--ease-expo) .08s both;
    }
    .hero-title {
      animation: nt-hero-in .42s var(--ease-expo) .14s both;
    }
    .hero-desc, #home p {
      animation: nt-hero-in .4s var(--ease-expo) .2s both;
    }
    .hero-actions {
      animation: nt-hero-in .4s var(--ease-expo) .26s both;
    }
    .hero-proof-grid {
      animation: nt-hero-in .45s var(--ease-expo) .32s both;
    }
    .hero-stats {
      animation: nt-hero-in .45s var(--ease-expo) .38s both;
    }

    /* ── HERO BADGE — gold line animation ────────────────── */
    .hero-badge::before {
      animation: nt-slide-right .8s var(--ease-expo) .1s both;
    }
    .sec-lbl::before {
      animation: nt-slide-right .7s var(--ease-expo) .1s both;
    }

    /* ── ENHANCED FADE-UP — UUPM: ≤400ms complex transitions ─ */
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .45s var(--ease-expo), transform .45s var(--ease-expo);
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Staggered child animations — UUPM: 30-50ms per item */
    .fade-stagger > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s var(--ease-expo), transform .4s var(--ease-expo);
    }
    .fade-stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0s; }
    .fade-stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: .04s; }
    .fade-stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: .08s; }
    .fade-stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: .12s; }
    .fade-stagger.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: .16s; }
    .fade-stagger.visible > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay: .20s; }

    /* ── NAVBAR REFINEMENT ─────────────────────────────────── */
    #navbar {
      background: rgba(248,250,252,.92);
      transition: background .4s ease, box-shadow .4s ease, border-color .4s ease;
    }
    #navbar.scrolled {
      background: rgba(248,250,252,.97);
      box-shadow: 0 1px 0 rgba(249,115,22,.14), 0 8px 32px rgba(15,23,42,.08);
    }
    .nav-logo {
      transition: letter-spacing .4s ease, opacity .3s ease;
    }
    .nav-logo:hover { opacity: .78; }

    /* ── BUTTON ENHANCEMENTS ──────────────────────────────── */
    .btn-primary, .btn-secondary, .btn-wa,
    .bar-btn-primary, .submit-btn,
    .nav-cta, .nav-inquiry, .wa-btn {
      position: relative;
      overflow: hidden;
      transition: background var(--tr), transform .3s var(--ease-spring), box-shadow .3s ease, color var(--tr);
    }
    .btn-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(15,23,42,.22); }
    .btn-secondary:hover{ transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,115,22,.22); }
    .btn-wa:hover       { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.28); }
    .btn-primary:active, .btn-secondary:active, .btn-wa:active {
      transform: translateY(0) scale(.97);
    }
    /* Shimmer sweep on all primary buttons */
    .btn-primary::after, .btn-wa::after, .nav-cta::after,
    .bar-btn-primary::after, .submit-btn::after, .wa-btn::after {
      content: '';
      display: block !important;
      position: absolute;
      inset: 0;
      width: 40% !important;
      height: 100% !important;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent) !important;
      transform: translateX(-100%) skewX(-12deg);
      right: unset !important; left: 0 !important;
      border-radius: 0;
    }
    .btn-primary:hover::after, .btn-wa:hover::after, .nav-cta:hover::after,
    .bar-btn-primary:hover::after, .submit-btn:hover::after, .wa-btn:hover::after {
      animation: nt-shimmer .7s ease forwards;
    }
    /* Override nav-cta to use proper shimmer */
    .nav-cta { overflow: hidden; }
    .nav-cta:hover { background: var(--navy-soft) !important; }

    /* ── CARD HOVER ELEVATIONS ─────────────────────────────── */
    .hero-service {
      transition: transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
      cursor: default;
    }
    .hero-service:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(15,23,42,.1);
      border-color: rgba(249,115,22,.3);
    }

    .hero-proof-card, .hero-process-card {
      transition: transform .4s var(--ease-spring), box-shadow .4s ease;
    }
    .hero-proof-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(15,23,42,.12); }
    .hero-process-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(15,23,42,.12); }

    .proof-card {
      transition: transform .38s var(--ease-spring), box-shadow .38s ease, border-color .38s ease;
    }
    .proof-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 60px rgba(15,23,42,.1);
      border-color: rgba(249,115,22,.22);
    }
    .proof-lead {
      transition: transform .38s var(--ease-spring), box-shadow .38s ease;
    }
    .proof-lead:hover {
      transform: translateY(-4px);
      box-shadow: 0 28px 70px rgba(15,23,42,.3);
    }

    /* Heritage cards — about section */
    .heritage-card {
      transition: background .28s ease, transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
    }
    .heritage-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(15,23,42,.25);
      border-color: rgba(249,115,22,.28) !important;
    }
    .feat:hover {
      transform: translateY(-3px);
      transition: background .28s ease, transform .35s var(--ease-spring), box-shadow .35s ease;
      box-shadow: 0 16px 44px rgba(15,23,42,.2);
    }

    /* Testimonial cards */
    .tcard {
      transition: transform .38s var(--ease-spring), box-shadow .38s ease;
    }
    .tcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 28px 60px rgba(15,23,42,.1);
    }
    .tcard::before {
      transition: color .4s ease, opacity .4s ease;
    }
    .tcard:hover::before { color: rgba(249,115,22,.28); }

    /* Local & ops cards */
    .local-card, .ops-card, .catalog-fact {
      transition: transform .38s var(--ease-spring), box-shadow .38s ease, border-color .38s ease;
    }
    .local-card:hover, .ops-card:hover, .catalog-fact:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(15,23,42,.1);
      border-color: rgba(249,115,22,.25);
    }

    /* ── GALLERY STRIP ENHANCEMENTS ───────────────────────── */
    .gi {
      overflow: hidden;
      position: relative;
    }
    .gi img {
      transition: transform .75s var(--ease-quart), filter .75s ease;
    }
    .gi:hover img {
      transform: scale(1.07);
      filter: brightness(1.04) contrast(1.02);
    }
    .gcap {
      transition: transform .45s var(--ease-expo);
      transform: translateY(3px);
    }
    .gi:hover .gcap {
      transform: translateY(0);
    }
    /* Hover overlay tint */
    .gi::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(249,115,22,.06), transparent);
      opacity: 0;
      transition: opacity .45s ease;
      pointer-events: none;
    }
    .gi:hover::after { opacity: 1; }

    /* ── STAT NUMBERS — count-up visual ──────────────────── */
    .stat-num {
      transition: color .3s ease;
      position: relative;
    }
    .stat-num.counting {
      color: var(--gold);
    }

    /* ── SECTION HEADER ANIMATIONS ───────────────────────── */
    .sec-title {
      position: relative;
    }
    /* Gold dot accent on section labels */
    .sec-lbl {
      position: relative;
    }

    /* ── PRODUCT GRID CARDS ────────────────────────────────── */
    .prod-card {
      transition: transform .38s var(--ease-spring), box-shadow .38s ease, border-color .38s ease !important;
    }
    .prod-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 24px 60px rgba(15,23,42,.12) !important;
      border-color: rgba(249,115,22,.3) !important;
    }
    /* Shimmer on add-to-quote buttons */
    .atq-btn {
      position: relative;
      overflow: hidden;
      transition: background .22s ease, transform .22s var(--ease-spring), box-shadow .22s ease !important;
    }
    .atq-btn:hover {
      transform: translateY(-1px) scale(1.03) !important;
      box-shadow: 0 4px 16px rgba(15,23,42,.14) !important;
    }
    .atq-btn:active { transform: scale(.96) !important; }

    /* ── NAVBAR LINK HOVER ─────────────────────────────────── */
    .nav-links a::after {
      transition: right .32s var(--ease-expo);
    }

    /* ── CONTACT ICONS ─────────────────────────────────────── */
    .cicon {
      transition: background .3s ease, transform .35s var(--ease-spring), box-shadow .3s ease;
    }
    .citem:hover .cicon {
      background: var(--gold-pale);
      transform: scale(1.1) rotate(-4deg);
      box-shadow: 0 6px 20px rgba(249,115,22,.2);
    }

    /* ── SEARCH INPUT ENHANCEMENT ─────────────────────────── */
    .search-wrap input:focus {
      box-shadow: 0 0 0 3px rgba(249,115,22,.12);
    }
    .field input:focus, .field textarea:focus {
      box-shadow: 0 0 0 3px rgba(249,115,22,.1);
    }

    /* ── STICKY BAR ENHANCEMENT ──────────────────────────── */
    #stickyBar {
      transition: transform .48s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
    }
    #stickyBar.show {
      box-shadow: 0 -4px 40px rgba(15,23,42,.3);
    }

    /* ── CART BUTTON ─────────────────────────────────────── */
    #cartBtn {
      transition: transform .35s var(--ease-spring), box-shadow .35s ease !important;
    }
    #cartBtn:hover {
      transform: translateY(-3px) scale(1.05) !important;
      box-shadow: 0 12px 36px rgba(15,23,42,.28) !important;
    }

    /* ── PILL FILTER BUTTONS ──────────────────────────────── */
    .pill {
      transition: all .28s var(--ease-expo) !important;
    }
    .pill:hover {
      transform: translateY(-1px);
    }
    .pill.active {
      box-shadow: 0 4px 16px rgba(15,23,42,.18);
    }

    /* ── CATALOG SHELL SUBTLE GLOW ────────────────────────── */
    .catalog-shell {
      transition: box-shadow .5s ease;
    }
    .catalog-shell:hover {
      box-shadow: 0 28px 80px rgba(15,23,42,.1), 0 0 0 1px rgba(249,115,22,.1);
    }

    /* ── MAP BOX ──────────────────────────────────────────── */
    .map-box {
      transition: box-shadow .4s ease;
    }
    .map-box:hover {
      box-shadow: 0 16px 48px rgba(15,23,42,.14);
    }

    /* ── PROCESS STEPS ────────────────────────────────────── */
    .hero-process-step span {
      transition: transform .35s var(--ease-spring), background .25s ease, box-shadow .3s ease;
    }
    .hero-process-step:hover span {
      transform: scale(1.12);
      background: var(--gold);
      box-shadow: 0 4px 14px rgba(249,115,22,.3);
    }

    /* ── TABS / BRAND SWITCHER ────────────────────────────── */
    .tab-btn {
      transition: all .28s var(--ease-expo) !important;
    }
    .tab-btn:hover {
      transform: translateY(-1px);
    }

    /* ── MOBILE MENU ─────────────────────────────────────── */
    .mobile-menu {
      transition: opacity .28s ease, transform .32s var(--ease-expo) !important;
      transform: translateY(-8px);
      opacity: 0;
    }
    .mobile-menu.open {
      transform: translateY(0);
      opacity: 1;
    }

    /* ── SECTION ENTRY ANIMATIONS (JS driven) ─────────────── */
    .nt-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo);
    }
    .nt-reveal.nt-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Fade from left */
    .nt-reveal-left {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo);
    }
    .nt-reveal-left.nt-visible {
      opacity: 1;
      transform: translateX(0);
    }
    /* Scale in */
    .nt-reveal-scale {
      opacity: 0;
      transform: scale(.96);
      transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo);
    }
    .nt-reveal-scale.nt-visible {
      opacity: 1;
      transform: scale(1);
    }

    /* ── SMOOTH PAGE LOAD ─────────────────────────────────── */
    body {
      animation: nt-hero-in .5s var(--ease-expo) both;
    }

    /* ── GOLD LINE DIVIDERS ───────────────────────────────── */
    .gline {
      position: relative;
      overflow: hidden;
    }
    .gline.nt-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--gold), transparent);
      animation: nt-slide-right .8s var(--ease-expo) forwards;
    }

    /* ── FOOTER LINK HOVER ────────────────────────────────── */
    footer a {
      transition: color .25s ease, opacity .25s ease;
    }
    footer a:hover {
      color: var(--gold) !important;
      opacity: .9;
    }

    /* ── PROOF BAND META NUMBERS ──────────────────────────── */
    .proof-meta div strong {
      display: block;
      transition: color .3s ease;
    }
    .proof-lead:hover .proof-meta div strong {
      color: var(--gold-light);
    }

    /* ── MOBILE REFINEMENTS ───────────────────────────────── */
    @media (hover: none) {
      .btn-primary:hover, .btn-secondary:hover, .btn-wa:hover {
        transform: none;
      }
      .hero-service:hover, .proof-card:hover,
      .tcard:hover, .local-card:hover { transform: none; }
    }

    /* ══════════════════════════════════════════════════════
       UUPM COMPLIANCE LAYER
       Based on ui-ux-pro-max skill — 161 reasoning rules
    ══════════════════════════════════════════════════════ */

    /* ── prefers-reduced-motion (CRITICAL per UUPM §7) ───── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .hero-badge, .hero-title, .hero-desc, #home p,
      .hero-actions, .hero-proof-grid, .hero-stats,
      .hero-bg, .hero-pipes, #home::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
      .fade-up, .nt-reveal, .nt-reveal-left, .nt-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .fade-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* ── cursor-pointer — all interactive elements (UUPM §2) */
    .hero-service,
    .hero-proof-card, .hero-process-card,
    .proof-card, .proof-lead,
    .heritage-card, .feat,
    .tcard,
    .local-card, .ops-card,
    .catalog-fact,
    .gallery-grid .gi,
    .nav-links a,
    .nav-logo,
    .btn-primary, .btn-secondary, .btn-wa,
    .bar-btn-primary, .submit-btn,
    .pill, .vt-btn, .tab-btn, .atq-btn,
    .req-tag, .sheets-connect-btn,
    .hamburger, #cartBtn,
    .wa-btn, .nav-inquiry, .nav-cta,
    .cancel-btn, .modal-close, .bar-close {
      cursor: pointer;
    }

    /* ── touch-action: manipulation (UUPM §2 tap-delay) ───── */
    .btn-primary, .btn-secondary, .btn-wa,
    .bar-btn-primary, .submit-btn, .wa-btn,
    .pill, .atq-btn, .vt-btn, .tab-btn,
    .nav-inquiry, .nav-cta,
    #cartBtn, .hamburger {
      touch-action: manipulation;
    }

    /* ── will-change hints for GPU compositing ─────────────── */
    .hero-badge, .hero-title, .hero-desc, .hero-actions,
    .hero-proof-grid, .hero-stats,
    .fade-up, .nt-reveal, .nt-reveal-left {
      will-change: opacity, transform;
    }
    .hero-service, .proof-card, .tcard,
    .btn-primary, .btn-secondary, .btn-wa {
      will-change: transform;
    }

    /* ── focus-visible states (UUPM §1 accessibility) ──────── */
    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      border-radius: var(--r);
    }
    .btn-primary:focus-visible,
    .btn-secondary:focus-visible,
    .btn-wa:focus-visible,
    .bar-btn-primary:focus-visible,
    .submit-btn:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      box-shadow: 0 0 0 5px rgba(249,115,22,.18);
    }
    .nav-links a:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
      border-radius: 3px;
    }

    /* ── press scale feedback (UUPM §7 scale-feedback 0.95–1.05) */
    .btn-primary:active  { transform: scale(.97) !important; box-shadow: none !important; }
    .btn-secondary:active { transform: scale(.97) !important; }
    .btn-wa:active       { transform: scale(.97) !important; }
    .bar-btn-primary:active { transform: scale(.97) !important; }
    .atq-btn:active      { transform: scale(.94) !important; }
    .pill:active         { transform: scale(.96) !important; }
    .hero-service:active { transform: scale(.98) !important; }
    #cartBtn:active      { transform: scale(.94) !important; }

    /* ── exit animations shorter than enter (UUPM §7) ──────── */
    /* Modal: enter 300ms, exit 200ms (66%) */
    #inquiryOverlay {
      transition: opacity .2s ease !important;
    }
    #inquiryOverlay .modal {
      transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease !important;
    }
    /* Mobile menu: enter .32s, exit .18s */
    .mobile-menu {
      transition: opacity .18s ease, transform .18s var(--ease-expo) !important;
    }
    /* Cart drawer */
    #cartOverlay {
      transition: opacity .2s ease;
    }

    /* ── TRUST & AUTHORITY EFFECTS (UUPM Trust Style) ──────── */
    /* Badge hover pulse — UUPM: badge hover effects */
    .hero-proof-tag {
      transition: background .25s ease, border-color .25s ease,
                  transform .25s var(--ease-spring), box-shadow .25s ease;
    }
    .hero-proof-tag:hover {
      background: rgba(249,115,22,.14);
      border-color: rgba(249,115,22,.5);
      transform: scale(1.03);
      box-shadow: 0 4px 16px rgba(249,115,22,.16);
    }
    /* Trust pills in hero */
    #home > .hero-content [style*="border-radius:999px"] {
      transition: background .22s ease, border-color .22s ease, transform .22s var(--ease-spring);
    }
    #home > .hero-content [style*="border-radius:999px"]:hover {
      transform: scale(1.04);
    }
    /* Stat number glow on hover — metric highlight */
    .stat-num {
      transition: color .25s ease, text-shadow .25s ease;
    }
    .stat-num:hover {
      color: var(--gold);
      text-shadow: 0 0 20px rgba(249,115,22,.3);
    }
    /* Heritage card number pulse */
    .heritage-card-num {
      transition: color .3s ease, opacity .3s ease;
    }
    .heritage-card:hover .heritage-card-num {
      color: rgba(249,115,22,.6);
      opacity: 1;
    }
    /* Proof meta number lift */
    .proof-meta div {
      cursor: default;
      transition: transform .25s var(--ease-spring);
    }
    .proof-meta div:hover {
      transform: translateY(-2px);
    }
    /* Feature icon ring */
    .feat-icon {
      transition: background .28s ease, transform .3s var(--ease-spring), box-shadow .28s ease;
    }
    .feat:hover .feat-icon {
      background: rgba(249,115,22,.2);
      transform: scale(1.15) rotate(-6deg);
      box-shadow: 0 6px 20px rgba(249,115,22,.22);
    }

    /* ── nt-reveal animation timing fixes ──────────────────── */
    /* UUPM: ≤400ms complex transitions */
    .nt-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .45s var(--ease-expo), transform .45s var(--ease-expo);
    }
    .nt-reveal-left {
      opacity: 0;
      transform: translateX(-24px);
      transition: opacity .45s var(--ease-expo), transform .45s var(--ease-expo);
    }
    .nt-reveal-scale {
      opacity: 0;
      transform: scale(.97);
      transition: opacity .38s var(--ease-expo), transform .38s var(--ease-expo);
    }

    /* ── Skeleton shimmer for catalog loading (UUPM §3) ────── */
    @keyframes nt-skeleton {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .prod-card-loading {
      background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
      background-size: 800px 100%;
      animation: nt-skeleton 1.4s ease-in-out infinite;
      border-radius: var(--r);
      height: 160px;
    }

    /* ── Page load body animation reduction ─────────────────── */
    /* UUPM: page load animation ≤400ms */
    body {
      animation: nt-hero-in .28s var(--ease-expo) both;
    }

    /* ── SCROLLBAR STYLING ────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--cream-dark); }
    ::-webkit-scrollbar-thumb { background: rgba(249,115,22,.4); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(249,115,22,.7); }

    /* ── SELECTION COLOR ──────────────────────────────────── */
    ::selection { background: rgba(249,115,22,.22); color: var(--navy); }

/* ───────────────────────── 3) B2B SUPPLIER OVERRIDE (replaces Apple-minimal) ───────────────────────── */

    /* Nova Trading — procurement-tool aesthetic. Dense, functional, trustworthy. */
    :root{
      --cream:#ffffff;
      --cream-dark:#F8FAFC;
      --navy:#0F172A;
      --navy-soft:#475569;
      --gold:#E8670E;
      --gold-light:#F07820;
      --gold-pale:#FEF0E0;
      --gold-dark:#B8420C;
      --green:#16a34a;
      --muted:#64748B;
      --muted-2:#94A3B8;
      --muted-3:#475569;
      --border:rgba(249,115,22,0.18);
      --border-soft:rgba(15,23,42,0.08);
      --shadow:0 4px 20px rgba(15,23,42,0.08);
      --r:8px;
      --tr:.2s ease;
    }

    html{background:#fff}
    body{
      font-family:'DM Sans',sans-serif;
      background:#fff;
      color:var(--navy);
      font-weight:400;
      letter-spacing:0;
    }

    /* Fonts — remove Apple system font, use DM Sans throughout */
    h1,h2,h3,h4,
    .nav-logo,.flogo,.sec-title,.panel-title,
    .proof-lead h2,.hero-proof-head h3,.hero-process-title,
    .stat-num,.pa-range,.master-table td.t-price{
      font-family:'DM Sans',sans-serif !important;
      letter-spacing:-.01em;
    }
    h1,h2,h3,h4{font-weight:700}

    /* ── Nav: solid white, navy text, no frosted glass ── */
    #navbar{
      background:#fff !important;
      border-bottom:2px solid rgba(15,23,42,.1);
      box-shadow:0 2px 8px rgba(15,23,42,.06) !important;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    #navbar.scrolled{background:#fff !important;box-shadow:0 2px 12px rgba(15,23,42,.1) !important}
    .nav-inner{height:60px;padding:0 32px}
    .nav-logo{font-family:'DM Sans',sans-serif !important;font-size:1rem;font-weight:800;letter-spacing:.06em !important;color:var(--navy)}
    .nav-logo .sep{color:var(--gold);margin:0 8px}
    .nav-links{gap:20px}
    .nav-links a{font-size:.72rem;color:var(--navy-soft);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
    .nav-links a::after{background:var(--gold)}
    .nav-cta{
      border-radius:4px !important;
      padding:8px 16px;
      font-size:.7rem !important;
      background:var(--navy) !important;
      color:#fff !important;
      box-shadow:none !important;
      letter-spacing:.1em !important;
    }
    .nav-inquiry{
      background:#fff !important;
      color:var(--navy) !important;
      border:1px solid rgba(15,23,42,.2) !important;
      border-radius:4px !important;
      font-size:.7rem !important;
      letter-spacing:.08em !important;
    }
    .nav-cta:hover{background:var(--gold) !important;transform:none !important}
    .nav-inquiry:hover{background:var(--gold-pale) !important;border-color:var(--gold) !important;color:var(--navy) !important;transform:none !important}
    .dropdown-menu{
      border:1px solid rgba(15,23,42,.12);
      border-radius:8px;
      box-shadow:0 8px 32px rgba(15,23,42,.14);
      padding:6px;
      min-width:260px;
      backdrop-filter:none;
    }
    .dropdown-menu::after{display:none}
    .dropdown-menu li a{border-radius:4px;padding:9px 12px;color:var(--navy-soft) !important;font-size:.78rem}
    .dropdown-menu li a:hover{background:var(--gold-pale);color:var(--navy) !important}
    .dropdown-menu .dd-label{color:var(--gold-dark);padding:8px 12px 4px;font-size:.6rem;letter-spacing:.14em}

    /* ── Hero: left-aligned, compact, functional ── */
    body::before,#home::after,.hero-bg{display:none !important}
    .hero-pipes{opacity:.04}
    #home{
      min-height:auto;
      padding:96px 48px 56px;
      background:linear-gradient(160deg,#F8FAFC 0%,#fff 60%);
      border-bottom:1px solid rgba(15,23,42,.08);
    }
    .hero-content{
      display:block;
      text-align:left;
      justify-items:start;
    }
    .hero-badge{
      margin-bottom:16px;
      justify-content:flex-start;
      font-size:.68rem;
      letter-spacing:.18em;
      color:var(--gold-dark);
    }
    .hero-badge::before{background:var(--gold);width:24px}
    .hero-title{
      font-family:'DM Sans',sans-serif !important;
      max-width:820px;
      font-size:clamp(2.2rem,4.5vw,3.8rem) !important;
      font-weight:800 !important;
      line-height:1.1 !important;
      letter-spacing:-.02em !important;
      color:var(--navy);
      margin-bottom:16px !important;
    }
    .hero-title em{
      display:inline;
      font-style:normal !important;
      font-weight:400 !important;
      color:var(--navy-soft) !important;
      font-size:.75em !important;
    }
    .hero-title-v2{
      font-family:'DM Sans',sans-serif !important;
      font-size:clamp(2.2rem,4.5vw,3.8rem) !important;
      font-weight:800 !important;
      letter-spacing:-.03em !important;
      color:var(--navy) !important;
      margin-bottom:10px !important;
    }
    .hero-title-sub{
      font-family:'DM Sans',sans-serif !important;
      font-style:normal !important;
      font-weight:400 !important;
      color:var(--navy-soft) !important;
      font-size:clamp(1.3rem,2.8vw,2.2rem) !important;
    }
    #home p{
      max-width:560px !important;
      color:var(--navy-soft) !important;
      font-size:.95rem !important;
      line-height:1.65 !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }
    #home p:first-of-type{font-weight:500 !important;color:var(--navy) !important}
    #home [style*="border-radius:999px"]{
      border-color:var(--border) !important;
      background:var(--gold-pale) !important;
      color:var(--gold-dark) !important;
    }
    .hero-actions,.hero-actions-v2{justify-content:flex-start;gap:10px}

    /* Buttons — rectangular, sharp, utilitarian */
    .btn-primary,.btn-secondary,.btn-wa,.bulk-btn,.wa-btn,.submit-btn,.bar-btn-primary,.form-submit-btn{
      border-radius:6px !important;
      padding:12px 22px;
      text-transform:uppercase;
      letter-spacing:.1em !important;
      font-weight:600;
      font-size:.76rem;
      box-shadow:none !important;
    }
    .btn-primary,.bulk-btn,.form-submit-btn{background:var(--navy) !important;color:#fff !important}
    .btn-primary:hover,.bulk-btn:hover,.form-submit-btn:hover{background:var(--gold) !important;transform:translateY(-1px) !important}
    .btn-secondary{
      background:transparent !important;
      color:var(--navy) !important;
      border:1.5px solid var(--navy) !important;
    }
    .btn-secondary:hover{background:var(--navy) !important;color:#fff !important;transform:translateY(-1px) !important}
    .btn-wa,.wa-btn,.submit-btn,.bar-btn-primary{background:#25D366 !important;color:#fff !important}
    .btn-wa:hover,.wa-btn:hover{background:#1ebe5c !important;transform:translateY(-1px) !important}
    .btn-primary::after,.btn-wa::after,.nav-cta::after,.bar-btn-primary::after{display:none !important}

    .hero-stats{
      justify-content:flex-start;
      gap:28px;
      margin-top:28px;
      text-align:left;
    }
    .stat-num{font-size:1.8rem;color:var(--navy);font-weight:800}
    .stat-lbl{color:var(--muted);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}
    .stat-div{background:rgba(15,23,42,.12)}

    .hero-proof-grid{
      grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
      gap:16px;
      margin-top:36px;
      text-align:left;
      width:100%;
    }

    /* Cards — solid white, thin border, no backdrop-filter */
    .hero-proof-card,.hero-process-card,.proof-card,.catalog-shell,.section-shell,
    .contact-shell,.product-panel,.master-table-wrap,.tcard,.local-card,.ops-card,
    .catalog-fact,.pa-card{
      background:#fff !important;
      border:1px solid rgba(15,23,42,.1) !important;
      border-radius:12px !important;
      box-shadow:0 4px 16px rgba(15,23,42,.06) !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
    }
    .hero-proof-card,.hero-process-card{padding:24px}
    .hero-service{
      background:#F8FAFC !important;
      border:1px solid rgba(15,23,42,.07) !important;
      border-radius:8px !important;
      box-shadow:none !important;
    }
    .hero-service:hover,.hero-proof-card:hover,.hero-process-card:hover,.proof-card:hover,
    .tcard:hover,.local-card:hover,.ops-card:hover,.catalog-fact:hover,.product-panel:hover{
      transform:translateY(-2px) !important;
      box-shadow:0 8px 28px rgba(15,23,42,.1) !important;
      border-color:rgba(249,115,22,.3) !important;
    }
    .hero-proof-tag,.brand-chip,.t-brand-chip,.stock-badge,.pill,.qbtn,.atq-btn{
      border-radius:4px !important;
      border-color:rgba(15,23,42,.12) !important;
      background:#F8FAFC !important;
      color:var(--navy-soft) !important;
    }
    .hero-process-step span{background:var(--gold) !important;color:#fff !important}

    /* ── Proof band ── */
    .proof-band{padding:0 0 48px}
    .proof-band-grid{grid-template-columns:1.2fr repeat(3,1fr);gap:12px}
    .proof-lead{
      background:var(--navy) !important;
      color:#fff;
      border-radius:12px !important;
      box-shadow:0 8px 32px rgba(15,23,42,.18) !important;
    }
    .proof-lead h2{color:#fff;font-size:1.9rem;letter-spacing:-.02em}
    .proof-lead p,.proof-meta div span{color:rgba(255,255,255,.66)}
    .proof-card li::before,.uc-dot{background:var(--gold)}

    /* ── Gallery ── */
    .gallery-strip{padding:0 0 60px}
    .gallery-grid{gap:10px;border-radius:0;overflow:visible}
    .gi{border-radius:10px;box-shadow:0 4px 16px rgba(15,23,42,.1)}
    .gi img{filter:saturate(.95) contrast(1.02)}
    .gcap{background:linear-gradient(to top,rgba(0,0,0,.62),transparent);padding:40px 20px 16px}
    .gcap-t{font-family:'DM Sans',sans-serif;font-weight:700}

    /* ── Products section ── */
    #products{padding:64px 0 80px}
    .sec-lbl{font-size:.62rem;letter-spacing:.18em;color:var(--gold-dark)}
    .sec-lbl::before{background:var(--gold);width:20px}
    .sec-title{
      font-size:clamp(1.8rem,3.5vw,2.8rem);
      font-weight:800;
      line-height:1.08;
      color:var(--navy);
      margin-bottom:12px;
    }
    .sec-desc,.about-body{color:var(--muted);font-size:.9rem;line-height:1.65}
    .urgency-bar{
      background:#fff;
      border:1px solid rgba(15,23,42,.1);
      border-radius:10px;
      box-shadow:none;
    }
    .urgency-item{color:var(--navy);border-color:rgba(15,23,42,.08)}
    .urgency-text{color:var(--muted)}
    .urgency-text strong{color:var(--gold-dark)}
    .urgency-dot{background:#22c55e;animation:none !important}
    .price-anchor-strip{gap:12px;margin-top:18px}
    .pa-card{padding:18px;border-radius:10px !important}
    .pa-card::before{display:none}
    .pa-range{font-size:1.5rem;color:var(--navy);font-weight:800}
    .pa-note{color:var(--gold-dark);font-style:normal}
    .catalog-shell{padding:24px;margin-top:28px;border-radius:10px !important}
    .catalog-topbar h3{font-size:1.55rem;font-weight:800;color:var(--navy)}
    .toolbar{
      background:#F8FAFC;
      border:1px solid rgba(15,23,42,.07);
      border-radius:8px;
      box-shadow:none;
    }
    .search-wrap input{
      border-color:rgba(15,23,42,.12);
      border-radius:6px;
      background:#fff;
    }
    .pill.active,.vt-btn.active{
      background:var(--navy) !important;
      color:#fff !important;
      border-color:var(--navy) !important;
      box-shadow:none !important;
    }
    .view-toggle{background:#fff;border-color:rgba(15,23,42,.1);border-radius:6px}
    .catalog-note{
      border-color:rgba(249,115,22,.24);
      background:var(--gold-pale);
      border-radius:8px;
    }
    .product-panel{overflow:hidden;border-radius:12px !important}
    .panel-top{grid-template-columns:320px 1fr}
    .panel-info{background:#fff;padding:28px}
    .panel-img-badge{background:rgba(15,23,42,.8)}
    .brand-tabs,.panel-fcta{background:#F8FAFC}
    .brand-tab.active{border-bottom-color:var(--gold);color:var(--gold-dark)}
    .size-table-wrap{background:#fff}
    .master-table thead{background:var(--navy)}
    .master-table tbody tr:hover{background:var(--gold-pale)}
    .master-table tbody tr.cat-header-row{background:#F8FAFC}
    .master-table tbody tr.cat-header-row td{font-family:'DM Sans',sans-serif !important;color:var(--navy);border-bottom:1px solid rgba(15,23,42,.08)}
    .atq-btn:hover,.atq-btn.added,.qbtn:hover{background:var(--navy) !important;color:#fff !important;transform:none !important}

    /* ── About section ── */
    #about{
      padding:72px 0;
      background:var(--navy);
      color:#fff;
    }
    #about .sec-title{color:#fff}
    #about .sec-desc,#about .about-body{color:rgba(255,255,255,.66)}
    .heritage-row,.feat-grid{gap:12px}
    .heritage-card,.feat{
      border:1px solid rgba(255,255,255,.12) !important;
      border-radius:10px !important;
      background:rgba(255,255,255,.05);
      box-shadow:none !important;
    }
    .heritage-card:hover,.feat:hover{background:rgba(255,255,255,.09);border-color:rgba(249,115,22,.4) !important}
    .heritage-card-num{font-family:'DM Sans',sans-serif !important;color:rgba(249,115,22,.5);font-size:2.2rem;font-weight:800}
    .feat-icon{background:rgba(249,115,22,.18);color:var(--gold-light)}

    /* ── Testimonials and Contact ── */
    #testimonials,#contact{padding:72px 0}
    .testimonials-grid{gap:14px}
    .tcard::before{color:rgba(249,115,22,.2) !important}
    .tcard-stars{color:var(--gold-dark);letter-spacing:1px}
    .contact-grid{gap:36px}
    .contact-aside{
      background:var(--navy);
      border-radius:12px;
      box-shadow:0 8px 40px rgba(15,23,42,.18);
    }
    .cicon{border-radius:8px;background:var(--gold-pale);border-color:rgba(249,115,22,.2);color:var(--gold-dark)}
    .citem:hover .cicon{background:var(--gold-pale);transform:none;box-shadow:none}
    .map-box{border-radius:10px;border-color:rgba(15,23,42,.1)}
    footer{background:#F8FAFC;border-top:2px solid rgba(15,23,42,.08)}
    .flogo{font-size:.95rem;font-weight:800;font-family:'DM Sans',sans-serif}

    /* ── Sticky bar ── */
    #stickyBar{
      left:12px;
      right:12px;
      bottom:12px;
      border:1px solid rgba(15,23,42,.2);
      border-radius:10px;
      background:rgba(15,23,42,.84);
      padding:12px 16px;
      box-shadow:0 8px 32px rgba(15,23,42,.22) !important;
      backdrop-filter:blur(18px) saturate(1.4);
      -webkit-backdrop-filter:blur(18px) saturate(1.4);
    }
    #cartBtn{background:var(--gold) !important;border:none !important;border-radius:6px !important}
    #cartDrawer,.modal{background:#fff !important;border-radius:12px 0 0 12px}
    .cart-header,.modal-header{background:var(--navy)}
    .cart-item{border-radius:8px;background:#fff;border-color:rgba(15,23,42,.08)}

    /* ── Section backgrounds (alternating for B2B density) ── */
    section{background:transparent}

    /* ── Misc ── */
    *{scrollbar-color:rgba(249,115,22,.3) transparent}
    ::selection{background:rgba(249,115,22,.18);color:var(--navy)}

    /* ── section shell: replace frosted with flat ── */
    .section-shell{
      background:linear-gradient(180deg,#fff,#F8FAFC) !important;
      border:1px solid rgba(15,23,42,.08) !important;
      border-radius:12px !important;
      box-shadow:0 4px 20px rgba(15,23,42,.05) !important;
    }

    @media(max-width:900px){
      .hero-content{text-align:left;justify-items:start}
      .hero-badge{justify-content:flex-start}
      .hero-actions,.hero-stats{justify-content:flex-start;text-align:left}
      .hero-proof-grid,.proof-band-grid,.panel-top{grid-template-columns:1fr}
      .panel-img img{min-height:260px;max-height:320px}
      .proof-band-grid{gap:12px}
      .nav-inner{padding:0 20px}
      .mobile-menu{
        border-radius:12px;
        background:#fff;
        border-color:rgba(15,23,42,.12);
      }
      .mobile-menu-cta{border-radius:6px;background:var(--navy)}
      .mobile-menu-cta.wa{background:#16a34a}
    }
    @media(max-width:640px){
      .nav-inner,.si,.fi{padding-left:16px;padding-right:16px}
      #home{padding:90px 16px 36px}
      .hero-title{
        font-size:clamp(1.9rem,8vw,2.5rem) !important;
        line-height:1.1 !important;
        margin-bottom:10px !important;
      }
      .hero-title em{font-size:.7em !important;margin-top:.1em !important}
      /* New hero v2 mobile */
      .hero-title-v2{font-size:clamp(2.2rem,9vw,3rem);letter-spacing:-.02em}
      .hero-title-sub{font-size:clamp(1.2rem,5.5vw,1.8rem)}
      .hero-checklist{grid-template-columns:1fr 1fr;gap:8px 16px;margin:20px 0 22px;max-width:100%}
      .hero-check-item{font-size:.82rem}
      .hero-actions-v2{flex-direction:column;gap:8px;width:100%}
      .hcta-primary,.hcta-secondary,.hcta-wa{width:100%;justify-content:center;padding:15px 18px}
      .hero-trust-band{max-width:100%;padding:14px 12px;border-radius:10px;margin-bottom:28px}
      .htb-item{padding:0 8px}
      .htb-num{font-size:1rem}
      .htb-label{font-size:.48rem;letter-spacing:.07em}
      .htb-divider{height:26px}
      .hero-badge{margin-bottom:12px}
      #home p{font-size:.9rem !important;margin-bottom:12px !important}
      .hero-actions{width:100%}
      .btn-primary,.btn-secondary,.btn-wa{width:100%;justify-content:center}
      .hero-proof-card,.hero-process-card,.catalog-shell,.section-shell,.contact-shell{padding:16px}
      .gallery-grid,.catalog-facts,.price-anchor-strip{grid-template-columns:1fr}
      .proof-lead h2{font-size:1.7rem}
      .stat-num{font-size:1.5rem}
      #stickyBar{left:8px;right:8px;bottom:8px;border-radius:8px}
      .bar-icon{display:none}
      .cart-header,.modal-header,.modal-body,.modal-footer{padding-left:18px;padding-right:18px}
      /* Move cart/float buttons above mobile sticky bar */
      #cartBtn{bottom:82px !important}
    }

/* ═══════════════════════════════════════════════════════════════
   VISUAL UPGRADE — brand logos + visual hierarchy
   Appended after all previous rules. Edit here, not above.
   ═══════════════════════════════════════════════════════════════ */

/* ── Brand logos section ── */
#brand-logos{
  padding:40px 0 42px;
  background:#fff;
  border-top:1px solid rgba(15,23,42,.07);
  border-bottom:1px solid rgba(15,23,42,.07);
}
.brand-trust-row{display:flex;flex-direction:column;align-items:center;gap:24px}
.btr-eyebrow{
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);text-align:center;
  display:flex;align-items:center;gap:16px;white-space:nowrap;
}
.btr-eyebrow::before,.btr-eyebrow::after{
  content:'';display:block;flex-shrink:0;width:40px;height:1px;background:rgba(15,23,42,.14);
}
.btr-grid{
  display:flex;flex-wrap:nowrap;gap:16px;align-items:stretch;width:100%;max-width:920px;
}
.btr-sep{
  width:1px;flex-shrink:0;
  background:rgba(15,23,42,.08);
  margin:4px 0;
  align-self:stretch;
}
.btr-card{
  flex:1;min-width:200px;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:11px;
  text-decoration:none;border-radius:10px;padding:6px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.btr-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(15,23,42,.10)}
.btr-logo{
  width:100%;border-radius:8px;overflow:hidden;
  box-shadow:0 3px 14px rgba(15,23,42,.18);line-height:0;
}
.btr-logo svg{width:100%;height:auto;display:block}
.btr-logo-img{
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:12px 18px;
  min-height:76px;width:100%;
  border-radius:8px;
  box-shadow:0 3px 14px rgba(15,23,42,.12);
}
.btr-range{
  font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.5;
}

/* ── Visual hierarchy: bigger headings ── */

/* Hero h1 — was clamp(2.2rem,5vw,4.8rem) inline */
#home h1.hero-title{
  font-size:clamp(3rem,5.8vw,5.8rem) !important;
  line-height:1.05 !important;
}

/* Section titles — was clamp(1.8rem,3.5vw,2.8rem) */
.sec-title{
  font-size:clamp(2.2rem,4vw,3.5rem) !important;
  line-height:1.08 !important;
}

/* Product panel titles */
.panel-title{font-size:2.2rem !important}

/* Proof-lead headline */
.proof-lead h2{font-size:2.3rem !important;line-height:1.1 !important}

/* ── Gallery: horizontal scroll carousel ── */
.gallery-strip { padding: 0 0 90px; }

/* Wrapper gives us the scroll-hint fade on the right */
.gallery-strip .si { position: relative; }
.gallery-strip .si::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 4px;
  width: 56px;
  background: linear-gradient(to right, transparent, rgba(252,252,250,.96));
  pointer-events: none;
  z-index: 2;
  border-radius: 0 14px 14px 0;
}

.gallery-scroll-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gallery-scroll-track::-webkit-scrollbar { display: none; }
.gallery-scroll-track .gi {
  flex: 0 0 calc(25% - 11px);  /* 4 cards visible on desktop */
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;          /* portrait — taller & narrower for 4-up */
  min-height: 240px;
  text-decoration: none;
  display: block;
  position: relative;
}
.gallery-scroll-track .gi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transition: transform 0.6s ease;
}
.gallery-scroll-track .gi:hover img { transform: scale(1.05); }

@media (max-width: 1024px) {
  .gallery-scroll-track .gi {
    flex: 0 0 calc(33.333% - 10px);  /* show 3 on tablet */
  }
}
@media (max-width: 700px) {
  .gallery-scroll-track .gi {
    flex: 0 0 58vw;   /* show ~1.6 cards on mobile — peek effect */
    aspect-ratio: 3 / 4;
  }
}
@media (max-width: 420px) {
  .gallery-scroll-track .gi {
    flex: 0 0 72vw;
  }
}

/* ── Remove old gallery-grid rules that conflict ── */
.gcap-t{font-size:1.05rem !important;font-family:'DM Sans',sans-serif !important;font-weight:700 !important;}
.gcap-s{font-size:.68rem !important;letter-spacing:.13em;}

/* ── Product panels: bigger image column ── */
.panel-top{grid-template-columns:420px 1fr !important}
.panel-img img{min-height:360px !important}

/* ── Responsive overrides ── */
@media(max-width:1060px){
  .panel-top{grid-template-columns:320px 1fr !important}
  .panel-img img{min-height:300px !important}
}
@media(max-width:900px){
  .btr-grid{flex-direction:column;max-width:400px}
  .btr-sep{width:auto;height:1px;margin:0}
  .gallery-grid{grid-template-columns:1fr 1fr !important}
  .gi{min-height:0}
  .panel-top{grid-template-columns:1fr !important}
  .panel-img img{min-height:260px !important;max-height:320px !important}
  #home h1.hero-title{font-size:clamp(2.4rem,7vw,3.8rem) !important}
}
@media(max-width:640px){
  .btr-grid{max-width:100%}
  .gallery-grid{grid-template-columns:1fr !important}
  #home h1.hero-title{font-size:clamp(2rem,8vw,2.8rem) !important}
  .sec-title{font-size:clamp(1.9rem,7.5vw,2.5rem) !important}
}

/* ═══════════════════════════════════════════════════════════════
   GULF STEEL STYLE HERO — full-bleed photo + dark directional overlay
   ═══════════════════════════════════════════════════════════════ */

/* 1 ── Background image (fallback only — the crossfade slideshow below
   sits on top of this and is what's actually visible once JS runs) */
#home {
  background-image: url('/hero.webp') !important;
  background-size: cover !important;
  background-position: center 45% !important;
  background-color: #07131f !important;
}

/* 1b ── Slideshow now powers the full-bleed hero background (was a
   44%-wide side panel before — promoted to fill #home entirely so the
   crossfade IS the hero photo, with the directional overlay below on top) */
.hero-pipes {
  position: absolute !important;
  inset: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  z-index: 0;
  /* FIX: The Refinement Layer applied nt-breathe (opacity 0.055→0.085) to
     .hero-pipes when it was a decorative side panel. Now that .hero-pipes
     is the full-bleed slideshow container, that animation makes the entire
     hero nearly invisible. Cancel it here. */
  animation: none !important;
  opacity: 1 !important;
}
.hero-pipes img { width: 100%; height: 100%; object-fit: cover; }
/* The old side-panel left-fade gradient doesn't apply to a full-bleed
   dark hero — #home::before (directional dark overlay) replaces it */
.hero-pipes-overlay { display: none !important; }

/* 2 ── Directional dark overlay: heavier on left (text), lighter on right (reveals pipes) */
#home::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    rgba(7,19,31,0.90) 0%,
    rgba(7,19,31,0.78) 38%,
    rgba(7,19,31,0.52) 65%,
    rgba(7,19,31,0.30) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* 3 ── Hide decorative elements that clash with image bg */
.hero-bg    { display: none !important; }
.hero-trust-pills { display: none !important; }
.hero-proof-grid  { display: none !important; }

/* 4 ── Hero content stacks above overlay */
.hero-content { position: relative; z-index: 2; }

/* 5 ── All hero text → white */
.hero-badge { color: var(--gold-light) !important; }
.hero-badge::before { background: var(--gold-light) !important; }

#home h1.hero-title { color: #ffffff !important; }
#home .hero-title em { color: rgba(255,255,255,0.72) !important; }

#home p { color: rgba(255,255,255,0.80) !important; }
#home p strong { color: #ffffff !important; }

/* 5b ── Current homepage markup uses the v2 hero classes, not the old
   .hero-title/.hero-desc ones above — those rules never matched, which is
   why the headline, sub-line and checklist were rendering in dark navy on
   top of the dark photo (illegible). Recolor the actual elements here. */
#home .hero-title-v2 { color: #ffffff !important; }
#home .hero-title-sub { color: rgba(255,255,255,0.78) !important; }

#home .hero-check-item { color: rgba(255,255,255,0.88) !important; }
#home .hc-mark {
  background: rgba(74,222,128,0.18) !important;
  color: #4ade80 !important;
  border-color: rgba(74,222,128,0.35) !important;
}

/* 6 ── Buttons adjusted for dark background */
.btn-primary {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover {
  background: var(--gold-dark) !important;
}

.btn-secondary {
  border-color: rgba(255,255,255,0.50) !important;
  color: #ffffff !important;
  background: transparent !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.80) !important;
  color: #ffffff !important;
}

.btn-wa {
  background: rgba(37,211,102,0.95) !important;
}

/* 6b ── Real CTA row in the current markup is .hcta-secondary ("Call Now"),
   not .btn-secondary — it was inheriting dark-navy text/border and nearly
   disappearing against the photo. */
#home .hcta-secondary {
  border-color: rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.06) !important;
}
#home .hcta-secondary:hover {
  border-color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.14) !important;
}

/* 7 ── Stats row: white on dark */
.hero-stats {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.14) !important;
}
.stat-num {
  color: #ffffff !important;
  font-size: 2.7rem !important;
}
.stat-lbl { color: rgba(255,255,255,0.55) !important; }
.stat-div  { background: rgba(255,255,255,0.16) !important; }

/* 8 ── Mobile */
@media(max-width:900px) {
  #home { background-position: 70% 38% !important; }
  #home::before {
    background: rgba(7,19,31,0.78) !important;
  }
}
@media(max-width:640px) {
  #home::before { background: rgba(7,19,31,0.82) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HERO POLISH — tighter layout, better button stack,
   hide redundant copy, compact stats. Targets ≤640px.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* 1 ── Hero section spacing */
  #home {
    padding: 92px 18px 44px !important;
    min-height: 100svh;
  }

  /* 2 ── Badge: tighter, prevent wrapping at seams */
  .hero-badge {
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
  }
  .hero-badge::before { width: 22px !important; }

  /* 3 ── Title: fit cleanly in 2 lines max */
  #home h1.hero-title {
    font-size: clamp(1.95rem, 8.5vw, 2.5rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }
  #home .hero-title em {
    display: block !important;
    font-size: .52em !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,0.65) !important;
  }

  /* 4 ── Hide the redundant location paragraph */
  .hero-location-line { display: none !important; }

  /* 5 ── Body copy: tighter */
  #home p {
    font-size: .88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
  }

  /* 6 ── Trust pills: show on mobile, tighter */
  .hero-trust-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 22px !important;
  }
  .hero-trust-pills span {
    font-size: .6rem !important;
    padding: 5px 10px !important;
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.78) !important;
  }
  .hero-trust-pills span > span {
    /* dot */
    flex-shrink: 0;
  }

  /* 7 ── Buttons: primary full-width, WA + Call side-by-side below */
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .hero-actions .btn-primary {
    grid-column: 1 / -1 !important;   /* full width */
    justify-content: center !important;
    padding: 15px 18px !important;
    font-size: .74rem !important;
    letter-spacing: .1em !important;
  }
  .hero-actions .btn-wa {
    justify-content: center !important;
    padding: 13px 12px !important;
    font-size: .72rem !important;
    letter-spacing: .08em !important;
    gap: 6px !important;
  }
  .hero-actions .btn-secondary {
    justify-content: center !important;
    padding: 12px 12px !important;
    font-size: .72rem !important;
    letter-spacing: .08em !important;
    gap: 6px !important;
    border-color: rgba(255,255,255,0.35) !important;
  }

  /* 8 ── Stats row: 2×2 compact grid */
  .hero-stats {
    margin-top: 28px !important;
    padding-top: 22px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 24px !important;
    border-top: 1px solid rgba(255,255,255,0.14) !important;
  }
  .stat-div { display: none !important; }
  .stat-num {
    font-size: 1.7rem !important;
    line-height: 1 !important;
  }
  .stat-lbl {
    font-size: .65rem !important;
    margin-top: 3px !important;
    color: rgba(255,255,255,0.55) !important;
  }

  /* 9 ── Slide indicator dots — lift above safe-area */
  .slide-badge { bottom: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN POLISH — All 8 issues fixed
   1) Typography scale  2) Brand color  3) Cross-page consistency
   4) Minimum text sizes  5) Image treatment  6) ✅ Urgency anim already off
   7) Best Seller badge  8) Mobile table
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX 1 + 4: Typography scale — 6 clear stops, min 0.8rem body ── */
:root {
  --text-xs:   0.72rem;   /* labels, eyebrows (was .62–.68rem chaos)  */
  --text-sm:   0.8rem;    /* body-small, table captions                */
  --text-base: 0.9rem;    /* body text                                 */
  --text-md:   1.05rem;   /* card titles, sub-headings                 */
  --text-lg:   1.4rem;    /* section sub-headings                      */
  --text-xl:   2.2rem;    /* section titles                            */
}

/* Enforce minimum readable size in all data/catalog areas */
.size-table th                         { font-size: var(--text-xs)  !important; letter-spacing:.12em; }
.size-table td                         { font-size: var(--text-sm)  !important; }
.size-table td.sz                      { font-size: 0.88rem         !important; }
.catalog-fact .k, .catalog-fact .v,
.catalog-fact .s                       { font-size: var(--text-sm)  !important; }
.panel-subtitle                        { font-size: var(--text-sm)  !important; }
.panel-desc                            { font-size: var(--text-sm)  !important; }
.uc-item                               { font-size: var(--text-sm)  !important; }
.urgency-text                          { font-size: var(--text-sm)  !important; }
.urgency-text strong                   { font-size: 0.84rem         !important; }
.brand-tab                             { font-size: var(--text-xs)  !important; }
.price-disc                            { font-size: var(--text-xs)  !important; }
.panel-brands .brand-chip              { font-size: var(--text-xs)  !important; }
/* Table footnotes / avail note */
.panel-fcta p                          { font-size: var(--text-xs)  !important; }

/* ── FIX 2: Brand color — warmer amber tone, less construction-site neon ── */
:root {
  --gold:       #E8670E;  /* warmer, richer — reads as premium orange not safety vest */
  --gold-light: #F07820;
  --gold-dark:  #B8420C;
  --gold-pale:  #FEF0E0;
  --border:     rgba(232,103,14,0.18);
}
/* Ensure the overrides pick up the new token */
.urgency-dot           { background: #22c55e; animation: none !important; }
.pa-card::before       { background: var(--gold); }
.size-table thead tr   { border-bottom: 1px solid var(--border); }
.brand-tab.active      { border-bottom-color: var(--gold); }

/* ── FIX 5: Product image treatment — better object-position + overlay ── */
.panel-img img {
  object-position: center 55% !important;
}
/* Subtle right-side gradient so image blends into panel-info */
.panel-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 60%,
    rgba(248,250,252,0.45) 100%
  ), linear-gradient(
    to top,
    rgba(15,23,42,0.18) 0%,
    transparent 35%
  );
  pointer-events: none;
  z-index: 1;
}
/* Ensure badge stays above overlay */
.panel-img-badge, .cat-icon-wrap { z-index: 2; }

/* ── FIX 7: Best Seller badge ── */
.best-seller-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  vertical-align: middle;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700 !important;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--gold);
  color: #fff;
  position: relative;
  top: -3px;
}

/* ── FIX 8: Mobile price table — collapse long-length column at ≤520px ── */
/* Hide the long-length column on narrow screens to prevent scroll fatigue */
@media (max-width: 520px) {
  .th-long, .td-long { display: none !important; }
  .th-short           { white-space: nowrap; }

  /* Re-label the short column to just "Price" on mobile */
  .th-short::after   { content: ' (Best Avail)'; font-style: italic; font-weight: 400; opacity: .7; }

  /* Compact the remaining columns for a tighter fit */
  .size-table th { font-size: 0.68rem !important; padding: 0 8px 8px 0 !important; }
  .size-table td { padding: 7px 8px 7px 0 !important; font-size: 0.8rem !important; }
  .size-table td.sz { font-size: 0.86rem !important; }

  /* Make the table-wrap non-scrolling now it fits */
  .size-table-wrap { overflow-x: hidden; }
}
/* Scroll hint on medium-small screens where table still overflows */
@media (min-width: 521px) and (max-width: 700px) {
  .size-table-wrap {
    position: relative;
  }
  .size-table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.92));
    pointer-events: none;
    z-index: 2;
  }
}

/* ── FIX 3: Cross-page consistency — section labels match homepage ── */
/* These rules ensure article pages share the same heading/label DNA */
.sec-lbl {
  font-size: var(--text-xs) !important;
  letter-spacing: .18em !important;
  color: var(--gold-dark) !important;
}
.sec-title {
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

/* ── Availability note styling (added by JS for trimmed tables) ── */
.panel-fcta .avail-note-text {
  font-size: var(--text-xs);
  color: var(--muted-2);
  line-height: 1.6;
  padding: 10px 16px;
  background: rgba(232,103,14,.06);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  margin: 10px 0 14px;
}
.panel-fcta .avail-note-text a {
  color: var(--gold-dark);
  font-weight: 600;
  text-decoration: none;
}
.panel-fcta .avail-note-text a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   2026 DESIGN UPGRADES
   Rate ticker · Asymmetric stats · Icon steps · Marquee · Calculator
   ═══════════════════════════════════════════════════════════════ */

/* ── Rate Ticker ── */
.rate-ticker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 6px 16px 6px 10px;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 100%;
  flex-wrap: wrap;
}
.ticker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: tickerPulse 2s ease-in-out infinite;
}
@keyframes tickerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.ticker-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #22c55e;
  font-weight: 600;
  white-space: nowrap;
}
.ticker-divider {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
}
.ticker-text {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}
.ticker-cta {
  font-size: 0.7rem;
  color: var(--gold-light);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.ticker-cta:hover { color: #fff; }

/* ── Asymmetric Editorial Stats ── */
.hero-stats-asymm {
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14) !important;
  flex-wrap: wrap;
}
.stat-editorial {
  padding-right: 48px;
  padding-bottom: 0;
}
.stat-editorial .stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(3.5rem, 7vw, 5.2rem) !important;
  font-weight: 600;
  line-height: 1;
  color: #fff !important;
  letter-spacing: -0.02em;
}
.stat-editorial .stat-lbl {
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52) !important;
  margin-top: 6px;
  line-height: 1.5;
}
.stat-aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 48px;
  border-left: 1px solid rgba(255,255,255,0.14);
  margin-left: auto;
  align-self: center;
}
.stat-aside-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.03em;
}
.stat-aside-item svg {
  color: var(--gold-light);
  flex-shrink: 0;
}

/* ── Icon-based Process Steps ── */
.step-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 52px;
  flex-shrink: 0;
}
.step-eyebrow {
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
.step-icon-wrap svg {
  color: var(--navy);
  opacity: 0.75;
  background: rgba(232,103,14,0.09);
  border-radius: 10px;
  padding: 4px;
  width: 34px !important;
  height: 34px !important;
  box-sizing: content-box;
}

/* Update grid to accommodate new icon layout */
.hero-process-step {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(15,23,42,0.06) !important;
}
.hero-process-step:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ── Auto-scrolling Brand Marquee ── */
#brand-logos {
  padding: 28px 0;
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  background: #fff;
  overflow: hidden;
}
.btr-eyebrow-outer {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  padding: 0 20px;
}
.btr-marquee-wrapper {
  overflow: hidden;
  position: relative;
}
/* Fade edges */
.btr-marquee-wrapper::before,
.btr-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.btr-marquee-wrapper::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.btr-marquee-wrapper::after  { right: 0; background: linear-gradient(to left, #fff, transparent); }

.btr-marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: btrScroll 30s linear infinite;
}
.btr-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes btrScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .btr-marquee-track { animation: none; }
}
.btr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 52px;
  text-decoration: none;
  border-right: 1px solid rgba(15,23,42,0.08);
  transition: background 0.25s;
  flex-shrink: 0;
}
.btr-card:hover { background: rgba(232,103,14,0.04); }
.btr-logo-img { display: flex; align-items: center; justify-content: center; }
.btr-range {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Mini Quantity Calculator ── */
.hero-calc {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 18px;
  padding: 18px 22px;
  margin-top: 28px;
  max-width: 680px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.calc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.calc-header svg { color: var(--gold-light); flex-shrink: 0; }
.calc-badge {
  margin-left: auto;
  background: rgba(232,103,14,0.25);
  color: var(--gold-light);
  border: 1px solid rgba(232,103,14,0.35);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}
.calc-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.calc-field label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}
.calc-field select,
.calc-field input {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  min-width: 100px;
}
.calc-field select:focus,
.calc-field input:focus {
  border-color: var(--gold-light);
}
.calc-field select option { background: #1a2d45; color: #fff; }
.calc-field input[type=number] { width: 90px; }
.calc-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
}
.calc-est {
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.calc-note {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calc-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: rgba(37,211,102,0.18);
  border: 1px solid rgba(37,211,102,0.35);
  color: #4ade80;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.22s, color 0.22s;
}
.calc-wa-btn:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}

/* ── Enhanced CTA Hover / Magnetic Lift ── */
.btn-primary {
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s !important;
}
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(232,103,14,0.38) !important;
}
.btn-wa {
  transition: background 0.22s, transform 0.22s, box-shadow 0.22s !important;
}
.btn-wa:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(37,211,102,0.30) !important;
}
.btn-secondary:hover {
  transform: translateY(-3px) !important;
}

/* ── Scroll-reveal: count-up preparation ── */
.stat-num[data-countup] { transition: none; }

/* ── Mobile adjustments for new elements ── */
@media (max-width: 768px) {
  .rate-ticker { display: none; }
  .hero-calc { display: none; }
  .stat-aside { display: none; }
  .hero-stats-asymm { gap: 32px; }
  .stat-editorial { padding-right: 0; }
  .stat-editorial .stat-num { font-size: clamp(2.8rem, 12vw, 4rem) !important; }
}
@media (max-width: 640px) {
  .btr-eyebrow-outer { display: none; }
}
/* ── Icon system additions (replaces emoji on homepage) ── */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-0.16em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex-shrink:0;line-height:1}
.ic-compare{color:var(--gold-dark, #C2410C);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M13%206h3a2%202%200%200%201%202%202v7%22/%3E%3Cpath%20d%3D%22M11%2018H8a2%202%200%200%201-2-2V9%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M13%206h3a2%202%200%200%201%202%202v7%22/%3E%3Cpath%20d%3D%22M11%2018H8a2%202%200%200%201-2-2V9%22/%3E%3C/svg%3E")}
.ic-tag{color:var(--gold-dark, #C2410C);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.59%2013.41L13.42%2020.58a2%202%200%200%201-2.83%200L2%2012V2h10l8.59%208.59a2%202%200%200%201%200%202.82z%22/%3E%3Cline%20x1%3D%227%22%20y1%3D%227%22%20x2%3D%227.01%22%20y2%3D%227%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.59%2013.41L13.42%2020.58a2%202%200%200%201-2.83%200L2%2012V2h10l8.59%208.59a2%202%200%200%201%200%202.82z%22/%3E%3Cline%20x1%3D%227%22%20y1%3D%227%22%20x2%3D%227.01%22%20y2%3D%227%22/%3E%3C/svg%3E")}
.ic-target{color:var(--gold-dark, #C2410C);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.4%22%20fill%3D%22black%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.4%22%20fill%3D%22black%22/%3E%3C/svg%3E")}
.ic-wrench{color:var(--gold-dark, #C2410C);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22/%3E%3C/svg%3E")}
.ic-droplet{color:var(--gold-dark, #C2410C);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22/%3E%3C/svg%3E")}
.ic-chevron-down{color:var(--navy);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22/%3E%3C/svg%3E")}
/* ── FAQ accordion: replace native triangle marker with custom chevron ── */
#home details summary,
.si details summary{
  list-style:none;
  position:relative;
  padding-right:32px;
}
#home details summary::-webkit-details-marker,
.si details summary::-webkit-details-marker{
  display:none;
}
#home details summary::after,
.si details summary::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  width:18px;
  height:18px;
  margin-top:-9px;
  background-color:var(--gold-dark, #C2410C);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:transform .25s ease;
}
#home details[open] summary::after,
.si details[open] summary::after{
  transform:rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════
   CALCULATOR · TESTIMONIALS · FOOTER UPGRADES
   ═══════════════════════════════════════════════════════════════ */

/* ── PIPE WEIGHT CALCULATOR ─────────────────────────────────── */

.calc-section-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}

.calc-trust-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctp {
  font-size: .78rem;
  color: rgba(248,250,252,.55);
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(15,23,42,.3);
}

.calc-row {
  margin-bottom: 20px;
}

.calc-label {
  display: block;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.calc-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cseg {
  padding: 6px 13px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.14);
  background: var(--cream-dark);
  color: var(--navy-soft);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.cseg:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

.cseg.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}

.calc-qty-row {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 180px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 8px;
  overflow: hidden;
}

.calc-qty-btn {
  width: 40px;
  height: 40px;
  background: var(--cream-dark);
  border: none;
  font-size: 1.2rem;
  color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-qty-btn:hover { background: rgba(15,23,42,.1); }

.calc-qty-input {
  flex: 1;
  height: 40px;
  border: none;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  outline: none;
  min-width: 0;
}

.calc-result {
  background: var(--navy);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.calc-result-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.calc-result-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.calc-result-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

.crv {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  letter-spacing: -.01em;
}

.crl {
  font-size: .55rem;
  color: rgba(248,250,252,.5);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
}

.calc-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  background: #25D366;
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  transition: background .18s ease;
}

.calc-wa-btn:hover { background: #1ebe5c; }

.calc-reset-btn {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,.14);
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.calc-reset-btn:hover { border-color: var(--navy); color: var(--navy); }

@media (max-width: 900px) {
  .calc-section-inner { grid-template-columns: 1fr; gap: 36px; }
  .calc-section-left { text-align: center; }
  .calc-section-left .calc-trust-pills { align-items: center; }
}

/* ── TESTIMONIALS UPGRADE ───────────────────────────────────── */

.testi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.google-rating-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
  flex-shrink: 0;
}

.grb-text { display: flex; flex-direction: column; gap: 2px; }

.grb-stars { color: #fbbc05; font-size: 1rem; letter-spacing: .05em; line-height: 1; }

.grb-label { font-size: .7rem; color: var(--navy-soft); font-weight: 400; }
.grb-label strong { font-weight: 600; color: var(--navy); }

.tcard {
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  box-shadow: 0 2px 16px rgba(15,23,42,.05);
  transition: box-shadow .22s ease, transform .22s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tcard:hover {
  box-shadow: 0 8px 32px rgba(15,23,42,.10);
  transform: translateY(-2px);
}

.tcard-quote {
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  color: var(--gold);
  line-height: .6;
  font-weight: 700;
  opacity: .35;
  user-select: none;
}

.tcard-text {
  font-size: .88rem;
  color: var(--navy-soft);
  line-height: 1.75;
  flex: 1;
  margin: 0;
}

.tcard-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.06);
}

.tcard-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.tcard-author {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tcard-author strong {
  font-size: .84rem;
  color: var(--navy);
  font-weight: 600;
}

.tcard-author span {
  font-size: .7rem;
  color: var(--muted);
}

.tcard-stars {
  color: #fbbc05;
  font-size: .85rem;
  letter-spacing: .05em;
  flex-shrink: 0;
}

.testi-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.testi-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1.5px solid rgba(15,23,42,.15);
  color: var(--navy);
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .05em;
  transition: border-color .18s ease, background .18s ease;
}

.testi-google-btn:hover {
  border-color: #4285F4;
  background: rgba(66,133,244,.05);
}

/* ── EXPANDED FOOTER ────────────────────────────────────────── */

footer {
  background: var(--navy);
  color: rgba(248,250,252,.75);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 56px 48px 48px;
  max-width: 1320px;
  margin: 0 auto;
}

.footer-col-brand .flogo {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .18em;
  margin-bottom: 6px;
}

.footer-col-brand .flogo .sep {
  color: var(--gold);
  margin: 0 3px;
}

.footer-col-brand .ftag {
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 400;
}

.footer-about {
  font-size: .8rem;
  line-height: 1.75;
  color: rgba(248,250,252,.55);
  margin-bottom: 16px;
  max-width: 280px;
}

.footer-gst {
  font-size: .67rem;
  color: rgba(248,250,252,.35);
  letter-spacing: .06em;
  margin-bottom: 18px;
  font-family: 'DM Mono', monospace, 'DM Sans', sans-serif;
}

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fh-row {
  display: flex;
  gap: 12px;
  font-size: .75rem;
}

.fh-day {
  color: rgba(248,250,252,.45);
  min-width: 72px;
}

.fh-time {
  color: rgba(248,250,252,.75);
  font-weight: 400;
}

.fh-closed {
  color: rgba(248,250,252,.35);
}

.footer-col .flinks-title {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248,250,252,.4);
  font-weight: 500;
  margin-bottom: 12px;
}

.footer-col .flinks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col .flinks a {
  font-size: .8rem;
  color: rgba(248,250,252,.65);
  text-decoration: none;
  transition: color .18s ease;
  line-height: 1.4;
}

.footer-col .flinks a:hover {
  color: var(--gold);
}

.footer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 16px;
}

.fcb-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .78rem;
  color: rgba(248,250,252,.62);
  line-height: 1.5;
}

.fcb-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
  opacity: .8;
}

.fcb-item a {
  color: rgba(248,250,252,.75);
  text-decoration: none;
  transition: color .18s ease;
}

.fcb-item a:hover { color: var(--gold); }

.footer-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(248,250,252,.7);
  font-size: .72rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 16px;
  transition: border-color .18s ease, color .18s ease;
}

.footer-map-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.footer-disclaimer {
  font-size: .65rem;
  color: rgba(248,250,252,.3);
  line-height: 1.6;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px 48px;
  max-width: 1320px;
  margin: 0 auto;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fcopy {
  font-size: .72rem;
  color: rgba(248,250,252,.35);
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  font-size: .72rem;
  color: rgba(248,250,252,.35);
  text-decoration: none;
  transition: color .18s ease;
}

.footer-bottom-links a:hover { color: rgba(248,250,252,.65); }

@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; padding: 44px 32px 36px; }
  .footer-bottom { padding: 16px 32px; }
}

@media (max-width: 640px) {
  .footer-main { grid-template-columns: 1fr; gap: 32px; padding: 36px 20px 28px; }
  .footer-bottom { padding: 14px 20px; }
  .testi-header { flex-direction: column; }
  .google-rating-badge { align-self: flex-start; }
}

/* ═══════════════ 2026 REFRESH ADDITIONS ═══════════════ */

/* ── Bento layout for Who We Serve ── */
.ops-bento{grid-template-columns:1.3fr 1fr;grid-auto-rows:auto}
.ops-bento .ops-card-feature{grid-row:span 2;padding:0;overflow:hidden;display:flex;flex-direction:column}
.ops-feature-media{height:240px;overflow:hidden;flex-shrink:0}
.ops-feature-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ops-card-feature:hover .ops-feature-media img{transform:scale(1.04)}
.ops-card-feature .ops-card-k,.ops-card-feature h3,.ops-card-feature p,.ops-card-feature ul{margin-left:24px;margin-right:24px}
.ops-card-feature .ops-card-k{margin-top:22px}
.ops-card-feature ul{margin-bottom:8px}
.ops-feature-cta{display:block;margin:auto 24px 22px;padding-top:14px;border-top:1px solid rgba(15,23,42,.08);font-size:.78rem;font-weight:600;color:var(--gold-dark,#C2410C);text-decoration:none;letter-spacing:.02em}
.ops-feature-cta:hover{color:var(--navy)}
@media(max-width:900px){
  .ops-bento{grid-template-columns:1fr}
  .ops-bento .ops-card-feature{grid-row:auto}
  .ops-feature-media{height:180px}
}

/* ── Catalog collapse (Show full catalogue) ── */
.catalog-shell.collapsed #gridView,
.catalog-shell.collapsed #tableView{max-height:1450px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 98%);mask-image:linear-gradient(to bottom,#000 78%,transparent 98%)}
.catalog-expand-row{display:none;text-align:center;padding-top:6px}
.catalog-shell.collapsed .catalog-expand-row{display:block}
.catalog-expand-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--navy);background:#fff;border:1px solid rgba(15,23,42,.16);border-radius:999px;padding:12px 26px;cursor:pointer;box-shadow:0 8px 26px rgba(15,23,42,.08);transition:transform .2s ease,box-shadow .2s ease}
.catalog-expand-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(15,23,42,.14)}

/* ── Today at the Yard (Instagram strip) ── */
.yard-strip{padding:80px 0;background:#fff}
.yard-strip-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.yard-follow-btn{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:#fff;text-decoration:none;border-radius:999px;padding:12px 22px;background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);box-shadow:0 10px 28px rgba(221,42,123,.28);transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}
.yard-follow-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(221,42,123,.36)}
.yard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yard-card{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:1/1;text-decoration:none;box-shadow:0 14px 40px rgba(15,23,42,.1)}
.yard-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.yard-card:hover img{transform:scale(1.05)}
.yard-card-cap{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(to top,rgba(15,23,42,.86),transparent);display:flex;flex-direction:column;gap:3px}
.yard-card-handle{font-size:.68rem;letter-spacing:.08em;font-weight:700;color:#FDBA74}
.yard-card-cap span:last-child{font-size:.84rem;font-weight:600;color:#fff;line-height:1.4}
@media(max-width:760px){
  .yard-grid{grid-template-columns:1fr;gap:14px}
  .yard-card{aspect-ratio:4/3}
  .yard-strip{padding:56px 0}
}

/* ── "Posted on Google" label for real review cards (see comment in home.body.html) ── */
.tcard-src{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;color:var(--muted);letter-spacing:.04em;white-space:nowrap}
.tcard-src::before{content:'G';font-weight:800;font-size:.72rem;color:#4285F4}