/* ============================================================
   Shramajeevi Modern Industries — Design System
   Concept: the machine nameplate. Every industrial machine
   carries a stamped steel plate — model, capacity, serial.
   That object becomes the site's signature motif: labels,
   cards, stats and the header mark are all rendered as plates.
   ============================================================ */

:root{
  --charcoal:#1F4D36;
  --steel:#2F6B4A;
  --steel-light:#5C9272;
  --paper:#F6FBF8;
  --paper-dim:#EEF8F2;
  --gold:#82B99A;
  --gold-dark:#5F9D78;
  --rust:#6FAF88;
  --rust-dark:#4F906A;
  --graphite:#527563;
  --ink:#183D2B;
  --line-dark:rgba(255,255,255,0.18);
  --line-light:rgba(24,61,43,0.14);

 --display:'Outfit','Arial Narrow',sans-serif;
--body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;

  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:none;
  letter-spacing:0.02em;
  margin:0 0 0.5em;
  font-weight:600;
  line-height:1.1;
}
p{margin:0 0 1em;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:22px;height:2px;
  background:var(--gold-dark);
  display:inline-block;
}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:14px 24px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold);color:var(--ink);}
.btn-primary:hover{background:var(--gold-dark);}
.btn-outline{border-color:var(--paper);color:var(--paper);background:transparent;}
.btn-outline:hover{background:var(--paper);color:var(--ink);}
.btn-outline-dark{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline-dark:hover{background:var(--ink);color:var(--paper);}
.btn-rust{background:var(--rust);color:var(--paper);}
.btn-rust:hover{background:var(--rust-dark);}
.btn-block{width:100%;justify-content:center;}

/* -------------------- Header -------------------- */

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
body.home-page .site-header{
  background:transparent;
  border-bottom-color:transparent;
}
body:not(.home-page) .site-header{
  background:var(--ink);
  border-bottom-color:var(--line-dark);
}
body.home-page .site-header.is-scrolled{
  background:#DCEFE4;
  border-bottom-color:#B8DDC5;
}
.header-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  max-width:var(--max);margin:0 auto;
  gap:20px;
}
.header-cta{
    margin-left:auto !important;
    flex:none !important;
    order:99;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--paper);}
.brand-plate{
  border:1.5px solid var(--gold);
  color:var(--gold);
  font-family:var(--mono);
  font-size:1.1rem;
  font-weight:700;
  padding:4px 8px;
  letter-spacing:0.04em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;letter-spacing:0.02em;}
.brand-sub{font-family:var(--mono);font-size:0.62rem;color:var(--paper-dim);letter-spacing:0.1em;text-transform:uppercase;}

ul.main-nav{display:flex;align-items:center;justify-content:center;gap:28px;margin:0 0 0 48px;flex:1;white-space:nowrap;}
.main-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.2;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--gold);border-color:var(--gold);}
.header-cta{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.header-phone{
  font-family:var(--mono);font-size:0.82rem;color:var(--paper);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.header-phone svg{flex:none;}
.nav-toggle{
  display:none;background:none;border:1.5px solid var(--line-dark);
  color:var(--paper);padding:8px 10px;cursor:pointer;
}

@media (max-width:1150px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--ink);
    flex-direction:column;align-items:flex-start;
    padding:10px 24px 22px;
    gap:4px;
    border-bottom:1px solid var(--line-dark);
    display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav.open a{width:100%;padding:10px 0;border-bottom:1px solid var(--line-dark);color:#ffffff !important;font-weight:600;}
  .nav-toggle{display:inline-flex;}
  .header-phone span.long{display:none;}
  .header-bar{
      flex-wrap:nowrap;
  }
  .header-cta{
      margin-left:auto;
      flex:none;
  }
}

/* -------------------- Hero -------------------- */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--ink), var(--steel) 130%);
  color:var(--paper);
  padding:96px 0 80px;
  padding-top:110px;
  overflow:hidden;
  border-bottom:6px solid var(--gold);
  display:flex;
  align-items:center;
}
.hero::after{
  content:'';
  position:absolute;inset:0;
  background-image:none;
  pointer-events:none;
  z-index:1;
}
/* -------------------- Video backdrop (hero + page-hero) -------------------- */
.media-backdrop{
  position:absolute;inset:0;
  overflow:hidden;
  z-index:0;
}
.media-backdrop video,
.media-backdrop img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  filter:grayscale(0.25) contrast(1.05) brightness(0.62);
}
.media-backdrop::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(130,185,154,0.20), transparent 55%),
    linear-gradient(180deg, rgba(24,27,29,0.55) 0%, rgba(24,61,43,0.78) 55%, var(--ink) 100%);
}
.media-backdrop::after{
  content:'';
  position:absolute;inset:0;
  box-shadow:inset 0 0 140px rgba(0,0,0,0.55);
}
.hero-inner{position:relative;z-index:2;max-width:820px;}
.hero-reel-tag{
  position:absolute;
  right:24px;bottom:28px;
  z-index:2;
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--paper-dim);
  opacity:0.85;
}
.hero-reel-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse-dot 2.2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.25;}}
@media (prefers-reduced-motion:reduce){
  .media-backdrop video{display:none;}
  .hero-reel-tag .dot{animation:none;}
}
@media (max-width:760px){
  .hero{min-height:560px;}
}
.hero h1{
  font-size:clamp(2.4rem, 5.6vw, 4.4rem);
  color:var(--paper);
  margin-bottom:0.3em;
}
.hero h1 em{
  font-style:normal;
  color:var(--gold);
}
.hero-lede{
  font-size:1.08rem;
  color:var(--paper-dim);
  max-width:620px;
  margin-bottom:2em;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:56px;}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line-dark);
  padding:8px 14px;
  margin-bottom:24px;
}

/* nameplate stat strip */
.plate-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-dark);
}
.plate-cell{
  padding:20px 22px;
  border-left:1px solid var(--line-dark);
}
.plate-cell:first-child{border-left:none;}
.plate-num{font-family:var(--mono);font-size:1.7rem;color:var(--gold);display:block;}
.plate-label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper-dim);}
@media (max-width:760px){
  .plate-strip{grid-template-columns:repeat(2,1fr);}
  .plate-cell{border-left:1px solid var(--line-dark);}
  .plate-cell:nth-child(2n+1){border-left:none;}
  .plate-cell:nth-child(n+3){border-top:1px solid var(--line-dark);}
}

/* -------------------- Sections -------------------- */
section{padding:48px 0;}
.section-dark{background:var(--ink);color:var(--paper);}
.section-steel{
  background:#f6faf6;
  color:#102D27;
}
.section-steel .eyebrow{
  color:#102D27;
}

.section-steel h2,
.section-steel h4,
.section-steel p{
  color:#102D27;
}

.section-steel .process-item{
  border-color:rgba(16,45,39,0.18);
}

.section-steel .process-num{
  color:#102D27;
}
.section-tight{padding:40px 0;}
.section-head{max-width:680px;margin-bottom:52px;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
.section-dark .eyebrow, .section-steel .eyebrow{color:var(--gold);}

.lede{font-size:1.05rem;color:var(--graphite);max-width:640px;}
.section-dark .lede,.section-steel .lede{color:var(--paper-dim);}

/* -------------------- Grid / Cards -------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

/* the nameplate card — used for machinery, values, reasons */
.plate-card{
  background:var(--paper);
  border:1px solid var(--line-light);
  padding:0;
  display:flex;flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.plate-card:hover{border-color:var(--gold-dark);transform:translateY(-3px);}
.plate-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px 22px 14px;
  border-bottom:1px dashed var(--line-light);
}
.plate-model{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--gold-dark);text-transform:uppercase;}
.plate-index{font-family:var(--mono);font-size:0.7rem;color:var(--graphite);opacity:0.55;}
.plate-card h3{font-size:1.2rem;padding:0 22px;margin-top:16px;}
.plate-card p{padding:0 22px;color:var(--graphite);font-size:0.95rem;}
.plate-card .tag-row{padding:0 22px 20px;margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;}
.tag{
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.04em;text-transform:uppercase;
  background:var(--paper-dim);color:var(--ink);padding:4px 8px;
}
.plate-card ul.benefits{padding:0 22px 22px;}
.plate-card ul.benefits li{
  position:relative;padding-left:16px;margin-bottom:6px;font-size:0.92rem;color:var(--graphite);
}
.plate-card ul.benefits li::before{
  content:'—';position:absolute;left:0;color:var(--gold-dark);
}

/* dark variant plate card (for on-dark sections) */
.plate-card.on-dark{background:var(--steel);border-color:var(--line-dark);color:var(--paper);}
.plate-card.on-dark p{color:var(--paper-dim);}
.plate-card.on-dark .plate-index{color:var(--paper-dim);}

/* -------------------- Numbered process -------------------- */
.process-list{border-top:1px solid var(--line-light);}
.process-item{
  display:grid;grid-template-columns:90px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--line-light);
}
.section-dark .process-item,.section-steel .process-item{border-color:var(--line-dark);}
.process-num{font-family:var(--mono);font-size:1.6rem;color:var(--gold-dark);}
.section-dark .process-num,.section-steel .process-num{color:var(--gold);}
.process-item h4{margin-bottom:6px;font-size:1.05rem;}

/* -------------------- Two column feature -------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px;}}
.stat-block{display:flex;gap:30px;flex-wrap:wrap;margin-top:28px;}
.stat{border-left:3px solid var(--gold);padding-left:14px;}
.stat b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--ink);}
.section-dark .stat b,.section-steel .stat b{color:var(--paper);}
.stat span{font-family:var(--mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--graphite);}
.section-dark .stat span,.section-steel .stat span{color:var(--paper-dim);}

/* -------------------- Industries strip -------------------- */
.industry-row{display:flex;flex-direction:column;border-top:1px solid var(--line-light);}
.industry-line{
  display:grid;grid-template-columns:200px 1fr;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--line-light);
  align-items:baseline;
}
.industry-line h4{font-size:1.05rem;margin:0;}
.industry-line p{margin:0;color:rgba(1, 17, 4, 0.85);font-size:0.94rem;}
@media (max-width:700px){.industry-line{grid-template-columns:1fr;gap:6px;}}

/* -------------------- CTA banner -------------------- */
.cta-banner{
  background:var(--rust);
  color:var(--paper);
  padding:56px 0;
  border-top:4px solid var(--gold);
}
.cta-banner .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-banner h2{font-size:1.7rem;margin-bottom:0.2em;}
.cta-banner p{color:rgba(241,237,227,0.85);margin:0;}
.cta-banner .btn-primary{background:var(--paper);color:var(--ink);}
.cta-banner .btn-primary:hover{background:var(--gold);}

/* -------------------- Forms -------------------- */
.form-card{background:var(--steel);color:var(--paper);padding:36px;border:1px solid var(--line-dark);}
.form-card h3{color:var(--paper);}
.field{margin-bottom:18px;}
.field label{
  display:block;font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--paper-dim);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--charcoal);border:1px solid var(--line-dark);color:var(--paper);
  padding:12px 14px;font-family:var(--body);font-size:0.95rem;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}
.form-note{font-size:0.82rem;color:var(--paper-dim);margin-top:14px;}

/* -------------------- File upload (resume) -------------------- */
.field-file{
  position:relative;
  border:1px dashed var(--line-dark);
  background:var(--charcoal);
  padding:20px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.field-file:hover,.field-file.drag{border-color:var(--gold);background:rgba(130,185,154,0.08);}
.field-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.field-file .file-label{font-family:var(--mono);font-size:0.78rem;color:var(--paper-dim);letter-spacing:0.03em;}
.field-file .file-label b{color:var(--gold);font-weight:600;}
.field-file .file-picked{margin-top:6px;font-size:0.82rem;color:var(--paper);}

/* -------------------- Form submit states -------------------- */
.form-status{
  margin-top:16px;padding:12px 14px;font-size:0.86rem;display:none;
  border:1px solid var(--line-dark);
}
.form-status.show{display:block;}
.form-status.status-ok{border-color:var(--gold);color:var(--gold);}
.form-status.status-err{border-color:var(--rust);color:#e0a08e;}
.form-status.status-busy{color:var(--paper-dim);}
button[type=submit]:disabled{opacity:0.55;cursor:progress;}

/* -------------------- Footer -------------------- */
footer{background:var(--charcoal);color:var(--paper-dim);padding:64px 0 24px;border-top:4px solid var(--gold);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1.8fr 1fr 1.1fr;gap:32px;margin-bottom:48px;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{
  font-family:var(--mono);color:var(--paper);font-size:0.78rem;letter-spacing:0.1em;
  text-transform:uppercase;margin-bottom:16px;
}
.footer-grid li{margin-bottom:10px;font-size:0.9rem;}
.footer-grid a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid var(--line-dark);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.03em;color:var(--paper-dim);
}

/* -------------------- Breadcrumb / page header -------------------- */
.page-hero{
  position:relative;
  background:#d8eee0;color:var(--ink);
  padding:96px 0 56px;
  border-bottom:1px solid var(--line-light);
  overflow:hidden;
}
.page-hero .media-backdrop{display:none;}
.page-hero p{color:var(--graphite);}
.crumbs{color:var(--graphite) !important;}
.crumbs a{color:var(--gold-dark) !important;}
.page-hero .container{position:relative;z-index:2;}
.page-hero h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:0.3em;}
.page-hero p{color:var(--paper-dim);max-width:640px;font-size:1rem;}
.crumbs{font-family:var(--mono);font-size:0.72rem;color:var(--paper-dim);letter-spacing:0.05em;margin-bottom:18px;text-transform:uppercase;}
.crumbs a{color:var(--gold);}

/* -------------------- In-page video feature -------------------- */
.video-feature{
  position:relative;
  border:1px solid var(--line-dark);
  background:var(--ink);
  aspect-ratio:16/9;
  overflow:hidden;
  cursor:pointer;
}
.video-feature video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(0.15) contrast(1.03) brightness(0.85);
  transition:filter .3s ease, transform .5s ease;
}
.video-feature:hover video{filter:grayscale(0) contrast(1.05) brightness(0.95);transform:scale(1.015);}
.video-feature::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(24,27,29,0.85) 0%, rgba(24,27,29,0.05) 45%);
  z-index:1;pointer-events:none;
}
.video-feature-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:20px 24px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
}
.video-feature-caption h4{color:var(--paper);margin-bottom:2px;font-size:1.05rem;}
.video-feature-caption span{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);}
.video-feature-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:64px;border-radius:50%;
  background:rgba(24,27,29,0.55);
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .2s ease;
  pointer-events:none;
}
.video-feature:hover .video-feature-play{background:var(--gold);transform:translate(-50%,-50%) scale(1.06);}
.video-feature-play svg{color:var(--paper);}
.video-feature:hover .video-feature-play svg{color:var(--ink);}
.video-feature.is-playing .video-feature-play,
.video-feature.is-playing .video-feature-caption{opacity:0;pointer-events:none;}
.video-feature-frame{
  position:absolute;inset:14px;border:1px solid rgba(130,185,154,0.35);z-index:2;pointer-events:none;
}

/* -------------------- Video lightbox -------------------- */
.video-lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(15,17,18,0.92);
  padding:24px;
}
.video-lightbox.open{display:flex;}
.video-lightbox-inner{
  position:relative;width:100%;max-width:1000px;aspect-ratio:16/9;
  border:1px solid var(--line-dark);background:#000;
}
.video-lightbox-inner video{width:100%;height:100%;object-fit:contain;background:#000;}
.video-lightbox-close{
  position:absolute;top:-44px;right:0;
  background:none;border:1px solid var(--line-dark);color:var(--paper);
  width:34px;height:34px;cursor:pointer;font-size:1rem;
}
.video-lightbox-close:hover{border-color:var(--gold);color:var(--gold);}

/* -------------------- Per-card "watch demo" trigger -------------------- */
.plate-watch{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gold-dark);background:none;border:none;cursor:pointer;padding:0;
  margin-top:2px;
}
.plate-watch:hover{color:var(--gold);}
.plate-watch svg{flex:none;}

/* -------------------- FAQ -------------------- */
.faq-item{border-bottom:1px solid var(--line-light);padding:22px 0;}
.faq-item summary{
  cursor:pointer;font-family:var(--display);text-transform:uppercase;
  font-size:1.02rem;letter-spacing:0.01em;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-family:var(--mono);color:var(--gold-dark);font-size:1.3rem;}
.faq-item[open] summary::after{content:'–';}
.faq-item p{margin-top:14px;color:var(--graphite);max-width:720px;}

/* -------------------- Table (specs) -------------------- */
.spec-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.86rem;}
.spec-table th,.spec-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-light);}
.spec-table th{color:var(--gold-dark);text-transform:uppercase;font-size:0.72rem;letter-spacing:0.06em;}

/* ============================================================
   AI Chat Widget — Professional Design
   ============================================================ */

/* Launcher button */
#chat-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1F4D36 0%, #2F6B4A 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(31,77,54,0.45), 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
  animation: chatLauncherFloat 3.2s ease-in-out infinite;
  overflow: visible;
  padding: 0;
}
#chat-launcher img { display: none; }
#chat-launcher:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 16px 36px rgba(31,77,54,0.55);
  animation-play-state: paused;
}
#chat-launcher:active { transform: scale(0.94) !important; }
#chat-launcher:focus-visible { outline: 3px solid #82B99A; outline-offset: 3px; }
#chat-launcher::before, #chat-launcher::after { content: none !important; display: none !important; }
@keyframes chatLauncherFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Notification badge */
.chat-launcher-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #e53e3e;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Chat window */
#chat-window {
  position: fixed;
  bottom: 102px;
  right: 24px;
  z-index: 300;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 124px);
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #d0e8da;
  display: none;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(24,61,43,0.22), 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;
}
#chat-window.open {
  display: flex;
  animation: chatWindowOpen 0.32s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes chatWindowOpen {
  from { transform: translateY(24px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Chat header */
.chat-head {
  background: linear-gradient(135deg, #1F4D36 0%, #2F6B4A 100%);
  color: #ffffff;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-bottom: none;
}
.chat-head-left { display: flex; align-items: center; gap: 12px; }
.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  flex-shrink: 0;
}
.chat-head-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}
.chat-head strong { font-family: var(--display); font-weight: 700; font-size: 0.95rem; text-transform: none; }
.chat-head-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
.chat-head-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.4);
  animation: chatDotPulse 2.2s ease-in-out infinite;
}
@keyframes chatDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}
.chat-head-right { display: flex; align-items: center; gap: 8px; }
.chat-head-wa {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.chat-head-wa:hover { background: rgba(255,255,255,0.28); }
.chat-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  font-size: 0;
  flex-shrink: 0;
}
.chat-close:hover { background: rgba(255,255,255,0.28); }

/* Messages */
#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  background: #f8fdf9;
}
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: #c8e0d0; border-radius: 4px; }

.chat-msg {
  max-width: 84%;
  padding: 10px 14px;
  font-size: 0.875rem;
  line-height: 1.55;
  word-break: break-word;
  box-shadow: none;
  animation: chatMsgIn 0.22s ease both;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.bot {
  background: #ffffff;
  color: #183D2B;
  align-self: flex-start;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid #d8eedf;
  box-shadow: 0 2px 8px rgba(24,61,43,0.07);
}
.chat-msg.user {
  background: linear-gradient(135deg, #1F4D36, #2F6B4A);
  color: #ffffff;
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 4px 12px rgba(31,77,54,0.28);
}

/* Typing indicator */
.chat-msg.typing {
  background: #ffffff;
  border: 1px solid #d8eedf;
  align-self: flex-start;
  border-radius: 16px 16px 16px 4px;
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(24,61,43,0.07);
}
.chat-msg.typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5C9272;
  animation: chatTypingBounce 1.2s infinite ease-in-out;
  display: block;
}
.chat-msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Suggestion pills */
.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 12px;
  background: #f8fdf9;
  border-top: 1px solid #e5f0e9;
  flex-shrink: 0;
}
.chat-suggest button {
  font-family: var(--body);
  font-size: 0.775rem;
  background: #ffffff;
  color: #1F4D36;
  border: 1.5px solid #bddbc9;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.chat-suggest button:hover {
  background: #1F4D36;
  color: #ffffff;
  border-color: #1F4D36;
  transform: translateY(-1px);
}

/* Input row */
.chat-input-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid #e0ede7;
  gap: 8px;
  flex-shrink: 0;
}
.chat-input-row input {
  flex: 1;
  background: #f3faf5;
  border: 1.5px solid #c8e0d0;
  border-radius: 999px;
  color: #183D2B;
  padding: 10px 16px;
  font-family: var(--body);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.chat-input-row input::placeholder { color: #7aaa8e; }
.chat-input-row input:focus { border-color: #2F6B4A; background: #ffffff; }
.chat-input-row button {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1F4D36, #2F6B4A);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(31,77,54,0.35);
  font-size: 0;
  letter-spacing: 0;
  text-transform: none;
}
.chat-input-row button:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(31,77,54,0.45); }
.chat-input-row button:active { transform: scale(0.92); }

/* Mobile adjustments */
@media (max-width: 600px) {
  #chat-window {
    width: calc(100vw - 16px);
    right: 8px;
    bottom: 92px;
    height: calc(100svh - 110px);
    max-height: none;
    border-radius: 16px;
  }
  #chat-launcher { bottom: 20px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #chat-launcher { animation: none !important; }
  .chat-msg { animation: none !important; }
  #chat-window.open { animation: none !important; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn,.plate-card{transition:none;}
}

/* Careers specific */
.job-card{border:1px solid var(--line-light);padding:24px;background:var(--paper);}
.job-card h3{font-size:1.1rem;}
.job-meta{font-family:var(--mono);font-size:0.72rem;color:var(--gold-dark);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;}
.benefit-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.benefit-cell{background:var(--ink);padding:24px;}
.benefit-cell b{display:block;color:var(--gold);font-family:var(--mono);font-size:0.85rem;text-transform:uppercase;margin-bottom:6px;}
.benefit-cell span{color:var(--paper-dim);font-size:0.88rem;}
@media (max-width:760px){.benefit-strip{grid-template-columns:repeat(2,1fr);}}

/* Map */
.map-wrap{border:1px solid var(--line-light);height:340px;width:100%;overflow:hidden;}
.map-wrap iframe{width:100%;height:100%;border:0;}
.section-field-bg{
  position:relative;
  background-image:linear-gradient(180deg, rgba(16,45,39,0.82), rgba(16,45,39,0.90)), url('assets/img/field-bg.png');
  background-size:cover;
  background-position:center;
}
.section-field-bg h2, .section-field-bg .eyebrow{color:var(--paper) !important;}
.section-field-bg .eyebrow{color:var(--gold) !important;}
.section-field-bg .lede{color:var(--paper-dim) !important;}
.section-field-bg .plate-card.on-dark{background:rgba(255,255,255,0.08) !important;border-color:rgba(241,237,227,0.2) !important;color:var(--paper) !important;}
.section-field-bg .plate-card.on-dark p{color:var(--paper-dim) !important;}
.plate-card{
  background:#DCEFE4 !important;
  border-color:#B8DDC5 !important;
}
.plate-card.on-dark{
  background:#DCEFE4 !important;
  border-color:#B8DDC5 !important;
}
.plate-card.on-dark h3,
.plate-card.on-dark p,
.plate-card.on-dark li{
  color:#123A26 !important;
}
.plate-card.on-dark .plate-model{
  color:#8A5A1E !important;
}
.plate-card.on-dark .plate-index{
  color:#4C6B5C !important;
  opacity:1 !important;
}
.brand-logo{
  border:none;
  padding:6px 10px;
  height:64px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  background:none;
  border-radius:4px;
  flex-shrink:0;
}
brand-name{display:none;}
.plate-card h3{
  color:#123A26 !important;
  opacity:1 !important;
  _webkit-text-fill-color:#123A26 !important;
  text-shadow: none !important;
  background:none !important;

}

.site-header.is-scrolled .brand-name,
.site-header.is-scrolled .brand-sub,
body:not(.home-page) .site-header .brand-name,
body:not(.home-page) .site-header .brand-sub{color:#1F5C3D !important;}

.site-header.is-scrolled .main-nav a,
body:not(.home-page) .site-header .main-nav a{color:#123A26 !important; font-weight:700 !important;}

.site-header.is-scrolled .header-phone,
body:not(.home-page) .site-header .header-phone{color:#1F5C3D !important;}

.site-header.is-scrolled .nav-toggle,
body:not(.home-page) .site-header .nav-toggle{color:#1F5C3D !important;}

body.home-page .site-header:not(.is-scrolled) .brand-name,
body.home-page .site-header:not(.is-scrolled) .brand-sub,
body.home-page .site-header:not(.is-scrolled) .main-nav a,
body.home-page .site-header:not(.is-scrolled) .header-phone,
body.home-page .site-header:not(.is-scrolled) .nav-toggle{
  color:#ffffff !important;
}

main{padding-top:96px;}

/* =====================================================
   COMMODITIES SECTION
===================================================== */

.commodities-section {
    width: 100%;
    padding: 110px 6%;
    background: #ffffff;
    overflow: hidden;
}


/* =====================================================
   INTRO / HEADING
===================================================== */

.commodities-intro {
    max-width: 1400px;
    margin: 0 auto 70px;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;

    align-items: end;
}


.section-label {
    display: block;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;

    color: #777;

    margin-bottom: 18px;
}


.section-label::before {
    content: "";
    display: inline-block;

    width: 32px;
    height: 2px;

    background: #2f6f4e;

    margin-right: 12px;
    vertical-align: middle;
}


.commodities-heading h2 {
    margin: 0;

    max-width: 700px;

    font-size: clamp(42px, 5vw, 76px);
    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -2px;

    color: #173f2b;
}


.commodities-heading h2 span {
    display: block;

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;

    color: #F31C1C !important;

    margin-top: 8px;
}

.commodities-description {
    max-width: 520px;
    padding-bottom: 5px;
}


.commodities-description p {
    margin: 0;

    font-size: 17px;
    line-height: 1.7;

    color: #555;
}


/* =====================================================
   CARDS GRID
===================================================== */

.commodities-grid {
    max-width: 1400px;
    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}

.commodities-grid {
    max-width: 1400px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    column-gap: 18px !important;
    row-gap: 18px !important;
}
/* =====================================================
   CARD
===================================================== */

.commodity-card {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 14px;

    background: #173f2b;

    cursor: pointer;
}


.commodity-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s ease;
}


/* =====================================================
   DARK IMAGE OVERLAY
===================================================== */

.commodity-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.05) 35%,
            rgba(0, 0, 0, 0.15) 55%,
            rgba(0, 0, 0, 0.78) 100%
        );

    z-index: 1;

    transition: background 0.4s ease;
}


/* =====================================================
   CARD TOP
===================================================== */

.commodity-top {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 2;
}


.commodity-top span {
    display: inline-block;

    padding: 8px 12px;

    border-radius: 5px;

    background: rgba(20, 35, 28, 0.65);

    backdrop-filter: blur(6px);

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;
}


/* =====================================================
   CARD BOTTOM
===================================================== */

.commodity-bottom {
    position: absolute;

    left: 24px;
    right: 24px;
    bottom: 22px;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 15px;
}


.commodity-bottom h3 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;

    font-weight: 500;
}


.commodity-bottom a {
    flex-shrink: 0;

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition: letter-spacing 0.3s ease;
}


.commodity-bottom a span {
    margin-left: 4px;

    font-size: 14px;
}


/* =====================================================
   HOVER
===================================================== */

.commodity-card:hover img {
    transform: scale(1.08);
}


.commodity-card:hover .commodity-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(23, 63, 43, 0.35),
            rgba(0, 0, 0, 0.82)
        );
}


.commodity-card:hover .commodity-bottom a {
    letter-spacing: 2px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .commodities-section {
        padding: 80px 5%;
    }

    .commodities-intro {
        grid-template-columns: 1fr;
        gap: 25px;

        margin-bottom: 50px;
    }

    .commodities-description {
        max-width: 700px;
    }

    .commodities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .commodities-section {
        padding: 70px 20px;
    }

    .commodities-intro {
        margin-bottom: 40px;
    }

    .commodities-heading h2 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .commodities-description p {
        font-size: 15px;
        line-height: 1.6;
    }

    .commodities-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .commodity-card {
        height: 330px;
    }

    .commodity-bottom h3 {
        font-size: 24px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .commodities-section {
        padding: 70px 20px;
    }

    .commodities-heading {
        margin-bottom: 45px;
    }

    .commodities-heading h2 {
        font-size: 42px;
    }

    .commodities-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .commodities-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .commodity-card {
        height: 300px;
    }
}

Machinery cards — white card + spec-popup modal
   ============================================================ */
.machine-grid{gap:24px;}
.machine-card{
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:10px;
  overflow:hidden;
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 3px rgba(24,61,43,0.06);
}
.machine-card:hover,
.machine-card:focus-visible{
  border-color:var(--gold-dark);
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(24,61,43,0.12);
}
.machine-card-media{
  position:relative;
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--paper-dim), #dff0e6);
  overflow:hidden;
}
.machine-card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.machine-card:hover .machine-card-media img{transform:scale(1.05);}
.machine-card-media.no-img img,
.machine-card-media:has(img[src=""]) img{display:none;}
.machine-card-media.no-img::after{
  content:'Photo coming soon';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--gold-dark);
  text-align:center;padding:0 20px;
}
.machine-card-cat{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,0.95);
  color:var(--ink);
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.machine-card-body{
  padding:18px 20px 20px;
  display:flex;flex-direction:column;flex:1;
}
.machine-card-model{
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:6px;
}
.machine-card-body h3{font-size:1.02rem;margin-bottom:8px;letter-spacing:0.005em;}
.machine-card-body p{
  font-size:0.86rem;color:var(--graphite);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:14px;flex:1;
}
.machine-card-more{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ink);margin-top:auto;
  transition:gap .2s ease, color .2s ease;
}
.machine-card:hover .machine-card-more{gap:10px;color:var(--gold-dark);}
.machine-card-more svg{flex:none;}

/* -------------------- Machine detail modal -------------------- */
.machine-modal{
  position:fixed;inset:0;z-index:210;
  display:none;align-items:center;justify-content:center;
  background:rgba(24,61,43,0.55);
  padding:24px;
  overflow-y:auto;
}
.machine-modal.open{display:flex;}
.machine-modal-inner{
  position:relative;
  background:#fff;
  width:100%;max-width:920px;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  max-height:min(720px, 90vh);
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
@media (max-width:760px){
  .machine-modal-inner{grid-template-columns:1fr;max-height:92vh;overflow-y:auto;}
}
.machine-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(24,61,43,0.85);color:#fff;
  border:none;cursor:pointer;font-size:0.95rem;
  display:flex;align-items:center;justify-content:center;
}
.machine-modal-close:hover{background:var(--ink);}
.machine-modal-media{
  position:relative;
  background:linear-gradient(135deg, var(--paper-dim), #dff0e6);
  min-height:220px;
}
.machine-modal-media img{width:100%;height:100%;object-fit:cover;}
.machine-modal-media.no-img::after{
  content:'Photo coming soon';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--gold-dark);text-align:center;padding:0 24px;
}
.machine-modal-watch{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.95);color:var(--ink);
  border:none;border-radius:999px;padding:8px 14px;cursor:pointer;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.05em;text-transform:uppercase;
}
.machine-modal-watch:hover{background:var(--gold);}
.machine-modal-watch[hidden]{display:none;}
.machine-modal-content{
  padding:28px 30px 26px;
  overflow-y:auto;
}
.machine-modal-cat{
  display:inline-block;
  font-family:var(--mono);font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;
  background:var(--paper-dim);color:var(--ink);
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.machine-modal-model{
  display:block;
  font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:6px;
}
.machine-modal-content h3{font-size:1.35rem;margin-bottom:10px;}
.machine-modal-content p{color:var(--graphite);font-size:0.92rem;}
.machine-modal-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;
  margin:16px 0 18px;padding:16px;
  background:var(--paper);border:1px solid var(--line-light);border-radius:8px;
}
.machine-modal-specs .spec{display:flex;flex-direction:column;}
.machine-modal-specs .spec b{
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--graphite);opacity:0.75;margin-bottom:2px;
}
.machine-modal-specs .spec span{font-size:0.92rem;color:var(--ink);font-weight:500;}
.machine-modal-specs.empty{
  grid-template-columns:1fr;
  font-family:var(--body);font-size:0.88rem;color:var(--graphite);
}
.machine-modal-content ul.benefits{margin-bottom:16px;}
.machine-modal-content ul.benefits li{
  position:relative;padding-left:16px;margin-bottom:6px;font-size:0.88rem;color:var(--graphite);
}
.machine-modal-content ul.benefits li::before{content:'—';position:absolute;left:0;color:var(--gold-dark);}
.machine-modal-content .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.machine-modal-actions{display:flex;gap:12px;flex-wrap:wrap;}
.page-hero p{color:var(--graphite) !important;}
.section-team-bg{
  background: var(--paper-dim);
}
.section-team-bg .section-head h2{
  color: var(--ink) !important;
}
.section-team-bg .eyebrow{
  color: var(--gold-dark) !important;
}
.section-team-bg .lede,
.section-team-bg p{
  color: var(--graphite) !important;
}

/* ============================================================
   ADDED: Card shadows & hover effects (appended at end —
   overrides earlier .plate-card / .plate-cell / .form-card /
   .video-feature rules via normal CSS cascade)
   ============================================================ */
:root{
  --shadow-sm:0 2px 8px rgba(24,61,43,0.08);
  --shadow-md:0 10px 24px rgba(24,61,43,0.14);
  --shadow-lg:0 18px 40px rgba(24,61,43,0.18);
}

/* machinery / value / reason cards */
.plate-card{
  box-shadow:var(--shadow-sm);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.plate-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

/* dark variant plate card */
.plate-card.on-dark:hover{
  box-shadow:0 18px 40px rgba(0,0,0,0.4);
}

/* nameplate stat-strip cells */
.plate-cell{
  transition:box-shadow .25s ease, background .25s ease;
}
.plate-cell:hover{
  background:rgba(130,185,154,0.06);
  box-shadow:inset 0 -3px 0 var(--gold);
}

/* form card */
.form-card{
  box-shadow:var(--shadow-lg);
}

/* in-page video feature card */
.video-feature{
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s ease;
}
.video-feature:hover{
  box-shadow:var(--shadow-lg);
}

/* ============================================================
   ADDED: Slightly larger fonts site-wide
   (rem-based sizing scales automatically off this base)
   ============================================================ */
html{
  font-size:17.5px;
}

@media (max-width:600px){
  html{
    font-size:16.5px;
  }
}

/* ============================================================
   ADDED: Final polish pass — colors/shadows/transitions/effects
   across the whole site. Uses existing variables only, nothing
   new invented. Pure additions — nothing above this is touched.
   ============================================================ */

/* ---- smoother global feel ---- */
a, button, .btn, .main-nav a, .plate-card, .plate-cell,
.industry-line, .process-item, .footer-grid a, .crumbs a{
  transition:all .25s cubic-bezier(0.16,1,0.3,1);
}

/* ---- buttons: lift + shadow + shine sweep ---- */
.btn{
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.btn::after{
  content:'';
  position:absolute;top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::after{left:120%;}
.btn:hover{box-shadow:var(--shadow-md);}
.btn-primary:hover{box-shadow:0 0 22px rgba(130,185,154,0.4), var(--shadow-md);}

/* ---- header: shadow once page scrolls ---- */
.site-header{transition:box-shadow .3s ease;}
.site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,0.2);}

/* ---- nav links: animated underline ---- */
.main-nav a{position:relative;}
.main-nav a::after{
  content:'';
  position:absolute;bottom:-2px;left:0;
  width:0;height:2px;
  background:var(--gold);
  transition:width .3s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{width:100%;}

/* ---- brand logo: subtle glow on hover ---- */
.brand-plate{transition:box-shadow .3s ease, transform .3s ease;}
.brand:hover .brand-plate{box-shadow:0 0 18px rgba(130,185,154,0.4);transform:translateY(-1px);}

/* ---- hero: gentle entrance animation ---- */
.hero h1{animation:fadeUp .7s ease .1s both;}
.hero-lede{animation:fadeUp .7s ease .25s both;}
.hero-actions{animation:fadeUp .7s ease .4s both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero-lede,.hero-actions{animation:none;}
}

/* ---- machinery / value cards: extra shadow + top accent reveal ---- */
.plate-card{box-shadow:var(--shadow-sm);}
.plate-card:hover{box-shadow:var(--shadow-md);}
.plate-card{position:relative;}
.plate-card::before{
  content:'';
  position:absolute;top:0;left:0;width:100%;height:0;
  background:var(--gold);
  transition:height .25s ease;
}
.plate-card:hover::before{height:3px;}
.plate-card .tag{transition:background .25s ease, color .25s ease;}
.plate-card:hover .tag{background:var(--gold);color:var(--ink);}

/* ---- stat strip cells ---- */
.plate-cell{transition:background .25s ease, box-shadow .25s ease;}
.plate-cell:hover{background:rgba(130,185,154,0.06);box-shadow:inset 0 -3px 0 var(--gold);}

/* ---- process items & industry rows: hover highlight ---- */
.process-item, .industry-line{transition:background .25s ease, padding-left .25s ease;}
.process-item:hover, .industry-line:hover{background:rgba(130,185,154,0.05);padding-left:8px;}

/* ---- form fields: focus glow ---- */
.field input, .field select, .field textarea{
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  box-shadow:0 0 0 3px rgba(130,185,154,0.18);
  outline:none;
}
.form-card{box-shadow:var(--shadow-lg);}

/* ---- video feature card ---- */
.video-feature{box-shadow:var(--shadow-sm);}
.video-feature:hover{box-shadow:var(--shadow-lg);}
.video-feature-play{transition:background .25s ease, transform .25s ease, box-shadow .25s ease;}
.video-feature:hover .video-feature-play{box-shadow:0 0 22px rgba(130,185,154,0.45);}

/* ---- CTA banner button ---- */
.cta-banner .btn-primary:hover{box-shadow:var(--shadow-md);}

/* ---- footer links ---- */
.footer-grid a{display:inline-block;}
.footer-grid a:hover{padding-left:4px;}

/* ---- breadcrumb links ---- */
.crumbs a:hover{color:var(--ink) !important;}

/* ---- selection color, matches brand palette ---- */
::selection{background:var(--gold);color:var(--ink);}

/* ============================================================
   ADDED: Framework color palette applied site-wide
   (only re-defines existing variables — structure untouched)
   ============================================================ */
:root{
  --charcoal:#0F3820;      /* was dark charcoal green -> framework bg-dark */
  --steel:#27A745;         /* was mid steel green -> framework primary green */
  --steel-light:#52B788;   /* was light steel -> framework secondary green */
  --paper:#FFFFFF;         /* was off-white paper -> framework bg-alt */
  --paper-dim:#D8F3DC;     /* was dim paper -> framework secondary-light */
  --gold:#27A745;          /* was gold highlight -> framework primary green */
  --gold-dark:#1E7F35;     /* was dark gold -> framework primary-dark */
  --rust:#DC3545;          /* was rust accent -> framework accent red */
  --rust-dark:#C82333;     /* was dark rust -> framework accent-hover */
  --graphite:rgba(27,94,32,0.7); /* was graphite text -> framework text-light */
  --ink:#0F3820;           /* was near-black ink -> framework bg-dark */
}

/* ============================================================
   ADDED: Extra button polish — scale, glow, ripple-style shine,
   active/press feedback. Uses existing variables only.
   ============================================================ */

.btn{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  transition:transform .2s cubic-bezier(0.16,1,0.3,1),
             box-shadow .25s cubic-bezier(0.16,1,0.3,1),
             background .25s ease, color .25s ease, border-color .25s ease;
}

/* bigger, springier hover lift */
.btn:hover{
  transform:translateY(-3px) scale(1.02);
}

/* pressed / active feedback — feels tactile */
.btn:active{
  transform:translateY(-1px) scale(0.98);
  transition:transform .1s ease;
}

/* soft glow ring behind primary buttons */
.btn-primary{
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
}
.btn-primary:hover{
  box-shadow:0 10px 26px rgba(0,0,0,0.18), 0 0 0 4px rgba(255,255,255,0.08);
}

/* outline buttons get a fill-sweep instead of instant color-swap */
.btn-outline,.btn-outline-dark{
  position:relative;
  z-index:1;
}
.btn-outline::before,.btn-outline-dark::before{
  content:'';
  position:absolute;inset:0;
  background:currentColor;
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(0.16,1,0.3,1);
  z-index:-1;
}

/* rust/accent buttons — slightly stronger shadow so red pops */
.btn-rust{
  box-shadow:0 4px 14px rgba(220,53,69,0.25);
}
.btn-rust:hover{
  box-shadow:0 10px 26px rgba(220,53,69,0.35);
}

/* icon inside a button (if any <svg>/<i> present) nudges on hover */
.btn svg,.btn i{
  transition:transform .25s cubic-bezier(0.16,1,0.3,1);
}
.btn:hover svg,.btn:hover i{
  transform:translateX(3px);
}

/* disabled buttons should never show hover effects */
.btn:disabled,.btn[disabled]{
  transform:none !important;
  box-shadow:none !important;
  cursor:not-allowed;
  opacity:0.55;
}

/* small buttons (if used) keep proportion */
.btn-block:hover{
  transform:translateY(-3px) scale(1.01);
}

/* ============================================================
   ADDED: Stronger greenish wash for all plain-white page areas
   ============================================================ */
body{
  background:#f6faf6;
}

/* sections that don't already set their own background
   (section-dark / section-steel already have colors, unaffected) */
section:not(.section-dark):not(.section-steel){
  background:#f6faf6;
}

/* page-hero — match same stronger green tone */
.page-hero{
  background:#DCF2E3;
}

/* cards keep a clean white so they still stand out against the green */
.plate-card{
  background:#FFFFFF;
}

/* footer stays dark, untouched — no change needed there */

/* ============================================================
   ADDED: Restyle .plate-card into the rounded, soft-shadow,
   centered card look (like the "Our Services" reference)
   ============================================================ */
.plate-card{
  background:#FFFFFF;
  border:none;
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 8px 24px rgba(15,56,32,0.12);
  transition:transform .3s ease, box-shadow .3s ease;
}
.plate-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 36px rgba(15,56,32,0.18);
  border-color:transparent;
}

/* header row (was left-aligned model/index) -> center it, remove dashed line */
.plate-card-head{
  flex-direction:column;
  align-items:center;
  border-bottom:none;
  padding:0 0 12px;
}
.plate-model,.plate-index{
  font-size:0.68rem;
  opacity:0.7;
}

/* heading + paragraph now centered, more breathing room */
.plate-card h3{
  padding:0;
  margin-top:8px;
  font-size:1.15rem;
  color:var(--ink);
}
.plate-card p{
  padding:0;
  margin-top:8px;
}

/* tags/benefits row -> center align too */
.plate-card .tag-row{
  justify-content:center;
  padding:16px 0 0;
  margin-top:12px;
}
.plate-card ul.benefits{
  padding:0;
  text-align:left;
  margin-top:12px;
}

/* dark variant keeps same rounded treatment */
.plate-card.on-dark{
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}

/* ============================================================
   ADDED: Fix CTA banner red -> match site's green theme
   (must be the very last rule in the file so it wins)
   ============================================================ */
.cta-banner{
  background:#43a06d;              /* matches --steel / header-hero green */
  border-top:4px solid #82B99A;    /* matches --gold accent */
}
.cta-banner .btn-primary{
  background:#F6FBF8;
  color:#183D2B;
}
.cta-banner .btn-primary:hover{
  background:#82B99A;
}
/* ============================================================
   ADDED: Gradient accent underlines for headings + section
   dividers (matches the reference "Our Services" style)
   ============================================================ */

/* short gradient underline under section headings */
.section-head h2::after,
h2.section-title::after{
  content:'';
  display:block;
  width:60px;
  height:4px;
  margin-top:10px;
  border-radius:2px;
  background:linear-gradient(90deg, #82B99A 0%, #2F6B4A 100%);
}

/* ============================================================
   COLOR PALETTE UPDATE — matched to shramajeevi-styles-advanced.css
   Same variable names used across the site, values remapped only
   ============================================================ */
:root{
  --charcoal:#0F3820;
  --steel:#1E7F35;
  --steel-light:#52B788;
  --paper:#F5F9F7;
  --paper-dim:#D8F3DC;
  --gold:#27A745;
  --gold-dark:#1E7F35;
  --rust:#DC3545;
  --rust-dark:#C82333;
  --graphite:#1B5E20;
  --ink:#1B5E20;
  --line-dark:rgba(255,255,255,0.18);
  --line-light:rgba(27,94,32,0.14);
}

/* ============================================================
   Match reference site — light background instead of dark green
   ============================================================ */
.hero{
  background:#F5F9F7 !important;
  color:var(--ink) !important;
}
.hero h1,
.hero .hero-lede,
.hero-tag,
.plate-label,
.plate-num{
  color:var(--ink) !important;
}
.section-dark{
  background:#F5F9F7 !important;
  color:var(--ink) !important;
}
.section-dark .eyebrow{
  color:var(--gold) !important;
}
/* ============================================================
   FIX: Darken text on light backgrounds (page-hero, about, etc.)
   ============================================================ */
.page-hero,
.page-hero *,
.section-dark p,
.section-dark li,
.section-dark .lede,
.about-content p,
.about-content li{
  color:var(--ink) !important;
}

.page-hero h1,
.section-dark h2,
.section-dark h3,
.section-dark h4{
  color:var(--ink) !important;
}

.page-hero .eyebrow,
.section-dark .eyebrow,
.crumbs a{
  color:var(--gold-dark) !important;
}

.founding-principles li,
.founding-principles h4{
  color:var(--ink) !important;
}
/* ============================================================
   FIX: Cards on light-green sections should be white, not green
   ============================================================ */
.section-dark .plate-card,
.section-dark .plate-card.on-dark,
.plate-card.on-dark{
  background:#FFFFFF !important;
  border-color:var(--line-light) !important;
  color:var(--ink) !important;
}

.section-dark .plate-card p,
.section-dark .plate-card.on-dark p,
.plate-card.on-dark p{
  color:var(--graphite) !important;
}

.section-dark .plate-card .plate-index,
.plate-card.on-dark .plate-index{
  color:var(--graphite) !important;
}

.section-dark .plate-card .plate-model,
.plate-card.on-dark .plate-model{
  color:var(--gold-dark) !important;
}

/* If mission/vision list items use a card-like container too */
.section-dark .form-card,
.form-card{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  border-color:var(--line-light) !important;
}
.form-card h3,
.form-card p,
.form-card li{
  color:var(--ink) !important;
}
/* ============================================================
   FIX: Make .plate-card (Vision/Mission + Industry cards) white
   Only targets actual cards, not plain text blocks
   ============================================================ */
.plate-card{
  background:#FFFFFF !important;
  border:1px solid var(--line-light) !important;
}
.plate-card.on-dark{
  background:#FFFFFF !important;
  border:1px solid var(--line-light) !important;
}
.plate-card.on-dark p,
.plate-card.on-dark h3,
.plate-card.on-dark .plate-model,
.plate-card.on-dark .plate-index{
  color:var(--ink) !important;
}

/* ============================================================
   FIX: "Our responsibility continues after delivery" heading
   invisible on light background — force dark text
   ============================================================ */
section:not(.section-dark):not(.section-steel):not(.hero) .section-head h2,
section:not(.section-dark):not(.section-steel):not(.hero) h2{
  color:var(--ink) !important;
}
section:not(.section-dark):not(.section-steel):not(.hero) .eyebrow{
  color:var(--gold-dark) !important;
}
section:not(.section-dark):not(.section-steel):not(.hero) .tag{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  border:1px solid var(--line-light) !important;
}
/* ============================================================
   FIX: Form card — full light theme (Careers + Contact forms)
   ============================================================ */
.form-card{
  background:#FFFFFF !important;
  border:1px solid var(--line-light) !important;
  color:var(--ink) !important;
}
.form-card h3{
  color:var(--ink) !important;
}
.form-card p{
  color:var(--graphite) !important;
}
.field label{
  color:var(--graphite) !important;
}
.field input,
.field select,
.field textarea{
  background:#F5F9F7 !important;
  border:1px solid var(--line-light) !important;
  color:var(--ink) !important;
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--graphite) !important;
  opacity:0.6;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold) !important;
  outline:none;
}
.field-file{
  background:#F5F9F7 !important;
  border:1px dashed var(--line-light) !important;
}
.field-file .file-label{
  color:var(--graphite) !important;
}
.field-file .file-label b{
  color:var(--gold-dark) !important;
}
.form-note{
  color:var(--graphite) !important;
}
/* ============================================================
   FIX: Bolder text inside forms (labels + input text)
   ============================================================ */
.field label{
  font-weight:700 !important;
}
.field input,
.field select,
.field textarea{
  font-weight:600 !important;
}
.field input::placeholder,
.field textarea::placeholder{
  font-weight:500 !important;
}
.form-card h3{
  font-weight:700 !important;
}
.form-note{
  font-weight:600 !important;
}
.field-file .file-label{
  font-weight:600 !important;
}
/* ============================================================
   FIX: FAQ section uses class "faq-bg" — correct selector
   ============================================================ */
html body section.faq-bg summary,
html body .faq-bg .faq-item summary,
html body .faq-bg h2{
  color:#1B5E20 !important;
  opacity:1 !important;
}
html body .faq-bg .faq-item p{
  color:#527563 !important;
  opacity:1 !important;
}
html body .faq-bg .eyebrow{
  color:#27A745 !important;
}

/* ============================================================
   COMPLETE SITE POLISH PACK
   Fonts, typography, animations, hover effects — all in one
   ============================================================ */

/* ---------- 1. Fonts & base typography ---------- */
body{
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  line-height:1.65;
}
h1,h2,h3,h4{
  font-family:var(--display);
  letter-spacing:0.01em;
}
p, li{
  font-size:1rem;
  line-height:1.7;
}

/* ---------- 2. Smooth scrolling + scrollbar ---------- */
html{scroll-behavior:smooth;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:var(--steel-light);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--steel);}
::selection{background:var(--gold);color:var(--ink);}

/* ---------- 3. Header polish ---------- */
.site-header{
  transition:box-shadow 0.3s ease;
}
.site-header.scrolled{
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
}
.main-nav a{position:relative;transition:color 0.2s ease;}
.main-nav a::after{
  content:'';
  position:absolute;left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--gold);
  transition:width 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{width:100%;}

.nav-toggle span,.hamburger-line{
  display:block;width:22px;height:2px;
  background:currentColor;transition:all 0.3s ease;border-radius:2px;
}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-toggle.active span:nth-child(2){opacity:0;transform:translateX(-10px);}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px);}

/* ---------- 4. Buttons ---------- */
.btn{
  position:relative;
  overflow:hidden;
  transition:transform 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.btn::before{
  content:'';
  position:absolute;top:0;left:-75%;
  width:50%;height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:left 0.5s ease;
}
.btn:hover::before{left:125%;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(39,167,69,0.18);}
.btn:active{transform:translateY(0) scale(0.98);box-shadow:none;}
.btn-primary:hover{box-shadow:0 8px 24px rgba(39,167,69,0.28);}
.btn-rust:hover{box-shadow:0 8px 24px rgba(220,53,69,0.28);}

/* ---------- 5. Cards ---------- */
.plate-card,
.industry-line,
.process-item,
.form-card{
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.plate-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(39,167,69,0.12);
  border-color:var(--gold-dark);
}
.industry-line:hover h4{color:var(--gold-dark);}

/* ---------- 6. Process / numbered lists ---------- */
.process-item{position:relative;}
.process-num{transition:color 0.2s ease, transform 0.2s ease;}
.process-item:hover .process-num{transform:scale(1.08);color:var(--gold);}

/* ---------- 7. Form fields ---------- */
.field input,.field select,.field textarea{
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(39,167,69,0.15);
}
.field-file{transition:border-color 0.2s ease, background 0.2s ease;}

/* ---------- 8. Video / media hover ---------- */
.media-backdrop img,.media-backdrop video,.video-feature video{
  transition:filter 0.4s ease, transform 0.5s ease;
}
.video-feature-play{transition:background 0.2s ease, transform 0.2s ease;}

/* ---------- 9. Video lightbox pop-in ---------- */
.video-lightbox-inner{animation:popIn 0.25s ease;}
@keyframes popIn{
  from{opacity:0;transform:scale(0.94);}
  to{opacity:1;transform:scale(1);}
}

/* ---------- 10. CTA banner ---------- */
.cta-banner .btn-primary{transition:transform 0.2s ease, background 0.2s ease;}
.cta-banner .btn-primary:hover{transform:translateY(-2px) scale(1.02);}

/* ---------- 11. Footer links ---------- */
.footer-grid a{
  position:relative;
  transition:color 0.2s ease, padding-left 0.2s ease;
}
.footer-grid a:hover{
  color:var(--gold);
  padding-left:4px;
}

/* ---------- 12. Scroll-reveal utility (pairs with small JS) ---------- */
.reveal-el{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal-el.active{opacity:1;transform:translateY(0);}

/* ---------- 13. FAQ accordion smoothness ---------- */
.faq-item summary{transition:color 0.2s ease;}
.faq-item:hover summary{color:var(--gold-dark);}
.faq-item[open] p{animation:fadeIn 0.3s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ---------- 14. Tags / labels ---------- */
.tag{transition:background 0.2s ease, color 0.2s ease;}
.plate-card:hover .tag{background:var(--gold);color:var(--ink);}

/* ============================================================
   Vertical accent line on card hover (matches reference)
   ============================================================ */
.plate-card{
  position:relative;
  overflow:hidden;
}
.plate-card::after{
  content:'';
  position:absolute;
  left:0;top:0;
  width:4px;
  height:0;
  background:linear-gradient(180deg, var(--rust) 0%, var(--gold) 100%);
  transition:height 0.3s ease;
}
.plate-card:hover::after{
  height:100%;
}
/* ============================================================
   COMPLETE EFFECTS PACK — everything from the reference file
   ============================================================ */

/* ---------- 1. Button shine-sweep + lift ---------- */
.btn{position:relative;overflow:hidden;transition:all 0.3s ease;}
.btn::before{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:rgba(255,255,255,0.2);
  transition:left 0.3s ease;
}
.btn:hover::before{left:100%;}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(39,167,69,0.35);
}
.btn-primary:active{transform:translateY(-1px);}
.btn-rust:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(220,53,69,0.3);
}
.btn-outline-dark:hover{
  background:var(--ink);color:var(--paper);
  transform:translateY(-2px);
}

/* ---------- 2. Plate-card vertical accent line on hover ---------- */
.plate-card{position:relative;overflow:hidden;transition:all 0.3s ease;}
.plate-card::after{
  content:'';position:absolute;left:0;top:0;
  width:4px;height:0;
  background:linear-gradient(180deg, var(--rust) 0%, var(--gold) 100%);
  transition:height 0.3s ease;
}
.plate-card:hover::after{height:100%;}
.plate-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(39,167,69,0.15);
  border-color:var(--gold-dark);
}

/* ---------- 3. Glass-card effect (for form-card / featured blocks) ---------- */
.form-card{
  position:relative;
  transition:all 0.3s ease;
}
.form-card::after{
  content:'';position:absolute;top:-1px;left:0;
  width:100%;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0;transition:opacity 0.3s ease;
}
.form-card:hover::after{opacity:1;}
.form-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(39,167,69,0.18);
}

/* ---------- 4. Icon hover (scale + rotate) ---------- */
.card-icon,
.plate-card .icon{
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.plate-card:hover .card-icon,
.plate-card:hover .icon{
  transform:scale(1.15) rotate(-5deg);
}

/* ---------- 5. Image zoom on hover ---------- */
.plate-card img,
.video-feature video,
.media-backdrop img{
  transition:transform 0.5s ease, filter 0.4s ease;
}
.plate-card:hover img{
  transform:scale(1.08);
}

/* ---------- 6. Shadow utility classes ---------- */
.shadow-lift{box-shadow:0 4px 16px rgba(39,167,69,0.1);transition:box-shadow 0.3s ease;}
.shadow-lift:hover{box-shadow:0 16px 40px rgba(39,167,69,0.22);}

.shadow-glow{box-shadow:0 8px 24px rgba(39,167,69,0.15), 0 0 20px rgba(39,167,69,0.15);}
.shadow-glow:hover{box-shadow:0 16px 40px rgba(39,167,69,0.25), 0 0 32px rgba(39,167,69,0.25);}

.shadow-depth{
  box-shadow:
    0 2px 4px rgba(27,94,32,0.08),
    0 4px 8px rgba(27,94,32,0.1),
    0 8px 16px rgba(27,94,32,0.12),
    0 16px 32px rgba(27,94,32,0.15);
  transition:box-shadow 0.3s ease;
}
.shadow-depth:hover{
  box-shadow:
    0 4px 8px rgba(27,94,32,0.12),
    0 8px 16px rgba(27,94,32,0.15),
    0 16px 32px rgba(27,94,32,0.2),
    0 24px 48px rgba(27,94,32,0.25);
}

/* ---------- 7. Accent line elements (standalone) ---------- */
.accent-line{
  width:4px;height:100%;
  background:linear-gradient(180deg, var(--rust) 0%, var(--gold) 100%);
  border-radius:2px;
}
.accent-line-horizontal{
  width:100%;height:3px;
  background:linear-gradient(90deg, var(--rust) 0%, var(--gold) 100%);
  border-radius:2px;
  margin:20px 0;
}

/* ---------- 8. Badges ---------- */
.badge{
  display:inline-block;padding:8px 16px;border-radius:20px;
  font-size:0.85rem;font-weight:600;
  background:var(--paper-dim);color:var(--gold-dark);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.badge-green{
  background:linear-gradient(135deg, var(--paper-dim) 0%, #d8f3dc 100%);
  color:var(--gold-dark);
}
.badge-red{background:rgba(220,53,69,0.12);color:var(--rust);}
.badge-primary{
  background:linear-gradient(135deg, var(--gold) 0%, var(--steel) 100%);
  color:#fff;
}

/* ---------- 9. Section title underline ---------- */
.section-head h2{position:relative;display:inline-block;}
.section-head h2::after{
  content:'';position:absolute;bottom:-8px;left:0;
  width:60px;height:5px;border-radius:3px;
  background:linear-gradient(90deg, var(--rust) 0%, var(--gold) 100%);
}

/* ---------- 10. Floating animation (hero background blob) ---------- */
@keyframes floatSlow{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(30px);}
}
.hero::before{
  content:'';position:absolute;
  bottom:-30%;left:-10%;
  width:500px;height:500px;
  background:radial-gradient(circle, rgba(130,185,154,0.08) 0%, transparent 70%);
  border-radius:50%;
  animation:floatSlow 10s ease-in-out infinite reverse;
  z-index:0;pointer-events:none;
}

/* ---------- 11. Pulse (for reel-tag dot, already exists, kept consistent) ---------- */
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(39,167,69,0.4);}
  50%{box-shadow:0 0 0 8px rgba(39,167,69,0);}
}
.btn-primary{animation:none;}
.btn-primary:focus-visible{animation:pulseGlow 1.5s ease-in-out infinite;}

/* ---------- 12. Spinner (if you ever need a loading state) ---------- */
.spinner{
  width:24px;height:24px;
  border:3px solid var(--paper-dim);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Centered headings across all pages ---------- */
.page-hero .container{
  text-align:center;
}
.page-hero .crumbs,
.page-hero .eyebrow{
  justify-content:center;
}
.page-hero h1,
.page-hero p{
  margin-left:auto;
  margin-right:auto;
}

.section-head{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.section-head .eyebrow{
  justify-content:center;
}
.section-head .lede{
  margin-left:auto;
  margin-right:auto;
}

.hero-inner{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.hero-inner .eyebrow,
.hero-inner .hero-tag{
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
  width:fit-content;
}
.hero-lede{
  margin-left:auto;
  margin-right:auto;
}
.hero-actions{
  justify-content:center;
}

/* ---------- Home hero video: dark tint + subtle grid (AK Packers style) ---------- */
.hero .media-backdrop::before{
  content:'';
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,15,20,0.72) 0%, rgba(10,15,20,0.5) 45%, rgba(10,15,20,0.85) 100%) !important;
  z-index:1;
}
.hero .media-backdrop::after{
  content:'';
  position:absolute;inset:0;
  background-image:none;
  z-index:1;
  pointer-events:none;
}
.hero .media-backdrop video{
  filter:grayscale(0.1) contrast(1.05) brightness(0.75) !important;
}

/* ---------- Home hero: premium "wow" styling ---------- */
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.25);
  color:#ffffff !important;
}
.hero-tag::before{
  content:'';
  width:8px;height:8px;border-radius:50%;
  background:#4ADE80;
  box-shadow:0 0 8px #4ADE80;
  flex:none;
}

.hero-inner h1{
  color:#ffffff !important;
  text-shadow:0 2px 24px rgba(0,0,0,0.35);
}
.hero-inner h1 em{
  font-style:normal;
  background:linear-gradient(90deg, #7CE68A, #37B368);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#37B368;
}

.hero-lede{
  color:rgba(255,255,255,0.88) !important;
  text-shadow:0 1px 12px rgba(0,0,0,0.3);
}

.hero-actions .btn-primary{
  background:linear-gradient(135deg, #4ADE80, #16A34A);
  color:#0A2818;
  border:none;
  box-shadow:0 8px 24px rgba(22,163,74,0.4);
}
.hero-actions .btn-primary:hover{
  background:linear-gradient(135deg, #5EEB94, #1DB852);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(22,163,74,0.5);
}
.hero-actions .btn-outline{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,0.4);
  color:#ffffff !important;
}
.hero-actions .btn-outline:hover{
  background:rgba(255,255,255,0.16);
  border-color:#ffffff;
}

.plate-strip{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  overflow:hidden;
}
.plate-cell{border-left-color:rgba(255,255,255,0.18) !important;}
.plate-num{
  color:#ffffff !important;
  font-size:2rem;
}
.plate-label{color:rgba(255,255,255,0.75) !important;}

/* ---------- Hero subtitle: force visible, add readability backdrop ---------- */
.hero-inner p.hero-lede{
  color:#ffffff !important;
  background:rgba(6,20,12,0.35);
  backdrop-filter:blur(4px);
  padding:12px 18px;
  border-radius:12px;
  display:inline-block;
}

/* ---------- Full-width green stats band ---------- */
.stats-band{
  background:linear-gradient(135deg, #16A34A, #15803D) !important;
  padding:56px 0;
}
.stats-band-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.stats-band-item b{
  display:block;
  font-family:var(--display);
  font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:800;
  color:#ffffff;
  line-height:1;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.35);
}
.stats-band-item span{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
}
@media (max-width:760px){
  .stats-band-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Center the "About the Company" text block ---------- */
.container.split{
  grid-template-columns:1fr;
  max-width:left;
  text-align:left;
}
.container.split .eyebrow{
  justify-content:left;
}
.container.split .btn{
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   ADDED: Restyle .process-list into horizontal numbered-circle
   timeline with connecting line (matches reference screenshot)
   ============================================================ */
.process-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:32px 16px;
  border-top:none;
  position:relative;
  padding-top:20px;
}

/* connecting horizontal line behind the circles */
.process-list::before{
  content:'';
  position:absolute;
  top:50px;
  left:5%;
  right:5%;
  height:1px;
  background:rgba(24,61,43,0.15);
  z-index:0;
}

.process-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:0;
  border-bottom:none;
  flex:1 1 160px;
  position:relative;
  z-index:1;
}

/* number -> circular badge */
.process-num{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font-size:1.1rem;
  font-weight:700;
  box-shadow:0 6px 16px rgba(24,61,43,0.18);
  transition:box-shadow .3s ease, transform .3s ease;
}
.process-item:hover .process-num{
  transform:scale(1.08);
  box-shadow:0 0 0 8px rgba(130,185,154,0.25), 0 6px 16px rgba(24,61,43,0.2);
}

.process-item h4{margin:0;font-size:1rem;}
.process-item p{font-size:0.88rem;color:var(--graphite);margin:0;max-width:200px;}

@media (max-width:760px){
  .process-list{flex-direction:column;align-items:stretch;}
  .process-list::before{display:none;}
  .process-item{flex-direction:row;text-align:left;}
}

/* ============================================================
   REVERT: back to original vertical process-list design
   (cancels out the earlier horizontal-circle timeline style)
   ============================================================ */
.process-list{
  display:block;
  border-top:1px solid var(--line-light);
  padding-top:0;
}
.process-list::before{
  display:none;
}
.process-item{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--line-light);
  text-align:left;
  flex:none;
  align-items:start;
}
.process-num{
  width:auto;
  height:auto;
  display:block;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--gold-dark);
  font-family:var(--mono);
  font-size:1.6rem;
  font-weight:400;
}
.process-item:hover .process-num{
  transform:none;
  box-shadow:none;
}
.process-item h4{
  margin-bottom:6px;
  font-size:1.05rem;
}
.process-item p{
  max-width:none;
  font-size:0.92rem;
}

@media (max-width:760px){
  .process-list{flex-direction:column;}
}
.process-item h4,
.process-item p{
  grid-column:2;
}
/* ============================================================
   ADDED: circle-style ONLY for "Your Order in 5 Easy Steps"
   (scoped with .process-list--circles, other section untouched)
   ============================================================ */
.process-list--circles{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:32px 16px;
  border-top:none;
  position:relative;
  padding-top:20px;
}
.process-list--circles::before{
  content:'';
  position:absolute;
  top:50px;
  left:5%;
  right:5%;
  height:1px;
  background:rgba(24,61,43,0.15);
  z-index:0;
}
.process-list--circles .process-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:0;
  border-bottom:none;
  flex:1 1 160px;
  position:relative;
  z-index:1;
}
.process-list--circles .process-num{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font-size:1.1rem;
  font-weight:700;
  box-shadow:0 6px 16px rgba(24,61,43,0.18);
  transition:box-shadow .3s ease, transform .3s ease;
}
.process-list--circles .process-item:hover .process-num{
  transform:scale(1.08);
  box-shadow:0 0 0 8px rgba(130,185,154,0.25), 0 6px 16px rgba(24,61,43,0.2);
}
.process-list--circles .process-item h4{margin:0;font-size:1rem;}
.process-list--circles .process-item p{font-size:0.88rem;color:var(--graphite);margin:0;max-width:200px;}

@media (max-width:760px){
  .process-list--circles{flex-direction:column;align-items:stretch;}
  .process-list--circles::before{display:none;}
  .process-list--circles .process-item{flex-direction:row;text-align:left;}
}
/* ============================================================
   FIX: prevent "Pan-India" (and similar stat numbers) from
   wrapping to two lines in the stat strip
   ============================================================ */
.plate-num{
  white-space:nowrap;
  font-size:clamp(1.3rem, 3vw, 1.7rem);  /* shrinks slightly on narrow columns */
}
/* ============================================================
   STRONGER FIX: force single line, shrink font more aggressively
   ============================================================ */
.plate-num{
  white-space:nowrap;
  overflow:visible;
  font-size:1.35rem;
  letter-spacing:-0.01em;
}
@media (max-width:960px){
  .plate-num{font-size:1.15rem;}
}
.plate-cell{
  padding-left:14px;
  padding-right:14px;
}
/* ============================================================
   FORCE FIX with !important — guarantees this wins over
   any other conflicting rule in the file
   ============================================================ */
.plate-strip .plate-cell .plate-num{
  white-space:nowrap !important;
  font-size:1.3rem !important;
  display:block !important;
}
/* ============================================================
   FIX: prevent "Pan-India" from wrapping in BOTH stat sections
   (.plate-strip AND .stats-band — two separate class sets)
   ============================================================ */
.plate-strip .plate-cell .plate-num,
.stats-band-item b{
  white-space:nowrap !important;
  font-size:1.3rem !important;
  display:inline-block !important;
}

@media (max-width:960px){
  .plate-strip .plate-cell .plate-num,
  .stats-band-item b{
    font-size:1.1rem !important;
  }
}
/* ============================================================
   Make stat numbers bigger (1966 / 23+ / 9 / Pan-India)
   in both stat sections
   ============================================================ */
.plate-strip .plate-cell .plate-num,
.stats-band-item b{
  font-size:2.2rem !important;
  font-weight:800 !important;
}

@media (max-width:960px){
  .plate-strip .plate-cell .plate-num,
  .stats-band-item b{
    font-size:1.7rem !important;
  }
}

@media (max-width:600px){
  .plate-strip .plate-cell .plate-num,
  .stats-band-item b{
    font-size:1.5rem !important;
  }
}
.hero .hero-inner .hero-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  width:100% !important;
  text-align:right !important;
}
main#main .hero .hero-inner .hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  width:100% !important;
}
/* ============================================================
   Hero text stays left, buttons row moves to the right
   ============================================================ */
.hero-actions{
  display:flex !important;
  justify-content:flex-end !important;
  width:100% !important;
}

@media (max-width:760px){
  .hero-actions{
    justify-content:flex-start !important;
  }
}
.hero-inner{
  max-width:none !important;
  width:100% !important;
}
/* ============================================================
   FINAL: text stays left (own width), only buttons go full-width right
   ============================================================ */
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* text elements stay left */
  max-width:none !important;
  width:100%;
}

.hero-tag,
.hero h1,
.hero-lede{
  max-width:820px;          /* text keeps its original narrow width */
  text-align:left;
}

.hero-actions{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
}
/* ============================================================
   Fix: hero-lede paragraph should also sit at left, not right
   ============================================================ */
.hero-lede{
  align-self:flex-start !important;
  margin-left:0 !important;
  margin-right:auto !important;
}
/* ============================================================
   Compact stat card — clean 2x2 grid, rounded, right-aligned
   ============================================================ */
.hero-inner{
  position:relative;
}
.plate-strip{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(140px, 1fr)) !important;
  width:auto !important;
  max-width:420px;
  margin-left:auto !important;
  margin-right:0 !important;
  margin-top:24px;
  border:1px solid var(--line-dark);
  border-radius:16px !important;
  overflow:hidden;
  background:rgba(15,17,18,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.plate-cell{
  padding:16px 20px !important;
  border-left:1px solid var(--line-dark);
  border-top:none;
}
.plate-cell:nth-child(odd){border-left:none;}
.plate-cell:nth-child(n+3){border-top:1px solid var(--line-dark);}
.plate-num{
  font-size:1.3rem !important;
  white-space:nowrap;
}
.plate-label{
  font-size:0.6rem !important;
  white-space:normal;
}

@media (max-width:760px){
  .plate-strip{
    max-width:100%;
    margin-left:0 !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
}
/* ============================================================
   All 4 stats in a single row (like the reference image)
   ============================================================ */
.plate-strip{
  grid-template-columns:repeat(4, auto) !important;
  max-width:none !important;
  width:auto !important;
}
.plate-cell{
  border-top:none !important;
}
.plate-cell:nth-child(n+3){
  border-top:none !important;
}
.plate-cell:not(:first-child){
  border-left:1px solid var(--line-dark) !important;
}

@media (max-width:960px){
  .plate-strip{
    grid-template-columns:repeat(2, minmax(140px,1fr)) !important;
  }
  .plate-cell:nth-child(n+3){
    border-top:1px solid var(--line-dark) !important;
  }
}
/* ============================================================
   1) hero-tag pill aligns left
   2) reduce bottom spacing so buttons + stats sit higher
   ============================================================ */
.hero-tag{
  align-self:flex-start !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

.hero{
  padding-bottom:50px !important;   /* was 80px — less empty space below */
}

.hero-actions{
  margin-bottom:24px !important;    /* was 56px — pulls stats row closer */
}

.plate-strip{
  margin-top:12px !important;       /* was 24px — less gap above stats */
}
/* ============================================================
   Stack number and label vertically inside each stat cell
   ============================================================ */
.plate-cell{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
}
.plate-num{
  display:block !important;
}
.plate-label{
  display:block !important;
  white-space:normal !important;
}
/* ============================================================
   Reposition "LIVE FROM..." tag: below the stat card, right-aligned
   (uses flexbox order since it's a sibling of hero-inner)
   ============================================================ */
.hero{
  flex-direction:column !important;
}
.hero-inner{
  order:1 !important;
}
.hero-reel-tag{
  order:2 !important;
  position:static !important;
  align-self:flex-end !important;
  margin-top:16px !important;
  margin-right:24px !important;
}
/* ---------- Pull hero buttons + stats upward (stronger) ---------- */
.hero-lede{
  margin-bottom:0.4em !important;
}
.hero-actions{
  margin-top:-140px !important;
  margin-bottom:56px !important;
}
.hero-tag{
  margin-bottom:10px !important;
}
.hero{
  padding-bottom:40px !important;
}
/* ---------- About the Company: text left, button right-center ---------- */
.container.split{
  padding-left:-0px;
}
.container.split > div:first-child{
  padding-left:0;
}
.container.split .btn{
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:fit-content;
}
/* ---------- Animated route graphic (About the Company) ---------- */
.container.split{
  grid-template-columns:1fr 1fr !important;
  text-align:left !important;
  max-width:var(--max) !important;
}
.route-graphic{
  position:relative;
  width:400px;
  max-width:100%;
  height:300px;
  margin:0 auto;
}
.route-graphic-track{width:100%;height:100%;}
.route-graphic-marker{
  position:absolute;
  top:0;left:0;
  width:34px;height:34px;
  margin:-17px 0 0 -17px;
  background:linear-gradient(135deg,#F31C1C,#C81414);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(22,163,74,0.4);
  offset-path:path('M40,240 C120,60 280,260 360,60');
  offset-rotate:0deg;
  animation:routeMove 5s ease-in-out infinite alternate;
}
@keyframes routeMove{
  0%{offset-distance:0%;}
  100%{offset-distance:100%;}
}
.route-graphic-label{
  position:absolute;
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--graphite);
  line-height:1.4;
}
.route-graphic-label b{
  display:block;
  font-family:var(--display);
  font-size:1.2rem;
  color:var(--ink);
}
.route-graphic-label-start{left:0;bottom:8px;}
.route-graphic-label-end{right:0;top:0;text-align:right;}
@media (max-width:860px){
  .route-graphic{display:none;}
}
/* ---------- Move "Read Our Story" near the route graphic + make it attractive ---------- */
.container.split{
  position:relative;
}
.container.split > div:first-child .btn-outline-dark{
  position:absolute;
  right:20px;
  top:260px;
  background:linear-gradient(135deg, #4ADE80, #16A34A);
  color:#ffffff;
  border:none;
  border-radius:999px;
  padding:16px 30px;
  font-weight:600;
  box-shadow:0 10px 26px rgba(22,163,74,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.container.split > div:first-child .btn-outline-dark:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(22,163,74,0.45);
  background:linear-gradient(135deg, #5EEB94, #1DB852);
  color:#ffffff;
}
@media (max-width:860px){
  .container.split > div:first-child .btn-outline-dark{
    position:static;
    margin-top:20px;
  }
}
/* ============================================================
   ONLY "Eight founding principles" cards restyled — AK Packers
   reference look (icon badge, left-aligned, soft shadow)
   ============================================================ */
.founding-principles .plate-card{
  background:#FFFFFF;
  border:none;
  border-radius:16px;
  padding:28px 24px;
  text-align:left;
  box-shadow:0 4px 16px rgba(15,56,32,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.founding-principles .plate-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(15,56,32,0.14);
}
.founding-principles .plate-card::before{content:none;}

/* header row -> left aligned, no dashed border */
.founding-principles .plate-card-head{
  flex-direction:row;
  align-items:center;
  border-bottom:none;
  padding:0 0 14px;
}


/* ============================================================
   FINAL FIX: Hover-reveal card ONLY on the Principles section
   ============================================================ */
#principles .plate-card,
#principles .plate-card.on-dark{
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
}
#principles .plate-card:hover{
  background:#FFFFFF !important;
  border-color:var(--line-light) !important;
  box-shadow:0 16px 40px rgba(24,61,43,0.14) !important;
  transform:translateY(-4px) !important;
}
/* ============================================================
   Enhanced timeline — ONLY for "Your Order in 5 Easy Steps"
   ============================================================ */
#order-steps .process-list{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:40px 16px;
  padding-top:10px;
}

#order-steps .process-list::before{
  content:'';
  position:absolute;
  top:36px;
  left:8%;
  right:8%;
  height:2px;
  background-image:linear-gradient(90deg, var(--gold) 0%, var(--gold) 50%, transparent 50%);
  background-size:16px 2px;
  background-repeat:repeat-x;
  z-index:0;
  opacity:0.5;
}

#order-steps .process-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  flex:1 1 160px;
  position:relative;
  z-index:1;
  transition:transform .3s ease;
  border-bottom:none;
  padding:0;
}
#order-steps .process-item:hover{transform:translateY(-6px);}

#order-steps .process-num{
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg, var(--gold) 0%, var(--gold-dark) 100%);
  color:#fff;
  font-family:var(--mono);
  font-size:1.15rem;
  font-weight:700;
  box-shadow:0 10px 24px rgba(46,159,85,0.3), inset 0 2px 4px rgba(255,255,255,0.25);
  border:3px solid var(--paper);
  transition:transform .3s ease, box-shadow .3s ease;
}
#order-steps .process-item:hover .process-num{
  transform:scale(1.1);
  box-shadow:0 14px 32px rgba(46,159,85,0.45), inset 0 2px 4px rgba(255,255,255,0.3);
}

#order-steps .process-item h4{
  margin:0;
  font-size:1.05rem;
  color:var(--ink);
  transition:color .25s ease;
}
#order-steps .process-item:hover h4{color:var(--gold-dark);}

#order-steps .process-item p{
  font-size:0.9rem;
  color:var(--graphite);
  margin:0;
  max-width:210px;
  line-height:1.55;
}

@media (max-width:900px){
  #order-steps .process-list::before{display:none;}
}
@media (max-width:640px){
  #order-steps .process-list{flex-direction:column;align-items:center;}
}
/* ============================================================
   Connecting line between step circles — scoped to Order Steps
   ============================================================ */
#order-steps .process-list{
  position:relative !important;
  overflow:visible !important;
}
#order-steps .process-list::before{
  content:'' !important;
  position:absolute !important;
  top:36px !important;
  left:8% !important;
  right:8% !important;
  height:2px !important;
  background:var(--gold) !important;
  z-index:0 !important;
  opacity:0.6 !important;
  display:block !important;
}
#order-steps .process-item{
  position:relative !important;
  z-index:1 !important;
}
/* ============================================================
   "A working sample" section — 2x2 grid + icon badges
   ============================================================ */
#machinery-sample .grid-2{
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:700px){
  #machinery-sample .grid-2{grid-template-columns:1fr;}
}
.sample-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(46,159,85,0.12);
  color:var(--gold-dark);
  margin-bottom:16px;
  margin-left:22px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.plate-card:hover .sample-icon{
  background:#F31C1C !important;
  color:#ffffff !important;
  transform:scale(1.08) rotate(-4deg);
}
/* ============================================================
   "Our Working Process" — 2 columns × 4 rows grid, ghost numbers
   ============================================================ */
#onboarding-process .process-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:none;
}

#onboarding-process .process-item{
  display:grid;
  grid-template-columns:90px 1fr;
  align-items:center;
  gap:20px;
  padding:28px 24px;
  border-bottom:1px solid var(--line-light);
  position:relative;
  overflow:hidden;
  transition:padding-left .3s ease, background .3s ease;
}

/* borders: right border on left column items, remove on last row */
#onboarding-process .process-item:nth-child(odd){
  border-right:1px solid var(--line-light);
}
#onboarding-process .process-item:nth-last-child(-n+2){
  border-bottom:none;
}

#onboarding-process .process-item:hover{
  padding-left:32px;
  background:var(--paper-dim);
}

#onboarding-process .process-num{
  font-family:var(--display);
  font-size:3.2rem;
  font-weight:700;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--line-light);
  transition:color .3s ease, -webkit-text-stroke .3s ease, transform .3s ease;
}
#onboarding-process .process-item:hover .process-num{
  color:var(--gold);
  -webkit-text-stroke:1.5px var(--gold);
  transform:scale(1.05);
}

#onboarding-process .process-item h4{
  margin-bottom:4px;
  font-size:1.05rem;
}
#onboarding-process .process-item:hover h4{
  color:var(--gold-dark);
}
#onboarding-process .process-item p{
  margin:0;
  font-size:0.9rem;
}

/* left accent bar on hover */
#onboarding-process .process-item::before{
  content:'';
  position:absolute;
  left:0;top:0;
  width:3px;height:0;
  background:var(--gold);
  transition:height .3s ease;
}
#onboarding-process .process-item:hover::before{
  height:100%;
}

@media (max-width:760px){
  #onboarding-process .process-list{grid-template-columns:1fr;}
  #onboarding-process .process-item:nth-child(odd){border-right:none;}
  #onboarding-process .process-item:nth-last-child(-n+2){border-bottom:1px solid var(--line-light);}
  #onboarding-process .process-item:last-child{border-bottom:none;}
}
/* ============================================================
   Extra polish for Principle cards (hover-reveal) — safe version
   ============================================================ */
#principles .plate-card{
  transition:background .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), border-color .35s ease;
  cursor:pointer;
}
#principles .plate-card:hover{
  transform:translateY(-6px) scale(1.015) !important;
}
#principles .plate-card .plate-model{
  transition:color .3s ease;
}
#principles .plate-card:hover .plate-model{
  color:var(--gold) !important;
}
#principles .plate-card h3{
  transition:color .3s ease;
}
#principles .plate-card:hover h3{
  color:var(--gold-dark);
}
/* ============================================================
   Vision / Mission — no cards, editorial typography style
   ============================================================ */
#vision-mission .grid-2{
  gap:56px;
  align-items:start;
}
#vision-mission .vm-block{
  padding-left:24px;
  border-left:3px solid var(--gold);
}
#vision-mission .vm-mission{
  border-left-color:var(--rust);
}
#vision-mission h3{
  font-size:1.4rem;
  margin-bottom:18px;
}

#vision-mission .vm-statement{
  font-family:var(--display);
  font-size:1.5rem;
  line-height:1.4;
  color:var(--ink);
  text-transform:none;
  font-weight:500;
}

#vision-mission .vm-checklist{
  padding:0;
  list-style:none;
  margin:0;
}
#vision-mission .vm-checklist li{
  position:relative;
  padding-left:30px;
  margin-bottom:16px;
  color:var(--graphite);
  line-height:1.6;
}
#vision-mission .vm-checklist li::before{
  content:'';
  position:absolute;
  left:0;top:4px;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--gold);
  opacity:0.15;
}
#vision-mission .vm-checklist li::after{
  content:'\2713';
  position:absolute;
  left:3px;top:1px;
  color:var(--gold-dark);
  font-size:0.8rem;
  font-weight:700;
}

@media (max-width:700px){
  #vision-mission .grid-2{grid-template-columns:1fr;gap:36px;}
}
/* ============================================================
   Footer redesign — AK Packers style
   ============================================================ */
.footer-brand{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.footer-brand .brand-plate{
  background:rgba(46,159,85,0.14);
  color:var(--gold-soft, var(--gold));
  border:none;
}
.footer-brand-name{
  font-family:var(--display);
  font-size:0.85rem;
  text-transform:uppercase;
  color:var(--paper);
  letter-spacing:0.01em;
}
.footer-grid h5{
  font-family:var(--body);
  text-transform:none;
  font-size:1rem;
  font-weight:700;
  letter-spacing:normal;
  color:var(--paper);
}
.footer-grid ul li a{
  font-family:var(--body);
  font-size:0.92rem;
  color:var(--paper-dim);
}
.footer-social{
  display:flex;gap:12px;margin-top:20px;
}
.footer-social a{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:var(--paper);
  transition:background .25s ease, transform .25s ease;
}
.footer-social a:hover{
  background:var(--gold);
  color:#fff;
  transform:translateY(-3px);
}
.footer-bottom{
  border-top:1px solid var(--line-dark);
  padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  font-family:var(--body);
  font-size:0.88rem;
  color:var(--paper-dim);
  letter-spacing:normal;
}
.footer-bottom strong{color:var(--gold-soft, var(--gold));font-weight:600;}
.footer-bottom-links{display:flex;gap:24px;}
.footer-bottom-links a{color:var(--paper-dim);transition:color .2s ease;}
.footer-bottom-links a:hover{color:var(--gold-soft, var(--gold));}


/* ============================================================
   Elegant heading font: bold sans-serif + italic serif accent
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,500;1,600&display=swap');

h1, h2, h3, h4{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight:800 !important;
}

h1 em, h2 em, h3 em, h4 em{
  font-family:'Playfair Display', Georgia, serif !important;
  font-style:italic !important;
  font-weight:500 !important;
}
/* ============================================================
   ABSOLUTE FINAL OVERRIDE — must be the very last CSS in file
   ============================================================ */
* h1, * h2, * h3, * h4,
h1, h2, h3, h4{
  text-transform:none !important;
}
* h1 em, * h2 em, * h3 em, * h4 em,
h1 em, h2 em, h3 em, h4 em{
  font-style:italic !important;
  text-transform:none !important;
}
/* ============================================================
   Only the <em> part of headings goes lowercase (with first
   letter capital) — everything else stays as typed (uppercase)
   ============================================================ */
h1 em, h2 em, h3 em, h4 em{
  text-transform:lowercase !important;
}
h1 em::first-letter,
h2 em::first-letter,
h3 em::first-letter,
h4 em::first-letter{
  text-transform:uppercase !important;
}

/* ============================================================
   Match reference: uppercase and lowercase (em) parts same size
   ============================================================ */
h1 em, h2 em, h3 em, h4 em{
  font-size:1em !important;
}

/* if the overall heading needs to be bigger to match reference scale */
.hero h1,
.section-head h2{
  font-size:clamp(2.2rem, 4.5vw, 3.4rem) !important;
  line-height:1.1 !important;
}
/* ============================================================
   1) Hero section fonts bigger — ONLY hero, nothing else
   ============================================================ */
.hero h1{
  font-size:clamp(3rem, 6vw, 5rem) !important;
  line-height:1.1 !important;
}
.hero-lede{
  font-size:1.25rem !important;
  line-height:1.7 !important;
}
.hero-tag{
  font-size:0.85rem !important;
}
.plate-num{
  font-size:2rem !important;
}
.plate-label{
  font-size:0.75rem !important;
}
.hero .btn{
  font-size:0.95rem !important;
  padding:16px 28px !important;
}

/* ============================================================
   Make "Reliable Machinery, Cleaner Grains, Better Productivity"
   visible and bigger — correct class is .hero-subhead
   ============================================================ */
.hero-subhead{
  position:relative !important;
  z-index:10 !important;
  display:block !important;
  color:var(--gold) !important;
  font-size:1.3rem !important;
  font-weight:600 !important;
  opacity:1 !important;
  margin:8px 0 16px !important;
  background:none !important;
}

/* ============================================================
   Hero buttons — bold, eye-catching, pulsing glow on load
   ============================================================ */
.hero .btn{
  border-radius:50px !important;
  padding:13px 24px !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  letter-spacing:0.06em !important;
  position:relative !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}

.hero .btn:hover{
  transform:translateY(-5px) scale(1.05) !important;
}

/* PRIMARY BUTTON — pulsing glow that draws the eye immediately */
.hero .btn-primary{
  box-shadow:0 0 0 0 rgba(39,167,69,0.6) !important;
  animation:heroPulse 2s infinite !important;
}
@keyframes heroPulse{
  0%   { box-shadow:0 0 0 0 rgba(39,167,69,0.55); }
  70%  { box-shadow:0 0 0 22px rgba(39,167,69,0); }
  100% { box-shadow:0 0 0 0 rgba(39,167,69,0); }
}
.hero .btn-primary:hover{
  animation:none !important;
  box-shadow:0 14px 34px rgba(39,167,69,0.55) !important;
}

/* outline buttons — clearer border + hover fill */
.hero .btn-outline{
  border-width:2px !important;
  border-color:rgba(255,255,255,0.6) !important;
  background:rgba(255,255,255,0.05) !important;
  backdrop-filter:blur(4px) !important;
}
.hero .btn-outline:hover{
  background:rgba(255,255,255,0.18) !important;
  border-color:#ffffff !important;
  box-shadow:0 10px 28px rgba(0,0,0,0.35) !important;
}

@media (prefers-reduced-motion:reduce){
  .hero .btn-primary{animation:none !important;}
}
/* ============================================================
   Hero buttons — italic, stylish
   ============================================================ */
.hero .btn,
.hero a.btn{
  font-style:italic !important;
  font-family:'Georgia', 'Times New Roman', serif !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:0.02em !important;
}
/* ============================================================
   Adjust "About the Company" timeline graphic position + button
   (best-guess selectors — may need adjustment based on actual HTML)
   ============================================================ */
.about-timeline,
.company-timeline,
[class*="timeline"]{
  align-self:center !important;
  margin-top:0 !important;
  transform:translateY(20px);
}

.about-timeline .btn,
.company-timeline .btn,
[class*="timeline"] .btn{
  margin-left:auto !important;
  margin-right:0 !important;
  display:block !important;
}
/* ============================================================
   Center the route-graphic vertically, move button right
   ============================================================ */
.container.split{
  align-items:center !important;
}

.route-graphic{
  margin-top:0 !important;
  align-self:center !important;
}

.container.split > div:first-child a.btn.btn-outline-dark{
  margin-left:auto !important;
  display:table !important;
}
/* ============================================================
   Bigger route-graphic + move "Read Our Story" button beside it
   ============================================================ */
.route-graphic{
  transform:scale(1.3) !important;
  transform-origin:left center !important;
  margin:20px 0 20px 40px !important;
}

/* ============================================================
   Move "Read Our Story" button further right
   ============================================================ */
.route-graphic{
  transform:scale(1.3) !important;
  transform-origin:left center !important;
  margin:20px 0 20px 40px !important;
}

.container.split{
  position:relative !important;
}

.container.split > div:first-child a.btn.btn-outline-dark{
  position: static !important;
  margin: 20px 0 0 0 !important;
}
/* ============================================================
   SIMPLE clean version — no curve, guaranteed to work
   ============================================================ */
.machinery-curved-block{
  padding:50px 0;
  background:none;
}

.machinery-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.machinery-cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.machinery-slideshow{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(24,61,43,0.15);
}
.machinery-slideshow img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:slideFade 12s infinite;
}
.machinery-slideshow img:nth-child(1){animation-delay:0s;}
.machinery-slideshow img:nth-child(2){animation-delay:3s;}
.machinery-slideshow img:nth-child(3){animation-delay:6s;}
.machinery-slideshow img:nth-child(4){animation-delay:9s;}
@keyframes slideFade{
  0%{opacity:0;} 4%{opacity:1;} 21%{opacity:1;} 25%{opacity:0;} 100%{opacity:0;}
}

@media (max-width:900px){
  .machinery-split{grid-template-columns:1fr;}
  .machinery-cards-grid{grid-template-columns:1fr 1fr;}
}
/* ============================================================
   Compact, square-ish cards + left-aligned grid
   ============================================================ */
.machinery-split{
  justify-content:start;
}

.machinery-cards-grid{
  gap:16px;
}

.machinery-cards-grid .plate-card{
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:20px;
  overflow:hidden;
}

.machinery-cards-grid .sample-icon{
  width:40px;
  height:40px;
  margin-bottom:8px;
}

.machinery-cards-grid .plate-card-head{
  padding:0;
  border:none;
  margin-bottom:6px;
}

.machinery-cards-grid .plate-card h3{
  padding:0;
  margin:0 0 8px;
  font-size:1rem;
}

.machinery-cards-grid .plate-card p{
  padding:0;
  margin:0;
  font-size:0.78rem;
  line-height:1.4;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
}

@media (max-width:900px){
  .machinery-cards-grid .plate-card{aspect-ratio:auto;}
  .machinery-cards-grid .plate-card p{-webkit-line-clamp:unset;}
}
/* ============================================================
   Bigger square cards
   ============================================================ */
.machinery-cards-grid{
  gap:20px;
}

.machinery-cards-grid .plate-card{
  aspect-ratio:1/1;
  min-height:280px;
  padding:26px;
}

.machinery-cards-grid .sample-icon{
  width:48px;
  height:48px;
  margin-bottom:14px;
}

.machinery-cards-grid .plate-card h3{
  font-size:1.15rem;
  margin-bottom:10px;
}

.machinery-cards-grid .plate-card p{
  font-size:0.85rem;
  line-height:1.5;
  -webkit-line-clamp:5;
}

@media (max-width:900px){
  .machinery-cards-grid .plate-card{min-height:auto;aspect-ratio:auto;}
}
/* ============================================================
   Wider container for the machinery section only
   ============================================================ */
.machinery-curved-block .container{
  max-width:1400px;
}

.machinery-split{
  gap:60px;
}

.machinery-cards-grid{
  gap:24px;
}

.machinery-cards-grid .plate-card{
  aspect-ratio:auto;
  min-height:300px;
  padding:28px;
}

.machinery-cards-grid .plate-card p{
  -webkit-line-clamp:6;
}

/* ============================================================
   FIX: Footer logo background — white instead of green tint
   ============================================================ */
.footer-brand .brand-plate,
.footer-brand img.brand-plate{
  background:#FFFFFF !important;
  padding:6px 10px !important;
  border-radius:6px;
}
/* ============================================================
   Chat launcher — consolidated (new design)
   ============================================================ */
#chat-launcher img { display: none !important; }
#chat-launcher {
  -webkit-tap-highlight-color: transparent !important;
  overflow: visible !important;
}
#chat-launcher::before,
#chat-launcher::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   WhatsApp floating button
   ============================================================ */
#whatsapp-float {
  position: fixed;
  bottom: 98px;
  right: 24px;
  z-index: 200;
  width: 52px;
  height: 52px;
  background: #25D366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
#whatsapp-float:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 28px rgba(37,211,102,0.55);
}
#whatsapp-float:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  #whatsapp-float { transition: none; }
}
/* ---------- Page-hero: attractive background without images (all inner pages) ---------- */
.page-hero{
  position:relative;
  background:linear-gradient(135deg, #eef8f2 0%, #dcefe4 100%);
  overflow:hidden;
}
.page-hero::before{
  content:'';
  position:absolute;
  top:-25%;
  right:-10%;
  width:480px;
  height:480px;
  background:radial-gradient(circle, rgba(130,185,154,0.35) 0%, transparent 70%);
  border-radius:50%;
  z-index:0;
}
.page-hero::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-8%;
  width:360px;
  height:360px;
  background:radial-gradient(circle, rgba(95,157,120,0.18) 0%, transparent 70%);
  border-radius:50%;
  z-index:0;
}
.page-hero .container{
  position:relative;
  z-index:1;
}
.page-hero-dots{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background-image:radial-gradient(rgba(24,61,43,0.12) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  z-index:0;
  mask-image:linear-gradient(180deg, black, transparent 85%);
  -webkit-mask-image:linear-gradient(180deg, black, transparent 85%);
}
/* ---------- Page-hero: attractive background without images (all inner pages) ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% -15%, rgba(130,185,154,0.38), transparent 55%),
    radial-gradient(circle at -8% 125%, rgba(95,157,120,0.20), transparent 55%),
    repeating-linear-gradient(135deg, rgba(24,61,43,0.05) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, #eef8f2 0%, #dcefe4 100%);
  border-bottom:none !important;
}
.page-hero::before{
  content:'';
  position:absolute;
  right:8%;
  bottom:-15%;
  width:min(32vw, 380px);
  height:min(32vw, 380px);
  background-image:url('assets/img/logo.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0.06;
  z-index:0;
  pointer-events:none;
}
.page-hero::after{
  content:'';
  position:absolute;
  left:6%;
  top:32%;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(130,185,154,0.25);
  animation:pulse-dot 2.4s ease-in-out infinite;
  z-index:0;
}
.page-hero .container{
  position:relative;
  z-index:1;
}
.page-hero::-moz-selection{background:var(--gold);}

/* ============================================================
   Reveal animation + Founding Principles cards ("Our Story" section)
   ============================================================ */
.reveal{
  animation: revealIn .7s ease both;
}
@keyframes revealIn{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none;}
}

.principle-grid{display:flex;flex-direction:column;gap:3px;}
.principle-card{
  display:flex;align-items:center;gap:16px;
  padding:14px 16px;
  border-left:3px solid rgba(47,107,74,0.25);
  background:rgba(47,107,74,0.04);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.principle-card:hover{
  border-left-color:#2F6B4A;
  background:rgba(47,107,74,0.12);
  transform:translateX(8px);
}
.principle-num{
  font-family:var(--mono);font-size:0.78rem;color:#2F6B4A;
  min-width:26px;flex:none;
}
.principle-card span:last-child{font-size:0.96rem;color:#2F6B4A;font-weight:600;letter-spacing:0.01em;}

/* stagger the card entrance so they cascade in one after another */
.principle-card.reveal:nth-child(1){animation-delay:.05s;}
.principle-card.reveal:nth-child(2){animation-delay:.11s;}
.principle-card.reveal:nth-child(3){animation-delay:.17s;}
.principle-card.reveal:nth-child(4){animation-delay:.23s;}
.principle-card.reveal:nth-child(5){animation-delay:.29s;}
.principle-card.reveal:nth-child(6){animation-delay:.35s;}

/* ---------- Careers apply card: modern centered look ---------- */
.apply-card{
  border-radius:20px !important;
  box-shadow:0 20px 60px rgba(24,61,43,0.10);
  padding:40px !important;
}
.apply-card-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line-light);
}
.apply-card-icon{
  flex:none;
  width:44px;height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,#4ADE80,#16A34A);
  color:#ffffff;
  display:flex;align-items:center;justify-content:center;
}
.apply-card-head h3{
  margin:0 0 4px;
  font-size:1.25rem;
  color:var(--ink);
}
.apply-card-head p{
  margin:0;
  font-size:0.9rem;
  color:var(--graphite);
}
.apply-card .field input,
.apply-card .field select,
.apply-card .field textarea{
  border-radius:10px !important;
  padding:13px 16px !important;
}
.apply-card .field label{
  font-family:var(--body) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:0.85rem !important;
}
.apply-card .field-file{
  border-radius:10px !important;
}
.apply-submit{
  border-radius:999px !important;
  background:linear-gradient(135deg,#4ADE80,#16A34A) !important;
  border:none !important;
  padding:16px !important;
  box-shadow:0 10px 26px rgba(22,163,74,0.35);
}
.apply-submit:hover{
  background:linear-gradient(135deg,#5EEB94,#1DB852) !important;
  transform:translateY(-2px);
}
/* ---------- Contact icons alignment ---------- */
.contact-icon-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.contact-icon-row svg{
  flex:none;
  color:var(--gold-dark);
}

/* ---------- Force mobile menu: dark bg, white text (final override) ---------- */
@media (max-width:960px){
  .main-nav.open{
    background:#183D2B !important;
  }
  .main-nav.open a{
    color:#ffffff !important;
    font-weight:600 !important;
  }
  .main-nav.open a[aria-current="page"]{
    color:var(--gold) !important;
  }
}
/* ============================================================
   FIX: Mobile nav must be hidden by default, only open on toggle
   ============================================================ */
@media (max-width:960px){
  .main-nav{
    display:none !important;
    background:var(--ink) !important;
  }
  .main-nav.open{
    display:flex !important;
    background:var(--ink) !important;
  }
  .main-nav.open a{
    color:#ffffff !important;
  }
}
/* ============================================================
   FIX: Prevent horizontal overflow shifting the sticky header
   ============================================================ */
html, body{
  overflow-x:hidden !important;
  max-width:100vw;
}
.hero, .hero-inner, .hero-tag, .hero-reel-tag{
  max-width:100%;
  box-sizing:border-box;
}
@media (max-width:600px){
  .hero-tag{
    white-space:normal !important;
    max-width:calc(100% - 24px);
  }
  .hero-reel-tag{
    display:none;
  }
}
/* ============================================================
   FIX: Contact page two-column layout must stack on mobile
   ============================================================ */
@media (max-width:900px){
  .container.split,
  .contact-grid,
  .grid-2{
    display:block !important;
  }
  .container.split > div,
  .contact-grid > div,
  .grid-2 > div{
    width:100% !important;
    margin-bottom:32px;
  }
  .form-card{
    width:100% !important;
    max-width:100%;
  }
}
/* ============================================================
   FINAL FIX: Mobile hero buttons — clean stack, no overlap
   ============================================================ */
@media (max-width:600px){
  html body .hero .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    position:static !important;
    width:100% !important;
    margin-top:20px !important;
  }
  html body .hero .hero-actions .btn{
    position:static !important;
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    margin:0 !important;
  }
  html body .hero .hero-lede{
    position:static !important;
    display:block !important;
    margin-bottom:24px !important;
  }
  html body .hero .container.hero-inner{
    display:flex !important;
    flex-direction:column !important;
  }

  /* keep chat widget from overlapping the last button */
  #chat-launcher{
    z-index:150 !important;
  }
}

/* ---------- Fix: force single column + stop button overlap on mobile ---------- */
@media (max-width:860px){
  .container.split{
    grid-template-columns:1fr !important;
  }
  .route-graphic{
    display:none !important;
  }
  .container.split > div:first-child .btn-outline-dark{
    position:static !important;
    margin-top:20px !important;
    display:inline-flex !important;
  }
}

/* ============================================================
   FIX: Add left/right padding on mobile where text touches edge
   ============================================================ */
@media (max-width:600px){
  .page-hero .container,
  .page-hero,
  section .container,
  .container.split,
  .container.split > div{
    padding-left:24px !important;
    padding-right:24px !important;
    box-sizing:border-box;
  }
}

/* ============================================================
   FIX: "About the Company" section on mobile — hide decorative
   route animation, fix button overlap
   ============================================================ */
@media (max-width:900px){
  .route-graphic{
    display:none !important;
  }
  .container.split{
    display:block !important;
  }
  .container.split > div{
    width:100% !important;
  }
  .container.split .btn{
    position:static !important;
    display:inline-flex !important;
    margin-top:20px !important;
  }
  .container.split p.lede{
    position:static !important;
  }
}
/* ============================================================
   FINAL FIX: Remove negative margin causing button overlap
   ============================================================ */
@media (max-width:900px){
  .container.split .btn,
  .container.split a.btn-outline-dark{
    margin:20px 0 0 0 !important;
    position:static !important;
  }
  .route-graphic{
    display:none !important;
  }
}
/* ============================================================
   FIX: Show route-graphic animation on mobile, stacked below text
   ============================================================ */
@media (max-width:900px){
  .route-graphic{
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:230px;
    margin:32px auto 0 !important;
  }
}

/* ---------- Custom cursor ring (desktop only) ---------- */

  .cursor-dot,
  .cursor-ring{
    position:fixed;
    top:0;left:0;
    pointer-events:none;
    z-index:999999;
    border-radius:50%;
    opacity:1;
    will-change:transform;
  }
  .cursor-dot{
    width:6px;height:6px;
    margin:-3px 0 0 -3px;
    background:var(--gold-dark);
  }
  .cursor-ring{
    width:32px;height:32px;
    margin:-16px 0 0 -16px;
    border:1.5px solid var(--gold-dark);
    transition:width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease;
  }
  .cursor-ring-hover{
    width:52px;height:52px;
    margin:-26px 0 0 -26px;
    border-color:var(--gold);
  }

@media (max-width:960px){
  .cursor-dot,.cursor-ring{display:none !important;}
}



/* ============================================================
   Full responsive coverage — all device sizes
   (folded phones, phones, tablets, small laptops)
   ============================================================ */

/* base safety — applies everywhere */
html, body{
  overflow-x:hidden !important;
  width:100% !important;
  max-width:100vw !important;
}
*, *::before, *::after{
  box-sizing:border-box !important;
}
img, video, svg{
  max-width:100% !important;
  height:auto;
}

/* ---- Extra small / folded phones (e.g. Galaxy Fold cover screen ~280-360px) ---- */
@media (max-width:390px){
  .container{padding-left:14px !important;padding-right:14px !important;}
  .hero h1{font-size:1.7rem !important;line-height:1.2 !important;}
  .hero-lede{font-size:0.9rem !important;}
  .hero-subhead{font-size:0.95rem !important;}
  .btn{padding:10px 18px !important;font-size:0.75rem !important;}
  .plate-strip,.machinery-split,.machinery-cards-grid,.grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr !important;
  }
  h2{font-size:1.5rem !important;}
  #whatsapp-float,#chat-launcher{
    width:46px !important;height:46px !important;
  }
}

/* ---- Standard phones (390px - 600px) ---- */
@media (min-width:391px) and (max-width:600px){
  .container{padding-left:18px !important;padding-right:18px !important;}
  .hero h1{font-size:2rem !important;}
  .btn{padding:12px 22px !important;font-size:0.82rem !important;}
  .plate-strip,.machinery-split,.machinery-cards-grid{
    grid-template-columns:1fr !important;
  }
}

/* ---- Large phones / small tablets portrait (600px - 820px) ---- */
@media (min-width:601px) and (max-width:820px){
  .container{padding-left:24px !important;}
  .hero h1{font-size:2.6rem !important;}
  .machinery-cards-grid{grid-template-columns:repeat(2,1fr) !important;}
  .machinery-split{grid-template-columns:1fr !important;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr) !important;}
}

/* ---- Tablets landscape / small laptops (820px - 1024px) ---- */
@media (min-width:821px) and (max-width:1024px){
  .hero h1{font-size:3.2rem !important;}
  .grid-4{grid-template-columns:repeat(3,1fr) !important;}
  .machinery-split{grid-template-columns:1fr 1fr !important;}
}

/* ---- Never let any flex/grid row overflow ---- */
@media (max-width:1024px){
  .hero-actions,.header-bar,.footer-grid{
    flex-wrap:wrap !important;
  }
}



/* ---------- Inner pages: force white navbar, dark readable text ---------- */
body:not(.home-page) .site-header{
  background:#DCEFE4 !important;
  border-bottom:1px solid #E4EDE8 !important;
}
body:not(.home-page) .site-header .brand-name,
body:not(.home-page) .site-header .brand-sub,
body:not(.home-page) .site-header .main-nav a,
body:not(.home-page) .site-header .header-phone,
body:not(.home-page) .site-header .nav-toggle{
  color:#183D2B !important;
}
body:not(.home-page) .site-header .main-nav a:hover,
body:not(.home-page) .site-header .main-nav a[aria-current="page"]{
  color:#5F9D78 !important;
}

/* ---------- Header logo stays transparent, footer logo untouched ---------- */
.site-header .brand-plate.brand-logo,
.site-header img.brand-plate{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* ---------- View Brochure button: green pill style ---------- */
.header-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg, #4ADE80, #16A34A) !important;
  color:#ffffff !important;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 6px 16px rgba(22,163,74,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.header-phone svg{
  color:#ffffff;
}
.header-phone:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(22,163,74,0.45);
  background:linear-gradient(135deg, #5EEB94, #1DB852) !important;
}

/* ============================================================
   Site Preloader (splash screen shown while the page loads)
   ============================================================ */
.site-preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:linear-gradient(150deg, #eafaf1 0%, #cdeed9 45%, #9fdcb8 100%);
  transition:opacity .55s ease, visibility .55s ease;
}
.site-preloader.preloader-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.preloader-ring-wrap{
  position:relative;
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:preloaderPulse 1.8s ease-in-out infinite;
}
.preloader-ring{
  position:absolute;
  inset:0;
  border:3px solid rgba(31,77,54,0.15);
  border-top-color:var(--charcoal);
  border-right-color:var(--gold);
  border-radius:50%;
  animation:preloaderSpin 1s linear infinite;
}
.preloader-ring::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  box-shadow:0 0 26px 4px rgba(31,77,54,0.25);
}
.preloader-logo{
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:50%;
  background:#ffffff;
  padding:6px;
  box-shadow:0 4px 14px rgba(31,77,54,0.25);
}
.preloader-brand{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--charcoal);
  font-size:16px;
  text-transform:uppercase;
  text-align:center;
  animation:preloaderFadeUp .8s ease both .1s;
}
.preloader-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--gold-dark);
  text-transform:uppercase;
  text-align:center;
  animation:preloaderFadeUp .8s ease both .3s;
}
@keyframes preloaderSpin{
  to{ transform:rotate(360deg); }
}
@keyframes preloaderPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
@keyframes preloaderFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .preloader-ring{ animation:none; }
  .preloader-ring-wrap{ animation:none; }
}
@media (max-width:600px){
  .header-bar{
    flex-wrap:nowrap !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .brand{
    flex-shrink:1 !important;
    min-width:0 !important;
  }
  .header-cta{
    flex-shrink:0 !important;
    margin-left:auto !important;
  }
  .main-nav{
    display:none !important;
  }
  .brand-sub{
      font-size:0.55rem !important;
      white-space: nowrap !important;
  }
  .brand-logo{
      max-width:150px !important;
      height:48px !important;
  }
}
  }
    
}
/* ============================================================
   Machinery Filter Bar
   ============================================================ */
.machinery-filter-bar {
  max-width: var(--max);
  margin: 0 auto 32px;
  padding: 0 24px;
}
.mfb-search-wrap {
  position: relative;
  margin-bottom: 16px;
}
.mfb-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #5C9272;
  pointer-events: none;
}
.mfb-search {
  width: 100%;
  padding: 13px 44px 13px 42px;
  border: 2px solid #d0e8da;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: #183D2B;
  background: #f8fdf9;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.mfb-search:focus {
  border-color: #2F6B4A;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(47,107,74,0.1);
}
.mfb-search::placeholder { color: #8fbb9f; }
.mfb-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: #e0ede7;
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  font-size: 14px;
  color: #2F6B4A;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.mfb-clear:hover { background: #c0ddc9; }
.mfb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.mfb-pill {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid #c0ddc9;
  background: #ffffff;
  color: #2F6B4A;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mfb-pill:hover {
  border-color: #2F6B4A;
  background: #eef8f2;
}
.mfb-pill.active {
  background: #1F4D36;
  color: #ffffff;
  border-color: #1F4D36;
}
.mfb-pill-count {
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.73rem;
  font-weight: 700;
}
.mfb-pill:not(.active) .mfb-pill-count {
  background: rgba(47,107,74,0.12);
  color: #2F6B4A;
}
.mfb-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #7aaa8e;
  letter-spacing: 0.04em;
  min-height: 18px;
}
.machinery-no-results {
  text-align: center;
  padding: 60px 24px;
  color: #5C9272;
}
.machinery-no-results svg { margin-bottom: 16px; opacity: 0.5; }
.machinery-no-results p { font-size: 1rem; color: #527563; margin-bottom: 24px; }
.machine-card.mfb-hidden { display: none !important; }
@media (max-width: 600px) {
  .mfb-pills { gap: 6px; }
  .mfb-pill { font-size: 0.78rem; padding: 6px 12px; }
}

/* ============================================================
   Mobile Sticky CTA Bar
   ============================================================ */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  background: #ffffff;
  border-top: 1px solid #d0e8da;
  box-shadow: 0 -4px 20px rgba(24,61,43,0.12);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  gap: 8px;
}
.mobile-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border-radius: 10px;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.mobile-cta-btn:active { transform: scale(0.96); }
.mobile-cta-call {
  background: #1F4D36;
  color: #ffffff;
}
.mobile-cta-wa {
  background: #25D366;
  color: #ffffff;
}
.mobile-cta-quote {
  background: #f0f9f4;
  color: #1F4D36;
  border: 1.5px solid #c0ddc9;
}
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
  }
  body {
    padding-bottom: 74px;
  }
  #chat-launcher {
    bottom: 86px !important;
    right: 14px !important;
    width: 54px !important;
    height: 54px !important;
  }
  #whatsapp-float {
    display: none !important;
  }
  #chat-window {
    bottom: 152px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-btn { transition: none; }
}

/* ---------- Chat launcher: original robot icon ---------- */
#chat-launcher{
  background: url('assets/img/chattbott.png') center / contain no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#chat-launcher svg{ display:none !important; }
#chat-launcher:hover{ box-shadow: none !important; }

/* Desktop size (mobile par purana chhota size hi rahega) */
@media (min-width:769px){
  #chat-launcher{ width:72px !important; height:72px !important; }
}

/* =====================================================
   AGRICULTURAL COMMODITIES
===================================================== */

.commodities-grid {
    width: 100%;
    max-width: 1400px;
    margin: 45px auto 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    /* CARDS KE BEECH KI GAP */
    gap: 14px !important;
}


/* =====================================================
   COMMODITY CARD
===================================================== */

.commodities-grid .commodity-card {
    position: relative;

    width: 100%;
    height: 390px;

    margin: 0 !important;

    overflow: hidden;

    border-radius: 12px !important;

    background: #123a26;

    cursor: pointer;
}


/* =====================================================
   FULL CARD IMAGE
===================================================== */

.commodities-grid .commodity-card img {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;
}


/* =====================================================
   DARK OVERLAY
===================================================== */

.commodities-grid .commodity-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.05) 35%,
        rgba(0, 0, 0, 0.20) 55%,
        rgba(0, 0, 0, 0.82) 100%
    );

    z-index: 1;

    pointer-events: none;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.commodities-grid .commodity-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 22px;
}


/* NUMBER / SMALL TEXT */

.commodities-grid .commodity-overlay span {
    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    margin-bottom: 8px;
}


/* COMMODITY NAME */

.commodities-grid .commodity-overlay h3 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.1;
}


/* =====================================================
   HOVER
===================================================== */

.commodities-grid .commodity-card:hover img {
    transform: scale(1.06);
}


/* =====================================================
   REMOVE OLD STAGGER EFFECT
===================================================== */

.commodities-grid .commodity-card:nth-child(1),
.commodities-grid .commodity-card:nth-child(2),
.commodities-grid .commodity-card:nth-child(3),
.commodities-grid .commodity-card:nth-child(4),
.commodities-grid .commodity-card:nth-child(5),
.commodities-grid .commodity-card:nth-child(6),
.commodities-grid .commodity-card:nth-child(7),
.commodities-grid .commodity-card:nth-child(8),
.commodities-grid .commodity-card:nth-child(9),
.commodities-grid .commodity-card:nth-child(10) {
    margin-top: 0 !important;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .commodities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px !important;
    }

    .commodities-grid .commodity-card {
        height: 380px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .commodities-grid {
        grid-template-columns: 1fr;

        gap: 14px !important;

        margin-top: 35px;
    }

    .commodities-grid .commodity-card {
        height: 330px;
    }

    .commodities-grid .commodity-overlay {
        padding: 18px;
    }

    .commodities-grid .commodity-overlay h3 {
        font-size: 24px;
    }

}

```css
/* =========================================================
   ABOUT — LEGACY / FOUNDER / NEXT GENERATION
   ========================================================= */

.about-legacy-section {
  background: #f6fbf8;
  color: #183d2b;
  overflow: hidden;
}


/* =========================================================
   FOUNDER STORY
   ========================================================= */

.founder-story {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
  align-items: center;
  padding-top: 110px;
  padding-bottom: 120px;
}

.founder-photo-wrap {
  position: relative;
}

.story-number {
  position: absolute;
  top: -32px;
  left: -28px;
  z-index: 3;

  font-family: "Oswald", sans-serif;
  font-size: 70px;
  line-height: 1;
  color: #82b99a;
  opacity: 0.65;
}

.founder-photo {
  position: relative;
  height: 540px;
  overflow: hidden;
  background: #dfeee5;
}

.founder-photo::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(246, 251, 248, 0.7);
  pointer-events: none;
}

.founder-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.founder-photo:hover img {
  transform: scale(1.035);
}

.photo-caption {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 4;

  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: 15px 20px;
  background: #1f4d36;
  color: #fff;
}

.photo-caption span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.75;
}

.photo-caption strong {
  font-family: "Oswald", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
}

.founder-content {
  max-width: 650px;
}

.founder-content h2 {
  margin: 15px 0 25px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.98;
}

.founder-content h2 em,
.generation-heading h2 em {
  font-style: normal;
  color: #5c9272;
}

.story-line {
  width: 70px;
  height: 3px;
  margin-bottom: 28px;
  background: #5c9272;
}

.founder-content p {
  max-width: 620px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.8;
  color: #4b6255;
}

.founder-stat {
  display: flex;
  align-items: baseline;
  gap: 14px;

  margin-top: 35px;
  padding-top: 22px;
  border-top: 1px solid rgba(31, 77, 54, 0.18);
}

.founder-stat strong {
  font-family: "Oswald", sans-serif;
  font-size: 42px;
  font-weight: 500;
  color: #1f4d36;
}

.founder-stat span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #5c9272;
}


/* =========================================================
   NEXT GENERATION
   ========================================================= */

.next-generation-section {
  padding: 110px 0 120px;
  background: #eaf5ee;
}

.generation-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-bottom: 60px;
}

.generation-heading h2 {
  margin: 14px 0 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.98;
}

.generation-intro {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  max-width: 260px;
}

.generation-intro span {
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  color: #5c9272;
}

.generation-intro p {
  margin: 5px 0 0;
  color: #496052;
  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   BROTHERS
   ========================================================= */

.brothers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.brother-card {
  position: relative;
}

.brother-photo {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: #d7e9dd;
}

.brother-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.brother-card:hover .brother-photo img {
  transform: scale(1.035);
}

.brother-photo::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.brother-index {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  background: #1f4d36;
  color: #fff;

  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
}

.brother-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;

  padding: 22px 4px 0;
  border-bottom: 1px solid rgba(31, 77, 54, 0.2);
  padding-bottom: 20px;
}

.brother-info span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #5c9272;
}

.brother-info h3 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #183d2b;
}


/* =========================================================
   GENERATION STORY
   ========================================================= */

.generation-story {
  display: grid;
  grid-template-columns: 0.3fr 0.7fr;
  gap: 70px;

  max-width: 1000px;
  margin: 75px auto 0;
  padding-top: 35px;

  border-top: 1px solid rgba(31, 77, 54, 0.2);
}

.generation-story-label span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #5c9272;
}

.generation-story-text p {
  margin: 0 0 17px;
  color: #496052;
  font-size: 16px;
  line-height: 1.8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .founder-story {
    grid-template-columns: 1fr;
    gap: 55px;
    padding-top: 85px;
    padding-bottom: 90px;
  }

  .founder-photo {
    height: 500px;
  }

  .founder-content {
    max-width: 100%;
  }

  .generation-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
  }

  .generation-intro {
    max-width: 500px;
  }

  .generation-story {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .founder-story {
    padding-top: 70px;
    padding-bottom: 75px;
    gap: 40px;
  }

  .story-number {
    top: -22px;
    left: -8px;
    font-size: 55px;
  }

  .founder-photo {
    height: 390px;
  }

  .founder-photo::after,
  .brother-photo::after {
    inset: 10px;
  }

  .photo-caption {
    left: 18px;
    bottom: 18px;
    padding: 12px 15px;
  }

  .photo-caption strong {
    font-size: 14px;
  }

  .founder-content h2,
  .generation-heading h2 {
    font-size: 42px;
  }

  .founder-content p,
  .generation-story-text p {
    font-size: 15px;
    line-height: 1.7;
  }

  .next-generation-section {
    padding: 70px 0 80px;
  }

  .brothers-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .brother-photo {
    height: 420px;
  }

  .brother-info {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .brother-info h3 {
    font-size: 28px;
  }

  .generation-story {
    margin-top: 55px;
  }
}
/* =========================================================
   SHRAMAJEEVI BRAND RED — FINAL
   Logo Red: #F31C1C
   ========================================================= */


/* =========================================================
   1. ITALIC / EMPHASIZED TEXT
   ========================================================= */

/* All italic text used as highlighted headings */
em {
  color: #F31C1C !important;
}


/* Fix gradient/text-fill rules that can hide the red */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #F31C1C !important;
  color: #F31C1C !important;
}


/* =========================================================
   2. HOME HERO — REQUEST A QUOTE
   ========================================================= */

.hero-actions .request-quote {
  background: #F31C1C !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #F31C1C !important;
  box-shadow: none !important;
}

.hero-actions .request-quote:hover {
  background: #D91616 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #D91616 !important;
}


/* =========================================================
   3. CTA SECTION — REQUEST A QUOTE
   Works on all pages
   ========================================================= */

.cta-banner .btn-primary,
.cta .btn-primary,
.cta-section .btn-primary,
.cta-banner a[href*="contact"],
.cta a[href*="contact"],
.cta-section a[href*="contact"] {
  background: #F31C1C !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #F31C1C !important;
  box-shadow: none !important;
}

.cta-banner .btn-primary:hover,
.cta .btn-primary:hover,
.cta-section .btn-primary:hover,
.cta-banner a[href*="contact"]:hover,
.cta a[href*="contact"]:hover,
.cta-section a[href*="contact"]:hover {
  background: #D91616 !important;
  color: #FFFFFF !important;
  border-color: #D91616 !important;
}


/* =========================================================
   4. COMMODITIES SECTION
   ========================================================= */

/* Italic / highlighted commodity heading text */
.commodities em,
.commodities-section em,
.commodity-section em,
.commodities-grid em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #F31C1C !important;
  color: #F31C1C !important;
}


/* =========================================================
   5. KEEP MACHINERY BUTTON GREEN
   ========================================================= */

/* Do NOT make Explore Our Machinery red */
.hero-actions .btn-primary:not(.request-quote) {
  background: var(--gold) !important;
  color: #0A2818 !important;
}

/* =========================================================
   COMMODITIES SECTION — PREMIUM INTERACTIVE
========================================================= */

.commodities-section {
    padding: 110px 6%;
    background: #F6FBF8;
    overflow: hidden;
}


/* =========================================================
   INTRO
========================================================= */

.commodities-intro {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 55px;
}

.commodities-heading {
    max-width: 760px;
}

.commodities-heading .section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #F31C1C;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.commodities-heading h2 {
    margin: 0;
    color: #183D2B;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -2.5px;
}

.commodities-heading h2 span {
    color: #2F6B4A;
}

.commodities-description {
    max-width: 480px;
}

.commodities-description p {
    margin: 0;
    color: #607267;
    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   GRID
========================================================= */

.commodities-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.commodity-card {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 3px;
    cursor: pointer;
    background: #183D2B;

}

.commodity-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.commodity-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            rgba(24,61,43,0.12),
            rgba(12,30,21,0.88)
        );
}


/* =========================================================
   CARD TOP
========================================================= */

.commodity-top {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
}

.commodity-top span {
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.commodity-bottom {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.commodity-bottom h3 {
    margin: 0;
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
    font-weight: 500;
}

.commodity-read-more {
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    white-space: nowrap;

    transition: color 0.3s ease,
                letter-spacing 0.3s ease;
}

.commodity-read-more span {
    margin-left: 4px;
    font-size: 14px;
}

.commodity-read-more:hover {
    color: #F31C1C;
    letter-spacing: 2px;
}


/* =========================================================
   CARD HOVER
========================================================= */

.commodity-card:hover > img {
    transform: scale(1.07);
}

.commodity-card:hover .commodity-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(47,107,74,0.15),
            rgba(12,30,21,0.92)
        );
}


/* =========================================================
   COMMODITY DETAIL POPUP
========================================================= */

.commodity-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;

    width: min(920px, 90vw);
    height: min(520px, 82vh);

    z-index: 9999;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    background: #183D2B;
    border-radius: 4px;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -47%) scale(0.96);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.4s ease;
}


/* OPEN */

.commodity-detail-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1);
}


/* =========================================================
   IMAGE
========================================================= */

.commodity-detail-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.commodity-detail-image img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.6s ease;
}

.commodity-detail-panel.is-active
.commodity-detail-image img {
    transform: scale(1.02);
}


/* =========================================================
   CONTENT
========================================================= */

.commodity-detail-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 50px 55px;
}

.commodity-detail-number {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 24px;
}

.commodity-detail-number span {
    color: #F31C1C;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.commodity-detail-number i {
    display: block;

    width: 45px;
    height: 1px;

    background: rgba(255,255,255,0.35);
}


.commodity-detail-category {
    display: block;

    margin-bottom: 10px;

    color: #82B99A;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}


.commodity-detail-content h3 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1;

    font-weight: 500;
}


.commodity-detail-content p {
    max-width: 500px;

    margin: 0;

    color: rgba(255,255,255,0.75);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   CLOSE
========================================================= */

.commodity-detail-close {
    align-self: flex-start;

    margin-top: 30px;
    padding: 0;

    border: 0;
    background: transparent;

    color: #ffffff;

    cursor: pointer;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;

    transition: color 0.3s ease;
}

.commodity-detail-close span {
    margin-left: 8px;

    color: #F31C1C;

    font-size: 18px;
    vertical-align: middle;
}

.commodity-detail-close:hover {
    color: #F31C1C;
}


/* =========================================================
   DARK BACKDROP
========================================================= */

.commodity-detail-panel::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    background: rgba(6, 25, 17, 0.55);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.35s ease;
}

.commodity-detail-panel.is-active::before {
    opacity: 1;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .commodity-detail-panel {
        width: 92vw;
        height: auto;
        max-height: 88vh;

        grid-template-columns: 1fr;

        overflow-y: auto;
    }

    .commodity-detail-image {
        height: 230px;
    }

    .commodity-detail-image img {
        height: 230px;
    }

    .commodity-detail-content {
        padding: 35px 28px 40px;
    }

    .commodity-detail-content h3 {
        font-size: 40px;
    }

    .commodity-detail-content p {
        font-size: 14px;
        line-height: 1.7;
    }

}

/* Machine card icon hover - RED */
.machine-card:hover .machine-icon,
.machine-card:hover .card-icon,
.machine-card:hover .machine-card-icon {
    background: #F31C1C !important;
    color: #ffffff !important;
    border-color: #F31C1C !important;
}


/* =========================================================
   COMMODITY CARD — RED EDGE / SHADOW
========================================================= */

.commodities-grid .commodity-card {
    box-shadow:
        0 8px 22px rgba(243, 28, 28, 0.12) !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.commodities-grid .commodity-card:hover {
    transform: translateY(-4px) !important;

    box-shadow:
        0 12px 30px rgba(243, 28, 28, 0.22),
        0 0 18px rgba(243, 28, 28, 0.10) !important;
}
/* RED CARD EDGE */

.commodities-grid .commodity-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    border: 1px solid rgba(243, 28, 28, 0.35);

    box-shadow:
        inset 0 0 18px rgba(243, 28, 28, 0.12);
}

.commodities-grid .commodity-card:hover::before {
    border-color: rgba(243, 28, 28, 0.65);

    box-shadow:
        inset 0 0 24px rgba(243, 28, 28, 0.18);
}

/* =========================================================
   OUR WORKING PROCESS — RED HOVER
========================================================= */

#onboarding-process .process-item:hover {
    background: rgba(243, 28, 28, 0.035) !important;
}

/* Hover par number ka green glow -> red */
#onboarding-process .process-item:hover .process-num {
    color: #F31C1C !important;
    -webkit-text-stroke: 1.5px #F31C1C !important;

    box-shadow:
        0 0 0 8px rgba(243, 28, 28, 0.10),
        0 6px 16px rgba(243, 28, 28, 0.18) !important;
}

/* Hover par heading green -> red */
#onboarding-process .process-item:hover h4 {
    color: #F31C1C !important;
}

/* Left hover line bhi red */
#onboarding-process .process-item:hover::before {
    background: #F31C1C !important;
}

/* =========================================================
   ABOUT PAGE - CIRCLED SMALL TEXT SIZE FIX
========================================================= */

/* THE NEXT GENERATION - Raghavendra / Suraj */
.brother-info > span {
    font-size: 15px !important;
    letter-spacing: 1.7px !important;
}

/* 1963 → TODAY */
.generation-story-label > span {
    font-size: 20px !important;
    letter-spacing: 1.7px !important;
}

/* THE BEGINNING · 1963 */
.founder-content > .eyebrow {
    font-size: 20px !important;
    letter-spacing: 1.7px !important;
}

/* YEAR OF FOUNDATION */
.generation-story-label {
    font-size: 20px !important;
}

.quality-cards .plate-card h3,
.plate-card.on-dark h3 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   FINAL MOBILE FIX — COMMODITY CARDS
========================================================= */

@media (max-width: 768px) {

    .commodities-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 35px auto 0 !important;
    }

    .commodities-grid .commodity-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 300px !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    .commodities-grid .commodity-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .commodities-grid .commodity-overlay {
        padding: 14px !important;
    }

    .commodities-grid .commodity-overlay h3 {
        font-size: 21px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }
}
/* MOBILE MENU - LIGHT GREEN */
@media (max-width: 768px) {

    .main-nav,
    .main-nav.open {
        background: #DCEFE4 !important;
    }

    .main-nav > ul > li {
        border-bottom: 1px solid rgba(24, 61, 43, 0.12) !important;
    }

    .main-nav a,
    .site-header.scrolled .main-nav a {
        color: #183D2B !important;
    }

    .main-nav a:hover {
        color: #F31C1C !important;
    }

    .has-dropdown .dropdown-menu {
        background: rgba(24, 61, 43, 0.06) !important;
    }
}

/* Featured Machinery — force card content to remain visible */
#machinery-sample .machinery-cards-grid .plate-card.on-dark {
  background: #DCEFE4 !important;
  color: #123A26 !important;
}

#machinery-sample .machinery-cards-grid .plate-card.on-dark h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #123A26 !important;
  -webkit-text-fill-color: #123A26 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  height: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  position: relative !important;
  z-index: 10 !important;
}

#machinery-sample .machinery-cards-grid .plate-card.on-dark p {
  color: #244B37 !important;
}




/* Home Page - Featured Machinery Cards White */
body.home-page #machinery-sample .machinery-cards-grid .plate-card.on-dark {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #183D2B !important;
    border: 1px solid #e3e9e5;
    box-shadow: 0 8px 24px rgba(24, 61, 43, 0.08);
}

/* Card headings */
body.home-page #machinery-sample .machinery-cards-grid .plate-card.on-dark h3 {
    color: #183D2B !important;
}

/* Card description */
body.home-page #machinery-sample .machinery-cards-grid .plate-card.on-dark p {
    color: #4b5b51 !important;
}

/* Model number and index */
body.home-page #machinery-sample .machinery-cards-grid .plate-card.on-dark .plate-model,
body.home-page #machinery-sample .machinery-cards-grid .plate-card.on-dark .plate-index {
    color: #2F6B4A !important;
}

/* Icon */
body.home-page #machinery-sample .machinery-cards-grid .plate-card.on-dark .sample-icon {
    color: #2F6B4A !important;
}