/*
Theme Name: SHIELD TRACK
Theme URI: https://shiledtrack.com
Author: Restart Group
Description: SHIELD TRACK GPS tracking and fleet management WordPress theme.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Private
Text Domain: shieldtrack
Tags: woocommerce, gps, tracking, fleet, oman
*/

/* ═══════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════ */
:root {
  --orange:    #EA580C;           /* deeper burnt-orange — premium, not neon */
  --orange-dk: #C2410C;           /* darker hover state */
  --orange-lt: rgba(234,88,12,.08); /* tinted bg for chips/labels */
  --navy:      #0F1728;
  --navy-lt:   #1a2744;
  --charcoal:  #1a1a1a;
  --grey-bg:   #F8F9FA;
  --grey-mid:  #E5E7EB;
  --grey-txt:  #6B7280;
  --green:     #15803D;           /* dark forest green — mature, not neon */
  --green-dk:  #166534;           /* hover / deeper */
  --white:     #ffffff;
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:    12px;
  --shadow:    0 4px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.14);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); color: var(--charcoal); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; transition: color .2s; }
ul   { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; }
input, select, textarea { font-family: var(--font); }

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; color: var(--charcoal); }
p { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.st-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.st-section    { padding: 80px 0; }
.st-section-sm { padding: 60px 0; }
.st-divider    { height: 1px; background: var(--grey-mid); }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.st-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 8px; font-weight: 600;
  font-size: 15px; cursor: pointer; border: none; line-height: 1;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
  text-decoration: none; font-family: var(--font); letter-spacing: .01em;
}
/* Primary orange — deep, warm, premium */
.st-btn-orange       { background: var(--orange); color: #fff; }
.st-btn-orange:hover { background: var(--orange-dk); color: #fff;
                       transform: translateY(-1px);
                       box-shadow: 0 4px 14px rgba(194,65,12,.28); }
/* Navy */
.st-btn-navy         { background: var(--navy); color: #fff; }
.st-btn-navy:hover   { background: var(--navy-lt); color: #fff;
                       transform: translateY(-1px);
                       box-shadow: 0 4px 14px rgba(15,23,40,.35); }
/* Outline */
.st-btn-outline       { background: transparent; color: var(--orange); border: 2px solid var(--orange); }
.st-btn-outline:hover { background: var(--orange); color: #fff; }
/* WhatsApp — dark forest green, not neon */
.st-btn-wa       { background: var(--green); color: #fff; }
.st-btn-wa:hover { background: var(--green-dk); color: #fff;
                   transform: translateY(-1px);
                   box-shadow: 0 4px 14px rgba(21,128,61,.28); }
/* White */
.st-btn-white       { background: #fff; color: var(--charcoal); }
.st-btn-white:hover { background: var(--grey-bg); color: var(--charcoal); }
/* Sizes */
.st-btn-sm   { padding: 10px 18px; font-size: 14px; }
.st-btn-lg   { padding: 16px 32px; font-size: 16px; }
.st-btn-full { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════
   CHIPS & BADGES
═══════════════════════════════════════════ */
.st-chip { display: inline-block; background: var(--orange-lt); color: var(--orange); padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.st-dot-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(22,163,74,.12); color: var(--green); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.st-dot-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: st-pulse 2s infinite; }
@keyframes st-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ═══════════════════════════════════════════
   SECTION HEADINGS
═══════════════════════════════════════════ */
.st-sec-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.st-sec-title { font-size: clamp(26px,4vw,42px); font-weight: 800; color: var(--charcoal); line-height: 1.15; margin-bottom: 14px; }
.st-sec-sub   { font-size: 17px; color: var(--grey-txt); line-height: 1.7; max-width: 640px; }
.st-sec-head  { margin-bottom: 52px; }
.st-sec-head.center { text-align: center; }
.st-sec-head.center .st-sec-sub { margin: 0 auto; }

/* ═══════════════════════════════════════════
   MAIN NAVBAR
═══════════════════════════════════════════ */
#st-navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--grey-mid);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.st-nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; height: 68px; gap: 28px;
}
.st-logo { display: flex; flex-direction: column; flex-shrink: 0; text-decoration: none; }
.st-logo-en { font-size: 22px; font-weight: 900; color: var(--navy); letter-spacing: -.5px; line-height: 1; }
.st-logo-en span { color: var(--orange); }
.st-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.st-nav-links a { font-size: 14px; font-weight: 500; color: var(--charcoal); padding: 7px 13px; border-radius: 7px; transition: all .2s; white-space: nowrap; }
.st-nav-links a:hover, .st-nav-links a.active, .st-nav-links .current-menu-item > a, .st-nav-links .current_page_item > a { color: var(--orange); background: var(--orange-lt); }
.st-nav-cta  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.st-nav-phone { font-size: 14px; font-weight: 600; color: var(--charcoal); white-space: nowrap; }
.st-nav-phone:hover { color: var(--orange); }
.st-nav-quote { background: var(--orange); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; transition: all .2s; white-space: nowrap; }
.st-nav-quote:hover { background: var(--orange-dk); color: #fff; transform: translateY(-1px); }
/* Hamburger */
.st-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; margin-left: auto; background: none; border: none; }
.st-hamburger span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: all .3s; }
/* Mobile nav */
.st-mobile-nav { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--grey-mid); }
.st-mobile-nav a { font-size: 15px; font-weight: 500; color: var(--charcoal); padding: 14px 24px; border-bottom: 1px solid var(--grey-mid); }
.st-mobile-nav a:hover { color: var(--orange); background: var(--orange-lt); }
.st-mobile-nav .st-mob-wa { background: #25D366; color: #fff; margin: 16px 24px; border-radius: 8px; padding: 14px 24px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.st-mobile-nav.open { display: flex; }

/* Promo bar */
#st-promo {
  background: linear-gradient(90deg, var(--navy) 0%, #1a3060 60%, var(--navy) 100%);
  padding: 12px 24px;
}
.st-promo-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-promo-badge { background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; flex-shrink: 0; }
.st-promo-text  { font-size: 14px; color: #fff; font-weight: 600; flex: 1; }
.st-promo-text span { color: var(--orange); }
.st-promo-cta   { background: var(--orange); color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s; }
.st-promo-cta:hover { background: var(--orange-dk); color: #fff; }

/* ═══════════════════════════════════════════
   HERO — Full-width carousel
   APPROACH: display:none / display:flex !important
   Inactive slides have NO layout presence at all.
═══════════════════════════════════════════ */
#st-hero {
  background: #07111f;
  margin: 0;
  padding: 0;
}

/* Slider container — auto height set by active slide */
#st-hero-slider {
  position: relative;
}

/* ── INACTIVE slides: COMPLETELY REMOVED FROM LAYOUT ── */
.st-slide {
  display: none !important;
}

/* ── Background image defaults for every slide.
     A slide's own inline style only ever sets background-image and
     background-position (per-slide focal point from the Customizer);
     size/repeat are controlled here so they're easy to adjust later. ── */
.st-slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* ── ACTIVE slide: shown, full-width, flow-based height ── */
.st-slide.active {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  position: relative;       /* contains ::before overlay + dot z-index */
  width: 100%;
  min-height: 600px;        /* consistent, professional desktop hero height */
  padding: 100px 24px 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: st-fade-in .6s ease;
  animation: st-fade-in .6s ease;
}

/* Dark overlay — no extra div needed.
   Gradient-background slides (no photo) keep this lighter overlay since
   the navy gradient is already dark. */
.st-slide.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 12, 25, .32);
  pointer-events: none;
  z-index: 0;
}
/* Photo slides need a stronger single overlay so white text stays
   readable over any uploaded image — premium, not fully opaque. */
.st-slide.st-has-img.active::before {
  background: rgba(5, 12, 25, .52);
}

@-webkit-keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-fade-in          { from { opacity: 0; } to { opacity: 1; } }

/* ── Background gradients on slide divs directly ── */
.st-hbg-1 {
  background:
    radial-gradient(ellipse 70% 80% at 15% 65%, rgba(249,115,22,.18) 0%, transparent 60%),
    linear-gradient(145deg, #07111f 0%, #0e1c30 50%, #0b1828 100%);
}
.st-hbg-2 {
  background:
    radial-gradient(ellipse 60% 70% at 85% 40%, rgba(249,115,22,.14) 0%, transparent 55%),
    linear-gradient(145deg, #060f1c 0%, #0c1a2e 50%, #091525 100%);
}
.st-hbg-3 {
  background:
    radial-gradient(ellipse 65% 75% at 20% 30%, rgba(249,115,22,.16) 0%, transparent 60%),
    linear-gradient(145deg, #081220 0%, #0f1d30 50%, #0b1928 100%);
}
.st-hbg-4 {
  background:
    radial-gradient(ellipse 55% 65% at 75% 70%, rgba(249,115,22,.15) 0%, transparent 55%),
    linear-gradient(145deg, #07101e 0%, #0d1b2c 50%, #0a1623 100%);
}

/* ── Slide content sits above ::before overlay ── */
.st-hsc {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.st-hsc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
}
.st-hsc-title {
  font-size: clamp(34px, 5.5vw, 66px);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.st-hsc-sub {
  font-family: var(--font); /* same clean modern font as the feature bar text below */
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 36px;
}

/* ── Outline-white CTA (slide 4) ── */
.st-btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
}
.st-btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: #fff;
}

/* ── Dots: absolutely positioned at bottom of slider ── */
.st-hero-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}
.st-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-transition: background .35s, width .35s;
  transition: background .35s, width .35s;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.st-dot.active { background: var(--orange); width: 44px; }

/* ── Stats bar ── */
.st-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.st-hs-item { padding: 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.06); }
.st-hs-item:last-child { border-right: none; }
.st-hs-icon  { font-size: 22px; display: block; margin-bottom: 4px; }
.st-hs-label { font-size: 12px; color: rgba(255,255,255,.55); font-weight: 500; }

/* ═══════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════ */
#st-trust { background: var(--grey-bg); border-bottom: 1px solid var(--grey-mid); padding: 15px 24px; }
.st-trust-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; }
.st-trust-item  { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #444; }

/* ═══════════════════════════════════════════
   LAUNCH OFFER BANNER
═══════════════════════════════════════════ */
#st-offer { background: linear-gradient(135deg, var(--navy) 0%, #1e3a5f 50%, var(--orange-dk) 100%); padding: 60px 24px; }
.st-offer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.st-offer-badge { display: inline-block; background: rgba(0,0,0,.25); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; margin-bottom: 14px; }
.st-offer-title { font-size: clamp(26px,4vw,40px); font-weight: 900; color: #fff; line-height: 1.15; margin-bottom: 12px; }
.st-offer-desc  { font-size: 16px; color: rgba(255,255,255,.88); line-height: 1.65; margin-bottom: 22px; max-width: 540px; }
.st-offer-list  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.st-offer-item  { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #fff; font-weight: 500; }
.st-offer-item::before { content: '✓'; font-weight: 800; }
.st-offer-btns  { display: flex; gap: 12px; flex-wrap: wrap; }
.st-offer-box   { background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.3); border-radius: 16px; padding: 28px 32px; text-align: center; min-width: 200px; }
.st-offer-box .lbl   { font-size: 11px; color: rgba(255,255,255,.7); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px; }
.st-offer-box .price { font-size: 44px; font-weight: 900; color: #fff; line-height: 1; display: block; margin-bottom: 4px; }
.st-offer-box .sub   { font-size: 13px; color: rgba(255,255,255,.65); }
.st-offer-box .incl  { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 12px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; line-height: 1.6; text-align: left; }

/* ═══════════════════════════════════════════
   PRODUCT CARDS (shared — homepage & shop)
═══════════════════════════════════════════ */
.st-prod-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }

/* Card: full height within grid row, flex column so body stretches */
.st-prod-card {
  border: 1.5px solid var(--grey-mid);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.st-prod-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Image: consistent 3:2 ratio, never distorted */
.st-prod-img {
  aspect-ratio: 3/2;
  background: var(--grey-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}
.st-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-prod-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 4px;
}

/* Body: flex column so price+actions pin to bottom */
.st-prod-body  { padding: 18px 18px 0; display: flex; flex-direction: column; flex: 1; }
.st-prod-cat   { font-size: 10px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; display: block; }
.st-prod-name  { font-size: 15px; font-weight: 800; color: var(--charcoal); margin-bottom: 7px; line-height: 1.3; }
.st-prod-name a { color: inherit; }
.st-prod-name a:hover { color: var(--orange); }
.st-prod-desc  { font-size: 13px; color: var(--grey-txt); line-height: 1.6; flex: 1; margin-bottom: 12px; }
.st-prod-benefits { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.st-prod-ben   { font-size: 12px; color: #444; display: flex; align-items: center; gap: 5px; }
.st-prod-ben::before { content: '✓'; color: var(--green); font-weight: 700; }

/* Price row — sits just above action buttons */
.st-prod-price-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 12px; }
.st-prod-from  { font-size: 11px; color: var(--grey-txt); }
.st-prod-price { font-size: 20px; font-weight: 800; color: var(--charcoal); }
.st-prod-price .cur { font-size: 13px; font-weight: 600; }
.st-prod-price .ph  { color: var(--grey-txt); font-size: 18px; letter-spacing: 1px; }
.st-prod-sub   { font-size: 11px; color: var(--grey-txt); }
/* WC price filter output */
.st-price-placeholder { font-size: 14px; font-weight: 700; color: var(--orange); }

/* Actions: always at bottom, separated from body by top border */
.st-prod-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 18px;
  border-top: 1px solid var(--grey-mid);
  margin-top: auto;
}

/* ── WooCommerce UI suppressions ── */
.woocommerce-ordering,
.woocommerce-result-count       { display: none !important; }
/* Hide default WC loop product link (we use our own card anchor) */
.woocommerce-loop-product__link { pointer-events: none; }
/* Hide any stray Add to Cart / Read more WC renders */
.woocommerce .button.add_to_cart_button,
.woocommerce a.button.product_type_simple,
.woocommerce a.button.product_type_variable { display: none !important; }

/* ═══════════════════════════════════════════
   SOLUTIONS GRID
═══════════════════════════════════════════ */
.st-sol-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

/* Clickable card wrapper */
.st-sol-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;   /* fills grid cell so cards are equal height */
}
.st-sol-card {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.st-sol-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 3px;
  background: var(--orange);
  transition: width .3s;
}
/* Hover via wrapper (whole card clickable) */
.st-sol-card-link:hover .st-sol-card {
  border-color: rgba(234,88,12,.3);
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
.st-sol-card-link:hover .st-sol-card::after { width: 100%; }
/* Keep direct hover for cards not wrapped in <a> (e.g. Plans page) */
.st-sol-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.st-sol-card:hover::after { width: 100%; }

.st-sol-icon { width: 50px; height: 50px; background: var(--orange-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.st-sol-card h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.st-sol-card p  { font-size: 14px; color: var(--grey-txt); line-height: 1.65; margin-bottom: 14px; }
/* Read More link — pushed to bottom by flex grow */
.st-sol-link {
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  color: var(--orange);
  font-weight: 700;
  display: inline-block;
  letter-spacing: .1px;
  transition: letter-spacing .2s;
}
.st-sol-card-link:hover .st-sol-link { letter-spacing: .5px; }

/* Solution detail placeholder */
.st-detail-placeholder {
  background: var(--grey-bg);
  border: 2px dashed var(--grey-mid);
  border-radius: var(--radius);
  padding: 60px 40px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   FLEET SECTION (dark)
═══════════════════════════════════════════ */
#st-fleet { background: var(--navy); }
#st-fleet .st-sec-title { color: #fff; }
#st-fleet .st-sec-sub   { color: rgba(255,255,255,.6); }
.st-fleet-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.st-fleet-list   { display: flex; flex-direction: column; gap: 13px; }
.st-fi {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 16px 18px; transition: all .25s;
}
.st-fi:hover { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.4); }
.st-fi-icon { width: 40px; height: 40px; background: rgba(249,115,22,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.st-fi h4   { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.st-fi p    { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; }
/* Dashboard mockup */
.st-dash { background: #0a1424; border-radius: 14px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.07); }
.st-dash-bar { display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.st-dd { width: 10px; height: 10px; border-radius: 50%; }
.dd-r{background:#ef4444;} .dd-y{background:#f59e0b;} .dd-g{background:#22c55e;}
.st-dash-bar span { font-size: 10px; color: rgba(255,255,255,.3); margin-left: 6px; font-family: monospace; }

/* ═══════════════════════════════════════════
   PRODUCT SHOWCASE SLIDER (homepage, dark section)
   Isolated .st-pshow-* namespace — independent from .st-arc-* (category
   archive / related products) and .st-prod-card, so editing this slider
   can never affect those other pages.
═══════════════════════════════════════════ */
#st-product-showcase { background: var(--navy); }
#st-product-showcase .st-sec-title { color: #fff; }
#st-product-showcase .st-sec-sub   { color: rgba(255,255,255,.6); }

.st-pshow-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.st-pshow-viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.st-pshow-track {
  display: flex;
  flex-wrap: nowrap; /* explicit — cards must stay in one horizontal row, never wrap */
  transition: transform .45s ease;
  will-change: transform;
}
/* Desktop default: 3 cards per view */
.st-pshow-slide {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 10px;
  box-sizing: border-box;
}
.st-pshow-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
.st-pshow-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--grey-mid);
  box-shadow: 0 6px 22px rgba(15,23,40,.08); /* softer, less harsh than before */
  padding: 16px 18px; /* trimmed from 22px/20px — smaller card, less excess vertical space */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.st-pshow-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,23,40,.14); }
.st-pshow-img {
  width: 100%;
  background: #FAFAFA; /* one flat, clean neutral — no tint/seam against product photos */
  border-radius: 12px;
  height: 160px;
  padding: 16px; /* subtle inset so the photo never sits flush against the frame edge */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
}
.st-pshow-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.st-pshow-img span { font-size: 42px; }
.st-pshow-title {
  width: 100%;
  font-size: 15px;
  font-weight: 600; /* strong but not too heavy */
  color: var(--charcoal);
  line-height: 1.45;
  margin-bottom: 0; /* button now sits right under the title, not pushed to the bottom */
  min-height: 2.9em; /* keeps card heights equal regardless of title length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Price intentionally hidden on this homepage slider card only — markup
   for .st-pshow-price was removed in front-page.php. Price is untouched
   on the product page, category pages, and all WooCommerce data. */
/* Premium soft-outline pill button — replaces the old bulky full-width fill.
   Sits directly under the title now (no more margin-top:auto push-to-bottom). */
.st-pshow-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  background: rgba(234,88,12,.06);
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  box-shadow: none;
}
/* Extra-specific selector so this always wins over the global .st-btn
   weight rule (defined later in the site-wide typography block) — keeps
   this pill button's text deliberately lighter than standard buttons. */
.st-pshow-card .st-pshow-btn { font-weight: 600; }
.st-pshow-btn:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: none;
  transform: none; /* no lift/glow on the button itself — the card already lifts on hover */
}

.st-pshow-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.st-pshow-arrow:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); }
.st-pshow-arrow:disabled { opacity: .3; cursor: default; }

.st-pshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.st-pshow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .25s, width .25s, border-radius .25s;
}
.st-pshow-dot.active { background: var(--orange); width: 22px; border-radius: 4px; }

.st-pshow-empty {
  text-align: center;
  padding: 50px 24px;
  color: rgba(255,255,255,.6);
  font-size: 16px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.16);
}

/* Tablet: 2 cards per view */
@media (max-width: 1024px) {
  .st-pshow-slide { flex: 0 0 50%; max-width: 50%; }
}
/* Mobile: 1 card per view */
@media (max-width: 640px) {
  .st-pshow-slide  { flex: 0 0 100%; max-width: 100%; }
  .st-pshow-wrap   { gap: 8px; }
  .st-pshow-arrow  { width: 36px; height: 36px; font-size: 15px; }
  .st-pshow-btn    { padding: 11px 22px; font-size: 13.5px; } /* easier to tap on mobile */
}
.st-dash-map { background: #111e35; border-radius: 10px; height: 180px; position: relative; overflow: hidden; margin-bottom: 12px; }
.st-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 28px 28px; }
.st-map-route { position: absolute; top: 52%; left: 10%; width: 65%; height: 2px; background: var(--orange); border-radius: 2px; }
.st-map-route::before { content:''; position:absolute; top:-4px; left:-4px; width:10px; height:10px; background:var(--orange); border-radius:50%; }
.st-map-pin { position:absolute; font-size:18px; animation:mapBounce 2s ease-in-out infinite; }
.mp1{top:18%;right:18%;} .mp2{bottom:22%;left:28%;} .mp3{top:42%;right:40%;}
@keyframes mapBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.st-dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.st-dk { background:rgba(255,255,255,.06); border-radius:8px; padding:10px; text-align:center; }
.st-dk-val { font-size:16px; font-weight:800; color:var(--orange); display:block; }
.st-dk-lbl { font-size:10px; color:rgba(255,255,255,.4); }
.st-dash-alert { background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.3); border-radius:8px; padding:11px 13px; display:flex; align-items:flex-start; gap:9px; }
.st-dash-alert .al-t { font-size:11px; font-weight:700; color:var(--orange); margin-bottom:2px; }
.st-dash-alert .al-d { font-size:11px; color:rgba(255,255,255,.5); }

/* ═══════════════════════════════════════════
   INDUSTRIES
═══════════════════════════════════════════ */
.st-ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.st-ind-card { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 26px 18px; text-align: center; transition: all .3s; cursor: default; }
.st-ind-card:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.st-ind-card:hover h3, .st-ind-card:hover p { color: rgba(255,255,255,.85); }
.st-ind-card:hover p { color: rgba(255,255,255,.55); }
.st-ind-emoji { font-size: 32px; margin-bottom: 12px; display: block; }
.st-ind-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.st-ind-card p  { font-size: 12px; color: var(--grey-txt); line-height: 1.5; }

/* ═══════════════════════════════════════════
   PLAN CARDS (Pricing)
═══════════════════════════════════════════ */
.st-plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.st-plan-card  { background: #fff; border: 1.5px solid var(--grey-mid); border-radius: var(--radius); overflow: hidden; transition: all .3s; display: flex; flex-direction: column; }
.st-plan-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.st-plan-card.featured { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(249,115,22,.12); }
.st-plan-head  { padding: 26px 26px 18px; background: var(--grey-bg); }
.st-plan-card.featured .st-plan-head { background: var(--orange); }
.st-plan-tag   { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px; }
.st-plan-card.featured .st-plan-tag  { color: rgba(255,255,255,.8); }
.st-plan-name  { font-size: 21px; font-weight: 800; color: var(--charcoal); margin-bottom: 14px; }
.st-plan-card.featured .st-plan-name { color: #fff; }
.st-plan-price { font-size: 36px; font-weight: 900; color: var(--charcoal); line-height: 1; display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.st-plan-price .cur { font-size: 16px; font-weight: 700; }
.st-plan-price .ph  { font-size: 26px; color: var(--grey-txt); letter-spacing: 2px; }
.st-plan-card.featured .st-plan-price { color: #fff; }
.st-plan-card.featured .st-plan-price .ph { color: rgba(255,255,255,.65); }
.st-plan-note  { font-size: 13px; color: var(--grey-txt); line-height: 1.4; }
.st-plan-card.featured .st-plan-note { color: rgba(255,255,255,.7); }
.st-plan-body  { padding: 22px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.st-plan-feats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.st-pf { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--charcoal); }
.st-pf-ok { color: var(--green); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.st-pf-na { color: var(--grey-txt); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.st-pf-note { font-size: 11px; color: var(--grey-txt); display: block; margin-top: 1px; }
.st-plan-actions { display: flex; flex-direction: column; gap: 9px; }

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
.st-faq-wrap { max-width: 760px; margin: 0 auto; }
.st-faq-item { border: 1px solid var(--grey-mid); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.st-faq-q { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; background: #fff; font-weight: 600; font-size: 15px; color: var(--charcoal); transition: background .2s; gap: 12px; user-select: none; }
.st-faq-q:hover { background: var(--grey-bg); }
.st-faq-icon { font-size: 20px; color: var(--orange); flex-shrink: 0; font-style: normal; transition: transform .3s; }
.st-faq-a { display: none; padding: 0 22px 18px; font-size: 15px; color: var(--grey-txt); line-height: 1.7; background: var(--grey-bg); }
.st-faq-item.open .st-faq-a    { display: block; }
.st-faq-item.open .st-faq-icon { transform: rotate(45deg); }
.st-faq-item.open .st-faq-q    { background: var(--grey-bg); color: var(--orange); }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.st-about-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.st-about-vals  { display: flex; flex-direction: column; gap: 20px; }
.st-av { display: flex; align-items: flex-start; gap: 16px; }
.st-av-icon { width: 46px; height: 46px; background: rgba(249,115,22,.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.st-av h4   { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.st-av p    { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; }
.st-shield-wrap { display: flex; align-items: center; justify-content: center; }
.st-shield-svg-wrap { position: relative; width: 280px; height: 280px; display: flex; align-items: center; justify-content: center; }
.st-pr { position: absolute; border-radius: 50%; border: 2px solid rgba(249,115,22,.2); animation: st-rpulse 3s infinite; }
.pr1 { width: 260px; height: 260px; animation-delay: 0s; }
.pr2 { width: 300px; height: 300px; animation-delay: 1.2s; }
@keyframes st-rpulse { 0%{opacity:.6;transform:scale(.88)} 100%{opacity:0;transform:scale(1.08)} }

/* ═══════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════ */
.st-contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; align-items: start; }
.st-ci-list { display: flex; flex-direction: column; gap: 22px; }

/* ── CEO Profile (Contact page) ──────────────────────────────────
   Editable at Appearance → Customize → SHIELD TRACK Settings → Contact
   Settings. Whole block only renders if a CEO name is set (see PHP). */
.st-ceo-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 20px 16px;
  margin-bottom: 4px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-mid);
  border-radius: 14px;
}
.st-ceo-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%; /* keeps head/shoulders in frame on portrait headshots */
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(15,23,40,.14);
  margin-bottom: 10px;
}
.st-ceo-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .5px;
}
.st-ceo-name { font-size: 16px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .3px; }
.st-ceo-position { font-size: 13px; font-weight: 500; color: var(--grey-txt); margin-top: 1px; }

/* Mobile: more compact card, slightly larger photo so it doesn't feel
   undersized inside the card, tighter contact-info spacing below. */
@media (max-width: 640px) {
  .st-ci-list      { gap: 16px; }
  .st-ceo-profile  { padding: 14px 14px; margin-bottom: 0; }
  .st-ceo-photo    { width: 88px; height: 88px; margin-bottom: 8px; }
  .st-ceo-initials { font-size: 28px; }
  .st-ci           { gap: 12px; }
}
.st-ci { display: flex; align-items: flex-start; gap: 14px; }
.st-ci-icon { width: 44px; height: 44px; background: var(--orange-lt); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.st-ci > div:last-child { min-width: 0; } /* lets text wrap cleanly instead of getting cut off */
.st-ci h4   { font-size: 12px; font-weight: 700; color: var(--grey-txt); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.st-ci p, .st-ci a { font-size: 15px; color: var(--charcoal); font-weight: 500; word-break: break-word; }
.st-ci a:hover { color: var(--orange); }
.st-ci-note { font-size: 12px; color: var(--grey-txt); margin-top: 2px; }
.st-cf { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 34px; }
.st-cf-title { font-size: 19px; font-weight: 700; margin-bottom: 22px; }
.st-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-fg { margin-bottom: 14px; }
.st-fg label { display: block; font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.st-fg input, .st-fg select, .st-fg textarea {
  width: 100%; background: #fff; border: 1.5px solid var(--grey-mid);
  border-radius: 8px; padding: 11px 14px; font-size: 15px;
  color: var(--charcoal); font-family: var(--font);
  transition: border-color .2s; outline: none;
}
.st-fg input:focus, .st-fg select:focus, .st-fg textarea:focus { border-color: var(--orange); }
.st-fg textarea { resize: vertical; min-height: 110px; }
.st-cf-note { font-size: 12px; color: var(--grey-txt); margin-top: 10px; text-align: center; line-height: 1.5; }
.st-form-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.st-form-msg.success { background: rgba(22,163,74,.1); color: var(--green); border: 1px solid rgba(22,163,74,.3); }
.st-form-msg.error   { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

/* ═══════════════════════════════════════════
   BLUE CTA BANNER (before quote form)
═══════════════════════════════════════════ */
.st-cta-banner {
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%, rgba(21,101,192,.55) 0%, transparent 68%),
    linear-gradient(160deg, #071020 0%, #0d2847 50%, #071020 100%);
  padding: 110px 24px 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.st-cta-banner::before,
.st-cta-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(21,101,192,.6) 50%, transparent 100%);
}
.st-cta-banner::before { top: 0; }
.st-cta-banner::after  { bottom: 0; }
.st-cta-banner-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
}
.st-cta-banner-title {
  font-size: clamp(28px, 4.5vw, 50px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -.75px;
}
.st-cta-banner-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 40px;
}

/* ═══════════════════════════════════════════
   CTA STRIP
═══════════════════════════════════════════ */
.st-cta-strip { background: var(--navy); padding: 60px 24px; text-align: center; }
.st-cta-strip h2 { font-size: clamp(22px,3.5vw,36px); font-weight: 800; color: #fff; margin-bottom: 12px; }
.st-cta-strip p  { font-size: 17px; color: rgba(255,255,255,.65); margin-bottom: 28px; }
.st-cta-strip-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#st-footer { background: #080f1d; padding: 60px 24px 30px; }
.st-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 28px; }
.st-fb-en { font-size: 23px; font-weight: 900; color: #fff; margin-bottom: 3px; }
.st-fb-en span { color: var(--orange); }
.st-fb-desc { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.7; max-width: 280px; }
.st-fc h4  { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.st-fc ul  { display: flex; flex-direction: column; gap: 8px; }
.st-fc ul li a { font-size: 13px; color: rgba(255,255,255,.42); transition: color .2s; }
.st-fc ul li a:hover { color: var(--orange); }
.st-footer-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-footer-bot p { font-size: 12px; color: rgba(255,255,255,.28); }
.st-compliance { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.05); font-size: 11px; color: rgba(255,255,255,.22); line-height: 1.6; }

/* Floating WhatsApp — desktop unchanged */
.st-wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 18px rgba(37,211,102,.5); animation: st-wa-bounce 3s ease-in-out infinite; text-decoration: none; }
.st-wa-float:hover { animation: none; transform: scale(1.1); background: #1ebe5d; color: #fff; }
@keyframes st-wa-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Mobile: hide the floating WhatsApp bubble globally.
   Reason: on small screens it sits in the same lower-right corner
   used by page content (price boxes, FAQ accordion, plan cards,
   placeholder boxes) and by third-party widgets (e.g. an "Ask AI"
   bubble), so overlap risk can't be fully avoided by repositioning.
   The WhatsApp button in the navbar/mobile menu and in-page CTA
   buttons remain fully available on every page. */
@media (max-width: 768px) {
  .st-wa-float { display: none; }
}

/* ═══════════════════════════════════════════
   SHOP PAGE HERO & CATEGORY TABS
═══════════════════════════════════════════ */
.st-shop-hero {
  background: var(--navy);
  padding: 72px 24px 60px;  /* more breathing room without the label row */
}
.st-shop-hero-title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 16px;         /* no top margin — nothing above it now */
  line-height: 1.1;
  letter-spacing: -.5px;
}
.st-shop-hero-sub {
  font-size: clamp(14px, 1.4vw, 16px);
  color: rgba(255,255,255,.60);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}
.st-shop-cat-bar {
  background: #fff;
  border-bottom: 1px solid var(--grey-mid);
  padding: 0 24px;
}
.st-cat-tabs {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-cat-tabs::-webkit-scrollbar { display: none; }
.st-cat-tab {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-txt);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
  text-decoration: none;
  flex-shrink: 0;
}
.st-cat-tab:hover,
.st-cat-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.st-cat-count { font-size: 10px; font-weight: 700; margin-left: 3px; color: rgba(0,0,0,.3); vertical-align: super; }

/* ── Fleet CTA bar at bottom of shop ── */
.st-shop-fleet-cta {
  background: var(--navy);
  padding: 80px 24px 100px;   /* extra bottom so footer never clips it */
  margin-top: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.st-shop-fleet-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.st-shop-fleet-title { font-size: clamp(20px, 2.8vw, 30px); font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.2; }
.st-shop-fleet-sub   { font-size: 15px; color: rgba(255,255,255,.62); line-height: 1.65; max-width: 520px; }
.st-shop-fleet-btns  { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; align-items: center; }

/* ═══════════════════════════════════════════
   FLEET PLAN CARDS (Plans & Pricing page)
═══════════════════════════════════════════ */
.st-fleet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 12px;
}
.st-fleet-card {
  background: #fff;
  border: 1.5px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(33.33% - 16px);
  min-width: 280px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.st-fleet-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.st-fleet-card-top { margin-bottom: 18px; }
.st-fleet-icon { font-size: 34px; margin-bottom: 14px; }
.st-fleet-name { font-size: 18px; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; line-height: 1.25; }
.st-fleet-best { font-size: 13px; color: var(--grey-txt); font-style: italic; line-height: 1.5; }
.st-fleet-feats {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.st-fleet-feats li { font-size: 13px; color: var(--charcoal); padding-left: 20px; position: relative; line-height: 1.45; }
.st-fleet-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.st-fleet-price-block { background: var(--grey-bg); border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; }
.st-fleet-price-label  { font-size: 11px; color: var(--grey-txt); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.st-fleet-price-amount { font-size: 20px; font-weight: 900; color: var(--charcoal); }
.st-fleet-period       { font-size: 12px; font-weight: 400; color: var(--grey-txt); }
.st-fleet-install      { font-size: 12px; color: var(--grey-txt); margin-bottom: 18px; }
.st-fleet-btns         { display: flex; flex-direction: column; gap: 8px; }

/* ═══════════════════════════════════════════
   WOOCOMMERCE — SHOP / ARCHIVE (legacy sidebar kept for compat)
═══════════════════════════════════════════ */
.st-shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.st-shop-sidebar { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: var(--radius); padding: 22px; position: sticky; top: 88px; }
.st-shop-sidebar h3 { font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.st-cat-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.st-cat-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--charcoal); cursor: pointer; transition: all .2s; border: 1px solid transparent; text-decoration: none; }
.st-cat-link:hover, .st-cat-link.current-cat, .st-cat-link.active { background: var(--orange-lt); border-color: var(--orange); color: var(--orange); }
.st-cat-count { font-size: 12px; background: var(--grey-mid); color: var(--grey-txt); padding: 2px 8px; border-radius: 10px; }
.st-cat-link:hover .st-cat-count, .st-cat-link.current-cat .st-cat-count { background: var(--orange); color: #fff; }
.st-shop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.st-shop-count  { font-size: 14px; color: var(--grey-txt); }
.woocommerce-ordering select { padding: 8px 14px; border: 1px solid var(--grey-mid); border-radius: 8px; font-size: 14px; font-family: var(--font); outline: none; cursor: pointer; }
.st-shop-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }

/* ═══════════════════════════════════════════
   WOOCOMMERCE — SINGLE PRODUCT
═══════════════════════════════════════════ */
.st-single-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.st-product-gallery { position: sticky; top: 88px; }
.st-product-main-img { aspect-ratio: 4/3; background: var(--grey-bg); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 80px; border: 1px solid var(--grey-mid); }
.st-product-main-img img { width: 100%; height: 100%; object-fit: cover; }
.st-product-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.st-product-thumb {
  width: 72px; height: 72px;
  background: var(--grey-bg);
  border-radius: 8px;
  border: 2px solid var(--grey-mid);
  overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; transition: border-color .2s;
}
.st-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-product-thumb:hover  { border-color: var(--orange); }
.st-product-thumb.active { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(234,88,12,.2); }
.st-product-detail { }
.st-product-cat   { font-size: 12px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; display: block; }
.st-product-title { font-size: clamp(22px,3vw,34px); font-weight: 800; color: var(--charcoal); line-height: 1.15; margin-bottom: 14px; }
.st-product-price-block { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-product-price-block .from { font-size: 14px; color: var(--grey-txt); }
.st-product-price-block .amount { font-size: 32px; font-weight: 900; color: var(--charcoal); }
.st-product-price-block .cur   { font-size: 16px; font-weight: 700; }
.st-product-price-block .ph    { font-size: 26px; color: var(--grey-txt); letter-spacing: 2px; }
.st-product-price-block .sub   { font-size: 13px; color: var(--grey-txt); }
.st-product-short-desc { font-size: 15px; color: var(--grey-txt); line-height: 1.7; margin-bottom: 20px; }
.st-product-features { margin-bottom: 22px; }
.st-product-features h4 { font-size: 14px; font-weight: 700; color: var(--charcoal); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.st-product-feature-list { display: flex; flex-direction: column; gap: 8px; }
.st-product-feature { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--charcoal); }
.st-product-feature::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }
.st-product-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.st-product-ctas .st-btn { font-size: 15px; padding: 14px 24px; }
.st-product-meta-box { background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 10px; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.st-meta-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-txt); }
.st-meta-row strong { color: var(--charcoal); }
/* Full description below */
.st-product-description { margin-top: 60px; }
.st-product-description h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--grey-mid); }
.st-product-description .woocommerce-Tabs-panel--description, .st-product-description .woocommerce-product-details__short-description { font-size: 15px; color: var(--grey-txt); line-height: 1.7; }
.st-product-description ul { list-style: disc; padding-left: 20px; margin: 10px 0; }
.st-product-description ul li { margin-bottom: 6px; }

/* ═══════════════════════════════════════════
   WORDPRESS / WOOCOMMERCE OVERRIDES
═══════════════════════════════════════════ */
.woocommerce-breadcrumb { font-size: 13px; color: var(--grey-txt); margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--orange); }
.woocommerce-message, .woocommerce-info { background: var(--grey-bg); border-color: var(--orange); color: var(--charcoal); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--orange); }
/* Hide WooCommerce default cart/checkout elements globally */
.woocommerce .cart { display: none !important; }
.woocommerce-page .woocommerce > form { display: none !important; }
/* Page content */
.st-page-content { padding: 60px 0; }
.st-page-content h1 { font-size: clamp(28px,4vw,44px); font-weight: 800; color: var(--charcoal); margin-bottom: 20px; }
.st-page-content p  { font-size: 16px; color: var(--grey-txt); line-height: 1.7; margin-bottom: 16px; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-prod-grid    { grid-template-columns: repeat(2,1fr); }
  .st-shop-grid    { grid-template-columns: repeat(2,1fr); }
  .st-ind-grid     { grid-template-columns: repeat(3,1fr); }
  .st-footer-top   { grid-template-columns: 1fr 1fr; }
  .st-plans-grid   { grid-template-columns: 1fr; }
  .st-fleet-card   { flex: 0 1 calc(50% - 12px); }
}
@media (max-width: 900px) {
  .st-sol-grid        { grid-template-columns: 1fr 1fr; }
  .st-fleet-layout    { grid-template-columns: 1fr; }
  .st-dash            { display: none; }
  .st-about-grid      { grid-template-columns: 1fr; }
  .st-shield-wrap     { display: none; }
  .st-contact-grid    { grid-template-columns: 1fr; }
  .st-shop-layout     { grid-template-columns: 1fr; }
  .st-shop-sidebar    { position: static; }
  .st-offer-inner     { grid-template-columns: 1fr; }
  .st-offer-box       { min-width: 0; }
  .st-single-layout   { grid-template-columns: 1fr; }
  .st-product-gallery { position: static; }
}
@media (max-width: 768px) {
  .st-nav-links, .st-nav-cta { display: none; }
  .st-hamburger          { display: flex; }
  .st-slide.active       { min-height: 460px; padding: 64px 20px 64px; } /* taller box = less aggressive image crop on tablet/mobile; extra bottom padding keeps content clear of the dots */
  .st-hsc-title          { font-size: clamp(26px, 6.5vw, 40px); margin-bottom: 14px; }
  .st-hsc-sub            { font-size: 15px; line-height: 1.55; margin: 0 auto 22px; }
  .st-hsc .st-btn-lg      { padding: 13px 24px; font-size: 14px; } /* hero-only button sizing — other pages' .st-btn-lg are untouched */
  .st-hero-stats         { grid-template-columns: repeat(2,1fr); }
  .st-prod-grid          { grid-template-columns: 1fr 1fr; }
  .st-shop-grid          { grid-template-columns: 1fr 1fr; }
  .st-ind-grid           { grid-template-columns: repeat(2,1fr); }
  .st-form-row           { grid-template-columns: 1fr; }
  .st-footer-top         { grid-template-columns: 1fr 1fr; }
  .st-fleet-card         { flex: 0 1 100%; }
  .st-shop-fleet-inner   { flex-direction: column; gap: 24px; }
  .st-shop-fleet-btns    { width: 100%; flex-direction: column; }
  .st-shop-fleet-btns .st-btn { width: 100%; text-align: center; flex: none; }
  .st-shop-fleet-cta     { padding: 60px 20px 80px; }

  /* Homepage-only tighter spacing — scoped to .home so no other page is affected */
  .home .st-section     { padding: 48px 0; }
  .home #st-trust        { padding: 14px 0; }
  .home .st-trust-inner  { gap: 16px; }
  .home .st-fleet-layout { gap: 36px; }

  /* Standard dark-navy CTA banner — responsive padding on every page it appears on
     (Homepage, Solutions, Solution Detail, Plans & Pricing, Contact, Product Category) */
  .st-cta-banner   { padding: 64px 20px 72px; }
}
@media (max-width: 480px) {
  .st-prod-grid   { grid-template-columns: 1fr; }
  .st-shop-grid   { grid-template-columns: 1fr; }
  .st-ind-grid    { grid-template-columns: 1fr 1fr; }
  .st-footer-top  { grid-template-columns: 1fr; }
  .st-hero-stats  { grid-template-columns: repeat(2,1fr); }
  .st-slide.active { min-height: 420px; padding: 56px 16px 56px; } /* taller box = less aggressive image crop on small phones; extra bottom padding keeps content clear of the dots */
  .st-hsc-title    { font-size: clamp(23px, 7.5vw, 30px); margin-bottom: 12px; }
  .st-hsc-sub      { font-size: 14px; line-height: 1.5; margin: 0 auto 18px; }
  .st-hsc .st-btn-lg { padding: 12px 22px; font-size: 13.5px; } /* hero-only button sizing — other pages' .st-btn-lg are untouched */

  /* Homepage-only tighter spacing */
  .home .st-section    { padding: 40px 0; }

  /* Standard CTA banner — extra-small screens */
  .st-cta-banner  { padding: 56px 16px 64px; }
}

/* ═══════════════════════════════════════════
   PRODUCT CATEGORIES
═══════════════════════════════════════════ */
.st-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
/* Whole-card clickable wrapper */
.st-cat-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.st-cat-card {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  text-align: center;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.st-cat-card-link:hover .st-cat-card {
  border-color: #d6d9de;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
/* Backward-compat: direct hover if ever used without the link wrapper */
.st-cat-card:hover {
  border-color: #d6d9de;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
/* Category image area — one consistent frame for every card, regardless
   of what background the uploaded image itself has. Same height/padding/
   border on every card so the grid never looks mismatched. */
.st-cat-img {
  background: #F8FAFC;
  border: 1px solid var(--grey-mid);
  border-radius: 10px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin-bottom: 18px;
  overflow: hidden;
  padding: 14px;
  box-sizing: border-box;
}
.st-cat-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.st-cat-icon {
  font-size: 36px;
  margin-bottom: 12px;
}
.st-cat-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.st-cat-card p {
  font-size: 13px;
  color: var(--grey-txt);
  line-height: 1.6;
  margin-bottom: 10px;
  flex: 1;   /* pushes the count + button to the bottom so all cards align */
}
.st-cat-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.st-cat-link:hover { text-decoration: underline; }
/* Small, quiet product-count line above the button */
.st-cat-count-txt {
  display: block;
  font-size: 12px;
  color: var(--grey-txt);
  margin-bottom: 12px;
}
/* "View Products" button — pinned to card bottom.
   Solid fill, but lighter-weight than a standard CTA: smaller
   padding/font, no shadow, no glow, no lift — stays calm inside the card. */
.st-cat-btn {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: none;
  transition: background .2s ease;
}
.st-cat-card-link:hover .st-cat-btn {
  background: var(--orange-dk);
  color: #fff;
  box-shadow: none;
  transform: none;
}

/* ═══════════════════════════════════════════
   PLATFORM SECTION
═══════════════════════════════════════════ */
.st-platform-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.st-platform-left .st-sec-label { margin-bottom: 10px; }
.st-platform-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.st-pf-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  background: var(--grey-bg);
  border: 1px solid var(--grey-mid);
  border-radius: 8px;
}
.st-pf-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.st-pf-item strong { font-size: 14px; color: var(--charcoal); display: block; margin-bottom: 2px; }
.st-pf-item p { font-size: 12px; color: var(--grey-txt); margin: 0; line-height: 1.5; }

/* App mockup (reuses dashboard mockup base styles) */
.st-app-mockup {
  background: var(--navy);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.st-app-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.st-app-dot { width: 10px; height: 10px; border-radius: 50%; }
.st-app-map {
  position: relative;
  height: 200px;
  background: #0d1f3c;
  overflow: hidden;
}
.st-app-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: rgba(255,255,255,.06);
}
.st-as {
  padding: 12px;
  text-align: center;
  background: var(--navy-lt);
}
.st-as-val { display: block; font-size: 16px; font-weight: 700; color: var(--orange); }
.st-as-lbl { display: block; font-size: 10px; color: rgba(255,255,255,.45); margin-top: 2px; }
.st-app-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(249,115,22,.1);
  border-top: 1px solid rgba(249,115,22,.2);
  font-size: 13px;
}
.st-app-alert .al-t { font-weight: 600; color: var(--orange); font-size: 12px; }
.st-app-alert .al-d { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 2px; }

/* ═══════════════════════════════════════════
   FLEET QUOTE FORM
═══════════════════════════════════════════ */
.st-fq-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.st-fq-form {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.st-fq-form .st-fg { display: flex; flex-direction: column; gap: 6px; }
.st-fq-form label { font-size: 13px; font-weight: 600; color: var(--charcoal); }
.st-fq-form input,
.st-fq-form select,
.st-fq-form textarea {
  padding: 10px 14px;
  border: 1px solid var(--grey-mid);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--charcoal);
  background: #fff;
  transition: border-color .2s;
}
.st-fq-form input:focus,
.st-fq-form select:focus,
.st-fq-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.08);
}
.st-fq-form textarea { min-height: 80px; resize: vertical; }
.st-fq-form .st-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.st-fq-form .st-fg { margin-bottom: 14px; }

/* ═══════════════════════════════════════════
   NEW SECTION RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-cat-grid       { grid-template-columns: repeat(3,1fr); }
  .st-platform-layout { grid-template-columns: 1fr; }
  .st-fq-layout      { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .st-cat-grid       { grid-template-columns: repeat(2,1fr); }
  .st-fq-form .st-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .st-cat-grid       { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   PRODUCT CATEGORY ARCHIVE — product cards
   (Used only on /product-category/.../ pages. Deliberately separate
   from .st-prod-card, which is shared with the single product page's
   "Related Products" section — kept untouched.)
═══════════════════════════════════════════ */
.st-arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.st-arc-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.st-arc-card {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 22px 20px 24px;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.st-arc-card-link:hover .st-arc-card {
  border-color: #d6d9de;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
.st-arc-img {
  background: #F8FAFC;
  border: 1px solid var(--grey-mid);
  border-radius: 10px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 14px;
  box-sizing: border-box;
}
.st-arc-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.st-arc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.35;
}
.st-arc-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 16px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.st-arc-price .cur { font-size: 13px; font-weight: 700; }
.st-arc-price .ph  { font-size: 15px; color: var(--grey-txt); letter-spacing: 2px; }
.st-arc-btn {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: none;
  transition: background .2s ease;
}
.st-arc-card-link:hover .st-arc-btn {
  background: var(--orange-dk);
  box-shadow: none;
  transform: none;
}
@media (max-width: 900px) {
  .st-arc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .st-arc-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   SOLUTIONS PAGE — card extensions
═══════════════════════════════════════════ */
/* Cards on the Solutions page use flex column so buttons pin to the bottom */
.st-sol-full {
  display: flex;
  flex-direction: column;
}
.st-sol-card-body {
  flex: 1;            /* grows to fill remaining card height */
}
/* Benefit list inside solution cards */
.st-sol-bens { margin-top: 12px; }
.st-sol-ben {
  font-size: 13px;
  color: var(--charcoal);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.st-sol-ben::before {
  content: '✓';
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
}
/* Button area pinned to card bottom */
.st-sol-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--grey-mid);
}
/* Featured card highlight (rental) */
.st-sol-featured {
  border-color: var(--orange) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(234,88,12,.09);
}
/* Old solid badge — kept for backwards compat */
.st-sol-featured-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 12px;
}
/* Subtle outlined recommendation badge */
.st-sol-rec-badge {
  display: inline-block;
  background: rgba(234,88,12,.08);
  color: var(--orange);
  border: 1px solid rgba(234,88,12,.25);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.st-sol-icon-featured {
  background: var(--orange) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════
   SOLUTIONS PAGE — 3-step process
═══════════════════════════════════════════ */
.st-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 8px;
}
.st-step {
  flex: 1;
  text-align: center;
  padding: 0 24px;
  position: relative;
}
/* Horizontal connector line between steps */
.st-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 27px;
  right: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  box-shadow: -12px 0 0 rgba(255,255,255,.2), 12px 0 0 rgba(255,255,255,.2);
}
.st-step-num {
  width: 54px;
  height: 54px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}
.st-step-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.st-step-desc {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════
   SOLUTIONS PAGE — Why Businesses grid
═══════════════════════════════════════════ */
.st-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.st-why-tile {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.st-why-tile:hover {
  border-color: rgba(234,88,12,.3);
  box-shadow: 0 6px 22px rgba(0,0,0,.1);
  transform: translateY(-3px);
}
/* Icon box — small orange-tinted square */
.st-why-icon-box {
  width: 46px;
  height: 46px;
  background: var(--orange-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
/* Keep old class harmless if used elsewhere */
.st-why-tile-icon  { font-size: 26px; margin-bottom: 10px; }
.st-why-tile-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);       /* deep navy heading */
  margin-bottom: 7px;
  line-height: 1.3;
}
.st-why-tile-desc  { font-size: 13px; color: var(--grey-txt); line-height: 1.6; margin: 0; }

/* ═══════════════════════════════════════════
   SOLUTIONS PAGE — Portable box
═══════════════════════════════════════════ */
.st-portable-box {
  background: var(--grey-bg);
  border: 1.5px solid var(--grey-mid);
  border-radius: var(--radius);
  padding: 48px 60px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.st-portable-box h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.st-portable-box p {
  font-size: 15px;
  color: var(--grey-txt);
  margin-bottom: 26px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   SOLUTIONS PAGE — Responsive
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .st-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .st-steps       { flex-direction: column; gap: 36px; }
  .st-step        { padding: 0; }
  .st-step:not(:last-child)::after { display: none; }
  .st-why-grid    { grid-template-columns: repeat(2, 1fr); }
  .st-portable-box { padding: 36px 28px; }
}
@media (max-width: 768px) {
  .st-sol-grid    { grid-template-columns: 1fr 1fr; }
  .st-why-grid    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .st-sol-grid    { grid-template-columns: 1fr; }
  .st-why-grid    { grid-template-columns: 1fr; }
  .st-portable-box { padding: 28px 20px; }
}

/* ═══════════════════════════════════════════
   CONTACT PAGE — "How We Help" grid (scoped fix)
   Desktop &amp; tablet: 2 columns (unchanged) · Mobile: 1 column, full width
═══════════════════════════════════════════ */
.st-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}
.st-help-card {
  background: #fff;
  border: 1px solid var(--grey-mid);
  border-radius: 10px;
  padding: 16px 18px;
}
@media (max-width: 600px) {
  .st-help-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .st-help-card {
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ═══════════════════════════════════════════
   SOLUTIONS PAGE — Industries grid (scoped fix)
   Desktop: 3 columns · Tablet: 2 columns · Mobile: 1 column, full width
═══════════════════════════════════════════ */
.st-sol-ind-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .st-sol-ind-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .st-sol-ind-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .st-sol-ind-grid .st-ind-card {
    padding: 24px 20px;
    text-align: left;
  }
  .st-sol-ind-grid .st-ind-emoji { font-size: 30px; }
  .st-sol-ind-grid .st-ind-card h3 { font-size: 15px; }
  .st-sol-ind-grid .st-ind-card p  { font-size: 13px; line-height: 1.6; }
}

/* ═══════════════════════════════════════════════════════════════════
   SITE-WIDE TYPOGRAPHY STANDARD — single source of truth
   One font family (Inter, already loaded via shield-fonts) with a
   consistent weight rule for every heading, subtitle, button, and nav
   link across the whole site.

   This block intentionally sets ONLY font-family + font-weight (never
   size, color, margin, or line-height) so it can safely sit at the end
   of the stylesheet and win the cascade for those two properties only —
   every component's existing layout, spacing, and color rules above are
   left completely untouched.
═══════════════════════════════════════════════════════════════════ */

/* 1. Main headings / big bold titles — Inter, weight 800–900 */
h1, h2, h3,
.st-sec-title,
.st-hsc-title,
.st-shop-hero-title,
.st-product-title,
.st-arc-title,
.st-cta-banner-title,
.st-offer-title,
.st-shop-fleet-title,
.st-fleet-name,
.st-step-title,
.st-why-tile-title,
.st-cf-title {
  font-family: var(--font);
  font-weight: 800;
}
/* Brand/logo marks (navbar + footer) are intentionally left at their
   existing weight — they're brand identity, not page typography. */

/* 2. Subtitles / descriptions / small text — Inter, weight 500 */
.st-sec-sub,
.st-hsc-sub,
.st-hsc-label,
.st-shop-hero-sub,
.st-cta-banner-sub,
.st-offer-desc,
.st-shop-fleet-sub,
.st-product-short-desc,
.st-product-feature,
.st-prod-desc,
.st-prod-sub,
.st-fb-desc,
.st-why-tile-desc,
.st-step-desc,
.st-ci-note,
.st-cf-note,
p {
  font-family: var(--font);
  font-weight: 500;
}

/* 3. Buttons — Inter, weight 600–700 (colors unchanged).
      Includes the WhatsApp CTA buttons that live inside the navbar
      (.st-nav-quote / .st-mob-wa) since they're styled as buttons, not
      plain nav links. */
.st-btn,
.st-nav-quote,
.st-mob-wa {
  font-family: var(--font);
  font-weight: 700;
}

/* 4. Navigation links — Inter, weight 500–600 (size unchanged) */
.st-nav-links a,
.st-mobile-nav a {
  font-family: var(--font);
  font-weight: 600;
}