/* ============================================================*/
/*   KLOTHON WORKWEAR — Production CSS  (Figma-faithful)*/
/*   ============================================================ */
/* Fonts loaded in index.html:
   Headings  → Cocon       via https://fonts.cdnfonts.com/css/cocon
   Body/UI   → Poppins     via Google Fonts
*/

/* ---- Reset & Root ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --nav-h:72px;
  --content-w:1240px;
  --border:#E5E7EB;
  --orange:#F15A22;
  --blue:#1D3F8A;
  --green:#8DC63F;
  --dark:#1A1F2E;
  --mid:#6B7280;
  --off:#F5F6F8;
}
html{scroll-behavior:smooth;overflow-x:hidden;background:#fff}
body{font-family:'Poppins',sans-serif;background:#fff;color:#1A1F2E;overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:'Poppins',sans-serif}
ul,ol{list-style:none}

/* Footer mobile-only elements — hidden on desktop */
.footer-mob-nav{display:none}
.footer-contacts-pair{display:contents}

/* ---- Layout ---- */
.container{max-width:var(--content-w);margin:0 auto;padding:0}
.section{padding:80px 0}

#faq,
#sticky-bar{}
#trust-strip{display:none}
/* ---- Typography ---- */
.eyebrow{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8DC63F;margin-bottom:14px}
h1,h2,h3,h4{font-family:'Cocon',sans-serif;color:#1A1F2E;letter-spacing:0}
h2{font-size:clamp(2.35rem,3.05vw,3.25rem);font-weight:500;line-height:1.1;margin-bottom:16px}
h3{font-size:clamp(1.25rem,1.55vw,1.5rem);font-weight:500;line-height:1.2}
h4{font-size:1rem;font-weight:500;line-height:1.25}
.section-desc{font-size:15px;color:#6B7280;line-height:1.75;max-width:660px;margin-bottom:40px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;padding:13px 24px;border-radius:6px;border:none;transition:all .2s;white-space:nowrap;cursor:pointer}
.btn-lg{padding:15px 28px;font-size:15px}
.btn-orange{background:#F15A22;color:#fff;box-shadow:0 4px 14px rgba(241,90,34,.3)}
.btn-orange:hover{background:#D4501F;transform:translateY(-1px)}
.btn-outline-orange{background:transparent;color:#F15A22;border:1.5px solid #F15A22}
.btn-outline-orange:hover{background:#F15A22;color:#fff}
.btn-blue{background:#1D3F8A;color:#fff;box-shadow:0 4px 14px rgba(29,63,138,.25)}
.btn-blue:hover{background:#152D63;transform:translateY(-1px)}
.btn-green{background:#8DC63F;color:#fff;box-shadow:0 4px 14px rgba(141,198,63,.3)}
.btn-green:hover{background:#6A9E2C;transform:translateY(-1px)}
.btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-outline-white:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* ============================================================
   NAVIGATION
   ============================================================ */
#nav{
  position:fixed;top:0;left:0;right:0;
  width:100%;
  transform:none;
  height:72px;
  background:transparent;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  z-index:9000;
  transition:background .3s, box-shadow .3s;
}
/* On scroll: white background, same controlled container divider */
#nav.scrolled{
  background:#fff !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.nav-inner{
  max-width:var(--content-w);margin:0 auto;padding:0;
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px;
  position:relative;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.nav-inner::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:rgba(255,255,255,.32);
  pointer-events:none;
}
#nav.scrolled .nav-inner::after{background:rgba(29,63,138,.16)}

.nav-links>li:first-child,
.nav-links>li:nth-child(7){display:none}

/* Logo */
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:52px;width:auto}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:18px;flex:1;justify-content:center}
.nav-links>li{position:relative}
.nav-links>li[data-dd]::after{
  content:'';
  position:absolute;
  top:100%;
  left:-40px;
  right:-40px;
  height:20px;
  background:transparent;
}
.nav-links>li>a{
  font-size:11px;         /* Figma: compact nav labels */
  font-weight:600;
  letter-spacing:.09em;  /* slight tracking on nav */
  text-transform:uppercase; /* Figma: ABOUT, PRODUCTS etc are uppercase */
  color:rgba(255,255,255,.9);
  padding:8px 0;border-radius:0;
  display:flex;align-items:center;gap:5px;
  transition:color .2s,background .2s;
  -webkit-font-smoothing:antialiased;
}
.nav-links>li>a:hover{color:#fff;background:transparent}
/* When scrolled: dark text */
#nav.scrolled .nav-links>li>a{color:#1A1F2E}
#nav.scrolled .nav-links>li>a:hover{color:#1D3F8A;background:transparent}
.nav-chevron{width:10px;height:10px;transition:transform .2s;stroke:currentColor;fill:none;stroke-width:2.5}
.nav-links>li.open>a .nav-chevron{transform:rotate(180deg)}

/* ---- Products Dropdown — 6 photo cards in 1 row ---- */
.dd-products{
  position:fixed;
  top:72px;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  box-shadow:0 16px 56px rgba(0,0,0,.14);
  width:1020px;
  max-width:calc(100vw - 40px);
  padding:24px 24px 18px;
  opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s;
  z-index:9100;
  pointer-events:none;
}
.nav-links>li.open .dd-products,
.nav-links>li:hover .dd-products{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:all;
}
/* 6-column photo grid */
.dd-prod-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  margin-bottom:16px;
}
.dd-prod-card{
  border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;
  transition:border-color .2s,box-shadow .2s;
  background:#f5f5f5;
}
.dd-prod-card:hover{border-color:#F15A22;box-shadow:0 4px 16px rgba(241,90,34,.15)}
.dd-prod-card.highlight{border-color:transparent}
.dd-prod-card.highlight .dd-prod-name{color:#F15A22}
.dd-prod-img{height:170px;overflow:hidden}
.dd-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.dd-prod-card:hover .dd-prod-img img{transform:scale(1.05)}
.dd-prod-name{
    font-family:'Cocon',sans-serif;
  font-size:12px;font-weight:700;color:#1A1F2E;
  padding:10px 10px 12px;background:#fff;
  line-height:1.3;
}

/* dropdown footer row */
.dd-prod-footer{
  border-top:1px solid #E5E7EB;
  padding-top:14px;
  display:flex;gap:12px;align-items:center;
}
.dd-prod-footer .btn{font-size:13px;padding:11px 22px}

/* ---- Industries Dropdown — 9 icon tiles in 1 row ---- */
.dd-industries{
  position:fixed;
  top:72px;
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:12px;
  box-shadow:0 16px 56px rgba(0,0,0,.14);
  width:860px;
  max-width:calc(100vw - 40px);
  padding:24px 20px 20px;
  opacity:0;visibility:hidden;
  transition:opacity .18s,transform .18s;
  z-index:9100;
  pointer-events:none;
}
.nav-links>li.open .dd-industries,
.nav-links>li:hover .dd-industries{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:all;
}

/* 9-column single-row icon layout */
.dd-ind-grid{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:6px;
}
.dd-ind-tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 8px 14px;border-radius:10px;cursor:pointer;
  border:2px solid transparent;
  transition:background .18s,border-color .18s;
  text-align:center;
}
.dd-ind-tile:hover{background:#F5F6F8;border-color:#1D3F8A}
.dd-ind-tile.highlight{border-color:#F15A22}
.dd-ind-tile.highlight .dd-ind-label{color:#F15A22}
.dd-ind-icon-wrap{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(29,63,138,.07);border-radius:10px;
}
.dd-ind-icon-wrap img{width:28px;height:28px}
.dd-ind-label{ font-family:'Cocon',sans-serif;font-size:11px;font-weight:700;color:#1A1F2E;line-height:1.3}
.dd-ind-tile:hover .dd-ind-label{color:#1D3F8A}

/* Right side of nav */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-wa{
  width:38px;height:38px;border-radius:0;
  border:0 !important;
  display:flex;align-items:center;justify-content:center;
  color:transparent !important;
  background:url("icons/Whatsapp.svg") center/28px 28px no-repeat !important;
  transition:opacity .2s;
}
.nav-wa:hover{opacity:.82}
#nav.scrolled .nav-wa,
#nav.scrolled .nav-wa:hover{
  border:0 !important;
  color:transparent !important;
  background:url("icons/Whatsapp.svg") center/28px 28px no-repeat !important;
}
.nav-wa svg{display:none !important;width:20px;height:20px}
.nav-cta-btn{
  font-size:13px;font-weight:500;padding:12px 22px;
  border:1.5px solid rgba(255,255,255,.7);border-radius:0;
  color:rgba(255,255,255,.9);background:transparent;transition:all .2s;
  display:inline-block;
}
.nav-cta-btn:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}
#nav.scrolled .nav-cta-btn{border-color:#F15A22;color:#F15A22}
#nav.scrolled .nav-cta-btn:hover{background:#F15A22;color:#fff}
.nav-hamburger{display:none;background:none;border:none;color:#fff;padding:6px}
#nav.scrolled .nav-hamburger{color:#1A1F2E}

/* ---- Mobile menu ---- */
/* old mobile-menu removed — replaced by .mob-menu below */

/* ============================================================
   HERO — pixel-exact from Figma + transparent people PNG
   ============================================================ */
.hero{
  padding-top:0;
  background:#476cbc;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:calc(100vh - 38px);
}
.hero-body{
/*   flex:1;position:relative;display:flex;align-items:center;*/
   flex:1;position:relative;display:flex;align-items:flex-start;
  padding-top:72px;
  min-height:0;
}
.hero-content{
  position:relative;z-index:2;
/*   padding:38px 40px 34px; */
   padding:60px 40px 18px;
  margin-left:max(40px,calc((100vw - var(--content-w))/2 - 40px));
  max-width:680px;
  width:100%;
}

/* Location badge — bright green */
.hero-meta{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
/*   color:#8DC63F;margin-bottom:20px; */
    color:#8DC63F;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.hero-meta span{color:rgba(255,255,255,.3)}

/* H1 — cap height ~36–42px CSS at 1440px = ~5rem max */
.hero h1{
  font-family:'Cocon',sans-serif;
  font-size:clamp(4rem,4.85vw,5rem);
  
  font-weight:500;line-height:1.06;
  letter-spacing:0;color:#fff;
/*   margin-bottom:24px;*/
   margin-bottom:20px;
}

/* Body paragraph */
.hero-desc{
  font-size:15px;line-height:1.72;
  color:rgba(255,255,255,.82);margin-bottom:26px;
}
.hero-desc strong{color:#fff;font-weight:500}

/* Buttons row */
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px}

/* PRIMARY — green fill, dark text (Figma exact) */
.btn-hero-primary{
  display:inline-flex;align-items:center;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:14px 28px;border-radius:4px;border:none;cursor:pointer;
  background:#8DC63F;color:#111827;
  transition:all .2s;white-space:nowrap;
}
.btn-hero-primary:hover{background:#7ab52e;transform:translateY(-1px)}

/* SECONDARY — green outline + green text (Figma exact) */
.btn-hero-outline{
  display:inline-flex;align-items:center;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;letter-spacing:.01em;
  padding:13px 28px;border-radius:4px;cursor:pointer;
  background:transparent;color:#8DC63F;border:2px solid #8DC63F;
  transition:all .2s;white-space:nowrap;
}
.btn-hero-outline:hover{background:#8DC63F;color:#111827}

/* Cert tags — solid dark blue #2450af, 6px radius */
.hero-tags{display:flex;flex-wrap:nowrap;gap:7px;width:max-content;max-width:calc(100vw - 80px)}
.hero-tag{
  font-size:10px;font-weight:700;
  padding:6px 9px;border-radius:6px;
  background:#2450af;color:#fff;
  white-space:nowrap;
}

/* ---- Hero image — transparent PNG, full height right side ---- */
.hero-img-wrap{
  position:absolute;
  right:0;top:0;bottom:-23%;
  width:55%;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.hero-img-wrap img{
  width:auto;
  height:90%;
  max-width:none;
  object-fit:contain;
  object-position:bottom right;
  display:block;
}

/* ================================================================
   Stats — solid dark strip below hero, 4 rounded cards inside
   ================================================================ */
.hero-stats-wrap{
  position:relative;z-index:2;
}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:var(--content-w);
  margin:0 auto;
  padding:14px 0;
}
.hstat{
  padding:18px 26px 17px;
  background:rgba(23, 59, 136, 0.76);
  border-radius:10px;
}
/* Image wrap bottom = stat zone top so feet touch card top */
/* Green number — ~2rem at 1440px */
.hstat-n{
  font-family:'Cocon',sans-serif;
  font-size:2.05rem;font-weight:500;
  color:#8DC63F;line-height:1;
  margin-bottom:9px;letter-spacing:-.02em;
}
/* Bold white label */
.hstat-l{
  font-size:14px;font-weight:500;
  color:#fff;margin-bottom:4px;line-height:1.3;
}
/* Dimmer sub text */
.hstat-s{
  font-size:12px;font-weight:400;
  color:rgba(255,255,255,.52);line-height:1.4;
}

@media(min-width:1024px) and (min-height:1000px){
  .hero-content{
    padding-top:150px;
    max-width:760px;
  }
  .hero-meta{margin-bottom:30px}
  .hero h1{
    font-size:clamp(5rem,5vw,6.25rem);
    line-height:1.08;
    margin-bottom:120px;
  }
  .hero-desc{
    max-width:740px;
    font-size:16px;
    line-height:1.75;
    margin-bottom:105px;
  }
  .hero-btns{margin-bottom:60px}
  .hero-stats{padding:18px 0}
  .hstat{padding:32px 34px 30px}
  .hstat-n{font-size:3rem;margin-bottom:12px}
  .hstat-l{font-size:16px}
  .hstat-s{font-size:14px}
  .hero-img-wrap img{height:94%}
}

/* ============================================================
   TICKER
   ============================================================ */
/* ---- Trust Badge Strip ---- */
#trust-strip{background:#fff;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;padding:14px 40px}
.trust-inner{max-width:var(--content-w);margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.trust-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6B7280;white-space:nowrap;flex-shrink:0}
.trust-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.trust-badge{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:4px;background:#1D3F8A;color:#fff}

.ticker{background:#25368a;padding:10px 0;overflow:hidden}
.ticker-track{display:flex;animation:ticker 30s linear infinite;white-space:nowrap}
.ticker-item{
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#8cc63f;padding:0 22px;display:flex;align-items:center;gap:14px;
}
.ticker-item::after{content:'•';font-size:8px;color:rgba(255,255,255,.5)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   ABOUT — two distinct parts stacked vertically
   ============================================================ */

/* PART 1: white bg, 2-col text */
.about-text-row{
  padding:72px 0 56px;
  background:#fff;
}
.about-text-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.about-left .eyebrow{margin-bottom:12px}
.about-left h2{
  font-family:'Cocon',sans-serif;
  font-size:clamp(2.2rem,3.5vw,3rem);
  font-weight:500;line-height:1.05;
  letter-spacing:-.02em;color:#1A1F2E;
  margin-bottom:32px;
}
.about-quote{
  border-left:4px solid #F15A22;
  padding-left:20px;
}
.about-quote blockquote{
  font-family:'Cocon',sans-serif;font-size:16px;font-style:italic;
  color:#1A1F2E;line-height:1.7;margin-bottom:12px;
}
.about-quote cite{
  font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#F15A22;font-style:normal;
}
.about-right p{
  font-size:15px;color:#6B7280;line-height:1.78;margin-bottom:18px;
}
.about-right p:last-child{margin-bottom:0}

/* PART 2: full-width team photo, 2 white cards stacked on LEFT */
.about-vision-row{
  position:relative;
  min-height:520px;
  overflow:hidden;
}
.about-vision-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Dark overlay to darken image slightly */
.about-vision-row::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.18);
}
/* Cards sit on top of overlay */
.about-vm-cards{
  position:relative;z-index:2;
  padding:48px 0 48px max(40px,calc((100vw - var(--content-w))/2));
  display:flex;flex-direction:column;gap:16px;
  max-width:40%; /* cards take left ~40% only */
}
.vm-card{
  background:#fff;
  padding:28px 32px;
  border-radius:4px;
}
.vm-card-vision{
  border-left:4px solid #1D3F8A;
}
.vm-card-mission{
  border-left:4px solid #F15A22;
}
.vm-card-label{
    font-family:'Cocon',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px;
}
.vm-card-vision .vm-card-label{color:#1D3F8A}
.vm-card-mission .vm-card-label{color:#F15A22}
.vm-card p{
  font-size:14px;color:#374151;line-height:1.7;
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products-section{background:#fff}

/* Decorative blob top-right (Figma shows faint orange/cream circle) */
.products-section{position:relative}
.products-section::before{
  content:'';position:absolute;top:-60px;right:-80px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(241,90,34,.08) 0%,transparent 70%);
  pointer-events:none;
}

.prod-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:36px 72px;
  margin-bottom:0;
}

/* Each card: image left fixed width, content fills right */
.prod-card{
  display:grid;
  grid-template-columns:200px 1fr;
  border:none;
  border-radius:0;
  overflow:hidden;cursor:pointer;
  transition:background .2s,border-left .15s;
  background:#fff;
  position:relative;
  border-left:3px solid transparent;
}

/* Hover state — orange left border + warm bg */
.prod-card:hover{
  background:#FFF8F5;
  border-left:3px solid #F15A22;
}
.prod-card:nth-child(4){
  background:#FFF8F5;
  border-left-color:#F15A22;
}
.prod-card:nth-child(4) .prod-card-body h3{color:#F15A22}
.prod-card:hover .prod-card-body h3{color:#F15A22}
.prod-card:hover .prod-learn{text-decoration:underline}
.prod-card:hover .prod-learn svg{transform:translateX(3px)}

/* Image column */
.prod-card-img{
  overflow:hidden;height:100%;min-height:226px;
}
.prod-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s;
}
.prod-card:hover .prod-card-img img{transform:scale(1.04)}

/* Content column */
.prod-card-body{
  padding:24px 24px 20px;
  display:flex;flex-direction:column;
  border-left:none;
}
.prod-card-body h3{
  font-size:20px;font-weight:500;
  color:#1A1F2E;margin-bottom:10px;
  font-family:'Cocon',sans-serif;letter-spacing:-.01em;
  transition:color .2s;
}

/* Tags — Figma: uppercase, navy text, thin border, no fill, small radius */
.prod-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;
}
.prod-tag{
  font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  padding:4px 9px;
  border-radius:3px;
  background:transparent;
  border:1px solid #cbd5e1; /* light gray border */
  color:#1D3F8A; /* navy blue text */
}

/* Body text */
.prod-card-body p{
  font-size:13px;color:#6b7280;line-height:1.68;
  flex:1;margin-bottom:14px;
}

/* Learn more — orange, bottom right, arrow */
.prod-learn{
  font-size:13px;font-weight:700;color:#F15A22;
  display:inline-flex;align-items:center;gap:5px;
  align-self:flex-end; /* push to right */
  transition:text-decoration .1s;
}
.prod-learn svg{width:14px;height:14px;transition:transform .2s}
.prod-card:hover .prod-learn svg{transform:translateX(3px)}
.prod-card.active .prod-learn svg{transform:translateX(3px)}

.prod-cta{display:flex;gap:12px;justify-content:center;margin-top:32px}

/* ============================================================
   INDUSTRIES — Figma-exact
   Section bg #F4F7FC, cards with navy left border,
   icon+title on same row, orange hover
   ============================================================ */
.industries-section{background:#F4F7FC}

.ind-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:40px;
  gap:36px;
  border:none;
  border-radius:0;
  overflow:visible;
}

/* Individual card */
.ind-card{
  background:#fff;
  padding:34px 36px 30px;
  cursor:pointer;
  transition:background .2s,border-left-color .15s;
  border-left:3px solid #1D3F8A;
  border-right:none;
  border-bottom:none;
  display:flex;flex-direction:column;
  min-height:230px;
}
.ind-card:nth-child(3n){border-right:none}
.ind-card:nth-last-child(-n+3){border-bottom:none}

/* Hover */
.ind-card:hover{
  background:#FFF8F5;
  border-left-color:#F15A22;
}
.ind-card:nth-child(3){
  background:#FFF8F5;
  border-left-color:#F15A22;
}
.ind-card:hover h3{color:#F15A22}
.ind-card:hover .ind-learn svg{transform:translateX(3px)}

/* Icon + Title on SAME ROW */
.ind-card-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

/* Icon container — light orange bg matching screenshot */
.ind-icon{
  width:56px;height:56px;
  flex-shrink:0;
  background:#FEF0E3;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.ind-icon img{width:30px;height:30px;filter:none}

/* Title */
.ind-card h3{
  font-size:20px;font-weight:500;
  color:#1A1F2E;line-height:1.25;
  font-family:'Cocon',sans-serif;
  transition:color .2s;
  margin-bottom:0;
}

/* Body text */
.ind-card p{
  font-size:13px;color:#6B7280;line-height:1.68;
  margin-bottom:18px;flex:1;
}

/* Learn more */
.ind-learn{
  font-size:13px;font-weight:700;
  color:#F15A22;
  display:inline-flex;align-items:center;gap:5px;
  text-decoration:none;
  align-self:flex-start;
  transition:gap .2s;
}
.ind-learn:hover{gap:8px}
.ind-learn svg{width:14px;height:14px;transition:transform .2s}
.ind-card:hover .ind-learn svg{transform:translateX(3px)}

.ind-cta{display:flex;gap:12px;justify-content:center}

/* ============================================================
   CLIENTS STRIP
   ============================================================ */
.clients-strip{background:#1D3F8A;padding:24px 0;overflow:hidden}
.clients-track{display:flex;animation:ticker 25s linear infinite;white-space:nowrap;align-items:center}
.client-logo{
  padding:0 44px;display:inline-flex;align-items:center;
  border-right:1px solid rgba(255,255,255,.1);flex-shrink:0;
}
.client-logo img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.65;transition:opacity .2s}
.client-logo:hover img{opacity:1}

/* ============================================================
   WHY KLOTHON
   ============================================================ */
/* ============================================================
   WHY KLOTHON — Figma exact
   ============================================================ */
/* Grid: left content, right panel SAME height */
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:stretch; /* right panel stretches to full left height */
}
.why-list{display:flex;flex-direction:column;gap:0}
.why-item{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  padding:24px 0;border-bottom:1px solid #E5E7EB;
}
.why-item:last-child{border-bottom:none;padding-bottom:0}
.why-num{font-family:'Cocon',sans-serif;font-size:2rem;font-weight:500;color:#F15A22;line-height:1}
.why-item h3{font-family:'Cocon',sans-serif;font-size:15px;font-weight:500;color:#1A1F2E;margin-bottom:5px}
.why-item p{font-size:13px;color:#6B7280;line-height:1.7}

/* Right panel: image fills full height of grid row */
.why-panel{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  height:100%; /* fills full grid row height */
  min-height:500px;
}
.why-panel-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Dark overlay */
.why-overlay{
  position:relative;z-index:1;
  height:100%;padding:32px;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,.6) 100%);
  display:flex;flex-direction:column;
  justify-content:space-between;
}

/* Services — green left border line, icons, text */
.svc-wrap{flex:1;display:flex;flex-direction:column;justify-content:center}
.svc-title{
  font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#8DC63F;
  margin-bottom:22px;
}
.svc-list{
  display:flex;flex-direction:column;gap:0;
  border-left:2px solid #8DC63F; /* Figma: green vertical bar */
  padding-left:20px;
  margin-bottom:0;
}
.svc-list li{
  display:flex;align-items:center;gap:14px;
  font-size:15px;font-weight:500;color:#fff;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.svc-list li:last-child{border-bottom:none}
.svc-list li img{
  width:22px;height:22px;flex-shrink:0;
  filter:brightness(0) invert(1);opacity:.85;
}
.svc-list li svg{width:20px;height:20px;color:#8DC63F;flex-shrink:0}

/* Certifications — WHITE card overlapping bottom of image */
.certs-block{
  background:#fff;
  border-radius:8px;
  padding:20px 24px;
  margin-top:20px;
  /* sits at bottom of panel, white card */
}
.certs-label{
  font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#1D3F8A;
  margin-bottom:12px;
}
.certs-pills{display:flex;flex-wrap:wrap;gap:7px}
.cert-pill{
  font-size:11px;font-weight:700;padding:5px 11px;
  border-radius:4px;
  border:1.5px solid #1D3F8A;
  color:#1D3F8A;
  background:#fff;
}

/* ============================================================
   TESTIMONIALS — Figma exact
   ============================================================ */
.testi-section{background:#F5F6F8}

/* Header row: left = eyebrow+H2+desc, right = full Google badge */
.testi-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;align-items:start;
  margin-bottom:40px;
}

/* Google badge — full card, right aligned */
.g-badge{
  display:flex;align-items:center;gap:20px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:10px;
  padding:24px 28px;
  height:100%;
}
.g-logo{width:52px;height:52px;flex-shrink:0}
.g-score{
  font-family:'Cocon',sans-serif;font-size:2.8rem;font-weight:500;
  color:#1A1F2E;line-height:1;
}
.g-stars{color:#FBBC05;font-size:20px;margin:4px 0 4px;}
.g-meta{font-size:13px;color:#6B7280}

/* Quote cards */
/* Carousel wrapper — clips overflow */
.testi-carousel{
  overflow:hidden;
  margin-bottom:28px;
}
/* Track slides left/right */
.testi-track{
  display:flex;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
/* Each slide is full-width of carousel, 2-col grid */
.testi-slide{
  min-width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.testi-card{
  background:#fff;
  border:none;
  border-left:3px solid #F15A22;
  border-radius:0;
  padding:28px 28px 24px;
  position:relative;
  overflow:hidden;
}

/* Large background quote mark */
.testi-qmark{
  position:absolute;
  top:-10px;left:10px;
  font-family:Georgia,serif;
  font-size:9rem;
  font-weight:500;
  color:rgba(0,0,0,.06);
  line-height:1;
  pointer-events:none;
  user-select:none;
}

/* Italic bold quote text */
.testi-card blockquote{
  font-size:14px;font-style:italic;font-weight:600;
  color:#1A1F2E;line-height:1.7;
  margin-bottom:20px;
  position:relative;z-index:1;
}

/* Stars + author on same row, space-between */
.testi-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.testi-stars{color:#FBBC05;font-size:18px;letter-spacing:2px}
.testi-author{font-size:13px;font-weight:700;color:#1A1F2E}

/* Dots */
.testi-dots{display:flex;justify-content:center;gap:8px;margin-top:4px}
.testi-dot{
  width:9px;height:9px;border-radius:50%;
  background:#ddd;border:none;padding:0;cursor:pointer;
  transition:background .2s;
}
.testi-dot.active{background:#F15A22}

/* ============================================================
   MID CTA BANNER
   ============================================================ */
.mid-cta{
  background:#8DC63F;padding:56px 40px;text-align:center;position:relative;overflow:hidden;
}
.mid-cta::before,.mid-cta::after{
  content:'"';position:absolute;font-family:'Cocon',sans-serif;font-size:22rem;font-weight:500;
  color:rgba(255,255,255,.08);line-height:1;pointer-events:none;
}
.mid-cta::before{top:-60px;left:-20px}
.mid-cta::after{bottom:-120px;right:-20px}
.mid-cta h2{font-size:clamp(1.8rem,3vw,2.6rem);color:#fff;margin-bottom:26px}
.mid-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* ============================================================
   SUSTAINABILITY
   ============================================================ */
.green-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:74px;
  align-items:start;
}
#sustainability{
  background:#fff;
  padding:112px 0 96px;
  scroll-margin-top:72px;
}
#sustainability .eyebrow{
  margin-bottom:14px;
}
#sustainability h2{
  max-width:680px;
  font-size:clamp(3.25rem,3.45vw,4.05rem);
  line-height:1.18;
  margin-bottom:48px;
  color:#050505;
}
#sustainability .section-desc{
  max-width:720px;
  margin-bottom:54px;
  font-size:18px;
  line-height:1.65;
  color:#6b6f79;
}


.greenwear-card{
  margin-top:0;
  padding:42px 52px 46px;
  min-height:426px;
  border-radius:0;
  background:#f2fae8;
  border:0;
  border-left:4px solid #8DC63F;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:30px 44px;
  align-items:center;
}
.greenwear-card > div{display:contents}
.greenwear-card img{
  width:220px;
  height:178px;
  border-radius:0;
  object-fit:contain;
  flex-shrink:0;
}
.greenwear-card h4{
  font-family:'Poppins',sans-serif;
  font-size:29px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#3b3d44;
  line-height:1.5;
  margin:0;
  grid-column:2;
  align-self:end;
}
.greenwear-card p{
  grid-column:1 / -1;
  font-size:19px;
  color:#6d7179;
  line-height:1.75;
  margin:0;
  align-self:end;
}
.sus-panel{
  border-radius:0;
  overflow:hidden;
  position:relative;
  background:#071008;
  min-height:660px;
}
.sus-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.28);
  pointer-events:none;
}
.sus-panel>img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.78;
}
.sus-panel-body{
  position:relative;z-index:1;
  padding:106px 74px;
  min-height:660px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:38px;
}
.sus-row{
  display:grid;
  grid-template-columns:42px 118px 1fr;
  gap:24px;
  align-items:start;
}
.sus-row:nth-child(4){order:1}
.sus-row:nth-child(1){order:2}
.sus-row:nth-child(2){order:3}
.sus-row:nth-child(3){order:4}
.sus-icon-col{
  display:contents;
}
.sus-icon-col img{
  width:32px;
  height:32px;
  margin-top:6px;
  filter:brightness(0) saturate(100%) invert(73%) sepia(54%) saturate(544%) hue-rotate(40deg) brightness(97%) contrast(88%);
}
.sus-icon-label{
  font-family:'Cocon',sans-serif;
  font-size:21px;
  font-weight:800;
  color:#8DC63F;
  text-align:left;
  line-height:1.2;
}
.sus-row p{
  font-size:17px;
  color:rgba(255,255,255,.88);
  line-height:1.62;
  margin:0;
}
/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar{background:#F5F6F8;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-block{padding:36px 32px;border-right:1px solid #E5E7EB;text-align:center}
.stat-block:last-child{border-right:none}
.stat-num{font-family:'Cocon',sans-serif;font-size:2.8rem;font-weight:500;color:#1D3F8A;line-height:1;margin-bottom:7px}
.stat-label{font-size:14px;font-weight:700;color:#1A1F2E;margin-bottom:3px}
.stat-sub{font-size:12px;color:#6B7280}

/* ============================================================
   PROCESS
   ============================================================ */
.process-section{background:#fff}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;margin-top:40px}
.process-grid::before{
  content:'';position:absolute;top:22px;left:8%;right:8%;height:1px;background:#E5E7EB;
}
.process-step-num{
  font-family:'Cocon',sans-serif;font-size:3rem;font-weight:500;color:#F15A22;
  line-height:1;margin-bottom:16px;display:inline-block;position:relative;z-index:1;
}
.process-step h3{font-family:'Cocon',sans-serif;font-size:15px;font-weight:500;color:#1A1F2E;margin-bottom:7px}
.process-step p{font-size:13px;color:#6B7280;line-height:1.7}
.process-cta{display:flex;gap:36px;justify-content:center;align-items:center;margin-top:46px}

/* ============================================================
   CONTACT / CTA — Figma exact
   ============================================================ */
.contact-section{
  background:linear-gradient(135deg,#17327a 0%,#2B4DA8 50%,#2a4db8 100%);
  position:relative;overflow:hidden;
}
/* Vertical "klothon" text on far right */
.contact-bg-word{
  position:absolute;
  right:max(40px,calc((100vw - var(--content-w))/2));
top:24px;bottom:24px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  transform-origin:center;
  font-family:'Cocon',sans-serif;
font-size:clamp(118px,10.2vw,186px);
  font-weight:500;
  color:#fff;
line-height:.78;
  pointer-events:none;user-select:none;
  display:flex;align-items:flex-start;justify-content:center;
  letter-spacing:0;
  z-index:1;
}

.contact-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 0.75fr;
  gap:72px;align-items:start;
}

/* Left column heading */
.contact-inner .reveal-l>span.eyebrow{color:#8DC63F}
.contact-inner h2{color:#fff;margin-bottom:12px}
.contact-inner>div>p{
  font-size:14px;color:rgba(255,255,255,.6);
  line-height:1.75;margin-bottom:28px;
}

/* Form rows */
.form-row{
   display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:24px;
  row-gap:12px;
  margin-bottom:14px;
}
.form-field{min-width:0}
.form-field input,
.form-field textarea{
  width:100%;padding:14px 16px;
  background:rgba(10,38,103,.2);
  border:1px solid rgba(255,255,255,.85);
  border-radius:0;
  color:#fff;
  font-family:'Poppins',sans-serif;font-size:14px;
  outline:none;
  transition:border-color .2s,background .2s;
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:rgba(255,255,255,.35)}
.form-field input:focus,
.form-field textarea:focus{
  border-color:#8DC63F;
  background:rgba(255,255,255,.13);
  
}
.form-field textarea{
  min-height:112px;resize:vertical;
  
  margin-bottom:14px;display:block;width:100%;
}
#cf-msg{font-size:13px;margin-top:8px;display:none}
#cf-success{
  display:none;
  background:rgba(141,198,63,.12);
  border:1px solid #8DC63F;
  border-radius:8px;padding:28px;text-align:center;color:#fff;
}
#cf-success p{font-size:14px;color:rgba(255,255,255,.8);margin-bottom:10px}

/* Submit button — full width green */
#cf-submit{width:280px !important;justify-content:center;margin-top:18px;border-radius:0;color:#000}

/* Right column — contact info */
.contact-info{
  display:flex;flex-direction:column;gap:28px;
  padding-top:8px;
}
.ci-label{
  font-size:10px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:#8DC63F;
  display:block;margin-bottom:6px;
}
.ci-val{font-size:15px;font-weight:600;color:#fff;display:block;line-height:1.5}
.ci-val:hover{color:#8DC63F}
.ci-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}

/* Social icons */
.contact-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.soc-btn{
  width:38px;height:38px;border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);transition:all .2s;
}
.soc-btn:hover{background:#F15A22;border-color:#F15A22;color:#fff}
.soc-btn svg{width:16px;height:16px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:#061767}
body footer{
  background:#062765 !important;
}
body footer > .container{
  display:flex;
  flex-direction:column;
}
.footer-certs{
  display:flex;align-items:center;
  justify-content:space-between; /* Figma: spread across full width */
  order:2;
  padding:22px 0 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;gap:8px;
}
.fc-item{
  font-size:11px;font-weight:700;
  color:#F15A22;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:flex;align-items:center;gap:12px;
}
/* Dot separator between items */
.fc-item:not(:last-child)::after{
  content:'·';
  color:rgba(255,255,255,.18);
  font-size:16px;
  margin-left:0;
}
.fc-item.hi{color:#F15A22}
.footer-grid{
  order:1;
  display:grid;
  grid-template-columns:315px 300px 390px;
  justify-content:space-between;
  align-items:start;
  gap:48px;
  padding:60px 0 38px;
  border-bottom:none;
}
.footer-grid > div:nth-child(4){display:none}
.footer-grid > div:nth-child(5){
  display:grid;
  grid-template-columns:1fr 162px;
  gap:34px;
  align-items:start;
}
.footer-logo img{height:48px;width:auto;margin-bottom:0}
.footer-tagline{
  font-size:12px;font-weight:700;color:#F15A22;
  font-style:normal;margin-bottom:0;
  padding-left:20px;border-left:1px solid rgba(255,255,255,.25);
  display:inline-block;margin-left:18px;line-height:1.35;
}
.footer-logo .footer-brand-row{display:flex;align-items:center;margin-bottom:24px}
.footer-logo p{font-size:12px;color:rgba(255,255,255,.78);line-height:1.75}
.footer-col-title{display:none}
.footer-nav-list{
  display:grid;
  grid-template-columns:max-content max-content;
  grid-template-rows:repeat(3,auto);
  gap:18px 68px;
  padding-top:10px;
}
.footer-nav-list li:nth-child(2){grid-column:1;grid-row:1}
.footer-nav-list li:nth-child(3){grid-column:1;grid-row:2}
.footer-nav-list li:nth-child(4){grid-column:1;grid-row:3}
.footer-nav-list li:nth-child(5){grid-column:2;grid-row:1}
.footer-nav-list li:nth-child(6){grid-column:2;grid-row:2}
.footer-nav-list li:nth-child(8){grid-column:2;grid-row:3}
.footer-nav-list a{
  font-size:13px;
  color:#fff;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:color .2s;
  white-space:nowrap;
}
.footer-nav-list a[href="#"]{display:none}
.footer-nav-list a:hover{color:#F15A22}
.footer-contacts{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:0;
  padding-top:4px;
}
.footer-contacts a{
  font-size:14px;
  color:#8DC63F;
  display:flex;
  align-items:center;
  gap:11px;
  transition:color .2s;
  white-space:nowrap;
}
.footer-contacts a:hover{color:#F15A22}
.footer-contacts a.wa:hover{color:#25D366}
.footer-contacts a svg{width:15px;height:15px;flex-shrink:0;color:#8DC63F}

/* Social icons — 2x3 grid matching Figma */
.footer-soc{
  display:grid;
  grid-template-columns:repeat(3,48px);
  gap:10px;
}
.fsoc-btn{
  width:48px;height:48px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.13);border-radius:0;
  display:flex;align-items:center;justify-content:center;
  color:#8DC63F;transition:all .2s;
}
.fsoc-btn:hover{background:#F15A22;border-color:#F15A22;color:#fff}
.fsoc-btn svg{width:15px;height:15px}
.footer-bottom{order:3;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:34px 0 24px;border-top:none}
.footer-copy{font-size:12px;color:rgba(255,255,255,.22)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{
  font-size:12px;color:rgba(255,255,255,.28);text-transform:uppercase;
  letter-spacing:.05em;transition:color .2s;
}
.footer-legal a:hover{color:#F15A22}

/* ============================================================
   FLOATING
   ============================================================ */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:8990;
  width:52px;height:52px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);transition:transform .2s,box-shadow .2s;
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(37,211,102,.55)}
.wa-float svg{width:28px;height:28px}
.scroll-top{
  position:fixed;bottom:90px;right:24px;z-index:8990;
  width:40px;height:40px;background:rgba(29,63,138,.85);border:1px solid rgba(255,255,255,.15);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .3s,background .2s;backdrop-filter:blur(4px);
}
.scroll-top.show{opacity:1;pointer-events:all}
.scroll-top:hover{background:#F15A22}
.scroll-top svg{width:18px;height:18px}

/* ============================================================
   SIDE PANEL
   ============================================================ */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9200;backdrop-filter:blur(2px)}
.side-panel{
  display:none;position:fixed;top:0;right:0;
  width:680px;max-width:96vw;height:100vh;
  background:#fff;z-index:9300;overflow-y:auto;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-16px 0 64px rgba(0,0,0,.18);
}

/* ---- Panel header ---- */
.panel-head{
  background:#fff;padding:28px 32px 20px;
  display:flex;align-items:flex-start;justify-content:space-between;
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid #eee;
}
.panel-head h3{font-size:26px;font-weight:700;color:#1A1F2E;line-height:1.2;margin:0}
.panel-close{
  width:36px;height:36px;background:none;border:none;
  color:#1A1F2E;font-size:24px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;line-height:1;flex-shrink:0;margin-top:2px;
  opacity:.6;transition:opacity .15s;
}
.panel-close:hover{opacity:1}

/* ---- Panel body ---- */
.panel-body{padding:28px 32px 40px}

/* Top row: image left + italic quote right */
.panel-top-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;align-items:start}
.panel-img{width:100%;height:220px;object-fit:cover;border-radius:8px}
.panel-quote{
  background:#fdf6f2;border-radius:8px;padding:20px;
  font-size:14px;font-style:italic;color:#1A1F2E;line-height:1.7;
  display:flex;align-items:center;height:100%;
}

/* Badge pills row */
.panel-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.panel-tag{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:4px;
  background:#1D3F8A;color:#fff;
}

/* Body description */
.panel-desc{font-size:14.5px;color:#444;line-height:1.75;margin-bottom:24px}

/* KEY SPECIFICATIONS section */
.panel-specs{border-left:3px solid #F15A22;padding-left:20px;margin-bottom:24px}
.panel-specs-title{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#F15A22;margin-bottom:14px;
}
.panel-specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.panel-spec-item{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;color:#1A1F2E;font-weight:500;
}
.panel-spec-check{width:18px;height:18px;flex-shrink:0;color:#F15A22}

/* CERTIFICATIONS row */
.panel-certifs{
  display:flex;align-items:center;gap:12px;
  padding:16px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;
  margin-bottom:24px;flex-wrap:wrap;
}
.panel-certifs-label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#1A1F2E;margin-right:4px;white-space:nowrap;
}
.panel-certif-badge{
  font-size:11px;font-weight:700;padding:5px 12px;border-radius:4px;
  background:#1D3F8A;color:#fff;text-transform:uppercase;letter-spacing:.04em;
}

/* CTA buttons row */
.panel-cta{display:flex;gap:12px;flex-wrap:wrap}
.panel-cta .btn{flex:1;justify-content:center;min-width:160px}

/* ================================================================
   MOBILE MENU — Full-screen Figma design
   ================================================================ */
.mob-menu{
  display:none;
  position:fixed;inset:0;
  background:#fff;
  z-index:9500;
  flex-direction:column;
  overflow:hidden;
}
.mob-menu.open{display:flex}

/* Header bar */
.mob-menu-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid #eee;
  flex-shrink:0;
}
.mob-menu-logo img{height:36px;width:auto;display:block}
.mob-menu-head-right{display:flex;align-items:center;gap:16px}
.mob-menu-wa{display:flex;align-items:center;justify-content:center}
.mob-menu-close{
  background:none;border:none;padding:4px;
  color:#1A1F2E;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Screen container */
.mob-screen{
  display:none !important;
  flex:1;
  overflow-y:auto;
  flex-direction:column;
}
.mob-screen.mob-screen-active{display:flex !important}

/* Main nav list */
.mob-nav-list{
  display:flex;flex-direction:column;
  flex:1;
  padding:8px 0;
}
.mob-nav-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#1A1F2E;
  border-bottom:1px solid #f0f0f0;
  background:none;border-left:none;border-right:none;border-top:none;
  text-align:left;cursor:pointer;width:100%;
  text-decoration:none;
  font-family:'Poppins',sans-serif;
}
.mob-nav-item:first-child{border-top:1px solid #f0f0f0}
.mob-nav-item svg{color:#ccc;flex-shrink:0}
.mob-nav-arrow svg{color:#1A1F2E}

/* CTA buttons at bottom */
.mob-menu-ctas{
  padding:24px 20px;
  display:flex;flex-direction:column;gap:12px;
  border-top:1px solid #eee;
  flex-shrink:0;
}
.mob-cta-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 24px;border-radius:6px;
  font-size:15px;font-weight:700;
  font-family:'Poppins',sans-serif;
  cursor:pointer;text-decoration:none;
}
.mob-cta-outline{
  background:#fff;color:#F15A22;
  border:2px solid #F15A22;
}
.mob-cta-wa{
  background:#25D366;color:#fff;
  border:none;
}

/* Sub-screen header */
.mob-sub-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid #eee;
  flex-shrink:0;
}
.mob-back-btn{
  background:none;border:none;padding:4px;
  color:#1D3F8A;cursor:pointer;display:flex;
}
.mob-sub-title{
  font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#1D3F8A;
}

/* Products 2-col image grid */
.mob-prod-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2px;padding:2px;
  flex:1;
  align-content:start;
}
.mob-prod-card{
  position:relative;cursor:pointer;
  aspect-ratio:1/1;
  overflow:hidden;background:#eee;
}
.mob-prod-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s;display:block;
}
.mob-prod-card:hover img{transform:scale(1.04)}
.mob-prod-card span{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);
  color:#fff;font-size:13px;font-weight:700;
  padding:28px 12px 12px;
  line-height:1.3;
}

/* Industries 3-col icon grid */
.mob-ind-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;padding:20px 16px;
  flex:1;align-content:start;
}
.mob-ind-tile{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:20px 8px;
  background:#fdf6f2;border-radius:10px;
  cursor:pointer;transition:background .2s;
  text-align:center;
}
.mob-ind-tile:hover{background:#fbe8dc}
.mob-ind-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
}
.mob-ind-icon img{width:36px;height:36px;filter:brightness(0) saturate(100%) invert(17%) sepia(75%) saturate(700%) hue-rotate(200deg)}
.mob-ind-tile span{
  font-size:11px;font-weight:600;color:#1A1F2E;
  line-height:1.3;text-align:center;
}

/* ================================================================
   PANEL — Mobile full-screen overrides
   ================================================================ */
@media(max-width:768px){
  .side-panel{
    width:100vw;max-width:100vw;
    top:0;right:0;bottom:0;
  }
  .panel-head{padding:20px 20px 16px}
  .panel-head h3{font-size:22px}
  .panel-body{padding:20px 20px 32px}

  /* Stack image full-width, then quote below */
  .panel-top-row{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:16px;
  }
  .panel-img{height:220px;border-radius:8px}
  .panel-quote{height:auto}

  /* Specs single column */
  .panel-specs-grid{grid-template-columns:1fr;gap:10px}
  .panel-spec-item{font-size:14px}

  /* Certifications block layout */
  .panel-certifs{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:20px;
    background:#F5F6F8;
    border-radius:8px;
    border:none;
    margin-bottom:20px;
  }
  .panel-certifs-label{margin-bottom:4px}

  /* CTA buttons stack full width */
  .panel-cta{
    flex-direction:column;gap:10px;
    position:sticky;bottom:0;
    background:#fff;padding:16px 0 0;
    border-top:1px solid #eee;
    margin-top:8px;
  }
  .panel-cta .btn{
    width:100%;min-width:0;
    padding:16px;font-size:15px;
    justify-content:center;
  }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .6s ease,transform .6s ease}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(20px);transition:opacity .6s ease,transform .6s ease}
.reveal-r.in{opacity:1;transform:none}

/* ============================================================
   COOKIE / LEGAL
   ============================================================ */
#cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9400;
  background:#0E1525;border-top:2px solid #F15A22;
  padding:14px 40px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.cookie-text{font-size:13px;color:rgba(255,255,255,.52);max-width:680px}
.cookie-text a{color:#F15A22;text-decoration:underline}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}
.legal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500}
.legal-panel{
  display:none;position:fixed;top:0;right:0;
  width:560px;max-width:95vw;height:100vh;
  background:#fff;z-index:9600;overflow-y:auto;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 48px rgba(0,0,0,.2);
}
.legal-head{
  background:#1D3F8A;padding:24px 26px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
}
.legal-head h2{font-size:18px;font-weight:500;color:#fff}
.legal-body{padding:30px 26px;font-size:14px;color:#444;line-height:1.8}

/* Figma typography pass: keep heading scale consistent across sections */
.about-left h2,
.products-section h2,
#industries h2,
.testi-section h2,
#sustainability h2,
.process-section h2,
.contact-inner h2{
  font-family:'Cocon',sans-serif;
  font-weight:500;
  line-height:1.1;
  letter-spacing:0;
}
.about-left h2{
   
  line-height:1.22 !important;
  letter-spacing:0 !important;
}
.prod-card-body h3,
.ind-card h3{
  font-family:'Cocon',sans-serif;
  font-size:22px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:0;
}
.why-item h3,
.process-step h3,
.greenwear-card h4{
  font-family:'Cocon',sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:0;
}
.footer-col-title,
.vm-card-label,
.svc-title,
.certs-label,
.ci-label{
  font-family:'Poppins',sans-serif;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ============================================================
   RESPONSIVE — COMPLETE MOBILE-FIRST BREAKPOINTS
   ============================================================ */

/* ── 1100px: dropdown adjustments ──────────────────────────── */
@media(max-width:1100px){
  .reveal,
  .reveal-l,
  .reveal-r{
    opacity:1;
    transform:none;
  }

  .dd-prod-grid{grid-template-columns:repeat(3,1fr)}
  .dd-products{width:680px}
  .dd-ind-grid{grid-template-columns:repeat(5,1fr)}
  .dd-industries{width:660px}

  #sustainability{padding:82px 0 78px}
  .green-grid{
    grid-template-columns:1fr;
    gap:42px;
  }
  #sustainability h2{
    max-width:720px;
    font-size:clamp(3rem,7vw,4.15rem);
    line-height:1.12;
    margin-bottom:30px;
  }
  #sustainability .section-desc{
    max-width:760px;
    margin-bottom:42px;
    font-size:17px;
  }
  .greenwear-card{
    max-width:760px;
    min-height:0;
    padding:36px 42px 40px;
    grid-template-columns:220px minmax(0,1fr);
  }
  .greenwear-card h4{
    font-size:24px;
    line-height:1.35;
  }
  .greenwear-card p{
    font-size:16px;
    line-height:1.7;
  }
  .sus-panel{
    width:100%;
    min-height:0;
  }
  .sus-panel-body{
    min-height:0;
    padding:52px 56px;
    gap:34px;
  }
  .sus-row{
    grid-template-columns:42px 150px minmax(0,1fr);
    gap:22px;
  }
  .sus-row p{
    font-size:16px;
    line-height:1.65;
    max-width:420px;
  }

  body footer > .container{padding:0 40px}
  .footer-grid{
    grid-template-columns:1fr;
    gap:0;
    padding:44px 0 0;
  }
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4){display:none}
  .footer-grid > div:nth-child(5){display:block}
  .footer-logo{margin-bottom:34px}
  .footer-mob-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 96px;
    margin-bottom:34px;
    max-width:620px;
  }
  .footer-mob-nav a{
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .footer-contacts{
    max-width:680px;
    gap:18px;
    margin-bottom:28px;
  }
  .footer-contacts-pair{
    display:grid;
    grid-template-columns:max-content max-content;
    gap:68px;
  }
  .footer-soc{
    grid-template-columns:repeat(6,56px);
    gap:12px;
    margin-bottom:34px;
  }
  .fsoc-btn{width:56px;height:56px}
  .footer-certs{
    justify-content:center;
    gap:14px 28px;
    padding:22px 0;
  }
  .footer-bottom{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:22px;
    padding:28px 0 34px;
  }
  .footer-legal{
    width:100%;
    justify-content:space-between;
  }
  .wa-float,
  .scroll-top{
    display:none;
  }
}

@media(max-width:1320px){
  .container,
  .nav-inner{padding-left:40px;padding-right:40px}
  .hero-content{margin-left:0;padding-left:40px}
  .hero-stats{padding-left:40px;padding-right:40px}
  .about-vm-cards{padding-left:40px}
}

@media(max-width:768px){
  :root{--nav-h:64px}
  body{background:#fff}
  body > nav,
  body > header,
  body > section,
  body > footer,
  body > div:not(.overlay):not(.side-panel):not(.legal-overlay):not(.legal-panel):not(.exit-overlay):not(.exit-popup):not(#mobile-menu):not(#main-overlay):not(#legal-overlay):not(#side-panel):not(#legal-panel):not(#exit-overlay):not(#exit-popup){width:100%}
  #trust-strip{display:block}
  .container{padding:0 20px}
  .nav-inner{padding:0 20px}
  .section{padding:56px 0}
  .nav-links,.nav-cta-btn,.nav-wa{display:none}
  .nav-hamburger{display:block}
  .hero-body{padding-top:var(--nav-h)}
  .hero-content{margin-left:0;padding:32px 20px 28px;max-width:100%}
  .hero h1{font-size:clamp(2.8rem,9vw,3.6rem)}
  .hero-img-wrap{width:100%;opacity:.18;align-items:center;overflow:hidden}
  .hero-img-wrap img{height:90%;max-width:100%;width:auto}
  .hero-stats{grid-template-columns:1fr 1fr;gap:8px;padding:14px 20px}
  .hstat{padding:16px 16px 14px}
  .hstat-n{font-size:1.8rem;margin-bottom:8px}
  .hstat-l{font-size:13px}
  .hstat-s{font-size:11px}
  .about-text-grid{grid-template-columns:1fr;gap:32px}
  .about-vision-row{min-height:auto}
  .about-vm-cards{max-width:100%;padding:32px 20px}
  .about-grid,.why-grid,.green-grid,.contact-inner{grid-template-columns:1fr;gap:32px}
  .vm-wrap{min-height:280px}
  #sustainability{padding:56px 0 64px}
  #sustainability h2{
    max-width:100%;
    font-size:clamp(2.4rem,10vw,3.2rem);
    line-height:1.15;
    margin-bottom:24px;
  }
  #sustainability .section-desc{
    max-width:100%;
    font-size:15px;
    line-height:1.75;
    margin-bottom:34px;
  }
  .greenwear-card{
    width:100%;
    min-height:0;
    padding:28px 24px;
    grid-template-columns:1fr;
    gap:18px;
  }
  .greenwear-card img{width:180px;height:auto}
  .greenwear-card h4{grid-column:1;font-size:20px;line-height:1.35;margin-bottom:0}
  .greenwear-card p{grid-column:1;font-size:14px;line-height:1.7}
  .sus-panel{width:100%;min-height:0}
  .sus-panel-body{min-height:0;padding:34px 24px;gap:28px}
  .sus-row{grid-template-columns:34px 104px 1fr;gap:14px}
  .sus-icon-col img{width:26px;height:26px;margin-top:4px}
  .sus-icon-label{font-size:16px}
  .sus-row p{font-size:13px;line-height:1.55}
  .prod-grid{grid-template-columns:1fr}
  .prod-card{grid-template-columns:110px 1fr}
  .ind-grid{grid-template-columns:1fr;gap:14px;border:none;overflow:visible}
  .ind-card{padding:26px 24px 22px;min-height:0}
  .ind-card:nth-child(3n){border-right:none}
  .ind-card:nth-last-child(-n+3){border-bottom:1px solid #dde3ee}
  .ind-card:last-child{border-bottom:none}
  .testi-head{grid-template-columns:1fr}
.testi-slide{grid-template-columns:1fr}
.testi-card{padding:22px 20px 18px}  
  .stats-inner{grid-template-columns:1fr 1fr}
  
  .stat-block:nth-child(even){border-right:none}
  .stat-block:nth-child(1),.stat-block:nth-child(2){border-bottom:1px solid var(--border)}
  /* Process steps — Figma: large number, title, desc stacked */
  .process-grid{grid-template-columns:1fr;gap:0}
  .process-grid::before{display:none}
  .process-step{
    padding:28px 0;
    border-bottom:1px solid #E5E7EB;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:0 20px;
    align-items:start;
  }
  .process-step:last-child{border-bottom:none}
  .process-step-num{
    font-size:2.4rem;
    grid-row:span 2;
    line-height:1;
    padding-top:2px;
  }
  .process-step h3{font-size:15px;margin-bottom:6px}
  .process-step p{font-size:13px;grid-column:2}

  /* Product cards — full image with overlay label on mobile */
  .prod-grid{grid-template-columns:1fr;gap:16px}
  .prod-card{
    grid-template-columns:1fr;
    border-left:none;
    position:relative;
    min-height:220px;
  }
  .prod-card-img{
    height:220px;
    position:relative;
  }
  .prod-card-img::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 60%);
  }
  .prod-card-body{
    position:absolute;bottom:0;left:0;right:0;
    padding:16px;z-index:2;
    border-left:none;
  }
  .prod-card-body h3{color:#fff;font-size:16px}
  .prod-tags,.prod-card-body p,.prod-learn{display:none}


  .contact-bg-word{display:none}
  #cookie-banner{padding:14px 20px}
  .mid-cta{padding:40px 20px}
  .prod-cta,.ind-cta,.mid-cta-btns{flex-direction:column;align-items:center}

  /* ── Additional mobile fixes ── */
  /* Trust strip */
  #trust-strip{padding:12px 20px}
  .trust-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .trust-badges{gap:6px}

  /* FAQ inline section */
  #faq > div{padding:0 20px !important}

  /* Stats bar */
  .stat-block{padding:24px 16px}
  .stat-num{font-size:2rem}

  /* ── FOOTER — pixel-perfect mobile layout from design ── */
  footer .container{padding:0 20px}
  .footer-grid{grid-template-columns:1fr;gap:0;padding:32px 0 0;border-bottom:none}
  .footer-grid > div:nth-child(5){display:block}
  .footer-logo{margin-bottom:28px}
  .footer-brand-row{display:flex;align-items:center;gap:0;margin-bottom:14px}
  .footer-logo img{height:56px;width:auto;margin-bottom:0}
  .footer-tagline{
    font-size:17px;font-weight:700;color:#F15A22;font-style:normal;
    padding-left:16px;border-left:1px solid rgba(255,255,255,.25);
    margin-left:16px;display:inline-block;line-height:1.35;letter-spacing:0;
  }
  .footer-logo p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.7;margin-top:4px}

  /* Hide desktop Pages + Industries cols on mobile (mob-nav is child 2, pages=3, industries=4) */
  footer .footer-grid > div:nth-child(3),
  footer .footer-grid > div:nth-child(4){display:none}

  /* Nav links 2-col grid */
  .footer-mob-nav{
    display:grid;grid-template-columns:1fr 1fr;
    border-top:1px solid rgba(255,255,255,.08);
    margin-bottom:28px;
  }
  .footer-mob-nav a{
    display:block;font-size:13px;font-weight:500;
    letter-spacing:.09em;text-transform:uppercase;
    color:#fff;text-decoration:none;
    padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .footer-mob-nav a:hover{color:#F15A22}

  /* Contact items */
  .footer-contacts{gap:0;margin-bottom:20px}
  .footer-contacts a{
    font-size:15px;color:rgba(255,255,255,.75);
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);gap:12px;
  }
  .footer-contacts a svg{width:18px;height:18px;color:#8DC63F}
  /* Phone + WA side-by-side */
  .footer-contacts-pair{display:grid;grid-template-columns:1fr 1fr}
  .footer-contacts-pair a{font-size:13px;padding:14px 0}
  .footer-contacts-pair a:last-child{padding-left:12px;border-left:1px solid rgba(255,255,255,.08)}

  /* Social icons single row */
  .footer-soc{grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:24px}
  .fsoc-btn{width:100%;height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.15)}
  .fsoc-btn svg{width:18px;height:18px}

  /* Certs strip */
  .footer-certs{
    justify-content:flex-start;flex-wrap:wrap;
    gap:4px;padding:20px 0;row-gap:10px;
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .fc-item{font-size:12px;color:#F15A22;gap:8px}
  .fc-item:not(:last-child)::after{content:'·';color:rgba(255,255,255,.3);margin-left:0}

  /* Bottom */
  .footer-bottom{
    flex-direction:column-reverse;align-items:center;
    text-align:center;gap:12px;padding:20px 0 28px;
  }
  #cf-submit{width:100%;border-radius:6px}
  .footer-legal{gap:24px;justify-content:center}
  .footer-legal a{font-size:13px;color:rgba(255,255,255,.5)}
  .footer-copy{font-size:12px;color:rgba(255,255,255,.3);text-align:center;line-height:1.6}

  /* Final mobile footer alignment: centered only on mobile */
  footer,
  footer .container,
  .footer-grid,
  .footer-logo,
  .footer-logo p,
  .footer-contacts,
  .footer-certs,
  .footer-bottom{
    text-align:center;
  }
  .footer-logo{width:100%;margin-left:auto;margin-right:auto}
  .footer-brand-row,
  .footer-logo .footer-brand-row{
    justify-content:center;
  }
  .footer-mob-nav{
    width:100%;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
  .footer-contacts{
    width:100%;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }
  .footer-contacts a{
    justify-content:center;
    text-align:center;
  }
  .footer-contacts-pair{
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .footer-soc{
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }
  .footer-certs{
    justify-content:center;
  }
  .footer-legal{
    width:100%;
    justify-content:space-between;
    text-align:center;
  }

  /* Process */
  .process-cta{flex-direction:column;align-items:center}

  /* Sticky bar */
  #sticky-bar > div{flex-wrap:wrap !important;padding:12px 20px !important;gap:10px !important}
  #sticky-bar > div > div:first-child{width:100% !important}

  /* Prevent any horizontal bleed from decorative elements */
  .mid-cta::before,.mid-cta::after{display:none}
  .contact-bg-word{display:none}
}

/* ── Exit Intent Popup ─────────────────────────────────────── */
.exit-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9700;backdrop-filter:blur(3px)}
.exit-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);width:520px;max-width:94vw;background:#fff;border-radius:16px;z-index:9800;padding:40px;box-shadow:0 32px 80px rgba(0,0,0,.28);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s;opacity:0}
.exit-popup.visible{transform:translate(-50%,-50%) scale(1);opacity:1}
.exit-popup-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:24px;color:#6B7280;cursor:pointer;line-height:1}
.exit-popup-badge{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:#EBF5D3;color:#3A6B10;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.exit-popup h2{font-family:'Cocon',sans-serif;font-size:26px;font-weight:700;color:#1A1F2E;line-height:1.2;margin-bottom:10px}
.exit-popup-desc{font-size:14px;color:#6B7280;line-height:1.7;margin-bottom:16px}
.exit-trust-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.exit-trust-pills span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;border-radius:4px;background:#1D3F8A;color:#fff}
.exit-popup-form{display:flex;flex-direction:column;gap:10px}
.exit-popup-form input[type="email"]{width:100%;padding:13px 16px;border:1.5px solid #E5E7EB;border-radius:6px;font-family:'Poppins',sans-serif;font-size:14px;color:#1A1F2E;outline:none;transition:border-color .2s;box-sizing:border-box}
.exit-popup-form input[type="email"]:focus{border-color:#1D3F8A}
.exit-popup-form .btn{width:100%;justify-content:center;padding:14px}
.exit-popup-note{font-size:12px;color:#9CA3AF;text-align:center;margin-top:12px}