*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0A0C0F;
  --surface:#141820;
  --warm:#3D1F0A;
  --kova-earth:#3D1F0A;
  --kova-earth-mid:#4A2510;
  --kova-earth-light:#5C2E0E;
  --orange:#D4541A;
  --ember:#E8722A;
  --teal:#0DB8A0;
  --teal-light:#0DB8A0;
  --mist:#6A7A8A;
  --cloud:#A8B8C8;
  --white:#F5F7FA;
  --pure:#FFFFFF;
  --red:#c0392b;
  /* ── TYPOGRAPHY SCALE ── */
  --text-xs:clamp(0.75rem,0.7rem + 0.18vw,0.875rem);
  --text-sm:clamp(0.8125rem,0.76rem + 0.2vw,0.9375rem);
  --text-base:clamp(0.9375rem,0.88rem + 0.25vw,1.0625rem);
  --text-lg:clamp(1.0625rem,0.98rem + 0.35vw,1.25rem);
  --text-xl:clamp(1.25rem,1.1rem + 0.7vw,1.75rem);
  --text-2xl:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);
  --text-3xl:clamp(2rem,1.5rem + 2.5vw,3.5rem);
  --text-hero:clamp(3.5rem,2rem + 7.5vw,9rem);
  /* ── DURATION ── */
  /* Navbar height. main.js overwrites this with the measured value; these are
     the no-JS fallbacks (desktop 48px logo vs 38px on mobile, + padding + border). */
  --nav-h:82px;
  --dur-fast:150ms;
  --dur-normal:300ms;
  --dur-slow:500ms;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
}
/* ── LIGHT THEME ─────────────────────────────────────────────────────── */
[data-theme="light"]{
  --bg:#F0EAE2;
  --surface:#E4DDD4;
  --kova-earth:rgba(212,84,26,0.07);
  --kova-earth-mid:rgba(212,84,26,0.11);
  --kova-earth-light:rgba(212,84,26,0.15);
  --mist:#6A5C52;
  --cloud:#3D3028;
  --white:#1E1612;
  --pure:#0C0806;
}
[data-theme="light"] #navbar.scrolled{background:rgba(240,234,226,0.96)!important;border-bottom-color:var(--orange)}
[data-theme="light"] .hero-video-gradient{background:linear-gradient(to bottom,rgba(240,234,226,0.55) 0%,rgba(240,234,226,0.35) 50%,rgba(240,234,226,0.82) 100%)}
[data-theme="light"] .stat-item{border-bottom-color:rgba(0,0,0,0.1)}
[data-theme="light"] .hero-line{background:linear-gradient(to bottom,transparent,rgba(212,84,26,0.25),transparent)}
[data-theme="light"] .marquee-wrap{border-top-color:rgba(212,84,26,0.4);border-bottom-color:rgba(212,84,26,0.4)}
[data-theme="light"] .filter-bar-sticky{background:rgba(240,234,226,0.97);border-bottom-color:rgba(212,84,26,0.12)}
[data-theme="light"] .prod-card{border-color:rgba(61,31,10,0.18);box-shadow:0 2px 20px rgba(0,0,0,0.06)}
[data-theme="light"] .prod-card:hover{border-color:rgba(212,84,26,0.3);transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,0.22),0 0 40px rgba(212,84,26,0.15)}
[data-theme="light"] .prod-card::before{background:linear-gradient(135deg,rgba(212,84,26,0.13) 0%,rgba(212,84,26,0.09) 40%,rgba(212,84,26,0.05) 70%,rgba(212,84,26,0.02) 100%)}
[data-theme="light"] .prod-info{background:var(--surface)}
[data-theme="light"] .basin-grid{background:rgba(0,0,0,0.06)}
[data-theme="light"] .basin-card{background:var(--surface)}
[data-theme="light"] .basin-card:hover{background:rgba(13,184,160,0.1)}
[data-theme="light"] .dosing-grid{background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .dosing-cell{background:var(--surface)}
[data-theme="light"] .apptrade-grid{background:rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.08)}
[data-theme="light"] .apptrade-col{background:var(--surface)}
[data-theme="light"] .prod-tag{border-color:rgba(0,0,0,0.12);color:var(--mist)}
[data-theme="light"] .prod-view-link{border-top-color:rgba(0,0,0,0.08)}
[data-theme="light"] .prod-detail-canvas-wrap{background:var(--surface);border-color:rgba(212,84,26,0.12)}
[data-theme="light"] .spec-grid{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.05)}
[data-theme="light"] .spec-item{background:var(--surface)}
[data-theme="light"] .spec-tooltip{background:rgba(240,234,226,0.97);border-color:rgba(212,84,26,0.2);color:var(--white)}
[data-theme="light"] .prod-nav-btn{border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .prod-nav-btn:hover{border-color:rgba(212,84,26,0.4);background:rgba(212,84,26,0.04)}
[data-theme="light"] .tds-table tr{border-bottom-color:rgba(0,0,0,0.07)}
[data-theme="light"] .tds-table td:first-child{color:var(--mist)}
[data-theme="light"] .tds-sticky-panel{background:rgba(232,224,212,0.96);border-left-color:rgba(212,84,26,0.4)}
[data-theme="light"] .tds-request-tab{background:rgba(232,224,212,0.96);border-left-color:var(--orange)}
[data-theme="light"] .tds-panel-email{background:rgba(0,0,0,0.05);color:var(--pure);border-color:rgba(0,0,0,0.12)}
[data-theme="light"] .about-stats-row{border-color:rgba(212,84,26,0.1)}
[data-theme="light"] .about-stat-item{background:var(--surface);border-color:rgba(0,0,0,0.06)}
[data-theme="light"] .contact-details-row{border-color:rgba(212,84,26,0.1)}
[data-theme="light"] .contact-detail-item{background:var(--surface)}
[data-theme="light"] .form-field input,[data-theme="light"] .form-field textarea{background:#EAE4DC;color:var(--pure);border-color:rgba(0,0,0,0.1);border-left-color:transparent}
[data-theme="light"] .form-field input:focus,[data-theme="light"] .form-field textarea:focus{background:#E2DBD2;border-color:rgba(212,84,26,0.3)}
[data-theme="light"] .cs-trigger{background:#EAE4DC;color:var(--pure);border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .cs-options{background:#EAE4DC;border-color:rgba(212,84,26,0.2)}
[data-theme="light"] .cs-option{color:var(--white)}
[data-theme="light"] .cs-option:hover{background:rgba(212,84,26,0.08);color:var(--orange)}
[data-theme="light"] .contact-success{background:var(--surface);border-color:rgba(212,84,26,0.15)}
[data-theme="light"] .mobile-overlay{background:rgba(240,234,226,0.98)!important;backdrop-filter:blur(20px)}
[data-theme="light"] .mobile-overlay a,[data-theme="light"] .mob-logo{color:var(--pure)!important}
[data-theme="light"] .hamburger span{background:var(--pure)}
[data-theme="light"] .loading-bar{background:rgba(0,0,0,0.1)}
[data-theme="light"] .geo-label{background:rgba(240,234,226,0.92);color:var(--white)}
[data-theme="light"] .footer-kova{color:var(--pure)}
[data-theme="light"] .hero-bg-text{color:rgba(61,31,10,0.07)}
/* ─────────────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:'Barlow',sans-serif;overflow-x:hidden;font-size:var(--text-base);line-height:1.65}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:2px}

/* ── NAV ── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 48px;display:flex;justify-content:space-between;align-items:center;transition:all .4s;border-bottom:2px solid transparent}
#navbar.scrolled{background:rgba(10,12,15,0.96);backdrop-filter:blur(24px);border-bottom-color:var(--orange)}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:.06em;color:var(--pure);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:12px}
.nav-logo span{color:var(--ember)}
.nav-logo-icon{height:48px;width:auto;display:block;transform:translateY(-4.5px)}
.nav-logo-text{line-height:1;display:inline-block}
@media(max-width:900px){.nav-logo-icon{height:38px;transform:translateY(-3.5px)}}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);text-decoration:none;transition:color .3s;cursor:pointer;position:relative;padding-bottom:5px}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.nav-links a:hover{color:var(--ember)}
.nav-links a:hover::after{transform:scaleX(1)}
/* Current page keeps its underline permanently and drops the hover animation. */
.nav-links a[aria-current="page"]{color:var(--pure)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* ── NAV DROPDOWN ── */
/* Opens on hover and on keyboard focus (:focus-within), so it is reachable by
   Tab without any JavaScript. The trigger stays a real link to /products/, so
   activating it always goes somewhere even if the menu never opens. */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-menu{position:absolute;top:100%;left:-16px;min-width:230px;background:rgba(10,12,15,0.98);backdrop-filter:blur(20px);border:1px solid rgba(212,84,26,0.3);border-top:2px solid var(--orange);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:1200}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* Bridges the gap between trigger and menu so the pointer can travel down
   without passing over dead space and closing it. */
.nav-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px}
.nav-drop-menu a{display:block;padding:10px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cloud);white-space:nowrap;transition:background .18s,color .18s}
.nav-drop-menu a::after{display:none!important}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:rgba(212,84,26,0.12);color:var(--orange)}
[data-theme="light"] .nav-drop-menu{background:rgba(240,234,226,0.98)}

.nav-cta{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;border:1px solid var(--orange);background:var(--orange);color:#0A0C0F;border-radius:0;text-decoration:none;transition:all .3s;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;align-self:center}
.nav-links .nav-cta{padding:9px 20px}
.nav-cta:hover{background:var(--ember);border-color:var(--ember);color:#0A0C0F}
.nav-cta::after{display:none!important}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:1100}
.hamburger span{width:24px;height:2px;background:var(--pure);transition:all .3s;display:block}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE OVERLAY ── */
.mobile-overlay{position:fixed;inset:0;background:rgba(10,12,15,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1050;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transform:translateX(100%);pointer-events:none;transition:transform .4s cubic-bezier(0.16,1,0.3,1)}
.mobile-overlay.open{transform:translateX(0);pointer-events:all}
.mob-logo{font-family:'Bebas Neue',sans-serif;font-size:44px;letter-spacing:.06em;color:var(--pure);margin-bottom:16px;opacity:0;transform:translateY(20px);transition:opacity .35s ease,transform .35s ease}
.mob-logo span{color:var(--ember)}
.mobile-overlay.open .mob-logo{opacity:1;transform:translateY(0);transition-delay:.08s}
.mobile-overlay a{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:.06em;color:var(--pure);text-decoration:none;cursor:pointer;line-height:1.1;position:relative;overflow:hidden;opacity:0;transform:translateY(20px);transition:color .2s,opacity .35s ease,transform .35s ease}
.mobile-overlay.open a{opacity:1;transform:translateY(0)}
.mobile-overlay.open a:nth-child(2){transition-delay:.08s}
.mobile-overlay.open a:nth-child(3){transition-delay:.13s}
.mobile-overlay.open a:nth-child(4){transition-delay:.18s}
.mobile-overlay.open a:nth-child(5){transition-delay:.23s}
.mobile-overlay.open a:nth-child(6){transition-delay:.28s}
.mobile-overlay.open a:nth-child(7){transition-delay:.33s}
.mobile-overlay a::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.mobile-overlay a:hover{color:var(--ember)}
.mobile-overlay a:hover::after{transform:scaleX(1)}
.mob-cta{font-family:'JetBrains Mono',monospace!important;font-size:12px!important;padding:12px 32px;border:1px solid var(--orange)!important;color:var(--orange)!important;border-radius:2px;letter-spacing:.12em!important;text-transform:uppercase;margin-top:12px}

/* ── PAGE TRANSITION ── */
#page-transition{position:fixed;inset:0;background:var(--bg);z-index:8000;opacity:0;pointer-events:none;transition:opacity .25s ease}
#page-transition.pt-out{opacity:1;pointer-events:all;transition:opacity .25s ease}
#page-transition.pt-in{opacity:0;pointer-events:none;transition:opacity .3s ease}
.pt-sweep{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--orange),var(--ember),var(--orange),transparent);box-shadow:0 0 10px rgba(212,84,26,0.9),0 0 24px rgba(212,84,26,0.4);transform:translateX(-100%);pointer-events:none}
#page-transition.pt-sweep-active .pt-sweep{animation:ptSweep .22s ease-in-out forwards}
@keyframes ptSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ── PAGES ── */
.page{display:none;min-height:100vh}
.page.active{display:block}

/* ── HERO ── */
#hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0.18}
#hero-canvas{position:absolute;inset:0;z-index:1}
#hero-grid-canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero{position:relative;height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--bg)}
.hero-video-gradient{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(10,12,15,0.7) 0%,rgba(10,12,15,0.5) 50%,rgba(10,12,15,0.85) 100%);pointer-events:none}
.hero-bg-text{position:absolute;bottom:-40px;left:-20px;font-family:'Bebas Neue',sans-serif;font-size:clamp(120px,18vw,260px);letter-spacing:.04em;color:rgba(255,255,255,0.02);line-height:1;pointer-events:none;z-index:3;white-space:nowrap}
.hero-content{position:relative;z-index:4;padding:0 80px;max-width:800px}

/* Eyebrow - each segment fades in independently */
.hero-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.28em;color:var(--ember);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--ember)}
.hero-eyebrow-seg{opacity:0;transition:opacity .4s ease}
.hero-eyebrow-seg.visible{opacity:1}
.hero-eyebrow-cursor{display:inline-block;width:2px;height:11px;background:var(--orange);margin-left:4px;vertical-align:middle;opacity:0;animation:cursorBlink .6s ease infinite}
.hero-eyebrow-cursor.active{opacity:1}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Title - lines start invisible, animated via JS */
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,8vw,110px);letter-spacing:.04em;line-height:.95;margin-bottom:24px}
.hero-title .line1{display:block;color:var(--pure);overflow:hidden}
.hero-title .line2{display:block;color:transparent;overflow:hidden;position:relative}
.hero-title .line3{display:block;color:var(--pure);overflow:hidden;position:relative}

/* Letter-by-letter spans for line1 */
.hero-letter{display:inline-block;opacity:0;transform:translateY(-40px);will-change:transform,opacity}

/* Line2 - SVG stroke draw */
.line2-svg{display:block;width:100%;overflow:visible}
.line2-path{fill:none;stroke:var(--ember);stroke-width:2px;stroke-dasharray:2000;stroke-dashoffset:2000;will-change:stroke-dashoffset}

/* Line3 - shimmer sweep */
.line3-inner{position:relative;display:inline-block;color:var(--pure)}
.line3-inner::after{
  content:attr(data-text);
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(212,84,26,0.9) 45%,rgba(232,255,255,0.95) 50%,rgba(212,84,26,0.9) 55%,transparent 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;background-position:200% 0;
  will-change:background-position;
  opacity:0;
}
.line3-inner.shimmer::after{
  opacity:1;
  animation:shimmerSweep 600ms ease forwards;
}
@keyframes shimmerSweep{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

.hero-sub{font-family:'Barlow Condensed',sans-serif;font-weight:400;font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:40px;max-width:500px;line-height:1.6;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.hero-sub.visible{opacity:1;transform:translateY(0)}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.hero-btns.visible{opacity:1;transform:translateY(0)}

.btn-primary{font-family:'JetBrains Mono',monospace;font-size:11px;padding:14px 32px;background:var(--orange);color:var(--pure);border:none;border-radius:2px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .3s;text-decoration:none}
.btn-primary:hover{background:var(--ember);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,84,26,0.4)}
.btn-secondary{font-family:'JetBrains Mono',monospace;font-size:11px;padding:14px 32px;background:transparent;color:var(--cloud);border:1px solid rgba(168,184,200,0.3);border-radius:2px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal-light)}

/* Scroll indicator - animated mouse icon */
.hero-scroll{position:absolute;bottom:40px;left:80px;z-index:4;display:flex;align-items:center;gap:14px;cursor:default;transition:opacity .4s ease}
.hero-scroll.hidden{opacity:0;pointer-events:none}
.scroll-mouse{width:22px;height:34px;border:2px solid var(--mist);border-radius:11px;position:relative;flex-shrink:0}
.scroll-dot{width:4px;height:6px;background:var(--orange);border-radius:2px;position:absolute;left:50%;top:5px;transform:translateX(-50%);animation:scrollBounce 1.4s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}60%{transform:translateX(-50%) translateY(12px);opacity:0.3}}
.scroll-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}

/* Stats - progress bars and hover glow */
.hero-stats{position:absolute;right:80px;bottom:80px;z-index:4;display:flex;flex-direction:column;gap:24px}
.hero-stat{text-align:right;cursor:default;transition:transform .25s ease}
.hero-stat:hover{transform:scale(1.05)}
.hero-stat:hover .hero-stat-num{text-shadow:0 0 20px rgba(212,84,26,0.6)}
.hero-stat-num{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:.04em;color:var(--pure);line-height:1;transition:text-shadow .25s}
.hero-stat-num .stat-suffix{color:var(--ember)}
.hero-stat-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--mist);margin-bottom:6px}
.stat-bar{height:1px;background:rgba(212,84,26,0.15);position:relative;overflow:hidden;border-radius:1px;margin-top:4px}
.stat-bar-fill{height:100%;background:var(--orange);width:0%;will-change:width;transition:width 0.05s linear}

.hero-line{position:absolute;right:80px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(212,84,26,0.3),transparent);z-index:3}

/* ── MARQUEE ── */
.marquee-wrap{overflow:hidden;border-top:1px solid rgba(212,84,26,0.6);border-bottom:1px solid rgba(212,84,26,0.6);background:var(--orange);padding:14px 0;position:relative;z-index:10}
.marquee-track{display:flex;will-change:transform}
.marquee-item{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--bg);white-space:nowrap;padding:0 32px;display:flex;align-items:center;gap:32px;flex-shrink:0}
.marquee-dot{width:4px;height:4px;border-radius:50%;background:var(--bg);flex-shrink:0}

/* ── SECTION COMMON ── */
.section{padding:120px 80px}
.section-tag{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.26em;color:var(--orange);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.section-tag::before{content:'';width:28px;height:1px;background:var(--orange)}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:var(--text-3xl);letter-spacing:.04em;color:var(--pure);line-height:1;margin-bottom:20px}
.section-sub{font-family:'Barlow',sans-serif;font-size:var(--text-base);color:var(--mist);max-width:600px;line-height:1.75}

/* ── FILTER BAR STICKY ── */
.filter-bar-sticky{position:sticky;top:var(--nav-h);z-index:900;background:rgba(20,24,32,0.97);backdrop-filter:blur(16px);margin-left:-80px;margin-right:-80px;padding:14px 80px;border-bottom:1px solid rgba(212,84,26,0.12);display:flex;align-items:center;gap:20px;margin-top:40px}
.filter-bar{display:flex;gap:6px;flex-wrap:nowrap;flex:1}
.filter-btn{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;padding:8px 18px;border:1px solid rgba(168,184,200,0.15);color:var(--mist);background:transparent;border-radius:0;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.filter-btn:hover{border-color:var(--orange);color:var(--orange)}
.filter-btn.active{background:var(--orange);border-color:var(--orange);color:var(--pure)}
.prod-count{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);white-space:nowrap;opacity:0.55;flex-shrink:0}

/* ── PRODUCT FINDER WIZARD ── */
.prod-finder{margin:32px 0 0;border:1px solid rgba(212,84,26,0.18);border-radius:3px;overflow:hidden}
.prod-finder-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:var(--surface);border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);transition:background .2s}
.prod-finder-trigger:hover{background:rgba(212,84,26,0.06)}
.prod-finder-trigger[aria-expanded="true"] .finder-trigger-arrow{transform:rotate(90deg)}
.finder-trigger-arrow{display:inline-block;transition:transform .25s cubic-bezier(0.16,1,0.3,1);font-size:16px;line-height:1}
.prod-finder-trigger-left{display:flex;align-items:center;gap:12px}
.finder-eyebrow{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-light);background:rgba(13,184,160,0.12);border:1px solid rgba(13,184,160,0.3);padding:3px 8px;border-radius:2px}
.prod-finder-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(0.16,1,0.3,1)}
.prod-finder-body.finder-open{max-height:600px}
.prod-finder-inner{padding:28px 24px 24px;border-top:1px solid rgba(212,84,26,0.1)}
.finder-step-label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--mist);margin-bottom:14px}
.finder-step-label strong{color:var(--orange)}
.finder-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.finder-choice{background:var(--surface);border:1px solid rgba(168,184,200,0.12);border-radius:2px;padding:14px 10px;cursor:pointer;text-align:center;transition:border-color .2s,background .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.finder-choice:hover{border-color:rgba(212,84,26,0.4);background:rgba(212,84,26,0.04)}
.finder-choice.fc-active{border-color:var(--orange);background:rgba(212,84,26,0.08)}
.fc-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--pure);line-height:1.2}
.fc-sub{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.finder-step{display:block}
.finder-step.finder-hidden{display:none}
.finder-back{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:transparent;border:none;color:var(--mist);cursor:pointer;padding:0 0 14px;transition:color .2s}
.finder-back:hover{color:var(--orange)}
.finder-result{background:rgba(212,84,26,0.05);border:1px solid rgba(212,84,26,0.22);border-radius:2px;padding:20px 22px;display:none;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.finder-result.finder-visible{display:flex}
.finder-result-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--teal-light);margin-bottom:6px}
.finder-result-name{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.06em;color:var(--pure);margin-bottom:4px}
.finder-result-cat{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist)}
.finder-result-reset{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.14em;background:transparent;border:none;color:var(--mist);cursor:pointer;margin-top:8px;display:block;transition:color .2s}
.finder-result-reset:hover{color:var(--orange)}
@media(max-width:900px){.finder-choices{grid-template-columns:repeat(3,1fr)}.prod-finder-trigger{padding:14px 16px}}
@media(max-width:480px){.finder-choices{grid-template-columns:1fr 1fr}}

/* ── SAMPLE REQUEST FIELDS ── */
.sample-fields{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(0.16,1,0.3,1),opacity .3s ease;opacity:0}
.sample-fields.sample-visible{max-height:300px;opacity:1;overflow:visible}
.sample-fields-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--mist);margin-top:4px;line-height:1.6}

/* ── TRIAL CARTON BUTTON ── */
.btn-trial{font-family:'JetBrains Mono',monospace;font-size:11px;padding:14px 28px;background:transparent;color:var(--teal-light);border:1px solid rgba(13,184,160,0.45);border-radius:2px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.btn-trial:hover{border-color:var(--teal);color:var(--pure);background:rgba(13,184,160,0.12)}

/* ── 24HR RESPONSE BADGE ── */
.response-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);margin-top:10px;display:flex;align-items:center;gap:6px}
.response-badge::before{content:'';width:6px;height:6px;background:var(--teal-light);border-radius:50%;animation:pulseDot 2s ease infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(0.7)}}

/* ── NEWS / INSIGHTS SECTION ── */
.insights-section{padding:80px 80px;border-top:1px solid rgba(212,84,26,0.1)}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;background:rgba(212,84,26,0.08)}
.insight-card{background:var(--bg);padding:32px 28px 28px;display:flex;flex-direction:column;gap:0;cursor:default;transition:background .2s}
.insight-card:hover{background:rgba(212,84,26,0.04)}
.insight-tag{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.insight-tag::after{content:'';flex:1;height:1px;background:rgba(212,84,26,0.2)}
.insight-date{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--mist);margin-bottom:10px}
.insight-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:19px;letter-spacing:.03em;color:var(--pure);line-height:1.3;margin-bottom:12px}
.insight-excerpt{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist);line-height:1.7;flex:1}
.insight-read{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--orange);margin-top:20px;opacity:0;transition:opacity .2s}
.insight-card:hover .insight-read{opacity:1}
/* PARTNER MANUFACTURERS ── */
.mfr-section{margin-top:60px;padding-top:60px;border-top:1px solid rgba(13,184,160,0.15)}
.mfr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:32px;background:rgba(13,184,160,0.08)}
.mfr-card{background:var(--bg);padding:28px 24px}
.mfr-tier{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--teal-light);margin-bottom:10px}
/* Sourced vs manufactured are colour-coded rather than only labelled: the two
   card sets sit one above the other and the distinction between "we buy this"
   and "we build this" is the whole point of the section. */
.mfr-subhead{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--mist);margin:40px 0 -12px;padding-bottom:10px;border-bottom:1px solid rgba(168,184,200,0.12)}
.mfr-card-inhouse{border-left:3px solid var(--orange)}
.mfr-tier-inhouse{color:var(--orange)}
.mfr-grid:last-of-type{background:rgba(212,84,26,0.10)}
@media(max-width:900px){.mfr-subhead{margin-top:32px}}
.mfr-name{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:.06em;color:var(--pure);margin-bottom:6px}
.mfr-cert{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--mist);margin-bottom:12px}
.mfr-products{font-family:'Barlow',sans-serif;font-size:12px;color:var(--cloud);line-height:1.65}
/* BASIN EXPERTISE (About) ── */
.about-basin-section{margin-top:60px;padding-top:60px;border-top:1px solid rgba(212,84,26,0.12)}
.about-basin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:32px;background:rgba(255,255,255,0.04)}
.about-basin-item{background:var(--bg);padding:24px 26px;border-left:3px solid transparent;transition:border-color .2s,background .2s}
.about-basin-item:hover{border-left-color:var(--teal);background:rgba(13,184,160,0.05)}
.about-basin-item-name{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.08em;color:var(--pure);margin-bottom:3px}
.about-basin-item-region{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--teal-light);margin-bottom:8px}
.about-basin-item-chem{font-family:'Barlow',sans-serif;font-size:12px;color:var(--cloud);line-height:1.6;margin-bottom:6px}
.about-basin-item-note{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--mist)}

/* ── APPLICATION NAVIGATION CARDS ── */
.app-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 0}

/* ── FULL-BLEED PRODUCT SHOWCASE ─────────────────────────────────────── */
/* Breaks out of .section's 80px gutter with negative margins rather than
   100vw: 100vw includes the scrollbar width, which pushes the page sideways.
   Matching the gutter exactly reaches the viewport edge with no overflow.
   Values are paired with .section's padding — change one, change the other. */
.pshow{margin-left:-80px;margin-right:-80px;margin-top:44px;position:relative}
/* Fades the cut edges so tiles leave the frame rather than being sliced off.
   Matches the page background, not the tile surface, since the strip now sits
   directly on the page rather than in a banded container. */
.pshow::before,.pshow::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.pshow::before{left:0;background:linear-gradient(to right,var(--bg) 20%,transparent)}
.pshow::after{right:0;background:linear-gradient(to left,var(--bg) 20%,transparent)}
/* Track padding matches .section's gutter so the first tile lines up with the
   heading above it, while the strip still bleeds to both edges. */
.pshow-track{display:flex;gap:16px;overflow-x:auto;padding:6px 80px 10px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:auto}
.pshow-track::-webkit-scrollbar{display:none}
/* Snapping and grab cursor only apply once the user has taken over; while the
   strip is drifting, scroll-snap would fight the animation frame by frame. */
.pshow-track[data-manual]{scroll-snap-type:x mandatory;cursor:grab}
.pshow-track[data-manual]:active{cursor:grabbing}
.pshow-track[data-manual] .pshow-tile{scroll-snap-align:center}

.pshow-tile{flex:0 0 340px;display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid rgba(168,184,200,0.10);border-radius:4px;padding:20px;transition:border-color .25s ease,transform .25s cubic-bezier(0.16,1,0.3,1),box-shadow .25s ease}
a.pshow-tile:hover{border-color:rgba(212,84,26,0.55);transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,0.45)}
/* Image sits on its own inset plate: product shots are shot on white and need
   a neutral field to read against, otherwise they look pasted onto the card. */
/* Square plate with light padding: these are product shots on transparent
   backgrounds, so the image itself should dominate the tile. 4:3 was cropping
   the visual weight out of tall instruments like the roller oven and the
   viscometer stand. */
.pshow-media{aspect-ratio:1;background:rgba(255,255,255,0.035);border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;margin-bottom:16px}
.pshow-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .35s cubic-bezier(0.16,1,0.3,1)}
a.pshow-tile:hover .pshow-img{transform:scale(1.05)}
.pshow-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.pshow-name{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;letter-spacing:.02em;color:var(--white);line-height:1.3;transition:color .2s}
a.pshow-tile:hover .pshow-name{color:var(--orange)}
/* Arrow is the only orange on a resting card — the accent marks the
   affordance rather than decorating every tile. */
.pshow-go{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--orange);opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease;flex-shrink:0}
a.pshow-tile:hover .pshow-go{opacity:1;transform:translateX(0)}

@media(max-width:900px){
  .pshow{margin-left:-24px;margin-right:-24px}
  .pshow::before,.pshow::after{width:48px}
  .pshow-track{gap:12px;padding:6px 24px 10px}
  /* Roughly 70% of the narrowest phone viewport, so the next tile peeks in and
     the strip reads as scrollable without an arrow control. */
  .pshow-tile{flex:0 0 250px;padding:16px}
  .pshow-name{font-size:15px}
}

/* ── MUD LAB EQUIPMENT ───────────────────────────────────────────────── */
.eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:40px;background:rgba(212,84,26,0.18)}
.eq-card{background:var(--surface);padding:24px 26px 22px;display:flex;flex-direction:column;text-decoration:none;border-left:3px solid transparent;transition:border-color .2s,background .2s}
.eq-card:hover{background:rgba(212,84,26,0.06);border-left-color:var(--orange)}
.eq-card-cat{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--ember);margin-bottom:12px}
.eq-card-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:.02em;color:var(--pure);line-height:1.1;margin-bottom:10px}
.eq-card-sum{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist);line-height:1.6;flex:1;margin-bottom:18px}
.eq-card-link{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);border-top:1px solid rgba(212,84,26,0.2);padding-top:12px}
.eq-card:hover .vl-arrow{transform:translateX(6px)}
.eq-card .vl-arrow{display:inline-block;transition:transform .3s ease}

.eq-code{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--mist);margin-top:-8px}
.eq-detail{display:grid;grid-template-columns:1fr 340px;gap:48px;margin-top:40px;align-items:start}
.eq-lede{font-family:'Barlow',sans-serif;font-size:var(--text-lg);color:var(--cloud);line-height:1.75}
.eq-apps{list-style:none;margin-top:8px}
.eq-apps li{font-family:'Barlow',sans-serif;font-size:14px;color:var(--cloud);line-height:1.6;padding:11px 0 11px 22px;border-bottom:1px solid rgba(255,255,255,0.05);position:relative}
.eq-apps li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:2px;background:var(--orange)}
.eq-apps li:last-child{border-bottom:none}

/* Safety list uses the teal accent rather than orange — it is cautionary
   content, and reusing the primary brand accent for it would flatten the
   distinction against the neighbouring applications list. */
.eq-safety{list-style:none;margin-top:8px}
.eq-safety li{font-family:'Barlow',sans-serif;font-size:14px;color:var(--cloud);line-height:1.6;padding:11px 0 11px 22px;border-bottom:1px solid rgba(255,255,255,0.05);position:relative}
.eq-safety li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:2px;background:var(--teal-light)}
.eq-safety li:last-child{border-bottom:none}

.eq-detail-side{background:var(--surface);border-left:4px solid var(--orange);padding:24px 26px}
.eq-side-title{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:16px}
.eq-specs{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,0.06)}
.eq-spec{background:var(--surface);padding:12px 0}
.eq-spec dt{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--mist);margin-bottom:5px}
.eq-spec dd{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--pure);line-height:1.35}
.eq-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.eq-side-cta{display:block;text-align:center;margin-top:20px}
.eq-detail-side .response-badge{justify-content:center}

.eq-pager{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:64px;background:rgba(212,84,26,0.18)}
.eq-pager-link{background:var(--surface);padding:18px 22px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:background .2s}
.eq-pager-link:hover{background:rgba(212,84,26,0.06)}
.eq-pager-next{text-align:right}
.eq-pager-dir{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--orange)}
.eq-pager-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;color:var(--pure);letter-spacing:.02em}
@media(max-width:1024px){.eq-grid{grid-template-columns:1fr 1fr}.eq-detail{grid-template-columns:1fr;gap:32px}}
@media(max-width:900px){.eq-grid{grid-template-columns:1fr}}

/* ── SHALE SHAKER SCREENS ────────────────────────────────────────────── */
.ss-h2{font-family:'Bebas Neue',sans-serif;font-size:var(--text-2xl);letter-spacing:.04em;color:var(--pure);line-height:1;margin:64px 0 16px}
/* Spec headline row: four flat slabs, hard left rule, no card chrome. */
.ss-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:32px;background:rgba(212,84,26,0.18)}
.ss-fact{background:var(--surface);padding:18px 20px;border-left:3px solid var(--orange)}
.ss-fact-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--mist);margin-bottom:6px}
.ss-fact-value{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:.02em;color:var(--pure);line-height:1}

.ss-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:20px 0 8px}
.ss-field{display:flex;flex-direction:column;gap:6px}
.ss-field-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--mist)}
/* Native select, restyled rather than replaced with a custom widget: it stays
   keyboard- and screen-reader-correct for free, and uses the platform picker
   on mobile. appearance:none only removes the chrome, not the semantics. */
.ss-select{appearance:none;-webkit-appearance:none;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--white);background:var(--surface);border:1px solid rgba(168,184,200,0.2);border-radius:0;padding:10px 36px 10px 14px;min-width:220px;cursor:pointer;transition:border-color .2s;background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ss-select:hover{border-color:rgba(212,84,26,0.5)}
.ss-select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ss-reset{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--mist);background:transparent;border:1px solid rgba(168,184,200,0.2);border-radius:0;padding:11px 18px;cursor:pointer;transition:border-color .2s,color .2s}
.ss-reset:hover{border-color:var(--orange);color:var(--orange)}
.ss-count{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-left:auto;padding-bottom:11px}

/* The variant table carries 7 columns of dense spec text, so it opts out of
   .tds-table's fixed 14.28% columns and sizes to content instead. */
.ss-table,.ss-matrix{table-layout:auto}
.ss-table th,.ss-matrix th{width:auto}
.ss-table th:last-child,.ss-matrix th:last-child{text-align:left}
.ss-table td,.ss-matrix td{font-family:'Barlow',sans-serif;font-size:13px;color:var(--cloud);padding:14px 20px;vertical-align:top;line-height:1.5}
.ss-name{font-family:'Barlow Condensed',sans-serif!important;font-weight:700;font-size:15px!important;color:var(--pure)!important;letter-spacing:.02em}
.ss-mono{font-family:'JetBrains Mono',monospace!important;font-size:11px!important;color:var(--white)!important;white-space:nowrap}
.ss-table tbody tr:hover,.ss-matrix tbody tr:hover{background:rgba(212,84,26,0.05)}
/* Anchor target offset: without this the fixed navbar sits on top of the row a
   showcase tile just jumped to. --nav-h is measured and published by main.js,
   so this stays correct if the nav height changes. */
.ss-row{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* Flash on arrival — twenty rows look alike, so the target needs to identify
   itself. Suppressed under reduced-motion, where the scroll alone has to do. */
@keyframes ssRowFlash{
  0%{background:rgba(212,84,26,0.32)}
  100%{background:transparent}
}
.ss-row-flash{animation:ssRowFlash 1.4s ease-out 1}
@media(prefers-reduced-motion:reduce){.ss-row-flash{animation:none}}
.ss-empty{font-family:'Barlow',sans-serif;font-size:14px;color:var(--mist);margin-top:16px;padding:16px 20px;border-left:3px solid var(--orange);background:var(--surface)}

.ss-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:64px;padding:28px 32px;background:var(--surface);border-left:4px solid var(--orange)}
.ss-cta-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.04em;color:var(--pure);line-height:1}
.ss-cta-sub{font-family:'Barlow',sans-serif;font-size:14px;color:var(--mist);margin-top:6px;max-width:520px}
@media(max-width:900px){.ss-facts{grid-template-columns:1fr 1fr}.ss-count{margin-left:0;width:100%}.ss-select{min-width:0;width:100%}.ss-field{width:100%}}

/* ── HOMEPAGE EMAIL SIGNUP ───────────────────────────────────────────── */
/* The browse section above and this one both carry .section's 120px vertical
   padding, so they were separated by 240px of empty page — enough that the
   signup read as unrelated to anything around it. Pulling both sides in gives
   a normal section break instead of a chasm. The closing CTA that follows
   keeps its full top padding, so the page still breathes before the final ask. */
.home-signup{padding-top:56px;padding-bottom:72px}
@media(max-width:900px){.home-signup{padding-top:40px;padding-bottom:48px}}

/* ── HOMEPAGE CLOSING CTA ────────────────────────────────────────────── */
.home-cta{background:var(--surface);border-top:2px solid var(--orange);margin-top:40px}
.home-cta-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.home-cta .section-sub{max-width:520px;margin-bottom:0}
.home-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.home-cta-actions .btn-primary,.home-cta-actions .btn-secondary{text-align:center;min-width:220px}
@media(max-width:900px){
  .home-cta-inner{grid-template-columns:1fr;gap:28px}
  .home-cta-actions{align-items:stretch}
  .home-cta-actions .btn-primary,.home-cta-actions .btn-secondary{min-width:0}
}

/* ── PRODUCT GROUP NAV (top tier: mud chemicals / lab equipment / screens) ── */
/* Three cards rather than the app-nav's four, and weightier than a category
   card since this is the catalogue's top-level split. */
/* These three cards are the primary wayfinding on the homepage — the whole
   catalogue routes through them — so they are deliberately scaled well past the
   category cards below rather than sharing their weight. Bigger type, real
   padding, a numbered index and a visible arrow affordance. */
.group-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 0}
.group-card{position:relative;padding:32px 28px 28px;border:1px solid rgba(168,184,200,0.12);border-top:4px solid var(--orange);border-radius:4px;background:var(--surface);overflow:hidden;transition:border-color .25s ease,transform .25s cubic-bezier(0.16,1,0.3,1),box-shadow .25s ease}
.group-card::after{content:'→';position:absolute;right:26px;bottom:24px;font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--orange);opacity:0;transform:translateX(-8px);transition:opacity .25s ease,transform .25s ease}
.group-card:hover{border-color:rgba(212,84,26,0.5);border-top-color:var(--orange);transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,0.45)}
.group-card:hover::after{opacity:1;transform:translateX(0)}
/* Faint index numeral, purely decorative — gives the three cards a sense of
   sequence and fills what would otherwise be dead space at the card foot. */
.group-card::before{content:attr(data-index);position:absolute;right:-8px;top:-18px;font-family:'Bebas Neue',sans-serif;font-size:96px;line-height:1;color:var(--orange);opacity:.08;pointer-events:none}
.group-card .app-nav-code{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:16px}
.group-card .app-nav-label{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:.03em;line-height:1;color:var(--pure);margin-bottom:12px}
.group-card:hover .app-nav-label{color:var(--orange)}
.group-card .app-nav-sub{font-family:'Barlow',sans-serif;font-size:14px;line-height:1.65;color:var(--mist);max-width:36ch;padding-right:40px}
/* Groups without a page yet: visually present so the range is legible, but
   inert — no pointer, no hover lift, and not a link for crawlers to follow. */
.group-card-soon{opacity:.5;cursor:default;border-top-color:var(--mist)}
.group-card-soon:hover{transform:none;box-shadow:none;border-color:rgba(168,184,200,0.12);border-top-color:var(--mist)}
.group-card-soon::after{display:none}
@media(max-width:1024px){.group-nav{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .group-nav{grid-template-columns:1fr;gap:12px}
  .group-card{padding:26px 22px 24px}
  .group-card .app-nav-label{font-size:28px}
  .group-card::before{font-size:76px}
}
.app-nav-card{background:var(--surface);border:1px solid rgba(212,84,26,0.12);border-radius:3px;padding:20px 20px 18px;cursor:pointer;transition:border-color .25s,background .25s;text-align:left;position:relative;overflow:hidden}
.app-nav-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:bottom;transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
.app-nav-card:hover{border-color:rgba(212,84,26,0.35);background:rgba(212,84,26,0.04)}
.app-nav-card:hover::before,.app-nav-card.anav-active::before{transform:scaleY(1)}
.app-nav-card.anav-active{border-color:var(--orange);background:rgba(212,84,26,0.06)}
.app-nav-code{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:8px}
.app-nav-label{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:.06em;color:var(--pure);margin-bottom:4px;line-height:1}
.app-nav-sub{font-family:'Barlow',sans-serif;font-size:12px;color:var(--mist);line-height:1.4}

/* ── PRODUCT SEARCH (products page) ── */
.prod-search-wrap{position:relative;width:180px;flex-shrink:0}
.prod-search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;stroke:var(--mist);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.prod-search{width:100%;background:transparent;border:1px solid rgba(168,184,200,0.15);border-radius:0;padding:8px 10px 8px 30px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--pure);letter-spacing:.04em;outline:none;transition:border-color .2s}
.prod-search::placeholder{color:rgba(106,122,138,0.6)}
.prod-search:focus{border-color:var(--orange)}

/* ── BASIN / REGION GRID ── */
.basin-section{margin-top:48px;padding:48px;background:var(--surface);border:1px solid rgba(13,184,160,0.2);border-radius:4px}
.basin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:28px;background:rgba(255,255,255,0.05)}
.basin-card{background:#0E1219;padding:20px 22px;border-left:3px solid transparent;transition:border-color .2s,background .2s}
.basin-card:hover{border-left-color:var(--teal);background:rgba(13,184,160,0.07)}
.basin-name{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.08em;color:var(--pure);margin-bottom:3px}
.basin-region{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--teal-light);margin-bottom:10px}
.basin-products{font-family:'Barlow',sans-serif;font-size:12px;color:var(--cloud);line-height:1.65}

/* ── PRODUCT DETAIL TABS ── */
.detail-tabs{display:flex;gap:0;border-bottom:1px solid rgba(212,84,26,0.15);margin-bottom:0}
.detail-tab{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.14em;padding:12px 18px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--mist);cursor:pointer;transition:color .2s,border-color .2s;margin-bottom:-1px}
.detail-tab:hover{color:var(--orange)}
.detail-tab.dtab-active{color:var(--orange);border-bottom-color:var(--orange)}
.detail-tab:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.detail-tab-panel{display:none;padding-top:20px}
.detail-tab-panel.dtab-shown{display:block}
.dosing-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:12px}
.dosing-cell{background:rgba(14,18,25,0.9);padding:14px 16px}
.dosing-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--mist);margin-bottom:4px}
.dosing-val{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal-light);line-height:1.5}
.docs-request-panel{background:rgba(13,184,160,0.06);border:1px solid rgba(13,184,160,0.2);border-radius:3px;padding:24px;margin-bottom:12px}
.docs-request-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--teal-light);margin-bottom:10px}
.docs-request-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.docs-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;padding:6px 12px;border:1px solid rgba(13,184,160,0.4);color:var(--teal-light);border-radius:2px}

/* ── APPLICATIONS & TRADE-OFFS TAB ── */
.apptrade-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:12px}
.apptrade-col{background:rgba(14,18,25,0.9);padding:18px 18px 20px}
.apptrade-heading{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.15em;margin-bottom:12px;color:var(--teal-light)}
.apptrade-pros .apptrade-heading{color:#3DBE7A}
.apptrade-cons .apptrade-heading{color:#D4541A}
.apptrade-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.apptrade-list li{font-family:'Barlow',sans-serif;font-size:13px;line-height:1.6;color:var(--mist);padding-left:16px;position:relative}
.apptrade-list li::before{content:'•';position:absolute;left:0;color:var(--teal-light);opacity:.6}
.apptrade-pros-list li::before{content:'+';color:#3DBE7A;opacity:.85}
.apptrade-cons-list li::before{content:'−';color:#D4541A;opacity:.85}
@media (max-width:860px){.apptrade-grid{grid-template-columns:1fr}}

/* ── LANGUAGE TOGGLE ── */
.lang-toggle{display:flex;align-items:center;border:1px solid rgba(168,184,200,0.15);border-radius:2px;overflow:hidden;flex-shrink:0}
.lang-btn{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;background:transparent;border:none;border-right:1px solid rgba(168,184,200,0.15);color:var(--mist);cursor:pointer;transition:background .2s,color .2s;line-height:1}
.lang-btn:last-child{border-right:none}
.lang-btn.lang-active{background:var(--orange);color:var(--pure);cursor:default}
.lang-btn.lang-soon{opacity:.45;cursor:not-allowed;position:relative}
.lang-btn.lang-soon:hover{color:var(--teal-light);opacity:.7}
[data-theme="light"] .lang-toggle{border-color:rgba(0,0,0,0.12)}
[data-theme="light"] .lang-btn{border-right-color:rgba(0,0,0,0.1)}

/* ── DOC LANGUAGE BADGE on product cards ── */
.doc-lang-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);border:1px solid rgba(13,184,160,0.35);padding:4px 10px;border-radius:2px;display:inline-block;margin-top:10px}

/* ── LATAM SECTION (home page) ── */
.latam-section{padding:72px 80px;background:rgba(13,184,160,0.06);border-top:1px solid rgba(13,184,160,0.18);border-bottom:1px solid rgba(13,184,160,0.18)}
.latam-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:48px;background:rgba(13,184,160,0.12)}
.latam-pillar{background:var(--bg);padding:36px 32px;position:relative}
.latam-step{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--teal-light);margin-bottom:12px}
.latam-icon-wrap{width:48px;height:48px;border:1px solid rgba(13,184,160,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.latam-icon-wrap svg{width:22px;height:22px;stroke:var(--teal-light);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.latam-pillar-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.06em;color:var(--pure);margin-bottom:6px}
.latam-pillar-stat{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--teal-light);margin-bottom:10px;letter-spacing:.04em}
.latam-pillar-desc{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist);line-height:1.65}
.latam-connector{position:absolute;right:-1px;top:50%;transform:translateY(-50%);z-index:2;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--teal);background:var(--bg);padding:4px 0;line-height:1}
[data-theme="light"] .latam-section{background:rgba(13,184,160,0.04)}
[data-theme="light"] .latam-pillar{background:var(--bg)}


/* ── ANIMATED CONIC BORDER ── */
@property --ba{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes prodBorderSpin{to{--ba:360deg}}

/* ── PRODUCTS GRID ── */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:24px}

/* ── CARD ANIMATIONS ── */
@keyframes cardEntrance{from{opacity:0;transform:translateY(40px) rotateX(8deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes scanSweep{0%{top:-4px;opacity:0}5%{opacity:1}95%{opacity:1}100%{top:calc(100% + 4px);opacity:0}}
@keyframes rippleOut{0%{transform:scale(0);opacity:0.55}100%{transform:scale(2.5);opacity:0}}

.prod-card{
  background:var(--surface);
  position:relative;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);
  opacity:0;
  transform:translateY(0);
  transition:transform .4s cubic-bezier(0.16,1,0.3,1),box-shadow .4s,border-color .4s;
  perspective:800px;
  display:flex;
  flex-direction:column;
}
.prod-card.card-entering{animation:cardEntrance .5s cubic-bezier(0.16,1,0.3,1) both}
.prod-card.card-hiding{transform:scale(0.85)!important;opacity:0!important;transition:transform .2s ease-in,opacity .2s ease-in!important;pointer-events:none}
.prod-card.card-hidden{display:none!important}
.prod-card.card-animating{animation:cardEntrance .3s ease both}
.prod-card-coming.card-hidden{display:none!important}

.prod-card-glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  border:1px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--ba),transparent 0%,rgba(212,84,26,0.15) 30%,transparent 60%) border-box;
  animation:prodBorderSpin 6s linear infinite;
}

.prod-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--kova-earth) 0%,rgba(212,84,26,0.08) 50%,transparent 100%);opacity:0;transition:opacity .4s;z-index:2}
.prod-card:hover::before{opacity:1}
.prod-card:hover{border-color:rgba(212,84,26,0.3);transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 40px rgba(212,84,26,0.15)}

/* Scan line sweeps on hover */
.prod-scan-line{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(13,184,160,0.5),rgba(13,184,160,0.85),rgba(13,184,160,0.5),transparent);top:-4px;pointer-events:none;z-index:10;opacity:0;filter:blur(1px)}
.prod-card:hover .prod-scan-line{animation:scanSweep .6s ease-out forwards}

.prod-canvas-wrap{width:100%;height:240px;position:relative;overflow:hidden;z-index:3;flex-shrink:0}
/* Visual (3D/hero-image) area is retained in the DOM but hidden by default;
   the card instead leads with a name+code identity plate. Toggle
   .prod-visual-hidden off (or add .prod-visual-visible) to bring visuals back. */
.prod-canvas-wrap.prod-visual-hidden{display:none}
.prod-code-plate{width:100%;height:240px;position:relative;overflow:hidden;z-index:3;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:linear-gradient(160deg,#3D1F0A 0%,rgba(10,12,15,0.94) 100%);border-bottom:1px solid rgba(255,255,255,0.06)}
.prod-code-plate::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,var(--plate-glow,rgba(212,84,26,0.22)) 0%,transparent 65%);pointer-events:none}
.prod-code-plate-code{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.12em;color:#FF8A50;margin-bottom:10px;position:relative;z-index:1;word-break:break-word}
.prod-code-plate-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,3vw,32px);letter-spacing:.03em;color:#FFFFFF;line-height:1.05;position:relative;z-index:1}
.related-grid .prod-code-plate{height:160px}
.related-grid .prod-code-plate-name{font-size:20px}
/* The plate is intentionally theme-independent (fixed dark background, fixed
   light text) so the product code stays legible in light mode too - it was
   previously washing out because var(--kova-earth) turns near-transparent
   in light theme, leaving the code text on a near-white background. */
[data-theme="light"] .prod-code-plate{background:linear-gradient(160deg,#3D1F0A 0%,rgba(10,12,15,0.94) 100%)}
.prod-canvas{width:100%;height:100%;display:block}
.prod-canvas-img{width:100%;height:100%;display:block;object-fit:cover;background:var(--surface)}
.prod-info{padding:24px 28px;position:relative;z-index:4;padding-bottom:16px;flex:1;display:flex;flex-direction:column}
.prod-cat-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prod-cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.prod-cat{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange)}
.prod-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:.02em;color:var(--pure);margin-bottom:8px;transition:color .3s}
.prod-card:hover .prod-name{color:var(--orange)}
.prod-desc{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist);line-height:1.65;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.prod-tag{font-family:'JetBrains Mono',monospace;font-size:9px;padding:3px 8px;border:1px solid rgba(168,184,200,0.15);color:var(--mist);border-radius:2px}

/* Static view link (used in home grid and detail related cards) */
.prod-view-link{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05);margin-top:14px}
.prod-view-link .vl-arrow{display:inline-block;transition:transform .3s ease}
.prod-card:hover .prod-view-link{color:var(--ember)}
.prod-card:hover .prod-view-link .vl-arrow{transform:translateX(6px)}


.prod-arrow{position:absolute;top:20px;right:20px;width:32px;height:32px;border:1px solid rgba(212,84,26,0.3);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:16px;transition:all .3s;opacity:0;z-index:6}
.prod-card:hover .prod-arrow{opacity:1;background:var(--orange);color:var(--pure)}

/* Ripple on click */
.prod-ripple{position:absolute;border-radius:50%;background:rgba(212,84,26,0.3);pointer-events:none;transform:scale(0);z-index:20;width:80px;height:80px;margin-top:-40px;margin-left:-40px}
.prod-ripple.active{animation:rippleOut .5s ease-out forwards}

/* ── PRODUCT DETAIL ── */
.prod-detail{padding:120px 80px 80px}
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);margin-bottom:32px}
.breadcrumb .bc-link{cursor:pointer;transition:color .2s}
.breadcrumb .bc-link:hover{color:var(--orange)}
.breadcrumb .bc-sep{opacity:.35;cursor:default}
.breadcrumb .bc-current{color:var(--orange);cursor:default}
.prod-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:60px}
.prod-detail-canvas-wrap{position:relative;height:500px;background:var(--surface);border-radius:4px;overflow:hidden;border:1px solid rgba(212,84,26,0.15)}
.prod-detail-canvas{width:100%;height:100%}
.prod-detail-static-img{width:100%;height:100%;object-fit:contain;display:block;background:var(--surface)}
.prod-detail-howitworks-btn{position:absolute;bottom:14px;right:14px;z-index:6;font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.14em;padding:8px 14px;background:rgba(10,12,15,0.7);border:1px solid rgba(212,84,26,0.4);color:var(--orange);border-radius:2px;cursor:pointer;transition:background .2s,border-color .2s}
.prod-detail-howitworks-btn:hover{background:rgba(212,84,26,0.15);border-color:var(--orange)}
.prod-detail-badge{position:absolute;top:20px;left:20px;font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;padding:5px 12px;background:rgba(212,84,26,0.15);border:1px solid rgba(212,84,26,0.3);color:var(--orange);border-radius:2px}
.prod-detail-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,5vw,72px);letter-spacing:.04em;color:var(--pure);line-height:.95;margin-bottom:16px}
.prod-detail-desc{font-family:'Barlow',sans-serif;font-size:16px;color:var(--cloud);line-height:1.75;margin-bottom:32px}
/* Always-visible mention of a merged product's SKU variations (e.g. PAC-R / PAC-UL / PAC-LV) */
.variation-chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:-20px;margin-bottom:28px}
.variation-chip-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--mist)}
.variation-chip{font-family:'JetBrains Mono',monospace;font-size:10px;padding:5px 10px;border:1px solid rgba(212,84,26,0.3);color:var(--cloud);border-radius:2px;background:rgba(212,84,26,0.06)}
.variation-chip em{font-style:normal;color:var(--orange);margin-left:6px}
/* Toggleable Product Grades tab: switch between SKU variations of a merged product */
.variation-toggle-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.variation-toggle-btn{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:9px 16px;background:transparent;border:1px solid rgba(168,184,200,0.2);color:var(--mist);border-radius:2px;cursor:pointer;transition:all .2s}
.variation-toggle-btn:hover{border-color:rgba(212,84,26,0.4);color:var(--cloud)}
.variation-toggle-btn.vtab-active{background:var(--orange);border-color:var(--orange);color:var(--pure)}
.variation-detail-card{background:var(--surface);border:1px solid rgba(255,255,255,0.06);border-left:3px solid var(--orange);border-radius:2px;padding:20px 22px}
.variation-detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.variation-detail-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;color:var(--pure)}
.variation-detail-code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--orange)}
.variation-detail-overview{font-family:'Barlow',sans-serif;font-size:14px;color:var(--cloud);line-height:1.65}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:12px}
.spec-cell{background:var(--kova-earth);padding:14px 16px;transition:background .2s;border-left:3px solid transparent;cursor:default;position:relative;overflow:visible}
.spec-cell:hover{background:rgba(61,31,10,0.9);border-left-color:var(--orange)}
.spec-cell:hover .spec-label{color:var(--orange)}
.spec-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--mist);margin-bottom:4px;transition:color .2s}
.spec-val{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--orange);font-weight:500}
.spec-tooltip{position:absolute;bottom:calc(100% + 6px);left:-3px;right:0;min-width:180px;background:rgba(10,12,15,0.97);border:1px solid rgba(212,84,26,0.22);border-radius:2px;padding:10px 12px;font-family:'Barlow',sans-serif;font-size:12px;color:var(--cloud);line-height:1.55;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;z-index:200;white-space:normal}
.spec-cell:hover .spec-tooltip{opacity:1;transform:translateY(0)}
.spec-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--mist);margin-bottom:28px;line-height:1.6}
.spec-note a{color:var(--orange);text-decoration:none}
.spec-note a:hover{text-decoration:underline}
.prod-detail-actions{display:flex;gap:12px}
.back-btn{font-family:'JetBrains Mono',monospace;font-size:11px;padding:12px 24px;background:transparent;color:var(--mist);border:1px solid rgba(168,184,200,0.2);border-radius:2px;cursor:pointer;transition:all .3s;letter-spacing:.1em;text-transform:uppercase}
.back-btn:hover{border-color:var(--teal);color:var(--teal-light)}

/* ── DETAIL ENTRANCE ANIMATIONS ── */
@keyframes detailSlideLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes detailFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.detail-canvas-anim{opacity:0;animation:detailSlideLeft .6s cubic-bezier(0.16,1,0.3,1) forwards}
.detail-info-item{opacity:0}
.detail-info-item.anim{animation:detailFadeUp .5s cubic-bezier(0.16,1,0.3,1) forwards}

/* ── CANVAS VIGNETTE + DRAG HINT ── */
.prod-detail-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,transparent 35%,rgba(10,12,15,0.65) 100%);pointer-events:none;z-index:5}
.prod-detail-drag-hint{position:absolute;bottom:14px;right:14px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(168,184,200,0.35);pointer-events:none;z-index:6;user-select:none}

/* ── RELATED PRODUCTS ── */
.related-section{margin-top:60px;padding-top:48px;border-top:1px solid rgba(255,255,255,0.06)}
.related-title{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:.04em;color:var(--pure);margin-bottom:24px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.prod-canvas-wrap--mini{height:160px!important}

/* ── TDS STICKY PANEL ── */
/* ── TDS REQUEST TAB ── */
.tds-request-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:801;background:rgba(17,20,24,0.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:2px solid var(--orange);border-top:1px solid rgba(212,84,26,0.2);border-bottom:1px solid rgba(212,84,26,0.2);border-right:none;border-radius:3px 0 0 3px;padding:22px 9px;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);display:none;align-items:center;gap:10px;box-shadow:-4px 0 24px rgba(0,0,0,0.35);transition:right .45s cubic-bezier(0.16,1,0.3,1),background .2s}
.tds-request-tab.tab-visible{display:flex}
.tds-request-tab:hover{background:rgba(212,84,26,0.12)}
.tds-request-tab.panel-open{right:250px}
.tds-tab-arrow{font-size:12px;transform:rotate(0deg);transition:transform .3s;display:block;writing-mode:horizontal-tb}
.tds-request-tab.panel-open .tds-tab-arrow{transform:rotate(180deg)}
/* ── TDS PANEL ── */
.tds-sticky-panel{position:fixed;right:0;top:50%;transform:translateY(-50%) translateX(calc(100% + 1px));width:250px;background:rgba(17,20,24,0.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:2px solid rgba(212,84,26,0.4);padding:24px 20px;z-index:800;transition:transform .45s cubic-bezier(0.16,1,0.3,1);box-shadow:-8px 0 40px rgba(0,0,0,0.4)}
.tds-sticky-panel.visible{transform:translateY(-50%) translateX(0)}
/* ── DETAIL BACK BTN ── */
.detail-back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--mist);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:0;margin-bottom:14px;transition:color .2s}
.detail-back-btn:hover{color:var(--orange)}
.tds-panel-heading{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:16px;line-height:1.4}
.tds-panel-email{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(168,184,200,0.12);color:var(--white);font-family:'Barlow',sans-serif;font-size:13px;padding:9px 12px;border-radius:2px;outline:none;margin-bottom:10px;box-sizing:border-box;transition:border-color .2s}
.tds-panel-email:focus{border-color:var(--orange)}
.tds-panel-email::placeholder{color:var(--mist)}
.tds-panel-btn{width:100%;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:10px;background:var(--orange);color:var(--pure);border:none;border-radius:2px;cursor:pointer;transition:background .2s;margin-bottom:12px}
.tds-panel-btn:hover{background:var(--ember)}
.tds-panel-alt{font-family:'Barlow',sans-serif;font-size:12px;color:var(--mist);line-height:1.6}
.tds-panel-alt a{color:var(--orange);text-decoration:none;font-size:11px;word-break:break-all}
.tds-panel-alt a:hover{text-decoration:underline}

/* ── PRODUCT NAV BAR ── */
.prod-nav-bar{display:flex;justify-content:space-between;align-items:stretch;margin-top:60px;padding-top:40px;border-top:1px solid rgba(255,255,255,0.06);gap:16px}
.prod-nav-btn{display:flex;align-items:center;gap:12px;background:none;border:1px solid rgba(168,184,200,0.12);padding:16px 20px;cursor:pointer;transition:border-color .3s,background .3s;border-radius:2px;flex:1;text-align:left;text-decoration:none}
.prod-nav-btn:hover{border-color:rgba(212,84,26,0.4);background:rgba(212,84,26,0.04)}
.prod-nav-next{justify-content:flex-end;text-align:right}
.prod-nav-arrow{font-size:22px;color:var(--orange);display:inline-block;flex-shrink:0}
.prod-nav-prev:hover .prod-nav-arrow{animation:bounceLeft .4s ease}
.prod-nav-next:hover .prod-nav-arrow{animation:bounceRight .4s ease}
@keyframes bounceLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes bounceRight{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.prod-nav-label{display:flex;flex-direction:column;gap:2px}
.prod-nav-hint{font-family:'JetBrains Mono',monospace;font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--mist)}
.prod-nav-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;color:var(--pure);letter-spacing:.03em}

/* ── BC SEGMENTS (animated breadcrumb) ── */
.bc-seg{display:inline-block;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:60px}
.about-visual{position:relative;height:500px;background:var(--surface);border-radius:4px;border:1px solid rgba(212,84,26,0.15)}
.about-canvas{width:100%;height:100%}
.about-text p{font-family:'Barlow',sans-serif;font-size:15px;color:var(--cloud);line-height:1.8;margin-bottom:20px}
.about-items{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.about-item{background:var(--kova-earth);border:1px solid rgba(212,84,26,0.12);border-radius:3px;padding:18px 20px;border-left:2px solid var(--orange)}
.about-item-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--pure);margin-bottom:4px}
.about-item-desc{font-size:12px;color:var(--mist);line-height:1.5}

/* ── GEO LABEL ── */
.geo-label{position:absolute;pointer-events:none;background:rgba(20,24,32,0.92);border:1px solid rgba(212,84,26,0.4);border-radius:3px;padding:8px 12px;opacity:0;transition:opacity .2s ease;white-space:nowrap;z-index:10;transform:translate(-50%,-130%)}
.geo-label.visible{opacity:1}
.geo-label-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--orange);letter-spacing:.04em;margin-bottom:2px}
.geo-label-desc{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mist);letter-spacing:.08em}

/* ── ABOUT PARA ANIMATIONS ── */
@keyframes aboutParaIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.about-para{font-family:'Barlow',sans-serif;font-size:15px;color:var(--cloud);line-height:1.8;margin-bottom:20px;padding-left:16px;border-left:2px solid transparent;opacity:0;transition:border-left-color .3s ease}
.about-para.para-animated{border-left-color:var(--orange);animation:aboutParaIn .55s cubic-bezier(0.16,1,0.3,1) .12s forwards}

/* ── ABOUT ITEM SLIDE ANIMATIONS ── */
.about-item-from-left{opacity:0;transform:translateX(-28px);transition:opacity .5s ease,transform .5s cubic-bezier(0.16,1,0.3,1)}
.about-item-from-right{opacity:0;transform:translateX(28px);transition:opacity .5s ease,transform .5s cubic-bezier(0.16,1,0.3,1)}
.about-item-from-left.item-visible,.about-item-from-right.item-visible{opacity:1;transform:translateX(0)}

/* ── ABOUT STATS ROW ── */
/* auto-fit rather than a fixed column count: the row went from three stats to
   four when equipment and screens were added, and a hardcoded repeat(3) left
   the fourth wrapping onto its own full-width line. */
.about-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;margin-top:60px;border:1px solid rgba(212,84,26,0.12);border-radius:3px;overflow:hidden}
.stat-arc-item{background:var(--surface);padding:40px 24px;text-align:center;border-right:1px solid rgba(212,84,26,0.1)}
.stat-arc-item:last-child{border-right:none}
.stat-arc-wrap{position:relative;width:80px;height:80px;margin:0 auto 16px}
.stat-arc-svg{width:80px;height:80px;transform:rotate(-90deg)}
.stat-arc-bg{fill:none;stroke:rgba(212,84,26,0.12);stroke-width:4}
.stat-arc-fill{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8;transition:stroke-dashoffset 1.2s cubic-bezier(0.16,1,0.3,1)}
.stat-num-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em;color:var(--orange);line-height:1}
.stat-suffix-txt{font-size:16px;color:var(--ember);margin-left:1px}
.stat-arc-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--mist)}

/* ── PRODUCT STRIP ── */
.product-strip-wrap{margin-top:48px}
.product-strip-label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.product-strip-label::before{content:'';width:28px;height:1px;background:var(--orange)}
.product-strip{overflow:hidden;position:relative;height:82px}
.product-strip-track{display:flex;gap:2px;position:absolute;top:0;left:0;will-change:transform}
.strip-item{background:var(--surface);border:1px solid rgba(255,255,255,0.05);padding:16px 24px;cursor:pointer;transition:border-color .25s,background .25s;display:flex;align-items:center;gap:12px;white-space:nowrap;flex-shrink:0}
.strip-item:hover{border-color:rgba(212,84,26,0.3);background:var(--kova-earth)}
.strip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.strip-name{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--pure);display:block;transition:color .25s}
.strip-item:hover .strip-name{color:var(--orange)}
.strip-cat{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);display:block;margin-top:2px}

/* ── TIMELINE ── */

/* ── CONTACT ── */
#page-contact{position:relative}
.contact-bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.contact-details-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:48px;border:1px solid rgba(212,84,26,0.12);border-radius:3px;overflow:hidden;position:relative;z-index:1}
.contact-details-row .contact-info-item{background:var(--surface);padding:24px 28px;border-right:1px solid rgba(212,84,26,0.1);opacity:0;transform:translateX(24px);transition:opacity .5s ease,transform .5s cubic-bezier(0.16,1,0.3,1)}
.contact-details-row .contact-info-item:last-child{border-right:none}
.contact-details-row .contact-info-item.ci-visible{opacity:1;transform:translateX(0)}
.contact-info-item .ci-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);margin-bottom:6px}
.contact-info-item .ci-val{font-size:15px;color:var(--cloud);line-height:1.5}
.contact-info-item .ci-sub{font-size:12px;color:var(--mist);margin-top:4px}
@keyframes locPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:0.4}}
.ci-loc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);animation:locPulse 1.6s ease-in-out infinite;vertical-align:middle;margin-right:3px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.ci-cursor{display:inline-block;width:1px;height:13px;background:var(--orange);margin-left:2px;vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes globeSpin{to{transform:rotate(360deg)}}
.ci-globe{display:inline-block;animation:globeSpin 5s linear infinite;font-style:normal;vertical-align:middle}
.ci-docs-cycle{display:inline-block;min-width:36px;font-weight:600;color:var(--orange);font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em}
.contact-photo-hero{position:relative;width:100%;min-height:580px;margin-top:80px;background:url('oil-field-contactpage.jpg') center center/cover no-repeat;display:flex;align-items:flex-end}
.contact-photo-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.42) 50%,rgba(8,9,12,0.88) 100%)}
.contact-photo-content{position:relative;z-index:2;padding-top:40px;padding-bottom:64px;width:100%}
.contact-photo-content .section-tag{color:var(--orange)}
.contact-photo-content .section-title{color:#fff}
.contact-photo-content .section-sub{color:rgba(255,255,255,0.75);max-width:560px}
#contact-form-wrap{position:relative;z-index:1}
.contact-form{display:flex;flex-direction:column;gap:16px;margin-top:40px;margin-left:8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px;position:relative}
.form-field label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--mist);transition:color .25s ease,transform .25s ease;display:block;transform-origin:left center}
.form-field:focus-within label{color:var(--orange);transform:translateY(-4px)}
.form-field.is-filled label{color:rgba(212,84,26,0.65)}
.form-field input,.form-field select,.form-field textarea{background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-left:2px solid transparent;color:var(--white);padding:12px 16px;font-family:'Barlow',sans-serif;font-size:14px;border-radius:2px;outline:none;transition:border-color .3s,border-left-color .3s,box-shadow .3s,background .3s;width:100%}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:rgba(212,84,26,0.3);border-left-color:var(--orange);box-shadow:0 0 0 3px rgba(212,84,26,0.15);background:#1C2028}
.form-field.is-filled input,.form-field.is-filled select,.form-field.is-filled textarea{border-left-color:rgba(212,84,26,0.5)}
.form-field input.field-invalid,.form-field select.field-invalid,.form-field textarea.field-invalid{border-color:rgba(192,57,43,0.5)!important;border-left-color:var(--red)!important;box-shadow:0 0 0 3px rgba(192,57,43,0.1)!important}
.form-field textarea{resize:vertical;min-height:120px}
.form-field select option{background:var(--surface)}
.form-field input.error,.form-field select.error,.form-field textarea.error{border-left-color:var(--red)!important}
@keyframes fieldShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
.field-shake{animation:fieldShake 400ms ease}
.field-error{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--red);margin-top:3px;opacity:0;max-height:0;overflow:hidden;transition:opacity .2s,max-height .2s}
.field-error.visible{opacity:1;max-height:22px}
.email-input-wrap{position:relative}
.email-input-wrap input{padding-right:40px}
.email-valid-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none}
.email-valid-icon.valid{color:#27ae60;opacity:1}
.email-valid-icon.invalid{color:var(--red);opacity:1}
.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;z-index:1}
@keyframes cfSlideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.cf-anim{opacity:0}
.cf-anim.cf-visible{animation:cfSlideIn .4s ease-out forwards}

/* Custom select */
.custom-select{position:relative;user-select:none}
.cs-trigger{background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-left:2px solid transparent;color:var(--white);padding:11px 36px 11px 16px;font-family:'Barlow',sans-serif;font-size:14px;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color .3s,border-left-color .3s,background .3s,box-shadow .3s;min-height:44px}
.custom-select.open{position:relative;z-index:1000}
.custom-select.open .cs-trigger{border-color:rgba(212,84,26,0.3);border-left-color:var(--orange);box-shadow:0 0 0 3px rgba(212,84,26,0.15);background:#1C2028}
.cs-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-value.placeholder{color:rgba(245,247,250,0.3)}
.cs-arrow{color:var(--orange);font-size:11px;transition:transform .2s;flex-shrink:0;margin-left:8px}
.custom-select.open .cs-arrow{transform:rotate(180deg)}
.cs-options{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#1C2028;border:1px solid rgba(212,84,26,0.25);border-radius:2px;list-style:none;margin:0;padding:4px 0;max-height:0;overflow:hidden;opacity:0;transition:max-height .2s ease-out,opacity .2s ease-out;z-index:300}
.custom-select.open .cs-options{max-height:240px;opacity:1;overflow-y:auto}
.cs-option{padding:10px 16px;font-family:'Barlow',sans-serif;font-size:14px;color:var(--cloud);cursor:pointer;transition:background .15s,color .15s}
.cs-option:hover{background:rgba(212,84,26,0.12);color:var(--orange)}
.cs-option.selected{color:var(--orange)}
.cs-options::-webkit-scrollbar{width:3px}
.cs-options::-webkit-scrollbar-thumb{background:rgba(212,84,26,0.4);border-radius:2px}

/* Submit button */
.contact-submit-btn{position:relative;overflow:hidden;transition:transform .2s,background .2s,box-shadow .2s}
.contact-submit-btn::after{content:'';position:absolute;top:0;left:-110%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);transform:skewX(-20deg)}
.contact-submit-btn:hover{transform:scale(1.02);background:linear-gradient(90deg,var(--orange),var(--ember))}
.contact-submit-btn:hover::after{animation:btnShimmer 2s linear .25s infinite}
.contact-submit-btn:active{transform:scale(0.96)!important;transition:transform .1s!important}
.contact-submit-btn.loading{cursor:not-allowed;opacity:0.8;pointer-events:none}
@keyframes btnShimmer{from{left:-110%}to{left:160%}}
.btn-spinner-wrap{display:none;align-items:center;gap:8px}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.spin-icon{animation:btnSpin .7s linear infinite}

/* WhatsApp inline */
.whatsapp-btn{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:14px 24px;background:#25D366;color:#fff;border:none;border-radius:2px;cursor:pointer;text-decoration:none;transition:all .3s}
.whatsapp-btn:hover{background:#1fb858;transform:translateY(-2px)}
.whatsapp-btn svg{width:15px;height:15px;fill:#fff;flex-shrink:0}

/* SUCCESS STATE */
.contact-success{display:none;padding:64px 40px;background:var(--surface);border:1px solid rgba(212,84,26,0.2);border-radius:4px;text-align:center;margin-top:40px;position:relative;z-index:1}
.success-check-wrap{margin-bottom:24px}
.success-svg-check{display:block;margin:0 auto}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.check-circle{stroke-dasharray:157;stroke-dashoffset:157;animation:drawCircle .6s ease forwards}
.check-mark{stroke-dasharray:50;stroke-dashoffset:50;animation:drawCheck .35s ease .55s forwards}
.contact-success h3{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:.04em;color:var(--orange);margin-bottom:8px}
.success-sub{font-family:'Barlow',sans-serif;font-size:15px;color:var(--mist);margin-bottom:24px}
.success-details{display:flex;flex-direction:column;gap:6px;margin-bottom:32px;max-width:400px;margin-left:auto;margin-right:auto}
.success-detail-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.03);border-radius:2px;padding:10px 16px}
.sdl{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--mist)}
.sdv{font-size:14px;color:var(--cloud)}
.success-actions{display:flex;flex-direction:column;align-items:center;gap:20px}
.success-actions .btn-secondary{background:none;border:1px solid rgba(212,84,26,0.3);color:var(--orange);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:10px 24px;border-radius:2px;cursor:pointer;transition:all .3s}
.success-actions .btn-secondary:hover{border-color:var(--orange);background:rgba(212,84,26,0.08)}
.success-download{margin-top:4px}
.pdf-prompt{display:inline-flex;align-items:center;gap:16px;background:var(--kova-earth);border:1px solid rgba(212,84,26,0.3);border-radius:3px;padding:20px 28px;cursor:pointer;transition:all .3s;text-decoration:none}
.pdf-prompt:hover{border-color:var(--orange);background:var(--kova-earth-mid)}
.pdf-icon{font-size:28px;flex-shrink:0}
.pdf-text{text-align:left}
.pdf-label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);margin-bottom:3px}
.pdf-name{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;color:var(--pure)}

/* FLOATING WHATSAPP */
@keyframes waBounceIn{0%{transform:translateY(80px) scale(0.5);opacity:0}60%{transform:translateY(-8px) scale(1.1);opacity:1}80%{transform:translateY(4px) scale(0.97)}100%{transform:translateY(0) scale(1)}}
.float-wa{position:fixed;bottom:28px;left:28px;z-index:999;opacity:0}
.float-wa.wa-in{animation:waBounceIn .65s cubic-bezier(0.16,1,0.3,1) forwards}
.float-wa-btn{width:52px;height:52px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 20px rgba(212,84,26,0.35);transition:transform .25s,box-shadow .25s}
.float-wa-btn:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(212,84,26,0.55)}
.float-wa-btn:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.float-wa-btn svg{fill:white;width:26px;height:26px}
.float-wa-tooltip{position:absolute;left:60px;bottom:12px;background:rgba(10,12,15,0.95);color:var(--cloud);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;padding:6px 12px;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-4px);pointer-events:none;border:1px solid rgba(212,84,26,0.2)}
.float-wa:hover .float-wa-tooltip{opacity:1;transform:translateX(0)}
@media(max-width:900px){.float-wa{bottom:20px;left:16px}.float-wa-tooltip{display:none}}

/* ── FOOTER ── */
footer{background:var(--surface);border-top:1px solid rgba(212,84,26,0.15);padding:60px 80px 32px}
.footer-bar{height:2px;background:linear-gradient(to right,var(--kova-earth),var(--orange),var(--teal));margin-bottom:48px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:48px}
.footer-logo{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.06em;color:var(--pure);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.footer-logo span{color:var(--ember)}
.footer-logo-icon{height:44px;width:auto;display:block;transform:translateY(-4px)}
.footer-logo-text{line-height:1;display:inline-block}
.footer-desc{font-size:13px;color:var(--mist);line-height:1.7;max-width:260px;margin-bottom:20px}
.footer-social{display:flex;gap:10px}
.social-icon{width:32px;height:32px;border:1px solid rgba(168,184,200,0.15);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--mist);transition:all .3s;cursor:pointer;text-decoration:none}
.social-icon:hover{border-color:var(--orange);color:var(--orange)}
.social-icon svg{width:14px;height:14px;fill:currentColor}
.footer-col-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--pure);margin-bottom:16px}
/* Second-level heading inside a footer column (chemical categories beneath the
   product groups): quieter than the column title so the hierarchy reads. */
.footer-col-title-sub{margin-top:24px;color:var(--mist);font-size:11px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:13px;color:var(--mist);text-decoration:none;transition:color .3s;cursor:pointer}
.footer-links a:hover{color:var(--ember)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.05);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-legal{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mist)}

/* ── GLOWS & FX ── */
.glow-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:0.12}
.glow-orange{background:var(--orange)}
.glow-teal{background:var(--teal)}

/* ── LOADING ── */
#loading{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}
#loading.split-reveal .loading-top{animation:splitTop .45s cubic-bezier(0.16,1,0.3,1) .1s forwards}
#loading.split-reveal .loading-bottom{animation:splitBottom .45s cubic-bezier(0.16,1,0.3,1) .1s forwards}
#loading.split-done{display:none}
@keyframes splitTop{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes splitBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}
.loading-top,.loading-bottom{position:absolute;left:0;right:0;background:var(--bg);z-index:1;pointer-events:none}
.loading-top{top:0;height:50%}
.loading-bottom{bottom:0;height:50%}
.loading-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.loading-logo-icon{height:96px;width:auto;display:block;margin:0 auto 6px;opacity:0;will-change:transform,opacity}
.loading-logo-icon.anim{animation:loadLetterIn .55s cubic-bezier(0.34,1.56,0.64,1) forwards}
.loading-letters{display:flex;margin-bottom:32px}
@keyframes loadLetterIn{0%{opacity:0;transform:translateY(-48px)}55%{transform:translateY(6px)}80%{transform:translateY(-2px)}100%{opacity:1;transform:translateY(0)}}
.loading-letter{font-family:'Bebas Neue',sans-serif;font-size:72px;letter-spacing:.04em;color:var(--pure);opacity:0;display:inline-block;will-change:transform,opacity}
.loading-letter.anim{animation:loadLetterIn .5s cubic-bezier(0.34,1.56,0.64,1) forwards}
.loading-bar{width:200px;height:2px;background:rgba(255,255,255,0.1);border-radius:1px;overflow:hidden;margin-bottom:0}
.loading-fill{height:100%;background:linear-gradient(to right,var(--kova-earth),var(--orange),var(--teal));width:0;animation:loadfill 1.8s ease-in-out forwards}
@keyframes loadfill{from{width:0}to{width:100%}}
.loading-dots{display:flex;gap:6px;margin-top:18px;align-items:center}
.loading-dot{width:4px;height:4px;border-radius:50%;background:var(--mist);animation:dotPulse 1.2s ease-in-out infinite}
.loading-dot:nth-child(2){animation-delay:.2s}
.loading-dot:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
.loading-scale-wrap{transition:transform .3s ease}
.loading-scale-wrap.pulse{transform:scale(1.08)}

/* ── ANIMATIONS ── */
.fade-up{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.8,.2,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── CURSOR ── */
.cursor{position:fixed;width:6px;height:6px;background:var(--orange);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:opacity .15s;mix-blend-mode:screen}
.cursor.dot-hidden{opacity:0}
.cursor-ring{position:fixed;width:28px;height:28px;border:1px solid rgba(212,84,26,0.55);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;transition:width .2s ease,height .2s ease,background .2s ease,border-color .2s ease,opacity .15s}
.cursor-ring.ring-hover{width:48px;height:48px;background:rgba(212,84,26,0.15);border-color:rgba(212,84,26,0.8)}
.cursor-ring.ring-click{width:20px!important;height:20px!important;transition:width .08s,height .08s}
.cursor-ring.ring-hidden{opacity:0}
.cursor-label{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);pointer-events:none;user-select:none;opacity:0;transition:opacity .15s;white-space:nowrap;line-height:1}
.cursor-ring.ring-hover .cursor-label{opacity:1}

/* ── TECHNICAL DATA TABLE ── */
.tds-table-wrap{overflow-x:auto;margin-top:40px;border:1px solid rgba(212,84,26,0.15);border-radius:3px}
.tds-table{width:100%;border-collapse:collapse;min-width:960px;table-layout:fixed}
.tds-table thead{background:var(--kova-earth);border-bottom:1px solid rgba(212,84,26,0.3)}
.tds-table th{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);padding:14px 20px;text-align:left;white-space:nowrap;font-weight:500;width:14.2857%;overflow:hidden;text-overflow:ellipsis}
.tds-table th:last-child{text-align:center}
.tds-table tbody tr{border-bottom:1px solid rgba(255,255,255,0.04);transition:background .2s}
.tds-table tbody tr:last-child{border-bottom:none}
.tds-table tbody tr:hover{background:rgba(212,84,26,0.18)}
.tds-table td{width:14.2857%;padding:18px 20px;vertical-align:middle;font-size:13px;color:var(--mist);word-wrap:break-word;overflow-wrap:break-word}
.tds-name{font-family:'Barlow',sans-serif;font-weight:700;font-size:13px;letter-spacing:.01em;color:var(--pure);white-space:normal}
.tds-mono{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist);letter-spacing:normal}
.tds-cat-badge{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tds-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tds-cat-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--mist)}
.tds-req-btn{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;padding:8px 16px;background:transparent;border:1px solid rgba(212,84,26,0.4);color:var(--orange);border-radius:2px;cursor:pointer;transition:all .25s;white-space:nowrap}
.tds-req-btn:hover{background:var(--orange);color:var(--pure);border-color:var(--orange)}
.tds-note{margin-top:24px;padding:16px 20px;background:var(--surface);border:1px solid rgba(212,84,26,0.12);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mist);letter-spacing:.08em;line-height:1.7}
.tds-note a{color:var(--orange);text-decoration:none}
.tds-note a:hover{text-decoration:underline}
.tds-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.tds-search-wrap{position:relative;flex:1;min-width:200px;max-width:320px}
.tds-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--mist);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.tds-search{width:100%;background:var(--surface);border:1px solid rgba(212,84,26,0.2);border-radius:2px;padding:10px 14px 10px 36px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--pure);letter-spacing:.06em;outline:none;transition:border-color .2s,box-shadow .2s}
.tds-search::placeholder{color:var(--mist)}
.tds-search:focus{border-color:var(--orange);box-shadow:0 0 0 2px rgba(212,84,26,0.12)}
.tds-cat-filters{display:flex;flex-wrap:wrap;gap:8px}
.tds-cat-btn{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.16em;padding:7px 14px;background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--mist);border-radius:2px;cursor:pointer;transition:all .2s;white-space:nowrap}
.tds-cat-btn:hover{border-color:rgba(212,84,26,0.4);color:var(--cloud)}
.tds-cat-btn.active{background:var(--orange);border-color:var(--orange);color:var(--pure)}
.tds-no-results{display:none;padding:32px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mist);letter-spacing:.1em}
[data-theme="light"] .tds-search{background:var(--surface);border-color:rgba(212,84,26,0.25)}
[data-theme="light"] .tds-cat-btn{border-color:rgba(0,0,0,0.15);color:var(--mist)}

/* ── BACK TO TOP ── */
.back-to-top{position:fixed;bottom:80px;right:32px;width:44px;height:44px;background:var(--orange);color:var(--pure);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease,background .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(212,84,26,0.35)}
.back-to-top.visible{opacity:1;pointer-events:all;transform:translateY(0)}
.back-to-top:hover{background:var(--ember);transform:translateY(0) scale(1.12);box-shadow:0 8px 28px rgba(212,84,26,0.55)}
.back-to-top svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ── ACCESSIBILITY ── */
*:focus-visible{outline:2px solid var(--orange)!important;outline-offset:3px!important;border-radius:2px}
.skip-to-content{position:absolute;top:-100px;left:16px;z-index:99999;padding:8px 18px;background:var(--orange);color:var(--pure);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;border-radius:2px;transition:top .2s ease;white-space:nowrap}
.skip-to-content:focus{top:16px}

/* ── SOUND TOGGLE ── */
.sound-toggle{width:32px;height:32px;background:none;border:1px solid rgba(168,184,200,0.15);border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mist);transition:all .25s;flex-shrink:0}
.sound-toggle:hover,.sound-toggle.sound-on{border-color:var(--orange);color:var(--orange)}
.sound-toggle svg{width:14px;height:14px;fill:currentColor}

/* ── FOOTER BAR THREE-STOP ── */
.footer-bar{height:2px;background:linear-gradient(to right,#3D1F0A,#D4541A,#0C7A6A)!important;margin-bottom:48px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  :root{--nav-h:72px}
  /* Was `nav{...}` — an element selector, which loses to the #navbar id rule
     above, so the mobile gutter never actually applied. */
  #navbar{padding:16px 24px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .hero-content{padding:0 24px}
  .hero-stats{right:24px;bottom:60px}
  .section,.prod-detail{padding:80px 24px}
  .filter-bar-sticky{margin-left:-24px;margin-right:-24px;padding:12px 24px;flex-wrap:wrap;gap:12px}
  .filter-bar{flex-wrap:wrap}
  .prod-detail-grid,.about-grid{grid-template-columns:1fr;gap:40px}
  .about-stats-row{grid-template-columns:1fr}
  .stat-arc-item{border-right:none;border-bottom:1px solid rgba(212,84,26,0.1)}
  .stat-arc-item:last-child{border-bottom:none}
  .contact-details-row{grid-template-columns:1fr 1fr}
  .contact-details-row .contact-info-item:nth-child(2){border-right:none}
  .contact-details-row .contact-info-item:nth-child(3){border-top:1px solid rgba(212,84,26,0.1)}
  .contact-details-row .contact-info-item:nth-child(4){border-top:1px solid rgba(212,84,26,0.1)}
  .prod-detail-canvas-wrap{height:320px}
  .insights-section{padding:60px 24px}
  .insights-grid{grid-template-columns:1fr;background:none;gap:2px}
  .mfr-grid{grid-template-columns:1fr}
  .about-basin-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .qual-grid{grid-template-columns:repeat(2,1fr)}
  .qual-panel{padding:28px}
  .tds-sticky-panel{display:none}
  .tds-request-tab{display:none!important}
  .prod-nav-btn{padding:12px 14px;gap:8px}
  .prod-nav-name{font-size:13px}
  .about-visual{height:320px}
  .form-row{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .app-nav{grid-template-columns:repeat(2,1fr);gap:8px;margin:20px 0 0}
  .prod-search-wrap{width:100%}
  .basin-section{padding:28px}
  .basin-grid{grid-template-columns:1fr 1fr}
  .detail-tabs{flex-wrap:wrap}
}
@media(max-width:480px){
  .products-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .about-stats-row{grid-template-columns:1fr}
  .app-nav{grid-template-columns:1fr}
  .basin-grid{grid-template-columns:1fr}
  .dosing-grid{grid-template-columns:1fr}
  .qual-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .order-step{grid-template-columns:56px 1fr}
  .order-step-num{font-size:44px}
}

/* ── COMING SOON CARD ────────────────────────────────────────────────── */
.prod-card-coming{background:var(--surface);border:1px solid rgba(168,184,200,0.1);border-radius:3px;padding:0;overflow:hidden;position:relative;opacity:0.65;cursor:default}
.prod-card-coming-inner{padding:24px 22px 22px;display:flex;flex-direction:column;gap:12px}
.coming-badge{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--teal-light);border:1px solid rgba(13,184,160,0.3);padding:4px 10px;border-radius:2px;width:fit-content}
.coming-name{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.06em;color:rgba(255,255,255,0.5);line-height:1}
.coming-cat{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--mist)}
.coming-desc{font-family:'Barlow',sans-serif;font-size:13px;color:var(--mist);line-height:1.65}
.coming-eta{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--mist);margin-top:4px}
.coming-notify{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);cursor:pointer;transition:opacity .2s;border:none;background:transparent;padding:0;margin-top:4px}
.coming-notify:hover{opacity:.7}
.coming-lock{position:absolute;top:16px;right:16px;width:28px;height:28px;border:1px solid rgba(168,184,200,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center}
.coming-lock svg{width:12px;height:12px;stroke:var(--mist);stroke-width:2;fill:none}
/* ── HOW TO ORDER PAGE ───────────────────────────────────────────────── */
.order-steps{display:flex;flex-direction:column;gap:0;margin-top:48px;position:relative}
.order-step{display:grid;grid-template-columns:80px 1fr;gap:0;position:relative}
.order-step-num{font-family:'Bebas Neue',sans-serif;font-size:64px;letter-spacing:.02em;color:rgba(212,84,26,0.15);line-height:.9;padding-top:4px;flex-shrink:0;transition:color .3s}
.order-step:hover .order-step-num{color:rgba(212,84,26,0.45)}
.order-step-body{padding:0 0 52px 0;border-left:1px solid rgba(212,84,26,0.15);padding-left:32px;position:relative}
.order-step-body::before{content:'';width:10px;height:10px;background:var(--orange);border-radius:50%;position:absolute;left:-5px;top:6px;box-shadow:0 0 12px rgba(212,84,26,0.5)}
.order-step:last-child .order-step-body{border-left-color:transparent}
.order-step-tag{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:8px}
.order-step-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.06em;color:var(--pure);margin-bottom:10px;line-height:1}
.order-step-desc{font-family:'Barlow',sans-serif;font-size:14px;color:var(--cloud);line-height:1.75;max-width:600px}
.order-step-detail{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.order-detail-chip{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border:1px solid rgba(168,184,200,0.15);color:var(--mist);border-radius:2px}
/* ── SUPPLIER QUALIFICATION ──────────────────────────────────────────── */
.qual-panel{background:rgba(13,184,160,0.06);border:1px solid rgba(13,184,160,0.2);border-radius:4px;padding:48px;margin-top:64px}
.qual-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:32px 0;background:rgba(13,184,160,0.1)}
.qual-doc{background:var(--bg);padding:20px 16px}
.qual-doc-code{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--teal-light);margin-bottom:8px}
.qual-doc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--pure);margin-bottom:4px}
.qual-doc-desc{font-family:'Barlow',sans-serif;font-size:11px;color:var(--mist);line-height:1.55}
/* ── BLOG / INSIGHTS PAGE ────────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;background:rgba(212,84,26,0.06)}
.blog-card{background:var(--bg);padding:32px 28px;display:flex;flex-direction:column}
.blog-card-soon{background:var(--surface);opacity:.55;cursor:default}
.blog-card-tag{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.blog-card-tag::after{content:'';flex:1;height:1px;background:rgba(212,84,26,0.2)}
.blog-card-date{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--mist);margin-bottom:10px}
.blog-card-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:.03em;color:var(--pure);line-height:1.25;margin-bottom:14px}
.blog-card-body{font-family:'Barlow',sans-serif;font-size:14px;color:var(--cloud);line-height:1.75;flex:1}
.blog-card-cta{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--orange);margin-top:20px;background:transparent;border:none;cursor:pointer;padding:0;transition:opacity .2s;text-align:left}
.blog-card-cta:hover{opacity:.7}
.blog-soon-label{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--mist);margin-top:16px}
.blog-subscribe{background:var(--surface);border:1px solid rgba(212,84,26,0.15);border-radius:4px;padding:48px;margin-top:32px;text-align:center}

/* ── FOCUS RINGS ─────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:1px}
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-trial:focus-visible,
.nav-cta:focus-visible,
.filter-btn:focus-visible,
.app-nav-card:focus-visible,
.finder-choice:focus-visible,
.lang-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
.nav-links a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)!important}
.cs-trigger:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.prod-nav-btn:focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}
a:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:1px}
/* Skip to main content link */
.skip-to-main{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999}
.skip-to-main:focus-visible{left:16px;top:16px;width:auto;height:auto;padding:12px 20px;background:var(--orange);color:var(--pure);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px}

/* ── CANVAS FALLBACK ─────────────────────────────────────────────────── */
.canvas-fallback{width:100%;height:100%;background:radial-gradient(ellipse at 40% 50%,rgba(212,84,26,0.12) 0%,rgba(13,184,160,0.06) 50%,transparent 75%),var(--surface);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.canvas-fallback::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(212,84,26,0.03) 0,rgba(212,84,26,0.03) 1px,transparent 0,transparent 50%);background-size:20px 20px}
.canvas-fallback-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(168,184,200,0.3)}

/* ── PREFERS REDUCED MOTION ──────────────────────────────────────────── */
@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;
  }
  /* Immediately reveal elements that start hidden for animation */
  .fade-up,.hero-sub,.hero-btns,.hero-scroll,.hero-eyebrow,.hero-title,
  .about-para,.cf-anim,.detail-info-item,.about-item-from-left,.about-item-from-right,
  .ci-visible,.contact-info-item{
    opacity:1!important;transform:none!important;
  }
  .marquee-track{transform:none!important}
  .stat-bar-fill{transition:none!important}
  .prod-card.card-entering,.prod-card.card-animating{animation:none!important;opacity:1!important;transform:none!important}
  .float-wa{opacity:1!important}
  #page-transition{display:none!important}
}