/*
  Combined stylesheet (style.css + site-extra.css)
  Generated for performance: reduces blocking CSS requests.
*/

/* Base styles for the Lancing packaging website */

/* Import a modern, sans‑serif font to enhance readability and give the site
   a contemporary feel.  Montserrat is free and widely used for its clean
   appearance.  The font is loaded from Google Fonts via <link> tags in templates. */

/* Reset margins and paddings and ensure border‑box sizing */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f7f9fc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header and navigation */
header {
  background: linear-gradient(90deg, #052f6d, #0C5ADB);
  color: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* Add a subtle shadow to distinguish the header from the page content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 64px;
}

nav .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
}

/* Brand mark */
.logo-img {
  height: 34px;
  width: auto;
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 14px;
  transition: max-height 0.3s ease;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 10px;
  display: block;
  transition: color 0.3s ease;
}

nav ul li a:hover,
nav ul li a:focus {
  color: #cbdcff;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* Hero section */
/* Hero section
   Expanded height and gradient background for a more immersive feel */
.hero {
  /* White base with Lancing blue overlay */
  background-color: #ffffff;
  background-image: linear-gradient(90deg,
    rgba(5,47,109,0.96) 0%,
    rgba(5,47,109,0.78) 44%,
    rgba(5,47,109,0.15) 72%,
    rgba(255,255,255,0.00) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 80px 20px;
  min-height: 60vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}


.hero-text {
  max-width: 600px;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-text p {
  font-size: 1rem;
  margin-bottom: 30px;
}

.hero-text .btn {
  display: inline-block;
  background: #1E80FB;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  margin-right: 10px;
  transition: background 0.3s ease;
}

.hero-text .btn.secondary {
  background: #fff;
  color: #0C5ADB;
  border: 2px solid #0C5ADB;
}

.hero-text .btn:hover {
  background: #0c4db8;
}

.hero img {
  max-width: 500px;
  width: 100%;
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Standalone feature images (e.g., product range illustration on the home page) */
.feature-image {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* General container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  flex: 1;
}

.section {
  padding: 40px 0;
}

.section h2 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
  color: #052f6d;
  font-size: 2.2rem;
}

.section p {
  margin-bottom: 10px;
}

/* Features and Trust Bar */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.feature {
  background: #fff;
  padding: 1.5rem;
  flex: 1;
  min-width: 250px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.feature h3 {
  margin-bottom: 0.5rem;
  color: #0C5ADB;
}

.trust-bar {
  display: flex;
  gap: 14px;
  margin-top: 40px;
}

.trust-item {
  flex: 1;
  background: #fff;
  padding: 1.2rem;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.trust-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0C5ADB;
  margin-bottom: 0.3rem;
}

.trust-label {
  font-size: 0.85rem;
  color: #052f6d;
}

/* Series Section */
.section-series .series-grid {
  /* Use a responsive grid for machine series cards */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.series-card {
  flex: 1;
  min-width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

.series-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.series-card .series-body {
  padding: 1rem;
  flex-grow: 1;
}

.series-card h3 {
  color: #0C5ADB;
  margin-bottom: 0.5rem;
}

.series-card p {
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
}

.series-cta {
  display: inline-block;
  margin-top: auto;
  font-weight: 600;
  color: #0C5ADB;
  border: 2px solid #0C5ADB;
  border-radius: 30px;
  padding: 0.5rem 1rem;
}

.series-card:hover {
  transform: translateY(-5px);
}

/* Machine series introduction styling */
.section-series .section-intro p {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1rem;
}

/* Product Range Grid */
.section-products .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.product-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.product-card .card-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(11,42,74,0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-card h4 {
  margin: 1rem 1rem 0.5rem;
  color: #052f6d;
  font-size: 1.1rem;
}

.product-card p {
  margin: 0 1rem 1rem;
  font-size: 0.9rem;
  flex-grow: 1;
}

.product-card:hover {
  transform: translateY(-5px);
}

.grid-cta {
  text-align: center;
  margin-top: 40px;
}

.grid-cta .btn {
  margin: 0 10px;
}

/* Industries Section */
.section-industries .industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.industry-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.industry-icon {
  background: #0C5ADB;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-card h3 {
  color: #052f6d;
  margin-bottom: 4px;
}

.industry-card p {
  font-size: 0.85rem;
}

/* Call To Action Section */
.section:last-of-type {
  padding-top: 80px;
  padding-bottom: 80px;
  background: #eef4fc;
  text-align: center;
}

.section:last-of-type h2 {
  color: #052f6d;
  margin-bottom: 12px;
}

.section:last-of-type p {
  margin-bottom: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section:last-of-type .btn {
  margin-top: 10px;
}
/* Footer styles */
.footer {
  background: #0C5ADB;
  color: #fff;
  padding: 20px 0;
}

.footer .footer-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 20px;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-column h4 {
  margin-bottom: 10px;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 5px;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

/* Contact form */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

button {
  background: #0C5ADB;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.3s ease;
}

button:hover {
  background: #1E80FB;
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  nav {
    flex-wrap: wrap;
    min-height: auto;
    height: auto;
  }
  nav ul {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: #0C5ADB;
  }
  nav ul.open {
    max-height: 800px;
  }
  .menu-toggle {
    display: block;
    color: #fff;
  }
}

@media (max-width: 768px) {
  .features .feature {
    flex: 1 1 100%;
  }
  .hero {
    text-align: center;
  }
  .hero img {
    margin-top: 30px;
  }
  .hero-text h1 {
    font-size: 2rem;
  }
}



/* Product section framing */
.section-products {
  background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
  padding: 90px 0;
}

/* Section intro */
.section-intro {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}

.section-intro h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #052f6d;
  margin-bottom: 12px;
}

.section-intro p {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* Product grid spacing fix */
.product-grid {
  margin-top: 10px;
}

/* Card balance fix */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card h4 {
  margin-top: 16px;
}

.product-card p {
  margin-top: 8px;
  flex-grow: 1;
}

/* Image-to-text balance */
.product-card img {
  height: 190px;
  object-fit: cover;
}

/* Hover refinement */
.product-card:hover {
  transform: translateY(-6px);
}



/* Product grid enhancements */
.card-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(5,47,109,0.75);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
}

.product-card{
  position: relative;
}

.grid-cta{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Industries section */
.section-industries{
  background: #ffffff;
  padding: 90px 0;
}

.industry-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.industry-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 25px rgba(2,18,46,0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.industry-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2,18,46,0.10);
}

.industry-icon{
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #052f6d;
  background: linear-gradient(180deg, #eef4ff, #ffffff);
  border: 1px solid #dbe7ff;
}

.industry-body h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #052f6d;
}

.industry-body p{
  margin: 0;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.45;
}



/* Series section */
.section-series{
  background: #ffffff;
  padding: 90px 0;
}
.series-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.series-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e4eaf2;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 25px rgba(2,18,46,0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.series-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(2,18,46,0.10);
}
.series-card img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.series-body{
  padding: 18px;
  display:flex;
  flex-direction: column;
  height: 100%;
}
.series-body h3{
  margin: 0 0 8px;
  color: #052f6d;
  font-size: 1.25rem;
  font-weight: 700;
}
.series-body p{
  margin: 0 0 14px;
  color: #555;
  line-height: 1.55;
  font-size: 0.95rem;
  flex-grow: 1;
}
.series-cta{
  display: inline-block;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  background: rgba(12,90,219,0.10);
  border: 1px solid rgba(12,90,219,0.18);
  color: #052f6d;
}

/* Trust bar */
.trust-bar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #e4eaf2;
}
.trust-item{
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(2,18,46,0.05);
}
.trust-number{
  font-weight: 800;
  color: #052f6d;
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.trust-label{
  color: #555;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Floating quote button */
.floating-quote{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: #0C5ADB;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(2,18,46,0.20);
  border: 1px solid rgba(255,255,255,0.25);
}
.floating-quote:hover{
  background: #052f6d;
}


/* --- Machine product pages (generated) --- */
.section-title{
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: #052f6d;
}
.section-title.center{ text-align: center; }

.machine-overview{
  gap: 24px;
  align-items: flex-start;
}
.machine-desc-title{
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #052f6d;
  margin: 0 0 10px 0;
}
.machine-desc-text{
  color: #111;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.machine-overview-text{
  color: #111;
}

.machine-overview-image{
  display:flex;
  align-items:center;
  justify-content:center;
}

.fit-image{
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e4eaf2;
}

.specs-section{
  margin-top: 12px;
}
.table-wrap{
  overflow-x: auto;
}
.specs-table{
  width: 100%;
}

.image-strip{
  margin-top: 24px;
}
.image-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.image-cell{
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fit-image.square{
  aspect-ratio: 1 / 1;
  max-height: 220px;
  object-fit: contain;
}

@media (max-width: 900px){
  .image-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .image-grid{ grid-template-columns: 1fr; }
}


/* Hero image variants */
.hero-home {
  background-image:
    linear-gradient(90deg,
      rgba(5,47,109,0.96) 0%,
      rgba(5,47,109,0.78) 44%,
      rgba(5,47,109,0.18) 70%,
      rgba(255,255,255,0.00) 100%),
    url("../images/slider/home-hero.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, contain;
  background-position: left center, right center;
}

.hero-services {
  background-image:
    linear-gradient(90deg,
      rgba(5,47,109,0.96) 0%,
      rgba(5,47,109,0.78) 44%,
      rgba(5,47,109,0.18) 70%,
      rgba(255,255,255,0.00) 100%),
    url("../images/slider/hs21.png");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, contain;
  background-position: left center, right center;
}

.hero-basic {
  /* No image, just the overlay */
  background-image: linear-gradient(90deg,
    rgba(5,47,109,0.96) 0%,
    rgba(5,47,109,0.75) 55%,
    rgba(5,47,109,0.10) 80%,
    rgba(255,255,255,0.00) 100%);
}

/* Compact hero (used on product category/subcategory pages) */
.hero.hero-compact {
  min-height: 0;
  padding: 56px 20px 46px;
}
.hero.hero-compact .hero-text {
  max-width: 760px;
}
@media (max-width: 768px) {
  .hero.hero-compact { padding: 46px 16px 38px; }
}

@media (max-width: 900px) {
  .hero-home,
  .hero-services {
    background-size: cover, cover;
    background-position: left center, center center;
  }
}



/* Product range filters (Products pages) */
.range-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 22px;
}
.range-pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #e5e7eb;
}
.range-pill:hover {
  background: #e5e7eb;
}
.range-pill.active {
  background: #1E80FB;
  color: #fff;
  border-color: #1E80FB;
}

/* Products landing view toggle (Browse by category / All machines) */
.mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 10px;
}
.mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #e5e7eb;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mode-pill:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.mode-pill.active {
  background: #0f2c59;
  color: #fff;
  border-color: #0f2c59;
}

/* Make long range lists feel cleaner (horizontal scroll rather than a big wrap) */
.range-filters.scrollable {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.range-filters.scrollable .range-pill { white-space: nowrap; }
.range-filters.scrollable::-webkit-scrollbar { height: 10px; }
.range-filters.scrollable::-webkit-scrollbar-thumb {
  background: rgba(15,44,89,.18);
  border-radius: 999px;
}

/* --- site-extra.css (merged) --- */

/* site-extra.css (v16)
   Loaded after style.css. Enhances CTAs/buttons and ensures images "scale to fit".
*/


/* Hero imagery alignment
   - Keep existing sizing rules from style.css/templates
   - Ensure background-based hero imagery sits to the right, matching the requested layout
*/
.hero{
  background-position: right center !important;
  background-repeat: no-repeat;
}

:root{
  --muted: rgba(71,85,105,0.95);
  --ink: #052f6d;
  --brand: #0C5ADB;
  --brand2:#1E80FB;
}

/* NAV CTA buttons */
nav ul{
  align-items:center;
}
nav ul li a.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1;
  background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.10));
  border:1px solid rgba(255,255,255,0.30);
  color:#fff;
  box-shadow:0 10px 24px rgba(2,18,46,0.18);
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease, filter 200ms ease;
}
nav ul li a.nav-cta:hover,
nav ul li a.nav-cta:focus{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
  box-shadow: 0 14px 34px rgba(2,18,46,0.22);
  color:#fff;
}
nav ul li a.nav-cta.secondary{
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border-color: rgba(255,255,255,0.92);
}
nav ul li a.nav-cta.secondary:hover,
nav ul li a.nav-cta.secondary:focus{
  background:#fff;
  color: var(--ink);
}

/* Ghost / outline CTA (e.g., Logout) */
nav ul li a.nav-cta.ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.42);
  box-shadow: none;
  font-weight: 750;
}
nav ul li a.nav-cta.ghost:hover,
nav ul li a.nav-cta.ghost:focus{
  background: rgba(255,255,255,0.14);
  color:#fff;
  box-shadow:none;
}

/* Make all .btn look premium site-wide (not just hero) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  padding:12px 22px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:0.01em;
  color:#fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 14px 36px rgba(12,90,219,0.22);
  transition: transform 160ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.btn:hover{ transform: translateY(-2px); filter:saturate(1.04); box-shadow:0 18px 48px rgba(12,90,219,0.28); }
.btn:active{ transform: translateY(0); box-shadow:0 12px 30px rgba(12,90,219,0.20); }
.btn.secondary{
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border: 1px solid rgba(5,47,109,0.16);
  box-shadow: 0 14px 34px rgba(2,18,46,0.10);
}
.btn.secondary:hover{ box-shadow:0 18px 48px rgba(2,18,46,0.14); }

/* Form buttons */
button,
input[type="submit"]{
  border-radius:999px !important;
  font-weight:800;
}

/* Product cards: default to cover for consistent category/sub-category tiles */
.product-card img{
  object-fit: cover;
  background: #f2f4f7;
}

/* Machine listing grids: keep full machines visible (avoid cropping cut-outs) */
.product-grid.product-grid-lg .product-card img{
  object-fit: contain;
  background: #ffffff;
}

.series-card img{

  object-fit: cover !important;
  background: #ffffff;
}
.feature-image{
  object-fit: contain;
}

/* Table reuse for machine specs & portal tables */
.table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  overflow:hidden;
  border-radius: 12px;
}
.table th, .table td{
  border-bottom: 1px solid #e4eaf2;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.table th{ color:#052f6d; font-weight:800; background:#f2f6ff; }
.table tr:last-child td{ border-bottom:none; }

/* Accessibility focus */
nav ul li a:focus,
.btn:focus,
button:focus,
.floating-quote:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(203,220,255,0.35);
}

/* Hero kicker */
.kicker{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:0.02em;
  text-transform:none;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.26);
  color:#fff;
  margin: 0 0 12px 0;
}


/* Simple progress bar (admin puller) */
.progress{
  width:100%;
  height:12px;
  border-radius:999px;
  background: rgba(12,90,219,0.14);
  overflow:hidden;
  border: 1px solid rgba(12,90,219,0.18);
}
.progress > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(12,90,219,0.75), rgba(12,90,219,1));
  border-radius:999px;
  transition: width 240ms ease;
}
.progress > div.indeterminate{
  position: relative;
  animation: pullIndeterminate 1.1s infinite linear;
}
@keyframes pullIndeterminate{
  0% { transform: translateX(-60%); }
  100% { transform: translateX(220%); }
}



/* Small statistic pill (admin + utility) */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background:#ffffff;
  color: #0b1f3a;
  font-size: 0.85rem;
}


/* Range picker dropdown (Products pages) */
.range-picker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0 18px;
}
.range-picker-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.26);
  color:#fff;
  font-weight:800;
  font-size:0.92rem;
}
.range-picker-control{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.range-picker-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding: 10px 44px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.36);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-weight:800;
  min-width: 220px;
  box-shadow: 0 12px 28px rgba(2,18,46,0.12);
  cursor:pointer;
}
.range-picker-select:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(203,220,255,0.35), 0 12px 28px rgba(2,18,46,0.12);
}
.range-picker-chevron{
  position:absolute;
  right: 14px;
  pointer-events:none;
  color: rgba(5,47,109,0.80);
  font-size: 14px;
  font-weight:900;
}
.range-picker-hint{
  color: rgba(255,255,255,0.90);
  font-size: 0.86rem;
  font-weight:600;
}
@media (max-width: 520px){
  .range-picker-select{ min-width: 100%; width: 100%; }
  .range-picker-control{ width: 100%; }
  .range-picker{ align-items:stretch; }
}

/* ============================================================
   Products hero: de-cluttered controls
   ============================================================ */
.hero-products .hero-lead{
  margin: 10px 0 0;
  max-width: 70ch;
  opacity: .92;
  line-height: 1.6;
}
.hero-products .hero-tools{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.hero-products .hero-tool{
  display:grid;
  gap: 6px;
}
.hero-products .hero-tool-label{
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}
.hero-products .hero-pillgroup{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hero .range-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
  line-height: 1;
}
.hero .range-pill:hover{
  background: rgba(255,255,255,0.18);
}
.hero .range-pill.active{
  background: #fff;
  color: #0b2f75;
  border-color: rgba(255,255,255,0.65);
}

/* If your hero background is light (e.g. white), invert the pills */
.hero.hero-basic .range-pill{
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.04);
  color: #0b2f75;
}
.hero.hero-basic .range-pill:hover{ background: rgba(0,0,0,0.06); }
.hero.hero-basic .range-pill.active{
  background: rgba(11,47,117,0.92);
  color: #fff;
  border-color: rgba(11,47,117,0.25);
}

.hero-products .range-picker-control--hero{
  height: 44px;
  min-width: 220px;
}
.hero-products .range-picker-select{
  padding: 0 38px 0 12px;
  height: 44px;
}
.hero-products .hero-search-row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.hero-products .hero-search-row input{
  min-width: 240px;
}
@media (max-width: 640px){
  .hero-products .hero-search-row input{ min-width: 0; width: 100%; }
}


/* ============================================================
   Homepage: Product Range tiles (clean + separated on desktop)
   ============================================================ */
#product-range .product-grid{
  gap: 28px;
}
@media (min-width: 1100px){
  #product-range .product-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#product-range .product-card{
  border: 1px solid rgba(5,47,109,0.10);
  box-shadow: 0 18px 45px rgba(15,23,42,0.06);
}
#product-range .product-card img{
  height: 190px;
}
#product-range .product-card .meta{
  padding: 14px 16px 18px;
  text-align: center;
  border-top: 1px solid rgba(5,47,109,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 64px;
}
#product-range .product-card .meta h3,
#product-range .product-card .meta h4{
  margin: 0;
  font-size: 1.12rem;
  font-weight: 950;
  color: #052f6d;
  line-height: 1.2;
}

/* ============================================================
   Customer Portal: more premium landing (portal main page)
   ============================================================ */
.portal-hero{
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(255,255,255,0.18), transparent 58%),
    radial-gradient(900px 320px at 82% 0%, rgba(255,255,255,0.12), transparent 58%),
    linear-gradient(135deg, #052f6d 0%, #0C5ADB 46%, #1E80FB 100%);
  color: #fff;
  padding: 56px 0 28px;
}
.portal-hero .container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
.portal-hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .portal-hero-grid{ grid-template-columns: 1fr; }
}
.portal-hero h1{
  margin: 10px 0 10px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.portal-hero p{
  margin: 0;
  opacity: 0.92;
  max-width: 60ch;
  line-height: 1.6;
}
.portal-hero .portal-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.portal-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .portal-stats{ grid-template-columns: 1fr; }
}
.portal-stat{
  background: rgba(255,255,255,0.95);
  color: #052f6d;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 45px rgba(2,18,46,0.16);
}
.portal-stat .k{
  font-weight: 900;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.portal-stat .v{
  margin-top: 6px;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.1;
}
.portal-stat .s{
  margin-top: 6px;
  font-size: 0.95rem;
  color: rgba(5,47,109,0.82);
  line-height: 1.35;
}
.portal-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px;
}
.portal-panels{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .portal-panels{ grid-template-columns: 1fr; }
}
.portal-panel{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.06);
  padding: 16px;
}
.portal-panel h2{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 950;
  color: #052f6d;
}
.portal-panel p{
  margin: 0 0 12px;
  color: rgba(71,85,105,0.95);
  line-height: 1.55;
}
.portal-panel .panel-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}


/* ============================================================
   Global: Card utility (used across admin + quote builder)
   ============================================================ */
.card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.06);
}

/* ============================================================
   Homepage: Standout sections (Service & Support / What we do / Why choose us)
   Fixes giant SVG icons and improves hierarchy.
   ============================================================ */
.section-standout{
  background: linear-gradient(180deg, #eef4fc 0%, #ffffff 100%);
}
.section-standout .section-intro{
  margin-bottom: 28px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(12,90,219,0.10);
  border: 1px solid rgba(12,90,219,0.18);
  color: #052f6d;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin: 0 auto 10px;
}
.standout-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.standout-grid-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px){
  .standout-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .standout-grid,
  .standout-grid-4{ grid-template-columns: 1fr; }
}
.standout-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.06);
}
.standout-card h3{
  margin: 10px 0 8px;
  color:#052f6d;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.standout-card p{
  margin: 0;
  color: rgba(71,85,105,0.95);
  line-height: 1.6;
}
.standout-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(12,90,219,0.10);
  border: 1px solid rgba(12,90,219,0.18);
  color: #0C5ADB;
}
.standout-icon svg{
  width: 26px;
  height: 26px;
  display:block;
}
.standout-list{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:grid;
  gap: 8px;
}
.standout-list li{
  position:relative;
  padding-left: 22px;
  color: rgba(71,85,105,0.95);
  line-height: 1.45;
}
.standout-list li:before{
  content: "✓";
  position:absolute;
  left:0;
  top: 0;
  color: #0C5ADB;
  font-weight: 950;
}
.link-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  color:#052f6d;
  text-decoration:none;
}
.link-cta:hover{ text-decoration: underline; }
.standout-strip{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
}
.strip-item{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(5,47,109,0.06);
  border: 1px solid rgba(5,47,109,0.12);
  color:#052f6d;
  font-weight: 850;
  font-size: 0.92rem;
}
.why-steps{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .why-steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .why-steps{ grid-template-columns: 1fr; }
}
.why-step{
  background:#fff;
  border:1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.05);
  display:grid;
  gap: 6px;
}
.why-step .n{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(12,90,219,0.14);
  color: #0C5ADB;
  font-weight: 950;
}
.why-step .t{
  font-weight: 950;
  color: #052f6d;
}
.why-step .d{
  color: rgba(71,85,105,0.95);
  line-height: 1.45;
  font-size: 0.95rem;
}

/* ============================================================
   Quote Builder: cleaner layout + right-hand live summary
   ============================================================ */
.qb-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 18px;
  align-items:start;
  margin-top: 14px;
}
.qb-main, .qb-side{ min-width:0; }

@media (max-width: 1100px){
  .qb-layout{ grid-template-columns: 1fr; }
}
@media (min-width: 1101px){
  .qb-side{
    position: sticky;
    top: 84px; /* below sticky header */
    align-self: start;
  }
}
.qb-sidecard h3{
  margin: 0 0 10px;
  color:#052f6d;
  font-weight: 950;
}
.qb-steps{
  margin: 0 0 14px 20px;
  color: rgba(71,85,105,0.95);
  line-height: 1.55;
}
.qb-steps li{ margin: 6px 0; }
.qb-selection{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display:grid;
  gap: 8px;
}
.qb-selection li{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(5,47,109,0.10);
  background: rgba(5,47,109,0.03);
  color: rgba(2,18,46,0.92);
  font-weight: 800;
  line-height: 1.35;
}
.qb-selection li.small{
  font-weight: 600;
  color: rgba(71,85,105,0.92);
}

.qb-selection li .small{
  display:block;
  margin-top:4px;
  font-weight: 600;
  color: rgba(71,85,105,0.92);
}

.quote-form .machine-row.card{
  margin-top: 10px;
}

/* Machine configuration rows: prevent overflow + keep actions usable */
.quote-form .machine-row{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(180px, 220px);
  grid-template-areas: "machine speed product actions";
  gap: 12px;
  align-items:end;
}
.quote-form .machine-row select,
.quote-form .machine-row input,
.quote-form .machine-row textarea{ min-width: 0; }

.quote-form .qb-field-machine{ grid-area: machine; }
.quote-form .qb-field-speed{ grid-area: speed; }
.quote-form .qb-field-product{ grid-area: product; }
.quote-form .qb-row-actions{
  grid-area: actions;
  display:flex;
  justify-content:flex-end;
  align-items:end;
  gap: 10px;
  flex-wrap: wrap;
}
.quote-form .qb-row-actions .icon-btn{ white-space: nowrap; }

/* Medium screens: reduce to 2-column layout to avoid horizontal scroll */
@media (max-width: 1200px){
  .quote-form .machine-row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "machine machine"
      "speed product"
      "actions actions";
    align-items: start;
  }
  .quote-form .qb-row-actions{ justify-content:flex-start; }
}

@media (max-width: 640px){
  .quote-form .machine-row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "machine"
      "speed"
      "product"
      "actions";
  }
  .quote-form .qb-row-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .quote-form .qb-row-actions .icon-btn{ width: 100%; }
}

.quote-form .machine-row .field label{
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(71,85,105,0.98);
}
.quote-form .machine-row .icon-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(5,47,109,0.16);
  background:#fff;
  cursor:pointer;
  font-weight: 850;
}
.quote-form .machine-row .icon-btn:hover{
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
}
.quote-form .machine-row .icon-btn.danger{
  border-color: rgba(220,20,60,0.35);
  color: #b91c1c;
}

/* ============================================================
   Quote Builder Hero (contrast + mobile fit)
   ============================================================ */
.qb-hero{
  margin-top: 8px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(255,255,255,0.16), transparent 58%),
    radial-gradient(900px 320px at 82% 0%, rgba(255,255,255,0.10), transparent 58%),
    linear-gradient(135deg, #052f6d 0%, #0C5ADB 46%, #1E80FB 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 22px 60px rgba(2,18,46,0.16);
}
.qb-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.90fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .qb-hero{ padding: 16px; }
  .qb-hero-grid{ grid-template-columns: 1fr; }
}

.qb-hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  font-weight:950;
  letter-spacing: 0.10em;
  font-size: 0.72rem;
}

.qb-hero-title{
  margin: 12px 0 8px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
@media (max-width: 640px){
  .qb-hero-title{ font-size: 32px; }
}

.qb-hero-lead{
  margin: 0;
  max-width: 72ch;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.qb-hero-actions{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px){
  .qb-hero-actions a.btn{ width: 100%; justify-content: center; }
}

/* Right panel: make text readable (dark text on light card) */
.qb-hero-steps{
  background: rgba(255,255,255,0.94);
  color: #052f6d;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: 0 18px 45px rgba(2,18,46,0.12);
}
.qb-hero-steps-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.qb-hero-steps-title{
  font-weight: 950;
  font-size: 18px;
}
.qb-hero-steps-sub{
  font-weight: 750;
  font-size: 0.9rem;
  color: rgba(5,47,109,0.75);
}

.qb-step{
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(5,47,109,0.10);
  background: rgba(5,47,109,0.03);
  margin-top: 10px;
}
.qb-step .n{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: #fff;
  background: linear-gradient(135deg, #0C5ADB 0%, #1E80FB 100%);
}
.qb-step .t{ font-weight: 950; }
.qb-step .s{
  margin-top: 2px;
  color: rgba(5,47,109,0.78);
  font-size: 0.95rem;
  line-height: 1.35;
}

.qb-hero-wizard .btn.secondary{
  width: 100%;
  justify-content: center;
  border-color: rgba(5,47,109,0.18);
}

/* Tip / helper callout */
.qb-tip{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(5,47,109,0.10);
  background: rgba(5,47,109,0.03);
  color: rgba(71,85,105,0.92);
}

/* ============================================================
   Machine detail: right rail section nav should be full-width
   ============================================================ */
.mside-nav{
  width: 100%;
  display: grid;
  gap: 8px;
}
.mside-nav a{
  width: 100% !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.mside-nav a > span:first-child{ min-width: 0; }
.mside-nav a .chev{ justify-self: end; }

/* ===============================
   PATCH v36 — Fix machine side nav + quote builder layout
   (keeps existing styling; improves specificity vs platform-ui.css)
   =============================== */

/* Machine detail: side navigation buttons should be full width */
.mside-nav{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.mside-nav a{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Quote builder: ensure hero background isn't overridden by platform-ui .card */
.qb-page .qb-hero{
  background: radial-gradient(1200px 420px at 10% 0%, rgba(255,255,255,0.20), rgba(255,255,255,0) 55%),
              linear-gradient(90deg, #072a66, #0c5adb 60%, #e8f1ff) !important;
  color: #fff;
  border-radius: 22px;
  border: 1px solid rgba(12, 90, 219, 0.22);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  overflow: hidden;
}
.qb-page .qb-hero-right{
  color: rgba(11, 19, 36, 0.92);
}
.qb-page .qb-hero-right .qb-step-title,
.qb-page .qb-hero-right .t{
  color: #052f6d;
}

/* Quote builder: machine rows now only have Machine type + Actions */
.qb-page .machine-row{
  grid-template-columns: 1fr auto !important;
  align-items: end;
}
.qb-page .qb-row-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: end;
}
@media (max-width: 720px){
  .qb-page .machine-row{
    grid-template-columns: 1fr !important;
  }
  .qb-page .qb-row-actions{
    justify-content: stretch;
  }
  .qb-page .qb-row-actions .icon-btn{
    flex: 1 1 auto;
  }
}


/* ========================================================================
   PATCH v37: Quote generator stability + layout hardening
   (app.py handles spec dicts safely; CSS below fixes remaining UI issues)
   ======================================================================== */

/* Quote Builder hero – ensure contrast even when other CSS loads after */
.qb-page .qb-hero{
  background: linear-gradient(120deg, #0B2B5B 0%, #1E5ED6 55%, #E8F1FF 100%) !important;
  color: #fff !important;
}
.qb-page .qb-hero .qb-hero-title,
.qb-page .qb-hero .qb-hero-lead{
  color: #fff !important;
}
.qb-page .qb-hero .qb-hero-badge{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
}
.qb-page .qb-hero-right{
  background: rgba(255,255,255,.96) !important;
  color: #0B2B5B !important;
  border-color: rgba(255,255,255,.35) !important;
}
.qb-page .qb-hero-right .qb-steps-title{
  color: #0B2B5B !important;
}
.qb-page .qb-hero-right .qb-step-title{
  color: #0B2B5B !important;
}
.qb-page .qb-hero-right .qb-step-sub{
  color: #35506D !important;
}

/* Quote Builder machine rows – remove legacy 4-column grid assumptions */
.qb-page .machine-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas: "machine actions" !important;
  align-items: end !important;
  gap: 12px !important;
}
.qb-page .machine-row .qb-field-machine{ grid-area: machine !important; }
.qb-page .machine-row .qb-row-actions{
  grid-area: actions !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Responsive */
@media (max-width: 900px){
  .qb-page .qb-hero-grid{
    grid-template-columns: 1fr !important;
  }
  .qb-page .machine-row{
    grid-template-columns: 1fr !important;
    grid-template-areas: "machine" "actions" !important;
  }
  .qb-page .machine-row .qb-row-actions{
    justify-content: flex-start !important;
  }
}

/* Machine detail side-nav buttons – force full width */
nav.mside-nav{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
}
nav.mside-nav a{
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}


/* Glass floating header ( style) */
.site-header--glass {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1400px;
  z-index: 1000;

  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Full-bleed video hero */
.hero-video {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(97, 134, 251,0.55),
    rgba(97, 134, 251, 0.25),
    rgba(97, 134, 251,0.1)
  );
  z-index: 1;
}
.home-hero-video__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-hero-video__content .container {
  max-width: 1600px;
}
/* Dark overlay for readability */
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.15)
  );
  z-index: 1;
}

/* Hero text */
.hero-overlay {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 160px 32px 0;
  color: #fff;
}

.hero-eyebrow {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 12px;
}

.hero-overlay h1 {
  font-size: 44px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.hero-overlay p {
  font-size: 18px;
  opacity: 0.95;
  margin-bottom: 28px;
}

/* Buttons */
.hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}


/* Feature list */
.hero-features {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  opacity: 0.9;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-features li::before {
  content: "•";
  margin-right: 8px;
}
.site-header--glass a,
.site-header--glass .nav-link,
.site-header--glass .logo,
.site-header--glass button {
  color: #ffffff;
}
.site-header--glass.is-scrolled {
  background: rgba(9, 63, 133, 0.9);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}

/* ===== HERO POSITION FIX (uses your exact class) ===== */

/* Desktop + big screens: move text down */
.hero-overlay{
  padding-top: clamp(140px, 20vh, 260px) !important;
  max-width: 720px; /* stops text stretching too wide on big screens */
}

/* Mobile: keep it tighter */
@media (max-width: 720px){
  .hero-overlay{
    padding-top: 110px !important;
    max-width: 92vw;
  }
}
/* ===== HERO TEXT VERTICAL POSITION – FINAL FIX ===== */

/* Ensure hero container is a positioning context */
.home-hero{
  position: relative;
}

/* Force hero text to sit lower, not top-aligned */
.hero-overlay{
  position: absolute !important;
  top: 52% !important;
  transform: translateY(-50%) !important;

  max-width: 720px;
  padding-top: 0 !important;
}

/* Large / ultra-wide screens */
@media (min-width: 1400px){
  .hero-overlay{
    top: 58% !important;
  }
}

/* Mobile: keep readable */
@media (max-width: 768px){
  .hero-overlay{
    top: 60% !important;
    max-width: 92vw;
  }
}

:root{
  --lancing-blue-900: #0b2c5e;  /* deep brand blue */
  --lancing-blue-700: #144f9a;  /* mid */
  --lancing-blue-500: #1b63ff;  /* accent / primary button */
  --lancing-white: #ffffff;
}
/* ===== Floating glass header (brand blue) ===== */
.site-header--glass{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  width: calc(100% - 56px);
  max-width: 1400px;

  background: linear-gradient(90deg,
    rgba(11,44,94,0.86),
    rgba(20,79,154,0.82)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
  transition: all .22s ease;
}

/* Ensure header inner layout is normal again */
.site-header--glass .header-inner,
.site-header--glass .navbar,
.site-header--glass nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Nav links spacing + colour */
.site-header--glass .main-nav,
.site-header--glass .nav-links,
.site-header--glass nav ul{
  display:flex;
  align-items:center;
  gap: 22px;
  list-style:none;
  margin:0;
  padding:0;
}

.site-header--glass a{
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:700;
}

.site-header--glass a:hover{
  color: #ffffff;
}

/* Logo */
.site-header--glass .logo,
.site-header--glass .brand,
.site-header--glass .logo-text{
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
}

/* Button styling in header */
.site-header--glass .btn,
.site-header--glass .nav-btn{
  border-radius: 999px;
}
/* ===== Scroll shrink (Zonesun style) ===== */
.site-header--glass.is-scrolled{
  top: 10px;
  border-radius: 16px;
  background: linear-gradient(90deg,
    rgba(11,44,94,0.93),
    rgba(20,79,154,0.90)
  );
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}

.site-header--glass.is-scrolled .header-inner,
.site-header--glass.is-scrolled .navbar{
  padding-top: 8px;
  padding-bottom: 8px;
}
/* ===== Hero fade-in ===== */
.hero-overlay{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .60s ease, transform .60s ease;
}
.hero-overlay.is-in{
  opacity: 1;
  transform: translateY(0);
}
/* ===== Overlay hero for products page ===== */
.page-hero-overlay{
  position: relative;
  height: 56vh;
  min-height: 460px;
  overflow:hidden;
  background:#000;
  margin: 0;
}

.page-hero-overlay__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.page-hero-overlay__content{
  position: relative;
  z-index: 2;
  padding-top: 170px;
  color:#fff;
  max-width: 780px;
}

@media (max-width: 720px){
  .page-hero-overlay__content{ padding-top: 130px; }
}


/* PATCH V93 */
/* PATCH V93 — home series + popular image robustness */
.home-ranges .range-card__footer{
  background: linear-gradient(180deg, rgba(2,24,56,0.96), rgba(2,24,56,0.82));
  color:#fff;
  padding:14px 16px;
}

.home-ranges .range-card__title{
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0 0 6px;
}

.home-ranges .range-card__desc{
  opacity:0.92;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
  min-height:2.5em;
}

.product-card__media--contain img{
  object-fit:contain;
  background:#fff;
}
/* END PATCH V93 */
/* === PATCH_V95 BEGIN =====================================================
   Home hero media, Products hero, Machine Series cards, Popular Machines grid
   - Fixes readability + image sizing
   - Safe overrides only
   ====================================================================== */

:root{
  --lancing-blue: var(--brand-blue, #0c4085);
  --lancing-blue-dark: var(--brand-blue-dark, #072a57);
  --lancing-blue-accent: var(--brand-blue-accent, #1a68d8);
  --lancing-ink: #0b1626;
  --lancing-muted: #5c6b82;
  --lancing-card-radius: 18px;
}


/* ---------------- Home hero (video background) ---------------- */
.home-hero{
  position: relative;
  min-height: 74vh;
  max-height: 720px;
  border-radius: 28px;
  overflow: hidden;
  margin: 24px auto 56px;
  box-shadow: 0 28px 70px rgba(2,18,46,0.18);
}
.home-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0b1930;
}
.home-hero__fallback,
.home-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.60) saturate(1.10);
}
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1200px 620px at 22% 35%, rgba(255,255,255,0.18), rgba(255,255,255,0) 62%),
    linear-gradient(90deg, rgba(7,42,87,0.72), rgba(7,42,87,0.18) 55%, rgba(7,42,87,0.10));
}
.home-hero__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 72px 64px;
}
.home-hero__content{ max-width: 640px; }
.home-hero__eyebrow{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 10px;
}
.home-hero h1{
  color: #fff;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
}
.home-hero p{
  color: rgba(255,255,255,0.86);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.home-hero .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.home-hero .btn-primary{
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84));
  color: rgba(7,42,87,0.92);
}
.home-hero .btn-secondary{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
}
.home-hero .btn:hover{ transform: translateY(-1px); }
@media (max-width: 900px){
  .home-hero__inner{ padding: 64px 28px; }
}
/* ---------------- Home hero (safe animation) ---------------- */
@keyframes lancingHeroFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.home-hero__content{
  animation: lancingHeroFade 700ms ease-out both;
}
@media (prefers-reduced-motion: reduce){
  .home-hero__content{ animation: none; }
}

/* ---------------- Products hero ---------------- */
.products-hero{
  max-width: 1180px;
  margin: 18px auto 28px;
  padding: 38px 34px 30px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, rgba(12,64,133,0.92), rgba(7,42,87,0.92));
  box-shadow: 0 18px 52px rgba(2,18,46,0.22);
  overflow: hidden;
  position: relative;
}
.products-hero::before{
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 340px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), rgba(255,255,255,0));
  pointer-events: none;
}
.products-hero__inner{ position: relative; }
.products-hero__title{
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.products-hero__subtitle{
  max-width: 720px;
  margin: 0 0 18px;
  color: rgba(255,255,255,0.88);
}
.products-hero__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.26);
  transition: transform 160ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.20);
}
.chip.is-active{
  background: rgba(255,255,255,0.92);
  color: rgba(7,42,87,0.95);
  border-color: rgba(255,255,255,0.92);
}
.chip--cta{
  background: linear-gradient(135deg, rgba(26,104,216,0.95), rgba(12,64,133,0.95));
  border-color: rgba(255,255,255,0.20);
}

/* ---------------- Section intro helpers ---------------- */
.section-intro{
  text-align: center;
  margin: 0 0 18px;
}
.section-intro h2{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--lancing-ink);
  letter-spacing: -0.01em;
}
.section-intro p{
  margin: 0;
  color: var(--lancing-muted);
}
.section-intro-tight{ margin-bottom: 16px; }

/* ---------------- Product categories grid ---------------- */
.product-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .product-grid{ grid-template-columns: 1fr; }
}

.product-card{
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  color: var(--lancing-ink);
  box-shadow: 0 12px 40px rgba(2,18,46,0.10);
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 56px rgba(2,18,46,0.16);
}
.product-card__media{
  position: relative;
  background: #f2f6fb;
  padding: 18px;
}
.product-card__media img{
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
}
.product-card__media-fallback{
  height: 180px;
  display: grid;
  place-items: center;
  color: rgba(7,42,87,0.75);
  font-weight: 900;
}
.product-card__badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: rgba(7,42,87,0.92);
  box-shadow: 0 10px 22px rgba(2,18,46,0.20);
}
.product-card__body{
  padding: 16px 18px 18px;
}
.product-card__body h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.product-card__body p{
  margin: 0;
  color: var(--lancing-muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------- Machine Series (range) cards ---------------- */
.range-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1100px){
  .range-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .range-grid{ grid-template-columns: 1fr; }
}

.range-card{
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 14px 46px rgba(2,18,46,0.12);
  transition: transform 160ms ease, box-shadow 200ms ease;
  min-height: 340px;
}
.range-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 60px rgba(2,18,46,0.16);
}
.range-card__media{
  position: relative;
  height: 180px;
  background: #eaf0f8;
  overflow: hidden;
}
.range-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.range-card__content{
  flex: 1;
  padding: 18px 18px 20px;
  background: linear-gradient(135deg, rgba(12,64,133,0.96), rgba(7,42,87,0.96));
  color: #fff;
}
.range-card__content h3{
  margin: 0 0 8px;
  font-size: 20px;
  color: #fff;
}
.range-card__content p{
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------- Machine grid (Popular + products all) ---------------- */
.machine-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1100px){
  .machine-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .machine-grid{ grid-template-columns: 1fr; }
}

.machine-card{
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: var(--lancing-ink);
  box-shadow: 0 12px 44px rgba(2,18,46,0.11);
  transition: transform 160ms ease, box-shadow 200ms ease;
}
.machine-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 64px rgba(2,18,46,0.16);
}
.machine-card__media{
  background: #f2f6fb;
  padding: 18px;
}
.machine-card__media img{
  width: 100%;
  height: 240px;
  object-fit: contain;
  display: block;
}
.machine-card__media-fallback{
  height: 240px;
  display: grid;
  place-items: center;
  color: rgba(7,42,87,0.75);
  font-weight: 900;
  padding: 18px;
  text-align: center;
}
.machine-card__body{
  padding: 16px 18px 18px;
}
.machine-card__body h3{
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

/* === PATCH_V95 END ======================================================= */

/* PATCH V98 — sticky/shrink header + products overlay hero */

/* Header: wider on large screens */
.site-header--glass{
  max-width: 1560px;
  width: calc(100% - 56px);
}
@media (max-width: 720px){
  .site-header--glass{ width: calc(100% - 20px); max-width: 100%; top: 10px; }
}

/* Dock to top on scroll + subtle shrink */
.site-header--glass{ transition: top .18s ease, border-radius .18s ease, box-shadow .18s ease, background .18s ease; }
.site-header--glass .navbar{ transition: padding .18s ease; }
.site-header--glass.is-scrolled{
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  border-radius: 0 0 18px 18px;
}
.site-header--glass.is-scrolled .navbar{
  padding: 10px 16px;
}

/* Products hero overlay: use shared .page-hero-overlay styles */
.page-hero-overlay__bg{ position:absolute; inset:0; }
.page-hero-overlay__bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-overlay__shade{ position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.14) 100%);
}
.page-hero-overlay__content{ z-index:2; }

/* Products hero actions */
.products-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; align-items:center; }
.products-hero__ranges{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:999px;
  font-weight:800; font-size:13px; letter-spacing:-0.01em; text-decoration:none;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:#fff;
  backdrop-filter: blur(10px);
}
.pill:hover{ background: rgba(255,255,255,.22); }
.pill.is-active{ background: rgba(255,255,255,.30); border-color: rgba(255,255,255,.35); }
.pill--cta{ background: rgba(78,161,255,.26); border-color: rgba(78,161,255,.40); }
.pill--cta:hover{ background: rgba(78,161,255,.34); }


/* ================================
   v100 Product browsing upgrades
   - injected search/sort bar styles
   ================================ */

.browse-bar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  margin:14px 0 18px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,47,109,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.browse-field{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1}
.browse-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}

.browse-input,
.browse-select{
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:0 12px;
  outline:none;
}

.browse-input::placeholder{color:rgba(255,255,255,.72)}
.browse-input:focus,
.browse-select:focus{
  border-color:rgba(12,90,219,.75);
  box-shadow:0 0 0 3px rgba(12,90,219,.18);
}

.browse-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.browse-count{
  font-size:13px;
  color:rgba(255,255,255,.86);
  white-space:nowrap;
}

.browse-clear{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  padding:0 12px;
  cursor:pointer;
}

.browse-clear:hover{background:rgba(255,255,255,.16)}
.browse-clear:disabled{opacity:.55;cursor:default}

/* If a browse bar appears on a light section, keep it readable */
.section:not(.hero) .browse-bar{
  border:1px solid rgba(11,39,94,.12);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.section:not(.hero) .browse-label{color:rgba(11,39,94,.78)}
.section:not(.hero) .browse-input,
.section:not(.hero) .browse-select{
  background:#fff;
  color:#0b2f75;
  border:1px solid rgba(11,39,94,.18);
}
.section:not(.hero) .browse-input::placeholder{color:rgba(11,39,94,.55)}
.section:not(.hero) .browse-count{color:rgba(11,39,94,.68)}
.section:not(.hero) .browse-clear{
  background:#fff;
  border:1px solid rgba(11,39,94,.18);
  color:#0b2f75;
}

/* mobile */
@media (max-width: 720px){
  .browse-field{min-width:160px}
  .browse-meta{width:100%;justify-content:space-between;margin-left:0}
}

/* === PATCH v102: mobile product pages START === */

/* Global: avoid accidental horizontal scroll on phones */
@media (max-width: 720px){
  html, body{ overflow-x:hidden; }
  .container{ padding-left:16px; padding-right:16px; }
}

/* Make anchor jumps land below the sticky header */
:root{ --lancing-header-h: 84px; }
@media (max-width: 720px){ :root{ --lancing-header-h: 72px; } }
section[id], [id].anchor, .anchor{ scroll-margin-top: calc(var(--lancing-header-h) + 18px); }

/* ---------- Products listing pages ---------- */
@media (max-width: 900px){
  /* If your products template uses a hero block, reduce visual bulk on mobile */
  .hero-basic{ padding: 40px 0; }
  .hero-basic h1{ font-size: clamp(26px, 6.6vw, 40px); line-height: 1.08; }
  .hero-basic p{ font-size: 14px; }

  /* Product cards grid safety: many templates use one of these class names */
  .pcard-grid,
  .product-grid,
  .products-grid,
  .cards.grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  /* Force single-column card grids on phones */
  .pcard-grid,
  .product-grid,
  .products-grid,
  .cards.grid{ grid-template-columns: 1fr !important; }

  /* Cards: slightly tighter + nicer tap targets */
  .pcard,
  .card,
  .product-card{ border-radius: 16px; }

  /* Images: use aspect ratio so images never squash */
  .pcard-img,
  .card .media,
  .product-card .media,
  .product-card .img,
  .pcard .pcard-img{
    height: auto !important;
    aspect-ratio: 16/10;
  }
  .pcard-img img,
  .card .media img,
  .product-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Make filter controls stack cleanly */
  .hero-controls,
  .products-toolbar,
  .filters,
  .filter-bar{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-controls > *,
  .products-toolbar > *,
  .filters > *,
  .filter-bar > *{
    width: 100% !important;
  }
  .hero-controls select,
  .hero-controls input,
  .filters select,
  .filters input{
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Ranges/series tiles: allow horizontal swipe if the row is too wide */
@media (max-width: 860px){
  .range-picker{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }
  .range-card{
    flex: 0 0 auto;
    min-width: 240px;
    scroll-snap-align: start;
  }
}
@media (max-width: 520px){
  .range-card{ min-width: 78vw; }
}

/* ---------- Machine detail pages (product detail pages) ---------- */

/* Safety: media never overflows */
.mwrap img, .mwrap video, .mwrap iframe{ max-width: 100%; }

@media (max-width: 900px){
  .mwrap{ padding: 18px 0; }
  .mcontainer{ padding: 0 16px; }

  /* Keep nav usable on mobile; allow wrapping without overflow */
  .mnav{
    gap: 8px;
    flex-wrap: wrap;
  }
  .mnav a{
    flex: 1 1 calc(50% - 8px);
    min-width: 150px;
    text-align: center;
  }

  /* Spec grid readability */
  .spec-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  /* Nav becomes full-width buttons */
  .mnav{ display: grid; grid-template-columns: 1fr; }
  .mnav a{ width: 100%; }

  /* Hero title spacing */
  .mhero h1{ font-size: 26px; }
  .mhero .subtitle{ font-size: 14px; }

  /* Video/galleries: consistent aspect */
  .video-wrap{ aspect-ratio: 16/9; height: auto; }
}

/* === PATCH v102: mobile product pages END === */

/* ========================================================================
   FINAL PATCH v106 — Mobile header + page hero overlay fixes
   Fixes:
   - Mobile header gap + logo/burger alignment inside the glass pill
   - Reliable header shrink/dock behaviour on scroll (targets real markup)
   - Page hero overlay spacing + full-width video scaling across devices
   ======================================================================== */

/* --- Header: ensure the inner <nav> doesn't paint its own solid blue background --- */
.site-header--glass nav{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: inherit;
  height: auto; /* override style.css fixed height */
  min-height: 64px;
  padding: 12px 20px;
  transition: padding .18s ease;
}

/* Shrink padding reliably on scroll (there is no .navbar element in the markup) */
.site-header--glass.is-scrolled nav{
  padding: 10px 16px;
}

/* Mobile: tighten the pill height + centre logo + burger */
@media (max-width: 720px){
  .site-header--glass{
    width: calc(100% - 16px);
    max-width: 100%;
    top: 8px;
    border-radius: 16px;
  }

  .site-header--glass nav{
    min-height: 56px;
    padding: 8px 12px;
    gap: 12px;
    align-items: center;
  }

  .site-header--glass .logo{
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0;
    margin: 0;
  }

  .site-header--glass .logo-img{
    height: 30px;
    width: auto;
    display: block;
  }

  .site-header--glass .menu-toggle{
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    margin: 0;
    border-radius: 12px;
  }

  /* Mobile menu panel: make it feel like part of the glass header */
  .site-header--glass nav ul{
    background: transparent;
    padding-top: 6px;
    padding-bottom: 10px;
  }
  .site-header--glass nav ul.open{
    background: rgba(9, 63, 133, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
  }

  .site-header--glass nav ul li a{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 420px){
  .site-header--glass nav{
    min-height: 52px;
    padding: 6px 10px;
  }
  .site-header--glass .logo-img{ height: 28px; }
  .site-header--glass .menu-toggle{ width: 40px; height: 40px; }
}

/* --- Page hero overlay (internal pages): consistent height + full-width video --- */
.page-hero-overlay{
  position: relative;
  overflow: hidden;
  background: #000;
  height: clamp(420px, 56vh, 620px);
  min-height: 380px;
}

@media (max-width: 900px){
  .page-hero-overlay{
    height: clamp(380px, 58vh, 540px);
    min-height: 340px;
  }
}

@media (max-width: 560px){
  .page-hero-overlay{
    height: clamp(340px, 60vh, 480px);
    min-height: 320px;
  }
}

/* Break the video layer out of any constrained wrapper (no horizontal scroll: section clips overflow) */
.page-hero-overlay > .hero-video{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 100%;
}
.page-hero-overlay > .hero-video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero-overlay > .hero-video .hero-shade{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.14) 100%);
}

/* Content spacing: clear the floating header, keep consistent vertical rhythm */
.page-hero-overlay__content{
  position: relative;
  z-index: 2;
  padding-top: calc(var(--lancing-header-h, 84px) + 52px);
  padding-bottom: 36px;
  color: #fff;
}
.page-hero-overlay__content h1,
.page-hero-overlay__content p,
.page-hero-overlay__content .hero-eyebrow{
  color: #fff;
}

@media (max-width: 720px){
  .page-hero-overlay__content{
    padding-top: calc(var(--lancing-header-h, 72px) + 44px);
    padding-bottom: 28px;
  }
}

/* ========================================================================
   FINAL PATCH v107 — Image heroes (internal pages) + tighter mobile header
   Fixes:
   - Internal page heroes use responsive images (no video)
   - Mobile header height reduced; menu panel no longer increases header height
   ======================================================================== */

/* Mobile nav: keep the pill compact by taking the menu <ul> out of the normal flow */
@media (max-width: 1100px){
  .site-header--glass nav{
    flex-wrap: nowrap !important;
    position: relative;
  }

  .site-header--glass nav ul{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;

    max-height: 0;
    overflow: hidden;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 14px;
    box-shadow: none;
  }

  .site-header--glass nav ul.open{
    max-height: calc(100vh - 120px);
    overflow: auto;

    padding: 8px 0 10px;
    background: rgba(9, 63, 133, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
  }
}

/* Tighter pill metrics on small screens */
@media (max-width: 720px){
  .site-header--glass nav{
    min-height: 50px !important;
    padding: 6px 10px !important;
  }
  .site-header--glass .logo-img{ height: 26px !important; }
  .site-header--glass .menu-toggle{
    width: 38px !important;
    height: 38px !important;
    font-size: 1.75rem;
  }
}

@media (max-width: 420px){
  .site-header--glass nav{
    min-height: 48px !important;
    padding: 6px 10px !important;
  }
  .site-header--glass .logo-img{ height: 24px !important; }
  .site-header--glass .menu-toggle{
    width: 36px !important;
    height: 36px !important;
  }
}

/* Internal page hero (image-based) */
.page-hero-overlay > .hero-video img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================================
   FINAL PATCH v107 — Image heroes (internal pages) + tighter mobile header
   Fixes:
   - Internal page heroes use responsive images (no video)
   - Mobile header height reduced; menu panel no longer increases header height
   ======================================================================== */

/* Mobile nav: keep the pill compact by taking the dropdown menu out of flow */
@media (max-width: 1100px){
  .site-header--glass nav{
    flex-wrap: nowrap !important;
    position: relative;
  }

  /* Dropdown panel (closed) */
  .site-header--glass nav ul{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 14px;
    border: none;
    box-shadow: none;
  }

  /* Dropdown panel (open) */
  .site-header--glass nav ul.open{
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding: 8px 0 10px;
    background: rgba(9, 63, 133, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
  }
}

/* Extra-tight mobile header sizing (matches your reference) */
@media (max-width: 720px){
  .site-header--glass nav{
    min-height: 50px !important;
    padding: 6px 10px !important;
    gap: 10px !important;
  }
  .site-header--glass .logo-img{ height: 26px !important; }
  .site-header--glass .menu-toggle{
    width: 38px !important;
    height: 38px !important;
    font-size: 1.75rem;
  }
}

@media (max-width: 420px){
  .site-header--glass nav{
    min-height: 48px !important;
    padding: 6px 10px !important;
  }
  .site-header--glass .logo-img{ height: 24px !important; }
  .site-header--glass .menu-toggle{
    width: 36px !important;
    height: 36px !important;
  }
}

/* Internal page heroes now use an <img>; make it behave like the video layer */
.page-hero-overlay > .hero-video img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* PATCH v108 — Hero range pills (match products hero) */

.page-hero-overlay .range-filter{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.page-hero-overlay .range-filter .pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.page-hero-overlay .range-filter .pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.18);
}

.page-hero-overlay .range-filter .pill.active,
.page-hero-overlay .range-filter .pill.is-active{
  background: rgba(255,255,255,0.95);
  color: #0b2a4a;
  border-color: rgba(255,255,255,0.95);
}


/* ========================================================================
   PATCH v109 — Center main page headings + hero copy
   - Centers internal hero title + subtitle (products/services/etc.)
   - Centers section intro blocks (h2 + intro text) across main pages
   ======================================================================== */

/* Internal hero copy: centered like About */
.page-hero-overlay__content{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

.page-hero-overlay__content p{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}

.page-hero-overlay .range-filter{
  justify-content: center;
}

/* Section headings + intro copy */
.section-intro{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-intro p{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}

/* Also cover simple sections where h2/p are direct children (e.g. About) */
.section > .container > h2{
  text-align: center;
}

.section > .container > h2 + p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}

/* ========================================================================
   PATCH v110 — Design Option A (Premium Cards) merged into site-extra.css
   Applies permanently to Products + Services via body classes.
   ======================================================================== */

/* -------------------------
   Shared: section rhythm
   ------------------------- */
.page-products .section,
.page-services .section{
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (max-width: 720px){
  .page-products .section,
  .page-services .section{
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Section intro: premium underline accent */
.page-products .section-intro h2,
.page-services .section-intro h2{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.page-products .section-intro h2::after,
.page-services .section-intro h2::after{
  content: "";
  display: block;
  width: 76px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(12,90,219,0.95), rgba(12,90,219,0.12));
}

/* -------------------------
   Products: premium cards
   ------------------------- */
.page-products .product-grid{
  gap: 24px;
  margin-top: 24px;
}

.page-products .product-card{
  border-radius: 22px;
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 18px 46px rgba(16,24,40,0.10);
  transform: translateZ(0);
}

.page-products .product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 62px rgba(16,24,40,0.14);
}

.page-products .product-card .card-body{
  padding: 16px 18px 18px;
}

.page-products .product-card h4{
  font-size: 1.10rem;
}

.page-products .product-card p{
  font-size: 0.97rem;
}

.page-products .product-card .media{
  position: relative;
}

.page-products .product-card .media::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(12,90,219,0.95), rgba(12,90,219,0.10));
  opacity: 0.92;
  pointer-events: none;
}

/* -------------------------
   Services: premium cards
   ------------------------- */
.page-services .standout-grid{
  gap: 22px;
}

.page-services .standout-card{
  background: #fff;
  border: 1px solid rgba(16,24,40,0.08);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(16,24,40,0.10);
}

.page-services .standout-card:hover{
  box-shadow: 0 26px 62px rgba(16,24,40,0.14);
}

.page-services .standout-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12,90,219,0.10);
  border: 1px solid rgba(12,90,219,0.14);
}

.page-services .standout-icon svg{
  width: 24px;
  height: 24px;
}

/* Trust bar: pill look */
.page-services .trust-bar{
  border-radius: 18px;
  border: 1px solid rgba(16,24,40,0.08);
  background: linear-gradient(180deg, rgba(238,244,252,1), rgba(238,244,252,0.70));
  box-shadow: 0 14px 34px rgba(16,24,40,0.08);
  padding: 14px 16px;
}

/* ========================================================================
   PATCH v111 — Responsive hero <picture> support
   - Allows internal page heroes to use <picture> + srcset (WebP) cleanly
   ======================================================================== */
.page-hero-overlay > .hero-video picture{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.page-hero-overlay > .hero-video picture img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ========================================================================
   PATCH v112 — Hero eyebrow removal + consistent hero CTAs + mobile fit
   - Removes hero eyebrow on main pages
   - Ensures home hero CTAs match Products hero (pill buttons)
   - Improves pill sizing on small screens so copy fits cleanly
   ======================================================================== */

/* Safety: if any hero eyebrow slips through, hide it */
.hero-eyebrow{ display: none !important; }

/* Remove any top gap when eyebrow is removed */
.page-hero-overlay__content h1{ margin-top: 0; }

/* Home hero: reuse Products-style pill buttons */
.hero-video .range-filter{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* match Products hero: occupy the full hero content width */
  width: 100%;
}

.hero-video .range-filter .pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.hero-video .range-filter .pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.18);
}

.hero-video .range-filter .pill.is-active,
.hero-video .range-filter .pill.active,
.hero-video .range-filter .pill.is-active:hover{
  background: rgba(255,255,255,0.95);
  color: #0b2a4a;
  border-color: rgba(255,255,255,0.95);
}

@media (max-width: 640px){
  /* keep home hero CTAs left-aligned on mobile */
  .hero-video .range-filter{ justify-content: flex-start; }
}

/* Extra-tight pills on very small screens (prevents awkward wrapping) */
@media (max-width: 420px){
  .page-hero-overlay .range-filter .pill,
  .hero-video .range-filter .pill{
    padding: 9px 12px;
    font-size: 0.95rem;
  }
}
/* ===========================
   Performance helpers (v12)
   =========================== */

/* Chrome/Lighthouse benefit: avoid rendering large offscreen sections until needed. */
@supports (content-visibility: auto) {
  .section {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}



/* ===========================
   PATCH v114: Category cover WebP + picture support
   =========================== */

/* Ensure <picture> behaves like an <img> inside cards */
.card .media picture,
.product-card .media picture{
  display:block;
  width:100%;
  height:100%;
}
.card .media picture img,
.product-card .media picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* a11y: menu toggle is a <button>; neutralise default button styles */
.menu-toggle{
  background: none !important;
  border: 0 !important;
  font: inherit;
  color: inherit;
}
.menu-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 3px;
}

/* =========================================================
   PATCH v18 (Product listing pages): ensure consistent styling
   ========================================================= */

/* Product listing templates (main category/subcategory/all machines)
   use <img> directly inside .product-card (not wrapped in .media). */
.page-products .product-card > img{
  display:block;
  width:100%;
  height:190px;
  object-fit:cover;
}