/* ==========================================================================
   Prateek Tapes — Mobile-first, business-clean design
   Layered on top of default.css / style.css / responsive.css
   ========================================================================== */

:root {
  --pt-primary:   #004aad;
  --pt-primary-d: #00377f;
  --pt-primary-l: #3273d1;
  --pt-accent:    #ffb800;
  --pt-accent-d:  #e0a000;
  --pt-dark:      #0b1524;
  --pt-text:      #334155;
  --pt-muted:     #64748b;
  --pt-border:    #e6ebf2;
  --pt-bg:        #ffffff;
  --pt-bg-soft:   #f5f7fb;
  --pt-success:   #16a34a;
  --pt-wa:        #25d366;
  --pt-r:         14px;
  --pt-r-sm:      8px;
  --pt-sh-sm:     0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --pt-sh-md:     0 6px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --pt-sh-lg:     0 20px 40px rgba(15,23,42,.10);
  --pt-ease:      cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { color: var(--pt-text); overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 { color: var(--pt-dark); letter-spacing: -.01em; }
h1 { line-height: 1.1; }
h2 { line-height: 1.2; }

/* ---------- Skip link ---------- */
.skip-link { position:absolute; left:-9999px; top:0; background:var(--pt-primary); color:#fff; padding:10px 16px; z-index:9999; }
.skip-link:focus { left:0; }

/* ---------- Announcement bar (always single line) ---------- */
.announcement-bar {
  background: var(--pt-dark); color: rgba(255,255,255,.92);
  font-size: 13px; padding: 10px 0; letter-spacing: .2px;
  overflow: hidden;
}
.announcement-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 20px; }
.announcement-bar .ann-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announcement-bar .ann-right { display: flex; gap: 18px; }
.announcement-bar a { color: #fff; text-decoration: none; }
.announcement-bar a:hover { color: var(--pt-accent); }
.announcement-bar i { color: var(--pt-accent); margin-right: 6px; }
@media (max-width: 767px) {
  .announcement-bar { font-size: 12px; padding: 8px 0; text-align: center; }
  .announcement-bar .container { justify-content: center; }
}

/* ==========================================================================
   HEADER (desktop + mobile)
   ========================================================================== */
.pt-header {
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--pt-border);
  position: sticky; top: 0; z-index: 990;
}
.pt-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 0;
}
.pt-logo img { height: 70px; width: auto; }

/* Footer location blocks (Sonipat / Delhi) — compact */
.footer-address .footer-loc {
  position: relative;
  margin-bottom: 8px;
  padding: 8px 10px 8px 12px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid #F5B400;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-address .footer-loc-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(245,180,0,.15); color: #F5B400;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.footer-address .footer-loc-tag i { font-size: 10px; }
.footer-address .footer-loc-body {
  display: block; color: rgba(255,255,255,.78);
  font-size: 12.5px; line-height: 1.4;
  flex: 1 1 0; min-width: 0;
}
.footer-address .footer-line {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0 0; font-size: 13px;
  line-height: 1.4;
}
.footer-address .footer-line i {
  font-size: 11px;
  color: rgba(245,180,0,.85);
  width: 14px; text-align: center;
}
.footer-address .footer-hours {
  color: rgba(255,255,255,.6);
  font-size: 12px;
}

/* Director card phone link */
.leader-phone {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 8px 14px;
  background: var(--pt-bg-soft, #f3f5fb); color: var(--pt-primary, #004aad);
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 14px;
  transition: background .15s, color .15s;
}
.leader-phone:hover, .leader-phone:focus {
  background: var(--pt-primary, #004aad); color: #fff;
}

/* Sidebar trust highlight (Length guaranteed) */
.sidebar-trust li.trust-highlight {
  background: #FFF8E1;
  border-left: 3px solid #F5B400;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: #8B6508;
}
.sidebar-trust li.trust-highlight i { color: #B8860B; }
.sidebar-trust li.trust-highlight strong { color: #6a4e05; font-weight: 700; }

/* Mobile call button in header */
.pt-call-mobile {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin-right: 6px;
  background: var(--pt-primary, #004aad); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 13px; line-height: 1;
  white-space: nowrap;
}
.pt-call-mobile i { font-size: 13px; }
.pt-call-mobile:hover, .pt-call-mobile:focus { color: #fff; opacity: .92; }
@media (max-width: 380px) {
  .pt-call-mobile span { display: none; }
  .pt-call-mobile { padding: 8px 10px; }
}

/* Desktop nav */
.pt-nav ul { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0; }
.pt-nav > ul > li { position: relative; }
.pt-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--pt-dark); text-decoration: none; font-weight: 600; font-size: 14.5px;
  padding: 10px 14px; border-radius: var(--pt-r-sm);
  transition: color .15s, background .15s;
}
.pt-nav > ul > li > a:hover { color: var(--pt-primary); background: var(--pt-bg-soft); }
/* Invisible bridge — keeps :hover alive as mouse travels from trigger to menu */
.pt-nav .has-mega { position: relative; }
.pt-nav .has-mega::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 20px;                 /* bridges the gap to the mega menu */
  background: transparent;
  pointer-events: none;         /* becomes active only when menu opens */
}
.pt-nav .has-mega:hover::after,
.pt-nav .has-mega:focus-within::after { pointer-events: auto; }

.pt-nav .has-mega .pt-mega {
  position: absolute;
  top: calc(100% + 14px);        /* keeps the visual gap */
  left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; padding: 24px; border-radius: var(--pt-r); box-shadow: var(--pt-sh-lg);
  border: 1px solid var(--pt-border);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  min-width: 760px;
  /* Small transition delay on close so brief cursor excursions don't kill it */
  transition-delay: .08s;
}
.pt-nav .has-mega:hover .pt-mega,
.pt-nav .has-mega:focus-within .pt-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;          /* open immediately */
}
.pt-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pt-mega-grid > div { display: flex; flex-direction: column; gap: 6px; }
.pt-mega-grid span {
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--pt-primary); font-weight: 700; margin-bottom: 6px;
  padding-bottom: 8px; border-bottom: 2px solid var(--pt-border);
}
.pt-mega-grid a {
  color: var(--pt-dark); font-size: 13.5px; text-decoration: none;
  padding: 6px 0; transition: color .15s, padding-left .2s;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pt-mega-grid a:hover { color: var(--pt-primary); padding-left: 4px; }
.pt-mega-grid a.mega-view-all {
  color: var(--pt-primary); font-weight: 700; font-size: 13px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--pt-border); margin-bottom: 4px;
}
.pt-mega-grid a.mega-view-all:hover { padding-left: 0; opacity: .8; }

/* Inline meta (e.g. "80µ", "ISO", "180°C") — muted */
.mega-meta {
  font-style: normal; font-size: 10.5px; color: var(--pt-muted);
  background: var(--pt-bg-soft); padding: 2px 7px; border-radius: 4px;
  font-weight: 600; letter-spacing: .3px;
}

/* Pill tags (Hot / New / Trending / Premium / Eco / Value / Flagship) */
.tag {
  font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; line-height: 1.2;
  display: inline-block;
}
.tag-hot      { background: #fee2e2; color: #b91c1c; }
.tag-new      { background: #dbeafe; color: #1e40af; }
.tag-trending { background: #fef3c7; color: #92400e; }
.tag-premium  { background: linear-gradient(135deg, #fde68a, #fbbf24); color: #78350f; }
.tag-eco      { background: #dcfce7; color: #166534; }
.tag-value    { background: #f3e8ff; color: #6b21a8; }

/* Section title in mega column can also carry a tag */
.pt-mega-grid span .tag { margin-left: 6px; vertical-align: middle; }

/* Same tags usable in mobile drawer */
.pt-mobile-nav .tag, .pt-mobile-nav .mega-meta { margin-left: 6px; }

/* Header right */
.pt-header-right { display: flex; align-items: center; gap: 10px; }

/* Burger */
.pt-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
  border-radius: var(--pt-r-sm);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.pt-burger span {
  display: block; width: 22px; height: 2px; background: var(--pt-dark);
  border-radius: 2px; transition: transform .2s, opacity .2s;
}
.pt-burger:hover { background: var(--pt-bg-soft); }
.pt-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pt-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pt-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.pt-btn, .main-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none;
  transition: all .2s var(--pt-ease);
  white-space: nowrap;
}
.pt-btn-primary, .main-btn {
  background: var(--pt-primary); color: #fff !important;
}
.pt-btn-primary:hover, .main-btn:hover {
  background: var(--pt-primary-d); color: #fff !important;
  transform: translateY(-1px); box-shadow: var(--pt-sh-md);
}
.pt-btn-primary { background: var(--pt-wa); }
.pt-btn-primary:hover { background: #1da851; }
.pt-btn-ghost { background: transparent; color: var(--pt-primary) !important; border: 2px solid var(--pt-primary); }
.pt-btn-ghost:hover { background: var(--pt-primary); color: #fff !important; }
.pt-btn-block { width: 100%; }
.main-btn.arrow-btn:after { content: "→"; margin-left: 6px; transition: transform .2s; }
.main-btn.arrow-btn:hover:after { transform: translateX(4px); }
.main-btn.bordered-btn { background: transparent; color: var(--pt-primary) !important; border: 2px solid var(--pt-primary); }
.main-btn.bordered-btn:hover { background: var(--pt-primary); color: #fff !important; }
.main-btn.bordered-btn-white { color: #fff !important; border-color: rgba(255,255,255,.4); }
.main-btn.btn-primary-white { color: var(--pt-dark) !important; }
.main-btn i, .pt-btn i { color: inherit; }

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.pt-mobile { position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.pt-mobile.open { visibility: visible; }
.pt-mobile-overlay {
  position: absolute; inset: 0; background: rgba(11,21,36,.55);
  opacity: 0; transition: opacity .25s;
}
.pt-mobile.open .pt-mobile-overlay { opacity: 1; }
.pt-mobile-drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 340px; max-width: 88vw;
  background: #fff; padding: 20px 24px 30px;
  transform: translateX(100%); transition: transform .25s var(--pt-ease);
  overflow-y: auto; display: flex; flex-direction: column;
}
.pt-mobile.open .pt-mobile-drawer { transform: translateX(0); }
.pt-mobile-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid var(--pt-border); margin-bottom: 12px;
}
.pt-mobile-close {
  background: none; border: 0; font-size: 32px; line-height: 1;
  cursor: pointer; color: var(--pt-dark); padding: 0 6px;
}
.pt-mobile-nav { display: flex; flex-direction: column; flex: 1; }
.pt-mobile-nav a, .pt-mobile-nav summary {
  color: var(--pt-dark); text-decoration: none; font-size: 16px; font-weight: 600;
  padding: 14px 0; border-bottom: 1px solid var(--pt-border); display: block;
  cursor: pointer; list-style: none;
}
.pt-mobile-nav a:hover, .pt-mobile-nav summary:hover { color: var(--pt-primary); }
.pt-mobile-group summary::-webkit-details-marker { display: none; }
.pt-mobile-group summary { display: flex; justify-content: space-between; align-items: center; }
.pt-mobile-group summary i { transition: transform .2s; }
.pt-mobile-group[open] summary i { transform: rotate(180deg); }
.pt-mobile-group a {
  font-size: 14px; font-weight: 500; padding: 10px 14px;
  border-bottom: 0; color: var(--pt-muted);
}
.pt-mobile-group a:hover { color: var(--pt-primary); padding-left: 18px; }
.pt-mobile-view-all { color: var(--pt-primary) !important; font-weight: 700 !important; padding-top: 12px !important; border-top: 1px solid var(--pt-border) !important; margin-top: 8px !important; }
.pt-mobile-cta { padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
body.pt-nav-open { overflow: hidden; }

/* Mobile mega-menu sub-groups — mirror the desktop mega-menu 4-column layout
   but stacked vertically with a small section header above each group */
.pt-mobile-subgroup {
  padding: 14px 0 6px;
  border-top: 1px dashed var(--pt-border);
  margin-top: 6px;
}
.pt-mobile-subgroup:first-of-type { border-top: 0; margin-top: 0; padding-top: 4px; }
.pt-mobile-subgroup-title {
  display: block;
  padding: 4px 14px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pt-primary);
}
.pt-mobile-subgroup-title .tag,
.pt-mobile-subgroup-title em { margin-left: 6px; }
.pt-mobile-subgroup a {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 500;
  padding: 9px 14px;
  color: var(--pt-dark);
  text-decoration: none;
}
.pt-mobile-subgroup a:hover { color: var(--pt-primary); padding-left: 18px; }
.pt-mobile-subgroup a.mega-disabled {
  color: rgba(15, 23, 42, .45);
  pointer-events: none;
  cursor: not-allowed;
}
.pt-mobile-subgroup-view {
  color: var(--pt-primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 14px 10px !important;
  background: rgba(0, 74, 173, .04);
  border-radius: 6px;
  margin: 0 8px 6px;
}
.pt-mobile-subgroup a .tag,
.pt-mobile-subgroup a .mega-meta {
  font-size: 9.5px;
  font-style: normal;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.pt-mobile-subgroup a .tag-hot { background: #fee2e2; color: #b91c1c; }
.pt-mobile-subgroup a .tag-eco { background: #d1fae5; color: #047857; }
.pt-mobile-subgroup a .tag-soon { background: #f1f5f9; color: var(--pt-muted); }
.pt-mobile-subgroup a .tag-premium { background: #fff8e1; color: #8B6508; }
.pt-mobile-subgroup-title .tag-trending { background: #FFC83D; color: #5a4a1e; padding: 2px 8px; font-size: 9.5px; }
.pt-mobile-subgroup a .mega-meta { background: rgba(0,74,173,.08); color: var(--pt-primary); }

/* ==========================================================================
   GLOBAL HORIZONTAL-SCROLL GUARD — minimal, non-invasive.
   Hides any horizontal overflow without touching Bootstrap container widths,
   row negative-margins, or column padding (those rules previously broke the
   centred 1140 / 1320 px container — reverted).
   ========================================================================== */
html, body { overflow-x: hidden; }

/* ==========================================================================
   HERO (redesigned v2) — deeper background, gradient accent, floating badges
   ========================================================================== */
.hero-redesign {
  position: relative; overflow: hidden;
  padding: 36px 0 64px; color: #fff;
  background:
    radial-gradient(ellipse at 0% 0%, #0a3c8e 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, #002e6b 0%, transparent 60%),
    linear-gradient(135deg, var(--pt-primary) 0%, #00244f 100%);
  isolation: isolate;
}
@media (min-width: 992px) {
  /* Tighter top padding so the hero H1 + eyebrow sit above-the-fold on standard
     1080p laptop screens. Bottom keeps room for the floating product image. */
  .hero-redesign { padding: 48px 0 96px; }
}

/* Grid overlay — subtle engineering vibe */
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  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: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}

/* Mesh gradient — soft colour glow */
.hero-mesh {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,184,0,.25) 0%, transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(100,180,255,.25) 0%, transparent 40%);
}

/* Decorative orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .45;
  pointer-events: none; z-index: 0;
  animation: orb-drift 18s ease-in-out infinite;
}
.hero-orb-1 { width: 340px; height: 340px; background: var(--pt-accent);   top: -100px; left: -80px; }
.hero-orb-2 { width: 280px; height: 280px; background: #6aa9ff;            bottom: -100px; right: -60px; animation-delay: -6s; }
.hero-orb-3 { width: 200px; height: 200px; background: #ffffff;            top: 40%; left: 40%; opacity: .15; animation-delay: -12s; }
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, -20px) scale(1.08); }
}

.hero-redesign .container { position: relative; z-index: 2; }

/* ---- Eyebrow pill with live dot ---- */
.hero-content .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 8px 16px 8px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  border: 1px solid rgba(255,255,255,.12); margin-bottom: 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pt-accent);
  box-shadow: 0 0 0 0 var(--pt-accent);
  animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,0,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,184,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,184,0,0); }
}

/* ---- H1 with gradient accent word ---- */
.hero-content h1 {
  color: #fff; font-size: 36px; line-height: 1.08; font-weight: 800;
  margin: 0 0 18px; letter-spacing: -.025em;
}
@media (min-width: 992px) {
  .hero-content h1 { font-size: 58px; }
  .hero-content .hero-eyebrow { font-size: 12px; padding: 10px 18px 10px 14px; }
}
.h1-accent {
  background: linear-gradient(135deg, #ffd54d 0%, var(--pt-accent) 50%, #ffad33 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  position: relative; display: inline-block;
}
.h1-accent:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px;
  background: rgba(255,184,0,.22);
  border-radius: 3px; z-index: -1;
}

.hero-content p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.65; max-width: 540px; margin: 0 0 26px; }
@media (min-width: 992px) { .hero-content p { font-size: 17px; } }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary-white { background: var(--pt-accent) !important; color: var(--pt-dark) !important; font-weight: 700 !important; box-shadow: 0 10px 24px rgba(255,184,0,.3); }
.btn-primary-white:hover { background: #fff !important; color: var(--pt-primary) !important; box-shadow: 0 12px 28px rgba(255,255,255,.2); }

/* ---- Trust bar: Manufactured for [Packaging · FMCG · ...] ---- */
.hero-trust-bar {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
}
.hero-trust-label {
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight: 700;
}
.hero-industries {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.hero-industries li {
  color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600;
  position: relative; padding-left: 0;
}
.hero-industries li + li:before {
  content: "·"; color: var(--pt-accent);
  position: absolute; left: -12px; font-weight: 900;
}

/* ---- Visual stage + floating badges ---- */
.hero-visual-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 500px;
}
.hero-spotlight {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,184,0,.22) 0%, transparent 65%);
  filter: blur(20px); z-index: 0;
  animation: spotlight-breathe 6s ease-in-out infinite;
}
@keyframes spotlight-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.hero-image {
  position: relative; z-index: 1;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
  animation: hero-float 7s ease-in-out infinite;
  max-width: 100%; height: auto;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.float-badge {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,.96);
  color: var(--pt-dark);
  padding: 10px 16px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; line-height: 1;
  animation: badge-float 6s ease-in-out infinite;
}
.float-badge .fb-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--pt-primary); font-weight: 800; margin-bottom: 4px;
}
.float-badge .fb-value {
  font-size: 14px; font-weight: 700; color: var(--pt-dark);
}
.float-badge-1 { top: 8%;  left: -6%;  animation-delay: 0s;   }
.float-badge-2 { top: 45%; right: -4%; animation-delay: -2s;  }
.float-badge-3 { bottom: 10%; left: 8%; animation-delay: -4s; }
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- Scroll hint ---- */
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.55); text-decoration: none;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  transition: color .2s;
}
.hero-scroll:hover { color: var(--pt-accent); }
.hero-scroll svg { color: currentColor; }
@media (max-width: 767px) { .hero-scroll { display: none; } }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-orb, .hero-image, .hero-spotlight, .float-badge, .hero-eyebrow-dot { animation: none; }
}

/* Mobile hero polish */
@media (max-width: 991px) {
  .hero-redesign { padding: 28px 0 56px; text-align: left; }
  .hero-content h1 { font-size: 32px; }
  .hero-industries li { font-size: 12px; }
  .hero-trust-bar { margin-top: 26px; padding-top: 18px; }
}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.stats-strip {
  background: var(--pt-dark); color: #fff; padding: 18px 0;   /* was 40px — much tighter */
  border-top: 4px solid var(--pt-accent);
}
.stat-item { padding: 6px 4px; text-align: center; }   /* was 16px 8px */
.stat-figure {
  display: inline-block; font-size: 26px; font-weight: 800; line-height: 1; color: #fff;   /* was 36px */
  letter-spacing: -.02em;
}
.stat-figure small { font-size: 13px; color: var(--pt-accent); font-weight: 700; margin-left: 2px; }   /* was 18px */
.stat-item p { color: rgba(255,255,255,.7); margin: 3px 0 0; font-size: 11px; }   /* was margin 8px, font 12px */
@media (min-width: 768px) {
  .stat-figure { font-size: 34px; }     /* was 48px */
  .stat-figure small { font-size: 16px; }   /* was 22px */
  .stat-item p { font-size: 12px; }     /* was 13px */
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.py-100 { padding: 70px 0; }
.py-80  { padding: 56px 0; }
.py-60  { padding: 40px 0; }
@media (min-width: 992px) {
  .py-100 { padding: 100px 0; }
  .py-80  { padding: 80px 0; }
  .py-60  { padding: 60px 0; }
}

.light-gray-bg { background: var(--pt-bg-soft); }

/* Section title */
.section-title h2, .section-title .font-45 {
  font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
}
.section-title .sub-title.st-one, .section-title .sub-title.st-two {
  color: var(--pt-primary); font-weight: 700; letter-spacing: 2px; font-size: 11px;
  text-transform: uppercase; display: inline-block; margin-bottom: 10px;
}
.section-title.section-title-white h2, .section-title.section-title-white .font-45 { color: #fff; }
.section-title.section-title-white .sub-title { color: var(--pt-accent) !important; }
.section-title.section-title-white p { color: rgba(255,255,255,.85); }
.section-title p { color: var(--pt-muted); font-size: 14.5px; max-width: 600px; margin: 8px auto 0; }
.section-title.section-title-left p { margin-left: 0; }
@media (min-width: 992px) {
  .section-title h2, .section-title .font-45 { font-size: 40px; }
  .section-title p { font-size: 15px; }
}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.products-grid { padding: 60px 0; }
@media (min-width: 992px) { .products-grid { padding: 100px 0; } }

/* Featured-products grid — Bootstrap row classes don't have CSS here, so
   force a proper CSS grid with real gutters on every breakpoint. */
.products-grid .product-cards {
  display: grid;
  grid-template-columns: 1fr;            /* mobile: single column */
  gap: 22px;
  margin: 0;
}
.products-grid .product-cards > [class*="col-"] {
  width: auto; max-width: none; padding: 0; flex: initial;
}
@media (min-width: 576px) {
  .products-grid .product-cards { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 992px) {
  .products-grid .product-cards { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

/* Industries strip on homepage — same Bootstrap-row fallback */
.industries-strip .industries-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
}
.industries-strip .industries-row > [class*="col-"] {
  width: auto; max-width: none; padding: 0; flex: initial;
}
@media (min-width: 768px) {
  .industries-strip .industries-row { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 992px) {
  .industries-strip .industries-row { grid-template-columns: repeat(5, 1fr); gap: 20px; }
}

.product-card {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); overflow: hidden; height: 100%;
  display: flex; flex-direction: column; margin-bottom: 0;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.product-card:hover {
  transform: translateY(-6px); border-color: transparent;
  box-shadow: var(--pt-sh-lg);
}
.product-card-media {
  display: block; background: linear-gradient(145deg, var(--pt-bg-soft) 0%, #eaf0f8 100%);
  padding: 24px; aspect-ratio: 4/3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-card-media img {
  max-width: 75%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transition: transform .35s var(--pt-ease);
}
.product-card:hover .product-card-media img { transform: scale(1.08) rotate(-2deg); }
.product-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.product-card-body h3 { font-size: 18px; margin: 0 0 10px; font-weight: 700; }
.product-card-body h3 a { color: var(--pt-dark); text-decoration: none; }
.product-card-body h3 a:hover { color: var(--pt-primary); }
.product-card-body p { color: var(--pt-muted); font-size: 14px; flex: 1; margin: 0 0 16px; line-height: 1.55; }
.product-card-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--pt-border);
}
.btn-link-two {
  color: var(--pt-primary); font-weight: 600; text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; gap: 4px; transition: gap .2s;
}
.btn-link-two:hover { gap: 8px; color: var(--pt-primary-d); }
.btn-quote {
  background: var(--pt-wa); color: #fff !important;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.btn-quote:hover { background: #1da851; color: #fff !important; transform: translateY(-1px); }

/* ==========================================================================
   CHECKLIST, CHIPS, FEATURES
   ========================================================================== */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 10px 0 10px 34px; position: relative; color: var(--pt-text); line-height: 1.5; }
.checklist li i { position: absolute; left: 0; top: 12px; color: var(--pt-success); font-size: 18px; }

.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { background: var(--pt-bg-soft); border: 1px solid var(--pt-border); color: var(--pt-dark); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; }

.feature-card {
  background: #fff; border-radius: var(--pt-r); padding: 26px 22px;
  height: 100%; margin-bottom: 20px; border: 1px solid var(--pt-border);
  transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden;
}
.feature-card:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pt-primary), var(--pt-accent));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--pt-sh-md); border-color: transparent; }
.feature-card:hover:before { transform: scaleX(1); }
.feature-card .feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,74,173,.12), rgba(0,74,173,.04));
  color: var(--pt-primary); display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 16px;
}
.feature-card h4 { font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.feature-card p { color: var(--pt-muted); font-size: 13.5px; margin: 0; line-height: 1.55; }

/* ==========================================================================
   ABOUT MEDIA
   ========================================================================== */
.about-media img { border-radius: var(--pt-r); box-shadow: var(--pt-sh-md); width: 100%; }
.about-media { position: relative; }
@media (min-width: 992px) {
  .about-media:after {
    content: ""; position: absolute; inset: 0; border-radius: var(--pt-r);
    border: 3px solid var(--pt-accent); z-index: -1;
    transform: translate(12px, 12px);
  }
}

/* ==========================================================================
   INDUSTRIES & SPECIALTY TILES
   ========================================================================== */
.industries-row { margin: 0 -10px; }
.industries-row > [class*="col-"] { padding: 0 10px; }
.industries-row .col-lg { flex: 1 1 0; min-width: 160px; }
.industry-tile {
  background: #fff; border-radius: var(--pt-r);
  overflow: hidden; box-shadow: var(--pt-sh-sm); height: 100%;
  transition: transform .25s, box-shadow .25s; margin-bottom: 20px;
  position: relative;
}
.industry-tile:hover { transform: translateY(-4px); box-shadow: var(--pt-sh-md); }
.industry-tile img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .4s var(--pt-ease);
}
.industry-tile:hover img { transform: scale(1.08); }
.industry-tile h3 {
  padding: 14px 16px; margin: 0; font-size: 14px;
  color: var(--pt-dark); text-align: center; line-height: 1.3; font-weight: 600;
}

/* ==========================================================================
   CUSTOM PRINTING SHOWCASE
   ========================================================================== */
.print-showcase {
  background: linear-gradient(135deg, #0b1524 0%, #1a2b4a 100%);
  color: #fff; padding: 70px 0; position: relative; overflow: hidden;
}
.print-showcase:before {
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, var(--pt-accent) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, var(--pt-primary-l) 0%, transparent 40%);
}
.print-showcase .container { position: relative; z-index: 2; }
.print-showcase .sub-title.st-one { color: var(--pt-accent) !important; }
.print-showcase h2 { color: #fff; font-size: 30px; line-height: 1.15; font-weight: 800; }
.print-showcase .lead { color: rgba(255,255,255,.85); font-size: 15px; margin: 14px 0 24px; line-height: 1.65; }
.print-features {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px;
}
.print-features li {
  color: rgba(255,255,255,.92); font-size: 14px;
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
}
.print-features li i {
  color: var(--pt-accent); margin-top: 3px; flex-shrink: 0;
}
.print-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.print-chips span {
  background: rgba(255,255,255,.08); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.1);
}
.print-visual {
  background: linear-gradient(145deg, #ffb800 0%, #e0a000 100%);
  border-radius: var(--pt-r); padding: 40px; position: relative;
  box-shadow: 0 25px 50px rgba(0,0,0,.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 300px; overflow: hidden;
}
.print-visual:before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-12deg, rgba(255,255,255,.08) 0 18px, transparent 18px 36px);
}
.print-visual-label {
  position: relative; z-index: 2; color: var(--pt-dark);
  font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px;
}
.print-visual-big {
  position: relative; z-index: 2; color: var(--pt-dark);
  font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -.02em;
  text-align: center;
}
.print-visual-sub {
  position: relative; z-index: 2; color: rgba(11,21,36,.75);
  font-size: 13px; margin-top: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
@media (min-width: 992px) {
  .print-showcase { padding: 100px 0; }
  .print-showcase h2 { font-size: 40px; }
  .print-showcase .lead { font-size: 16px; }
  .print-visual-big { font-size: 56px; }
}

/* ==========================================================================
   BENTO GRID — modern specialty-tape cards (21st.dev / shadcn inspired)
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 180px;
  gap: 14px;
}
.bento-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r);
  padding: 20px 22px;
  text-decoration: none; color: var(--pt-dark);
  transition: transform .25s var(--pt-ease), box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pt-sh-lg);
  border-color: var(--pt-primary);
  color: var(--pt-dark);
}

/* Size variants */
.bento-card.bento-lg { grid-column: span 2; grid-row: span 2; padding: 28px 30px; }
.bento-card.bento-wide { grid-column: span 2; }

/* Body block */
.bento-body h3 {
  font-size: 17px; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -.01em; color: inherit;
}
.bento-body p { color: var(--pt-muted); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.bento-arrow {
  color: var(--pt-primary); font-size: 13px; font-weight: 600;
  display: inline-block; opacity: .6; transition: opacity .2s, transform .2s;
}
.bento-card:hover .bento-arrow { opacity: 1; transform: translateX(4px); }

/* Large card typography bump */
.bento-card.bento-lg .bento-body h3 { font-size: 26px; margin-bottom: 10px; }
.bento-card.bento-lg .bento-body p { font-size: 15px; margin-bottom: 16px; max-width: 420px; }
.bento-card.bento-lg .bento-arrow { font-size: 14px; opacity: .85; }

/* Spec badge (top-right) */
.bento-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--pt-bg-soft); color: var(--pt-primary);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--pt-border); z-index: 2;
}

/* Dark variant (hero card) */
.bento-card.bento-dark {
  background: linear-gradient(135deg, #0b1524 0%, #1a2b4a 100%);
  color: #fff; border-color: transparent;
}
.bento-card.bento-dark .bento-body h3 { color: #fff; }
.bento-card.bento-dark .bento-body p { color: rgba(255,255,255,.8); }
.bento-card.bento-dark .bento-arrow { color: var(--pt-accent); opacity: 1; }
.bento-card.bento-dark .bento-badge {
  background: rgba(255,184,0,.15); color: var(--pt-accent);
  border-color: rgba(255,184,0,.3);
}
.bento-card.bento-dark:hover { border-color: var(--pt-accent); color: #fff; }

/* Decorative pattern for the dark hero card */
.bento-pattern {
  position: absolute; right: -20px; bottom: -20px;
  width: 200px; height: 200px; opacity: .15; pointer-events: none;
  background: radial-gradient(circle at 30% 30%, var(--pt-accent) 0%, transparent 50%),
              repeating-linear-gradient(-45deg, rgba(255,255,255,.15) 0 2px, transparent 2px 14px);
  border-radius: 50%;
}

/* Accent variant (yellow) */
.bento-card.bento-accent {
  background: linear-gradient(135deg, #fff6dc 0%, #fff 100%);
  border-color: rgba(255,184,0,.3);
}
.bento-card.bento-accent .bento-badge {
  background: rgba(255,184,0,.2); color: #8a5d00;
  border-color: rgba(255,184,0,.3);
}

/* Responsive */
@media (max-width: 991px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .bento-card.bento-lg { grid-column: span 2; grid-row: span 2; }
  .bento-card.bento-lg .bento-body h3 { font-size: 22px; }
}
@media (max-width: 575px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .bento-card, .bento-card.bento-lg { grid-column: span 1; grid-row: span 1; min-height: 130px; padding: 20px; }
  .bento-card.bento-lg .bento-body h3 { font-size: 20px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-accordion details {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); margin-bottom: 12px;
  padding: 16px 20px; transition: box-shadow .2s, border-color .2s;
}
.faq-accordion details[open] { box-shadow: var(--pt-sh-md); border-color: var(--pt-primary-l); }
.faq-accordion summary {
  font-weight: 600; color: var(--pt-dark); cursor: pointer;
  list-style: none; position: relative; padding-right: 32px; font-size: 14.5px; line-height: 1.4;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary:after {
  content: "+"; position: absolute; right: 0; top: -2px;
  color: var(--pt-primary); font-size: 26px; font-weight: 300; transition: transform .2s;
}
.faq-accordion details[open] summary:after { content: "−"; }
.faq-accordion details p { margin: 12px 0 0; color: var(--pt-muted); font-size: 14px; line-height: 1.65; }
.faq-accordion details a { color: var(--pt-primary); }

/* ==========================================================================
   CTA AREA
   ========================================================================== */
/* Dark navy gradient — flows top→bottom into the footer below it.
   The vertical direction means the CTA's bottom edge exactly matches the footer's top edge,
   so the two sections read as ONE continuous dark panel with no visible seam. */
.cta-area-v3 {
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 184, 0, .10) 0%, transparent 38%),
    radial-gradient(circle at 88% 70%, rgba(0, 116, 255, .12) 0%, transparent 40%),
    linear-gradient(180deg, #0a1f3c 0%, #0e2a52 60%, #102d5b 100%);
  color: #fff; padding: 60px 0; position: relative; overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .06);
  /* No bottom border — flows seamlessly into the footer */
}
/* Same diagonal shine animation as lg-banner / usp-marquee */
.cta-area-v3:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 184, 0, .08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lg-shine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.cta-area-v3 .container { position: relative; z-index: 2; }
.cta-area-v3 h2, .cta-area-v3 .font-45 { color: #fff; }
.cta-area-v3 p { color: rgba(255,255,255,.85); }
.cta-area-v3 .main-btn { margin-bottom: 8px; }
@media (max-width: 991px) {
  .cta-area-v3 { text-align: center; }
  .cta-area-v3 .text-lg-right { text-align: center !important; margin-top: 20px; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-page-hero {
  background: linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%);
  border-bottom: 1px solid var(--pt-border);
}
.contact-page-hero h1 { font-size: 38px; line-height: 1.1; font-weight: 800; margin: 12px 0 10px; letter-spacing: -.02em; }
.contact-page-hero p { color: var(--pt-muted); font-size: 16px; max-width: 620px; margin: 0 auto; }
@media (min-width: 992px) { .contact-page-hero h1 { font-size: 46px; } }

/* Clean contact cards — solid-blue hover with full color inversion so text stays readable */
.contact-card {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 32px 28px;
  height: 100%; margin-bottom: 24px;
  transition: all .25s var(--pt-ease);
  position: relative; overflow: hidden;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-sh-lg);
  background: var(--pt-primary);   /* classic blue fill — user wanted this back */
  border-color: var(--pt-primary);
}

/* Icon chip */
.contact-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,74,173,.12), rgba(0,74,173,.04));
  color: var(--pt-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
  transition: background .25s, color .25s;
}
.contact-card:hover .contact-card-icon {
  background: rgba(255,255,255,.18);     /* translucent white on blue */
  color: #fff;
}

/* Text */
.contact-card h3 {
  font-size: 18px; font-weight: 700; margin: 0 0 12px;
  color: var(--pt-dark);
  transition: color .25s;
}
.contact-card-body {
  color: var(--pt-text);
  font-size: 14.5px; line-height: 1.65; margin: 0 0 18px;
  transition: color .25s;
}
.contact-card-body strong { color: var(--pt-dark); transition: color .25s; }
.contact-card-body a { color: var(--pt-primary); text-decoration: none; font-weight: 500; transition: color .25s; }
.contact-card-body a:hover { text-decoration: underline; }
.contact-care { display: inline-block; margin-top: 4px; color: var(--pt-muted); font-size: 13px; transition: color .25s; }
.contact-card-cta {
  color: var(--pt-primary); font-weight: 600; text-decoration: none;
  font-size: 14px; display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s, color .25s;
}
.contact-card-cta:hover { gap: 10px; }

/* Hover: flip ALL text inside to white/accent so nothing disappears */
.contact-card:hover h3                  { color: #fff; }
.contact-card:hover .contact-card-body  { color: rgba(255,255,255,.92); }
.contact-card:hover .contact-card-body strong { color: #fff; }
.contact-card:hover .contact-card-body a      { color: #fff; }
.contact-card:hover .contact-care        { color: rgba(255,255,255,.75); }
.contact-card:hover .contact-card-cta    { color: var(--pt-accent); }  /* yellow pop */

/* Featured (Call / WhatsApp) — WhatsApp green instead of blue */
.contact-card-featured {
  border-color: var(--pt-wa);
  background: linear-gradient(180deg, rgba(37,211,102,.04) 0%, #fff 60%);
}
.contact-card-featured:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pt-wa), var(--pt-primary));
}
.contact-card-featured .contact-card-icon {
  background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(37,211,102,.06));
  color: var(--pt-wa);
}
.contact-card-featured:hover {
  background: var(--pt-wa);
  border-color: var(--pt-wa);
}
.contact-card-featured:hover .contact-card-icon {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.contact-card-featured:hover .contact-card-cta { color: #fff; }

/* Map */
.contact-map .map-wrap {
  border-radius: var(--pt-r); overflow: hidden;
  box-shadow: var(--pt-sh-md); border: 1px solid var(--pt-border);
}

.quote-form-card {
  background: #fff; border-radius: var(--pt-r); padding: 28px;
  box-shadow: var(--pt-sh-md); border-top: 4px solid var(--pt-primary);
}
.quote-form-card h2 { font-size: 22px; margin: 0 0 6px; }
.quote-form-card label { display: block; font-size: 13px; font-weight: 600; color: var(--pt-dark); margin-bottom: 6px; }
.quote-form-card .form_control {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--pt-border); border-radius: var(--pt-r-sm);
  font-size: 14px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.quote-form-card .form_control:focus {
  outline: none; border-color: var(--pt-primary);
  box-shadow: 0 0 0 3px rgba(0,74,173,.15);
}
.quote-form-card .form_group { margin-bottom: 16px; }
.alert { padding: 12px 16px; border-radius: var(--pt-r-sm); margin-bottom: 18px; font-size: 14px; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.map-box iframe { border-radius: var(--pt-r); box-shadow: var(--pt-sh-sm); }

/* ==========================================================================
   PRODUCT DETAIL v2 — modernised
   ========================================================================== */

/* H1 with sub-label */
.product-h1 {
  font-size: 32px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.02em; margin: 8px 0 14px;
}
@media (min-width: 992px) { .product-h1 { font-size: 40px; } }
.product-h1 small {
  display: block; font-size: 14px; font-weight: 500;
  color: var(--pt-muted); margin-top: 8px; letter-spacing: 0;
}

/* Quick-spec chips under H1 — polished, content-aware variants */
.product-chips {
  list-style: none; padding: 0; margin: 8px 0 22px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.product-chips li {
  /* Default neutral chip (overridden by .is-* variants below) */
  background: #ffffff;
  color: var(--pt-dark);
  border: 1px solid var(--pt-border);
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: transform .18s var(--pt-ease), box-shadow .18s, border-color .18s, background .18s;
}
.product-chips li:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(16, 24, 40, .14);
}
.product-chips li i {
  font-size: 11px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,74,173,.10);
  color: var(--pt-primary);
  flex: 0 0 auto;
}

/* Variant: Default fallback — soft slate with a confident look (not just empty white) */
.product-chips li.is-default {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color: var(--pt-dark);
  border-color: #cbd5e1;
}
.product-chips li.is-default i {
  background: linear-gradient(135deg, var(--pt-primary), #0a3d8c);
  color: #ffffff;
}

/* Variant: Premium / Flagship — gold */
.product-chips li.is-premium {
  background: linear-gradient(180deg, #fff8e1 0%, #ffefb8 100%);
  color: #8B6508;
  border-color: rgba(245,180,0,.45);
  box-shadow: 0 1px 2px rgba(184,134,11,.12);
}
.product-chips li.is-premium i {
  background: linear-gradient(135deg, #F5B400, #B8860B);
  color: #fff;
}

/* Variant: Trust signal (Length guaranteed) — green */
.product-chips li.is-trust {
  background: linear-gradient(180deg, #f0faf4 0%, #d8f0e2 100%);
  color: #1f7a4a;
  border-color: rgba(31,157,85,.35);
}
.product-chips li.is-trust i {
  background: rgba(31,157,85,.15);
  color: #1f9d55;
}

/* Variant: Feature (Printed liner / Custom printing) — soft blue */
.product-chips li.is-feature {
  background: linear-gradient(180deg, #f0f5ff 0%, #dde7f8 100%);
  color: #1c4585;
  border-color: rgba(0,74,173,.25);
}
.product-chips li.is-feature i {
  background: rgba(0,74,173,.12);
  color: var(--pt-primary);
}

/* Variant: Spec (lengths, microns) — neutral darker */
.product-chips li.is-spec {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%);
  color: var(--pt-dark);
  border-color: rgba(0,74,173,.18);
}
.product-chips li.is-spec i {
  background: rgba(0,74,173,.08);
  color: var(--pt-primary);
}

/* Variant: Eco (biodegradable, kraft) — green */
.product-chips li.is-eco {
  background: linear-gradient(180deg, #f0faf4 0%, #d8f0e2 100%);
  color: #1f7a4a;
  border-color: rgba(31,157,85,.35);
}
.product-chips li.is-eco i {
  background: rgba(31,157,85,.15);
  color: #1f9d55;
}

/* Variant: Hot (best seller, trending) — warm red */
.product-chips li.is-hot {
  background: linear-gradient(180deg, #fff4f0 0%, #ffd9c8 100%);
  color: #b14a1f;
  border-color: rgba(177,74,31,.35);
}
.product-chips li.is-hot i {
  background: rgba(177,74,31,.15);
  color: #c75a2c;
}

/* Gallery — bigger image */
.product-gallery {
  position: relative;
  background: linear-gradient(145deg, var(--pt-bg-soft) 0%, #eaf0f8 100%);
  border-radius: var(--pt-r);
  padding: 30px;
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--pt-sh-sm);
}
@media (min-width: 992px) { .product-gallery { min-height: 500px; padding: 40px; } }
.product-gallery img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
}
.product-gallery-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--pt-dark); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}

/* Action bar (Share / Copy / Print) */
.product-action-bar {
  display: flex; gap: 8px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--pt-border);
}
.product-action {
  background: transparent; border: 1px solid var(--pt-border);
  color: var(--pt-muted); padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.product-action:hover { color: var(--pt-primary); border-color: var(--pt-primary); background: var(--pt-bg-soft); }

/* Spec tile grid (replaces spec-list) */
.product-spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
@media (min-width: 992px) {
  .product-spec-grid { gap: 22px; }   /* more breathing room on desktop */
}
.spec-tile {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: 12px; padding: 18px 22px;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.spec-tile:hover { transform: translateY(-2px); box-shadow: var(--pt-sh-sm); border-color: var(--pt-primary-l); }
.spec-tile-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px;
  font-weight: 700; color: var(--pt-muted); margin-bottom: 6px;
}
.spec-tile-value {
  font-size: 14px; font-weight: 600; color: var(--pt-dark); line-height: 1.4;
}

/* Section mini heading (Colours / Industries) */
.product-mini-h {
  font-size: 14px; font-weight: 700; color: var(--pt-dark);
  text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.product-mini-h i { color: var(--pt-primary); font-size: 16px; }

/* Colour swatches */
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.swatch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pt-text); }
.swatch-dot {
  width: 24px; height: 24px; border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.swatch-name { font-weight: 500; }

/* Industries pills */
.industry-pills {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.industry-pills li {
  background: var(--pt-bg-soft); border: 1px solid var(--pt-border);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--pt-dark);
}

/* Sticky sidebar quote card */
.product-sticky-sidebar { position: sticky; top: 100px; }
@media (max-width: 991px) { .product-sticky-sidebar { position: static; margin-top: 40px; } }

.sidebar-quote-card {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 28px 24px;
  box-shadow: var(--pt-sh-md);
  border-top: 4px solid var(--pt-primary);
}
.sidebar-kicker {
  font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--pt-primary); font-weight: 800; display: block; margin-bottom: 6px;
}
.sidebar-quote-head h3 {
  font-size: 20px; margin: 0 0 6px; font-weight: 700;
  text-align: left !important; letter-spacing: -.01em;
  word-spacing: normal !important;
}
.sidebar-quote-head p {
  font-size: 13px; color: var(--pt-muted); margin: 0 0 18px;
  text-align: left !important;
}
.sidebar-quote-card, .sidebar-quote-card * { text-align: left !important; }
.sidebar-quote-actions .main-btn { text-align: center !important; }
.sidebar-download { text-align: left !important; }
.sidebar-quote-actions { display: flex; flex-direction: column; gap: 10px; }
.sidebar-quote-actions .main-btn { justify-content: center; width: 100%; }

/* Compact action layout — big WhatsApp primary + smaller side-by-side phone/email secondaries */
.sidebar-quote-actions--compact .main-btn { padding-top: 13px; padding-bottom: 13px; font-size: 15px; }
.sidebar-quote-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}
.sidebar-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  background: #f1f5f9;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  color: var(--pt-dark);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.sidebar-action-icon i {
  font-size: 13px;
  color: var(--pt-primary);
}
.sidebar-action-icon:hover,
.sidebar-action-icon:focus-visible {
  background: rgba(0, 74, 173, .07);
  border-color: rgba(0, 74, 173, .25);
  color: var(--pt-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.sidebar-trust {
  list-style: none; padding: 18px 0 0; margin: 18px 0 0;
  border-top: 1px solid var(--pt-border);
}
.sidebar-trust li {
  font-size: 12.5px; color: var(--pt-muted); padding: 4px 0;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-trust i { color: var(--pt-success); font-size: 14px; }

.sidebar-downloads {
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--pt-border);
}
.sidebar-download {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--pt-bg-soft); text-decoration: none;
  color: var(--pt-dark); font-size: 13px; font-weight: 600;
  margin-top: 8px; transition: all .15s;
}
.sidebar-download > i:first-child { color: #dc2626; font-size: 18px; }
.sidebar-download > span { flex: 1; }
.sidebar-download > i:last-child { color: var(--pt-muted); font-size: 12px; transition: transform .15s; }
.sidebar-download:hover {
  background: var(--pt-primary); color: #fff;
}
.sidebar-download:hover > i { color: #fff; }
.sidebar-download:hover > i:last-child { transform: translateX(4px); }

/* Checklist 2-column layout */
.checklist-2col {
  display: grid; grid-template-columns: 1fr; gap: 2px;
}
@media (min-width: 768px) {
  .checklist-2col { grid-template-columns: 1fr 1fr; gap: 4px 24px; }
}

/* ==========================================================================
   SPEC TABLE — modern card-style table (used on every product page)
   ========================================================================== */
.spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-r);
  overflow: hidden;
  box-shadow: var(--pt-sh-sm);
  font-size: 15px;
  line-height: 1.5;
}
.spec-table tbody tr {
  transition: background .15s;
}
.spec-table tbody tr:nth-child(even) {
  background: var(--pt-bg-soft);
}
.spec-table tbody tr:hover {
  background: rgba(0,74,173,.04);
}
.spec-table th,
.spec-table td {
  padding: 16px 22px;
  text-align: left;
  border-bottom: 1px solid var(--pt-border);
  vertical-align: top;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}
.spec-table th {
  width: 240px;
  color: var(--pt-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  background: transparent;
  position: relative;
}
.spec-table th:before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px;
  background: var(--pt-primary);
  border-radius: 0 2px 2px 0;
}
.spec-table td {
  color: var(--pt-text);
  font-weight: 500;
}
.spec-table td strong { color: var(--pt-dark); font-weight: 700; }

/* Responsive — switch to stacked cards on mobile */
@media (max-width: 767px) {
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
  }
  .spec-table tbody tr {
    padding: 14px 18px;
    border-bottom: 1px solid var(--pt-border);
    background: #fff;
  }
  .spec-table tbody tr:nth-child(even) { background: var(--pt-bg-soft); }
  .spec-table tbody tr:last-child { border-bottom: 0; }
  .spec-table th,
  .spec-table td {
    padding: 4px 0;
    border: 0;
  }
  .spec-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--pt-primary);
    padding-left: 10px;
  }
  .spec-table th:before {
    left: 0; height: 12px;
  }
  .spec-table td {
    font-size: 15px;
    color: var(--pt-dark);
    font-weight: 600;
    padding-left: 10px;
  }
}

/* ==========================================================================
   PRODUCT — Overview / Use Cases / Product-specific FAQ
   ========================================================================== */
.overview-prose h3 {
  font-size: 18px; font-weight: 700; color: var(--pt-dark);
  margin: 24px 0 10px; letter-spacing: -.005em;
}
.overview-prose h3:first-child { margin-top: 0; }
.overview-prose p {
  font-size: 15.5px; line-height: 1.75; color: var(--pt-text);
  margin-bottom: 16px;
}
.overview-prose p strong { color: var(--pt-dark); }
.overview-prose p em { color: var(--pt-muted); font-style: italic; }
@media (max-width: 991px) {
  .product-overview h2 { margin-bottom: 20px; }
}

/* Use Cases */
.use-case-card {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 28px 24px;
  height: 100%; margin-bottom: 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden;
}
.use-case-card:hover {
  transform: translateY(-4px); box-shadow: var(--pt-sh-md);
  border-color: var(--pt-primary-l);
}
.use-case-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,74,173,.12), rgba(0,74,173,.04));
  color: var(--pt-primary); font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.use-case-industry {
  display: inline-block; background: var(--pt-bg-soft);
  color: var(--pt-muted); padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 10px;
}
.use-case-card h4 { font-size: 17px; margin: 0 0 10px; font-weight: 700; line-height: 1.3; }
.use-case-card p { color: var(--pt-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* Product-specific FAQ */
.product-faq .faq-accordion details {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: 12px; margin-bottom: 10px;
  padding: 16px 22px;
  transition: box-shadow .2s, border-color .2s;
}
.product-faq .faq-accordion details[open] {
  box-shadow: var(--pt-sh-md);
  border-color: var(--pt-primary-l);
}
.product-faq .faq-accordion summary {
  font-weight: 600; color: var(--pt-dark);
  cursor: pointer; list-style: none;
  position: relative; padding-right: 32px;
  font-size: 15px; line-height: 1.4;
}
.product-faq .faq-accordion summary::-webkit-details-marker { display: none; }
.product-faq .faq-accordion summary:after {
  content: "+"; position: absolute; right: 0; top: -3px;
  color: var(--pt-primary); font-size: 26px; font-weight: 300;
  transition: transform .2s;
}
.product-faq .faq-accordion details[open] summary:after { content: "−"; }
.product-faq .faq-accordion .faq-body {
  margin: 14px 0 0; color: var(--pt-muted);
  font-size: 14.5px; line-height: 1.7;
}
.product-faq .faq-accordion .faq-body p { margin: 0 0 10px; }
.product-faq .faq-accordion .faq-body a { color: var(--pt-primary); font-weight: 600; }
.product-faq .faq-accordion .faq-body strong { color: var(--pt-dark); }

/* Mobile floating quote CTA */
.mobile-quote-fab {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  z-index: 900; background: var(--pt-wa); color: #fff !important;
  text-align: center; padding: 14px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 12px 30px rgba(37,211,102,.5);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mobile-quote-fab:hover { background: #1da851; color: #fff !important; }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.product-detail-hero .product-gallery {
  background: linear-gradient(145deg, var(--pt-bg-soft) 0%, #eaf0f8 100%);
  border-radius: var(--pt-r); padding: 40px 30px; text-align: center;
  box-shadow: var(--pt-sh-sm); margin-bottom: 20px;
}
.product-detail-hero h1 { font-size: 28px; line-height: 1.15; margin: 12px 0; font-weight: 800; }
.product-detail-hero .lead { font-size: 15px; color: var(--pt-muted); margin-bottom: 20px; }
.spec-list { list-style: none; padding: 0; margin: 0 0 20px; }
.spec-list li { padding: 10px 0; border-bottom: 1px solid var(--pt-border); font-size: 14px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list li strong { color: var(--pt-dark); display: inline-block; min-width: 140px; font-weight: 600; }
.product-cta-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.trust-row { display: flex; gap: 18px; flex-wrap: wrap; color: var(--pt-muted); font-size: 13px; }
.trust-row i { color: var(--pt-success); margin-right: 4px; }
/* "You may also like" — refined card design (image · title · description · arrow CTA) */
.related-card {
  display: flex; flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--pt-dark);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  margin-bottom: 24px;
  height: calc(100% - 24px);
  position: relative;
}
.related-card:hover,
.related-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(16, 24, 40, .12);
  border-color: rgba(0, 74, 173, .22);
  color: var(--pt-dark);
  text-decoration: none;
}
/* Image area — soft slate gradient backdrop, square aspect ratio */
.related-card-media {
  position: relative;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  overflow: hidden;
}
.related-card-media img {
  width: 100%; height: 100%;
  max-width: 220px; max-height: 200px;
  object-fit: contain;
  transition: transform .35s ease;
}
.related-card:hover .related-card-media img { transform: scale(1.06); }
/* Body — title / description / CTA */
.related-card-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px 18px;
  flex: 1 1 auto;
}
.related-card-title {
  margin: 0;
  font-size: 16px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--pt-dark);
  line-height: 1.3;
}
.related-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pt-muted);
  flex: 1 1 auto;
}
.related-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pt-primary);
  transition: gap .2s ease;
}
.related-card-cta i { font-size: 11px; transition: transform .2s ease; }
.related-card:hover .related-card-cta { gap: 12px; }
.related-card:hover .related-card-cta i { transform: translateX(2px); }
/* Accent strip — appears on hover at the top */
.related-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pt-primary), #F5B400);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
  z-index: 2;
}
.related-card:hover::before { transform: scaleX(1); }

@media (max-width: 575px) {
  .related-card-media { padding: 14px; }
  .related-card-body { padding: 16px 18px 14px; }
  .related-card-title { font-size: 15px; }
}

@media (min-width: 992px) {
  .product-detail-hero h1 { font-size: 40px; }
  .product-detail-hero .lead { font-size: 17px; }
}

/* ==========================================================================
   BREADCRUMB BAR
   ========================================================================== */
.breadcrumb-bar {
  background: var(--pt-bg-soft); border-bottom: 1px solid var(--pt-border);
  padding: 12px 0; font-size: 13.5px;
}
.breadcrumb-bar ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb-bar li { color: var(--pt-muted); }
.breadcrumb-bar li + li:before { content: "›"; margin-right: 6px; color: var(--pt-muted); }
.breadcrumb-bar a { color: var(--pt-primary); text-decoration: none; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-bar li[aria-current] { color: var(--pt-dark); font-weight: 600; }

/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
.whatsapp-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 998;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pt-wa); color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 10px 24px rgba(37,211,102,.45);
  transition: transform .2s; text-decoration: none;
  animation: wa-pulse 2.5s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); animation-play-state: paused; }
.whatsapp-float .wa-tooltip {
  position: absolute; right: 66px; background: var(--pt-dark); color: #fff;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translateX(10px);
  transition: opacity .2s, transform .2s;
}
.whatsapp-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(37,211,102,.45); }
  50%      { box-shadow: 0 10px 24px rgba(37,211,102,.75), 0 0 0 10px rgba(37,211,102,.2); }
}
@media (max-width: 576px) {
  .whatsapp-float .wa-tooltip { display: none; }
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed; right: 18px; bottom: 82px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--pt-dark); color: #fff !important;
  align-items: center; justify-content: center;
  z-index: 997; box-shadow: var(--pt-sh-md); text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s, transform .25s; display: flex;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Footer picks up where the CTA gradient ENDS — top of footer = #102d5b
   (the deepest tone of the CTA gradient), so the visible boundary disappears.
   No radial glows on the footer — we don't want a "fresh start" of brightness at the seam. */
.site-footer-v2 {
  background: linear-gradient(180deg, #102d5b 0%, #0e2a52 40%, #0a1f3c 100%);
  color: rgba(255, 255, 255, .75);
  position: relative;
}
.site-footer-v2 .widget { margin-bottom: 30px; }

/* Footer logo — white rounded card so the blue LJIPL outline reads cleanly on the dark footer */
.site-footer-v2 .footer-logo {
  background: #ffffff;
  padding: 14px 20px;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  line-height: 0;                 /* kill inline-image whitespace at the bottom */
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-footer-v2 .footer-logo:hover,
.site-footer-v2 .footer-logo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.site-footer-v2 .footer-logo img {
  display: block;
  max-width: 150px;
  height: auto;
}
.site-footer-v2 .widget-title {
  color: #fff; font-size: 15px; margin-bottom: 18px; position: relative;
  padding-bottom: 10px; font-weight: 700; letter-spacing: .3px;
}
.site-footer-v2 .widget-title:after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px; background: var(--pt-accent);
}
.site-footer-v2 .widget-nav { list-style: none; padding: 0; margin: 0; }
.site-footer-v2 .widget-nav li { padding: 4px 0; }
.site-footer-v2 .widget-nav a,
.site-footer-v2 .widget-nav a:link,
.site-footer-v2 .widget-nav a:visited {
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important; font-size: 14px;
  transition: color .15s, padding-left .15s;
}
.site-footer-v2 .widget-nav a:hover,
.site-footer-v2 .widget-nav a:focus,
.site-footer-v2 .widget-nav a:active {
  color: var(--pt-accent) !important;
  text-decoration: none !important;
  padding-left: 4px;
}

/* --- Reach Us block (address + contact) — compact --- */
.site-footer-v2 .contact-widget .widget-title { margin-bottom: 14px; }
.footer-address {
  display: flex; flex-direction: column; gap: 0;
  font-style: normal; margin: 0 0 14px;
}
.footer-address p.footer-line {
  color: rgba(255,255,255,.82) !important;
  font-size: 13px; line-height: 1.4; margin: 6px 0 0;
  display: flex; align-items: center; gap: 8px;
}
.footer-address p.footer-line i {
  color: rgba(245,180,0,.85) !important;
  background: transparent;
  width: 14px; height: auto; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; margin: 0 !important;
  text-align: center;
}
.footer-address a,
.footer-address a:link,
.footer-address a:visited {
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  transition: color .15s;
}
.footer-address a:hover,
.footer-address a:focus {
  color: var(--pt-accent) !important;
  text-decoration: none !important;
}
/* Generic address fallback (in case class not used) */
.site-footer-v2 address p { color: rgba(255,255,255,.82) !important; font-size: 14px; line-height: 1.65; }
.site-footer-v2 address i { color: var(--pt-accent) !important; margin-right: 8px; }
.site-footer-v2 address a,
.site-footer-v2 address a:link,
.site-footer-v2 address a:visited { color: rgba(255,255,255,.92) !important; text-decoration: none !important; }
.site-footer-v2 address a:hover,
.site-footer-v2 address a:focus { color: var(--pt-accent) !important; text-decoration: none !important; }
.site-footer-v2 .social-box h4 { color: #fff; font-size: 13px; margin-bottom: 10px; font-weight: 600; }
.site-footer-v2 .social-link { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.site-footer-v2 .social-link a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.site-footer-v2 .social-link a:hover { background: var(--pt-accent); color: var(--pt-dark); transform: translateY(-2px); }
.site-footer-v2 .footer-copyright {
  border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0;
  color: rgba(255,255,255,.55); font-size: 13px;
}
.site-footer-v2 .footer-copyright p { margin: 0; }
.site-footer-v2 .footer-copyright a { color: rgba(255,255,255,.7); text-decoration: none; }
@media (max-width: 767px) {
  .site-footer-v2 .footer-copyright .text-md-right { text-align: center !important; margin-top: 8px; }
  .site-footer-v2 .footer-copyright p { text-align: center; }
}

/* ==========================================================================
   ISO 9001:2015 CERTIFICATION — full card (about page) + compact badge (product sidebar)
   ========================================================================== */
.about-certification {
  background: linear-gradient(180deg, #f8fffa 0%, #ffffff 100%);
}
.about-certification .accent-green {
  color: #10b981;
}
.iso-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px 36px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.04);
}
.iso-card-mark {
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iso-card-mark img {
  display: block;
  width: 160px;
  height: 160px;
}
.iso-card-body { flex: 1 1 auto; }
.iso-card-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--pt-dark);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.iso-card-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #10b981;
  margin-bottom: 14px;
}
.iso-card-body p {
  color: var(--pt-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 767px) {
  .iso-card { flex-direction: column; gap: 18px; padding: 22px 20px; text-align: center; }
  .iso-card-mark { flex-basis: auto; }
  .iso-card-mark img { width: 120px; height: 120px; }
  .iso-card-title { font-size: 24px; }
}

/* Compact ISO pill inside product sidebar — mirrors the "Length guaranteed" highlight, in green */
.sidebar-iso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px 8px 10px;
  background: #ECFDF5;
  border-left: 3px solid #10B981;
  border-radius: 6px;
  text-decoration: none;
  color: #047857;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}
.sidebar-iso:hover,
.sidebar-iso:focus-visible {
  background: #D1FAE5;
  color: #047857;
  text-decoration: none;
  transform: translateX(1px);
}
.sidebar-iso img {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: block;
}
.sidebar-iso strong {
  font-weight: 800;
  color: #065F46;
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-h1 {
  font-size: 34px; line-height: 1.15; font-weight: 800;
  letter-spacing: -.02em; margin: 10px 0 16px;
}
.about-lead { color: var(--pt-muted); font-size: 16px; line-height: 1.65; margin-bottom: 24px; }
.about-quick {
  display: flex; gap: 28px; padding: 18px 0;
  border-top: 1px solid var(--pt-border); border-bottom: 1px solid var(--pt-border);
  margin-bottom: 4px;
}
.about-quick > div { display: flex; flex-direction: column; }
.q-num { font-size: 28px; font-weight: 800; color: var(--pt-primary); line-height: 1; letter-spacing: -.02em; }
.q-label { font-size: 12px; color: var(--pt-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }

@media (min-width: 992px) {
  .about-h1 { font-size: 44px; }
}

/* === About hero — CSS Grid (head / image / story / aside / CTA) =========== */
.about-hero-grid {
  display: grid;
  gap: 24px;
}
.about-hero-head    { grid-area: head;  }
.about-hero-image   { grid-area: image; }
.about-hero-story   { grid-area: story; }
.about-hero-aside   { grid-area: aside; display: flex; flex-direction: column; gap: 16px; }
.about-hero-cta     { grid-area: cta;   display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }

.about-hero-image img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(16, 24, 40, .08);
}

/* Desktop: two-column grid with the long story on the left and image + 3 sidebar cards stacked on the right */
@media (min-width: 992px) {
  .about-hero-grid {
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
      "head    head"
      "story   image"
      "story   aside"
      "cta     aside";
    column-gap: 40px;
    row-gap: 24px;
    align-items: start;
  }
}

/* Mobile: linear flow — head → image → story card → stats → ISO → industries → CTA */
@media (max-width: 991px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-head, .about-hero-image, .about-hero-story,
  .about-hero-aside, .about-hero-cta { grid-area: auto; }
  .about-hero-image { order: 2; }
  .about-hero-head  { order: 1; }
  .about-hero-story { order: 3; }
  .about-hero-aside { order: 4; }
  .about-hero-cta   { order: 5; }
}

/* CTA note under the WhatsApp button */
.about-hero-cta .cta-note {
  font-size: 12.5px;
  color: var(--pt-muted);
  margin-left: 4px;
}

/* ----- Sidebar card system (3 cards stacked on the right) ----- */
.hero-aside {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--pt-dark);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.hero-aside:hover,
a.hero-aside:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  color: var(--pt-dark);
  text-decoration: none;
}

.aside-kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--pt-primary);
  margin-bottom: 8px;
}
.aside-kicker--green { color: #10b981; }
.aside-kicker--gold  { color: #b67500; }   /* dark gold for legibility on white */

.hero-aside h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--pt-dark);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.hero-aside p {
  margin: 0;
  color: var(--pt-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Stats card */
.hero-aside--stats { padding-bottom: 18px; }
.hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hero-stat-grid > div {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.hero-stat-grid .num {
  font-size: 26px; font-weight: 800;
  color: var(--pt-primary);
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-stat-grid .lbl {
  font-size: 10.5px; color: var(--pt-muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-top: 6px;
}

/* ISO mini-card */
.hero-aside--iso {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border-color: rgba(16, 185, 129, .25);
}
.hero-aside--iso > img {
  flex: 0 0 60px; display: block;
}
.hero-aside--iso .hero-aside-text { flex: 1 1 auto; }
.hero-aside--iso p i {
  font-size: 11px;
  margin-left: 4px;
  transition: transform .15s ease;
}
.hero-aside--iso:hover p i { transform: translateX(3px); }

/* [deprecated — sidebar callout class no longer rendered, kept inert for back-compat] */
.hero-aside--ev {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #0a1f3c 0%, #0e2a52 100%);
  background-image:
    radial-gradient(circle at 88% 22%, rgba(16,185,129,.22) 0%, transparent 45%),
    linear-gradient(135deg, #0a1f3c 0%, #0e2a52 100%);
  border-color: transparent;
  color: #ffffff;
}
.hero-aside--ev h4 { color: #ffffff; }
.hero-aside--ev p  { color: rgba(255,255,255,.85); }
.hero-aside--ev .aside-kicker--gold { color: #FFC83D; }
.hero-aside--ev .ev-mini-icon {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 22px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, .35);
}

/* === Trust marks strip on homepage — ISO / Made in India / Established 1989 === */
.trust-marks {
  padding: 30px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid var(--pt-border);
  border-bottom: 1px solid var(--pt-border);
}
.trust-marks-row {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.trust-mark-link {
  display: flex; align-items: center; gap: 14px;
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--pt-dark);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  height: 100%;
}
a.trust-mark-link:hover,
a.trust-mark-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
  border-color: rgba(0, 74, 173, .25);
  color: var(--pt-dark);
  text-decoration: none;
}
.trust-mark-link img { flex: 0 0 44px; display: block; }
.trust-mark-link > i {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,74,173,.10), rgba(0,74,173,.04));
  color: var(--pt-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.trust-mark-link > span:not(.trust-mark-link) {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.3;
}
.trust-mark-link strong {
  font-size: 14px; font-weight: 800; letter-spacing: -.005em;
  color: var(--pt-dark);
}
.trust-mark-link em {
  font-style: normal;
  font-size: 12px;
  color: var(--pt-muted);
  line-height: 1.4;
}
@media (max-width: 991px) {
  .trust-marks-row { grid-template-columns: 1fr; gap: 10px; }
  .trust-mark-link { padding: 12px 14px; }
}

/* "What Makes Us Trusted" — 4 brand-promise rows */
.hero-aside--promises { padding-bottom: 16px; }
.promise-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promise-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.promise-list li i {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0, 74, 173, .08);
  color: var(--pt-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  margin-top: 1px;
}
.promise-list li > span {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  line-height: 1.4;
}
.promise-list li strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pt-dark);
  letter-spacing: -.005em;
}
.promise-list li em {
  font-style: normal;
  font-size: 12px;
  color: var(--pt-muted);
  margin-top: 2px;
  line-height: 1.45;
}

/* Industries-served pill strip (sidebar card #4) */
.hero-aside--industries { padding-bottom: 20px; }
.industry-pill-strip {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
}
.industry-pill-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid var(--pt-border);
  color: var(--pt-dark);
  padding: 5px 11px 5px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.industry-pill-strip li:hover {
  background: rgba(0, 74, 173, .07);
  border-color: rgba(0, 74, 173, .25);
}
.industry-pill-strip li i {
  font-size: 11px;
  color: var(--pt-primary);
}
.industry-pill-strip li.pill-more {
  background: transparent;
  border: none;
  color: var(--pt-muted);
  font-style: italic;
  font-weight: 500;
  padding-left: 4px;
}
.industry-pill-strip li.pill-more:hover {
  background: transparent;
  border: none;
}

@media (max-width: 767px) {
  .hero-aside { padding: 16px 18px; }
  .hero-aside--iso > img { flex-basis: 52px; width: 52px; height: 52px; }
  .hero-aside--ev .ev-mini-icon { flex-basis: 50px; width: 50px; height: 50px; font-size: 19px; }
  .industry-pill-strip li { font-size: 12px; padding: 5px 10px; }
}

/* === Story card — same elegant white wrap, now sitting inside the hero column ===== */
.story-wrap--inline {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: 18px;
  padding: 32px 36px 28px;
  box-shadow: 0 10px 36px rgba(16, 24, 40, .06);
  margin-top: 20px;
  margin-bottom: 28px;
}
.story-body--inline { margin: 0; }
.story-body--inline > .story-p:first-child { margin-top: 0; }
.story-body--inline > .story-p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .story-wrap--inline { padding: 24px 22px 22px; border-radius: 14px; }
}
.story-body { color: var(--pt-text, #334155); }
.story-p {
  font-size: 16.5px;
  line-height: 1.85;
  color: #4b5563;
  margin: 0 0 22px;
}
.story-p:last-child { margin-bottom: 0; }
.story-p strong { color: var(--pt-dark); font-weight: 700; }
.story-p a {
  color: var(--pt-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.story-p a:hover,
.story-p a:focus-visible {
  color: #F5B400;
  text-decoration-color: #F5B400;
}

/* First paragraph (lead) — slightly larger and darker for prominence */
.story-p--lead {
  font-size: 18.5px;
  line-height: 1.75;
  color: var(--pt-dark);
  border-left: 3px solid var(--pt-primary);
  padding: 4px 0 4px 22px;
  margin-bottom: 32px;
}
.story-p--lead strong { color: var(--pt-primary); }

/* Last paragraph (coda) — italic-feel summary with a hairline rule above */
.story-p--coda {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--pt-border);
  color: #6b7280;
  font-size: 15.5px;
  font-style: italic;
}
.story-p--coda strong { font-style: normal; color: var(--pt-dark); }

@media (max-width: 767px) {
  .story-wrap { padding: 32px 22px 28px; border-radius: 16px; }
  .story-h2 { font-size: 24px; }
  .story-p { font-size: 15.5px; line-height: 1.75; }
  .story-p--lead { font-size: 17px; padding-left: 16px; }
}

/* === About §X: Industries we serve (legacy — no longer used in markup) === */
.about-industries h2 { margin-bottom: 14px; }
.about-industries p { color: var(--pt-muted); font-size: 15.5px; line-height: 1.65; margin-bottom: 18px; }

.industry-chip-grid {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.industry-chip-grid li {
  display: flex; align-items: center; gap: 10px;
  background: #ffffff; border: 1px solid var(--pt-border);
  border-radius: 999px; padding: 10px 16px;
  font-weight: 700; color: var(--pt-dark);
}
.industry-chip-grid li i {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 74, 173, .1); color: var(--pt-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}

.capability-card {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(16, 24, 40, .04);
}
.capability-card-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  color: var(--pt-dark); margin: 0 0 12px;
}
.capability-card p {
  color: var(--pt-muted); font-size: 15px; line-height: 1.7; margin: 0 0 12px;
}
.capability-card p:last-of-type { margin-bottom: 18px; }
.capability-checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--pt-border); padding-top: 18px;
}
.capability-checklist li {
  display: flex; align-items: center; gap: 10px;
  color: var(--pt-dark); font-weight: 600; font-size: 14.5px;
}
.capability-checklist li i { color: #10b981; font-size: 16px; }

@media (max-width: 991px) {
  .about-industries .pl-lg-5 { padding-left: 15px; padding-top: 30px; }
}

/* === About §3: 8-variants portfolio callout ============================= */
.portfolio-callout {
  display: flex; align-items: stretch; gap: 32px;
  background: linear-gradient(135deg, var(--pt-primary) 0%, #0a3d8c 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 12px 36px rgba(0, 74, 173, .25);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.portfolio-callout:hover,
.portfolio-callout:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0, 74, 173, .35);
  color: #ffffff; text-decoration: none;
}
.portfolio-callout-num {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px 28px;
  min-width: 140px;
}
.portfolio-callout-num span {
  font-size: 84px; font-weight: 900; line-height: 1;
  color: #FFC83D;
  letter-spacing: -.04em;
}
.portfolio-callout-num em {
  font-style: normal;
  text-transform: uppercase; letter-spacing: 2px;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.85);
  margin-top: 6px;
}
.portfolio-callout-body { flex: 1 1 auto; align-self: center; }
.portfolio-callout-body .kicker {
  display: inline-block;
  background: rgba(255,200,61,.18); color: #FFC83D;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.portfolio-callout-body h3 {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  color: #ffffff; margin: 0 0 12px; line-height: 1.2;
}
.portfolio-callout-body p {
  color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.65; margin: 0 0 14px;
}
.portfolio-callout-body strong { color: #ffffff; }
.portfolio-callout-cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: #FFC83D; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 1px;
}
.portfolio-callout-cta i { transition: transform .15s ease; }
.portfolio-callout:hover .portfolio-callout-cta i { transform: translateX(4px); }

@media (max-width: 767px) {
  .portfolio-callout { flex-direction: column; gap: 20px; padding: 24px 22px; }
  .portfolio-callout-num { min-width: auto; padding: 14px 20px; }
  .portfolio-callout-num span { font-size: 64px; }
  .portfolio-callout-body h3 { font-size: 22px; }
}

/* === About §4: Innovation & R&D ========================================= */
.about-innovation h2 { margin-bottom: 16px; }
.innovation-lead {
  font-size: 17px; line-height: 1.55;
  color: var(--pt-dark);
  border-left: 3px solid var(--pt-primary);
  padding-left: 16px;
  margin: 18px 0 0;
}
.about-innovation > .container > .row > .col-lg-7 > p {
  color: var(--pt-muted); font-size: 15.5px; line-height: 1.7; margin-bottom: 28px;
}
.innovation-pillars {
  display: grid; gap: 18px;
}
.innovation-pillar {
  background: #ffffff;
  border: 1px solid var(--pt-border);
  border-left: 3px solid var(--pt-primary);
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
}
.innovation-pillar .pillar-num {
  font-size: 12px; font-weight: 800; color: var(--pt-primary);
  letter-spacing: 2px;
  position: absolute; top: 16px; right: 22px;
}
.innovation-pillar h4 {
  font-size: 16px; font-weight: 700; color: var(--pt-dark);
  margin: 0 0 6px;
}
.innovation-pillar p {
  color: var(--pt-muted); font-size: 14px; line-height: 1.55;
  margin: 0;
}

@media (max-width: 991px) {
  .about-innovation .pl-lg-5 { padding-left: 15px; padding-top: 24px; }
}

/* === About §5: deprecated leadership banner — no markup renders this ============================ */
.about-ev {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9f4 100%);
}
.ev-banner {
  position: relative;
  display: flex; align-items: center; gap: 28px;
  background: #0a1f3c;
  background-image:
    radial-gradient(circle at 88% 22%, rgba(16,185,129,.22) 0%, transparent 40%),
    radial-gradient(circle at 12% 80%, rgba(0,74,173,.30) 0%, transparent 38%),
    linear-gradient(135deg, #0a1f3c 0%, #0e2a52 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 38px 44px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(10, 31, 60, .35);
}
.ev-banner-decor {
  flex: 0 0 auto;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; color: #ffffff;
  box-shadow: 0 8px 24px rgba(16, 185, 129, .35);
  flex-shrink: 0;
}
.ev-banner-body { flex: 1 1 auto; }
.ev-banner-kicker {
  display: inline-block;
  background: rgba(16,185,129,.18); color: #6ee7b7;
  padding: 5px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.ev-banner-body h2 {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
  color: #ffffff; margin: 0 0 14px; line-height: 1.2;
}
.ev-banner-body p {
  color: rgba(255,255,255,.86); font-size: 15.5px; line-height: 1.7; margin: 0 0 22px; max-width: 720px;
}
.ev-banner-body strong { color: #6ee7b7; }
.ev-banner-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ev-banner-cta-row .main-btn {
  background: #10b981; border-color: #10b981; color: #ffffff;
}
.ev-banner-cta-row .main-btn:hover {
  background: #059669; border-color: #059669;
}

@media (max-width: 767px) {
  .ev-banner { flex-direction: column; gap: 20px; padding: 28px 22px; align-items: flex-start; text-align: left; }
  .ev-banner-decor { width: 72px; height: 72px; font-size: 28px; }
  .ev-banner-body h2 { font-size: 24px; }
}

.cap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.cap-item {
  background: #fff; border-radius: var(--pt-r); padding: 26px 24px;
  border: 1px solid var(--pt-border); transition: all .2s;
  position: relative; overflow: hidden;
}
.cap-item:hover { transform: translateY(-4px); box-shadow: var(--pt-sh-md); border-color: transparent; }
.cap-num {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--pt-primary); background: rgba(0,74,173,.08);
  padding: 4px 10px; border-radius: 999px; letter-spacing: 1.5px; margin-bottom: 14px;
}
.cap-item h4 { font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.cap-item p { color: var(--pt-muted); font-size: 13.5px; margin: 0; line-height: 1.55; }

@media (max-width: 991px) { .cap-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 575px) { .cap-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Leadership cards */
.leader-card {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 32px 28px 28px;
  text-align: center; height: 100%; margin-bottom: 24px;
  transition: transform .2s, box-shadow .2s;
}
.leader-card:hover { transform: translateY(-4px); box-shadow: var(--pt-sh-md); }
.leader-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pt-primary) 0%, var(--pt-primary-d) 100%);
  color: #fff; font-weight: 800; font-size: 22px; letter-spacing: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.leader-role {
  display: inline-block; background: rgba(0,74,173,.08); color: var(--pt-primary);
  padding: 4px 12px; border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 10px;
}
.leader-card h3 { font-size: 18px; margin: 0 0 10px; font-weight: 700; }
.leader-card p { color: var(--pt-muted); font-size: 14px; line-height: 1.55; margin: 0; }

/* Location cards */
.location-card {
  background: #fff; border: 1px solid var(--pt-border); border-radius: var(--pt-r);
  padding: 32px 28px; height: 100%; margin-bottom: 24px;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.location-card:hover { transform: translateY(-4px); box-shadow: var(--pt-sh-md); border-color: var(--pt-primary-l); }
.loc-tag {
  display: inline-block; background: var(--pt-accent); color: var(--pt-dark);
  padding: 4px 12px; border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  margin-bottom: 14px;
}
.location-card h3 { font-size: 22px; margin: 0 0 14px; }
.location-card address { font-style: normal; }
.location-card address p { color: var(--pt-text); font-size: 14.5px; line-height: 1.6; margin: 0 0 8px; }
.location-card address i { color: var(--pt-primary); margin-right: 8px; }
.location-card a.btn-link-two { margin-top: 6px; display: inline-flex; gap: 4px; }

/* ==========================================================================
   SHOP PAGE — modern hero with stats + sticky filter tabs
   ========================================================================== */
.shop-hero {
  position: relative; overflow: hidden;
  padding: 90px 0 70px;
  border-bottom: 1px solid var(--pt-border);
}
.shop-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(0,74,173,.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(255,184,0,.1) 0%, transparent 45%),
    linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%);
}
.shop-hero .container { position: relative; z-index: 2; }

.shop-hero .sub-title {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: #fff; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--pt-border); margin-bottom: 18px;
  box-shadow: var(--pt-sh-sm);
}
.shop-hero .live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pt-success);
  box-shadow: 0 0 0 0 var(--pt-success);
  animation: dot-pulse-green 1.8s ease-out infinite;
}
@keyframes dot-pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

.shop-h1 {
  font-size: 36px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.02em; margin: 8px 0 16px;
}
.shop-h1 .h1-accent {
  background: linear-gradient(135deg, var(--pt-primary) 0%, var(--pt-accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 992px) { .shop-h1 { font-size: 52px; } }

.shop-lead { color: var(--pt-muted); font-size: 16px; line-height: 1.65; max-width: 560px; margin-bottom: 26px; }
.shop-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero stats grid */
.shop-hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.shop-stat {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.shop-stat:hover { transform: translateY(-3px); box-shadow: var(--pt-sh-md); }
.shop-stat:before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--pt-primary), var(--pt-accent));
}
.shop-stat-num {
  font-size: 28px; font-weight: 800; color: var(--pt-primary);
  letter-spacing: -.02em; line-height: 1;
}
.shop-stat-label {
  font-size: 11px; color: var(--pt-muted); text-transform: uppercase;
  letter-spacing: 1.5px; font-weight: 700; margin-top: 4px;
}

/* Sticky category nav */
.shop-tabs {
  background: #fff; border-bottom: 1px solid var(--pt-border);
  position: sticky; top: 0; z-index: 20;
  box-shadow: var(--pt-sh-sm);
}
.shop-tabs-row {
  display: flex; gap: 4px; overflow-x: auto; padding: 10px 0;
  scrollbar-width: thin;
}
.shop-tabs-row::-webkit-scrollbar { height: 4px; }
.shop-tabs-row::-webkit-scrollbar-thumb { background: var(--pt-border); border-radius: 2px; }
.shop-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  color: var(--pt-muted); text-decoration: none; font-weight: 600; font-size: 14px;
  white-space: nowrap; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.shop-tab:hover { background: var(--pt-bg-soft); color: var(--pt-primary); }
.shop-tab i { font-size: 16px; }
.shop-tab em {
  font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--pt-bg-soft); padding: 2px 8px; border-radius: 999px;
  color: var(--pt-muted);
}

/* Category block */
.shop-category { scroll-margin-top: 80px; }
.shop-cat-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 36px; flex-wrap: wrap; gap: 16px;
  padding-bottom: 18px; border-bottom: 2px solid var(--pt-border);
}
.shop-cat-head h2 { margin: 4px 0 0; font-size: 32px; }
.shop-cat-count {
  background: var(--pt-primary); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
}

/* Product grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.shop-card {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--pt-ease), box-shadow .25s, border-color .25s;
}
.shop-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-sh-lg); border-color: transparent;
}
.shop-card-media {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--pt-bg-soft) 0%, #eaf0f8 100%);
  padding: 24px; aspect-ratio: 4/3; position: relative; overflow: hidden;
}
.shop-card-media img {
  max-width: 72%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transition: transform .35s var(--pt-ease);
}
.shop-card:hover .shop-card-media img { transform: scale(1.08) rotate(-2deg); }
.shop-card-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--pt-accent); color: var(--pt-dark);
  padding: 4px 10px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  z-index: 2;
}
/* Tags that contain a µ (e.g. "70µ") — don't uppercase, since µ → Μ looks like "M" */
.shop-card-tag.is-micron {
  text-transform: none;
  letter-spacing: .3px;
  font-size: 11.5px;
}
.shop-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.shop-card-body h3 { font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.shop-card-body h3 a { color: var(--pt-dark); text-decoration: none; }
.shop-card-body h3 a:hover { color: var(--pt-primary); }
.shop-card-body p { color: var(--pt-muted); font-size: 13.5px; line-height: 1.5; flex: 1; margin: 0 0 14px; }
.shop-card-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--pt-border);
}

@media (max-width: 575px) {
  .shop-h1 { font-size: 30px; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-cat-head h2 { font-size: 24px; }
}

/* ==========================================================================
   PTK SHOWCASE (homepage) — all 7 grades as mini cards
   ========================================================================== */
.ptk-showcase { background: var(--pt-bg); }
.ptk-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 991px) { .ptk-showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .ptk-showcase-grid { grid-template-columns: 1fr; } }

.ptk-mini {
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 22px 20px 20px;
  text-decoration: none; color: var(--pt-dark);
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .25s var(--pt-ease), box-shadow .25s, border-color .25s;
  position: relative; overflow: hidden;
}
.ptk-mini:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pt-primary);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.ptk-mini:hover {
  transform: translateY(-6px);
  box-shadow: var(--pt-sh-lg);
  border-color: transparent;
  color: var(--pt-dark);
}
.ptk-mini:hover:before { transform: scaleX(1); }
.ptk-mini-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--pt-bg-soft); color: var(--pt-muted);
}
.ptk-mini-code {
  font-size: 32px; font-weight: 800; color: var(--pt-primary);
  letter-spacing: -.02em; line-height: 1; margin-top: 8px;
}
.ptk-mini-code:before { content: "PTK® "; font-size: 11px; font-weight: 700; color: var(--pt-muted); letter-spacing: 1px; display: block; margin-bottom: 2px; }
.ptk-mini-micron { font-size: 14px; font-weight: 700; color: var(--pt-dark); margin-top: 12px; }
.ptk-mini-adh { font-size: 12.5px; color: var(--pt-muted); margin-top: 2px; }
.ptk-mini-cta {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--pt-border);
  color: var(--pt-primary); font-weight: 600; font-size: 13px;
}

/* Premium variants — yellow accent */
.ptk-mini-premium { border-color: rgba(255,184,0,.4); }
.ptk-mini-premium:before { background: linear-gradient(90deg, var(--pt-accent), var(--pt-accent-d)); }
.ptk-mini-premium .ptk-mini-badge {
  background: var(--pt-accent); color: var(--pt-dark); font-weight: 800;
}
.ptk-mini-premium .ptk-mini-code { color: #8a5d00; }

/* Help card (last one, WhatsApp) — dark */
.ptk-mini-help {
  background: linear-gradient(135deg, var(--pt-primary) 0%, var(--pt-primary-d) 100%);
  color: #fff !important; border-color: transparent;
  align-items: center; justify-content: center; text-align: center;
}
.ptk-mini-help:before { background: var(--pt-accent); }
.ptk-mini-help:hover { color: #fff !important; }
.ptk-mini-help-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--pt-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 8px;
}
.ptk-mini-help .ptk-mini-code:before { color: rgba(255,255,255,.5); }
.ptk-mini-help .ptk-mini-adh { color: rgba(255,255,255,.85); }
.ptk-mini-help .ptk-mini-cta {
  color: var(--pt-accent); border-top-color: rgba(255,255,255,.15);
}

/* ==========================================================================
   PTK HUB PAGE
   ========================================================================== */
.ptk-hero { background: linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%); }
.ptk-h1 {
  font-size: 38px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.02em; margin: 10px 0 16px;
}
.ptk-lead { color: var(--pt-muted); font-size: 16px; line-height: 1.65; max-width: 520px; margin-bottom: 20px; }
.ptk-hero-meta {
  display: flex; flex-wrap: wrap; gap: 30px; padding: 18px 0;
  border-top: 1px solid var(--pt-border); border-bottom: 1px solid var(--pt-border);
  margin-bottom: 4px;
}
.ptk-hero-meta > div { display: flex; flex-direction: column; min-width: 0; }
.ptk-hero-meta .q-num { white-space: nowrap; }
@media (min-width: 992px) {
  .ptk-h1 { font-size: 48px; }
}
/* Mobile: 2×2 grid keeps "12–1200mm" and "≤500m" stats from overflowing */
@media (max-width: 575px) {
  .ptk-hero-meta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
  }
  .ptk-hero-meta .q-num { font-size: 22px; }
  .ptk-hero-meta .q-label { font-size: 10px; letter-spacing: 1.2px; }
}

.ptk-hero-visual {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  align-items: end;
  height: 320px;
  padding: 0 10px 56px;
  position: relative;
}
.ptk-hero-visual:after {
  content: ""; position: absolute; bottom: 48px; left: 0; right: 0; height: 1px;
  background: var(--pt-border);
}
.ptk-roll-stack {
  background: linear-gradient(135deg, var(--pt-primary), var(--pt-primary-d));
  border-radius: 10px 10px 4px 4px; position: relative; height: 0;
  animation: roll-rise .8s ease-out both;
  box-shadow: 0 8px 20px rgba(0,74,173,.25);
}
.ptk-roll-stack[data-tier="1"] { height: 30%; animation-delay: 0s;  }
.ptk-roll-stack[data-tier="2"] { height: 42%; animation-delay: .08s; }
.ptk-roll-stack[data-tier="3"] { height: 55%; animation-delay: .16s; }
.ptk-roll-stack[data-tier="4"] { height: 68%; animation-delay: .24s; }
.ptk-roll-stack[data-tier="5"] { height: 80%; animation-delay: .32s; }
.ptk-roll-stack[data-tier="6"] { height: 90%; animation-delay: .40s; }
.ptk-roll-stack[data-tier="7"] { height: 100%; animation-delay: .48s; }
.ptk-roll-stack.is-premium {
  background: linear-gradient(135deg, var(--pt-accent), var(--pt-accent-d));
  box-shadow: 0 8px 20px rgba(255,184,0,.35);
}

/* Number label BELOW the bar (horizontal, readable) */
.ptk-roll-stack span {
  position: absolute; left: 0; right: 0; bottom: -36px;
  text-align: center;
  color: var(--pt-dark); font-weight: 700; font-size: 13px;
  letter-spacing: .3px;
}
/* µ label INSIDE the top of each blue bar — white text on blue, drop-shadow for legibility.
   Same treatment as mobile, applied across breakpoints for visual consistency. */
.ptk-roll-stack[data-label]::before {
  content: attr(data-label);
  position: absolute; top: 14px; left: 0; right: 0;
  text-align: center; font-size: 15px;
  color: #ffffff; font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
/* Mobile: scale the bar-chart down + move µ labels INSIDE the bars in white text
   (above-bar positioning at 9-12px was illegible — white-on-blue is unmistakable).
   Specificity is boosted with the parent selector so no other rule can override. */
@media (max-width: 991px) {
  .ptk-hero-visual {
    height: 220px;
    gap: 8px;
    padding: 8px 6px 40px;
    margin: 28px 0 8px;
    max-width: 100%;
  }
  /* Mobile: hide the horizontal baseline — it was hardcoded at bottom:48px and
     cut visibly through the bars on smaller chart heights */
  .ptk-hero-visual:after { display: none; }

  .ptk-hero-visual .ptk-roll-stack { border-radius: 8px 8px 3px 3px; }
  .ptk-hero-visual .ptk-roll-stack span {
    bottom: -28px; font-size: 11.5px; letter-spacing: .2px;
  }
  /* µ value moves INSIDE the top of the bar — white text on blue, cannot be clipped */
  .ptk-hero-visual .ptk-roll-stack[data-label]::before {
    top: 8px !important;
    bottom: auto !important;
    font-size: 13px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}
@media (max-width: 480px) {
  .ptk-hero-visual {
    height: 180px;
    gap: 5px;
    padding: 6px 4px 36px;
  }
  .ptk-hero-visual .ptk-roll-stack span { font-size: 10.5px; bottom: -24px; }
  .ptk-hero-visual .ptk-roll-stack[data-label]::before {
    top: 6px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   Reel-highlight callout — replaces the "Standard reel" chip.
   Used on PTK series page and every PTK product page.
   ============================================================ */
.reel-highlight {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  /* Dark navy gradient — same trust palette as the homepage lg-banner / cta-area / usp-marquee */
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 184, 0, .14) 0%, transparent 40%),
    radial-gradient(circle at 88% 70%, rgba(0, 116, 255, .14) 0%, transparent 42%),
    linear-gradient(135deg, #0a1f3c 0%, #0e2a52 50%, #102d5b 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-left: 5px solid var(--pt-accent, #ffb800);
  border-radius: 12px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
  color: #ffffff;
}
.reel-highlight::before {
  /* Diagonal gold shine — same animation as the other dark sections */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 184, 0, .10) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lg-shine 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
.reel-highlight-icon {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pt-accent, #ffb800), #e89e00);
  color: #fff;
  border-radius: 12px;
  font-size: 24px;
  box-shadow: 0 6px 14px rgba(255, 184, 0, .45);
  position: relative; z-index: 2;
}
.reel-highlight-body {
  display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: 2;
  min-width: 0;
}
.reel-highlight-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--pt-accent, #ffb800);
  /* (Kicker no longer rendered — value is the headline now. Kept for any product
     page that still uses the old structure for back-compat.) */
}
/* Headline row — value + Industry First badge sit side by side */
.reel-highlight-headline {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.reel-highlight-value {
  font-size: 34px;                     /* bumped from 26px — now the dominant headline */
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -.5px;
}
/* "Industry First" — plain inline text in gold, no pill, no shadow. Reads as
   a confident inline claim rather than a flashy badge. */
.reel-highlight-first-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--pt-accent, #ffb800);
  font-size: 15px; font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.reel-highlight-first-badge::before {
  content: "·";
  color: rgba(255, 255, 255, .35);
  margin-right: 4px;
  font-weight: 400;
}
.reel-highlight-first-badge i { display: none; }   /* drop the bolt icon — plain text only */
@media (max-width: 575px) {
  .reel-highlight-headline { gap: 8px; }
  .reel-highlight-value { font-size: 26px; }
  .reel-highlight-first-badge { font-size: 12px; }
}
.reel-highlight-note {
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.45;
}
.reel-highlight-note strong { color: #ffffff; font-weight: 700; }

/* PTK series hero variant — slightly more compact since it sits inside the hero column */
.reel-highlight--hero { padding: 14px 18px; gap: 14px; }
.reel-highlight--hero .reel-highlight-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 20px; border-radius: 10px; }
.reel-highlight--hero .reel-highlight-value { font-size: 22px; }

@media (max-width: 575px) {
  .reel-highlight { padding: 14px 16px; gap: 14px; }
  .reel-highlight-icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 18px; }
  .reel-highlight-value { font-size: 20px; }
  .reel-highlight-note { font-size: 12px; }
}

/* ============================================================
   USP marquee — infinite-scroll strip of brand USPs.
   Sits below the trust-marks section on the homepage.
   ============================================================ */
.usp-marquee {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  background: linear-gradient(135deg, #0a1f3c 0%, #0e2a52 50%, #102d5b 100%);
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255, 184, 0, .10) 0%, transparent 38%),
    radial-gradient(circle at 88% 70%, rgba(0, 116, 255, .12) 0%, transparent 40%),
    linear-gradient(135deg, #0a1f3c 0%, #0e2a52 50%, #102d5b 100%);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Same diagonal shine animation as the lg-banner above — visually links the two sections */
.usp-marquee::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 184, 0, .08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lg-shine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
/* Soft edge fade so pills appear to materialise out of the dark — adds polish */
.usp-marquee-fade {
  position: absolute; top: 0; bottom: 0;
  width: 110px;
  pointer-events: none;
  z-index: 2;
}
.usp-marquee-fade--left {
  left: 0;
  background: linear-gradient(90deg, #0a1f3c 0%, rgba(10, 31, 60, 0) 100%);
}
.usp-marquee-fade--right {
  right: 0;
  background: linear-gradient(270deg, #0a1f3c 0%, rgba(10, 31, 60, 0) 100%);
}
.usp-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: usp-scroll 60s linear infinite;
  will-change: transform;
}
.usp-marquee:hover .usp-track { animation-play-state: paused; }

@keyframes usp-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.usp-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  backdrop-filter: blur(2px);
}
.usp-pill:hover {
  background: rgba(255, 184, 0, .12);
  border-color: rgba(255, 184, 0, .35);
  transform: translateY(-1px);
}
.usp-pill i {
  color: var(--pt-accent, #ffb800);
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}

/* Responsive — slightly tighter on mobile, faster scroll feels right at small width */
@media (max-width: 767px) {
  .usp-marquee { padding: 20px 0; }
  .usp-marquee-fade { width: 60px; }
  .usp-track { gap: 10px; animation-duration: 45s; }
  .usp-pill { padding: 8px 16px; font-size: 12.5px; gap: 8px; }
  .usp-pill i { font-size: 14px; }
}

/* Respect reduced-motion preference — stop the animation entirely */
@media (prefers-reduced-motion: reduce) {
  .usp-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
  }
  .usp-marquee-fade { display: none; }
}

@keyframes roll-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* (Old rule that hid the bar-chart on mobile removed — the chart now scales down gracefully via the rules above) */

.ptk-compare {
  background: #fff; border-radius: var(--pt-r); overflow: hidden;
  box-shadow: var(--pt-sh-sm); border: 1px solid var(--pt-border);
}
/* Column widths balanced for every row to render on a single line:
   - Grade wider so "PTK® 1600" + Premium chip both fit
   - Strength wider so "Trade secret" doesn't wrap
   - Adhesive trimmed (Solvent / Premium are short)
   - Slit kept at 170px (fits "12–1200mm × ≤500m" on one line)
*/
.ptk-compare-head {
  display: grid; grid-template-columns: 150px 110px 110px 170px 1fr 40px;
  gap: 16px; padding: 14px 24px; background: var(--pt-dark); color: rgba(255,255,255,.9);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.ptk-compare-row {
  display: grid; grid-template-columns: 150px 110px 110px 170px 1fr 40px;
  gap: 16px; padding: 18px 24px; align-items: center;
  text-decoration: none; color: var(--pt-dark);
  border-bottom: 1px solid var(--pt-border);
  transition: background .15s, padding-left .15s;
}

/* Uniform body font for every non-grade cell — strength / adhesive / slit / best-for
   all read at 13.5px so the visual hierarchy is clear: grade is the only "bigger" item. */
.ptk-compare-row > span:nth-child(2),  /* strength */
.ptk-compare-row > span:nth-child(3),  /* adhesive */
.ptk-compare-row > span:nth-child(4) { /* slit */
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pt-dark);
  white-space: nowrap;
  letter-spacing: -.005em;
}
/* Grade — the only intentionally larger cell, with the Premium chip allowed to wrap below
   the grade name (flex-wrap) instead of fighting for the same horizontal row */
.ptk-grade {
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  line-height: 1.2;
  white-space: nowrap;
}
.ptk-tag {
  background: var(--pt-accent); color: var(--pt-dark);
  padding: 2px 8px; border-radius: 999px; font-size: 9.5px;
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-style: normal;
  flex-shrink: 0;
}
.ptk-compare-row:last-child { border-bottom: 0; }
.ptk-compare-row:hover { background: var(--pt-bg-soft); padding-left: 30px; color: var(--pt-primary); }

/* === Slit (W × L) column highlight — the brand's headline USP =============
   Header gets a gold pill; body cells get a soft gold tint with a left accent. */
.ptk-compare-head > span:nth-child(4) {
  background: linear-gradient(135deg, var(--pt-accent, #ffb800), #e89e00);
  color: var(--pt-dark, #0a1f3c);
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(255, 184, 0, .25);
}
.ptk-compare-row > span:nth-child(4) {
  background: rgba(255, 184, 0, .10);
  color: var(--pt-dark, #0a1f3c) !important;
  font-weight: 700 !important;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  border-left: 3px solid var(--pt-accent, #ffb800);
}
.ptk-compare-row:hover > span:nth-child(4) {
  background: rgba(255, 184, 0, .18);
}
.ptk-grade { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.ptk-tag {
  background: var(--pt-accent); color: var(--pt-dark);
  padding: 2px 8px; border-radius: 999px; font-size: 9.5px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-style: normal;
}
.ptk-compare-row.is-premium .ptk-grade { color: #8a5d00; }
.ptk-desc { color: var(--pt-muted); font-size: 13.5px; line-height: 1.5; }
.ptk-arrow { color: var(--pt-primary); font-weight: 700; font-size: 16px; text-align: right; }

@media (max-width: 767px) {
  /* Hero stats keep flex layout but tighter */
  .ptk-hero-meta { gap: 14px 22px; }

  /* Comparison table — abandon grid on mobile; use a flowing block layout
     to prevent the spec items (strength/adhesive/slit) overlapping each other
     in a shared grid-area. */
  .ptk-compare-head { display: none; }
  .ptk-compare-row {
    display: block;
    padding: 16px 18px;
    position: relative;
  }
  .ptk-compare-row:hover { padding: 16px 18px; }
  .ptk-grade {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; margin-bottom: 8px; padding-right: 28px;
  }
  .ptk-arrow {
    position: absolute; top: 18px; right: 16px;
    font-size: 18px;
  }
  .ptk-compare-row > span:nth-child(2),
  .ptk-compare-row > span:nth-child(3),
  .ptk-compare-row > span:nth-child(4) {
    display: inline;
    font-size: 12.5px;
    color: var(--pt-muted);
    line-height: 1.6;
  }
  .ptk-compare-row > span:nth-child(2):after,
  .ptk-compare-row > span:nth-child(3):after { content: " · "; color: var(--pt-border); }
  /* Override desktop slit-highlight styles on mobile so it reads inline with the rest */
  .ptk-compare-row > span:nth-child(4) {
    background: transparent;
    border-left: none;
    padding: 0;
    border-radius: 0;
    color: var(--pt-accent, #b78700) !important;   /* still distinguished as the brand USP */
    font-weight: 700 !important;
    text-align: left;
  }
  .ptk-desc {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--pt-bg-soft);
    font-size: 13px;
  }
}

.about-address p { font-size: 15px; line-height: 1.65; color: var(--pt-text); margin-bottom: 8px; }
.about-address i { color: var(--pt-primary); margin-right: 8px; width: 16px; }
.about-address a { color: var(--pt-primary); text-decoration: none; }
.about-cta-group { display: flex; gap: 10px; flex-wrap: wrap; }

/* Tighter mobile spacing */
@media (max-width: 767px) {
  .industry-tile { margin-bottom: 14px; }
  .industry-tile h3 { padding: 12px 10px; font-size: 12.5px; }
  .print-features { grid-template-columns: 1fr; gap: 10px; }
  .print-showcase { padding: 50px 0; }
}

/* Consistent section rhythm */
.products-grid + .about-area { padding-top: 0; }
.about-area + .why-us { margin-top: 0; }

/* ==========================================================================
   RESPONSIVE SHOW / HIDE
   ========================================================================== */
@media (max-width: 991px) {
  .pt-nav { display: none; }
  .pt-burger { display: inline-flex; }
  .d-none.d-lg-inline-flex, .d-none.d-lg-block { display: none !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
}

/* ==========================================================================
   A11Y & MOTION
   ========================================================================== */
a:focus-visible, button:focus-visible, .pt-btn:focus-visible, .main-btn:focus-visible, .form_control:focus-visible {
  outline: 3px solid rgba(0,74,173,.35); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .whatsapp-float, .hero-img img { animation: none; }
}
@media print {
  .announcement-bar, .pt-header, .site-footer-v2, .whatsapp-float, .back-to-top, .cta-area-v3, .pt-mobile { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   LEGAL PAGES (Privacy Policy / Terms)
   Use high specificity to defeat legacy theme h1/h2 rules.
   ========================================================================== */
.legal-page { background: var(--pt-bg-soft); }
.legal-content {
  max-width: 820px; margin: 0 auto;
  background: #fff; border: 1px solid var(--pt-border);
  border-radius: var(--pt-r); padding: 48px 56px;
  box-shadow: var(--pt-sh-sm);
}
.legal-content .sub-title {
  display: inline-block; color: var(--pt-primary) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  margin-bottom: 10px !important; line-height: 1 !important;
}
.legal-content h1 {
  font-size: 32px !important; line-height: 1.2 !important; font-weight: 800 !important;
  letter-spacing: -.01em !important; margin: 6px 0 8px !important;
  color: var(--pt-dark) !important;
}
.legal-content h2 {
  font-size: 18px !important; line-height: 1.35 !important; font-weight: 700 !important;
  margin: 28px 0 10px !important; padding-bottom: 6px !important;
  border-bottom: 1px solid var(--pt-border);
  color: var(--pt-dark) !important; letter-spacing: 0 !important;
}
.legal-content p, .legal-content li {
  font-size: 15px !important; line-height: 1.7 !important;
  color: var(--pt-text) !important; font-weight: 400 !important;
  margin-bottom: 10px;
}
.legal-content ul { padding-left: 22px; margin-bottom: 14px; }
.legal-content ul li { margin-bottom: 6px; }
.legal-content a { color: var(--pt-primary) !important; text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--pt-dark) !important; }
.legal-content em { color: var(--pt-muted) !important; font-style: italic; }
.legal-updated {
  color: var(--pt-muted) !important; font-size: 13px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 767px) {
  .legal-content { padding: 28px 22px; }
  .legal-content h1 { font-size: 24px !important; }
  .legal-content h2 { font-size: 16px !important; }
  .legal-content p, .legal-content li { font-size: 14px !important; }
}

/* ==========================================================================
   Override legacy theme styles that break layout
   ========================================================================== */
.theme-header.old-theme, .header-navigation.navigation-style-v1.old { display: none; }
.preloader { display: none !important; }

/* ---- Legacy theme hover states ----
   Old template flipped cards to blue. Keep the flip, but force text to white
   so nothing disappears on hover. */

/* Info-item cards — solid blue fill, white text */
.info-item-one:hover, .info-item-two:hover, .info-item-three:hover, .info-item-four:hover {
  background: var(--pt-primary) !important;
}
.info-item-one:hover h4, .info-item-two:hover h4, .info-item-three:hover h4, .info-item-four:hover h4,
.info-item-one:hover p,  .info-item-two:hover p,  .info-item-three:hover p,  .info-item-four:hover p,
.info-item-one:hover a,  .info-item-two:hover a,  .info-item-three:hover a,  .info-item-four:hover a,
.info-item-one:hover span, .info-item-two:hover span, .info-item-three:hover span, .info-item-four:hover span {
  color: #fff !important;
}
.info-item-one:hover .icon, .info-item-two:hover .icon,
.info-item-three:hover .icon, .info-item-four:hover .icon {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Features blocks */
.features-item:hover, .features-item-two:hover, .features-item-three:hover {
  background: var(--pt-primary) !important;
}
.features-item:hover h4, .features-item:hover p, .features-item:hover a,
.features-item-two:hover h4, .features-item-two:hover p, .features-item-two:hover a,
.features-item-three:hover h4, .features-item-three:hover p, .features-item-three:hover a {
  color: #fff !important;
}

/* Service / portfolio items — keep card white so images stay visible */
.service-item:hover, .service-style-one:hover, .service-style-two:hover, .service-style-three:hover {
  background: #fff !important;
}

/* Page banner strip on legacy product pages — don't force white text if background stays light */
.page-banner.bg_cover {
  background: linear-gradient(135deg, var(--pt-bg-soft) 0%, #ffffff 100%) !important;
}
.page-banner.bg_cover h1, .page-banner.bg_cover h2 { color: var(--pt-dark) !important; }
.page-banner.bg_cover p { color: var(--pt-muted) !important; }
.page-banner.bg_cover .breadcrumbs-link li,
.page-banner.bg_cover .breadcrumbs-link a { color: var(--pt-primary) !important; }

/* ============================================================
   Events page — countdown timer + event card
   ============================================================ */
.events-hero { background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%); }
.events-h1 {
  font-size: 44px; font-weight: 800; letter-spacing: -.5px;
  color: var(--pt-dark); margin: 16px 0 14px; line-height: 1.15;
}
.events-lead {
  color: var(--pt-muted); max-width: 720px; margin: 0 auto;
  font-size: 16.5px; line-height: 1.6;
}
@media (max-width: 767px) { .events-h1 { font-size: 30px; } }

.event-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--pt-border);
  box-shadow: 0 10px 30px -12px rgba(0, 74, 173, .15), 0 2px 6px rgba(0,0,0,.04);
}
.event-card-banner {
  background:
    radial-gradient(900px 200px at 0% 100%, rgba(245,180,0,.18), transparent 60%),
    linear-gradient(135deg, #002b6b 0%, #004aad 60%, #0a5ec9 100%);
  color: #fff;
  padding: 38px 40px 34px;
  position: relative;
  overflow: hidden;
}
.event-card-banner::before {
  /* subtle ribbon shimmer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lg-shine 8s ease-in-out infinite;
  pointer-events: none;
}
.event-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,180,0,.18); color: #FFC83D;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(245,180,0,.35);
}
.event-card-banner h2 {
  margin: 14px 0 8px; font-size: 36px; font-weight: 800; letter-spacing: -.5px;
  color: #fff;
}
.event-card-banner h2 sup { font-size: 18px; vertical-align: super; opacity: .85; }
.event-card-tagline {
  color: rgba(255,255,255,.85);
  font-size: 16px; margin: 0;
}
@media (max-width: 767px) {
  .event-card-banner { padding: 28px 22px; }
  .event-card-banner h2 { font-size: 26px; }
  .event-card-tagline { font-size: 14px; }
}

.event-card-body { padding: 36px 40px 36px; }
@media (max-width: 767px) { .event-card-body { padding: 24px 20px; } }

/* Countdown */
.event-cd-wrap {
  text-align: center;
  padding: 24px 18px;
  background: linear-gradient(180deg, #fff8e1 0%, #fff2c8 100%);
  border: 1px solid rgba(245,180,0,.35);
  border-radius: 16px;
  margin-bottom: 32px;
  position: relative; overflow: hidden;
}
.event-cd-label {
  display: block;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 11.5px; font-weight: 700;
  color: #8B6508; margin-bottom: 12px;
}
.event-cd {
  display: flex; justify-content: center; align-items: stretch; gap: 4px;
  flex-wrap: nowrap;
}
.cd-cell {
  display: flex; flex-direction: column; align-items: center;
  background: #fff;
  border: 1px solid rgba(245,180,0,.4);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 86px;
  box-shadow: 0 4px 10px -4px rgba(184,134,11,.25);
}
.cd-num {
  font-size: 36px; font-weight: 800; line-height: 1;
  color: var(--pt-primary);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.cd-unit {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--pt-muted); margin-top: 8px;
}
.cd-sep {
  display: flex; align-items: center;
  font-size: 28px; font-weight: 800; color: rgba(184,134,11,.55);
  padding: 0 4px; align-self: center;
  margin-top: -18px; /* visually align with numbers, ignore unit text */
}
@media (max-width: 575px) {
  .cd-cell { min-width: 0; flex: 1; padding: 10px 6px; }
  .cd-num { font-size: 24px; }
  .cd-unit { font-size: 9px; letter-spacing: .5px; margin-top: 6px; }
  .cd-sep { display: none; }
  .event-cd { gap: 6px; }
}

/* Meta grid */
.event-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.event-meta {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: var(--pt-bg-soft, #f3f5fb);
  border-radius: 12px;
}
.event-meta-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: #fff; color: var(--pt-primary);
  border-radius: 10px;
  font-size: 16px;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,74,173,.1);
}
.event-meta-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--pt-muted); margin-bottom: 4px;
}
.event-meta-value {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--pt-dark); line-height: 1.4;
}
.event-meta-value small {
  display: block; font-weight: 500; font-size: 12.5px;
  color: var(--pt-muted); margin-top: 2px;
}

/* CTA row */
.event-cta-row {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 28px; align-items: center;
  padding-top: 24px;
  border-top: 1px dashed var(--pt-border);
}
@media (max-width: 767px) { .event-cta-row { grid-template-columns: 1fr; gap: 18px; } }
.event-cta-text h3 {
  margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--pt-dark);
}
.event-cta-text ul {
  list-style: none; padding: 0; margin: 0;
}
.event-cta-text li {
  padding: 6px 0; font-size: 14.5px; color: var(--pt-muted); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
.event-cta-text li i {
  color: #1f9d55; font-size: 12px;
  margin-top: 5px; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(31,157,85,.12);
  display: grid; place-items: center;
}
.event-cta-text li a { color: var(--pt-primary); text-decoration: none; }
.event-cta-text li a:hover { text-decoration: underline; }
.event-cta-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.event-cta-actions .main-btn { width: 100%; justify-content: center; }

.event-card.event-live-or-past .event-cd-wrap {
  background: linear-gradient(180deg, #e8f5ee 0%, #d4ebde 100%);
  border-color: rgba(31,157,85,.4);
}
.event-card.event-live-or-past .event-cd-label { color: #1f7a4a; }

/* ============================================================
   PTK Product Card Grid (/ptk hub — above compare table)
   ============================================================ */
.ptk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
@media (min-width: 1100px) {
  .ptk-card-grid { grid-template-columns: repeat(4, 1fr); }
}
.ptk-product-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .25s var(--pt-ease), box-shadow .25s var(--pt-ease), border-color .25s;
}
.ptk-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(0,74,173,.18), 0 4px 10px rgba(0,0,0,.05);
  border-color: rgba(0,74,173,.25);
  text-decoration: none;
  color: inherit;
}
.ptk-product-card.is-premium {
  border-color: rgba(245,180,0,.45);
  background: linear-gradient(180deg, #ffffff 0%, #fffaee 100%);
}
.ptk-product-card.is-premium:hover {
  border-color: rgba(245,180,0,.7);
  box-shadow: 0 14px 32px -10px rgba(184,134,11,.30), 0 4px 10px rgba(0,0,0,.05);
}
.ptk-product-card-media {
  position: relative;
  background: linear-gradient(135deg, #eef1f8 0%, #dde3f0 100%);
  aspect-ratio: 4/3;
  display: grid; place-items: center;
  overflow: hidden;
}
.ptk-product-card.is-premium .ptk-product-card-media {
  background: linear-gradient(135deg, #fff5d4 0%, #ffe5a0 100%);
}
.ptk-product-card-media img {
  width: 70%; height: 70%; object-fit: contain;
  transition: transform .35s var(--pt-ease);
}
.ptk-product-card:hover .ptk-product-card-media img {
  transform: scale(1.06) rotate(-2deg);
}
.ptk-product-card-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--pt-accent); color: var(--pt-dark);
  padding: 4px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  text-transform: none; letter-spacing: .3px;
  z-index: 2;
}
/* Premium grades keep the uppercase "PREMIUM" look */
.ptk-product-card.is-premium .ptk-product-card-badge {
  background: linear-gradient(135deg, #F5B400, #B8860B);
  color: #fff;
  box-shadow: 0 3px 8px rgba(184,134,11,.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10.5px;
}
.ptk-product-card-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.ptk-product-card-body h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--pt-primary);
  letter-spacing: -.2px;
}
.ptk-product-card.is-premium .ptk-product-card-body h3 {
  color: #8B6508;
}
.ptk-product-card-meta {
  display: block;
  color: var(--pt-muted);
  font-size: 12px;
  margin-bottom: 10px;
  letter-spacing: .3px;
  font-weight: 600;
}
.ptk-product-card-body p {
  color: var(--pt-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}
.ptk-product-card-cta {
  color: var(--pt-primary);
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.ptk-product-card.is-premium .ptk-product-card-cta { color: #8B6508; }
.ptk-product-card-cta i {
  transition: transform .2s var(--pt-ease);
  font-size: 12px;
}
.ptk-product-card:hover .ptk-product-card-cta i { transform: translateX(4px); }

/* Disabled link / button items — visible text with hover animation, but click
   does nothing (no href = browser doesn't navigate, :hover still works). Used
   for nav menu shortcuts AND for placeholder buttons (Catalogue, etc). */
.mega-disabled {
  cursor: pointer;
}
.mega-disabled[href] {
  /* If somebody adds an href back, treat as a real link */
  cursor: pointer;
}

/* Button text colors are set explicitly in their own rules above — do not inherit. */

/* ============================================================
   Length Guaranteed trust banner
   ============================================================ */
.lg-banner {
  padding: 18px 0;
  /* Dark navy gradient — matches stats-strip and usp-marquee below so all three
     read as ONE continuous "brand trust zone" instead of three colour blocks. */
  background:
    radial-gradient(1200px 200px at 12% 30%, rgba(255, 184, 0, .10), transparent 50%),
    radial-gradient(1200px 200px at 88% 70%, rgba(0, 116, 255, .10), transparent 50%),
    linear-gradient(180deg, #0a1f3c 0%, #0e2a52 100%);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  position: relative;
  overflow: hidden;
}
.lg-banner::before {
  /* subtle diagonal shine — toned down for dark background */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 184, 0, .08) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lg-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lg-shine {
  0%, 35%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.lg-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .065) 0%, rgba(255, 255, 255, .03) 100%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 12px 32px -14px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* Vertical gold accent rail on the left edge of each card */
.lg-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  background: linear-gradient(180deg, var(--pt-accent, #ffb800), #b88500);
  border-radius: 0 3px 3px 0;
  opacity: .9;
  transition: opacity .3s ease, top .3s ease, bottom .3s ease;
}
.lg-card--reel::before {
  background: linear-gradient(180deg, #3b82f6, #1e3a8a);
}
.lg-card:hover {
  border-color: rgba(255, 184, 0, .30);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 18px 38px -14px rgba(0, 0, 0, .55);
}
.lg-card:hover::before {
  top: 0; bottom: 0;
  opacity: 1;
}
.lg-shield {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #F5B400, #B8860B);
  color: #fff;
  border-radius: 12px;
  font-size: 20px;
  box-shadow:
    0 6px 16px rgba(245, 180, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .50),
    inset 0 -2px 0 rgba(0, 0, 0, .10);
  position: relative;
}
/* Soft outer glow ring — pulses very gently on hover */
.lg-shield::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(245, 180, 0, .25) 0%, transparent 70%);
  z-index: -1;
  opacity: .6;
  transition: opacity .35s ease, inset .35s ease;
}
.lg-card:hover .lg-shield::before {
  opacity: 1;
  inset: -8px;
}
.lg-shield::after {
  /* Tiny check-circle accent in the corner */
  content: "\f00c"; /* fa check */
  font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; right: -5px; bottom: -5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1f9d55; color: #fff;
  display: grid; place-items: center;
  font-size: 10px;
  box-shadow: 0 2px 6px rgba(31, 157, 85, .45);
  border: 2px solid #0a1f3c;   /* dark navy ring instead of white so it merges with the card */
}
.lg-text {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 auto; min-width: 0;
}
.lg-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: .1px;
  line-height: 1.2;
}
.lg-body {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.4;
  margin-top: 2px;
}
.lg-body strong { color: #ffffff; font-weight: 700; }
/* Right-side pill — now feels like a refined badge: tinted bg, soft border, hover ripple */
.lg-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: rgba(31, 157, 85, .12);
  color: #6ee7b7;
  border: 1px solid rgba(31, 157, 85, .35);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.lg-pill:hover { background: rgba(31, 157, 85, .18); transform: scale(1.03); }
.lg-pill i { color: #34d399; font-size: 11px; }
@media (max-width: 767px) {
  .lg-banner { padding: 14px 0; }
  .lg-card {
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
  }
  .lg-shield {
    width: 40px; height: 40px;
    border-radius: 10px;
    font-size: 16px;
  }
  .lg-shield::after {
    width: 16px; height: 16px;
    font-size: 9px;
    right: -4px; bottom: -4px;
    border-width: 1.5px;
  }
  .lg-title { font-size: 14px; line-height: 1.2; }
  .lg-body  { font-size: 12.5px; line-height: 1.35; }
  .lg-pill {
    /* hide redundant pill on mobile — title + check icon already convey trust */
    display: none;
  }
}

/* === Two-card grid + Standard Reel variant (homepage trust banner) ============ */
.lg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
  z-index: 1;
}
/* Single-card variant — used on product pages where only the reel card renders */
.lg-grid--single { grid-template-columns: 1fr; }

/* Narrow variant — for the strip sitting in just the product image column.
   Compact padding, smaller shield, font-stack tuned to fit in ~400-500px width. */
.lg-banner--narrow .lg-card {
  padding: 12px 14px 12px 18px;
  gap: 12px;
}
.lg-banner--narrow .lg-shield {
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 16px;
}
.lg-banner--narrow .lg-shield::after {
  width: 14px; height: 14px;
  font-size: 8px;
  right: -3px; bottom: -3px;
  border-width: 1.5px;
}
.lg-banner--narrow .lg-title.lg-title--big { gap: 8px; }
.lg-banner--narrow .lg-title-value {
  font-size: 15px;
  padding: 3px 9px;
  border-radius: 6px;
}
.lg-banner--narrow .lg-title-first-badge {
  font-size: 10px;
  letter-spacing: .8px;
}
.lg-banner--narrow .lg-body {
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 4px;
}
@media (max-width: 575px) {
  .lg-banner--narrow .lg-card { padding: 10px 12px 10px 14px; gap: 10px; }
  .lg-banner--narrow .lg-shield { width: 36px; height: 36px; font-size: 14px; }
  .lg-banner--narrow .lg-title-value { font-size: 14px; padding: 2px 8px; }
  .lg-banner--narrow .lg-title-first-badge { font-size: 9.5px; }
  .lg-banner--narrow .lg-body { font-size: 11px; }
}

/* Inline lg-banner — strips the banner background/border/padding so ONLY the
   inner .lg-card renders. Prevents the visible "two-tone frame" you'd otherwise
   see (outer navy banner + inner slightly-lighter card). */
.lg-banner--inline {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0;
  overflow: visible;
}
.lg-banner--inline::before,
.lg-banner--inline::after { display: none !important; }
/* The inner lg-card on product pages gets a solid dark navy fill (no translucency)
   since there's no dark parent section behind it to show through. */
.lg-banner--inline .lg-card {
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 184, 0, .10) 0%, transparent 40%),
    radial-gradient(circle at 88% 70%, rgba(0, 116, 255, .12) 0%, transparent 42%),
    linear-gradient(135deg, #0a1f3c 0%, #0e2a52 50%, #102d5b 100%);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lg-title-value {
  display: inline-block;
  margin-left: 0;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--pt-accent, #ffb800), #e89e00);
  color: var(--pt-dark, #0a1f3c);
  border-radius: 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  vertical-align: middle;
  box-shadow:
    0 4px 12px rgba(255, 184, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* Bigger headline variant — value pill + inline claim sit together on one line */
.lg-title.lg-title--big {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: 0;
  line-height: 1.1;
}
/* Industry-first inline text (homepage compact) — plain gold with a subtle
   underline that draws the eye without being a flashy badge */
.lg-title-first-badge {
  display: inline-flex; align-items: baseline;
  color: var(--pt-accent, #ffb800);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}
.lg-title-first-badge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--pt-accent, #ffb800), transparent);
  border-radius: 1px;
}
.lg-title-first-badge i { display: none; }
@media (max-width: 575px) {
  .lg-title-value { font-size: 16px; padding: 3px 10px; }
  .lg-title-first-badge { font-size: 11px; letter-spacing: .2px; }
}
/* Second card — Standard Reel — cooler blue shield so the two cards read as distinct */
.lg-card--reel .lg-shield {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow:
    0 6px 18px rgba(37, 99, 235, .50),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .10);
}
.lg-card--reel .lg-shield::before {
  background: radial-gradient(circle, rgba(59, 130, 246, .30) 0%, transparent 70%);
}
.lg-card--reel .lg-shield::after {
  background: var(--pt-accent, #ffb800);
  color: var(--pt-dark, #0a1f3c);
  content: "\f00c";
}
/* Blue "Custom" pill — refined look matching the card 2 theme. Text white for max contrast. */
.lg-pill--blue {
  background: rgba(59, 130, 246, .14);
  color: #ffffff;
  border-color: rgba(59, 130, 246, .40);
}
.lg-pill--blue:hover { background: rgba(59, 130, 246, .22); }
.lg-pill--blue i,
.lg-pill--blue .brand-icon { color: #ffffff; }

@media (max-width: 991px) {
  .lg-grid { grid-template-columns: 1fr; gap: 12px; }
  .lg-title-value { font-size: 13.5px; padding: 2px 8px; }
}

/* ============================================================
   Global mobile responsive normalization
   (Bootstrap grid CSS isn't loaded — this gives sensible
    default behaviour to .row/.col-* containers + tightens
    section padding on small screens)
   ============================================================ */
@media (max-width: 767px) {
  /* Tighter section padding — 80px top/bottom is too much on small screens */
  .py-80 { padding-top: 50px !important; padding-bottom: 50px !important; }
  .py-60 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .py-40 { padding-top: 28px !important; padding-bottom: 28px !important; }
  .mb-50, .mb-40 { margin-bottom: 28px !important; }

  /* Default behaviour for any .row that contains 2-col splits — stack with gap */
  .row { margin-left: 0; margin-right: 0; }
  .about-area .row,
  .print-showcase .row,
  .cta-area .row {
    display: flex; flex-direction: column; gap: 26px;
  }
  .about-area .row > [class*="col-"],
  .print-showcase .row > [class*="col-"],
  .cta-area .row > [class*="col-"] { padding: 0; max-width: 100%; flex: initial; }

  /* About preview button — make sure it's visible & properly spaced */
  .about-area .main-btn { margin-top: 12px; }

  /* Section titles — smaller h2 on mobile */
  .font-45 { font-size: 28px !important; line-height: 1.2; }
  .section-title p { font-size: 14.5px; }

  /* Hero CTAs — full width and stacked on small screens */
  .hero-cta { display: flex; flex-direction: column; gap: 10px; }
  .hero-cta .main-btn { width: 100%; justify-content: center; }
}

@media (max-width: 575px) {
  .py-80 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   PREMIUM-LEVEL UPGRADES
   – Site-wide smooth scroll
   – Scroll-triggered reveal animations
   – Blur-up lazy image placeholder
   – Sticky mobile action bar on product pages
   – "Where it's used" visual cards on PTK pages
   – Brand SVG icon library (replaces generic Font Awesome in lg-banner shields)
   – Tape-unspool hero scroll hint
   ========================================================================== */

/* --- 1. Site-wide smooth scroll (anchor links + JS scroll-to) ----------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;          /* offset for sticky header on anchor jumps */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- 2. Scroll-reveal — JS adds .is-revealed once the element is in view - */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger variants — apply to siblings inside a grid for cascade effect */
.reveal[data-stagger="1"] { transition-delay: .05s; }
.reveal[data-stagger="2"] { transition-delay: .10s; }
.reveal[data-stagger="3"] { transition-delay: .15s; }
.reveal[data-stagger="4"] { transition-delay: .20s; }
.reveal[data-stagger="5"] { transition-delay: .25s; }
.reveal[data-stagger="6"] { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- 3. Blur-up image placeholder ---------------------------------------- */
.img-blur-up {
  background-color: #e6ebf2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(0);
  transition: filter .35s ease;
}
.img-blur-up:not(.is-loaded) {
  filter: blur(14px);
}
/* When the real image fires its load event, JS adds .is-loaded */

/* --- 4. Sticky mobile action bar on product pages ----------------------- */
/* Hidden by default on desktop, force-visible on screens <=991px with !important
   so nothing else can collapse it. Highest z-index in the layout (9999). */
.mobile-action-bar { display: none; }
@media (max-width: 991px) {
  .mobile-action-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.4fr !important;
    gap: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: rgba(10, 31, 60, .97) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, .35);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .mobile-action-bar a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: .2px;
    transition: background .15s ease;
    border-right: 1px solid rgba(255, 255, 255, .08);
    min-height: 52px;
  }
  .mobile-action-bar a:last-child { border-right: 0; }
  .mobile-action-bar a:active { background: rgba(255, 255, 255, .08); }
  .mobile-action-bar a i { font-size: 15px; }
  .mobile-action-bar a.mab-call    { color: #ffffff !important; }
  .mobile-action-bar a.mab-wa      { color: #25d366 !important; }
  .mobile-action-bar a.mab-wa i    { color: #25d366; }
  .mobile-action-bar a.mab-quote   {
    background: linear-gradient(135deg, var(--pt-accent), #e89e00) !important;
    color: var(--pt-dark) !important;
  }
  .mobile-action-bar a.mab-quote i,
  .mobile-action-bar a.mab-quote .brand-icon { color: var(--pt-dark); }
  /* Lift the floating WhatsApp button so it doesn't sit on top of the action bar */
  .whatsapp-float { bottom: 80px !important; }
  /* Page content reserves space at the bottom for the sticky bar */
  body.has-mobile-action-bar { padding-bottom: 60px; }
}

/* --- 5. "Where it's used" visual application cards (PTK pages) ---------- */
.use-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.use-strip-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f6fa 0%, #e8edf5 100%);
  aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end;
  padding: 16px;
  border: 1px solid var(--pt-border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.use-strip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(10, 31, 60, .28);
}
.use-strip-card-visual {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--pt-primary);
  opacity: .25;
  font-size: 88px;
  transition: opacity .25s ease, transform .25s ease;
}
.use-strip-card:hover .use-strip-card-visual {
  opacity: .35;
  transform: scale(1.05);
}
.use-strip-card-label {
  position: relative; z-index: 1;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(4px);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--pt-dark);
  letter-spacing: .2px;
  box-shadow: 0 2px 6px rgba(10, 31, 60, .08);
}
@media (max-width: 767px) {
  .use-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .use-strip-card-visual { font-size: 64px; }
}
@media (max-width: 380px) {
  .use-strip { grid-template-columns: 1fr; }
}

/* --- 6. Custom brand-icon SVG container styling ------------------------- */
.brand-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.brand-icon svg {
  width: 100%; height: 100%;
  display: block;
}

/* --- 7. Tape-unspool hero scroll hint ----------------------------------- */
.hero-scroll-tape {
  position: absolute; left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 5;
  transition: color .2s ease, transform .2s ease;
}
.hero-scroll-tape:hover {
  color: #ffffff;
  transform: translateX(-50%) translateY(-2px);
}
.hero-scroll-tape svg { width: 36px; height: 56px; display: block; overflow: visible; }
.hero-scroll-tape-reel { fill: var(--pt-accent); }
.hero-scroll-tape-reel-inner { fill: var(--pt-dark); }
.hero-scroll-tape-strip {
  stroke: var(--pt-accent);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 30 6;
  animation: tape-unspool 2.2s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes tape-unspool {
  0%   { stroke-dashoffset: 0;   opacity: .9; }
  60%  { opacity: .9; }
  100% { stroke-dashoffset: -36; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-tape-strip { animation: none; }
}