/* =========================================================
   Enxin Trailer — main stylesheet
   Industrial, export-grade visual system for semi-trailer suppliers
   ---------------------------------------------------------
   1  Tokens          5  Header / nav      9  Home sections
   2  Reset / base    6  Buttons          10 Inner pages
   3  Typography      7  Hero             11 Forms
   4  Layout          8  Cards / grids    12 Footer / utilities
   ========================================================= */

/* 1. Tokens ------------------------------------------------ */
:root{
  --ink:#16202C;
  --ink-2:#1E2A38;
  --ink-3:#26323F;
  --ink-4:#33404E;
  --paper:#FFFFFF;
  --soft:#F4F6F8;
  --line:#DFE4EA;
  --line-dark:rgba(255,255,255,.14);
  --text:#16202C;
  --muted:#5A6472;
  --muted-dark:#A7B6C6;
  --accent:#F26522;
  --accent-hi:#D9530F;
  --accent-ink:#141A20;
  --accent-strong:#B4440A;
  --brand:#0B3E6F;
  --brand-2:#144E86;
  --brand-dark:#072C4F;
  --action:#1B6BB0;
  --action-light:#8FC2EA;
  --action-bright:#A9D3F0;
  --ok:#1F7A4D;
  --err:#B3261E;
  --container:1240px;
  --gap:28px;
  --radius:2px;
  --shadow-sm:0 1px 2px rgba(7,44,79,.06),0 6px 18px -10px rgba(7,44,79,.24);
  --shadow-md:0 18px 40px -22px rgba(7,44,79,.42);
  --font-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --font-body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --z-header:120;
  --z-float:90;
}

/* 2. Reset / base ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{padding-left:1.15em}
figure{margin:0}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-60px;left:16px;z-index:999;background:var(--accent);color:var(--accent-ink);
  padding:10px 18px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;
}
.skip-link:focus{top:12px}

/* 3. Typography -------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.03;
  margin:0 0 .6em;
  color:var(--text);
}
h1{font-size:clamp(2.35rem,5vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.15}
h4{font-size:1.09rem;line-height:1.25}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
small{font-size:.82rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:.83rem;letter-spacing:.24em;color:var(--action);margin:0 0 18px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--action);display:block}
.eyebrow--plain::before{display:none}
.lead{font-size:1.09rem;color:var(--muted);max-width:64ch}
.lead--light{color:rgba(255,255,255,.72)}
.uppercase{text-transform:uppercase;letter-spacing:.14em}
.mono{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase}

/* 4. Layout ----------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.container--narrow{max-width:920px}
.section{padding:clamp(64px,7vw,104px) 0}
.section--tight{padding:clamp(44px,4.5vw,64px) 0}
.section--flush-top{padding-top:0}
.section--dark{background:var(--brand);color:#EAF1F8}
.section--dark h2,.section--dark h3{color:#fff}
.section--soft{background:var(--soft)}
.section--white{background:#fff}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--4-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--media-right{grid-template-columns:.98fr 1.02fr}
.section-head{max-width:760px;margin-bottom:clamp(36px,4vw,56px)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head p{color:var(--muted);margin-bottom:0}
.section-head--light p{color:rgba(255,255,255,.7)}
.hairline{height:1px;background:var(--line);border:0;margin:0}
.hairline--dark{background:var(--line-dark)}

/* 5. Header / nav ------------------------------------------ */
.topbar{
  background:var(--brand-dark);color:var(--muted-dark);font-size:.8rem;
  border-bottom:1px solid var(--line-dark);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px}
.topbar__list{display:flex;align-items:center;gap:22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.topbar__list li{display:flex;align-items:center;gap:8px}
.topbar a:hover{color:#fff}
.topbar__icon{width:14px;height:14px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.7}
.topbar__lang{font-family:var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.topbar__lang span{color:var(--accent)}

.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(11,62,111,.95);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-dark);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-stuck{box-shadow:0 14px 34px -22px rgba(0,0,0,.85);background:rgba(7,44,79,.98)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand img{max-height:46px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.brand__tag{font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-dark);margin-top:4px}
.brand__mark{width:38px;height:38px;flex:none;color:var(--accent)}

.main-nav{margin-left:auto}
.nav-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-menu>li{position:relative}
.nav-menu>li>a{
  display:flex;align-items:center;gap:7px;
  padding:12px 14px;color:#D3DAE1;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.09em;position:relative;
}
.nav-menu>li>a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-menu>li>a:hover,.nav-menu>li.current-menu-item>a,.nav-menu>li.current-menu-parent>a,.nav-menu>li.current-menu-ancestor>a{color:#fff}
.nav-menu>li>a:hover::after,.nav-menu>li.current-menu-item>a::after,.nav-menu>li.current-menu-parent>a::after,.nav-menu>li.current-menu-ancestor>a::after{transform:scaleX(1)}
.nav-menu .sub-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:250px;
  background:var(--brand-2);border:1px solid var(--line-dark);border-top:2px solid var(--accent);
  list-style:none;margin:0;padding:8px 0;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s var(--ease);
}
.nav-menu li:hover>.sub-menu,.nav-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav-menu .sub-menu a{display:block;padding:9px 20px;color:#C4CDD6;font-size:.92rem;letter-spacing:.02em}
.nav-menu .sub-menu a:hover{background:rgba(255,255,255,.05);color:#fff;padding-left:24px}
.nav-menu .sub-menu .sub-menu{top:-9px;left:100%}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-dark);color:#fff;
  width:46px;height:44px;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform .25s var(--ease)
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* 6. Buttons ---------------------------------------------- */
.btn{
  --btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:15px 28px;background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.1em;line-height:1;text-align:center;
  transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(242,101,34,.85)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.34)}
.btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--dark{--btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand)}
.btn--dark:hover{--btn-bg:var(--brand-2);--btn-bd:var(--brand-2)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--whatsapp{--btn-bg:#1FA855;--btn-bd:#1FA855}
.btn--lg{padding:18px 34px;font-size:1.12rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--action);font-size:.95rem;
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* 7. Hero ------------------------------------------------- */
.hero{
  position:relative;display:flex;align-items:center;
  min-height:clamp(560px,84vh,880px);
  padding:clamp(72px,9vw,140px) 0 clamp(88px,10vw,150px);
  background-color:var(--brand);background-size:cover;background-position:center;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,44,79,.95) 0%,rgba(7,44,79,.82) 42%,rgba(7,44,79,.44) 78%,rgba(7,44,79,.32) 100%),
    linear-gradient(180deg,rgba(7,44,79,.55) 0%,rgba(7,44,79,0) 34%,rgba(7,44,79,.74) 100%);
}
.hero::after{
  content:"";position:absolute;right:-140px;bottom:-180px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(242,101,34,.26),transparent 68%);pointer-events:none;
}
.hero__inner{position:relative;z-index:2;max-width:800px;color:#fff}
.hero h1{color:#fff;margin-bottom:22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__lead{font-size:clamp(1rem,1.35vw,1.18rem);color:rgba(255,255,255,.8);max-width:56ch;margin-bottom:34px}
.hero__meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero__meta-item{display:flex;align-items:center;gap:11px;font-size:.9rem;color:rgba(255,255,255,.72)}
.hero__meta-item svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:none}

.stats{background:var(--brand);border-bottom:1px solid var(--line-dark)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:34px 30px;border-left:1px solid var(--line-dark);color:#fff}
.stat:first-child{border-left:0;padding-left:0}
.stat__value{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1;color:var(--accent)}
.stat__label{display:block;margin-top:10px;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}

/* 8. Cards / grids ---------------------------------------- */
.cat-card{
  position:relative;display:block;overflow:hidden;background:var(--brand-2);
  border:1px solid var(--line);aspect-ratio:4/3;
}
.cat-card__img{position:absolute;inset:0}
.cat-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,44,79,.05) 34%,rgba(7,44,79,.66) 66%,rgba(7,44,79,.95) 100%);
}
.cat-card__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 26px 24px;color:#fff;
}
.cat-card__count{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.cat-card h3{margin:0 0 10px;color:#fff;font-size:1.42rem}
.cat-card__more{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cat-card__more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.cat-card:hover .cat-card__img img{transform:scale(1.06)}
.cat-card:hover{border-color:var(--accent)}
.cat-card:hover .cat-card__more{color:#fff}
.cat-card:hover .cat-card__more svg{transform:translateX(5px)}

.product-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.product-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.product-card:hover .product-card__media img{transform:scale(1.05)}
.product-card__badge{
  position:absolute;top:14px;left:14px;z-index:2;background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;
}
.product-card__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.product-card h3{font-size:1.3rem;margin-bottom:12px}
.product-card h3 a:hover{color:var(--accent)}
.product-card__excerpt{font-size:.93rem;color:var(--muted);margin-bottom:18px}
.product-card__specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.product-card__specs li{
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:5px 10px;background:var(--paper);
}
.product-card__foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}

.feature-card{
  position:relative;background:#fff;border:1px solid var(--line);padding:30px 26px 28px;
  border-top:3px solid var(--brand);transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.feature-card:hover{transform:translateY(-5px);border-top-color:var(--accent);box-shadow:var(--shadow-sm)}
.feature-card__num{
  font-family:var(--font-display);font-size:.86rem;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:16px;
}
.feature-card svg{width:30px;height:30px;stroke:var(--brand);fill:none;stroke-width:1.5;margin-bottom:18px}
.feature-card h3{font-size:1.22rem;margin-bottom:10px}
.feature-card p{font-size:.94rem;color:var(--muted);margin:0}

.media-frame{position:relative}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame::after{
  content:"";position:absolute;left:-14px;bottom:-14px;width:120px;height:120px;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);
}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--wide{aspect-ratio:4/3}
.list-check{list-style:none;margin:0 0 30px;padding:0}
.list-check li{position:relative;padding-left:30px;margin-bottom:13px;color:var(--text)}
.list-check li::before{
  content:"";position:absolute;left:2px;top:9px;width:12px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}
.list-check--light li{color:rgba(255,255,255,.82)}

/* 9. Home sections ---------------------------------------- */
.quality-band{background:var(--brand);color:#fff;overflow:hidden}
.quality-band .split{align-items:stretch}
.quality-band__media{position:relative;min-height:340px;border:1px solid var(--line-dark)}
.quality-band__media img{width:100%;height:100%;object-fit:cover}
.quality-points{display:flex;flex-direction:column;gap:26px}
.quality-point{display:flex;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--line-dark)}
.quality-point:last-child{border-bottom:0;padding-bottom:0}
.quality-point__num{
  font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--accent);line-height:1;flex:none;width:44px;
}
.quality-point h3{color:#fff;font-size:1.24rem;margin-bottom:8px}
.quality-point p{color:rgba(255,255,255,.68);font-size:.95rem;margin:0}

.certs-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.certs-strip__inner{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap;padding:30px 0}
.certs-strip__label{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;font-size:.83rem;color:var(--muted);
  padding-right:clamp(24px,4vw,56px);border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center;
}
.cert-badge{
  display:flex;flex-direction:column;gap:4px;min-width:120px;
}
.cert-badge strong{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--brand)}
.cert-badge span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.testimonial{
  position:relative;background:#fff;border:1px solid var(--line);padding:34px 30px 28px;display:flex;flex-direction:column;
}
.testimonial::before{
  content:"\201C";position:absolute;top:6px;right:24px;font-family:Georgia,serif;font-size:5.4rem;line-height:1;color:rgba(27,107,176,.22);
}
.testimonial blockquote{margin:0 0 24px;font-size:1rem;color:var(--text);line-height:1.7}
.testimonial__who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.testimonial__avatar{
  width:42px;height:42px;flex:none;background:var(--brand);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;letter-spacing:.04em;
}
.testimonial__name{font-weight:600}
.testimonial__role{font-size:.83rem;color:var(--muted)}

.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);height:100%;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--brand-2)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-card__meta{display:flex;gap:14px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--action);margin-bottom:12px}
.post-card h3{font-size:1.24rem;margin-bottom:12px}
.post-card h3 a:hover{color:var(--accent)}
.post-card p{font-size:.93rem;color:var(--muted);margin-bottom:18px}
.post-card .link-arrow{margin-top:auto}

.cta-band{
  position:relative;background:var(--brand);color:#fff;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px);
}
.cta-band::after{
  content:"";position:absolute;left:-160px;top:-140px;width:460px;height:460px;
  background:radial-gradient(circle,rgba(242,101,34,.24),transparent 70%);
}
.cta-band .container{position:relative;z-index:2}
.cta-band__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(34px,5vw,68px);align-items:center}
.cta-band h2{color:#fff;margin-bottom:18px}
.cta-band p{color:rgba(255,255,255,.74)}
.cta-band .list-check li{color:rgba(255,255,255,.8);margin-bottom:11px}

/* 10. Inner pages ----------------------------------------- */
.page-hero{
  position:relative;background:var(--brand);color:#fff;padding:clamp(54px,6vw,86px) 0 clamp(46px,5vw,68px);
  background-size:cover;background-position:center;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,44,79,.95) 0%,rgba(7,44,79,.80) 55%,rgba(7,44,79,.58) 100%);
}
.page-hero__inner{position:relative;z-index:2;max-width:860px}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3.3rem);margin-bottom:14px}
.page-hero p{color:rgba(255,255,255,.74);max-width:62ch;margin:0}
.breadcrumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:18px;list-style:none;padding:0}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs li::after{content:"/";margin-left:9px;color:rgba(255,255,255,.42)}
.breadcrumbs li:last-child::after{display:none}
.breadcrumbs li[aria-current]{color:#fff}

.entry-content{font-size:1.03rem}
.entry-content>*+*{margin-top:1.15em}
.entry-content h2{margin-top:1.6em}
.entry-content h3{margin-top:1.4em}
.entry-content a{color:var(--action);border-bottom:1px solid var(--accent)}
.entry-content a:hover{color:var(--accent)}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.5em}
.entry-content img{border:1px solid var(--line)}
.entry-content blockquote{
  margin:1.6em 0;padding:22px 26px;border-left:3px solid var(--accent);background:#fff;
  font-family:var(--font-display);font-size:1.2rem;text-transform:none;letter-spacing:0;line-height:1.5;
}
.entry-content table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.entry-content th{background:var(--soft);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em}
.wp-block-image{margin:1.6em 0}
.wp-block-gallery{gap:14px}

.spec-card{background:#fff;border:1px solid var(--line);padding:30px}
.spec-card h3{margin-bottom:20px}
.spec-table{width:100%;border-collapse:collapse;font-size:.95rem}
.spec-table th,.spec-table td{border-bottom:1px solid var(--line);padding:12px 4px;text-align:left;vertical-align:top}
.spec-table th{
  width:44%;color:var(--muted);font-weight:400;font-family:var(--font-body);text-transform:none;letter-spacing:0;
}
.spec-table td{font-weight:600}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}

.product-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);gap:clamp(30px,4vw,54px);align-items:start}
.product-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.product-gallery{border:1px solid var(--line);background:#fff;aspect-ratio:4/3;overflow:hidden}
.product-gallery img{width:100%;height:100%;object-fit:cover}
.product-facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 26px;padding:0}
.product-facts li{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;
  background:var(--soft);border-left:2px solid var(--accent);padding:8px 14px;
}

.faq-group{margin-bottom:clamp(38px,4vw,54px)}
.faq-group__title{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.faq-group__title span{
  font-family:var(--font-display);font-size:.8rem;letter-spacing:.2em;color:#fff;background:var(--brand);padding:5px 11px;
}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  background:none;border:0;padding:22px 0;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:1.16rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.25;
  transition:color .25s var(--ease);
}
.faq-item__q:hover{color:var(--action)}
.faq-item__icon{position:relative;width:16px;height:16px;flex:none;margin-top:4px}
.faq-item__icon::before,.faq-item__icon::after{content:"";position:absolute;background:var(--accent);transition:transform .3s var(--ease)}
.faq-item__icon::before{left:0;top:7px;width:16px;height:2px}
.faq-item__icon::after{left:7px;top:0;width:2px;height:16px}
.faq-item.is-open .faq-item__icon::after{transform:scaleY(0)}
.faq-item__a{overflow:hidden;height:0;transition:height .35s var(--ease)}
.faq-item__a-inner{padding:0 0 24px;max-width:78ch;color:var(--muted)}
.faq-item.is-open .faq-item__q{color:var(--action)}

.steps{counter-reset:step;display:grid;gap:22px;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:26px 28px 26px 78px;background:#fff;border:1px solid var(--line)}
.steps li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:24px;top:24px;font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--accent);
}
.steps strong{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:1.1rem;margin-bottom:6px}
.steps p{margin:0;font-size:.95rem;color:var(--muted)}

.archive-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:#fff;border:1px solid var(--line);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.88rem;color:var(--muted);
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

.pagination{margin-top:56px;display:flex;justify-content:center}
.pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;background:#fff;border:1px solid var(--line);
  font-family:var(--font-display);letter-spacing:.08em;color:var(--muted);margin:0 3px;
}
.pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}

.notice{padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--brand);background:#fff;margin-bottom:26px;font-size:.96rem}
.notice--success{border-left-color:var(--ok);background:#F1F8F3}
.notice--error{border-left-color:var(--err);background:#FDF3F2}

.contact-cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.contact-card{background:#fff;border:1px solid var(--line);padding:26px;border-top:3px solid var(--accent)}
.contact-card svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.6;margin-bottom:16px}
.contact-card h3{font-size:1.08rem;margin-bottom:8px}
.contact-card p,.contact-card a{font-size:.95rem;color:var(--muted);margin:0;word-break:break-word}
.contact-card a:hover{color:var(--accent)}

/* 11. Forms ---------------------------------------------- */
.form-card{background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,38px)}
.form-card--dark{background:var(--brand-2);border-color:var(--line-dark);color:#fff}
.form-card__head{margin-bottom:26px}
.form-card__head h3{margin-bottom:8px}
.form-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--font-display);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  font-size:.98rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,101,34,.18);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px}
.field__hint{font-size:.8rem;color:var(--muted)}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.form-consent{font-size:.8rem;color:var(--muted);margin:0}
.hp-field{position:absolute!important;left:-9999px;overflow:hidden;height:1px;width:1px}

/* 12. Footer / utilities ---------------------------------- */
.site-footer{background:var(--brand-dark);color:var(--muted-dark);font-size:.94rem;border-top:3px solid var(--accent)}
.site-footer__main{padding:clamp(52px,6vw,76px) 0 44px}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:clamp(24px,3vw,44px)}
.site-footer h2,.site-footer h3{
  color:#fff;font-size:1.02rem;letter-spacing:.16em;margin-bottom:20px;position:relative;padding-bottom:12px;
}
.site-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--accent)}
.site-footer p{color:var(--muted-dark);font-size:.93rem}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:11px}
.footer-links a{color:#C4CDD6;font-size:.94rem;display:inline-block}
.footer-links a:hover{color:#fff;transform:translateX(4px)}
.footer-contact{list-style:none;margin:0;padding:0}
.footer-contact li{display:flex;gap:12px;margin-bottom:14px;color:#C4CDD6;font-size:.93rem}
.footer-contact svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:none;margin-top:3px}
.footer-contact a{color:#C4CDD6}
.footer-contact a:hover{color:#fff}
.footer-social{display:flex;gap:10px;margin-top:22px}
.footer-social a{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-dark);color:#C4CDD6;
}
.footer-social a:hover{border-color:var(--accent);color:#fff;background:rgba(242,101,34,.16)}
.footer-social svg{width:16px;height:16px;fill:currentColor}
.site-footer__bottom{border-top:1px solid var(--line-dark);padding:20px 0;font-size:.85rem}
.site-footer__bottom-inner{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.site-footer__bottom a:hover{color:#fff}

.float-actions{position:fixed;right:20px;bottom:22px;z-index:var(--z-float);display:flex;flex-direction:column;gap:12px}
.float-btn{
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:0;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);transition:transform .25s var(--ease),opacity .3s var(--ease);
}
.float-btn:hover{transform:translateY(-3px)}
.float-btn svg{width:22px;height:22px}
.float-btn--wa{background:#1FA855;color:#fff;position:relative}
.float-btn--wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(31,168,85,.55);animation:pulse 2.4s infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.float-btn--top{background:var(--brand);color:#fff;opacity:0;visibility:hidden}
.float-btn--top.is-visible{opacity:1;visibility:visible}

.pattern-band{background:var(--brand);color:#fff;padding:40px 0}
.pattern-band__inner{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.pattern-band p{margin:0;color:rgba(255,255,255,.78);max-width:60ch}

.reveal{opacity:0;transform:translateY(20px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  .float-btn--wa::after{animation:none}
  html{scroll-behavior:auto}
}

/* 13. Editor / block compatibility ------------------------ */
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{width:100%;max-width:none}
.wp-block-button__link{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em}
.wp-block-quote{border-left:3px solid var(--accent);padding-left:22px}
.sidebar{background:#fff;border:1px solid var(--line);padding:28px}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sidebar li:last-child{border-bottom:0}

/* 14. Responsive ------------------------------------------ */
@media (max-width:1180px){
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(360px,86vw);z-index:150;
    background:var(--brand-2);border-left:1px solid var(--line-dark);
    padding:96px 26px 40px;overflow-y:auto;transform:translateX(102%);transition:transform .38s var(--ease);
    margin-left:0;
  }
  body.nav-open .main-nav{transform:none}
  body.nav-open{overflow:hidden}
  .nav-menu{flex-direction:column;align-items:stretch;gap:0}
  .nav-menu>li>a{padding:16px 0;border-bottom:1px solid var(--line-dark);font-size:1.15rem;justify-content:space-between}
  .nav-menu>li>a::after{display:none}
  .nav-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:2px solid var(--accent);background:rgba(255,255,255,.02);display:none;padding:6px 0 10px;
  }
  .nav-menu li.is-open>.sub-menu{display:block}
  .nav-menu .sub-menu a{padding:8px 16px}
  .nav-actions .btn--header{display:none}
  .split,.cta-band__grid,.product-layout{grid-template-columns:1fr}
  .product-side{position:static}
  .quality-band__media{min-height:280px}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar__inner{justify-content:center;padding:6px 0}
  .topbar__list--right{display:none}
  .stats__grid{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line-dark);padding:24px 0}
  .stat:first-child{border-top:0}
  .hero{min-height:auto;padding:64px 0 72px}
  .certs-strip__label{border-right:0;padding-right:0;width:100%}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .container{padding:0 18px}
  .grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}
  .hero__meta{gap:16px;flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .float-actions{right:14px;bottom:16px}
  .site-footer__grid{grid-template-columns:1fr}
  .product-card__foot{flex-direction:column;align-items:flex-start}
  .media-frame::after{display:none}
}

/* 15. Utilities & component add-ons ----------------------- */
.mt-40{margin-top:40px}
.center{text-align:center}
.center .btn-row{justify-content:center}
.center .eyebrow{justify-content:center}
.with-sidebar{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(290px,1fr);gap:clamp(28px,4vw,52px);align-items:start}

.product-card__badge--static{position:static;display:inline-block;margin-bottom:16px}
.spec-inline{list-style:none;padding:0;margin:0 0 22px}
.spec-inline li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:11px 0}
.spec-inline span{color:var(--muted);font-size:.84rem;letter-spacing:.08em;text-transform:uppercase}
.product-gallery{background:#fff}
.product-gallery img{object-fit:contain}
.product-gallery--wide{aspect-ratio:16/9}
.map-embed{margin-top:26px;border:1px solid var(--line);background:#fff}
.map-embed iframe{display:block;width:100%;height:340px;border:0}
.comments-area{margin-top:52px}
.comments-area .comment-list,.comments-area .children{list-style:none;padding:0}
.comments-area .comment-list>li{border-bottom:1px solid var(--line);padding:18px 0}
.comments-area .children{padding-left:26px}
.comment-form label{
  display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.85rem;color:var(--muted);margin-bottom:6px;
}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line);background:#fff;font-size:.98rem;
}
@media (max-width:1024px){
  .with-sidebar{grid-template-columns:1fr}
}

/* 16. Final helpers --------------------------------------- */
.mb-40{margin-bottom:40px}
.quality-point--last{border-bottom:0;padding-bottom:0}
.page-builder-content{width:100%}
.page-builder-content>.container{width:auto}

/* 17. Contrast corrections (WCAG) ------------------------- */
/* Buttons: dark label on the safety-orange fill reads far better than white */
.btn{--btn-fg:var(--accent-ink)}
.btn--dark,.btn--ghost,.btn--whatsapp{--btn-fg:#fff}
.btn--light{--btn-fg:var(--ink)}
.product-card__badge{color:var(--accent-ink)}

/* Orange used as small text on light backgrounds */
.eyebrow,.link-arrow,.post-card__meta{color:var(--action)}
.field .req{color:var(--accent-strong)}
.eyebrow::before{background:var(--action)}
.contact-card svg{stroke:var(--action)}

/* …but lighten the blue on dark backgrounds */
.hero .eyebrow,.page-hero .eyebrow,.quality-band .eyebrow,.cta-band .eyebrow,
.section--dark .eyebrow,.section-head--light .eyebrow,
.section--dark .link-arrow,.section--dark .post-card__meta{color:var(--action-light)}
.hero .eyebrow::before,.page-hero .eyebrow::before,.quality-band .eyebrow::before,
.cta-band .eyebrow::before,.section--dark .eyebrow::before,.section-head--light .eyebrow::before{background:var(--action-light)}

/* Headings inside dark bands */
.quality-band h2,.section-head--light h2{color:#fff}

/* Text inside a white card that sits on a dark band */
.cta-band .form-card p,.cta-band .form-card .lead,.cta-band .form-card .form-consent{color:var(--muted)}
.form-card .btn--ghost{--btn-fg:var(--ink);--btn-bd:rgba(22,32,44,.3)}
.form-card .btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff;--btn-bd:var(--ink)}

/* Clip the off-canvas drawer without creating a scroll container,
   so the sticky header keeps working and mobile gets no sideways scroll */
html{overflow-x:clip}
body{overflow-x:clip;overflow-y:visible}

/* 18. Form fields must never inherit a light text colour --------------- */
.form-card,.form-card label,.form-card p{color:var(--text)}
.form-card .field label{color:var(--muted)}
.field input,.field select,.field textarea{color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:#6E7883;opacity:1}
.field select option{color:var(--text);background:#fff}

@media (max-width:640px){
  .float-actions{gap:10px}
  .float-btn{width:48px;height:48px}
}

/* 19. Re-theme corrections --------------------------------- */
/* This small label is reused across cards. Default to the readable blue for
   light surfaces and only switch to the bright variant where it sits on the
   dark photo overlay of the category card — so any new reuse stays legible. */
.cat-card__count{color:var(--action)}
.cat-card .cat-card__count{color:var(--action-bright)}

/* .section-head p would otherwise win over .eyebrow (higher specificity) and grey it out */
.section-head .eyebrow{color:var(--action)}
.section-head--light .eyebrow{color:var(--action-light)}
.section-head--light h2{color:#fff}
.quality-band .section-head p{color:rgba(255,255,255,.72)}

/* Stop menu and button labels from breaking onto a second line */
.nav-menu>li>a,.brand__name,.brand__tag,.btn,.chip{white-space:nowrap}

@media (max-width:1420px){
  .nav-menu>li>a{padding:12px 10px;font-size:.95rem;letter-spacing:.06em}
  .site-header__inner{gap:18px}
  .nav-actions{gap:10px}
}
@media (max-width:1280px){
  .nav-menu>li>a{padding:12px 8px;font-size:.9rem;letter-spacing:.04em}
  .topbar__list li:nth-child(3){display:none}
}

/* 20. Header search control -------------------------------- */
.nav-search-toggle{
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line-dark);color:#fff;background:none;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);
}
.nav-search-toggle svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.nav-search-toggle:hover{border-color:var(--accent);color:var(--accent);background:rgba(242,101,34,.12)}
.header-search{background:var(--brand-dark);border-top:1px solid var(--line-dark);padding:24px 0}
.header-search[hidden]{display:none}
.header-search .form-grid{grid-template-columns:1fr auto;align-items:end;gap:16px}
.header-search .field--full{grid-column:auto}
.header-search .form-actions{grid-column:auto;margin-top:0}
.header-search .field label{color:var(--muted-dark)}
@media (max-width:640px){
  .header-search .form-grid{grid-template-columns:1fr}
  .header-search .form-actions{width:100%}
}

/* 21. Catalogue filters ------------------------------------ */
.filter-panel{background:#fff;border:1px solid var(--line);margin-bottom:34px}
.filter-panel__bar{
  display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);
}
.filter-panel__title{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:1rem;color:var(--brand);
}
.filter-panel__count{font-size:.85rem;color:var(--muted);margin-left:auto}
.filter-panel__toggle{
  display:none;background:none;border:1px solid var(--line);padding:8px 14px;cursor:pointer;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--brand);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.filter-panel__body{padding:22px}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.filter-features{border:0;padding:0;margin:22px 0 0}
.filter-features legend{
  padding:0;margin-bottom:12px;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;font-size:.86rem;color:var(--muted);
}
.filter-features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px}
.filter-features .checkbox{display:flex;align-items:center;gap:9px;font-size:.94rem;cursor:pointer}
.filter-features .checkbox input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent)}
.filter-actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
}
.filter-actions .btn{padding:13px 22px;font-size:.96rem}
.filter-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.filter-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);
  padding:6px 12px;font-size:.82rem;color:var(--muted);transition:border-color .25s var(--ease),color .25s var(--ease);
}
.filter-chip span{color:var(--accent-strong);font-weight:600}
.filter-chip:hover{border-color:var(--brand);color:var(--brand)}

/* 22. Product page: video, documents, service strip -------- */
.video-embed{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}
.video-embed iframe,.video-embed img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-embed__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(242,101,34,.92);display:grid;place-items:center;
}
.video-embed__play svg{width:26px;height:26px;stroke:#141A20;fill:#141A20;margin-left:3px}
.video-embed__note{
  position:absolute;left:16px;bottom:14px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.download-gate{margin:0}
.download-gate .form-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.download-gate .form-actions{margin-top:16px}
.product-doc{
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--soft);padding:14px 16px;margin-bottom:18px;
}
.product-doc svg{width:22px;height:22px;flex:none;stroke:var(--brand);fill:none;stroke-width:1.6}
.product-doc strong{display:block;font-size:.95rem}
.product-doc span{font-size:.82rem;color:var(--muted)}
.service-strip{background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--accent);padding:22px 24px}
.service-strip ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.service-strip li{display:flex;align-items:flex-start;gap:11px;font-size:.95rem}
.service-strip svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--accent-strong);fill:none;stroke-width:1.7}
.service-strip ul:last-child{margin-bottom:0}

@media (max-width:900px){
  .filter-panel__toggle{display:inline-block}
  .filter-panel__body{display:none;padding:18px}
  .filter-panel.is-open .filter-panel__body{display:block}
  .filter-panel.is-open .filter-panel__toggle{background:var(--brand);border-color:var(--brand);color:#fff}
  .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .filter-grid{grid-template-columns:1fr}
  .filter-actions{flex-direction:column;align-items:stretch}
  .filter-actions .btn{width:100%}
}

/* 23. Factory stages & reply promise ----------------------- */
.factory-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.factory-step{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.factory-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--brand-2)}
.factory-step__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.factory-step__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.factory-step:hover .factory-step__media img{transform:scale(1.05)}
.factory-step__num{
  position:absolute;left:0;bottom:0;background:var(--accent);color:var(--accent-ink);padding:6px 13px;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.08em;
}
.factory-step h3{font-size:1.14rem;margin:18px 20px 8px}
.factory-step p{margin:0 20px 22px;font-size:.92rem;color:var(--muted)}

.form-promise{
  grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;margin:0;padding:11px 15px;
  background:rgba(27,107,176,.09);border-left:3px solid var(--action);
  font-size:.9rem;color:var(--brand);
}
.form-promise svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--action);fill:none;stroke-width:1.8}
/* .cta-band .form-card p would otherwise grey the promise line out inside dark bands */
.form-card .form-promise,.cta-band .form-card .form-promise{color:var(--brand)}
.form-card .form-promise svg,.cta-band .form-card .form-promise svg{stroke:var(--action)}

@media (max-width:1180px){
  .factory-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .factory-steps{grid-template-columns:1fr}
}

/* 24. Trust content: shipments, visits, videos, documents, certificates, reviews */
.case-card,.visit-card,.video-card,.certificate-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.case-card:hover,.visit-card:hover,.video-card:hover,.certificate-card:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--brand-2);
}
.case-card__media,.visit-card__media,.video-card__media,.certificate-card__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line);
}
.case-card__media img,.visit-card__media img,.video-card__media img,.certificate-card__media img{
  width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);
}
.case-card:hover .case-card__media img,.visit-card:hover .visit-card__media img,
.video-card:hover .video-card__media img,.certificate-card:hover .certificate-card__media img{transform:scale(1.05)}

.case-card__country{
  position:absolute;left:0;bottom:0;background:var(--brand);color:#fff;padding:6px 13px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;
}
.case-card__body,.visit-card__body,.video-card__body,.certificate-card__body{
  padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;
}
.case-card h3,.visit-card h3,.certificate-card h3{font-size:1.2rem;margin-bottom:8px}
.case-card h3 a:hover,.visit-card h3 a:hover,.video-card h3 a:hover,.certificate-card h3 a:hover{color:var(--action)}
.case-card__type,.certificate-card__issuer{font-size:.9rem;color:var(--muted);margin:0 0 14px}
.case-card .link-arrow{margin-top:auto}

.case-facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:0}
.case-facts li{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  border-bottom:1px solid var(--line);padding:8px 0;font-size:.9rem;
}
.case-facts span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.case-facts strong{font-weight:600;text-align:right}

.visit-card__meta{display:flex;gap:14px;margin-bottom:10px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--action)}
.visit-card__country{font-size:.88rem;color:var(--muted);margin:0 0 10px}
.visit-card p{font-size:.92rem;color:var(--muted);margin:0}

.video-card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(242,101,34,.92);display:grid;place-items:center;
}
.video-card__play svg{width:24px;height:24px;fill:#141A20;margin-left:3px}
.video-card__time{position:absolute;right:10px;bottom:10px;background:rgba(7,44,79,.88);color:#fff;font-size:.78rem;padding:4px 9px}
.video-card__body{padding:18px 22px 22px}
.video-card h3{font-size:1.1rem;margin:6px 0 0}

.rating{display:inline-flex;gap:3px}
.rating__star svg{width:17px;height:17px;fill:rgba(22,32,44,.16)}
.rating__star.is-on svg{fill:#E8A33D}
.review-card{background:#fff;border:1px solid var(--line);padding:28px 26px 24px;margin:0;display:flex;flex-direction:column}
.review-card blockquote{margin:14px 0 18px;font-size:1rem;line-height:1.7}
.review-card blockquote p{margin:0 0 12px}
.review-card blockquote p:last-child{margin:0}
.review-card__who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.review-card__photo{width:44px;height:44px;object-fit:cover;flex:none}
.review-card__product{display:block;font-size:.82rem;color:var(--muted);margin-top:4px}
.review-summary{
  display:flex;align-items:center;gap:22px;margin-bottom:34px;padding:22px 26px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
}
.review-summary__score{font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--brand)}
.review-summary__detail{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}

.document-list{display:grid;gap:16px}
.document-row{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);padding:20px 22px}
.document-row__icon svg{width:30px;height:30px;stroke:var(--brand);fill:none;stroke-width:1.5}
.document-row__body{flex:1}
.document-row h3{font-size:1.14rem;margin-bottom:6px}
.document-row h3 a:hover{color:var(--action)}
.document-row__label{font-size:.9rem;color:var(--muted);margin:0}
.document-row__meta{font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:6px 0 0}

.case-photos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.case-photos figure{margin:0}
.case-photos img{width:100%;border:1px solid var(--line)}
.case-photos figcaption{font-size:.84rem;color:var(--muted);margin-top:8px}

@media (max-width:900px){
  .case-photos{grid-template-columns:1fr}
}
@media (max-width:640px){
  .document-row{flex-direction:column;align-items:flex-start}
  .document-row .btn{width:100%}
  .review-summary{flex-direction:column;align-items:flex-start;gap:12px}
}