/* =========================================================
   Sufat Chemicals — Design System
   Palette derived directly from the brand mark: a deep
   electric cobalt blue hexagon on white — carried through
   as navy darks, mid cobalt, and bright sky-blue accents.
   ========================================================= */

:root{
  --steel:      #081D30;
  --steel-2:    #0D2A44;
  --steel-3:    #123252;
  --platinum:   #EEF3F7;
  --platinum-2: #E1EAF1;
  --line:       #CFDCE5;
  --line-dark:  #24405F;
  --chrome:     #5FA0D6;
  --chrome-lt:  #A4CDEE;
  --copper:     #2E7BC4;
  --copper-lt:  #5FA0D6;
  --cobalt:     #0B4E90;
  --cobalt-lt:  #2E7BC4;
  --ink-text:   #0C1720;
  --muted-ink:  #4C5F6C;
  --muted-plat: #93A8B4;
  --paper-text: #DCE8EF;
  --warn:       #C0392B;
  --warn-lt:    #E0725F;

  --font-display: "Plus Jakarta Sans", "Manrope", "Arial", sans-serif;
  --font-body: "Plus Jakarta Sans", "Manrope", -apple-system, sans-serif;
  --font-mono: "Plus Jakarta Sans", "Manrope", sans-serif;

  --container: 1180px;
  --radius: 3px;
  --ease: cubic-bezier(.22,.85,.32,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--platinum);
  color: var(--ink-text);
  -webkit-font-smoothing: antialiased;
  /* No overflow-x here: setting it on body (in addition to html below) makes the
     UA compute body's overflow-y as "auto" per spec, turning body into its own
     scroll container and silently breaking position:sticky on the header. The
     horizontal-scroll guard on <html> below is sufficient. */
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.08; font-weight:800; text-transform: uppercase; letter-spacing:.01em; overflow-wrap: break-word; }
html{ overflow-x: hidden; max-width:100%; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
::selection{ background: var(--chrome); color: var(--steel); }

:focus-visible{ outline: 2px solid var(--cobalt); outline-offset: 3px; }

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; }
.eyebrow{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--cobalt); display:flex; align-items:center; gap:10px; margin-bottom: 16px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background: var(--cobalt); display:inline-block; }
section{ position: relative; }

/* ---------------- Preloader ---------------- */
#preloader{
  position: fixed; inset:0; z-index: 9999; background: var(--steel);
  display:flex; align-items:center; justify-content:center; flex-direction: column; gap:24px;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
  /* Failsafe: hide automatically even if JS never fires, so the page can never get stuck behind it */
  animation: preloaderFailsafe 0s linear 2.5s forwards;
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes preloaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.loader-ring{ width:72px; height:72px; position:relative; }
.loader-ring svg{ width:100%; height:100%; }
.loader-arc{
  transform-origin: 36px 36px; animation: spin 1.1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.loader-ion{ animation: pulse 1.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.loader-label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.2em; text-transform: uppercase; color: var(--chrome-lt); opacity:.9;
}
.loader-label .dots::after{ content:'.'; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots{ 0%{content:'.'} 25%{content:'..'} 50%{content:'...'} 75%{content:''} }
.loader-track{ width:180px; height:2px; background: var(--line-dark); position:relative; overflow:hidden; border-radius:2px; }
.loader-track::after{
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background: linear-gradient(90deg, transparent, var(--cobalt-lt), var(--chrome), transparent);
  animation: current-flow 1.3s ease-in-out infinite;
}
@keyframes current-flow{ 0%{ left:-40%; } 100%{ left:100%; } }

/* ---------------- Page transitions ----------------
   Body is visible by default (NOT gated behind JavaScript) so content —
   including the product grid — can never be stuck invisible if a script
   is slow, blocked, or errors. The fade-in below is a progressive-
   enhancement nicety only, applied by JS once the page is ready. */
body{ opacity:1; }
body.ready{ animation: pageIn .32s var(--ease) both; }
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body.page-exit{ animation: pageOut .16s var(--ease) both; }
@keyframes pageOut{ to{ opacity:0; } }

/* ---------------- Header ---------------- */
.topbar{ background: var(--steel); color: var(--muted-plat); font-family: var(--font-mono); font-size: 12px; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding: 8px 28px; flex-wrap: wrap; gap:6px; }
.topbar a:hover{ color: var(--chrome-lt); }
.topbar .tb-links{ display:flex; gap:20px; }

header.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(238,243,247,.97);
  border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 28px; position:relative; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark{ width:46px; height:46px; flex:none; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family: var(--font-display); font-size: 19px; letter-spacing:.02em; text-transform:uppercase; }
.brand-text span{ font-family: var(--font-mono); font-size: 10.5px; color: var(--cobalt); letter-spacing:.14em; text-transform: uppercase; }

.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-size: 13.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; position:relative; padding: 4px 0; color: var(--ink-text); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--cobalt); transition: width .3s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--cobalt); }

.nav-cta{ display:flex; align-items:center; gap:12px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding: 11px 22px; border-radius: var(--radius);
  font-size: 13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border: 1px solid transparent; transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-copper{ background: var(--copper); color: #fff; }
.btn-copper:hover{ background: var(--copper-lt); }
.btn-outline{ border-color: var(--ink-text); color: var(--ink-text); }
.btn-outline:hover{ border-color: var(--cobalt); color: var(--cobalt); }
.btn-ghost-light{ border-color: rgba(225,234,241,.4); color: var(--paper-text); }
.btn-ghost-light:hover{ border-color: var(--chrome-lt); color: var(--chrome-lt); }
.btn-cobalt{ background: var(--cobalt); color: #fff; }
.btn-cobalt:hover{ background: var(--cobalt-lt); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; flex:none; z-index:501; position:relative; }
.burger span{ width:24px; height:2px; background: var(--ink-text); display:block; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
body.nav-open{ overflow:hidden; }

/* ---------------- Hero ---------------- */
.hero{ background: var(--steel); color: var(--paper-text); position:relative; overflow:hidden; padding: 96px 0 122px; }
.hero-slider{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.3s var(--ease); will-change: opacity;
}
.hero-slide.active{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(6,17,28,.94) 0%, rgba(6,17,28,.85) 40%, rgba(6,17,28,.62) 72%, rgba(6,17,28,.5) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image: linear-gradient(rgba(95,160,214,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(95,160,214,.06) 1px, transparent 1px);
  background-size: 42px 42px; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: radial-gradient(circle at 82% 30%, rgba(11,78,144,.28), transparent 45%),
              radial-gradient(circle at 10% 85%, rgba(95,160,214,.16), transparent 40%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; max-width: 760px; }

/* Slider controls */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(8,23,38,.45); border:1px solid rgba(225,234,241,.35); color:#fff;
  cursor:pointer; backdrop-filter: blur(3px); transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.hero-arrow:hover{ background: rgba(8,23,38,.75); border-color: var(--chrome-lt); transform: translateY(-50%) scale(1.06); }
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }
.hero-dots{ position:absolute; left:0; right:0; bottom:58px; z-index:3; display:flex; justify-content:center; gap:9px; }
.hero-dots button{
  width:8px; height:8px; padding:0; border-radius:50%; border:none; background: rgba(255,255,255,.35);
  cursor:pointer; transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-dots button.active{ background:#fff; transform: scale(1.35); }
.stamp{
  display:inline-flex; align-items:center; gap:10px; border: 1px solid rgba(164,205,238,.4); color: var(--chrome-lt);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.15em; text-transform:uppercase; padding: 7px 14px; margin-bottom: 28px;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.stamp .dot{ width:6px; height:6px; border-radius:50%; background: var(--cobalt-lt); animation: pulse 1.6s var(--ease) infinite; }
.hero h1{ font-size: clamp(36px, 5.4vw, 60px); color:#fff; letter-spacing:.01em; }
.hero h1 em{ font-style:normal; color: var(--chrome-lt); }
.hero p.lead{ font-family: var(--font-body); text-transform:none; font-size: 17px; color: var(--muted-plat); max-width:560px; margin: 22px 0 34px; line-height:1.65; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.marquee-wrap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:22px;
  background: rgba(8,23,38,.78);
  backdrop-filter: blur(6px);
  border-top:1px solid rgba(164,205,238,.2);
  padding: 13px 0 13px 28px;
}
.marquee-label{ flex:none; font-family: var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--chrome-lt); margin:0; padding-right:22px; border-right:1px solid rgba(164,205,238,.25); }
.marquee{ flex:1; display:flex; white-space: nowrap; overflow:hidden; }
.marquee-track{ display:flex; gap:36px; animation: scroll 26s linear infinite; font-family: var(--font-mono); font-size:13px; color:#fff; padding-right:36px; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------------- Stats ---------------- */
.stats-band{ background: var(--platinum-2); border-bottom: 1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; padding: 46px 0; }
.stat{
  position:relative;
  text-align:center;
  padding: 30px 14px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--cobalt-lt), var(--cobalt));
  transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease);
}
.stat:hover{ transform: translateY(-6px); box-shadow: 0 20px 34px -18px rgba(11,78,144,.35); border-color: var(--cobalt-lt); }
.stat:hover::before{ transform: scaleX(1); }
.stat .num{ font-family: var(--font-display); font-size: clamp(30px,4vw,46px); color: var(--cobalt); font-weight:700; transition: color .3s var(--ease); }
.stat .lbl{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-ink); margin-top:6px; }

/* ---------------- Sections ---------------- */
.section{ padding: 94px 0; }
.section-tight{ padding: 68px 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(26px,3.4vw,40px); }
.section-head h2 em{ font-style:normal; color: var(--cobalt); }
.section-head p{ margin-top:16px; font-size:16px; color: var(--muted-ink); line-height:1.65; text-transform:none; font-family: var(--font-body); }
.on-dark{ background: var(--steel); color: var(--paper-text); }
.on-dark .section-head p{ color: var(--muted-plat); }
.on-dark .eyebrow{ color: var(--chrome-lt); }
.on-dark .eyebrow::before{ background: var(--chrome-lt); }
.on-dark h2{ color:#fff; }

/* ---------------- Pillars (On Time / On Budget / On Target) ---------------- */
.pillar-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.pillar{
  position:relative;
  background: var(--steel-2);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 40px 32px;
  overflow:hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.pillar::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background: linear-gradient(135deg, var(--chrome-lt), transparent 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .35s var(--ease);
}
.pillar::after{
  content:""; position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(95,160,214,.16), transparent 70%);
  opacity:0; transition: opacity .4s var(--ease);
}
.pillar:hover{ transform: translateY(-8px); background: var(--steel-3); border-color: var(--chrome); box-shadow: 0 24px 40px -18px rgba(0,0,0,.55); }
.pillar:hover::before{ opacity:1; }
.pillar:hover::after{ opacity:1; }
.pillar .pnum{ font-family: var(--font-mono); font-size:11px; color: var(--chrome-lt); letter-spacing:.1em; position:relative; transition: color .35s var(--ease); }
.pillar:hover .pnum{ color: var(--chrome); }
.pillar h3{ color:#fff; font-size:20px; margin: 16px 0 12px; position:relative; }
.pillar p{ font-size:14px; color: var(--muted-plat); line-height:1.65; text-transform:none; font-family: var(--font-body); position:relative; }

/* ---------------- Story / feature grid ---------------- */
.story-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; }
.story-grid h2{ margin-bottom: 22px; }
.story-grid p{ color: var(--muted-ink); line-height:1.8; font-size:15.5px; max-width: 54ch; text-transform:none; font-family: var(--font-body); }
.story-grid p + p{ margin-top: 18px; }
.feature-list{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-top:30px; }
.feature-item{ border-left: 2px solid var(--cobalt); padding-left:14px; }
.feature-item h3{ font-size:14.5px; margin-bottom:4px; text-transform:uppercase; }
.feature-item p{ font-size:13.5px; color: var(--muted-ink); text-transform:none; font-family: var(--font-body); }

.plant-art{ border: 1px solid var(--line); border-radius: var(--radius); background: var(--steel); aspect-ratio: 4/3; position:relative; overflow:hidden; }
.story-grid:has(.plant-art img){ align-items: center; }
.plant-art:has(img){ border-radius: 32px; box-shadow: 0 30px 60px -34px rgba(8,29,48,.55); }
.plant-art svg{ width:100%; height:100%; }
.plant-art img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--ease); }
.plant-art:hover img{ transform: scale(1.04); }
.plant-art:has(img)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(8,29,48,0) 45%, rgba(8,29,48,.65) 100%), linear-gradient(90deg, rgba(8,29,48,.28), transparent 35%);
}
.plant-art:has(img) .est-badge{ z-index:2; }
.est-badge{
  position:absolute; bottom:18px; right:18px; width:92px; height:92px;
  border: 1.5px solid var(--chrome-lt); color: var(--chrome-lt); display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
  background: rgba(10,18,26,.55); backdrop-filter: blur(2px);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.est-badge b{ display:block; font-family:var(--font-display); font-size:19px; color:#fff; }

/* ---------------- Industries / chemicals chips ---------------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  border: 1px solid var(--line); padding: 10px 18px; font-size: 13px; font-family: var(--font-mono); letter-spacing:.02em;
  transition: all .25s var(--ease); background: var(--platinum);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.chip:hover{ border-color: var(--cobalt); color: var(--cobalt); transform: translateY(-2px); }
.on-dark .chip{ background: var(--steel-2); border-color: var(--line-dark); color: var(--paper-text); }
.on-dark .chip:hover{ border-color: var(--chrome-lt); color: var(--chrome-lt); }

/* ---------------- Offer cards ---------------- */
.card-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.offer-card{
  position:relative;
  border: 1px solid var(--line); background: #fff; padding: 32px 26px; border-radius: 16px;
  overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.offer-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--cobalt-lt), var(--cobalt));
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease);
}
.offer-card::after{
  content:""; position:absolute; top:-40%; right:-30%; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(11,78,144,.08), transparent 70%);
  opacity:0; transition: opacity .4s var(--ease);
}
.offer-card:hover{ transform: translateY(-8px); border-color: var(--cobalt-lt); background: var(--platinum); box-shadow: 0 22px 36px -20px rgba(11,78,144,.28); }
.offer-card:hover::before{ transform: scaleX(1); }
.offer-card:hover::after{ opacity:1; }
.offer-card .ic{ width:36px; height:36px; margin-bottom:20px; color: var(--cobalt); position:relative; transition: transform .35s var(--ease); }
.offer-card:hover .ic{ transform: scale(1.08); }
.offer-card h3{ font-size:16.5px; margin-bottom:10px; position:relative; }
.offer-card p{ font-size:14px; color: var(--muted-ink); line-height:1.6; text-transform:none; font-family: var(--font-body); position:relative; }

/* ---------------- Timeline ---------------- */
.timeline{ position:relative; margin-top: 40px; }
.timeline::before{ content:""; position:absolute; left:120px; top:0; bottom:0; width:1px; background: var(--line); }
.tl-item{ display:grid; grid-template-columns:120px 1fr; gap:36px; padding: 30px 0; position:relative; }
.tl-item::after{ content:""; position:absolute; left:116px; top:36px; width:9px; height:9px; background: var(--cobalt); border: 3px solid var(--platinum); }
.tl-year{ font-family: var(--font-mono); color: var(--cobalt); font-weight:600; font-size:15px; }
.tl-body h3{ font-size: 17px; margin-bottom:8px; text-transform:uppercase; }
.tl-body p{ color: var(--muted-ink); font-size:14.5px; line-height:1.65; max-width:560px; text-transform:none; font-family: var(--font-body); }

/* ---------------- Why choose ---------------- */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); margin-top:10px; }
.why-item{ background: var(--platinum); padding: 34px 28px; }
.why-num{ font-family: var(--font-mono); color: var(--cobalt); font-size:13px; }
.why-item h3{ font-size:16px; margin: 14px 0 10px; }
.why-item p{ font-size:14px; color: var(--muted-ink); line-height:1.6; text-transform:none; font-family: var(--font-body); }

/* ---------------- Applications ---------------- */
.app-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.app-card{ background: var(--steel-2); border:1px solid var(--line-dark); padding: 28px; border-radius: var(--radius); }
.app-card h3{ color: var(--chrome-lt); font-size:16px; margin-bottom:10px; }
.app-card p{ color: var(--muted-plat); font-size:14px; line-height:1.65; text-transform:none; font-family: var(--font-body); }

/* ---------------- Partners ---------------- */
.partner-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--line); border:1px solid var(--line); }
.partner-cell{ background: var(--platinum); aspect-ratio: 3/2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding: 12px; text-align:center; transition: color .25s, background .25s; }
.partner-cell b{ font-family: var(--font-display); font-weight:600; font-size: 15px; color: var(--ink-text); text-transform:uppercase; }
.partner-cell span{ font-family: var(--font-mono); font-size:11px; color: var(--muted-ink); }
.partner-cell:hover{ background: var(--platinum-2); }
.partner-cell:hover b{ color: var(--cobalt); }

/* ---------------- Products ---------------- */
.search-shell{
  border: 1px solid var(--line); background: var(--platinum); border-radius: 20px; padding: 26px;
  margin-bottom: 34px; box-shadow: 0 22px 44px -32px rgba(10,18,26,.16);
  transition: box-shadow .3s var(--ease);
}
.search-shell:focus-within{ box-shadow: 0 26px 50px -28px rgba(10,18,26,.22); }
.search-row{ display:flex; gap:14px; flex-wrap:wrap; }
.search-input{
  flex:1; min-width:240px; padding: 14px 18px; font-family: var(--font-mono); font-size:14px;
  border: 1px solid var(--line); background:#fff; border-radius: 12px; color: var(--ink-text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-input:focus{ outline:none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(11,78,144,.1); }
.search-select{
  padding: 14px 18px; font-family: var(--font-mono); font-size: 13px; border:1px solid var(--line);
  background:#fff; border-radius: 12px; color: var(--ink-text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-select:focus{ outline:none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(11,78,144,.1); }
.pop-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pop-tag{
  font-family: var(--font-mono); font-size:11.5px; padding:7px 14px; border-radius: 20px;
  border:1px solid var(--line); color: var(--muted-ink); background:#fff;
  transition: all 0.7s var(--ease-soft);
}
.pop-tag:hover{ border-color: var(--cobalt); background: var(--cobalt); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(11,78,144,.5); }
button.pop-tag{ appearance:none; -webkit-appearance:none; cursor:pointer; line-height:normal; }

/* ── Product card thumbnail (catalogue grid) ────────────────── */
.prod-thumb{
  position:relative; width:100%; aspect-ratio:4/3; border-radius: 10px; overflow:hidden; margin-bottom:14px;
  background: repeating-linear-gradient(135deg, var(--platinum) 0 12px, var(--platinum-2) 12px 24px);
}
.prod-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-thumb .ph-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--muted-plat); }
.prod-thumb .ph-icon svg{ width:26px; height:26px; }
.prod-thumb.has-image .ph-icon{ display:none; }

.prod-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.prod-grid .prod-card{
  border:1px solid var(--line); background:#fff; border-radius: 20px; padding: 24px 24px 22px;
  position:relative; box-shadow: 0 18px 38px -30px rgba(10,18,26,.18);
  transition: transform 1.1s var(--ease-soft), border-color 1.1s var(--ease-soft);
  will-change: transform;
}
.prod-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper));
  transform: scaleX(0); transform-origin:left; transition: transform 1.1s var(--ease-soft);
}
.prod-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: 0 34px 60px -28px rgba(10,18,26,.28);
  opacity:0; transition: opacity 1.1s var(--ease-soft);
}
.prod-grid .prod-card:hover{ transform: translateY(-8px); border-color: rgba(11,78,144,.3); }
.prod-card:hover::before{ transform: scaleX(1); }
.prod-card:hover::after{ opacity:1; }
.prod-code{ font-family: var(--font-mono); font-size:10.5px; color: var(--cobalt); letter-spacing:.05em; }
.prod-name{ font-family: var(--font-display); font-size:16px; margin: 8px 0 4px; font-weight:600; text-transform:uppercase; }
.prod-name a{ color: var(--ink-text); transition: color .2s var(--ease); }
.prod-name a:hover{ color: var(--cobalt); }
.prod-cat{ font-size:11.5px; color: var(--cobalt); font-family: var(--font-mono); margin-bottom:6px; display:block; text-transform:none; }
.prod-syn{ display:block; font-size:11.5px; font-style:italic; color: var(--muted-ink); margin-bottom:8px; text-transform:none; font-family: var(--font-body); }
.prod-use{ font-size:13px; color: var(--muted-ink); line-height:1.5; margin-bottom:10px; text-transform:none; font-family: var(--font-body); }
.prod-specs{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.prod-specs.open{ max-height:220px; margin-bottom:10px; }
.spec-row{ font-size:12px; color: var(--muted-ink); line-height:1.6; padding:6px 0; border-top:1px dashed var(--line); text-transform:none; font-family: var(--font-body); }
.spec-row span{ display:block; font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--cobalt); margin-bottom:2px; }
.prod-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.prod-more{ background:none; border:none; padding:0; font-family: var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color: var(--cobalt); cursor:pointer; transition: transform .2s var(--ease); }
.prod-more:hover{ text-decoration: underline; }
.prod-add{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--ink-text); border-radius: 20px; padding:9px 16px; display:inline-flex; align-items:center; gap:6px; transition: all 0.7s var(--ease-soft); }
.prod-add:hover{ background: var(--ink-text); color: var(--platinum); transform: translateY(-2px); }
.prod-add.added{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; }
.prod-view{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--ink-text); border-radius: 20px; padding:9px 16px; display:inline-flex; align-items:center; gap:6px; transition: all 0.7s var(--ease-soft); color: var(--ink-text); }
.prod-view:hover{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(11,78,144,.5); }
.prod-count{ font-family: var(--font-mono); font-size:13px; color: var(--muted-ink); margin-bottom:20px; }
.no-results{ text-align:center; padding: 60px 20px; color: var(--muted-ink); font-family: var(--font-mono); font-size:14px; }

@media (max-width: 620px){
  .prod-grid .prod-card:hover{ transform: translateY(-4px); }
}

/* ---------------- Product Detail Page ---------------- */
.breadcrumb{ font-family: var(--font-mono); font-size:12px; letter-spacing:.04em; color: var(--muted-plat); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:22px; text-transform:uppercase; }
.breadcrumb a{ color: var(--muted-plat); transition: color .2s var(--ease); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span.sep{ opacity:.5; }
.breadcrumb span.current{ color: var(--chrome-lt); }

.pd-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items:start; }

.pd-visual-card{ border:1px solid var(--line); background:#fff; border-radius: var(--radius); padding: 40px 30px; text-align:center; position:relative; }
.pd-visual-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper)); }
.pd-icon{ width:84px; height:84px; margin:0 auto 22px; border-radius:50%; background: rgba(11,78,144,.08); display:flex; align-items:center; justify-content:center; color: var(--cobalt); }
.pd-icon svg{ width:38px; height:38px; }
.pd-code-big{ font-family: var(--font-mono); font-size:13px; letter-spacing:.1em; color: var(--cobalt); margin-bottom:8px; }
.pd-cat-badge{ display:inline-block; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-ink); border:1px solid var(--line); padding:6px 14px; border-radius:20px; }

.pd-cta-card{ margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.pd-cta-card .btn{ width:100%; justify-content:center; }
.pd-cta-note{ text-align:center; font-size:12px; color: var(--muted-ink); margin-top:4px; font-family: var(--font-body); text-transform:none; }

.pd-details h2{ font-size: clamp(22px,2.6vw,30px); margin-bottom:16px; }
.pd-overview-text{ font-size:15.5px; line-height:1.75; color: var(--muted-ink); text-transform:none; font-family: var(--font-body); margin-bottom:26px; }
.pd-synonyms{ margin-bottom:26px; }
.pd-synonyms h3, .pd-specs-table h3{ font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--cobalt); margin-bottom:10px; }
.pd-synonyms p{ font-size:14.5px; font-style:italic; color: var(--muted-ink); text-transform:none; font-family: var(--font-body); }

.pd-specs-table{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.spec-line{ display:flex; justify-content:space-between; gap:16px; padding:16px 20px; font-size:14px; border-bottom:1px solid var(--line); background:#fff; }
.spec-line:last-child{ border-bottom:none; }
.spec-line:nth-child(even){ background: var(--platinum); }
.spec-line span{ font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-ink); }
.spec-line b{ color: var(--ink-text); font-weight:600; text-align:right; max-width:60%; }

.pd-not-found{ text-align:center; padding: 80px 20px; }
.pd-not-found h2{ margin-bottom:14px; }
.pd-not-found p{ color: var(--muted-ink); margin-bottom:26px; text-transform:none; font-family: var(--font-body); }

/* ---------------- Contact / Enquiry ---------------- */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 60px; }
.info-block{ margin-bottom:28px; }
.info-block h3{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--cobalt); margin-bottom:10px; }
.info-block p, .info-block a{ font-size:15px; line-height:1.7; color: var(--muted-ink); display:block; text-transform:none; font-family: var(--font-body); }
.info-block a{ color: var(--ink-text); }
.info-block a:hover{ color: var(--cobalt); }
.on-dark .info-block h3{ color: var(--chrome-lt); }
.on-dark .info-block p, .on-dark .info-block a{ color: var(--paper-text); }
.on-dark .info-block a:hover{ color: var(--chrome-lt); }

/* Quick contact cards — floating row beneath the page hero */
.quick-contact-grid{ position:relative; z-index:5; display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:-64px; margin-bottom: 76px; }
.quick-contact-grid .quick-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius: 22px; padding: 30px 26px; box-shadow: 0 26px 46px -28px rgba(10,18,26,.30); transition: transform 1.1s var(--ease-soft), border-color 1.1s var(--ease-soft); will-change: transform; }
.quick-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper)); transform: scaleX(0); transform-origin:left; transition: transform 1.1s var(--ease-soft); }
.quick-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: 0 36px 60px -26px rgba(10,18,26,.4); opacity:0; transition: opacity 1.1s var(--ease-soft); }
.quick-contact-grid .quick-card:hover{ transform: translateY(-8px); border-color: rgba(11,78,144,.3); }
.quick-card:hover::before{ transform: scaleX(1); }
.quick-card:hover::after{ opacity:1; }
.quick-card .ic-wrap{ width:44px; height:44px; border-radius:50%; background: rgba(11,78,144,.08); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color: var(--cobalt); transition: transform 1.1s var(--ease-soft), background 1.1s var(--ease-soft); }
.quick-card:hover .ic-wrap{ transform: scale(1.12) rotate(-6deg); background: rgba(11,78,144,.16); }
.quick-card .ic-wrap svg{ width:20px; height:20px; }
.quick-card h2{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted-ink); margin-bottom:8px; }
.quick-card p, .quick-card a.qc-value{ font-size:15px; color: var(--ink-text); font-weight:700; display:block; text-transform:none; font-family: var(--font-body); line-height:1.45; }
.quick-card a.qc-value:hover{ color: var(--cobalt); }
.quick-card .qc-note{ display:block; margin-top:7px; font-size:12.5px; color: var(--muted-ink); font-weight:400; line-height:1.5; text-transform:none; font-family: var(--font-body); }

/* Trust list with checkmarks */
.trust-list{ margin: 26px 0 0; }
.trust-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color: var(--muted-ink); margin-bottom:10px; line-height:1.55; text-transform:none; font-family: var(--font-body); padding:10px 12px; border-radius:14px; transition: background 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
.trust-list li:hover{ background: var(--platinum); transform: translateX(4px); }
.trust-list svg{ width:20px; height:20px; padding:4px; border-radius:50%; background: var(--cobalt); color:#fff; flex-shrink:0; margin-top:1px; transition: transform 0.77s var(--ease-soft); }
.trust-list li:hover svg{ transform: scale(1.15); }

/* Business hours card */
.hours-card{ position:relative; background: var(--platinum); border:1px solid var(--line); border-radius: 20px; padding: 26px 28px; margin: 28px 0 0; transition: transform 1.1s var(--ease-soft); will-change: transform; }
.hours-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: 0 26px 46px -30px rgba(10,18,26,.25); opacity:0; transition: opacity 1.1s var(--ease-soft); }
.hours-card:hover{ transform: translateY(-4px); }
.hours-card:hover::after{ opacity:1; }
.hours-card h3{ font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--cobalt); margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.hours-card h3 svg{ width:16px; height:16px; }
.hours-row{ display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:9px 0; border-bottom:1px dashed var(--line); color: var(--muted-ink); }
.hours-row:last-child{ border-bottom:none; }
.hours-row b{ color: var(--ink-text); font-weight:600; }

/* Enquiry form card */
form.enquiry{ position:relative; overflow:hidden; background:#fff; color: var(--ink-text); padding: 42px 40px; border-radius: 26px; border:1px solid var(--line); box-shadow: 0 34px 64px -36px rgba(10,18,26,.30); }
form.enquiry::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper)); }
.enquiry-head{ display:flex; align-items:center; gap:15px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.enquiry-head .ic-wrap{ width:46px; height:46px; border-radius:50%; background: rgba(11,78,144,.08); display:flex; align-items:center; justify-content:center; color: var(--cobalt); flex-shrink:0; }
.enquiry-head .ic-wrap svg{ width:21px; height:21px; }
.enquiry-head h3{ margin:0; font-size:19px; }
.enquiry-head p{ margin:3px 0 0; font-size:13px; color: var(--muted-ink); font-family: var(--font-body); text-transform:none; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field label{ display:block; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:7px; color: var(--muted-ink); }
.field input, .field select, .field textarea{ width:100%; padding: 13px 16px; border:1px solid var(--line); border-radius: 12px; font-family: var(--font-body); font-size:14.5px; background: var(--platinum); color: var(--ink-text); transition: border-color 0.56s var(--ease-soft), background 0.56s var(--ease-soft), box-shadow 0.56s var(--ease-soft); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--cobalt); background:#fff; box-shadow: 0 0 0 4px rgba(11,78,144,.1); }
.field textarea{ resize: vertical; min-height:100px; }
.field-full{ grid-column: 1/-1; }
.form-success{ display:none; align-items:center; gap:12px; background: rgba(11,78,144,.1); border:1px solid var(--cobalt); padding:16px 18px; border-radius: 14px; font-size:14px; margin-top:18px; color: var(--cobalt); text-transform:none; font-family: var(--font-body); }
.form-success.show{ display:flex; }
.form-error{ display:none; align-items:center; gap:12px; background: rgba(192,57,43,.08); border:1px solid var(--warn); padding:16px 18px; border-radius: 14px; font-size:14px; margin-top:18px; color: var(--warn); text-transform:none; font-family: var(--font-body); }
.form-error.show{ display:flex; }
/* Honeypot spam-trap field: invisible to real visitors, present for bots */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.map-frame{ position:relative; border:1px solid var(--line); border-radius: 22px; overflow:hidden; height: 420px; margin-top: 40px; box-shadow: 0 30px 60px -38px rgba(10,18,26,.3); }
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(.4) contrast(1.05); }
.map-overlay-card{ position:absolute; left:24px; bottom:24px; z-index:4; background:#fff; border:1px solid var(--line); border-radius: 20px; padding: 24px 26px; max-width:290px; box-shadow: 0 22px 42px -22px rgba(10,18,26,.4); transition: transform 1.1s var(--ease-soft); will-change: transform; }
.map-overlay-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: 0 30px 52px -22px rgba(10,18,26,.48); opacity:0; transition: opacity 1.1s var(--ease-soft); }
.map-overlay-card:hover{ transform: translateY(-4px); }
.map-overlay-card:hover::after{ opacity:1; }
.map-overlay-card .eyebrow{ margin-bottom:10px; }
.map-overlay-card h3{ font-size:15.5px; text-transform:uppercase; margin-bottom:8px; }
.map-overlay-card p{ font-size:13px; color: var(--muted-ink); line-height:1.6; margin-bottom:16px; text-transform:none; font-family: var(--font-body); }
.map-overlay-card .btn{ font-size:12px; padding:11px 18px; width:100%; justify-content:center; border-radius: 14px; transition: transform 0.7s var(--ease-soft), box-shadow 0.7s var(--ease-soft); }
.map-overlay-card .btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(11,78,144,.5); }

/* ---------------- CTA ---------------- */
.cta-band{ background: linear-gradient(120deg, var(--cobalt), #163B60); color:#fff; text-align:center; padding: 70px 28px; border-radius: var(--radius); }
.cta-band h2{ color:#fff; font-size: clamp(24px,3.4vw,36px); margin-bottom:16px; }
.cta-band p{ color: rgba(255,255,255,.82); margin-bottom: 28px; text-transform:none; font-family: var(--font-body); font-size:15.5px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Footer ---------------- */
footer{ position:relative; background: var(--steel); color: var(--muted-plat); padding: 0 0 24px; overflow:hidden; }
footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper), var(--chrome), var(--cobalt)); }
footer::after{ content:""; position:absolute; top:-160px; right:-120px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(95,160,214,.10), transparent 70%); pointer-events:none; }

.footer-grid{ position:relative; display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 50px; padding: 68px 0 40px; border-bottom: 1px solid rgba(225,234,241,.12); }

.footer-brand{ padding-right:10px; }
.footer-logo{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-logo img{ width:40px; height:40px; border-radius:8px; background:#fff; padding:4px; }
.footer-logo strong{ font-family:var(--font-display); font-size:19px; color:#fff; text-transform:uppercase; letter-spacing:.02em; line-height:1.2; }
.footer-logo span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--chrome-lt); margin-top:2px; }
.footer-brand p{ font-size:14px; line-height:1.75; color: var(--muted-plat); max-width:320px; text-transform:none; font-family: var(--font-body); }

.footer-social{ display:flex; gap:10px; margin-top:24px; }
.footer-social a{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.06); border:1px solid rgba(225,234,241,.14); color: var(--chrome-lt); transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); }
.footer-social a:hover{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; transform: translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }

footer .footer-h{ font-weight:700; line-height:normal; margin-top:1.67em; font-family: var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--chrome-lt); margin-bottom:20px; position:relative; padding-bottom:12px; }
footer .footer-h::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background: var(--copper); }

footer li{ margin-bottom:12px; font-size:14px; }
footer .footer-links a{ display:inline-flex; align-items:center; gap:8px; color: var(--muted-plat); transition: color .2s var(--ease), transform .2s var(--ease); }
footer .footer-links a::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--chrome); flex-shrink:0; transition: background .2s var(--ease); }
footer .footer-links a:hover{ color:#fff; transform: translateX(3px); }
footer .footer-links a:hover::before{ background: var(--copper); }

footer .footer-contact li{ display:flex; align-items:flex-start; gap:10px; }
footer .footer-contact svg{ width:16px; height:16px; margin-top:2px; flex-shrink:0; color: var(--chrome); }
footer .footer-contact a, footer .footer-contact span{ color: var(--muted-plat); font-size:14px; line-height:1.5; }
footer .footer-contact a:hover{ color:#fff; }

.footer-cta{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-cta p{ font-size:13.5px; line-height:1.7; color: var(--muted-plat); text-transform:none; font-family:var(--font-body); margin-bottom:18px; }
.footer-cta .btn{ font-size:12.5px; padding:12px 22px; }

footer a:hover{ color: var(--chrome-lt); }

.footer-bottom{ position:relative; display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:14px; color: var(--muted-plat); }
.footer-bottom-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-bottom-left .dot{ width:3px; height:3px; border-radius:50%; background: var(--muted-plat); opacity:.6; }
.back-to-top{ display:inline-flex; align-items:center; gap:7px; color: var(--chrome-lt); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; transition: color .2s var(--ease), transform .2s var(--ease); }
.back-to-top svg{ width:14px; height:14px; transition: transform .2s var(--ease); }
.back-to-top:hover{ color:#fff; }
.back-to-top:hover svg{ transform: translateY(-2px); }

@media(max-width:720px){
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* ---------------- Reveal ---------------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); animation: revealFailsafe 0s linear 1.2s forwards; }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-fade{ opacity:0; transition: opacity .8s var(--ease); animation: revealFadeFailsafe 0s linear 1.2s forwards; }
.reveal-fade.in{ opacity:1; }
@keyframes revealFadeFailsafe{ to{ opacity:1; } }
@keyframes revealFailsafe{ to{ opacity:1; transform: translateY(0); } }

/* ---------------- WhatsApp float ---------------- */
.wa-float{ position: fixed; bottom: 26px; right: 26px; z-index: 400; width:56px; height:56px; border-radius:50%; background: #25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 28px -10px rgba(0,0,0,.4); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wa-float:hover{ transform: scale(1.08); box-shadow: 0 14px 30px -8px rgba(37,211,102,.55); }

/* ---------------- Page hero ---------------- */
.page-hero{ background: var(--steel); color:#fff; padding: 76px 0 94px; position:relative; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(95,160,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95,160,214,.05) 1px, transparent 1px);
  background-size: 42px 42px;
}
.page-hero--photo{
  background-color: var(--steel);
  background-image: linear-gradient(100deg, rgba(6,17,28,.94) 0%, rgba(8,29,48,.82) 45%, rgba(8,29,48,.6) 100%), url('../img/gallery/industrial-plant.jpg');
  background-size: cover; background-position: center 35%;
}
.page-hero--photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 85% 20%, rgba(11,78,144,.3), transparent 45%), linear-gradient(180deg, transparent 60%, rgba(8,29,48,.55));
}
.page-hero--photo .wrap, .page-hero--photo .marquee-wrap{ z-index:2; }

/* Contact banner: solid brand colour only, no grid-line pattern */
.page-hero--plain::before{ display:none; }

/* ---------------- Usability & accessibility polish ---------------- */
/* Anchor jumps (#applications, #about…) stop below the sticky header instead of hiding under it */
html{ scroll-padding-top: 96px; }
/* Slim brand-coloured scrollbar */
html{ scrollbar-width: thin; scrollbar-color: var(--cobalt-lt) var(--platinum-2); }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--platinum-2); }
::-webkit-scrollbar-thumb{ background: var(--cobalt-lt); border-radius: 10px; border: 2px solid var(--platinum-2); }
::-webkit-scrollbar-thumb:hover{ background: var(--cobalt); }

/* Whole product card is one big click target (title link stretches over the card);
   the Details / View buttons stay independently clickable above it */
.prod-grid .prod-card{ cursor: pointer; }
.prod-grid .prod-name a::after{ content:""; position:absolute; inset:0; z-index:1; border-radius: inherit; }
.prod-grid .prod-actions{ position:relative; z-index:2; }

/* Clear, calm inline validation once the user has interacted with a field */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid{
  border-color: var(--warn); box-shadow: 0 0 0 4px rgba(192,57,43,.1);
}
.field input:user-valid:not(:placeholder-shown){ border-color: rgba(11,78,144,.45); }

/* Keyboard focus is always clearly visible, on light and dark surfaces */
.on-dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible, footer :focus-visible{ outline-color: var(--chrome-lt); }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline-offset: 4px; border-radius: 4px; }

.page-hero--products{
  background-color: var(--steel);
  padding: 92px 0 108px;
}
.page-hero--products .wrap{ position:relative; z-index:2; }
.page-hero--products::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(8,29,48,.86) 0%, rgba(8,29,48,.66) 55%, rgba(8,29,48,.5) 100%), url('../img/gallery/plating-tanks.jpg') center 40% / cover no-repeat;
}
.page-hero--products h1{ max-width: 620px; }
.page-hero h1{ font-size: clamp(30px,4.4vw,50px); color:#fff; max-width:720px; position:relative; }
.page-hero p{ margin-top:16px; color: var(--muted-plat); max-width:600px; font-size:16px; line-height:1.6; text-transform:none; font-family: var(--font-body); position:relative; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .burger{ display:flex; }
  .nav-links{
    position:absolute;
    top: calc(100% + 1px);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background: var(--platinum);
    border:1px solid var(--line);
    border-top:none;
    box-shadow: 0 20px 34px -20px rgba(10,18,26,.3);
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), visibility 0s linear .35s;
    z-index:500;
  }
  .nav-links.open-mobile{ max-height:70vh; overflow-y:auto; opacity:1; visibility:visible; transition: max-height .35s var(--ease), opacity .25s var(--ease); }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding:16px 24px; border-bottom:1px solid var(--line); font-size:14.5px; }
  .nav-links a::after{ display:none; }
  .nav-links a.active{ background: var(--platinum-2); }
  .nav-cta{ flex:none; }
  .story-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .pillar-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:12px; }
  .stat{ padding: 20px 10px; }
  .why-grid{ grid-template-columns:1fr; }
  .partner-grid{ grid-template-columns: repeat(2,1fr); }
  .app-grid{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .quick-contact-grid{ grid-template-columns: repeat(2,1fr); margin-top:-40px; }
  .map-overlay-card{ position:static; max-width:none; margin-top:18px; box-shadow:none; }
  .pd-grid{ grid-template-columns:1fr; gap:36px; }
  .timeline::before{ left:0; }
  .tl-item{ grid-template-columns: 1fr; gap:8px; }
  .tl-item::after{ display:none; }
  .hero-arrow{ width:38px; height:38px; }
  .hero-arrow.prev{ left:12px; }
  .hero-arrow.next{ right:12px; }
  .topbar{ display:none; }
}
@media (max-width: 620px){
  .nav{ padding: 12px 18px; }
  .nav-cta .btn{ display:none; }
  .brand-text span{ display:none; }
  .card-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .partner-grid{ grid-template-columns: 1fr; }
  .prod-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .quick-contact-grid{ grid-template-columns:1fr; margin-top:24px; margin-bottom:50px; }
  form.enquiry{ padding: 30px 22px; }
  .hero-arrow{ display:none; }
  .marquee-wrap{ padding-left:18px; }
  .section{ padding: 64px 0; }
  .section-tight{ padding: 48px 0; }
  .wrap{ padding: 0 18px; }
}

@media (max-width: 480px){
  .marquee-label{ display:none; }
  .marquee-wrap{ padding-left:0; justify-content:center; }
  .marquee-track{ padding-left:18px; }
}

@media (max-width: 420px){
  .hero{ padding: 76px 0 104px; }
  .hero h1{ font-size: 30px; overflow-wrap: break-word; }
  .page-hero h1{ font-size: 26px; overflow-wrap: break-word; }
  .stamp{ font-size:10px; padding:6px 10px; }
  .stat .num{ font-size: 26px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .prod-actions{ flex-direction:column; align-items:stretch; }
  .prod-add, .prod-more{ text-align:center; }
  .pillar{ padding: 30px 22px; }
  .why-item{ padding: 26px 20px; }
  .cta-actions .btn{ width:100%; justify-content:center; }
  .cta-band{ padding: 50px 20px; }
  .brand-text strong{ font-size:16px; }
  .brand-mark{ width:38px; height:38px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior:auto !important; }
}

/* ── Staggered scroll-reveal for grids ────────────────────────
   Add .reveal-stagger to a grid/flex container and .reveal to
   each direct child; the children still fade up via the existing
   .reveal/.reveal.in mechanism (main.js's IntersectionObserver
   already picks up any .reveal element), this just staggers
   *when* each child's transition starts so a row cascades in
   instead of popping in all at once. ────────────────────────── */
.reveal-stagger > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger > *:nth-child(6){ transition-delay:.55s; }
.reveal-stagger > *:nth-child(7){ transition-delay:.65s; }
.reveal-stagger > *:nth-child(8){ transition-delay:.75s; }

/* ── Eyebrow underline draws in once its section-head reveals ── */
.section-head .eyebrow::before{ width:0; transition: width .6s var(--ease) .25s; }
.section-head.in .eyebrow::before{ width:26px; }

/* =====================================================================
   Product Detail Page — soft-edge, hover-rich card redesign
   Scoped to body.product-detail-page so other pages are untouched.
   ===================================================================== */
body.product-detail-page .breadcrumb a{ padding: 4px 9px; border-radius: 8px; transition: background 0.49s var(--ease-soft), color 0.49s var(--ease-soft); }
body.product-detail-page .breadcrumb a:hover{ background: rgba(255,255,255,.09); }

body.product-detail-page .pd-visual-card{
  border-radius: 22px;
  box-shadow: 0 26px 50px -30px rgba(10,18,26,.22);
  transition: transform 1.1s var(--ease-soft), border-color 1.1s var(--ease-soft);
  will-change: transform;
}
body.product-detail-page .pd-visual-card::before{ border-radius: 22px 22px 0 0; }
body.product-detail-page .pd-visual-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: 0 44px 74px -32px rgba(10,18,26,.34);
  opacity:0; transition: opacity 1.1s var(--ease-soft);
}
body.product-detail-page .pd-visual-card:hover{
  transform: translateY(-9px);
  border-color: rgba(11,78,144,.35);
}
body.product-detail-page .pd-visual-card:hover::after{ opacity:1; }
body.product-detail-page .pd-icon{ transition: transform 1.1s var(--ease-soft), background 1.1s var(--ease-soft); }
body.product-detail-page .pd-visual-card:hover .pd-icon{ transform: scale(1.12) rotate(-6deg); background: rgba(11,78,144,.15); }
body.product-detail-page .pd-cat-badge{ transition: background .9s var(--ease-soft), color .9s var(--ease-soft), border-color .9s var(--ease-soft); }
body.product-detail-page .pd-visual-card:hover .pd-cat-badge{ background: var(--cobalt); border-color: var(--cobalt); color:#fff; }

body.product-detail-page .pd-cta-card .btn{
  border-radius: 14px;
  transition: transform 0.77s var(--ease-soft), box-shadow 0.77s var(--ease-soft);
}
body.product-detail-page .pd-cta-card .btn:hover{ transform: translateY(-3px); box-shadow: 0 20px 34px -16px rgba(11,78,144,.45); }

body.product-detail-page .pd-synonyms{
  background: var(--platinum);
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  transition: box-shadow 0.77s var(--ease-soft), border-color 0.77s var(--ease-soft);
}
body.product-detail-page .pd-synonyms:hover{ box-shadow: 0 18px 32px -24px rgba(10,18,26,.25); border-color: rgba(11,78,144,.25); }

body.product-detail-page .pd-specs-table{ border:none; background:none; display:flex; flex-direction:column; gap:12px; overflow:visible; }
body.product-detail-page .spec-line{
  border: 1px solid var(--line);
  border-radius: 14px;
  background:#fff;
  transition: transform 0.77s var(--ease-soft), box-shadow 0.77s var(--ease-soft), border-color 0.77s var(--ease-soft), background 0.77s var(--ease-soft);
}
body.product-detail-page .spec-line:nth-child(even){ background:#fff; }
body.product-detail-page .spec-line:hover{
  transform: translateX(6px);
  box-shadow: 0 16px 30px -22px rgba(10,18,26,.28);
  border-color: rgba(11,78,144,.32);
  background: var(--platinum);
}

body.product-detail-page #pdRelatedGrid .prod-card{
  border-radius: 20px;
  border-left: 1px solid var(--line);
  box-shadow: 0 20px 40px -28px rgba(10,18,26,.2);
  transition: transform 1.1s var(--ease-soft), border-color 1.1s var(--ease-soft);
  position: relative;
}
body.product-detail-page #pdRelatedGrid .prod-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper));
  transform: scaleX(0); transform-origin:left; transition: transform 1.1s var(--ease-soft);
}
body.product-detail-page #pdRelatedGrid .prod-card::after{ box-shadow: 0 34px 60px -28px rgba(10,18,26,.32); transition: opacity 1.1s var(--ease-soft); }
body.product-detail-page #pdRelatedGrid .prod-card:hover{ transform: translateY(-9px); border-color: var(--cobalt); }
body.product-detail-page #pdRelatedGrid .prod-card:hover::before{ transform: scaleX(1); }
body.product-detail-page #pdRelatedGrid .prod-card:hover::after{ opacity:1; }
body.product-detail-page #pdRelatedGrid .prod-view{ border-radius: 20px; transition: all 0.9s var(--ease-soft); }
body.product-detail-page #pdRelatedGrid .prod-view:hover{ transform: translateX(2px); }

body.product-detail-page .cta-band{ border-radius: 28px; position:relative; overflow:hidden; }
body.product-detail-page .cta-band::after{
  content:""; position:absolute; top:-110px; right:-100px; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events:none;
}
body.product-detail-page .cta-band .btn{ border-radius: 14px; transition: transform 0.77s var(--ease-soft), box-shadow 0.77s var(--ease-soft); }
body.product-detail-page .cta-band .btn:hover{ transform: translateY(-3px); box-shadow: 0 18px 32px -14px rgba(0,0,0,.35); }

@media (max-width: 620px){
  body.product-detail-page .spec-line:hover{ transform: none; }
  body.product-detail-page #pdRelatedGrid .prod-card:hover{ transform: translateY(-4px); }
}
body.product-detail-page .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}
 
body.product-detail-page .feat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.77s var(--ease-soft),
              border-color 0.77s var(--ease-soft),
              box-shadow 0.77s var(--ease-soft);
  will-change: transform;
}
 
body.product-detail-page .feat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--cobalt), var(--chrome));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.77s var(--ease-soft);
}
 
body.product-detail-page .feat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11, 78, 144, .3);
  box-shadow: 0 22px 38px -22px rgba(10, 18, 26, .28);
}
 
body.product-detail-page .feat-card:hover::before {
  transform: scaleX(1);
}
 
body.product-detail-page .feat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(11, 78, 144, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cobalt);
  margin-bottom: 16px;
  transition: transform 0.77s var(--ease-soft), background 0.77s var(--ease-soft);
}
 
body.product-detail-page .feat-card:hover .feat-icon {
  transform: scale(1.12) rotate(-6deg);
  background: rgba(11, 78, 144, .15);
}
 
body.product-detail-page .feat-icon svg {
  width: 20px;
  height: 20px;
}
 
body.product-detail-page .feat-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-text);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
 
body.product-detail-page .feat-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted-ink);
  line-height: 1.55;
  text-transform: none;
  margin: 0;
}
 
/* ── Applications grid ───────────────────────────────────────── */
body.product-detail-page .apps-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 10px;
}
 
body.product-detail-page .app-card-detail {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.77s var(--ease-soft),
              border-color 0.77s var(--ease-soft),
              box-shadow 0.77s var(--ease-soft);
  will-change: transform;
}
 
body.product-detail-page .app-card-detail:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 78, 144, .3);
  box-shadow: 0 20px 36px -22px rgba(10, 18, 26, .28);
}
 
body.product-detail-page .app-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
 
body.product-detail-page .app-img-placeholder {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, var(--platinum-2), var(--platinum));
  display: flex;
  align-items: center;
  justify-content: center;
}
 
body.product-detail-page .app-img-placeholder::after {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(11, 78, 144, .1);
}
 
body.product-detail-page .app-card-detail .app-body {
  padding: 18px 20px 20px;
}
 
body.product-detail-page .app-card-detail .app-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-text);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
 
body.product-detail-page .app-card-detail .app-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted-ink);
  line-height: 1.6;
  text-transform: none;
  margin: 0;
}
 
/* ── Technical specs table (detail page override) ────────────── */
/* Reuses existing .spec-line but displayed in the new section */
body.product-detail-page #pdSpecsTable {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  background: none;
  overflow: visible;
}
 
body.product-detail-page #pdSpecsTable .spec-line {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: transform 0.7s var(--ease-soft),
              box-shadow 0.7s var(--ease-soft),
              border-color 0.7s var(--ease-soft),
              background 0.7s var(--ease-soft);
}
 
body.product-detail-page #pdSpecsTable .spec-line:nth-child(even) {
  background: #fff; /* override stripe since we now have spacing */
}
 
body.product-detail-page #pdSpecsTable .spec-line:hover {
  transform: translateX(6px);
  box-shadow: 0 14px 28px -20px rgba(10, 18, 26, .25);
  border-color: rgba(11, 78, 144, .3);
  background: var(--platinum);
}
 
/* ── Packaging & storage two-column layout ───────────────────── */
body.product-detail-page .pkg-stor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 10px;
}
 
body.product-detail-page .info-box-detail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  transition: transform 0.77s var(--ease-soft),
              border-color 0.77s var(--ease-soft),
              box-shadow 0.77s var(--ease-soft);
  will-change: transform;
}
 
body.product-detail-page .info-box-detail:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 78, 144, .28);
  box-shadow: 0 18px 34px -22px rgba(10, 18, 26, .22);
}
 
body.product-detail-page .info-box-detail h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
 
body.product-detail-page .info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
 
body.product-detail-page .info-list li {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted-ink);
  line-height: 1.55;
  text-transform: none;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: color 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
 
body.product-detail-page .info-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
 
body.product-detail-page .info-list li:hover {
  color: var(--ink-text);
  transform: translateX(3px);
}
 
body.product-detail-page .info-list li::before {
  content: "›";
  color: var(--cobalt);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.4s var(--ease-soft);
}
 
body.product-detail-page .info-list li:hover::before {
  transform: translateX(2px);
}
 
/* ── FAQs ────────────────────────────────────────────────────── */
body.product-detail-page .faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
 
body.product-detail-page .faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.6s var(--ease-soft),
              box-shadow 0.6s var(--ease-soft);
}
 
body.product-detail-page .faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: rgba(11, 78, 144, .35);
  box-shadow: 0 14px 28px -18px rgba(10, 18, 26, .22);
}
 
body.product-detail-page .faq-q {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-text);
  background: var(--platinum);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-transform: none;
  transition: background 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}
 
body.product-detail-page .faq-q:hover {
  background: var(--platinum-2);
  color: var(--cobalt);
}
 
body.product-detail-page .faq-q[aria-expanded="true"] {
  background: rgba(11, 78, 144, .06);
  color: var(--cobalt);
}
 
body.product-detail-page .faq-chevron {
  flex-shrink: 0;
  color: var(--cobalt);
  transition: transform 0.4s var(--ease-soft);
}
 
body.product-detail-page .faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}
 
body.product-detail-page .faq-a {
  padding: 18px 22px 20px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--muted-ink);
  line-height: 1.7;
  text-transform: none;
  border-top: 1px solid var(--line);
}
 
body.product-detail-page .faq-a[hidden] {
  display: none;
}
 
/* ── Responsive overrides for new sections ───────────────────── */
@media (max-width: 980px) {
  body.product-detail-page .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.product-detail-page .pkg-stor-grid {
    grid-template-columns: 1fr;
  }
}
 
@media (max-width: 620px) {
  body.product-detail-page .features-grid {
    grid-template-columns: 1fr;
  }
  body.product-detail-page .apps-detail-grid {
    grid-template-columns: 1fr;
  }
  body.product-detail-page .feat-card:hover,
  body.product-detail-page .app-card-detail:hover,
  body.product-detail-page .info-box-detail:hover {
    transform: none;
  }
  body.product-detail-page #pdSpecsTable .spec-line:hover {
    transform: none;
  }
  body.product-detail-page .faq-q {
    font-size: 14px;
    padding: 15px 16px;
  }
  body.product-detail-page .faq-a {
    padding: 14px 16px 16px;
    font-size: 13.5px;
  }
}
 
/* =========================================================
   Product Detail Page v2 — datasheet layout + sidebar nav
   ========================================================= */

/* ── Accessibility: skip link ─────────────────────────────── */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  background: var(--cobalt); color:#fff; padding:14px 22px; border-radius: 0 0 10px 0;
  font-family: var(--font-mono); font-size:13px; letter-spacing:.04em; z-index: 10000;
}
.skip-link:focus{ left:0; top:0; width:auto; height:auto; overflow:visible; }

/* ── Visually-hidden utility (screen-reader-only text/labels) ── */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Hero top row (stamp + datasheet code) ────────────────── */
.pd-hero .pd-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.pd-hero .stamp{ margin-bottom:0; }
.pd-datasheet-tag{
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted-plat); border:1px solid rgba(164,205,238,.35); border-radius: 20px; padding:7px 14px;
}
.pd-formula{
  font-family: var(--font-mono); font-size:15px; color: var(--chrome-lt); text-transform:none;
  margin: 10px 0 0; letter-spacing:.02em;
}
.pd-hero p.pd-intro{
  font-family: var(--font-body); text-transform:none; font-size:16.5px; color: var(--muted-plat);
  max-width:680px; margin: 18px 0 0; line-height:1.65;
}
.pd-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; list-style:none; padding:0; }
.pd-tags li{
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--chrome-lt); border:1px solid rgba(164,205,238,.35); border-radius:20px; padding:7px 14px;
}
.pd-tags li.is-primary{ background: rgba(11,78,144,.35); color:#fff; border-color: var(--cobalt-lt); }

/* ── Image gallery ─────────────────────────────────────────── */
.pd-gallery{
  display:grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap:16px;
  margin: -8px 0 0; min-height: 360px;
}
.pd-gallery-main{ grid-row: 1 / 3; margin:0; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; }
.pd-gallery-sub{ margin:0; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; }
.pd-gallery figure{ position:relative; }
.pd-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-img-placeholder{
  width:100%; height:100%; min-height: 170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background: repeating-linear-gradient(135deg, var(--platinum) 0 14px, var(--platinum-2) 14px 28px);
  color: var(--muted-ink); text-align:center; padding: 20px;
}
.pd-gallery-main .pd-img-placeholder{ min-height: 360px; }
.pd-img-placeholder svg{ width:34px; height:34px; opacity:.6; }
.pd-img-placeholder span{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }

/* ── Two-column layout: sidebar + content ─────────────────── */
.pd-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 52px; align-items:start; }
.pd-sidebar{ position: sticky; top: 96px; display:flex; flex-direction:column; gap:22px; }
.pd-toc{ border:1px solid var(--line); border-radius: var(--radius); background:#fff; padding: 20px 18px; }
.pd-toc-label{
  display:block; font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--cobalt); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.pd-toc ul{ display:flex; flex-direction:column; gap:2px; }
.pd-toc a{
  display:block; font-family: var(--font-body); font-size:13.5px; font-weight:600; color: var(--muted-ink);
  padding: 9px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; text-transform:none;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.pd-toc a:hover{ color: var(--cobalt); background: var(--platinum); }
.pd-toc a.is-active{ color: var(--cobalt); border-left-color: var(--cobalt); background: var(--platinum); font-weight:700; }
.pd-sidebar-cta{
  border:1px solid var(--line); border-radius: var(--radius); background:#fff; padding: 20px 18px;
  display:flex; flex-direction:column; gap:12px;
}
.pd-sidebar-cta .btn{ width:100%; justify-content:center; }
.pd-sidebar-cta .pd-cta-note{ text-align:center; font-size:12px; color: var(--muted-ink); font-family: var(--font-body); text-transform:none; margin:0; }

/* ── Product register / quick facts strip ─────────────────── */
.pd-register{
  display:grid; grid-template-columns: repeat(4, 1fr); border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; margin-bottom: 56px; background:#fff;
}
.pd-register-item{ padding: 18px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.pd-register-item:nth-child(4n){ border-right:none; }
.pd-register-item span{
  display:block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--cobalt); margin-bottom:6px;
}
.pd-register-item b{ font-family: var(--font-display); font-size:14.5px; color: var(--ink-text); font-weight:700; line-height:1.3; display:block; }

/* ── Content blocks ─────────────────────────────────────────── */
.pd-content-col{ min-width:0; }
.pd-block{ padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.pd-block:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.pd-block-h{ font-size: clamp(22px,2.6vw,30px); margin: 6px 0 16px; }
.pd-block-sub{ font-size:14px; color: var(--muted-ink); text-transform:none; font-family: var(--font-body); margin-bottom:26px; max-width:64ch; line-height:1.6; }
#pd-order.pd-block{ border-bottom:none; }
.pd-sds-note{ margin-top:16px; font-size:12.5px; color: var(--muted-ink); text-transform:none; font-family: var(--font-body); }
.pd-sds-note a{ color: var(--cobalt); }
.pd-sds-note a:hover{ text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px){
  .pd-layout{ grid-template-columns: 1fr; }
  .pd-sidebar{ position: static; flex-direction: row; flex-wrap: wrap; }
  .pd-toc{ flex:1 1 260px; }
  .pd-sidebar-cta{ flex:1 1 220px; }
  .pd-toc ul{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .pd-toc a{ border-left:none; border-bottom:2px solid transparent; padding:6px 4px; }
  .pd-toc a.is-active{ border-left-color:transparent; border-bottom-color: var(--cobalt); background:none; }
}
@media (max-width: 780px){
  .pd-gallery{ grid-template-columns: 1fr 1fr; min-height:auto; }
  .pd-gallery-main{ grid-column: 1 / 3; grid-row: 1; }
  .pd-gallery-main .pd-img-placeholder{ min-height: 220px; }
  .pd-register{ grid-template-columns: repeat(2, 1fr); }
  .pd-register-item:nth-child(4n){ border-right:1px solid var(--line); }
  .pd-register-item:nth-child(2n){ border-right:none; }
}
@media (max-width: 620px){
  .pd-hero .pd-hero-top{ flex-direction:column; align-items:flex-start; gap:12px; }
  .pd-gallery{ grid-template-columns: 1fr; }
  .pd-gallery-main{ grid-column:1; grid-row:auto; }
  .pd-register{ grid-template-columns: 1fr 1fr; }
  .pd-block{ padding-bottom:44px; margin-bottom:44px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Product Detail Page v2 — matches the provided mockup
   (navy + green palette, scoped to body.pd-v2 only so the
   rest of the site keeps its existing blue/copper theme)
   ========================================================= */
body.pd-v2{
  --pd2-navy:        #0B1A2A;
  --pd2-navy-2:       #10263D;
  --pd2-green:        #16A34A;
  --pd2-green-dark:   #0F7C39;
  --pd2-green-bright: #4ADE80;
  --pd2-bg-alt:       #F4F7FA;
  --pd2-border:       #E2E8EE;
  --pd2-text:         #0B1A2A;
  --pd2-muted:        #5B6B7C;
}

/* Breadcrumb bar */
body.pd-v2 .pd-crumb-bar{ background:#fff; border-bottom:1px solid var(--pd2-border); padding:14px 0; }
body.pd-v2 .pd-breadcrumb{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-family:var(--font-body); font-size:13px; text-transform:none; color:var(--pd2-muted); }
body.pd-v2 .pd-breadcrumb a{ color:var(--pd2-muted); transition:color .2s; }
body.pd-v2 .pd-breadcrumb a:hover{ color:var(--pd2-green); }
body.pd-v2 .pd-breadcrumb .current{ color:var(--pd2-text); font-weight:700; }
body.pd-v2 .pd-breadcrumb .sep{ opacity:.5; }

/* Hero */
body.pd-v2 .pd-hero2{ background:linear-gradient(160deg,var(--pd2-navy),var(--pd2-navy-2)); color:#fff; padding:64px 0; position:relative; overflow:hidden; }
body.pd-v2 .pd-hero2-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
body.pd-v2 .pd-hero2-copy h1{ font-size:clamp(32px,4vw,46px); color:#fff; margin:18px 0 6px; }
body.pd-v2 .pd-stamp2{
  display:inline-flex; align-items:center; gap:8px; background:rgba(22,163,74,.15); border:1px solid rgba(22,163,74,.4);
  color:var(--pd2-green-bright); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:20px;
}
body.pd-v2 .pd-stamp2 .dot{ width:6px; height:6px; border-radius:50%; background:var(--pd2-green-bright); }
body.pd-v2 .pd-formula2{ font-family:var(--font-mono); font-size:17px; color:var(--pd2-green-bright); margin:0 0 16px; text-transform:none; }
body.pd-v2 .pd-intro2{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.75); text-transform:none; font-family:var(--font-body); max-width:560px; margin-bottom:24px; }
body.pd-v2 .pd-tags2{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin-bottom:30px; }
body.pd-v2 .pd-tags2 li{ font-family:var(--font-mono); font-size:11.5px; padding:7px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85); text-transform:none; }
body.pd-v2 .pd-hero2-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
body.pd-v2 .pd-reply-note{ font-size:13px; color:rgba(255,255,255,.55); text-transform:none; font-family:var(--font-body); margin:0; }

/* Buttons (page-scoped) */
body.pd-v2 .btn-pd-green{
  display:inline-flex; align-items:center; gap:8px; background:var(--pd2-green); color:#fff; padding:13px 24px;
  border-radius:8px; font-weight:700; font-size:14px; font-family:var(--font-body); transition:background .2s, transform .2s;
}
body.pd-v2 .btn-pd-green:hover{ background:var(--pd2-green-dark); transform:translateY(-2px); }
body.pd-v2 .btn-pd-outline{
  display:inline-flex; align-items:center; padding:13px 24px; border-radius:8px; border:1px solid rgba(255,255,255,.35);
  color:#fff; font-weight:700; font-size:14px; font-family:var(--font-body); transition:border-color .2s, background .2s;
}
body.pd-v2 .btn-pd-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
body.pd-v2 .btn-pd-outline-light{
  display:inline-flex; align-items:center; padding:13px 24px; border-radius:8px; border:1px solid rgba(255,255,255,.35);
  color:#fff; font-weight:700; font-size:14px; font-family:var(--font-body); transition:border-color .2s, background .2s;
}
body.pd-v2 .btn-pd-outline-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

/* Product image slider (mirrors the homepage hero slider pattern, scaled down) */
body.pd-v2 .pd-hero2-media{ position:relative; }
body.pd-v2 .pd-slider{ position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:#0F2338; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
body.pd-v2 .pd-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s ease; }
body.pd-v2 .pd-slide.active{ opacity:1; }
body.pd-v2 .pd-slide-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, #16283C 0 14px, #122236 14px 28px); color:rgba(255,255,255,.35);
}
body.pd-v2 .pd-slide.has-image .pd-slide-placeholder{ display:none; }
body.pd-v2 .pd-slide-placeholder svg{ width:44px; height:44px; }
body.pd-v2 .pd-slider-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; justify-content:center; gap:8px; z-index:3; padding:7px 12px; border-radius:20px; background:rgba(8,29,48,.55); backdrop-filter:blur(6px); }
body.pd-v2 .pd-slider-dots:empty, body.pd-v2 .pd-slider-dots:has(button:only-child){ display:none; }
body.pd-v2 .pd-slider-dots button{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:rgba(255,255,255,.4); cursor:pointer; transition:all .25s; }
body.pd-v2 .pd-slider-dots button.active{ background:#fff; transform:scale(1.3); }

/* Premium photo frame: light studio backdrop, soft glow, zoom-on-hover */
body.pd-v2 .pd-slider{ background:#0F2338; border-color:rgba(164,205,238,.35); box-shadow:0 40px 80px -36px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05), 0 0 70px -20px rgba(46,123,196,.35); }
body.pd-v2 .pd-slide{ transition:opacity 1.1s ease, transform 6s ease-out; transform:scale(1); }
body.pd-v2 .pd-slide.active{ transform:scale(1.045); }
body.pd-v2 .pd-slider.is-zoomable{ cursor:zoom-in; }
body.pd-v2 .pd-slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0; color:#fff; cursor:pointer;
  background:rgba(8,29,48,.55); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease), background .25s, transform .25s var(--ease);
}
body.pd-v2 .pd-slider-arrow.prev{ left:12px; }
body.pd-v2 .pd-slider-arrow.next{ right:12px; }
body.pd-v2 .pd-slider:hover .pd-slider-arrow, body.pd-v2 .pd-slider:focus-within .pd-slider-arrow{ opacity:1; }
body.pd-v2 .pd-slider-arrow:hover{ background:var(--cobalt); transform:translateY(-50%) scale(1.08); }
@media (hover:none){ body.pd-v2 .pd-slider-arrow{ opacity:1; width:34px; height:34px; } }

.pd-lightbox{
  position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:rgba(6,17,28,.92); backdrop-filter:blur(8px); padding:24px; cursor:zoom-out; opacity:0; transition:opacity .25s var(--ease);
}
.pd-lightbox.open{ opacity:1; }
.pd-lightbox img{ max-width:min(92vw,1100px); max-height:78vh; border-radius:14px; background:#fff; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); cursor:pointer; }
.pd-lightbox p{ color:var(--paper-text); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-align:center; margin:0; }
.pd-lightbox-close{
  position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%; font-size:28px; line-height:1; color:#fff; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); transition:background .25s;
}
.pd-lightbox-close:hover{ background:var(--cobalt); }
body.pd-v2 .pd-slider-caption{ text-align:center; margin-top:14px; font-size:13.5px; color:rgba(255,255,255,.6); text-transform:none; font-family:var(--font-body); }

/* Quick facts strip */
body.pd-v2 .pd-quickstrip{ background:var(--pd2-navy); border-top:1px solid rgba(255,255,255,.08); }
body.pd-v2 .pd-quickstrip-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
body.pd-v2 .pd-qs-item{ padding:22px 20px; border-right:1px solid rgba(255,255,255,.08); }
body.pd-v2 .pd-qs-item:last-child{ border-right:none; }
body.pd-v2 .pd-qs-item span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pd2-green-bright); margin-bottom:6px; }
body.pd-v2 .pd-qs-item b{ font-family:var(--font-display); font-size:14.5px; color:#fff; font-weight:700; }

/* Section heading style */
body.pd-v2 .pd-h2{ font-size:clamp(24px,3vw,32px); color:var(--pd2-text); margin:0 0 18px; position:relative; padding-bottom:14px; }
body.pd-v2 .pd-h2::after{ content:""; position:absolute; left:0; bottom:0; width:46px; height:3px; background:var(--pd2-green); border-radius:2px; }
body.pd-v2 .pd-section-head{ text-align:center; margin-bottom:40px; }
body.pd-v2 .pd-section-head .pd-h2::after{ left:50%; transform:translateX(-50%); }

/* About + Technical Specifications */
body.pd-v2 .pd-about-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start; }
body.pd-v2 .pd-overview-text{ font-size:15.5px; line-height:1.75; color:var(--pd2-muted); text-transform:none; font-family:var(--font-body); margin-bottom:22px; }
body.pd-v2 .pd-synonyms{ margin-bottom:22px; }
body.pd-v2 .pd-synonyms h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pd2-green); margin-bottom:8px; }
body.pd-v2 .pd-synonyms p{ font-size:14px; font-style:italic; color:var(--pd2-muted); text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6px; }
body.pd-v2 .pd-feat-card{ background:#fff; border:1px solid var(--pd2-border); border-radius:12px; padding:20px; transition:transform .25s, box-shadow .25s, border-color .25s; }
body.pd-v2 .pd-feat-card:hover{ transform:translateY(-4px); border-color:rgba(22,163,74,.35); box-shadow:0 18px 34px -22px rgba(11,26,42,.25); }
body.pd-v2 .pd-feat-card .ic{ width:34px; height:34px; border-radius:8px; background:rgba(22,163,74,.1); color:var(--pd2-green); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
body.pd-v2 .pd-feat-card .ic svg{ width:18px; height:18px; }
body.pd-v2 .pd-feat-card h3{ font-size:13.5px; margin:0 0 6px; color:var(--pd2-text); text-transform:none; font-weight:700; }
body.pd-v2 .pd-feat-card p{ font-size:12.5px; color:var(--pd2-muted); line-height:1.5; text-transform:none; font-family:var(--font-body); margin:0; }

body.pd-v2 .pd-spec-card{ background:var(--pd2-bg-alt); border:1px solid var(--pd2-border); border-radius:14px; padding:26px; position:sticky; top:100px; }
body.pd-v2 .pd-spec-card h3{ font-size:13.5px; margin:0 0 18px; color:var(--pd2-text); text-transform:uppercase; letter-spacing:.04em; }
body.pd-v2 .pd-spec-row{ padding:12px 0; border-bottom:1px solid var(--pd2-border); }
body.pd-v2 .pd-spec-row:last-child{ border-bottom:none; padding-bottom:0; }
body.pd-v2 .pd-spec-row span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--pd2-muted); margin-bottom:4px; }
body.pd-v2 .pd-spec-row b{ font-size:13.5px; color:var(--pd2-text); font-weight:700; line-height:1.4; }

/* Applications */
body.pd-v2 .pd-section-alt{ background:var(--pd2-bg-alt); padding:72px 0; }
body.pd-v2 .pd-apps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
body.pd-v2 .pd-app-card{ background:#fff; border:1px solid var(--pd2-border); border-radius:12px; overflow:hidden; transition:transform .25s, box-shadow .25s; }
body.pd-v2 .pd-app-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(11,26,42,.22); }
body.pd-v2 .pd-app-img{ width:100%; height:130px; object-fit:cover; display:block; }

/* Text-only application cards: number watermark, accent line, arrow CTA */
body.pd-v2 .pd-apps-grid{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
body.pd-v2 .pd-app-text{
  position:relative; display:flex; flex-direction:column; padding: 28px 26px 24px; border-radius:16px; overflow:hidden;
  background: linear-gradient(180deg, #fff 0%, #F7FAFC 100%); border:1px solid var(--pd2-border); color:inherit; text-decoration:none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
body.pd-v2 .pd-app-text::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--cobalt-lt), var(--cobalt));
  transform: scaleY(.28); transform-origin: top; transition: transform .5s var(--ease);
}
body.pd-v2 .pd-app-num{
  position:absolute; top:6px; right:18px; font-family:var(--font-display); font-weight:800; font-size:76px; line-height:1; letter-spacing:-.02em;
  color: rgba(11,78,144,.07); transition: color .4s var(--ease), transform .5s var(--ease); pointer-events:none;
}
body.pd-v2 .pd-app-kicker{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--cobalt); margin-bottom:12px; position:relative;
}
body.pd-v2 .pd-app-text h3{ font-size:16.5px; margin:0 0 10px; color: var(--pd2-text); text-transform:none; font-weight:800; line-height:1.25; position:relative; }
body.pd-v2 .pd-app-text p{ font-size:13.5px; line-height:1.65; color: var(--pd2-muted); margin:0 0 22px; text-transform:none; font-family:var(--font-body); position:relative; flex:1; }
body.pd-v2 .pd-app-cta{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--cobalt); font-weight:600; position:relative; padding-top:14px; border-top:1px dashed var(--pd2-border);
}
body.pd-v2 .pd-app-cta svg{ transition: transform .35s var(--ease); }
body.pd-v2 .pd-app-text:hover{ transform: translateY(-6px); border-color: rgba(11,78,144,.35); box-shadow: 0 26px 44px -26px rgba(11,78,144,.38); }
body.pd-v2 .pd-app-text:hover::before{ transform: scaleY(1); }
body.pd-v2 .pd-app-text:hover .pd-app-num{ color: rgba(11,78,144,.16); transform: translateY(-3px); }
body.pd-v2 .pd-app-text:hover .pd-app-cta svg{ transform: translateX(6px); }
body.pd-v2 .pd-app-text:active{ transform: translateY(-2px); }
body.pd-v2 .pd-app-text:focus-visible{ outline:2px solid var(--cobalt); outline-offset:3px; }
body.pd-v2 .pd-app-img-placeholder{ width:100%; height:130px; background:linear-gradient(135deg,#EDF1F5,#E2E8EE); }
body.pd-v2 .pd-app-body{ padding:16px 18px 18px; }
body.pd-v2 .pd-app-body h3{ font-size:13.5px; margin:0 0 6px; text-transform:none; font-weight:700; color:var(--pd2-text); }
body.pd-v2 .pd-app-body p{ font-size:12.5px; color:var(--pd2-muted); line-height:1.55; text-transform:none; font-family:var(--font-body); margin:0; }

/* Packaging / Storage / FAQ row */
body.pd-v2 .pd-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
body.pd-v2 .pd-info-card{ background:#fff; border:1px solid var(--pd2-border); border-radius:14px; padding:26px; }
body.pd-v2 .pd-info-card h3{ font-size:15px; margin:0 0 16px; color:var(--pd2-text); text-transform:none; font-weight:700; }
body.pd-v2 .pd-info-img-placeholder{ width:100%; height:120px; border-radius:10px; background:repeating-linear-gradient(135deg,var(--pd2-bg-alt) 0 12px,#EAEFF3 12px 24px); display:flex; align-items:center; justify-content:center; color:var(--pd2-muted); margin-bottom:16px; }
body.pd-v2 .pd-info-img-placeholder svg{ width:30px; height:30px; opacity:.6; }
body.pd-v2 .pd-check-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
body.pd-v2 .pd-check-list li{ font-size:13px; color:var(--pd2-muted); line-height:1.5; text-transform:none; font-family:var(--font-body); padding-left:24px; position:relative; }
body.pd-v2 .pd-check-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--pd2-green); font-weight:700; }
body.pd-v2 .pd-sds-note{ margin:16px 0 0; font-size:12.5px; color:var(--pd2-muted); text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-sds-note a{ color:var(--pd2-green); font-weight:700; }

body.pd-v2 .pd-faq-list{ display:flex; flex-direction:column; }
body.pd-v2 .pd-faq-item{ border-bottom:1px solid var(--pd2-border); }
body.pd-v2 .pd-faq-item:last-child{ border-bottom:none; }
body.pd-v2 .pd-faq-q{
  width:100%; text-align:left; background:none; border:none; padding:13px 0; display:flex; justify-content:space-between;
  align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--pd2-text); cursor:pointer; text-transform:none; font-family:var(--font-body);
}
body.pd-v2 .pd-faq-q:hover{ color:var(--pd2-green); }
body.pd-v2 .pd-faq-icon{ flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1px solid var(--pd2-border); display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; color:var(--pd2-green); transition:transform .25s; }
body.pd-v2 .pd-faq-q[aria-expanded="true"] .pd-faq-icon{ transform:rotate(45deg); }
body.pd-v2 .pd-faq-a{ padding:0 0 14px; font-size:13px; color:var(--pd2-muted); line-height:1.6; text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-faq-a[hidden]{ display:none; }

/* Related products */
body.pd-v2 .pd-related-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:12px; }
body.pd-v2 .pd-related-head .pd-h2{ margin-bottom:0; padding-bottom:0; }
body.pd-v2 .pd-related-head .pd-h2::after{ display:none; }
body.pd-v2 .pd-viewall{ font-size:13.5px; font-weight:700; color:var(--pd2-green); text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-viewall:hover{ text-decoration:underline; }
body.pd-v2 .pd-related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
body.pd-v2 .pd-rel-card{ background:#fff; border:1px solid var(--pd2-border); border-radius:12px; padding:20px; transition:transform .25s, box-shadow .25s; }
body.pd-v2 .pd-rel-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(11,26,42,.22); }
body.pd-v2 .pd-rel-card .pd-rel-thumb{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:#0F2338; margin-bottom:14px; transition: transform .5s var(--ease); }
body.pd-v2 .pd-rel-card:hover .pd-rel-thumb{ transform: scale(1.03); }
body.pd-v2 .pd-rel-card{ overflow:hidden; }

/* Packaging & Storage cards: text-only, tidy checklist */
body.pd-v2 .pd-info-card{ position:relative; overflow:hidden; }
body.pd-v2 .pd-info-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, var(--pd2-green), var(--pd2-green-bright)); }
body.pd-v2 .pd-info-card h3{ display:flex; align-items:center; gap:10px; }
body.pd-v2 .pd-info-card h3::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--pd2-green); box-shadow:0 0 0 4px rgba(22,163,74,.15); flex:none; }
body.pd-v2 .pd-pack-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px dashed var(--pd2-border); }
body.pd-v2 .pd-pack-chips-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--pd2-muted); margin-right:2px; }
body.pd-v2 .pd-pack-chip{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pd2-green-dark); background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3); padding:6px 12px; border-radius:20px; font-weight:600; }
body.pd-v2 .pd-check-list{ gap:0; }
body.pd-v2 .pd-check-list li{ padding:11px 0 11px 34px; border-bottom:1px solid var(--pd2-border); font-size:13.5px; line-height:1.55; color:#3B4A5A; transition: transform .3s var(--ease), color .3s; }
body.pd-v2 .pd-check-list li:last-child{ border-bottom:none; padding-bottom:0; }
body.pd-v2 .pd-check-list li::before{
  content:"✓"; left:0; top:11px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff; background:var(--pd2-green); box-shadow:0 4px 10px -3px rgba(22,163,74,.55);
}
body.pd-v2 .pd-check-list li:last-child::before{ top:11px; }
body.pd-v2 .pd-check-list li:hover{ transform:translateX(4px); color:var(--pd2-text); }
body.pd-v2 .pd-rel-card h3{ font-size:13.5px; margin:0 0 6px; text-transform:none; font-weight:700; }
body.pd-v2 .pd-rel-card h3 a{ color:var(--pd2-text); }
body.pd-v2 .pd-rel-card h3 a:hover{ color:var(--pd2-green); }
body.pd-v2 .pd-rel-card p{ font-size:12px; color:var(--pd2-muted); line-height:1.5; margin:0 0 14px; text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-rel-view{ display:block; text-align:center; padding:9px; border:1px solid var(--pd2-border); border-radius:8px; font-size:12.5px; font-weight:700; color:var(--pd2-text); text-transform:none; font-family:var(--font-body); transition:border-color .2s, color .2s; }
body.pd-v2 .pd-rel-view:hover{ border-color:var(--pd2-green); color:var(--pd2-green); }

/* Trust bar */
body.pd-v2 .pd-trust-bar{ padding:44px 0; text-align:center; }
body.pd-v2 .pd-trust-bar p{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--pd2-muted); margin:0 0 22px; }
body.pd-v2 .pd-trust-logos{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
body.pd-v2 .pd-trust-logos span{ width:120px; height:44px; border-radius:8px; background:var(--pd2-bg-alt); border:1px dashed var(--pd2-border); }

/* CTA band */
body.pd-v2 .pd-cta2{ background:linear-gradient(120deg,var(--pd2-navy),var(--pd2-navy-2)); border-radius:20px; padding:64px 30px; text-align:center; color:#fff; }
body.pd-v2 .pd-cta2 h2{ color:#fff; font-size:clamp(24px,3.2vw,34px); margin:0 0 14px; }
body.pd-v2 .pd-cta2 p{ color:rgba(255,255,255,.7); max-width:560px; margin:0 auto 28px; text-transform:none; font-family:var(--font-body); font-size:15px; }
body.pd-v2 .pd-cta2-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Responsive */
@media (max-width:1080px){
  body.pd-v2 .pd-hero2-grid{ grid-template-columns:1fr; gap:40px; }
  body.pd-v2 .pd-hero2-media{ order:-1; max-width:460px; margin:0 auto; }
  body.pd-v2 .pd-about-grid{ grid-template-columns:1fr; }
  body.pd-v2 .pd-spec-card{ position:static; }
  body.pd-v2 .pd-info-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:780px){
  body.pd-v2 .pd-quickstrip-grid{ grid-template-columns:repeat(2,1fr); }
  body.pd-v2 .pd-qs-item:nth-child(2n){ border-right:none; }
  body.pd-v2 .pd-feat-grid{ grid-template-columns:repeat(2,1fr); }
  body.pd-v2 .pd-info-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  body.pd-v2 .pd-hero2{ padding:48px 0; }
  body.pd-v2 .pd-feat-grid{ grid-template-columns:1fr; }
  body.pd-v2 .pd-quickstrip-grid{ grid-template-columns:1fr 1fr; }
  body.pd-v2 .pd-cta2{ padding:44px 22px; border-radius:16px; }
}

/* =========================================================
   Premium interaction layer
   Scroll progress, header-on-scroll, directional reveals,
   magnetic card glow, hero entrance choreography and small
   living-gradient touches. Purely additive on top of the
   design system above — same palette, richer motion.
   ========================================================= */

/* ---------------- Subtle living page background ---------------- */
body{ background: linear-gradient(180deg, #F6FAFD 0%, var(--platinum) 560px, var(--platinum) 100%); }

/* ---------------- Scroll progress bar ---------------- */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--cobalt), var(--chrome), var(--copper));
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 9998; pointer-events:none;
}

/* ---------------- Header reacts to scroll ---------------- */
header.site-header{ transition: background .35s var(--ease), box-shadow .35s var(--ease); }
header.site-header.is-scrolled{ background: rgba(238,243,247,.98); box-shadow: 0 12px 30px -22px rgba(8,23,38,.45); }
/* Header keeps a constant height when scrolled: resizing it shifted the page and could flicker at the threshold */
.brand-mark{ transition: transform .35s var(--ease); }
header.site-header.is-scrolled .brand-mark{ transform: scale(.88); }
.brand:hover .brand-mark{ transform: rotate(-8deg) scale(1.06); }


/* ---------------- Directional / scale reveal variants ----------------
   Same fade-up mechanism as .reveal (main.js observes all of these),
   just approaching from a different axis for visual variety on
   two-column layouts (copy vs. artwork, info vs. form). */
.reveal-left{ opacity:0; transform: translateX(-36px); transition: opacity .8s var(--ease), transform .8s var(--ease); animation: revealFailsafe 0s linear 1.2s forwards; }
.reveal-left.in{ opacity:1; transform: translateX(0); }
.reveal-right{ opacity:0; transform: translateX(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); animation: revealFailsafe 0s linear 1.2s forwards; }
.reveal-right.in{ opacity:1; transform: translateX(0); }
.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); animation: revealFailsafe 0s linear 1.2s forwards; }
.reveal-scale.in{ opacity:1; transform: scale(1); }

/* ---------------- Button shine sweep ---------------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:36%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events:none; z-index:1;
}
.btn:hover::after{ left:130%; }
.btn-outline::after, .btn-ghost-light::after{ background: linear-gradient(115deg, transparent, rgba(11,78,144,.16), transparent); }
.btn-copper{ background: linear-gradient(135deg, var(--copper), var(--copper-lt)); }
.btn-copper:hover{ background: linear-gradient(135deg, var(--copper-lt), var(--copper)); box-shadow: 0 16px 32px -16px rgba(46,123,196,.55); }
.btn-cobalt{ background: linear-gradient(135deg, var(--cobalt), var(--cobalt-lt)); }
.btn-cobalt:hover{ box-shadow: 0 16px 32px -16px rgba(11,78,144,.5); }

/* ---------------- Hero content entrance choreography ---------------- */
.hero-inner > *{ opacity:0; transform: translateY(22px); animation: heroUp .9s var(--ease) both; animation-play-state: paused; }
body.ready .hero-inner > *{ animation-play-state: running; }
.hero-inner > *:nth-child(1){ animation-delay: .1s; }
.hero-inner > *:nth-child(2){ animation-delay: .26s; }
.hero-inner > *:nth-child(3){ animation-delay: .42s; }
.hero-inner > *:nth-child(4){ animation-delay: .58s; }
@keyframes heroUp{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform: translateY(0); } }

.page-hero .wrap > *{ opacity:0; transform: translateY(18px); animation: heroUp .8s var(--ease) both; animation-play-state: paused; }
body.ready .page-hero .wrap > *{ animation-play-state: running; }
.page-hero .wrap > *:nth-child(1){ animation-delay: .08s; }
.page-hero .wrap > *:nth-child(2){ animation-delay: .22s; }
.page-hero .wrap > *:nth-child(3){ animation-delay: .36s; }

/* ---------------- Magnetic cursor glow on select cards ----------------
   JS (main.js) tracks pointer position on fine-pointer devices and
   writes --mx/--my percentages onto the hovered card; the glow itself
   is a pseudo-element so no markup changes are needed. Only applied to
   cards that don't already use both ::before and ::after for their
   existing hover treatment. */
.stat, .feat-card, .app-card-detail, .info-box-detail, .pd-feat-card,
.why-item, .partner-cell, .pd-info-card, .pd-app-card, .pd-rel-card{ position:relative; }
.stat::after, .feat-card::after, .app-card-detail::after, .info-box-detail::after, .pd-feat-card::after,
.why-item::after, .partner-cell::after, .pd-info-card::after, .pd-app-card::after, .pd-rel-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(11,78,144,.12), transparent 70%);
  opacity:0; transition: opacity .4s var(--ease);
}
.stat:hover::after, .feat-card:hover::after, .app-card-detail:hover::after, .info-box-detail:hover::after, .pd-feat-card:hover::after,
.why-item:hover::after, .partner-cell:hover::after, .pd-info-card:hover::after, .pd-app-card:hover::after, .pd-rel-card:hover::after{ opacity:1; }
.hours-card::before, .map-overlay-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(11,78,144,.1), transparent 70%);
  opacity:0; transition: opacity .4s var(--ease);
}
.hours-card:hover::before, .map-overlay-card:hover::before{ opacity:1; }
.stat > *, .feat-card > *, .app-card-detail > *, .info-box-detail > *, .pd-feat-card > *,
.why-item > *, .partner-cell > *, .pd-info-card > *, .pd-app-card > *, .pd-rel-card > *,
.hours-card > *, .map-overlay-card > *{ position:relative; z-index:1; }

/* ---------------- WhatsApp float — attention pulse ring ---------------- */
.wa-float{ position: fixed; }
.wa-float::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid #25D366;
  opacity:.7; animation: waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{ 0%{ transform: scale(.85); opacity:.7; } 100%{ transform: scale(1.55); opacity:0; } }

/* ---------------- Product thumbnail zoom on card hover ---------------- */
.prod-thumb img{ transition: transform .6s var(--ease); }
.prod-card:hover .prod-thumb img{ transform: scale(1.08); }

/* ---------------- Dynamically rendered grids pop in on render ----------------
   Search/filter results and related-product grids are rebuilt via
   innerHTML (not scroll-observed), so they get a lightweight cascading
   entrance every time they're (re)painted instead of a scroll trigger. */
@keyframes cardPopIn{ from{ opacity:0; transform: translateY(18px) scale(.97); } to{ opacity:1; transform: translateY(0) scale(1); } }
.prod-grid .prod-card{
  animation: cardPopIn .55s var(--ease-soft) both, cardBorderGlow 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .06s), calc(var(--i, 0) * -.3s);
}
@keyframes cardBorderGlow{
  0%, 100%{ box-shadow: 0 18px 38px -30px rgba(10,18,26,.18), 0 0 0 1px rgba(11,78,144,.14), 0 0 10px 0px rgba(11,78,144,.22); }
  50%{ box-shadow: 0 18px 38px -30px rgba(10,18,26,.18), 0 0 0 1.5px rgba(11,78,144,.5), 0 0 22px 3px rgba(11,78,144,.55); }
}
.prod-grid .prod-card:hover{ animation-play-state: paused, paused; }

/* ---------------- CTA band — slow living gradient ---------------- */
.cta-band{ background-size: 220% 220%; animation: ctaGradient 12s ease infinite; }
@keyframes ctaGradient{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }

@media (prefers-reduced-motion: reduce){
  .wa-float::before{ display:none; }
  .cta-band{ animation:none; }
  .hero-inner > *, .page-hero .wrap > *{ animation:none; opacity:1; transform:none; }
  .prod-grid .prod-card{ animation:none; }
}

@media (max-width: 620px){
  .scroll-progress{ height:2px; }
}

/* =========================================================
   Mobile & tablet ergonomics
   Touch feedback, tap-target sizing, an app-like dimmed
   backdrop behind the open mobile menu, and small readability
   fixes so the experience feels native and premium on phones
   and tablets, not just scaled-down desktop.
   ========================================================= */

/* Real press feedback on tap (hover-only affordances don't fire on touch) */
a, button{ -webkit-tap-highlight-color: transparent; }
.btn:active{ transform: translateY(0) scale(.96); }
.pop-tag:active, .chip:active{ transform: scale(.95); }
.offer-card:active, .pillar:active, .prod-card:active, .quick-card:active,
.stat:active, .feat-card:active, .app-card-detail:active{ transform: translateY(-3px); }

/* Dimmed backdrop behind the open mobile nav, for focus (app-like, not a plain dropdown) */
body.nav-open::after{
  content:""; position:fixed; inset:0; z-index:498;
  background: rgba(8,23,38,.5); backdrop-filter: blur(2px);
  animation: navBackdropIn .3s var(--ease);
}
@keyframes navBackdropIn{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width: 980px){
  /* Bigger, easier-to-hit burger tap zone (vertical padding only, so it
     doesn't eat into the flex gap next to the WhatsApp/Quote buttons) */
  .burger{ padding-top:11px; padding-bottom:11px; margin-top:-11px; margin-bottom:-11px; }
}

@media (max-width: 620px){
  /* Comfortable tap targets */
  .pop-tag{ padding:10px 16px; }
  .prod-add, .prod-view, .prod-more{ padding:11px 18px; }

  /* Prevent iOS Safari's auto-zoom-on-focus for inputs under 16px */
  .search-input, .search-select, #prodSearch, #prodCategory,
  .field input, .field select, .field textarea{ font-size:16px; }

  /* A smaller, less obtrusive floating WhatsApp button so it stops
     covering filter chips / CTAs on narrow screens */
  .wa-float{ width:50px; height:50px; bottom:18px; right:18px; }
  .wa-float svg{ width:22px; height:22px; }
}

@media (prefers-reduced-motion: reduce){
  body.nav-open::after{ animation:none; }
}
/* =========================================================
   Reference-inspired refinements (dashboard look):
   pill buttons with a soft glow, larger rounded cards,
   tighter display type, and a subtle grid + glow texture
   on dark sections. Colours unchanged.
   ========================================================= */

/* Display type: tighter tracking, less shouty — like the reference headings */
h1, h2, h3, h4{ letter-spacing: -.01em; }
.hero h1, .page-hero h1, .section-head h2{ letter-spacing: -.02em; line-height: 1.06; }

/* Pill buttons with a gentle inner highlight and glow */
.btn{
  border-radius: 999px; padding: 12px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-copper, .btn-cobalt{ box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -14px rgba(46,123,196,.7); }
.btn-copper:hover, .btn-cobalt:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 34px -14px rgba(46,123,196,.85); }
.btn-ghost-light{ background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.btn-ghost-light:hover{ background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(164,205,238,.12); }
.btn-outline{ background: rgba(255,255,255,.6); }
.hero-arrow, .footer-social a{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

/* Rounder, roomier cards */
.stat{ border-radius: 20px; }
.pillar, .offer-card{ border-radius: 22px; }
.app-card{ border-radius: 20px; }
.why-grid{ border-radius: 22px; overflow: hidden; }
.chip{ clip-path: none; border-radius: 999px; }
.stamp{ clip-path: none; border-radius: 999px; }
.cta-band{ border-radius: 28px; }
.search-shell{ border-radius: 24px; }
.search-input, .search-select{ border-radius: 999px; padding-left: 22px; }

/* Stat numbers: bigger and bolder, like "542,000 Users" */
.stat .num{ font-weight: 800; letter-spacing: -.03em; }

/* Dark sections get the reference's faint grid + soft top glow */
.on-dark{ position: relative; overflow: hidden; isolation: isolate; }
.on-dark::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(95,160,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(95,160,214,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%);
}
.on-dark::after{
  content:""; position:absolute; left:50%; top:-220px; width:900px; height:440px; transform:translateX(-50%);
  z-index:-1; pointer-events:none; border-radius:50%;
  background: radial-gradient(ellipse, rgba(46,123,196,.22), transparent 70%);
}
.pillar{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--steel-2); }
.app-card{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--steel-2); }

/* Keep the brand on one line with the wider display font */
.brand-text strong, .brand-text span{ white-space: nowrap; }
@media (max-width: 1200px) and (min-width: 981px){
  .nav-links{ gap: 22px; }
  .nav-links a{ font-size: 12.5px; }
  .brand-text span{ display: none; }
  .nav-cta .btn{ padding: 10px 18px; font-size: 12px; }
}

/* Emphasis text must stay readable on dark sections */
.on-dark .section-head h2 em, .on-dark h2 em{ color: var(--chrome-lt); }

/* Available sizes (e.g. Nickel Anode Plate) */
body.pd-v2 .pd-sizes{ background: var(--pd2-bg-alt); }
body.pd-v2 .pd-sizes-sub{ max-width:560px; margin:0 auto; color:var(--pd2-muted); font-size:14.5px; text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-sizes-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
body.pd-v2 .pd-size-card{
  position:relative; display:flex; flex-direction:column; padding:26px 26px 22px; border-radius:22px; overflow:hidden; color:inherit; isolation:isolate;
  background: radial-gradient(circle at 85% 0%, rgba(46,123,196,.35), transparent 55%), linear-gradient(160deg, #10283F, #0B1A2A);
  border:1px solid rgba(164,205,238,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 44px -30px rgba(8,29,48,.8);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
body.pd-v2 .pd-size-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(95,160,214,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(95,160,214,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 80% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 80% 30%, #000 10%, transparent 70%);
}
body.pd-v2 .pd-size-kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(164,205,238,.75); }
body.pd-v2 .pd-size-val{ margin:14px 0 4px; font-family:var(--font-display); font-weight:800; font-size:54px; line-height:1; letter-spacing:-.04em; color:#fff; }
body.pd-v2 .pd-size-val em{ font-style:normal; color:var(--chrome-lt); font-weight:600; margin:0 4px; font-size:.7em; vertical-align:.08em; }
body.pd-v2 .pd-size-name{ font-size:13.5px; color:var(--muted-plat); margin-bottom:18px; text-transform:none; font-family:var(--font-body); }
body.pd-v2 .pd-size-card .pd-app-cta{ color:var(--chrome-lt); border-top:1px dashed rgba(164,205,238,.25); }
body.pd-v2 .pd-size-card:hover{ transform: translateY(-6px); border-color: rgba(164,205,238,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 50px -26px rgba(46,123,196,.55); }
body.pd-v2 .pd-size-card:hover .pd-app-cta svg{ transform: translateX(6px); }
@media (max-width: 980px){ body.pd-v2 .pd-sizes-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ body.pd-v2 .pd-sizes-grid{ grid-template-columns: 1fr; } }

/* Related products: always four, in one even row */
body.pd-v2 .pd-related-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ body.pd-v2 .pd-related-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){
  body.pd-v2 .pd-related-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.pd-v2 .pd-rel-card{ padding: 12px; border-radius: 14px; }
  body.pd-v2 .pd-rel-card h3{ font-size: 12px; line-height: 1.3; }
  body.pd-v2 .pd-rel-card p{ font-size: 11px; margin-bottom: 10px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  body.pd-v2 .pd-rel-view{ padding: 7px; font-size: 11px; }
}

/* Related products: equal-height cards, "View Product" pinned to the bottom */
body.pd-v2 .pd-rel-card{ display:flex; flex-direction:column; height:100%; }
body.pd-v2 .pd-rel-card p{ flex:1; }
body.pd-v2 .pd-rel-card .pd-rel-view{ margin-top:auto; }

/* Home page CTA: deep navy instead of cobalt */
.cta-band--navy{
  background: radial-gradient(ellipse at 50% 0%, rgba(46,123,196,.28), transparent 60%), linear-gradient(120deg, var(--steel), var(--steel-2));
  background-size: 100% 100%; animation: none;
  border: 1px solid rgba(164,205,238,.14);
}

/* =========================================================
   Branded loading screen
   ========================================================= */
#preloader{ background: radial-gradient(circle at 50% 42%, #12324F 0%, var(--steel) 60%); gap: 18px; }
.loader-logo{ position:relative; width:112px; height:112px; display:flex; align-items:center; justify-content:center; }
.loader-logo img{
  width:64px; height:64px; object-fit:contain; background:#fff; border-radius:18px; padding:8px;
  box-shadow: 0 0 0 6px rgba(164,205,238,.08), 0 18px 40px -12px rgba(46,123,196,.7);
  animation: loaderBreathe 1.6s var(--ease) infinite;
}
.loader-orbit{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent; border-top-color: var(--chrome); border-right-color: rgba(95,160,214,.35);
  animation: spin 1.1s linear infinite;
}
.loader-orbit--2{ inset:12px; border-top-color: var(--chrome-lt); border-right-color: transparent; border-left-color: rgba(164,205,238,.3); animation-duration: 1.6s; animation-direction: reverse; }
@keyframes loaderBreathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
.loader-brand{ font-family: var(--font-display); font-weight:800; font-size:18px; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
.loader-msgs{ position:relative; height:20px; width:260px; text-align:center; overflow:hidden; }
.loader-msgs span{
  position:absolute; left:0; right:0; font-size:13px; letter-spacing:.04em; color: var(--chrome-lt);
  opacity:0; animation: loaderMsg 2.4s var(--ease) infinite;
}
.loader-msgs span:nth-child(1){ animation-delay: 0s; }
.loader-msgs span:nth-child(2){ animation-delay: .8s; }
.loader-msgs span:nth-child(3){ animation-delay: 1.6s; }
@keyframes loaderMsg{ 0%{ opacity:0; transform: translateY(10px); } 8%,30%{ opacity:1; transform:none; } 38%,100%{ opacity:0; transform: translateY(-10px); } }
.loader-track{ width:160px; }

/* =========================================================
   Moving border on buttons (light streak travelling round the edge)
   ========================================================= */
@property --mb-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:2;
  background: conic-gradient(from var(--mb-angle), transparent 0deg 250deg, rgba(164,205,238,.35) 290deg, #fff 330deg, rgba(164,205,238,.35) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);         mask-composite: exclude;
  animation: mbSpin 3.2s linear infinite;
}
.btn-outline::before{ background: conic-gradient(from var(--mb-angle), transparent 0deg 250deg, rgba(46,123,196,.35) 290deg, var(--cobalt) 330deg, rgba(46,123,196,.35) 350deg, transparent 360deg); }
@keyframes mbSpin{ to{ --mb-angle: 360deg; } }

/* =========================================================
   Ambient glowing pulse on every button on the site — hero and
   section CTAs, WhatsApp/quote buttons, "View Details" / "View
   Product" everywhere. A soft navy-blue (or accent-colour) halo
   breathes in and out; each button's own base shadow is kept.
   ========================================================= */
.btn, .prod-view, .prod-add, body.pd-v2 .pd-rel-view,
body.pd-v2 .btn-pd-green, body.pd-v2 .btn-pd-outline, body.pd-v2 .btn-pd-outline-light{
  --glow-base: 0 0 #0000;
  --glow-color: rgba(11,78,144,.55);
  animation: btnGlowPulse 2.6s ease-in-out infinite;
}
.btn{ --glow-base: inset 0 1px 0 rgba(255,255,255,.18); }
.btn-copper, .btn-cobalt{ --glow-base: inset 0 1px 0 rgba(255,255,255,.28); --glow-color: rgba(46,123,196,.6); }
.btn-outline{ --glow-color: rgba(11,78,144,.45); }
.btn-ghost-light{ --glow-color: rgba(164,205,238,.55); }
body.pd-v2 .pd-rel-view{ --glow-color: rgba(22,163,74,.4); }
body.pd-v2 .btn-pd-green{ --glow-color: rgba(74,222,128,.55); }
body.pd-v2 .btn-pd-outline, body.pd-v2 .btn-pd-outline-light{ --glow-color: rgba(255,255,255,.4); }
/* Stagger the catalogue's many "View Details" buttons so they don't all pulse in lockstep */
.prod-grid .prod-card .prod-view{ animation-delay: calc(var(--i, 0) * -.35s); }

@keyframes btnGlowPulse{
  0%, 100%{ box-shadow: var(--glow-base), 0 0 4px 0px var(--glow-color); }
  50%{ box-shadow: var(--glow-base), 0 0 13px 3px var(--glow-color); }
}

@media (prefers-reduced-motion: reduce){
  .btn::before{ animation:none; opacity:0; }
  .btn, .prod-view, .prod-add, body.pd-v2 .pd-rel-view,
  body.pd-v2 .btn-pd-green, body.pd-v2 .btn-pd-outline, body.pd-v2 .btn-pd-outline-light,
  .prod-grid .prod-card{ animation: none; }
  .loader-msgs span{ animation:none; }
  .loader-msgs span:first-child{ opacity:1; }
}

/* Two email addresses stacked in the footer */
.email-stack{ display:flex; flex-direction:column; gap:4px; }
.email-stack a{ word-break: break-all; }

/* =========================================================
   Mobile refinements (phones)
   ========================================================= */

@media (max-width: 620px){
  /* Header: restore breathing room (a later .wrap rule was zeroing it) and a smaller logo */
  .nav.wrap{ padding: 10px 16px; }
  .brand{ gap: 9px; }
  .brand-mark{ width: 32px; height: 32px; }
  .brand-text strong{ font-size: 15px; letter-spacing: .01em; }
  header.site-header.is-scrolled .brand-mark{ transform: scale(.94); }
  .burger{ padding: 10px 6px; margin: 0; }

  /* Stat boxes: compact 2×2 */
  .stats-grid{ gap: 10px; padding: 22px 0; }
  .stat{ padding: 14px 8px 12px; border-radius: 16px; }
  .stat .num{ font-size: 24px; }
  .stat .lbl{ font-size: 9.5px; letter-spacing: .06em; margin-top: 4px; line-height: 1.35; }

  /* Product catalogue: two compact cards per row */
  .prod-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prod-grid .prod-card{ padding: 14px 12px 12px; border-radius: 16px; display:flex; flex-direction:column; }
  .prod-code{ font-size: 9.5px; }
  .prod-name{ font-size: 13px; line-height: 1.25; margin: 6px 0 4px; overflow-wrap: anywhere; }
  .prod-cat{ font-size: 10.5px; margin-bottom: 6px; }
  .prod-syn, .prod-specs, .prod-more{ display: none !important; }
  .prod-use{ font-size: 12px; line-height: 1.45; margin-bottom: 10px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .prod-actions{ margin-top: auto; flex-direction: row; }
  .prod-actions > span:empty{ display:none; }
  .prod-view{ width: 100%; justify-content: center; min-height: 40px; padding: 9px 8px; font-size: 10.5px; }
  .prod-grid .prod-card:hover{ transform: none; }
}
@media (max-width: 620px){
  .stats-grid.wrap{ padding: 22px 16px; }
  .hero{ padding: 64px 0 96px; }
  .stamp{ font-size: 10px; letter-spacing: .1em; padding: 6px 12px; margin-bottom: 20px; }
  .hero h1{ font-size: 32px; }
  .hero p.lead{ font-size: 15px; line-height: 1.6; margin: 16px 0 26px; }
  .hero-actions{ gap: 10px; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}
@media (max-width: 620px){ .prod-view{ white-space: nowrap; gap: 4px; } }
@media (max-width: 620px){
  /* Slide-ins come up from below on phones so nothing pokes past the screen edge */
  .reveal-left, .reveal-right{ transform: translateY(24px); }
  .reveal-left.in, .reveal-right.in{ transform: none; }

  /* Comfortable tap targets (≥ 40px) */
  .back-to-top{ min-height: 44px; padding: 0 6px; }
  .quick-card a.qc-value{ display:flex; align-items:center; min-height: 40px; overflow-wrap:anywhere; }
  body.pd-v2 .pd-viewall{ display:inline-flex; align-items:center; min-height: 44px; }
  body.pd-v2 .pd-sds-note a{ display:inline-flex; align-items:center; justify-content:center; min-width: 40px; min-height: 40px; }

  /* Search panel: full-width fields, less padding */
  .search-shell{ padding: 16px; border-radius: 20px; }
  .search-select{ width: 100%; }
  .page-hero h1{ font-size: 28px; }
}

/* =========================================================
   Tablet refinements (iPad portrait & landscape, 621–1024px)
   ========================================================= */
@media (min-width: 621px) and (max-width: 1024px){
  /* Keep side gutters (a later .wrap rule was zeroing them on these grids) */
  .stats-grid.wrap{ padding-left: 28px; padding-right: 28px; }

  /* Use the width: 4 stats and 3 promise cards side by side */
  .stats-grid{ grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 30px; padding-bottom: 30px; }
  .stat{ padding: 20px 10px 18px; }
  .stat .num{ font-size: 32px; }
  .stat .lbl{ font-size: 10px; letter-spacing: .06em; line-height: 1.35; }
  .pillar-grid{ grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pillar{ padding: 28px 20px; }
  .pillar h3{ font-size: 17px; }
  .pillar p{ font-size: 13.5px; }

  /* Balanced sections */
  .section{ padding: 72px 0; }
  .section-tight{ padding: 56px 0; }
  .story-grid{ gap: 36px; }
  .plant-art{ max-height: 420px; }
  .app-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .quick-contact-grid{ gap: 16px; }
  .hero{ padding: 80px 0 112px; }
  .hero-inner{ max-width: 640px; }
}

/* Touch-friendly targets on tablets and phones (anything without a mouse) */
@media (max-width: 1024px), (hover: none){
  .reveal-left, .reveal-right{ transform: translateY(24px); }
  .reveal-left.in, .reveal-right.in{ transform: none; }
  .back-to-top{ min-height: 44px; padding: 0 6px; }
  .quick-card a.qc-value{ display:flex; align-items:center; min-height: 40px; overflow-wrap:anywhere; }
  .pop-tag{ min-height: 40px; padding: 9px 16px; }
  .prod-more{ min-height: 40px; padding: 0 4px; }
  body.pd-v2 .pd-viewall{ display:inline-flex; align-items:center; min-height: 44px; }
  body.pd-v2 .pd-sds-note a{ display:inline-flex; align-items:center; justify-content:center; min-width: 40px; min-height: 40px; }
}
@media (min-width: 621px) and (max-width: 980px){
  .plant-art{ max-height: none; width: 100%; aspect-ratio: 16 / 9; }
  .story-grid p{ max-width: none; }
}

/* "View more" button under the catalogue (phones) */
.prod-load-more{ display:flex; margin: 26px auto 0; min-height: 46px; padding: 12px 28px; }
.prod-load-more[hidden]{ display:none; }

/* Mobile menu scroll-lock lives on <html>: locking <body> turns it into a
   scroll container, which breaks the sticky header (menu jumped off-screen) */
body.nav-open{ overflow: visible; }
html.nav-lock{ overflow: hidden; }

/* ================= Guides / blog ================= */
.guide-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.guide-card{ background:#fff; border:1px solid var(--line); border-radius: 16px; overflow:hidden; display:flex; flex-direction:column; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.guide-card:hover{ transform: translateY(-4px); border-color: var(--chrome-lt); box-shadow: 0 22px 44px -28px rgba(11,78,144,.45); }
.guide-thumb{ display:block; aspect-ratio: 16/10; background: var(--steel-2); overflow:hidden; }
.guide-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.guide-card:hover .guide-thumb img{ transform: scale(1.04); }
.guide-body{ padding: 20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.guide-meta{ font-size: 11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--cobalt); }
.guide-card h3{ font-size: 17px; line-height:1.3; text-transform:none; letter-spacing:0; margin: 10px 0 10px; }
.guide-card h3 a{ color: var(--ink-text); }
.guide-card h3 a:hover{ color: var(--cobalt); }
.guide-card p{ font-size: 14px; line-height:1.6; color: var(--muted-ink); margin:0 0 16px; flex:1; }
.guide-link{ font-size: 13px; font-weight:700; color: var(--cobalt); }
.guide-link:hover{ text-decoration: underline; }

.post-hero{ padding: 56px 0 64px; }
.post-hero h1{ font-size: clamp(26px, 3.6vw, 42px); line-height:1.15; max-width: 860px; margin-top: 16px; text-transform:none; letter-spacing:-.01em; }
.page-hero p.post-dek{ max-width: 720px; }
.page-hero p.post-byline{ font-size: 13px; margin-top: 12px; color: var(--chrome-lt); }
.post-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color: var(--muted-plat); margin-bottom: 18px; position:relative; }
.post-crumbs a{ color: var(--chrome-lt); }
.post-crumbs a:hover{ color:#fff; }

.post-section{ padding-top: 56px; }
.post-layout{ display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items:start; }
.post-body{ max-width: 760px; font-size: 16.5px; line-height: 1.75; color: var(--ink-text); }
.post-body h2, .post-body h3{ text-transform:none; letter-spacing:0; line-height:1.25; }
.post-body h2{ font-size: clamp(21px, 2.4vw, 26px); margin: 44px 0 14px; }
.post-body h3{ font-size: 18px; margin: 30px 0 10px; color: var(--steel-3); }
.post-body p{ margin: 0 0 16px; }
.post-body ul{ margin: 0 0 18px; padding-left: 22px; }
.post-body li{ margin-bottom: 8px; }
.post-body a{ color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover{ color: var(--copper); }
.post-figure{ margin: 0 0 28px; border-radius: 16px; overflow:hidden; background: var(--steel-2); }
.post-figure img{ width:100%; height:auto; display:block; }
.post-takeaways{ background: var(--platinum); border:1px solid var(--line); border-left: 4px solid var(--cobalt); border-radius: 12px; padding: 20px 24px; margin: 0 0 30px; }
.post-body .post-takeaways h2{ font-size: 15px; margin: 0 0 10px; text-transform: uppercase; letter-spacing:.06em; color: var(--cobalt); }
.post-takeaways ul{ margin:0; }
.post-takeaways li{ font-size: 15px; }
.table-wrap{ overflow-x:auto; margin: 6px 0 22px; border:1px solid var(--line); border-radius: 12px; }
.post-body table{ width:100%; border-collapse: collapse; font-size: 14.5px; line-height:1.5; }
.post-body th, .post-body td{ padding: 11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.post-body thead th{ background: var(--steel); color:#fff; font-weight:700; }
.post-body tbody tr:nth-child(even){ background: var(--platinum); }
.post-body tbody tr:last-child td{ border-bottom:0; }
.post-sources{ margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.post-body .post-sources h2{ font-size: 16px; margin: 0 0 10px; }
.post-note{ color: var(--muted-ink); font-size: 13px; }

.post-aside{ position: sticky; top: 100px; }
.post-aside-card{ background:#fff; border:1px solid var(--line); border-radius: 16px; padding: 20px; }
.post-aside-card h2{ font-size: 13px; letter-spacing:.08em; color: var(--cobalt); margin-bottom: 14px; }
.post-prod{ display:flex; align-items:center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--ink-text); transition: background .3s var(--ease); }
.post-prod:hover{ background: var(--platinum); }
.post-prod img{ width: 52px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--steel-2); flex-shrink:0; }
.post-prod span{ display:flex; flex-direction:column; font-size: 14px; line-height:1.3; }
.post-prod small{ color: var(--cobalt); font-size: 12px; font-weight:600; margin-top:2px; }
.post-aside-btn{ width:100%; justify-content:center; margin-top: 14px; }

body.pd-v2 #pd-guides .guide-grid{ margin-top: 8px; }

@media (max-width: 980px){
  .guide-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .post-layout{ grid-template-columns: 1fr; gap: 36px; }
  .post-aside{ position: static; }
  .post-body{ max-width: none; }
}
@media (max-width: 620px){
  .guide-grid{ grid-template-columns: 1fr; gap: 18px; }
  .post-body{ font-size: 16px; }
  .post-hero{ padding: 40px 0 46px; }
  .post-takeaways{ padding: 16px 18px; }
}

/* Decorative looping animations hold still while the page is actively scrolling, so scroll frames stay cheap */
html.is-scrolling .btn, html.is-scrolling .btn::before, html.is-scrolling .prod-view, html.is-scrolling .prod-add,
html.is-scrolling body.pd-v2 .pd-rel-view, html.is-scrolling body.pd-v2 .btn-pd-green, html.is-scrolling body.pd-v2 .btn-pd-outline,
html.is-scrolling body.pd-v2 .btn-pd-outline-light, html.is-scrolling .cta-band, html.is-scrolling .wa-float::before,
html.is-scrolling .wa-float::after, html.is-scrolling .stamp .dot{ animation-play-state: paused !important; }
/* Cards: keep the one-time pop-in running, pause only the looping border glow */
html.is-scrolling .prod-grid .prod-card{ animation-play-state: running, paused !important; }

/* =========================================================
   Phone readability & touch targets (kept last so it wins)
   ========================================================= */

/* Guides: the article column must shrink below its tables' width (tables scroll in .table-wrap) */
@media (max-width: 980px){
  .post-layout{ grid-template-columns: minmax(0, 1fr); }
}

/* Anything used by touch: comfortable hit areas without changing the look */
@media (max-width: 1024px), (hover: none){
  .hero-dots{ gap: 2px; }
  .hero-dots button, body.pd-v2 .pd-slider-dots button{
    width: 26px; height: 26px; padding: 9px; background-clip: content-box; box-sizing: border-box;
  }
  body.pd-v2 .pd-slider-dots{ gap: 0; padding: 0 6px; }
  .hero-dots button.active, body.pd-v2 .pd-slider-dots button.active{ background-clip: content-box; }
  footer .footer-links a{ min-height: 40px; }
  footer .footer-links li{ margin-bottom: 0; }
  footer .footer-contact a{ display: inline-flex; align-items: center; min-height: 40px; }
  body.pd-v2 .pd-breadcrumb a, .post-crumbs a{ display: inline-flex; align-items: center; min-height: 40px; }
  body.pd-v2 .pd-rel-view{ display: flex; align-items: center; justify-content: center; min-height: 40px; }
  .guide-link{ display: inline-flex; align-items: center; min-height: 40px; }
  .brand{ min-height: 44px; }
}

/* Phones: nothing below ~11px, labels a touch larger */
@media (max-width: 620px){
  .stamp{ font-size: 11px; }
  .stat .lbl{ font-size: 11px; letter-spacing: .04em; }
  .pillar .pnum{ font-size: 12px; }
  .est-badge{ font-size: 11.5px; }
  .prod-code{ font-size: 11px; }
  .prod-cat{ font-size: 11.5px; }
  .prod-view{ font-size: 11.5px; letter-spacing: .02em; }
  .quick-card h2, .hours-card h3{ font-size: 12px; }
  .field label{ font-size: 12px; }
  footer .footer-h{ font-size: 12px; }
  .back-to-top{ font-size: 12px; }
  .guide-meta{ font-size: 11.5px; }
  body.pd-v2 .pd-qs-item span, body.pd-v2 .pd-spec-row span{ font-size: 11.5px; }
  body.pd-v2 .pd-app-kicker, body.pd-v2 .pd-pack-chips-label, body.pd-v2 .pd-size-kicker{ font-size: 11.5px; }
  body.pd-v2 .pd-rel-card p{ font-size: 12px; }
  body.pd-v2 .pd-rel-view{ font-size: 12.5px; }
  .footer-logo span span{ font-size: 11.5px; }
  body.pd-v2 .pd-synonyms h3{ font-size: 11.5px; }

  /* Guide tables: tighter cells so three columns stay readable */
  .post-body table{ font-size: 13.5px; }
  .post-body th, .post-body td{ padding: 9px 10px; }

  /* Room below the footer so the floating WhatsApp button never sits on the last links */
  footer .footer-bottom{ padding-bottom: 76px; }
}
@media (max-width: 360px){
  .prod-view{ white-space: normal; text-align: center; line-height: 1.25; }
}

/* ================= SEO pass: in-text links, product photos, footer, catalogue notes ================= */
.text-link{ color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.text-link:hover{ color: var(--copper); }
.on-dark .text-link, .page-hero .text-link, .app-card .text-link{ color: var(--chrome-lt); }
.on-dark .text-link:hover, .page-hero .text-link:hover, .app-card .text-link:hover{ color: #fff; }
a.chip{ transition: border-color .25s var(--ease), color .25s var(--ease); }
a.chip:hover{ border-color: var(--chrome); color: #fff; }

body.pd-v2 .pd-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.page-hero .pd-notfound-title{ font-size: clamp(30px,4.4vw,50px); color:#fff; max-width:720px; position:relative; }

.catalogue-notes{ max-width: 760px; margin: 56px auto 0; text-align: center; }
.catalogue-notes h2{ font-size: clamp(20px, 2.4vw, 26px); text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
.catalogue-notes p{ color: var(--muted-ink); font-size: 15px; line-height: 1.75; text-transform: none; font-family: var(--font-body); }

.footer-grid{ grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr 1.1fr; gap: 40px; }
@media (max-width: 1100px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } }
@media (max-width: 620px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-brand, .footer-cta{ grid-column: 1 / -1; } }
@media (max-width: 340px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Phones: one row of two related products */
@media (max-width: 620px){ body.pd-v2 .pd-related-grid > :nth-child(n+3){ display: none; } }