/* =====================================================================
   Carbon Rotofluid — MASTER STYLESHEET  (one file for the whole website)
   ---------------------------------------------------------------------
   Every page loads only this file:  <link rel="stylesheet" href="assets/css/style.css">
   To change a colour, font size, spacing etc. edit it HERE, once.

   Page-specific tweaks are switched on by a class on <body>:
     <body class="home">           -> index.html
     <body class="page-listing">   -> products / rotary-joints / rotary-unions
     <body class="page-products">  -> products.html only
   ===================================================================== */

/* =====================================================================
   BASE, TYPOGRAPHY & BUTTONS
   ===================================================================== */

:root{ --orange:#E85A08; --orange-dark:#C94E07; --orange-light:#FFF2E6; --orange-pale:#FFF8F2; --charcoal:#1C1C1C; --ink:#222222; --gray:#5B5955; --gray-light:#8A8782; --line:#EADFD5; --bg:#FBF9F7; --white:#FFFFFF; --radius:10px; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:"Inter", Arial, sans-serif; color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:"Poppins", Arial, sans-serif; font-weight:700; color:var(--charcoal); letter-spacing:-0.01em; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1240px; margin:0 auto; padding:0 32px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange); display:inline-block; }
.section{ padding:88px 0; }
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head h2{ font-size:30px; line-height:1.25; margin-bottom:14px; }
.section-head p{ color:var(--gray); font-size:16px; }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:"Poppins", Arial, sans-serif; font-weight:600; font-size:14.5px; padding:14px 26px; border-radius:6px; transition:all .18s ease; border:2px solid transparent; white-space:nowrap; }
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-dark); transform:translateY(-1px); }
.btn-outline{ border-color:var(--charcoal); color:var(--charcoal); }
.btn-outline:hover{ background:var(--charcoal); color:#fff; }
.btn-outline-light{ border-color:rgba(255,255,255,0.55); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--charcoal); }
.section-tight{ padding:64px 0; }
/* =====================================================================
   HEADER & NAVIGATION  (markup lives in includes/header.html)
   ===================================================================== */
html{ scroll-padding-top:132px; }
.include-slot{ display:block; }
#site-header.include-slot{ min-height:120px; }          /* stops the page jumping while the header loads */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line); }

.topbar{ background:var(--charcoal); color:#cfcfcf; font-size:13px; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:36px; gap:20px; }
.topbar .contact-line{ display:flex; gap:28px; }
.topbar .contact-line span{ display:flex; align-items:center; gap:6px; }
.topbar .contact-line b{ color:var(--orange); font-weight:600; }
.topbar .contact-line a:hover{ color:#fff; }

.navwrap{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; height:84px; }
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height:62px; width:auto; }
.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

.mainnav{ display:flex; align-items:center; justify-content:center; flex:1; min-width:0; }
.menu{ display:flex; align-items:center; list-style:none; }
.menu > li{ position:relative; }
.menu-row{ display:flex; align-items:center; }
.menu a{ font-family:'Poppins',Arial,sans-serif; }
.menu > li > a,
.menu > li > .menu-row > a{
  display:block; padding:31px 12px; font-size:14.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; transition:color .15s ease;
}
.menu > li.has-sub > .menu-row > a{ padding-right:2px; }
.menu > li > a.current,
.menu > li.has-current > .menu-row > a{ color:var(--orange); }
@media (hover:hover){
  .menu > li:hover > a,
  .menu > li:hover > .menu-row > a,
  .menu > li:hover > .menu-row > .sub-toggle{ color:var(--orange); }
}

.sub-toggle{
  display:flex; align-items:center; justify-content:center; align-self:stretch;
  padding:0 8px 0 2px; background:none; border:0; cursor:pointer; color:var(--gray-light);
  font:inherit; -webkit-tap-highlight-color:transparent;
}
.sub-toggle svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.sub-toggle:focus-visible{ color:var(--orange); }
.sub-toggle:focus-visible, .nav-toggle:focus-visible, .menu a:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
.menu > li.open > .menu-row > .sub-toggle svg{ transform:rotate(180deg); }

/* ---- dropdown panel ---- */
.submenu{
  position:absolute; top:100%; left:0; min-width:250px; z-index:50;
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--orange);
  border-radius:0 0 12px 12px; box-shadow:0 18px 36px rgba(30,20,10,0.13);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.menu > li.has-sub.open > .submenu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (hover:hover) and (min-width:1081px){
  .menu > li.has-sub:hover > .submenu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
}
.sub-list{ list-style:none; }
.sub-list a{ display:block; padding:9px 12px; font-size:14px; font-weight:500; color:var(--gray); border-radius:6px; transition:background .12s ease,color .12s ease; }
.sub-list a:hover, .sub-list a.current{ background:var(--orange-pale); color:var(--orange-dark); }
.sub-list a.current{ font-weight:600; }

/* ---- Products mega-menu ---- */
.menu > li.mega-parent{ position:static; }
.submenu.mega{ left:0; right:0; min-width:0; padding:22px 26px 10px; border-radius:0 0 14px 14px; }
.mega-grid{ list-style:none; column-count:5; column-gap:26px; }
.mega-grid > li:nth-child(2), .mega-grid > li:nth-child(3), .mega-grid > li:nth-child(6), .mega-grid > li:nth-child(7){ break-before:column; }  /* sitemap order, one family per column */
.mega .sub-list a{ padding:6px 12px; font-size:13.5px; line-height:1.35; }
.mega-grid > li{ break-inside:avoid; margin-bottom:14px; }
.group-head{ display:flex; align-items:center; border-bottom:2px solid var(--orange-light); margin-bottom:6px; }
.group-head > a{ flex:1; padding:6px 12px 8px; font-size:14px; font-weight:700; color:var(--charcoal); }
.group-head > a:hover, .group-head > a.current{ color:var(--orange); }
.mega .sub-toggle{ display:none; }
.mega-note{ font-size:11px; font-weight:600; color:var(--orange-dark); background:var(--orange-pale); border-radius:10px; padding:2px 8px; margin-left:6px; vertical-align:middle; }

/* ---- hamburger + mobile-only extras (hidden on desktop) ---- */
.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; padding:0; position:relative; -webkit-tap-highlight-color:transparent; }
.nav-toggle span{ position:absolute; left:12px; right:12px; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .22s ease, opacity .18s ease, top .22s ease; }
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); }
.nav-extras{ display:none; }

@media (min-width:1081px) and (max-width:1279px){
  .menu > li > a, .menu > li > .menu-row > a{ padding-left:9px; font-size:14px; }
  .header-cta .btn{ padding:12px 18px; font-size:13.5px; }
  .logo img{ height:56px; }
}

/* ---- tablet & phone: slide-down menu with tap-to-open sub-menus ---- */
@media (max-width:1080px){
  html{ scroll-padding-top:80px; }
  #site-header.include-slot{ min-height:69px; }
  .topbar{ display:none; }
  .navwrap{ height:68px; }
  .logo img{ height:50px; }
  .nav-toggle{ display:block; }
  .header-cta .btn{ display:none; }

  .mainnav{
    position:absolute; top:100%; left:0; right:0; display:none; flex:none;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 26px 40px rgba(20,12,4,0.20);
    max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 0 24px;
  }
  .mainnav.open{ display:flex; }
  body.nav-open{ overflow:hidden; }

  .menu{ display:block; width:100%; }
  .menu > li{ border-bottom:1px solid var(--line); }
  .menu-row{ width:100%; }
  .menu > li > a,
  .menu > li > .menu-row > a{ flex:1; padding:16px 32px; font-size:16px; white-space:normal; }
  .menu > li.has-sub > .menu-row > a{ padding-right:12px; }
  .menu > li > a.current,
  .menu > li.has-current > .menu-row > a{ color:var(--orange); }
  .sub-toggle{ width:64px; padding:0; border-left:1px solid var(--line); color:var(--charcoal); }
  .sub-toggle svg{ width:16px; height:16px; }
  .sub-toggle:focus-visible{ color:var(--orange); }
  .mega .sub-toggle{ display:flex; }
  .open > .menu-row > .sub-toggle svg{ transform:rotate(180deg); }
  .mega-grid > li.open > .group-head .sub-toggle svg{ transform:rotate(180deg); }

  .submenu, .submenu.mega{
    position:static; display:none; min-width:0; opacity:1; visibility:visible; transform:none; transition:none;
    border:0; border-radius:0; box-shadow:none; padding:4px 0 10px; background:var(--orange-pale);
  }
  .menu > li.has-sub:hover > .submenu{ display:none; }                    /* hover must not open things on touch */
  .menu > li.has-sub.open > .submenu{ display:block; }
  .sub-list a{ padding:12px 32px 12px 44px; font-size:15px; border-radius:0; }
  .sub-list a:hover{ background:transparent; color:var(--gray); }
  .sub-list a.current{ background:transparent; color:var(--orange-dark); }

  .mega-grid{ column-count:1; }
  .mega-grid > li{ break-before:auto !important; }
  .mega .sub-list a{ padding:12px 32px 12px 44px; font-size:15px; line-height:1.4; }
  .mega-grid > li{ margin:0; border-top:1px solid #f1e2d5; }
  .mega-grid > li:first-child{ border-top:0; }
  .group-head{ margin:0; border-bottom:0; }
  .group-head > a{ padding:14px 12px 14px 32px; font-size:15px; }
  .group-head > a:hover{ color:var(--charcoal); }
  .group-head > a.current{ color:var(--orange); }
  .mega-grid > li > .sub-list{ display:none; padding-bottom:6px; }
  .mega-grid > li.open > .sub-list{ display:block; }

  .nav-extras{ display:block; padding:20px 32px 0; }
  .nav-extras .btn{ width:100%; justify-content:center; }
  .nav-extras p{ margin-top:14px; font-size:14px; color:var(--gray); line-height:1.8; }
  .nav-extras p a{ color:var(--ink); font-weight:600; }
}
@media (max-width:640px){
  .menu > li > a, .menu > li > .menu-row > a{ padding-left:20px; }
  .group-head > a{ padding-left:20px; }
  .sub-list a{ padding-left:32px; }
  .nav-extras{ padding-left:20px; padding-right:20px; }
}
@media (max-width:420px){
  .logo img{ height:44px; }
}

/* =====================================================================
   HOME PAGE (index.html)
   ===================================================================== */

.hero{ position:relative; overflow:hidden; background:var(--charcoal); }
.hero-slides{ position:relative; height:0; padding-bottom:56.28%; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.hero-slide.active{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:5; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,0.5); cursor:pointer; transition:all .2s ease; padding:0; }
.hero-dots button.active{ width:26px; border-radius:5px; background:var(--orange); }
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.85); border:none; cursor:pointer; font-size:18px; color:var(--charcoal); font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .18s ease; }
.hero-arrow:hover{ background:#fff; }
.hero-arrow.prev{ left:22px; }
.hero-arrow.next{ right:22px; }
.trust-strip{ background:var(--orange); }
.trust-strip .container{ display:flex; justify-content:space-between; align-items:center; height:66px; flex-wrap:wrap; gap:10px; }
.trust-item{ display:flex; align-items:center; gap:10px; color:#fff; font-size:14px; font-weight:600; font-family:"Poppins",sans-serif; }
.trust-item .ic{ width:26px; height:26px; flex-shrink:0; }
.trust-strip .divider{ width:1px; height:22px; background:rgba(255,255,255,0.35); }
.about-teaser{ background:var(--bg); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; }
.stat-card .num{ font-family:"Poppins",sans-serif; font-size:30px; font-weight:800; color:var(--orange); }
.stat-card .lbl{ font-size:13.5px; color:var(--gray); margin-top:4px; }
.about-visual{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; background:linear-gradient(135deg, var(--orange-light), #fff); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.about-visual svg{ width:62%; height:62%; }
.products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:all .2s ease; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.pcard:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.1); transform:translateY(-3px); }
.pcard:hover .pcard-photo img{ transform:scale(1.06); }
.pcard .pcard-photo{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--orange-pale); position:relative; }
.pcard .pcard-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pcard .pcard-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex-grow:1; }
.pcard h4{ font-size:16px; margin-bottom:8px; }
.pcard p{ font-size:13.5px; color:var(--gray); margin-bottom:14px; flex-grow:1; }
.pcard .link{ font-size:13px; font-weight:700; color:var(--orange); font-family:"Poppins",sans-serif; display:flex; align-items:center; gap:6px; }
.pcard.featured{ background:var(--charcoal); border-color:var(--charcoal); }
.pcard.featured h4, .pcard.featured p{ color:#fff; }
.pcard.featured p{ color:#b7b5b2; }
.pcard.featured .link{ color:var(--orange); }
.placeholder-tag{ position:absolute; top:10px; right:10px; background:rgba(28,28,28,0.75); color:#f5c9a3; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 9px; border-radius:12px; font-family:"Poppins",sans-serif; }
.industries-section{ background:var(--charcoal); position:relative; overflow:hidden; }
.industries-section::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(232,90,8,0.05) 0px, rgba(232,90,8,0.05) 2px, transparent 2px, transparent 42px); }
.industries-section .container{ position:relative; z-index:2; }
.industries-section .section-head h2, .industries-section .section-head p{ color:#fff; }
.industries-section .section-head p{ color:#b7b5b2; }
.industries-banner{ border-radius:16px; overflow:hidden; margin-bottom:48px; border:1px solid rgba(255,255,255,0.08); }
.industries-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.icard{ border-radius:var(--radius); overflow:hidden; position:relative; border:1px solid rgba(255,255,255,0.09); transition:all .2s ease; aspect-ratio:3/4; }
.icard:hover{ border-color:var(--orange); transform:translateY(-3px); }
.icard:hover img{ transform:scale(1.08); }
.icard img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.icard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.25) 45%, rgba(10,10,10,0.05) 70%); }
.icard span{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; font-size:13px; font-weight:600; color:#fff; font-family:"Poppins",sans-serif; line-height:1.3; }
.quality-section{ padding:80px 60px; }
.quality-container{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1300px; margin:0 auto; }
.quality-card{ background:#FBEFE8; border-radius:16px; padding:24px; display:flex; align-items:center; justify-content:center; }
.quality-card-image{ width:100%; height:auto; border-radius:12px; display:block; }
.quality-label{ color:#EA580C; font-weight:700; font-size:13px; letter-spacing:1px; display:block; margin-bottom:16px; }
.quality-heading{ font-size:36px; font-weight:800; color:#1a1a1a; line-height:1.25; margin-bottom:32px; }
.quality-point{ display:flex; gap:16px; margin-bottom:24px; }
.quality-number{ flex-shrink:0; width:36px; height:36px; background:#1a1a2e; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.quality-point h3{ font-size:18px; font-weight:700; color:#1a1a1a; margin-bottom:4px; }
.quality-point p{ color:#6b7280; font-size:15px; line-height:1.5; }
.quality-btn{ display:inline-block; background:#EA580C; color:#fff; font-weight:700; padding:16px 28px; border-radius:10px; text-decoration:none; margin-top:12px; }
.resources-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.rcard{ border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; background:#fff; }
.rcard .tag{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--orange); margin-bottom:12px; }
.rcard h4{ font-size:15.5px; margin-bottom:8px; }
.rcard p{ font-size:13.5px; color:var(--gray); }

/* =====================================================================
   INNER PAGE HERO & BREADCRUMB
   ===================================================================== */

.page-hero{ position:relative; overflow:hidden; background:#141312 url(../img/page-hero-bg.webp) center/cover no-repeat; }
.page-hero::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(232,90,8,0.06) 0px, rgba(232,90,8,0.06) 2px, transparent 2px, transparent 42px),
             linear-gradient(90deg, rgba(16,15,14,0.90) 0%, rgba(16,15,14,0.78) 42%, rgba(16,15,14,0.84) 100%); }
.page-hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(330px,410px) 1fr; align-items:center; gap:56px; padding:56px 0 60px; }
.page-hero-form{ order:1; }
.page-hero-text{ order:2; padding:0; min-width:0; }
.breadcrumb{ display:flex; gap:8px; font-size:13px; color:#9a9894; margin-bottom:20px; flex-wrap:wrap; }
.breadcrumb a{ color:#c7c5c1; }
.breadcrumb a:hover{ color:var(--orange); }
.page-hero-text h1{ font-size:38px; color:#fff; line-height:1.22; margin-bottom:16px; max-width:680px; }
.page-hero-text h1 span{ color:var(--orange); }
.page-hero-text p{ color:#d2d0cc; font-size:16px; max-width:640px; margin-bottom:26px; }
.hero-actions{ display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-badge{ background:rgba(232,90,8,0.12); border:1px solid rgba(232,90,8,0.35); color:#f5c9a3; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:20px; font-family:"Poppins",sans-serif; }
.hero-visual{ display:flex; align-items:center; justify-content:center; }
.hero-visual svg{ width:100%; max-width:340px; height:auto; }
.btn-sm{ padding:9px 16px; font-size:12.5px; }
.hero-stats-row{ display:flex; gap:0; margin-top:36px; border-top:1px solid rgba(255,255,255,0.1); padding-top:26px; flex-wrap:wrap; }
.hero-stats-row .hs{ padding-right:40px; margin-right:40px; border-right:1px solid rgba(255,255,255,0.12); }
.hero-stats-row .hs:last-child{ border-right:none; }
.hero-stats-row .num{ font-family:"Poppins",sans-serif; font-weight:800; font-size:24px; color:var(--orange); }
.hero-stats-row .lbl{ font-size:12.5px; color:#a7a5a1; margin-top:3px; }

/* =====================================================================
   SPEC STRIP, PROBLEM/SOLUTION, CONFIG CARDS & BLOCKS
   ===================================================================== */

.spec-strip{ background:var(--orange); }
.spec-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); }
.spec-strip .spec{ padding:26px 20px; text-align:center; border-right:1px solid rgba(255,255,255,0.25); }
.spec-strip .spec:last-child{ border-right:none; }
.spec-strip .spec .lbl{ font-size:12px; color:#fce4d3; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.spec-strip .spec .val{ font-family:"Poppins",sans-serif; font-weight:700; font-size:17px; color:#fff; }
.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.ps-col{ padding:40px; }
.ps-col.problem{ background:var(--bg); border-right:1px solid var(--line); }
.ps-col.solution{ background:var(--orange-pale); }
.ps-tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 12px; border-radius:20px; margin-bottom:16px; font-family:"Poppins",sans-serif; }
.ps-col.problem .ps-tag{ background:#EDEAE4; color:var(--gray); }
.ps-col.solution .ps-tag{ background:var(--orange); color:#fff; }
.ps-col h3{ font-size:19px; margin-bottom:12px; }
.ps-col p{ font-size:14.5px; color:var(--gray); }
.config-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.config-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:all .2s ease; }
.config-card:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.08); transform:translateY(-3px); }
.config-card .code{ font-family:"Poppins",sans-serif; font-weight:800; font-size:24px; color:var(--orange); margin-bottom:6px; }
.config-card h4{ font-size:16px; margin-bottom:12px; }
.config-card p{ font-size:13.8px; color:var(--gray); margin-bottom:16px; }
.config-card .flow-tags{ display:flex; gap:8px; }
.flow-tag{ font-size:11.5px; font-weight:700; background:var(--orange-pale); color:var(--orange-dark); padding:5px 11px; border-radius:14px; font-family:"Poppins",sans-serif; }
.config-blocks{ display:flex; flex-direction:column; gap:22px; }
.config-block{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 36px; transition:all .2s ease; }
.config-block:hover{ border-color:var(--orange); box-shadow:0 16px 34px rgba(232,90,8,0.08); }
.config-block-head{ display:flex; align-items:flex-start; gap:20px; margin-bottom:18px; flex-wrap:wrap; }
.config-block .code-badge{ font-family:"Poppins",sans-serif; font-weight:800; font-size:26px; color:var(--orange); background:var(--orange-pale); border-radius:10px; padding:8px 18px; flex-shrink:0; }
.config-block-head-text{ flex:1; min-width:220px; }
.config-block h4{ font-size:18px; margin-bottom:6px; }
.config-block .flow-tags{ display:flex; gap:8px; margin-top:4px; }
.config-block p.desc{ font-size:14.5px; color:var(--gray); max-width:760px; margin-bottom:22px; }
.config-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery-slot{ aspect-ratio:4/3; border-radius:10px; border:1.5px dashed var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gray-light); transition:all .2s ease; }
.gallery-slot:hover{ border-color:var(--orange); background:var(--orange-pale); }
.gallery-slot svg{ width:26px; height:26px; stroke:var(--gray-light); }
.gallery-slot span{ font-size:11.5px; font-weight:600; font-family:"Poppins",sans-serif; text-align:center; padding:0 10px; }
.config-block.image-first{ padding:0; overflow:hidden; }
.config-block.image-first .config-image-slot{ width:100%; aspect-ratio:21/9; border-bottom:1.5px dashed var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--gray-light); transition:all .2s ease; }
.config-block.image-first:hover .config-image-slot{ border-color:var(--orange); background:var(--orange-pale); }
.config-block.image-first .config-image-slot svg{ width:32px; height:32px; stroke:var(--gray-light); }
.config-block.image-first .config-image-slot span{ font-size:12px; font-weight:600; font-family:"Poppins",sans-serif; }
.config-block.image-first .config-block-body{ padding:34px 36px; }

/* =====================================================================
   FEATURES, ADVANTAGES, BEARING, GRADE CARDS
   ===================================================================== */

.feature-rows{ display:flex; flex-direction:column; gap:0; }
.feature-row{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.feature-row:first-child{ padding-top:0; }
.feature-row:last-child{ border-bottom:none; padding-bottom:0; }
.feature-icon{ width:56px; height:56px; border-radius:12px; background:var(--orange-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feature-icon svg{ width:28px; height:28px; stroke:var(--orange); }
.feature-row h4{ font-size:17px; margin-bottom:8px; }
.feature-row p{ font-size:14.5px; color:var(--gray); max-width:680px; }
.advantage-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.advantage-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; transition:all .2s ease; }
.advantage-card:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.08); transform:translateY(-3px); }
.advantage-card .adv-icon{ width:44px; height:44px; border-radius:10px; background:var(--orange-pale); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.advantage-card .adv-icon svg{ width:22px; height:22px; stroke:var(--orange); }
.advantage-card h4{ font-size:15.5px; margin-bottom:8px; }
.advantage-card p{ font-size:13.5px; color:var(--gray); }
.bearing-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
.bearing-visual{ background:var(--charcoal); border-radius:16px; padding:44px; position:relative; overflow:hidden; }
.bearing-visual svg{ width:100%; height:auto; }
.bearing-visual .cap{ margin-top:18px; font-size:12.5px; color:#a7a5a1; text-align:center; }
.load-list{ display:flex; flex-direction:column; gap:20px; margin-top:8px; }
.load-list li{ display:flex; gap:16px; }
.load-list .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:7px; }
.load-list h4{ font-size:15.5px; margin-bottom:4px; }
.load-list p{ font-size:13.8px; color:var(--gray); }
.pending-note{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:var(--gray-light); background:var(--bg); border:1px solid var(--line); padding:4px 10px; border-radius:12px; font-family:"Poppins",sans-serif; margin-bottom:10px; }
.grade-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; transition:all .2s ease; }
.grade-card:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.08); transform:translateY(-3px); }
.grade-card .temp-badge{ font-family:"Poppins",sans-serif; font-weight:800; font-size:26px; color:var(--orange); margin-bottom:4px; }
.grade-card .temp-lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--gray-light); margin-bottom:16px; }
.grade-card h4{ font-size:15.5px; margin-bottom:8px; }
.grade-card p{ font-size:13.5px; color:var(--gray); }
.coming-soon-note{ font-size:11px; color:var(--gray-light); font-style:italic; margin-top:-8px; margin-bottom:14px; }
.compare-note{ background:var(--orange-pale); border:1px solid var(--line); border-radius:14px; padding:30px 34px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.compare-note h3{ font-size:18px; margin-bottom:6px; }
.compare-note p{ font-size:14px; color:var(--gray); max-width:520px; }

/* =====================================================================
   SPEC TABLES & COMPATIBILITY MATRIX
   ===================================================================== */

.tables-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.spec-table-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.spec-table-card .table-head{ background:var(--charcoal); padding:16px 22px; }
.spec-table-card .table-head h4{ color:#fff; font-size:14.5px; letter-spacing:0.3px; }
table{ width:100%; border-collapse:collapse; }
table tr{ border-bottom:1px solid var(--line); }
table tr:last-child{ border-bottom:none; }
table td{ padding:14px 22px; font-size:14px; }
table td:first-child{ color:var(--gray); width:42%; }
table td:last-child{ color:var(--charcoal); font-weight:600; font-family:"Poppins",sans-serif; font-size:13.5px; }
table tr:nth-child(even){ background:var(--bg); }
.matrix-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.matrix-wrap{ overflow-x:auto; }
table.matrix{ width:100%; border-collapse:collapse; min-width:860px; }
table.matrix thead th{ background:var(--charcoal); color:#fff; font-family:"Poppins",sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.2px; padding:15px 10px; text-align:center; white-space:nowrap; }
table.matrix thead th:first-child{ text-align:left; padding-left:22px; position:sticky; left:0; background:var(--charcoal); z-index:2; }
table.matrix tbody td{ padding:12px 10px; text-align:center; font-size:13.5px; color:var(--gray); border-bottom:1px solid var(--line); }
table.matrix tbody tr:last-child td{ border-bottom:none; }
table.matrix tbody td:first-child{ text-align:left; padding-left:22px; font-family:"Poppins",sans-serif; font-weight:700; font-size:13.5px; color:var(--charcoal); position:sticky; left:0; background:#fff; }
table.matrix tbody tr:nth-child(even){ background:var(--bg); }
table.matrix tbody tr:nth-child(even) td:first-child{ background:var(--bg); }
table.matrix .yes{ color:var(--orange); font-weight:800; font-size:15px; }
table.matrix .no{ color:var(--gray-light); }
.matrix-legend{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray); padding:14px 22px; border-top:1px solid var(--line); background:var(--bg); }
.matrix-legend .yes{ color:var(--orange); font-weight:800; }

/* =====================================================================
   LISTING PAGES (products / rotary joints / rotary unions)
   ===================================================================== */

.products-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.products-card .table-head{ background:var(--charcoal); padding:18px 26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.products-card .table-head h4{ color:#fff; font-size:15px; letter-spacing:0.2px; }
.products-card .table-head span{ color:#c7c5c1; font-size:12.5px; }
.products-card .chip-body{ padding:30px 26px; display:flex; flex-wrap:wrap; gap:12px; }
.series-chip{ display:inline-flex; align-items:center; gap:8px; font-family:"Poppins",sans-serif; font-weight:700; font-size:14px; color:var(--charcoal); background:var(--orange-pale); border:1px solid rgba(232,90,8,0.25); padding:10px 18px; border-radius:8px; transition:all .18s ease; }
.series-chip:hover{ background:var(--orange); color:#fff; border-color:var(--orange); transform:translateY(-2px); }
.series-chip.spares{ background:var(--bg); border-color:var(--line); color:var(--gray); }
.series-chip.spares:hover{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
.products-note{ padding:0 26px 26px; font-size:13px; color:var(--gray); }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter-pill{ font-size:13px; font-weight:600; font-family:"Poppins",sans-serif; padding:9px 18px; border-radius:20px; border:1px solid var(--line); color:var(--gray); background:#fff; }
.filter-pill.active{ background:var(--charcoal); border-color:var(--charcoal); color:#fff; }
.series-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.series-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; transition:all .2s ease; position:relative; }
.series-card:hover{ border-color:var(--orange); box-shadow:0 16px 32px rgba(232,90,8,0.09); transform:translateY(-3px); }
.series-card .top-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.series-card .series-code{ font-family:"Poppins",sans-serif; font-weight:800; font-size:22px; color:var(--orange); }
.series-card .tag-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:12px; font-family:"Poppins",sans-serif; }
.series-card .tag-pill.standard{ background:var(--orange-pale); color:var(--orange-dark); }
.series-card .tag-pill.special{ background:#EDEAE4; color:var(--gray); }
.series-card .tag-pill.featured-tag{ background:var(--charcoal); color:#fff; }
.series-card h4{ font-size:16px; margin-bottom:8px; }
.series-card p{ font-size:13.5px; color:var(--gray); margin-bottom:16px; flex-grow:1; }
.series-card .flow-tags{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.series-card .link{ font-size:13.5px; font-weight:700; color:var(--orange); font-family:"Poppins",sans-serif; display:flex; align-items:center; gap:6px; margin-top:auto; }
.series-card.disabled{ opacity:0.6; }
.series-card.disabled:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.series-card.disabled .link{ color:var(--gray-light); }
.series-card.featured{ background:var(--charcoal); border-color:var(--charcoal); }
.series-card.featured .series-code{ color:var(--orange); }
.series-card.featured h4, .series-card.featured p{ color:#fff; }
.series-card.featured p{ color:#b7b5b2; }
.series-card.featured .flow-tag{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); color:#d9d7d3; }
.series-card.featured .link{ color:var(--orange); }
.products-list{ display:flex; flex-direction:column; gap:26px; }
.prow{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:all .2s ease; align-items:stretch; }
.prow:hover{ border-color:var(--orange); box-shadow:0 18px 38px rgba(232,90,8,0.08); }
.prow.reverse{ grid-template-columns:1fr 1fr; }
.prow.reverse .prow-text{ order:2; }
.prow.reverse .prow-photo{ order:1; }
.prow-text{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
.prow-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.prow-kicker .dash{ width:22px; height:2px; background:var(--orange); display:inline-block; }
.prow-kicker span{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); font-family:"Poppins",sans-serif; }
.prow-text h3{ font-size:22px; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:14px; }
.prow-text p{ font-size:14.5px; color:var(--gray); margin-bottom:24px; max-width:440px; }
.prow-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.prow-photo{ position:relative; overflow:hidden; min-height:320px; }
.prow-photo img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; transition:transform .4s ease; }
.prow:hover .prow-photo img{ transform:scale(1.05); }
.prow-photo .placeholder-tag{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(28,28,28,0.75); color:#f5c9a3; font-size:10.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:5px 11px; border-radius:12px; font-family:"Poppins",sans-serif; }
.prow.featured{ background:var(--charcoal); border-color:var(--charcoal); }
.prow.featured .prow-kicker span{ color:var(--orange); }
.prow.featured h3, .prow.featured p{ color:#fff; }
.prow.featured p{ color:#b7b5b2; }
.help-section .container{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.help-col{ padding:44px 40px; }
.help-col.guide{ background:var(--bg); border-right:1px solid var(--line); }
.help-col.custom{ background:var(--orange-pale); }
.help-col .tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 12px; border-radius:20px; margin-bottom:16px; font-family:"Poppins",sans-serif; }
.help-col.guide .tag{ background:#EDEAE4; color:var(--gray); }
.help-col.custom .tag{ background:var(--orange); color:#fff; }
.help-col h3{ font-size:21px; margin-bottom:10px; }
.help-col p{ font-size:14.5px; color:var(--gray); margin-bottom:22px; }

/* =====================================================================
   ACCESSORY CARDS
   ===================================================================== */

.accessory-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.accessory-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:all .2s ease; display:flex; flex-direction:column; }
.accessory-card:hover{ border-color:var(--orange); box-shadow:0 16px 34px rgba(232,90,8,0.1); transform:translateY(-3px); }
.accessory-card .accessory-photo{ aspect-ratio:4/3; border-bottom:1px solid var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gray-light); }
.accessory-card .accessory-photo svg{ width:30px; height:30px; stroke:var(--gray-light); }
.accessory-card .accessory-photo span{ font-size:12px; font-weight:600; font-family:"Poppins",sans-serif; text-align:center; padding:0 14px; }
.accessory-card .accessory-body{ padding:26px 26px 24px; display:flex; flex-direction:column; flex:1; }
.accessory-card h4{ font-size:17px; margin-bottom:10px; }
.accessory-card p{ font-size:14px; color:var(--gray); flex:1; margin-bottom:18px; }
.accessory-card .read-more{ display:inline-flex; align-items:center; gap:6px; font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px; color:var(--orange); }
.accessory-card .read-more svg{ width:14px; height:14px; stroke:var(--orange); transition:transform .15s ease; }
.accessory-card:hover .read-more svg{ transform:translateX(3px); }

/* =====================================================================
   CTA BANNER
   ===================================================================== */

.cta-banner{ background:linear-gradient(115deg, var(--charcoal) 0%, var(--charcoal) 55%, var(--orange) 55%, var(--orange-dark) 100%); padding:64px 0; }
.cta-banner .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.cta-banner h2{ color:#fff; font-size:27px; max-width:540px; }
.cta-banner p{ color:#f0d9c8; font-size:14.5px; margin-top:8px; max-width:520px; }
.cta-banner .actions{ display:flex; gap:14px; }

/* =====================================================================
   FOOTER
   ===================================================================== */

footer{ background:#141414; color:#a7a5a1; padding-top:72px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand img{ height:44px; margin-bottom:16px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:13.5px; line-height:1.7; color:#8a8884; max-width:280px; }
.footer-col h5{ font-family:"Poppins",sans-serif; color:#fff; font-size:14px; margin-bottom:18px; letter-spacing:0.3px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul li a{ font-size:13.5px; color:#a7a5a1; transition:color .15s ease; }
.footer-col ul li a:hover{ color:var(--orange); }
.footer-contact li{ display:flex; gap:10px; font-size:13.5px; margin-bottom:14px; align-items:flex-start; }
.footer-contact svg{ width:16px; height:16px; stroke:var(--orange); flex-shrink:0; margin-top:2px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#77756f; }
.footer-bottom .badges{ display:flex; gap:16px; align-items:center; }
.footer-bottom .badges span{ display:flex; align-items:center; gap:6px; }

/* footer logo sits on a white tile (the logo has a white background) */
.footer-brand .footer-logo{ filter:none; background:#fff; border-radius:10px; padding:6px 12px; height:64px; width:auto; }
.footer-contact a{ color:inherit; }
.footer-contact a:hover{ color:var(--orange); }

/* =====================================================================
   RESPONSIVE  (all breakpoints together, always after the base rules)
   ===================================================================== */

@media (max-width:1080px){
  .hero-visual{ display:none; }
  .ps-grid{ grid-template-columns:1fr; }
  .ps-col.problem{ border-right:none; border-bottom:1px solid var(--line); }
  .config-grid{ grid-template-columns:1fr; }
  .config-gallery{ grid-template-columns:repeat(3,1fr); }
  .config-block{ padding:28px 24px; }
  .bearing-grid{ grid-template-columns:1fr; }
  .advantage-grid{ grid-template-columns:repeat(2,1fr); }
  .accessory-grid{ grid-template-columns:repeat(2,1fr); }
  .tables-grid{ grid-template-columns:1fr; }
  .spec-strip .container{ grid-template-columns:repeat(2,1fr); }
  .spec-strip .spec:nth-child(2){ border-right:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .industries-grid{ grid-template-columns:repeat(3,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .quality-section .container{ grid-template-columns:1fr; }
  .series-grid{ grid-template-columns:repeat(2,1fr); }
  .help-section .container{ grid-template-columns:1fr; }
  .help-col.guide{ border-right:none; border-bottom:1px solid var(--line); }
}
@media (max-width: 900px){
  .quality-container{ grid-template-columns:1fr; }
  .quality-section{ padding:48px 24px; }
}
@media (max-width:820px){
  .prow, .prow.reverse{ grid-template-columns:1fr; }
  .prow.reverse .prow-text{ order:1; }
  .prow.reverse .prow-photo{ order:2; }
  .prow-photo{ min-height:240px; }
}
@media (max-width:640px){
  .spec-strip .container{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .cta-banner .container{ flex-direction:column; align-items:flex-start; }
  table td{ padding:12px 14px; font-size:13px; }
  .config-gallery{ grid-template-columns:1fr 1fr; }
  .config-block-head{ flex-direction:column; }
  .advantage-grid{ grid-template-columns:1fr; }
  .accessory-grid{ grid-template-columns:1fr; }
  .feature-row{ grid-template-columns:48px 1fr; }
  .config-block.image-first .config-block-body{ padding:26px 22px; }
  .products-grid{ grid-template-columns:1fr 1fr; }
  .industries-grid{ grid-template-columns:1fr 1fr; }
  .series-grid{ grid-template-columns:1fr; }
  .hero-stats-row{ gap:18px 0; }
  .hero-stats-row .hs{ padding-right:20px; margin-right:20px; }
  .prow-text{ padding:32px 26px; }
}

/* --- added in the clean-up: phone/tablet fixes for things that used to overflow the screen --- */
.cta-banner .actions{ flex-wrap:wrap; }
.resources-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .resources-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .container{ padding:0 20px; }
  .resources-grid{ grid-template-columns:1fr; }
  .cta-banner .container > div{ width:100%; min-width:0; }
  .cta-banner .actions .btn{ white-space:normal; }
  .hero-actions .btn{ white-space:normal; }
  /* some pages force 3 columns with an inline style - on phones always go to one column */
  .advantage-grid{ grid-template-columns:1fr !important; }
  .spec-strip .spec{ min-width:0; padding:20px 12px; }
  .spec-strip .spec .val{ overflow-wrap:anywhere; }
}

/* =====================================================================
   PAGE-SPECIFIC OVERRIDES  (body classes)
   ===================================================================== */

body.home .section-head{ max-width:640px; margin-bottom:48px; }
body.page-products .section-head{ max-width:680px; margin-bottom:20px; }
body.home .section-head h2{ font-size:32px; line-height:1.25; margin-bottom:14px; }
body.page-listing .flow-tag{ font-size:11px; font-weight:700; background:var(--bg); color:var(--gray); padding:4px 10px; border-radius:12px; border:1px solid var(--line); }
body.home .cta-banner h2{ color:#fff; font-size:28px; max-width:480px; }


/* =====================================================================
   INNER PAGE HEADER — enquiry form (left) + heading (right)
   markup of the form: includes/enquiry-form.html
   ===================================================================== */
.enquiry-card{ background:#fff; border-radius:16px; padding:26px 24px 20px; box-shadow:0 24px 60px rgba(0,0,0,0.35); border-top:4px solid var(--orange); }
.enquiry-head{ margin-bottom:16px; }
.enquiry-kicker{ display:inline-block; font:700 11.5px "Poppins",sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:var(--orange); background:var(--orange-pale); padding:4px 10px; border-radius:12px; margin-bottom:10px; }
.enquiry-head h3{ font-size:19px; line-height:1.3; margin-bottom:6px; }
.enquiry-head p{ font-size:13px; color:var(--gray); line-height:1.5; }
.enquiry-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.ef{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ef-full{ grid-column:1 / -1; }
.ef span{ font:600 12px "Poppins",sans-serif; color:var(--charcoal); }
.ef input, .ef textarea{ width:100%; font:14px "Inter",Arial,sans-serif; color:var(--ink); background:var(--bg); border:1px solid #e3d8cd; border-radius:8px; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ef textarea{ resize:vertical; min-height:72px; }
.ef input:focus, .ef textarea:focus{ outline:none; border-color:var(--orange); background:#fff; box-shadow:0 0 0 3px rgba(232,90,8,0.15); }
.ef input.invalid, .ef textarea.invalid{ border-color:#d93025; background:#fff6f5; }
.ef-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.enquiry-submit{ width:100%; justify-content:center; margin-top:16px; cursor:pointer; font-size:15px; }
.enquiry-submit[disabled]{ opacity:.7; cursor:wait; transform:none; }
.enquiry-status{ font-size:13.5px; margin-top:10px; line-height:1.45; display:none; padding:10px 12px; border-radius:8px; }
.enquiry-status.ok{ display:block; background:#e9f7ef; color:#1e6b3a; }
.enquiry-status.err{ display:block; background:#fdecea; color:#a52714; }
.enquiry-note{ font-size:12.5px; color:var(--gray); margin-top:12px; text-align:center; }
.enquiry-note a{ color:var(--charcoal); font-weight:600; }
.enquiry-note a:hover{ color:var(--orange); }

@media (max-width:1080px){
  .page-hero-inner{ grid-template-columns:1fr; gap:34px; padding:44px 0 48px; }
  .page-hero-text{ order:1; }
  .page-hero-form{ order:2; max-width:560px; width:100%; }
}
@media (max-width:640px){
  .page-hero-inner{ padding:34px 0 40px; }
  .page-hero-text h1{ font-size:28px; }
  .page-hero-text p{ font-size:15px; }
  .enquiry-card{ padding:22px 18px 18px; }
  .enquiry-fields{ grid-template-columns:1fr; }
  .ef input, .ef textarea{ font-size:16px; }          /* stops iPhone zooming into the field */
}

/* =====================================================================
   PRODUCT PHOTO GALLERY (3 photos after "Key features")  + lightbox
   ===================================================================== */
.product-gallery-section{ background:var(--bg); }
.pgallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pgallery-item{ position:relative; display:block; width:100%; font:inherit; -webkit-appearance:none; appearance:none; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); cursor:zoom-in; padding:0; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pgallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.pgallery-item:hover{ border-color:var(--orange); box-shadow:0 18px 36px rgba(232,90,8,0.12); transform:translateY(-3px); }
.pgallery-item:hover img{ transform:scale(1.05); }
.pgallery-item:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.pgallery-item .zoom{ position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:rgba(28,28,28,0.78); display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:all .2s ease; }
.pgallery-item .zoom svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; }
.pgallery-item:hover .zoom, .pgallery-item:focus-visible .zoom{ opacity:1; transform:none; }
.pgallery-dots{ display:none; }

@media (max-width:820px){
  .pgallery{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; margin:0 -20px; padding-left:20px; padding-right:20px; scroll-padding:0 20px; }
  .pgallery::-webkit-scrollbar{ display:none; }
  .pgallery-item{ scroll-snap-align:start; }
  .pgallery-item .zoom{ opacity:1; transform:none; }
  .pgallery-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .pgallery-dots span{ width:8px; height:8px; border-radius:50%; background:#d9cfc5; transition:all .2s ease; }
  .pgallery-dots span.on{ width:22px; border-radius:5px; background:var(--orange); }
}
@media (min-width:821px) and (max-width:1080px){ .pgallery{ gap:16px; } }

/* images inside the existing small gallery slots (5000 series, multiport page) */
.gallery-slot.has-image{ padding:0; border:1px solid var(--line); background:#fff; overflow:hidden; cursor:zoom-in; }
.gallery-slot.has-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gallery-slot.has-image:hover img{ transform:scale(1.05); }
.config-block.image-first .config-image-slot.has-image{ padding:0; border-bottom:1px solid var(--line); overflow:hidden; background:#fff; }
.config-block.image-first .config-image-slot.has-image img{ width:100%; height:100%; object-fit:cover; display:block; }

.lightbox{ position:fixed; inset:0; z-index:3000; background:rgba(12,11,10,0.92); display:none; align-items:center; justify-content:center; padding:56px 16px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(92vw,900px); max-height:82vh; width:auto; height:auto; border-radius:12px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.lightbox button{ position:absolute; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,0.12); color:#fff; font-size:22px; cursor:pointer; display:grid; place-items:center; transition:background .15s ease; }
.lightbox button:hover{ background:var(--orange); }
.lightbox .lb-close{ top:16px; right:16px; }
.lightbox .lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:16px; top:50%; transform:translateY(-50%); }
.lightbox .lb-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#cfcac4; font:600 13px "Poppins",sans-serif; }
body.lb-open{ overflow:hidden; }

/* =====================================================================
   WHATSAPP FLOATING BUTTON (markup in includes/footer.html)
   ===================================================================== */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:1500; display:flex; align-items:center; gap:10px; }
.wa-float .wa-btn{ width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,0.25); position:relative; transition:transform .2s ease; }
.wa-float .wa-btn::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.5; animation:waPulse 2.2s ease-out infinite; z-index:-1; }
.wa-float svg{ width:32px; height:32px; fill:#fff; }
.wa-float .wa-label{ background:#fff; color:var(--charcoal); font:600 13px "Poppins",sans-serif; padding:8px 14px; border-radius:20px; box-shadow:0 8px 22px rgba(0,0,0,0.15); white-space:nowrap; opacity:0; transform:translateX(8px); transition:all .2s ease; pointer-events:none; }
.wa-float:hover .wa-btn{ transform:scale(1.06); }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label{ opacity:1; transform:none; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .wa-float .wa-btn::before{ animation:none; } }
@media (max-width:640px){ .wa-float{ right:14px; bottom:14px; } .wa-float .wa-btn{ width:54px; height:54px; } .wa-float .wa-label{ display:none; } }
body.nav-open .wa-float, body.lb-open .wa-float{ display:none; }

/* home: industry cards are links */
a.icard{ display:block; }
.config-block.image-first .config-gallery-top{ padding:24px 36px 0; }
@media (max-width:640px){ .config-block.image-first .config-gallery-top{ padding:20px 22px 0; } }
.accessory-card .accessory-photo.has-image{ padding:0; display:block; overflow:hidden; }
.accessory-card .accessory-photo.has-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.accessory-card:hover .accessory-photo.has-image img{ transform:scale(1.05); }
.page-hero .hero-stats-row .hs{ padding-right:26px; margin-right:26px; }
@media (max-width:640px){ .page-hero .hero-stats-row .hs{ padding-right:18px; margin-right:18px; } }
@media (min-width:821px){ .pgallery.pgallery-n2{ grid-template-columns:repeat(2,1fr); max-width:820px; } }

/* =====================================================================
   CONTACT US PAGE (contact-us.html)
   ===================================================================== */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.contact-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px 24px; transition:all .2s ease; }
.contact-card:hover{ border-color:var(--orange); box-shadow:0 16px 32px rgba(232,90,8,0.1); transform:translateY(-3px); }
.cc-icon{ width:52px; height:52px; border-radius:12px; background:var(--orange-pale); display:grid; place-items:center; margin-bottom:18px; }
.cc-icon svg{ width:26px; height:26px; stroke:var(--orange); }
.cc-icon.cc-wa{ background:#e7f9ee; }
.cc-icon.cc-wa svg{ stroke:none; fill:#1faa53; }
.contact-card h4{ font-size:17px; margin-bottom:8px; }
.contact-card p{ font-size:14px; color:var(--gray); line-height:1.6; flex:1; margin-bottom:16px; }
.cc-big{ font:700 16px "Poppins",sans-serif; color:var(--charcoal); overflow-wrap:anywhere; }
.contact-card:hover .cc-big{ color:var(--orange); }
.cc-link{ font:700 13.5px "Poppins",sans-serif; color:var(--orange); }
.contact-map-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.contact-h2{ font-size:30px; line-height:1.25; margin-bottom:14px; }
.contact-lead{ color:var(--gray); font-size:15.5px; margin-bottom:20px; }
.contact-checklist{ margin-bottom:22px; }
.contact-checklist li{ position:relative; padding-left:30px; margin-bottom:12px; font-size:14.5px; color:var(--ink); }
.contact-checklist li::before{ content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.contact-map{ border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 40px rgba(30,20,10,0.08); aspect-ratio:4/3; background:#eee; }
.contact-map iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:1080px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } .contact-map-grid{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:640px){ .contact-grid{ grid-template-columns:1fr; } .contact-h2{ font-size:25px; } .contact-map{ aspect-ratio:1/1; } }