/*!
Theme Name: Straton Electricals
Theme URI: https://www.stratonelectricals.com/
Author: Straton Electricals
Author URI: https://www.stratonelectricals.com/
Description: Custom WordPress theme for Straton Electricals — designers and manufacturers of Dry Type & Oil Immersed Instrument Transformers up to 245 kV. Built mobile-first with accessibility (WCAG-conscious contrast, keyboard navigation, ARIA landmarks) and performance (lazy-loaded images, minimal render-blocking JS, preloaded LCP asset) as first-class requirements.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: straton
*/

/* ===== DESIGN TOKENS ===== */
:root {
  --primary:     #005E60;
  --primary-dk:  #003F42;
  --primary-lt:  #E6F2F2;

  --dark:        #04111F;
  --dark-2:      #071B33;
  --dark-3:      #1E2A32;

  --accent:      #00A6A6;
  --accent-2:    #00A6D6;
  --accent-lt:   #DFF7F7;

  --white:       #FFFFFF;
  --light:       #F5F8FA;
  --light-2:     #EEF3F5;
  --light-warm:  #F5FBFB;
  --border:      #DCE5E8;

  --text:        #102027;
  --text-body:   #4B5C64;
  --text-mute:   #7A8A91;
  --topbar-text: #373737;

  --font-head:   'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-body:   'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  --h1: clamp(38px, 5.5vw, 72px);
  --h2: clamp(28px, 3.8vw, 52px);
  --h3: clamp(20px, 2.5vw, 32px);

  --max: 1440px;
  --px:  clamp(20px, 4vw, 80px);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.65;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

/* ===== UTILITY ===== */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--px);padding-right:var(--px)}
.row{display:flex}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1.1;
}
h1{font-size:var(--h1);font-weight:800;letter-spacing:-0.03em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{line-height:1.7}

.eyebrow{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.7}
.on-dark{color:#fff}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark p{color:rgba(255,255,255,.78)}
/* ----- Blog comments & widgets ----- */
.comments-area{margin-top:64px;padding-top:48px;border-top:1px solid var(--border)}
.comments-area h3{margin-bottom:24px}
.comment-list .comment{list-style:none;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.comment-list .comment-author .avatar{border-radius:50%;margin-right:10px;vertical-align:middle}
.comment-list .comment-metadata{font-size:12px;color:var(--text-mute);margin-bottom:8px}
.comment-list .comment-content p{font-size:15px;line-height:1.6;color:var(--text-body)}
.comment-respond{margin-top:32px}
.comment-form p{margin-bottom:16px}
.comment-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:8px;font:inherit;
}
.page-links{margin-top:32px;font-size:14px;font-weight:600}
.page-links a{color:var(--primary);margin:0 4px}
.widget{margin-bottom:40px}
.widget-title{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text)}

.muted{color:var(--text-body)}

/* ===== BUTTONS — GE Vernova style (square, no glow) ===== */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  height:48px;padding:0 28px;
  font-family:var(--font-head);
  font-size:13px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;
  border-radius:8px;
  position:relative;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn .arrow{width:14px;height:1.5px;background:currentColor;position:relative;transition:transform .2s ease;flex-shrink:0}
.btn .arrow::after{content:"";position:absolute;right:-1px;top:-3.5px;width:8px;height:8px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.btn:hover .arrow{transform:translateX(4px)}

.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);min-width:168px;justify-content:center}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}

.btn-light{background:#fff;color:var(--primary);border-color:#fff}
.btn-light:hover{background:transparent;color:#fff;border-color:#fff}

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;border-color:#fff;color:var(--primary)}

.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}

.btn-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:600;font-size:14px;
  color:var(--primary);padding:6px 0;
  border-bottom:1px solid var(--primary);
  transition:color .2s ease, border-color .2s ease;
}
.btn-link .arrow{width:14px;height:1.5px;background:currentColor;position:relative;transition:transform .2s ease}
.btn-link .arrow::after{content:"";position:absolute;right:-1px;top:-3.5px;width:8px;height:8px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.btn-link:hover{color:var(--accent);border-color:var(--accent)}
.btn-link:hover .arrow{transform:translateX(4px)}

/* ===== TOPBAR ===== */
.topbar{
  background:var(--light);
  border-bottom:1px solid var(--border);
  font-size:12px;color:var(--topbar-text);font-weight:500;
}
.topbar .inner{display:flex;justify-content:space-between;align-items:center;height:42px;gap:24px}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.topbar .item{display:inline-flex;align-items:center;gap:8px}
.topbar .ico{width:14px;height:14px;color:var(--accent)}
.topbar .right a{color:var(--topbar-text)}
.topbar a:hover{color:var(--accent)}
@media(max-width:720px){.topbar .right{display:none}.topbar .left{gap:14px;font-size:11px}}

/* ===== NAV ===== */
.nav{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid rgba(7,27,51,.06);
  transition:box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled{background:rgba(255,255,255,.99);box-shadow:0 4px 24px rgba(4,17,31,.07);border-bottom-color:rgba(7,27,51,.09)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:36px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative;display:flex;align-items:center}
.nav-links a{position:relative;padding:8px 0;color:var(--topbar-text);transition:color .25s var(--ease);display:inline-flex;align-items:center;gap:6px}
.nav-links a:hover{color:var(--accent)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links .caret{width:9px;height:9px;flex:0 0 auto;transition:transform .25s var(--ease)}
.nav-links li.menu-item-has-children:hover .caret,.nav-links li.menu-item-has-children:focus-within .caret{transform:rotate(180deg)}
.sub-menu{
  list-style:none;margin:0;padding:10px;position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 40px rgba(4,17,31,.14);
  min-width:220px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);z-index:50;
}
.nav-links li.menu-item-has-children:hover .sub-menu,.nav-links li.menu-item-has-children:focus-within .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.sub-menu li a{display:block;padding:10px 14px;color:var(--text);text-transform:none;font-weight:600;font-size:13.5px;letter-spacing:0;border-radius:8px;width:100%}
.sub-menu li a::after{display:none}
.sub-menu li a:hover{background:var(--light);color:var(--primary)}
.nav .quote{height:42px;padding:0 20px;font-size:12px}
.hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--primary)}
.hamburger span{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
@media(max-width:1024px){.nav-links,.nav .quote{display:none}.hamburger{display:inline-flex}}

.mobile-menu{
  position:fixed;inset:0;background:var(--primary-dk);color:#fff;z-index:80;
  transform:translateY(-100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu .top{display:flex;justify-content:space-between;align-items:center;padding:20px var(--px);border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu nav{padding:40px var(--px);display:flex;flex-direction:column;gap:24px;font-size:22px;font-weight:600;list-style:none;margin:0}
.mobile-menu nav a{color:#fff;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:16px;display:block}
.mobile-menu .close-btn{font-size:30px;line-height:1;color:#fff}
.mobile-menu li.menu-item-has-children{position:relative}
.mobile-menu .mm-toggle{
  position:absolute;right:0;top:0;width:44px;height:44px;background:none;border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.mobile-menu .mm-toggle svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.mobile-menu li.mm-open .mm-toggle svg{transform:rotate(180deg)}
.mobile-menu .sub-menu{
  list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ease);
}
.mobile-menu li.mm-open .sub-menu{max-height:400px}
.mobile-menu .sub-menu li a{font-size:16px;font-weight:500;padding:12px 0 12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}

/* ===== HERO ===== */
.hero{
  background-color:var(--dark);
  background-size:cover;background-position:center;
  color:#fff;position:relative;overflow:hidden;padding:120px 0 130px;
}
.hero .grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,166,166,.07) 1px, transparent 1px),linear-gradient(90deg, rgba(0,166,166,.07) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(circle at 70% 50%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 70% 50%, #000 0%, transparent 75%);
  pointer-events:none;
}
.hero .glow{
  position:absolute;right:-10%;top:-20%;width:60%;height:120%;
  background:radial-gradient(circle, rgba(0,166,166,.22) 0%, transparent 60%);
  pointer-events:none;
}
.hero .inner{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;position:relative;z-index:2}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border:1px solid rgba(0,166,166,.35);border-radius:999px;
  font-family:var(--font-body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);background:rgba(0,166,166,.07);margin-bottom:20px;font-weight:600;
}
.hero-tag .dot{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.hero h1{color:#fff;max-width:620px;letter-spacing:-0.03em}
.hero h1 .accent{color:var(--accent)}
.hero .lead{color:rgba(255,255,255,.78);max-width:520px;font-size:16px;line-height:1.6;margin-top:18px}
.hero .ctas{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap}

.hero-visual{
  aspect-ratio:5/4;width:100%;max-height:440px;max-width:440px;margin:0 auto;
  border-radius:16px;overflow:hidden;align-self:center;
  border:none;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center 35%}

@media(max-width:900px){
  .hero{padding:52px 0 60px}
  .hero .inner{grid-template-columns:1fr;gap:36px}
  .hero-visual{max-width:100%}
  /* Swap in the mobile-cropped banner (see front-page.php) instead of
     letting the desktop-framed photo scale down and get mostly hidden
     behind the dark gradient overlay on a narrow screen. */
  .hero{background-image:linear-gradient(180deg, var(--dark) 0%, rgba(11,31,42,.55) 55%, rgba(11,31,42,.35) 100%), var(--hero-bg-mobile) !important;background-position:center}
}

/* ===== CERT BAR ===== */
.cert-bar{background:var(--white);border-bottom:1px solid var(--border)}
.cert-bar .inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--text);font-weight:600}
.cert-bar .item{display:inline-flex;align-items:center;gap:12px}
.cert-check{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0}
.cert-check svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5;fill:none}
@media(max-width:720px){.cert-bar .inner{height:auto;padding:16px 0;gap:12px;flex-direction:column;align-items:flex-start}}

/* ===== STATS ===== */
.stats{padding:96px 0;background:var(--white);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.stat{background:var(--white);padding:8px 28px 8px 0;display:flex;flex-direction:column;gap:8px}
.stat .num{font-size:clamp(44px,5vw,68px);font-weight:700;color:var(--text);letter-spacing:-0.03em;line-height:1;font-family:var(--font-head);display:flex;align-items:baseline;gap:2px}
.stat .num .unit{font-size:.44em;color:var(--accent);font-weight:600;margin-left:4px}
.stat .lbl{font-size:13px;color:var(--text-mute);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stat .lbl::before{content:"";display:block;width:24px;height:2px;background:var(--accent);margin-bottom:14px}
@media(max-width:900px){.stats{padding:56px 0}.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== SECTION HEAD ===== */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.section-head .l{display:flex;flex-direction:column;gap:16px;max-width:680px}
.section-head > .btn,.section-head > .btn-link{flex-shrink:0}
.section-head .l h2{margin-top:4px}
.section-head .l p{color:var(--text-body);font-size:16px;max-width:540px}

/* ===== PRODUCTS ===== */
.products{padding:120px 0;background:var(--light-warm)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:20px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display:flex;flex-direction:column;min-height:480px;
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(4,17,31,.12);border-color:transparent}
.product-card .img-wrap{height:240px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:#E8E8E8}
.product-card .img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box;transition:transform .6s ease}
.product-card:hover .img-wrap img{transform:scale(1.06)}
.product-card .body{padding:32px;display:flex;flex-direction:column;gap:14px;flex:1}
.product-card .voltage{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12px;color:var(--accent);letter-spacing:.08em;font-weight:600;text-transform:uppercase}
.product-card .voltage::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%}
.product-card h3{color:var(--text);font-size:22px;font-weight:700;letter-spacing:-0.01em}
.product-card .desc{color:var(--text-body);font-size:15px;line-height:1.6;flex:1}
@media(max-width:900px){.products{padding:64px 0}.product-grid{grid-template-columns:1fr}.section-head{margin-bottom:32px}}

/* ===== CUSTOM BAND ===== */
.custom-band{background:#005E60;color:#fff;padding:72px 0;position:relative;overflow:hidden}
.custom-band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(0,166,166,.2) 50%, transparent calc(50% + 1px));
  background-size:60px 100%;
  mask-image:radial-gradient(ellipse at center, #000, transparent 80%);
}
.custom-band .inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative}
.custom-band h2{color:#fff;font-size:32px;font-weight:700;letter-spacing:-0.02em}
.custom-band p{color:rgba(255,255,255,.78);margin-top:10px;font-size:17px}
.custom-band .ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ===== ABOUT ===== */
.about{padding:120px 0;background:var(--white)}
.about .inner{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:stretch}
.about-content{display:flex;flex-direction:column;gap:24px}
.about-content h2{margin-top:8px;max-width:520px}
.about-content p{color:var(--text-body);font-size:16px;line-height:1.7}
.about-media{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-self:start}
.about-img{background:var(--light-2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .4s var(--ease), box-shadow .4s var(--ease);display:flex;flex-direction:column}
.about-img:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(4,17,31,.08)}
.about-img img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--light-2)}
.about-img .lbl{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--primary);letter-spacing:.03em;text-align:center;padding:12px 8px;border-top:1px solid var(--border);background:var(--white)}
@media(max-width:900px){.about{padding:64px 0}.about .inner{grid-template-columns:1fr;gap:40px}.about-media{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.about-media{grid-template-columns:1fr}}

/* ===== FACILITY ===== */
.facility{
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 50%, var(--primary-dk) 100%);
  color:#fff;padding:120px 0;position:relative;overflow:hidden;
}
.facility::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%, rgba(0,166,166,.18) 0, transparent 35%),radial-gradient(circle at 80% 70%, rgba(0,166,166,.14) 0, transparent 35%);
}
.facility::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle, #000 0, transparent 70%);
  -webkit-mask-image:radial-gradient(circle, #000 0, transparent 70%);
}
.facility .center{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.facility h2{color:#fff;font-size:clamp(32px,4.2vw,52px)}
.facility p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.7;max-width:640px}
.facility .cta-row{margin-top:24px}

/* ===== WHY US ===== */
.why{padding:120px 0;background:var(--white)}
.why .inner{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.why-features{display:flex;flex-direction:column;gap:1px;background:var(--border)}
.feature{
  background:var(--white);
  display:grid;grid-template-columns:80px 1fr;gap:24px;
  padding:28px 4px;align-items:flex-start;
  transition:padding .35s var(--ease), background .35s var(--ease);
}
.feature:hover{padding-left:16px;background:var(--accent-lt)}
.feature .icon{width:64px;height:64px;background:var(--primary);color:var(--accent);display:grid;place-items:center;position:relative;border-radius:8px;overflow:hidden;transition:background .35s var(--ease)}
.feature:hover .icon{background:var(--accent)}
.feature .icon img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.feature h3{color:var(--text);font-weight:700;font-size:19px;letter-spacing:-0.01em}
.feature p{color:var(--text-body);font-size:15px;margin-top:6px;line-height:1.6}
.feature-num{font-family:var(--font-body);font-size:12px;color:var(--accent);margin-bottom:6px;letter-spacing:.08em;font-weight:600;text-transform:uppercase}
@media(max-width:900px){.why{padding:64px 0}.why .inner{grid-template-columns:1fr;gap:40px}}

/* ===== TESTIMONIALS ===== */
.testimonials{padding:120px 0;background:var(--light-warm);position:relative;overflow:hidden}
.testimonials::before{content:"";position:absolute;inset:0;background:url('../images/patterns/testimonials-bg.webp') center/cover no-repeat;opacity:.12;z-index:0}
.testimonials .wrap{position:relative;z-index:1}
.t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.t-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:24px;min-height:240px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.t-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(4,17,31,.10);border-color:transparent}
.t-card .q-mark{font-family:var(--font-head);font-size:48px;color:var(--accent);line-height:1;font-weight:700}
.t-card .quote{color:var(--text-body);font-size:15px;line-height:1.65;flex:1}
.t-card .foot{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--border);background:#fff}
.t-card .name{font-weight:700;color:var(--text);font-size:14px}
.t-card .co{background:var(--light);height:32px;padding:0 12px;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:var(--text-mute);letter-spacing:.06em;border-radius:4px}

/* ----- Testimonials slider (auto-scrolling, scroll-snap based) ----- */
.t-slider{position:relative}
.t-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;
}
.t-track::-webkit-scrollbar{display:none}
.t-track .t-card{flex:0 0 calc(33.333% - 14px);scroll-snap-align:start}
.t-slider-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:32px}
.t-slider-nav button.t-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease);flex:0 0 auto;
}
.t-slider-nav button.t-arrow:hover{border-color:var(--accent);color:var(--accent)}
.t-slider-nav button.t-arrow svg{width:18px;height:18px}
.t-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:200px}
.t-dots button{
  width:8px;height:8px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);flex:0 0 auto;
}
.t-dots button.active{background:var(--primary);transform:scale(1.3)}
@media(max-width:1100px){.t-grid{grid-template-columns:repeat(2,1fr)}.t-track .t-card{flex:0 0 calc(50% - 10px)}}
@media(max-width:600px){.t-grid{grid-template-columns:1fr}.testimonials{padding:64px 0}.t-track .t-card{flex:0 0 100%}.t-slider-nav{margin-top:24px;gap:14px}}

/* ===== CLIENTS ===== */
.clients{background:var(--primary);padding:72px 0;color:#fff;overflow:hidden;border-top:1px solid var(--border)}
.clients .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px;padding:0 var(--px);max-width:var(--max);margin-left:auto;margin-right:auto;width:100%}
.clients h3{color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;font-family:var(--font-head)}
.client-marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)}
.client-track{display:flex;gap:20px;width:max-content;animation:scroll-left 36s linear infinite}
.clients:hover .client-track{animation-play-state:paused}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-logo{flex:0 0 auto;width:200px;height:96px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;color:var(--primary);letter-spacing:.06em;font-weight:600;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.client-logo:hover{border-color:var(--accent);transform:translateY(-2px)}
@media(max-width:900px){.client-logo{width:160px;height:84px}.client-track{animation-duration:28s}}
@media(prefers-reduced-motion:reduce){.client-track{animation:none}}

/* ===== AMBITIONS ===== */
.ambitions{padding:120px 0 56px;background:var(--white)}
.ambitions .head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:48px}
.ambitions .head p{color:var(--text-body);font-size:16px;line-height:1.7;max-width:480px}

/* ===== Industries / Applications We Serve ===== */
.industries{padding:56px 0 96px}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.industry-card{
  background:#fff;border:1px solid var(--border);border-radius:20px;padding:36px 30px;
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.industry-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(4,17,31,.12);border-color:transparent}
.industry-card .icon{
  width:64px;height:64px;flex:0 0 auto;border-radius:14px;background:var(--accent-lt);color:var(--primary);
  display:grid;place-items:center;
}
.industry-card .icon svg{width:30px;height:30px}
.industry-card h3{font-size:19px;color:var(--text);line-height:1.35}
.industry-card .btn-link{margin-top:auto;pointer-events:none}
@media(max-width:1100px){.industry-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.industries{padding:40px 0 64px}.industry-grid{grid-template-columns:1fr}}
.map-wrap{background:var(--accent-lt);border:1px solid var(--border);border-radius:20px;padding:48px;position:relative;overflow:hidden}
.map-wrap canvas{width:100%;height:auto;display:block}
.map-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:32px;margin-top:32px;border-top:1px solid var(--border)}
.map-stat .v{font-size:30px;font-weight:700;color:var(--primary);font-family:var(--font-head);letter-spacing:-0.02em}
.map-stat .l{font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:6px}
@media(max-width:900px){.ambitions{padding:64px 0 40px}.ambitions .head{grid-template-columns:1fr;gap:24px}.map-wrap{padding:24px}.map-stats{grid-template-columns:repeat(2,1fr)}}

/* ===== NEWS ===== */
.news{padding:120px 0;background:var(--light-warm)}
.news .section-head h2,.news .eyebrow,.news .btn-link{color:var(--text)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{
  background:var(--white);border:1px solid var(--border);
  display:flex;flex-direction:column;min-height:380px;
  border-radius:16px;overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.news-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(4,17,31,.10);border-color:transparent}
.news-card .ph-img{height:260px;position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:var(--light-2)}
.news-card .ph-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.news-card:hover .ph-img img{transform:scale(1.05)}
.news-card .body{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.news-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-mute);font-family:var(--font-mono);letter-spacing:.06em}
.news-card .pill{padding:4px 10px;border:1px solid var(--border);color:var(--primary);background:var(--accent-lt);border-radius:999px;font-weight:600}
.news-card h3{color:var(--text);font-size:18px;font-weight:600;line-height:1.4;flex:1;letter-spacing:-0.005em}
.news-card .read-more{font-size:12px;color:var(--primary);font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:gap .3s var(--ease)}
.news-card:hover .read-more{gap:14px}
@media(max-width:900px){.news{padding:64px 0}.news-grid{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.footer{background:var(--dark);color:#fff;padding-top:80px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer .brand-block p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.7;max-width:280px;margin-top:16px}
.footer h4{color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:20px;font-family:var(--font-head)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;color:rgba(255,255,255,.65)}
.footer ul a{transition:color .3s var(--ease), padding-left .3s var(--ease);display:block}
.footer ul a:hover{color:var(--accent);padding-left:4px}
.footer .newsletter input{width:100%;background:transparent;border:1px solid rgba(255,255,255,.12);color:#fff;padding:14px 16px;font-size:14px;font-family:inherit;border-radius:8px;outline:none;transition:border-color .25s var(--ease)}
.footer .newsletter input:focus{border-color:var(--accent)}
.footer .newsletter input::placeholder{color:rgba(255,255,255,.4)}
.footer .newsletter button{margin-top:12px;width:100%;background:var(--white);color:var(--primary);height:48px;font-weight:600;font-size:13px;letter-spacing:.02em;border-radius:8px;border:1px solid var(--white);transition:background .25s ease, color .25s ease, border-color .25s ease;cursor:pointer}
.footer .newsletter button:hover{background:transparent;color:var(--white);border-color:var(--white)}
.footer-mid{display:flex;justify-content:space-between;align-items:center;padding:32px 0;border-bottom:1px solid rgba(255,255,255,.08);gap:24px;flex-wrap:wrap}
.footer-mid .contact{display:flex;gap:32px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.7)}
.footer-mid .contact .item{display:flex;align-items:center;gap:10px}
.footer-mid .certs{display:flex;gap:16px;align-items:center}
.cert-badge{width:60px;height:60px;border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden;padding:4px}
.cert-badge img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity .3s var(--ease)}
.cert-badge:hover img{opacity:1;filter:none}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding:24px 0 40px;font-size:12px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:12px}
.footer-bot a:hover{color:#fff}
.footer-bot .links{display:flex;gap:24px}
@media(max-width:1100px){.footer-top{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}.footer{padding-top:48px}}

/* ===== SCROLL REVEAL ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.15s}
.stagger.in>*:nth-child(3){transition-delay:.25s}
.stagger.in>*:nth-child(4){transition-delay:.35s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1;transform:none}
}
/* =====================================================================
   PRODUCT PAGE SECTIONS (Transformer single template)
   ===================================================================== */
/* ===== Breadcrumb ===== */
.breadcrumb{padding:18px 0;background:var(--light);border-bottom:1px solid var(--border)}
.breadcrumb ol{list-style:none;display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:13px;color:var(--text-mute);flex-wrap:wrap}
.breadcrumb a{color:var(--text-mute);transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb li:last-child{color:var(--primary);font-weight:600}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--border)}

/* ===== Hero ===== */
.p-hero{background:var(--light);padding:56px 0 80px}
.p-hero .row{display:grid;grid-template-columns: 1fr 1fr;gap:64px;align-items:start}
.p-hero h1{margin-top:18px;max-width:none}
.p-hero .lead{margin-top:22px;font-size:17px;line-height:1.75;max-width:none;color:var(--text-body)}
.p-hero .lead + .lead{margin-top:16px}
.p-hero .ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.p-hero .cta-lead{flex-basis:100%;font-size:15px;font-weight:600;color:var(--text-body);margin:0}
.gallery{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#E8E8E8;height:420px}
.gallery-slides{position:relative;height:100%}
.gallery-slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:var(--light-2);
  transition:opacity .4s var(--ease);
  display:flex;align-items:flex-end;
}
.gallery-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#E8E8E8;box-sizing:border-box;padding:28px}
.gallery-slide.active{opacity:1;pointer-events:auto}
.gallery-slide span{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--primary);letter-spacing:.04em;
  background:rgba(255,255,255,.92);padding:8px 14px;border-radius:8px;margin:18px;font-weight:600;
}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--border);display:grid;place-items:center;
  color:var(--primary);transition: background .25s var(--ease), color .25s var(--ease);z-index:2;
}
.gallery-nav:hover{background:var(--primary);color:#fff}
.gallery-nav.prev{left:16px}
.gallery-nav.next{right:16px}
.gallery-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.gallery-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.gallery-dots button{width:8px;height:8px;border-radius:50%;background:rgba(0,94,96,.25);transition:background .25s var(--ease), width .25s var(--ease)}
.gallery-dots button.active{background:var(--primary);width:22px;border-radius:5px}
@media (max-width:900px){.gallery{height:300px}}
@media (max-width:900px){
  .hero-top-box{grid-template-columns:1fr}
}

/* ===== Section shell ===== */
.section{padding:96px 0}
.section.alt{background:var(--light)}
/* .stack modifier: single-column stacked heading used on product/inner pages
   (no .l wrapper). Kept distinct from the homepage's row-layout .section-head
   (defined above) so the two never collide regardless of source order. */
.section-head.stack{display:flex;flex-direction:column;gap:16px;margin:0 auto 48px;max-width:680px;text-align:center;align-items:center}
/* .left (Product page only — see single-transformer.php): headings and
   paragraphs run the full content width so every headline has room to sit
   on one line wherever possible, and body copy aligns consistently with
   the page margins throughout the Product page instead of each section
   using its own narrower, mismatched max-width. */
.section-head.stack.left{text-align:left;align-items:flex-start;margin-left:0;max-width:none;width:100%}
.section-head.stack.left h2{font-size:clamp(24px,2.6vw,36px)}
.section-head.stack.left p{max-width:none}
.section-head.stack.left.wide{max-width:none}
.section-head.stack.left.wide p{max-width:none}
@media (max-width:900px){.section{padding:56px 0}.section-head.stack{margin-bottom:32px}}

/* ===== Asset placeholder (used where a real photo/icon is pending) ===== */
.asset-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--light);border:2px dashed var(--border);border-radius:14px;color:var(--text-body);text-align:center;padding:20px}
.asset-placeholder svg{opacity:.45}
.asset-placeholder span{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-body)}
.asset-placeholder.icon-sm{width:56px;height:56px;border-radius:12px;padding:0}
.asset-placeholder.icon-sm svg{width:24px;height:24px}
.asset-placeholder.icon-sm span{display:none}


.spec-table-wrap{border:none;background:transparent}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff}
/* Previously drew the thin divider lines with the "1px gap + grid
   background" trick: gap:1px plus a background on .spec-grid, showing
   through the gaps as thin lines. That background also shows through
   whenever a row doesn't fill evenly (e.g. 8 specs in a 3-column grid
   leaves one empty cell in the last row) — since there's no .spec-cell
   there to cover it with white, the *entire* empty cell rendered as a
   solid coloured box instead of a thin line. Real borders on each cell
   don't have that failure mode: an empty grid cell with no border rules
   of its own just stays transparent. */
.spec-cell{background:#fff;padding:16px 22px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.spec-cell:nth-child(3n){border-right:none}
.spec-cell .lbl{font-weight:700;font-family:var(--font-body);font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--primary)}
.spec-cell .val{color:var(--text-body);font-size:16px;line-height:1.55}
.spec-cell.full{grid-column:1 / -1}
@media (max-width:900px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.spec-grid{grid-template-columns:1fr}}
@media (max-width:700px){
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td{display:block;width:100%}
  .spec-table tr{padding:16px 20px}
  .spec-table td{padding:4px 0}
  .spec-table td:first-child{width:auto}
}

/* ===== Downloads ===== */
.download-card{
  display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:24px 28px;transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.download-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(4,17,31,.10);border-color:transparent}
.download-card .ico{
  width:56px;height:56px;flex:0 0 auto;border-radius:12px;background:var(--accent-lt);
  color:var(--primary);display:grid;place-items:center;
}
.download-card .ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.download-card .meta{flex:1;display:flex;flex-direction:column;gap:4px}
.download-card .meta h4{font-size:16px;font-weight:700;color:var(--text)}
.download-card .meta span{font-size:13px;color:var(--text-mute)}

/* ===== Certifications ===== */
.cert-section{border-top:1px solid var(--border)}
.cert-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 20px;max-width:100%}
.cert-tile{
  width:auto;flex:1 1 100px;display:flex;flex-direction:column;align-items:center;gap:16px;
  border:none;border-radius:0;
  background:transparent;padding:0;
  transition: transform .3s var(--ease);
}
.cert-tile:hover{transform:translateY(-4px)}
.cert-tile .mark{width:92px;height:92px;display:grid;place-items:center;border-radius:16px;background:var(--accent-lt)}
.cert-tile .mark img{width:70%;height:70%;object-fit:contain}
.cert-tile .mark.placeholder{
  width:92px;height:92px;border-radius:16px;background:var(--accent-lt);color:var(--primary);
  display:grid;place-items:center;
}
.cert-tile .mark.placeholder svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.6}
.cert-tile .name{font-size:11.5px;font-weight:700;color:var(--text);text-align:center;line-height:1.3;white-space:nowrap}

/* ===== Applications / feature list grid ===== */
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:transparent;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.check-item{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--text-body);line-height:1.5;background:#fff;padding:20px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.check-item:nth-child(2n){border-right:none}
.check-item:last-child,.check-item:nth-last-child(2):nth-child(odd){border-bottom:none}
.check-item .dot{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--accent-lt);
  color:var(--primary);display:grid;place-items:center;
}
.check-item .dot svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.5;fill:none}
@media (max-width:700px){.check-grid{grid-template-columns:1fr}}

/* ===== Applications icon grid ===== */
.app-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.app-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 26px;
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}
.app-card .icon{
  width:72px;height:72px;border-radius:14px;background:var(--accent-lt);color:var(--primary);
  display:grid;place-items:center;
}
.app-card .icon svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.5}
.app-card span{font-size:16px;font-weight:600;color:var(--text);line-height:1.45}
@media (max-width:1100px){.app-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.app-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Product type cards ===== */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.type-grid.type-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1300px) and (min-width:1001px){.type-grid.type-grid-4{grid-template-columns:repeat(2,1fr)}}
.type-card{
  background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.type-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(4,17,31,.12);border-color:transparent}
.type-card .type-img{
  height:300px;position:relative;overflow:hidden;
  background:#E8E8E8;
  border-bottom:1px solid var(--border);
}
.type-card .type-img img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;transition: transform .6s var(--ease)}
.type-card:hover .type-img img{transform:scale(1.06)}
.type-card .body{padding:28px 28px 32px;display:flex;flex-direction:column;gap:14px;flex:1}
.type-card .btn-link{margin-top:auto}
.type-card h3{font-size:21px}
.type-card .type-sub{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.03em;font-family: var(--font-body)}
.type-card p{color:var(--text-body);font-size:14.5px;line-height:1.65}
.type-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.type-card li{display:flex;gap:10px;font-size:14px;color:var(--text-body);line-height:1.5}
.type-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:7px}
@media (max-width:1000px){.type-grid{grid-template-columns:1fr}.type-grid.type-grid-4{grid-template-columns:1fr}}

/* ===== FAQ accordion ===== */
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.faq-item{background:#fff}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 28px;text-align:left;font-size:16.5px;font-weight:700;color:var(--text);
}
.faq-q .plus{
  width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);
  display:grid;place-items:center;position:relative;transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--primary)}
.faq-q .plus::before{width:12px;height:1.6px}
.faq-q .plus::after{width:1.6px;height:12px;transition: transform .3s var(--ease)}
.faq-item.open .faq-q .plus{background:var(--primary);border-color:var(--primary)}
.faq-item.open .faq-q .plus::before,.faq-item.open .faq-q .plus::after{background:#fff}
.faq-item.open .faq-q .plus::after{transform:rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 28px 26px;font-size:15px;color:var(--text-body);line-height:1.7}
.faq-a-inner ul{margin:12px 0 0;padding-left:20px}
.faq-a-inner li{margin-bottom:6px}

/* ===== CTA band ===== */
.cta-band{background: linear-gradient(120deg, var(--primary-dk), var(--primary));color:#fff;padding:80px 0;position:relative;overflow:hidden}

.cta-band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(0,166,166,.15) 50%, transparent calc(50% + 1px));
  background-size:60px 100%;mask-image: radial-gradient(ellipse at center, #000, transparent 80%);
}
.cta-band .inner{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.7}
.cta-band .ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}.reveal{opacity:1;transform:none}}

/* ===== Supplemental: hero-quote (content added after original design) ===== */
.p-hero .hero-quote{
  margin-top:0;max-width:none;padding:0 0 20px;border:none;border-bottom:1px solid var(--border);
  background:transparent;
}
.p-hero .hero-quote p{font-size:14.5px;line-height:1.65;color:var(--text-body);font-style:italic;margin:0;max-width:640px}
.p-hero .hero-quote-box{
  margin-top:18px;border:1px solid var(--border);border-radius:16px;background:transparent;padding:24px;
}
.p-hero .hero-quote-cols{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px}
.p-hero .hero-quote-col{
  flex:1 1 240px;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;
  background:transparent;border:none;border-radius:0;
}
.p-hero .hero-quote-col li{font-size:14px;line-height:1.55;color:var(--text);padding-left:18px;position:relative}
.p-hero .hero-quote-col li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.p-hero .ctas{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.p-hero .cta-lead{flex-basis:100%;font-size:15px;font-weight:600;color:var(--text-body);margin:0}

.hero-top-box{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;
}
.hero-text-col{padding:40px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border);align-self:stretch}
.hero-text-col h1{margin-top:18px}
.hero-media-col{padding:24px;display:flex;align-items:center;justify-content:center;align-self:stretch}
/* .hero-text-col and .hero-media-col both use align-self:stretch so the
   vertical divider border between them runs the full row height even
   when the copy is short — but stretch also means .hero-media-col is
   often taller than the 420px .gallery box it holds (whenever the text
   column needs more height), and align-items was previously flex-start,
   which pinned the gallery to the top and dumped 100% of that leftover
   height as dead space below the photo. Centering it instead splits any
   leftover height evenly above and below, which reads as intentional
   framing instead of a layout gap. */
/* .gallery previously stretched to height:100% of .hero-media-col, which
   itself stretched (via the grid's align-items) to match whatever height
   the TEXT column needed — often 700-900px when the copy is long. The
   gallery box became far taller than any product photo needs, so the
   actual picture (correctly letterboxed via object-fit:contain) ended up
   looking small/oddly placed inside a mostly-empty column — read by
   anyone glancing at it as "the image is cropped/wrong". Both columns
   now size to their own content (align-items:start) and the gallery gets
   a fixed, sensible height matching the base .gallery box instead. */
.hero-media-col .gallery{max-width:none;width:100%;margin:0;aspect-ratio:auto;height:560px}
@media (max-width:900px){
  .hero-top-box{grid-template-columns:1fr}
  .hero-text-col{border-right:none;border-bottom:1px solid var(--border)}
  /* See the .hero-media-col .gallery comment above for why an explicit
     height is required here specifically — a stacked single-column grid
     row has no definite height for a percentage to resolve against, and
     the gallery (whose slide images are position:absolute, so they don't
     contribute intrinsic height) collapsed to 0px and disappeared. */
  .hero-media-col .gallery{height:320px}
}

/* =====================================================================
   STRATON CUSTOM ADDITIONS
   (inner-page banners, certification-bar upgrade, approved-vendors band,
   footer certification-badge fix, accessibility, print)
   ===================================================================== */

/* ----- Certification bar: bigger text + real logos (per change request) ----- */
.cert-bar .inner{font-size:15px;font-weight:700;padding:18px 0;height:auto;row-gap:16px}
.cert-bar .item{gap:10px}
.cert-bar .cert-logo{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.cert-bar .cert-check{width:24px;height:24px}
@media(max-width:720px){.cert-bar .inner{font-size:13px}}

/* ----- Footer certification badges: guaranteed visible on the dark footer -----
   The previous build used filter:brightness(0) invert(1) which silently hid
   any badge whose source image failed to decode. A light chip behind every
   badge means logos stay visible regardless of their own colour palette. */
.cert-badge{background:#fff;border-color:rgba(255,255,255,.25)}
.cert-badge img{filter:none;opacity:1;mix-blend-mode:normal}
.cert-badge:hover{border-color:var(--accent)}

/* ----- Inner page banner (About / Clients / Quality / Contact / etc.) ----- */
.page-banner{
  position:relative;background:var(--dark);color:#fff;overflow:hidden;
  min-height:280px;display:flex;align-items:center;
}
.page-banner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-banner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(4,17,31,.92) 0%, rgba(4,17,31,.72) 45%, rgba(4,17,31,.35) 100%);
}
.page-banner .wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:56px}
.page-banner h1{color:#fff;font-size:clamp(30px,4vw,48px)}
.page-banner p{color:rgba(255,255,255,.8);margin-top:14px;max-width:560px;font-size:16px}
.page-banner .eyebrow{color:var(--accent)}
@media(max-width:720px){.page-banner{min-height:200px}.page-banner .wrap{padding-top:36px;padding-bottom:36px}}

/* ----- Approved Vendors band (new section requested after "Our Clients") ----- */
.vendors{padding:88px 0;background:var(--light)}
.vendors .head{text-align:center;margin-bottom:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.vendors .eyebrow{color:var(--accent)}
.vendors h2{font-size:32px;color:var(--dark-2)}
.vendor-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.vendor-tile,.vendor-logo{
  background:#fff;border-radius:12px;height:96px;width:172px;display:flex;align-items:center;justify-content:center;
  padding:14px;transition:transform .3s var(--ease), box-shadow .3s var(--ease);flex:0 0 auto;
  border:1px solid var(--border);
}
.vendor-tile:hover,.vendor-logo:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(4,17,31,.1)}
.vendor-tile img,.vendor-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:1100px){.vendor-tile,.vendor-logo{width:calc(25% - 15px)}}
@media(max-width:600px){.vendor-tile,.vendor-logo{width:calc(50% - 10px)}}

/* Note: .about-media uses align-self:start so it does NOT stretch to
   match the (often much taller) text column next to it — .about .inner
   has align-items:stretch by default, which previously forced the image
   collage to inherit the text column's full height, leaving large empty
   gaps above/below each photo. Each image card now sizes to its own
   content instead. */

/* ----- IEC compliance badge placeholder (no logo file supplied yet — see note) ----- */
.cert-badge.iec-placeholder{display:grid;place-items:center;font-family:var(--font-mono);font-size:8px;line-height:1.3;text-align:center;color:#fff;letter-spacing:.02em;padding:6px}

/* ----- Facility video (lightbox-style inline player, replaces "Watch Video" placeholder) ----- */
.facility{background:linear-gradient(135deg,var(--dark) 0%, var(--dark-2) 60%, var(--primary-dk) 100%);padding:96px 0;color:#fff;text-align:center}
.facility .center{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.facility p{color:rgba(255,255,255,.78)}
.video-thumb{
  position:relative;width:100%;max-width:1200px;margin:32px auto 0;aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:#000;cursor:pointer;
}
.video-thumb .thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.video-thumb:hover .thumb-img{transform:scale(1.03)}
.video-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.video-thumb::after{content:"";position:absolute;inset:0;background:rgba(4,17,31,.28)}
.video-thumb .play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;
  display:grid;place-items:center;transition:transform .25s var(--ease), background .25s var(--ease);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.video-thumb .play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.video-thumb .play-btn svg{width:26px;height:26px;fill:var(--primary);margin-left:4px}
.video-thumb.playing .thumb-img,.video-thumb.playing .play-btn,.video-thumb.playing::after{display:none}
.video-thumb.playing video{display:block}
@media(max-width:600px){.video-thumb .play-btn{width:58px;height:58px}.video-thumb .play-btn svg{width:20px;height:20px}}
@media(max-width:900px){.facility{padding:56px 0}}

/* ----- Accessibility ----- */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  background:var(--primary);color:#fff;padding:14px 22px;z-index:9999;border-radius:0 0 8px 0;
  font-weight:700;font-size:14px;
}
.skip-link:focus{
  left:0;top:0;width:auto;height:auto;overflow:visible;
}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent-2);outline-offset:2px;border-radius:2px;
}
.btn:focus-visible{outline-offset:3px}

/* ----- Generic inner-page prose (used for simple content pages: FAQs, Distributor, Custom Design, Privacy, Sitemap) ----- */
/* ----- Milestones timeline (About Us page) ----- */
/* ----- Team cards (About Us — leadership) ----- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:100%}
.team-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 28px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.team-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(4,17,31,.08)}
.team-card .avatar{
  width:76px;height:76px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;
  background:var(--accent-lt);color:var(--primary);font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:.02em;
}
.team-card .name{font-size:17px;margin-bottom:4px}
.team-card .role{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:16px;display:block}
.team-card .bio{font-size:14.5px;line-height:1.65;color:var(--text-body)}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}

/* ----- Goal cards (About Us — future plans) ----- */
.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.goal-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.goal-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(4,17,31,.08)}
.goal-card .num{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.06em;margin-bottom:14px;display:block}
.goal-card h3{font-size:17px;margin-bottom:10px}
.goal-card p{font-size:14.5px;line-height:1.6;color:var(--text-body)}
@media(max-width:1100px){.goal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.goal-grid{grid-template-columns:1fr}}

/* ----- Statement cards (About Us — mission/vision/quality) ----- */
.statement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.statement-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 28px}
.statement-card h3{font-size:18px;margin-bottom:18px;color:var(--primary)}
.statement-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.statement-card li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--text-body)}
.statement-card li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:900px){.statement-grid{grid-template-columns:1fr}}

/* ----- Approval cards (Quality & Approvals — RDSO/EIL/MES) ----- */
.approval-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.approval-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.approval-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(4,17,31,.08)}
.approval-card .badge{
  width:52px;height:52px;border-radius:12px;background:var(--accent-lt);color:var(--primary);
  display:grid;place-items:center;margin-bottom:18px;font-family:var(--font-head);font-weight:800;font-size:14px;
}
.approval-card h3{font-size:17px;margin-bottom:10px}
.approval-card p{font-size:14.5px;line-height:1.65;color:var(--text-body)}
@media(max-width:900px){.approval-grid{grid-template-columns:1fr}}

/* ----- Utility badge pills (Quality & Approvals — distribution utilities) ----- */
.utility-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto}
.utility-pill{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:16px 20px;font-size:14.5px;font-weight:600;color:var(--text);transition:border-color .25s var(--ease);
}
.utility-pill:hover{border-color:var(--accent)}
.utility-pill .tick{
  width:26px;height:26px;border-radius:50%;background:var(--accent-lt);color:var(--primary);flex:0 0 auto;
  display:grid;place-items:center;
}
.utility-pill .tick svg{width:14px;height:14px}
.utility-pill .abbr{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:700}
@media(max-width:700px){.utility-grid{grid-template-columns:1fr}}

/* Redesigned as a horizontal infographic timeline on desktop (a connecting
   rail with numbered year-badges and cards alternating above/below it),
   collapsing to the original simple vertical layout on narrow screens
   where a horizontal rail doesn't have room to breathe. */
.milestones-timeline{position:relative;max-width:1100px;margin:0 auto;padding:0 20px}
.milestones-timeline .rail{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:0;position:relative;align-items:start;
}
.milestones-timeline .rail::before{
  content:"";position:absolute;left:10%;right:10%;top:32px;height:2px;
  background:linear-gradient(90deg, var(--border), var(--accent-lt) 15%, var(--accent-lt) 85%, var(--border));
  z-index:0;
}
.milestone{position:relative;padding:0 12px;text-align:center;z-index:1}
.milestone .badge{
  width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid var(--primary);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;z-index:2;
  box-shadow:0 0 0 6px var(--light);
}
/* Subtle per-item colour rotation (same palette family used in the
   Applications grid) so the timeline reads as a designed infographic
   rather than a repeated identical shape five times in a row. */
.milestone:nth-child(5n+1) .badge{border-color:#00767A}
.milestone:nth-child(5n+1) .badge .num,.milestone:nth-child(5n+1) .year{color:#00767A}
.milestone:nth-child(5n+2) .badge{border-color:#3068C8}
.milestone:nth-child(5n+2) .badge .num,.milestone:nth-child(5n+2) .year{color:#3068C8}
.milestone:nth-child(5n+3) .badge{border-color:#7A4FC9}
.milestone:nth-child(5n+3) .badge .num,.milestone:nth-child(5n+3) .year{color:#7A4FC9}
.milestone:nth-child(5n+4) .badge{border-color:#22946B}
.milestone:nth-child(5n+4) .badge .num,.milestone:nth-child(5n+4) .year{color:#22946B}
.milestone:nth-child(5n+5) .badge{border-color:#C4712A}
.milestone:nth-child(5n+5) .badge .num,.milestone:nth-child(5n+5) .year{color:#C4712A}
.milestone .badge .num{font-family:var(--font-mono);font-weight:700;color:var(--primary);font-size:14px}
.milestone .year{
  display:block;font-family:var(--font-mono);font-size:20px;font-weight:800;letter-spacing:.02em;
  color:var(--primary);margin-bottom:10px;
}
.milestone .card{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  box-shadow:0 4px 16px rgba(4,17,31,.05);
}
.milestone .text{font-size:14px;line-height:1.6;color:var(--text-body)}
@media(max-width:900px){
  .milestones-timeline .rail{grid-template-columns:1fr;gap:28px;text-align:left;padding-left:44px}
  .milestones-timeline .rail::before{left:31px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(var(--border), var(--accent-lt) 10%, var(--accent-lt) 90%, var(--border))}
  .milestone{padding:0;text-align:left}
  .milestone .badge{margin:0 0 0 -44px;position:absolute;left:0;top:0}
  .milestone .year{padding-left:36px}
  .milestone .card{margin-left:36px}
}

/* padding:96px 0 (a two-value shorthand) sets left/right to 0, not just
   "leaves them alone" — and because this rule is declared after .wrap in
   the stylesheet, it wins the cascade for any element carrying both
   classes and silently deletes .wrap's side gutter, however that
   element's inline style is written. That's the actual source of the
   over-wide free-content block (not the inline style, which was already
   fixed last round) — spelling out top/bottom only here so this rule
   never touches left/right at all. */
.page-content{padding-top:96px;padding-bottom:96px}
/* Wherever .wrap and .page-content share the same element, that element
   is always already inside a <section class="section"> (or similar) that
   supplies its own 96px top/bottom padding — so .page-content's 96px
   would double it up. Zeroing just the vertical padding here, on the
   more specific two-class selector, cancels that redundant spacing
   without touching .wrap's own padding-left/padding-right, which must
   stay intact for the side gutter to render. (Previously this vertical
   cancel-out was done per-instance with an inline style, which was
   fragile — a couple of instances got missed/miscopied. Doing it once
   here, keyed off the class combination itself, covers every current
   and future use of the pattern automatically.) */
.wrap.page-content{padding-top:0;padding-bottom:0}
/* Was `.page-content .wrap` only, which requires .wrap to be a nested
   descendant of .page-content. Several templates put both classes on the
   SAME element (e.g. <div class="wrap page-content">) — for those, this
   rule never matched, so the prose block fell back to the page's full
   standard width instead of the narrower reading column it was meant to
   get, throwing off its margins relative to neighbouring sections.
   Fixing the selector alone (still capping at 900px) traded that bug for
   a different, more visible one: on every page that uses this pattern —
   the free-form product description on single-transformer.php, the
   Infrastructure intro, About Us, Quality — the section sits right next
   to full-width siblings (Applications, FAQ, etc. all use the page's
   standard --max width, uncapped), so the 900px block now reads as a
   narrow column with two conspicuous empty margins on either side
   relative to everything around it. Matching the surrounding sections'
   width instead — rather than introducing a special narrower "reading"
   column — keeps every section on a page flush with the same left/right
   edge, which is what was actually being asked for each time this came
   up (Infrastructure, Custom Products, and now here). */
.page-content .wrap,
.wrap.page-content{max-width:var(--max)}
.page-content h2{margin-top:48px;margin-bottom:16px}
.page-content h2:first-child{margin-top:0}
.page-content h3{margin-top:32px;margin-bottom:12px}
.page-content p{margin-bottom:16px;font-size:16px}
.page-content ul,.page-content ol{margin:0 0 16px 22px}
.page-content li{margin-bottom:8px;line-height:1.7}
.page-content img{border-radius:12px;margin:24px 0}
@media(max-width:900px){.page-content{padding-top:56px;padding-bottom:56px}}

/* ----- Blog / News archive ----- */
.blog-archive{padding:96px 0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-archive{padding:56px 0}}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px}
.pagination a,.pagination span{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:8px;font-size:14px;font-weight:600;color:var(--text);
}
.pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}

/* ----- Single blog post ----- */
.single-post{padding:64px 0 96px}
.single-post .wrap{max-width:820px}
.single-post .post-header{margin-bottom:32px}
.single-post .post-meta{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--text-mute);margin-bottom:16px;font-family:var(--font-mono)}
.single-post .featured-img{border-radius:16px;overflow:hidden;margin-bottom:40px;border:1px solid var(--border)}
.single-post .featured-img img{width:100%}
.single-post .entry-content{font-size:17px;line-height:1.8;color:var(--text-body)}
.single-post .entry-content h2{margin-top:40px;margin-bottom:16px;font-size:28px}
.single-post .entry-content h3{margin-top:32px;margin-bottom:12px;font-size:22px}
.single-post .entry-content p{margin-bottom:20px}
.single-post .entry-content ul,.single-post .entry-content ol{margin:0 0 20px 24px}
.single-post .entry-content img{border-radius:12px;margin:24px 0}
.single-post .entry-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ----- 404 ----- */
.error-404{padding:140px 0;text-align:center}
.error-404 h1{font-size:clamp(60px,10vw,140px);color:var(--primary);line-height:1}
.error-404 p{margin:20px auto 32px;max-width:440px;font-size:17px}

/* ----- Print ----- */
@media print{
  .topbar,.nav,.mobile-menu,.hamburger,.footer,.page-banner .bg,.reveal{opacity:1!important;transform:none!important}
  .btn,.btn-link{border:1px solid #000}
}

/* ====== FLOATING ACTION BUTTONS ====== */
.float-actions{position:fixed;right:22px;bottom:22px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.float-btn{
  position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 8px 24px rgba(4,17,31,.22);border:none;cursor:pointer;
  transition:transform .25s var(--ease,ease), box-shadow .25s var(--ease,ease), opacity .25s var(--ease,ease);
}
.float-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 32px rgba(4,17,31,.3)}
.float-call{background:var(--primary)}
.float-whatsapp{background:#25D366}
.float-top{background:var(--text)}
.float-tip{
  position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--text);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;
  padding:7px 12px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease,ease), transform .2s var(--ease,ease);
}
.float-btn:hover .float-tip{opacity:1;transform:translateY(-50%) translateX(0)}
.float-top{opacity:0;visibility:hidden;transform:translateY(10px)}
.float-top.show{opacity:1;visibility:visible;transform:translateY(0)}
@media (max-width:640px){
  .float-actions{right:14px;bottom:14px;gap:10px}
  .float-btn{width:46px;height:46px}
  .float-tip{display:none}
}