/* ============================================================
   MAHAKARYA EKSPOR INDONESIA - brand.css  (Light theme v2)
   Navy + Gold + Flag Red/White. Corporate-patriotic, premium.
   ============================================================ */
:root{
  --navy-900:#08203C; --navy:#0A2342; --navy-800:#0C2A4D; --navy-700:#14345A;
  --gold:#C9992F; --gold-600:#A97D22; --gold-300:#E7CE86; --gold-050:#F6EEDB;
  --red:#C1121F; --red-700:#96101A;
  --paper:#FFFFFF; --cream:#F8F4EC; --gray:#EEF1F5; --line:#E7E1D4;
  --ink:#25313F; --muted:#5E6B7D; --white:#fff;
  --font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-head:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --container:1220px; --radius:14px; --ease:cubic-bezier(.22,.61,.36,1);
  --site-header-height:84px;
  --shadow-sm:0 10px 30px -18px rgba(10,35,66,.35);
  --shadow:0 26px 60px -30px rgba(10,35,66,.40);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.08;margin:0 0 .45em;
  letter-spacing:-.015em;color:var(--navy)}
h1{font-size:clamp(2.5rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:700}
p{margin:0 0 1.1rem}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:26px}
.section{padding:clamp(66px,8vw,120px) 0;position:relative}
.section--cream{background:var(--cream)}
.section--gray{background:var(--gray)}
.section--navy{background:var(--navy);color:#D8E2F0}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.center{text-align:center}

/* ---- eyebrow, ornament, rule ---- */
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;
  color:var(--gold-600);display:inline-flex;align-items:center;gap:13px;margin:0 0 16px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--red)}
.eyebrow.center{justify-content:center}
.section--navy .eyebrow{color:var(--gold-300)}
.lead{font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--muted);max-width:60ch}
.section--navy .lead{color:#B9C6DA}
.ornament{display:flex;align-items:center;gap:12px;color:var(--gold)}
.ornament .line{height:2px;width:52px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament .line.r{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament svg{width:44px;height:14px;color:var(--gold)}
.ornament.center{justify-content:center}

/* ---- flag accent tag (Integritas | Kualitas ...) ---- */
.pillartag{display:inline-flex;flex-wrap:wrap;gap:8px 14px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;font-size:.74rem;color:var(--navy)}
.pillartag span{position:relative;padding-right:14px}
.pillartag span:not(:last-child)::after{content:"|";position:absolute;right:0;color:var(--gold);font-weight:400}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.82rem;letter-spacing:.05em;
  text-transform:uppercase;padding:15px 30px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  transition:.35s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn--gold{background:linear-gradient(135deg,var(--gold-300),var(--gold));color:var(--navy-900);border-color:var(--gold)}
.btn--gold:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(201,153,47,.7)}
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn--red{background:var(--red);color:#fff;border-color:var(--red)}
.btn--red:hover{background:var(--red-700);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--navy);border-color:rgba(10,35,66,.28)}
.btn--outline:hover{border-color:var(--gold);color:var(--gold-600)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{border-color:var(--gold-300);color:var(--gold-300)}
.btn:active{transform:translateY(1px) scale(.99)}
:focus-visible{outline:3px solid rgba(193,18,31,.55);outline-offset:3px}
.skip-link{position:fixed;left:18px;top:10px;z-index:100;transform:translateY(-150%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{transform:none}

/* ---- flag ribbon (corner decor) ---- */
.ribbon{position:absolute;pointer-events:none;z-index:0}
.ribbon svg{display:block}

/* ============================================================ HEADER */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:.4s var(--ease)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:14px 30px;max-width:1360px;margin-inline:auto}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:52px;width:auto}
.brand .wm b{font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.24rem;letter-spacing:.12em;
  display:block;line-height:1}
.brand .wm span{font-weight:700;color:var(--red);font-size:.58rem;letter-spacing:.34em;text-transform:uppercase}
.site-header.scrolled .brand .wm b{color:var(--navy)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-weight:600;font-size:.9rem;color:var(--navy);position:relative;padding:6px 0;opacity:.82;transition:.25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:.3s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{width:100%}
.nav a.active{opacity:1;color:var(--red)}.nav a.active::after{width:100%}
.header-actions{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;border:1px solid rgba(10,35,66,.2);border-radius:100px;overflow:hidden}
.lang button{background:none;border:0;color:var(--muted);font-family:var(--font-body);font-weight:700;font-size:.72rem;
  letter-spacing:.06em;padding:7px 12px;cursor:pointer;transition:.25s}
.lang button.active{background:var(--navy);color:#fff}
.site-header{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 8px 30px -20px rgba(10,35,66,.4);border-bottom-color:var(--line)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:26px;height:2px;background:var(--navy);margin:6px 0;transition:.3s}

/* ============================================================ HERO */
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:center;isolation:isolate;
  background:linear-gradient(160deg,#FFFFFF 0%,#F4F7FB 55%,#EFF3F8 100%);overflow:hidden}
.hero__map{position:absolute;inset:0;z-index:-2;background:center/115% no-repeat;opacity:.15;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 40%,transparent 80%);
          mask-image:radial-gradient(120% 90% at 60% 40%,#000 40%,transparent 80%)}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:150px;padding-bottom:90px;position:relative;z-index:1}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:8px 16px 8px 10px;font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);box-shadow:var(--shadow-sm);margin-bottom:22px}
.hero__eyebrow .flag{width:22px;height:14px;border-radius:2px;overflow:hidden;display:inline-block;flex:none}
.hero__eyebrow .flag i{display:block;height:50%}
.hero__eyebrow .flag i:first-child{background:var(--red)}.hero__eyebrow .flag i:last-child{background:#fff;border:1px solid #eee;border-top:0}
.hero h1{margin-bottom:.3em}
.hero h1 em{font-style:normal;color:var(--gold-600)}
.hero h1 .rd{color:var(--red)}
.hero .lead{margin-bottom:30px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.hero__stats{display:flex;gap:38px;flex-wrap:wrap}
.hero__stats .num{font-family:var(--font-head);font-weight:800;font-size:2.1rem;color:var(--navy);line-height:1}
.hero__stats .num b{color:var(--gold)}
.hero__stats .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:6px}
/* hero media collage */
.hero__media{position:relative}
.hero__media .main{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;aspect-ratio:4/3}
.hero__media .main img{width:100%;height:100%;object-fit:cover}
.hero__media .inset{position:absolute;right:-14px;bottom:-30px;width:44%;border-radius:14px;overflow:hidden;
  border:4px solid #fff;box-shadow:var(--shadow);aspect-ratio:4/3}
.hero__media .inset img{width:100%;height:100%;object-fit:cover}
.hero__media .chip{position:absolute;left:-22px;top:26px;background:#fff;border-radius:12px;padding:14px 18px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;z-index:2}
.hero__media .chip svg{width:26px;height:26px;color:var(--gold)}
.hero__media .chip b{display:block;font-weight:800;color:var(--navy);font-size:1.1rem;line-height:1}
.hero__media .chip span{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.hero__media .gold-frame{position:absolute;inset:-14px -14px auto auto;width:70%;height:70%;
  border:2px solid var(--gold);border-radius:20px;z-index:-1;top:-14px}

/* ============================================================ PILLARS */
.pillars-grid{display:grid;grid-template-columns:1.35fr .9fr .9fr;gap:24px;margin-top:8px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
  box-shadow:var(--shadow-sm);transition:.4s var(--ease);position:relative;overflow:hidden}
.pcard::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:linear-gradient(90deg,var(--gold),var(--red));transition:.5s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard:hover::before{width:100%}
.pcard .ic{width:60px;height:60px;border-radius:16px;background:linear-gradient(145deg,#fff,var(--gold-050));border:1px solid rgba(201,154,70,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 24px rgba(10,35,66,.08);display:grid;place-items:center;margin-bottom:22px;color:var(--navy);transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.pcard .ic i{font-size:1.75rem;line-height:1}
.pcard:hover .ic{transform:translateY(-2px);background:var(--navy);border-color:var(--navy);color:var(--gold-300)}
.pcard h3{color:var(--navy);margin-bottom:.4em}
.pcard p{color:var(--muted);font-size:.95rem;margin:0}

/* ============================================================ SPLIT (about/quality) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,6vw,84px);align-items:center}
.split__media{position:relative}
.split__media .frame{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;aspect-ratio:4/5}
.split__media .frame img{width:100%;height:100%;object-fit:cover}
.split__media .goldline{position:absolute;inset:auto -16px -16px auto;width:60%;height:55%;border:2px solid var(--gold);border-radius:20px;z-index:-1}
.split__media .badge{position:absolute;left:-20px;bottom:26px;background:var(--navy);color:#fff;border-radius:14px;
  padding:18px 22px;box-shadow:var(--shadow);max-width:210px}
.split__media .badge b{font-family:var(--font-head);font-weight:800;font-size:1.8rem;display:block;line-height:1;color:var(--gold-300)}
.split__media .badge span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#C6D2E2}
.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip-v{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:9px 17px;font-weight:700;font-size:.82rem;color:var(--navy)}
.chip-v::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ============================================================ COMMODITIES */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;margin-bottom:44px;flex-wrap:wrap}
.commodity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.commodity{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.4s var(--ease);display:flex;flex-direction:column}
.commodity:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold-300)}
.commodity__img{aspect-ratio:4/3;overflow:hidden;position:relative}
.commodity__img img{width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.commodity:hover .commodity__img img{transform:scale(1.07)}
.commodity__img .cat{position:absolute;left:12px;top:12px;background:rgba(193,18,31,.94);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.commodity__img .cat{display:none}
.commodity-category,.catalog-category{display:block;color:var(--gold-600);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.commodity__body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column}
.commodity__body h3{color:var(--navy);font-size:1.18rem;margin-bottom:5px}
.commodity__body p{color:var(--muted);font-size:.85rem;margin:0 0 16px}
.commodity__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--gold-600)}
.commodity__go svg{width:15px;height:15px;transition:.3s var(--ease)}
.commodity:hover .commodity__go svg{transform:translateX(4px)}

/* ============================================================ LOGISTICS (navy band) */
.logi{position:relative;overflow:hidden}
.logi__map{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;opacity:.15;
  filter:brightness(3) grayscale(1)}
.logi .container{position:relative;z-index:1}
.logi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:12px}
.logi-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  overflow:hidden;transition:.4s var(--ease)}
.logi-card:hover{transform:translateY(-5px);border-color:var(--gold-300)}
.logi-card__img{aspect-ratio:16/10;overflow:hidden}
.logi-card__img img{width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.logi-card:hover .logi-card__img img{transform:scale(1.06)}
.logi-card__b{padding:22px 24px}
.logi-card__b .k{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.05rem}
.logi-card__b .k svg{width:22px;height:22px;color:var(--gold-300)}
.logi-card__b p{color:#AEBED2;font-size:.88rem;margin:.5em 0 0}
.logi-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;
  border-top:1px solid rgba(255,255,255,.12);padding-top:40px}
.logi-stats .n{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);color:#fff;line-height:1}
.logi-stats .n b{color:var(--gold-300)}
.logi-stats .t{color:#AEBED2;font-size:.82rem;margin-top:6px}

/* ============================================================ QUALITY */
.check-list{list-style:none;margin:22px 0 0;padding:0}
.check-list li{position:relative;padding:13px 0 13px 40px;border-bottom:1px solid var(--line)}
.check-list li b{display:block;color:var(--navy);font-weight:700;font-size:1rem}
.check-list li span{color:var(--muted);font-size:.9rem}
.check-list li::before{content:"";position:absolute;left:2px;top:18px;width:22px;height:22px;border-radius:50%;
  background:var(--gold-050)}
.check-list li::after{content:"";position:absolute;left:9px;top:23px;width:8px;height:4px;
  border-left:2px solid var(--gold-600);border-bottom:2px solid var(--gold-600);transform:rotate(-45deg)}

/* ============================================================ ORIGINS */
.origins{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.origin{border:1px solid var(--line);background:#fff;border-radius:100px;padding:10px 20px;font-size:.9rem;font-weight:500;
  box-shadow:var(--shadow-sm)}
.origin b{color:var(--navy);font-weight:700}
.origin i{font-style:normal;color:var(--gold-600)}

/* ============================================================ CTA band */
.cta-band{position:relative;color:#fff;isolation:isolate;text-align:center;overflow:hidden}
.cta-band__bg{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat}
.cta-band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,25,48,.86),rgba(8,25,48,.92))}
.cta-band .inner{padding:clamp(70px,10vw,120px) 0;position:relative;z-index:1}
.cta-band h2{color:#fff;max-width:18ch;margin-inline:auto}
.cta-band .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ============================================================ FOOTER */
.footer{background:var(--navy-900);color:#9FB0C6;padding:76px 0 28px}
.footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:46px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand .wm b{color:#fff}.footer .brand .wm span{color:var(--gold-300)}
.footer .about{max-width:34ch;font-size:.92rem;margin:20px 0}
.footer .tag{color:var(--gold-300);font-weight:600;font-style:italic}
.footer h5{color:#fff;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:11px;font-size:.92rem}
.footer a:hover{color:var(--gold-300)}
.footer .todo{color:var(--gold-300);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(231,206,134,.4);border-radius:4px;padding:1px 6px;margin-left:4px}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:.82rem}
.footer .pillartag{color:inherit}

/* ============================================================ reveal */
[data-reveal]{opacity:0;transform:translateY(24px);transition:.9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ============================================================ RESPONSIVE */
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr;gap:40px;padding-top:130px}
  .hero__inner>*{min-width:0}
  .hero__media{max-width:560px}
  .pillars-grid{grid-template-columns:1fr}
  .commodity-grid{grid-template-columns:repeat(2,1fr)}
  .logi-grid{grid-template-columns:1fr}
  .logi-stats{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:1320px){
  .nav{display:none}.burger{display:block}
}
@media(max-width:1180px){
  .header-actions .btn{display:none}
}
@media(max-width:820px){
  .nav,.header-actions .btn{display:none}
  .burger{display:block}
  .split{grid-template-columns:1fr}
  .split__media{max-width:520px}
}
@media(max-width:560px){
  body{font-size:16px}
  .hero h1{font-size:clamp(2.15rem,10vw,2.45rem)}
  .hero .lead{max-width:100%}
  .commodity-grid{grid-template-columns:1fr}
  .logi-stats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .hero__media .inset{position:static;width:100%;margin-top:14px}
  .hero__media .chip{display:none}
}
/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:70;background:rgba(255,255,255,.98);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px;transform:translateX(100%);transition:.4s var(--ease)}
.mobile-menu.open{transform:none}
.mobile-menu a{color:var(--navy);font-weight:700;font-size:1.5rem;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-menu .close{position:absolute;top:22px;right:24px;background:none;border:0;color:var(--navy);font-size:2rem;cursor:pointer}
.mobile-menu .lang{align-self:flex-start;margin-top:18px}

/* ============================================================ CONTACT SALES WIDGET */
.contact-widget{position:fixed;right:24px;bottom:24px;z-index:65;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.contact-widget__trigger{min-height:52px;border:0;border-radius:999px;background:var(--navy);color:#fff;box-shadow:0 14px 34px rgba(10,35,66,.25);padding:0 20px;display:flex;align-items:center;gap:10px;font:700 .82rem var(--font-body);cursor:pointer;transition:transform .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease);pointer-events:auto}
.contact-widget__trigger i{font-size:1.12rem;color:var(--gold-300)}
.contact-widget__trigger:hover{background:var(--navy-700);transform:translateY(-2px);box-shadow:0 18px 38px rgba(10,35,66,.3)}
.contact-widget__trigger:active{transform:translateY(1px) scale(.98)}
.contact-widget--product .contact-widget__trigger{display:none}
.contact-widget__panel{width:min(410px,calc(100vw - 32px));max-height:min(650px,calc(100dvh - 96px));overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 58px rgba(10,35,66,.2);padding:18px;opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transform-origin:bottom right;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.contact-widget.open .contact-widget__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.contact-widget__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:2px 2px 14px;border-bottom:1px solid var(--line)}
.contact-widget__head b{display:block;color:var(--navy);font-size:1rem}.contact-widget__head span{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}
.contact-widget__close{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:#f1f4f7;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.contact-widget__close:hover{background:var(--navy);color:#fff}
.contact-widget__context{display:flex;align-items:center;gap:7px;margin:13px 0 0;padding:9px 11px;border-radius:10px;background:var(--gold-050);color:var(--navy);font-size:.7rem;text-transform:capitalize}.contact-widget__context[hidden]{display:none}.contact-widget__context i{color:var(--gold-600)}.contact-widget__context span{color:var(--muted)}.contact-widget__context b{margin-left:auto}.contact-widget--insight .contact-widget__context{align-items:flex-start;text-transform:none}.contact-widget--insight .contact-widget__context b{max-width:62%;text-align:right;line-height:1.35}
.contact-widget__form{padding-top:14px}.contact-widget__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-widget__field{margin-bottom:11px}.contact-widget__field label{display:block;margin-bottom:5px;color:var(--navy);font:700 .69rem var(--font-body)}
.contact-widget__field input,.contact-widget__field textarea{width:100%;border:1px solid #cbd4dd;border-radius:9px;background:#fff;color:var(--navy);font:500 .78rem/1.5 var(--font-body);padding:10px 11px;outline:0;transition:border-color .2s,box-shadow .2s}.contact-widget__field textarea{min-height:98px;resize:vertical}.contact-widget__field input:focus,.contact-widget__field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,35,66,.11)}.contact-widget__field .is-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(193,18,31,.09)}.contact-widget__field small{display:block;min-height:14px;margin-top:3px;color:var(--red);font-size:.62rem}
.contact-widget__submit{width:100%;min-height:46px;border:0;border-radius:9px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font:700 .78rem var(--font-body);cursor:pointer;transition:background .2s,transform .2s}.contact-widget__submit:hover{background:#9f0e19}.contact-widget__submit:active{transform:translateY(1px) scale(.99)}
.contact-widget__status{min-height:16px;margin:7px 0 0;color:var(--navy);font-size:.66rem;text-align:center}.contact-widget__full-link{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:13px 2px 0;color:var(--navy);font:700 .67rem var(--font-body)}.contact-widget__full-link i{color:var(--gold-600);transition:transform .2s}.contact-widget__full-link:hover{color:var(--red)}.contact-widget__full-link:hover i{transform:translateX(3px)}
@media(max-width:560px){.contact-widget{right:16px;bottom:16px;left:16px}.contact-widget__trigger{width:100%;justify-content:center}.contact-widget__panel{width:100%;max-height:calc(100dvh - 88px)}.contact-widget__row{grid-template-columns:1fr}.contact-widget__field{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.contact-widget__trigger,.contact-widget__panel,.contact-widget__submit,.contact-widget__full-link i{transition:none}}

/* ============================================================ CANVAS INTEGRATION OVERRIDES
   Canvas (Bootstrap) style.css loads before brand.css and injects a teal theme
   (--cnvs-themecolor:#1abc9c) plus a rule that auto-colors every heading > span,
   which was turning our red accent (.rd) teal site-wide. Remap the theme to the
   brand and stop the heading-span theming. */
:root{--cnvs-themecolor:#C1121F;--cnvs-themecolor-rgb:193,18,31;--bs-link-color:#0A2342;--bs-link-color-rgb:10,35,66;--bs-link-hover-color:#C1121F}
h1>span:not(.nocolor):not(.badge),h2>span:not(.nocolor):not(.badge),h3>span:not(.nocolor):not(.badge),
h4>span:not(.nocolor):not(.badge),h5>span:not(.nocolor):not(.badge),h6>span:not(.nocolor):not(.badge){color:inherit}
.hero h1 span.rd{color:var(--red)}

/* Mobile header: emblem-only brand so the wordmark cannot collide with the language toggle */
@media(max-width:600px){
  :root{--site-header-height:71px}
  .site-header .bar{padding:12px 18px;gap:12px}
  .brand .wm{display:none}
  .brand img{height:46px}
}

/* Quieter placeholder markers: a client-facing annotation, not audience noise */
.todo,.footer .todo{color:#8593a4;background:transparent;border:0;padding:0;margin-left:6px;
  font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.5}

/* Badge wrap fix (our .badge collides with Bootstrap .badge white-space:nowrap) */
.split__media .badge{white-space:normal;max-width:232px}
.split__media .badge b{margin-bottom:2px}
.split__media .badge span{display:block;white-space:normal;line-height:1.42;font-size:.66rem;letter-spacing:.09em}

/* Our header carries id="header", colliding with Canvas's #header component
   (Canvas sets #header{position:relative}, which beat our .site-header and made the
   header scroll away). Re-assert with matching ID specificity, plus a touch more opacity
   so the sticky section-nav below it never shows a content sliver. */
#header.site-header{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(255,255,255,.94)}
#header.site-header.scrolled{background:rgba(255,255,255,.98)}

/* Back-to-top button (injected by main.js on every page) */
.back-to-top{position:fixed;left:24px;bottom:24px;z-index:64;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--navy);color:var(--gold-300);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 12px 30px rgba(10,35,66,.28);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s,visibility .3s}
.back-to-top svg{width:20px;height:20px}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--navy-700);transform:translateY(-3px)}
.back-to-top:active{transform:translateY(0) scale(.96)}
@media(max-width:560px){.back-to-top{left:16px;bottom:86px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* ============================================================ POST-CANVAS BASE
   Canvas style.css (Bootstrap Reboot + theme) has been removed. Keep a minimal
   reset so form controls inherit the brand font and lists/tables behave. */
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer;background:transparent;border:0;padding:0;line-height:inherit}
table{border-collapse:collapse}
/* Canvas helper classes we relied on, redefined locally */
.bg-soft{background:#f3f6fa}
.bg-navy{background:var(--navy);color:#D8E2F0}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy p{color:#c2cedc}

/* ============================================================ SELECTIVE GLASS
   Web glassmorphism approximation. Glass is reserved for floating navigation,
   contextual overlays, and dark commercial panels. Product and specification
   cards stay solid so photography and procurement detail remain easy to scan. */
:root{
  --glass-light:rgba(248,251,255,.78);
  --glass-light-strong:rgba(252,253,255,.88);
  --glass-dark:rgba(8,32,60,.78);
  --glass-navy-surface:linear-gradient(135deg,rgba(10,35,66,.82),rgba(20,52,90,.72));
  --glass-navy-surface-hover:linear-gradient(135deg,rgba(10,35,66,.90),rgba(20,52,90,.82));
  --glass-border:rgba(255,255,255,.72);
  --glass-border-dark:rgba(255,255,255,.18);
  --glass-blur:blur(16px) saturate(128%) contrast(1.02);
  --glass-shadow:0 18px 50px -34px rgba(10,35,66,.48),inset 0 1px 0 rgba(255,255,255,.78);
  --glass-shadow-float:0 26px 64px -34px rgba(10,35,66,.52),inset 0 1px 0 rgba(255,255,255,.72);
  --glass-light-fallback:linear-gradient(145deg,#fff 0%,#eef3f8 100%);
  --glass-navy-fallback:linear-gradient(145deg,#173d65 0%,#0a2342 72%,#08203c 100%);
  --glass-fallback-shadow:0 18px 46px -30px rgba(10,35,66,.58),inset 0 1px 0 rgba(255,255,255,.56),inset 0 -1px 0 rgba(10,35,66,.08);
}

/* Material fallback is the baseline. Native blur enhances it when available,
   while older browsers still retain depth, edge light, and tonal separation. */
#header.site-header,nav.section-nav,.hero__eyebrow,.hero__media .chip,.contact-widget__panel,.mobile-menu{
  background:var(--glass-light-fallback);border-color:rgba(255,255,255,.9);box-shadow:var(--glass-fallback-shadow)}
.btn--navy,.split__media .badge,.contact-widget__trigger,.back-to-top{
  background:var(--glass-navy-fallback);border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 42px -24px rgba(10,35,66,.7),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12)}
.logi-card{
  background:linear-gradient(145deg,#1b446e,#102b49);border-color:rgba(255,255,255,.17);
  box-shadow:0 22px 48px -32px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.18)}

/* A quiet cool canvas gives the glass depth without aurora-style blobs. */
body{background:linear-gradient(155deg,#edf2f7 0%,#f8f7f3 48%,#edf2f7 100%)}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 8% 4%,rgba(201,153,47,.13),transparent 64%),
    radial-gradient(48vw 48vw at 96% 10%,rgba(10,35,66,.14),transparent 66%),
    radial-gradient(44vw 44vw at 86% 96%,rgba(193,18,31,.075),transparent 68%);}
.section--cream{background:rgba(248,244,236,.82)}
.section--gray{background:rgba(238,241,245,.78)}
.bg-soft{background:rgba(243,246,250,.76)}

@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  #header.site-header{
    background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(246,249,253,.68));
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
  #header.site-header.scrolled{background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,249,253,.78))}
  nav.section-nav{
    background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(245,248,252,.70));
    -webkit-backdrop-filter:blur(14px) saturate(124%);backdrop-filter:blur(14px) saturate(124%);
    border-bottom:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
  .hero__eyebrow{
    background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(247,249,252,.66));
    -webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);
    border-color:var(--glass-border);box-shadow:var(--glass-shadow)}
  .hero__media .chip{
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(245,248,252,.68));
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-float)}
  .btn--navy,.split__media .badge,.contact-widget__trigger,.back-to-top{
    background:var(--glass-navy-surface);
    -webkit-backdrop-filter:blur(14px) saturate(138%) contrast(1.02);
    backdrop-filter:blur(14px) saturate(138%) contrast(1.02);
    box-shadow:0 18px 42px -24px rgba(10,35,66,.66),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.07)}
  .btn--navy{border-color:rgba(255,255,255,.28)}
  .split__media .badge,.contact-widget__trigger,.back-to-top{border:1px solid rgba(255,255,255,.24)}
  .btn--navy:hover,.contact-widget__trigger:hover,.back-to-top:hover{
    background:var(--glass-navy-surface-hover);
    box-shadow:0 22px 46px -24px rgba(10,35,66,.74),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.08)}
  .contact-widget__panel{
    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(245,248,252,.78));
    -webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);
    border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-float)}
  .contact-widget__trigger{
    border-color:rgba(255,255,255,.24)}
  .mobile-menu{
    background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(240,245,250,.86));
    -webkit-backdrop-filter:blur(18px) saturate(124%);backdrop-filter:blur(18px) saturate(124%)}
  .logi-card{
    background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055));
    -webkit-backdrop-filter:blur(12px) saturate(116%);backdrop-filter:blur(12px) saturate(116%);
    border:1px solid var(--glass-border-dark);box-shadow:0 22px 48px -32px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.16)}
}

@media(max-width:620px){
  :root{--glass-blur:blur(12px) saturate(118%)}
  body::before{opacity:.7}
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .contact-widget__panel{-webkit-backdrop-filter:blur(12px) saturate(118%);backdrop-filter:blur(12px) saturate(118%)}
  }
}
@media(prefers-reduced-transparency:reduce){
  body::before{display:none}
  .section--cream{background:var(--cream)}.section--gray{background:var(--gray)}.bg-soft{background:#f3f6fa}
  #header.site-header{background:var(--glass-light-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
  nav.section-nav,.hero__eyebrow,.hero__media .chip,.contact-widget__panel,.mobile-menu{-webkit-backdrop-filter:none;backdrop-filter:none}
  nav.section-nav,.hero__eyebrow,.hero__media .chip,.contact-widget__panel,.mobile-menu{background:var(--glass-light-fallback);box-shadow:var(--glass-fallback-shadow)}
  .btn--navy,.split__media .badge,.contact-widget__trigger,.back-to-top{
    background:var(--glass-navy-fallback);-webkit-backdrop-filter:none;backdrop-filter:none}
  .logi-card{background:linear-gradient(145deg,#1b446e,#102b49);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* JS mirrors the feature query so the compatibility path can be tested and
   still works in browsers with partial or disabled filter implementations. */
html.glass-fallback #header.site-header,
html.glass-fallback nav.section-nav,
html.glass-fallback .hero__eyebrow,
html.glass-fallback .hero__media .chip,
html.glass-fallback .contact-widget__panel,
html.glass-fallback .mobile-menu{
  background:var(--glass-light-fallback);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.9);box-shadow:var(--glass-fallback-shadow)}
html.glass-fallback .btn--navy,
html.glass-fallback .split__media .badge,
html.glass-fallback .contact-widget__trigger,
html.glass-fallback .back-to-top{
  background:var(--glass-navy-fallback);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 42px -24px rgba(10,35,66,.7),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12)}
html.glass-fallback .logi-card{
  background:linear-gradient(145deg,#1b446e,#102b49);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.17)}
html.glass-reduced #header.site-header,
html.glass-reduced nav.section-nav,
html.glass-reduced .hero__eyebrow,
html.glass-reduced .hero__media .chip,
html.glass-reduced .contact-widget__panel,
html.glass-reduced .mobile-menu{
  background:var(--glass-light-fallback);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.9);box-shadow:var(--glass-fallback-shadow)}
html.glass-reduced .btn--navy,
html.glass-reduced .split__media .badge,
html.glass-reduced .contact-widget__trigger,
html.glass-reduced .back-to-top{
  background:var(--glass-navy-fallback);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 42px -24px rgba(10,35,66,.7),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12)}
html.glass-reduced .logi-card{
  background:linear-gradient(145deg,#1b446e,#102b49);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(255,255,255,.17)}

/* WhatsApp quick action in Contact Sales widget */
.contact-widget__wa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:11px;border-radius:9px;background:#25D366;color:#fff;font:700 .76rem var(--font-body);text-decoration:none;transition:background .2s}
.contact-widget__wa i{font-size:1.05rem}
.contact-widget__wa:hover{background:#1eb457}