/* ==========================================================================
   WS Chemicals — Global Styles (clean, accessible, performant)
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* Brand */
  --brand:#0064af;
  --brand-900:#00508c;

  /* Text & surfaces */
  --ink:#333; --muted:#666; --bg:#fff; --line:#e0e0e0;

  /* Effects */
  --shadow-1: 0 6px 18px rgba(0,0,0,.06);
  --shadow-2: 0 10px 26px rgba(0,0,0,.18);
  --shadow-3: 0 12px 28px rgba(0,0,0,.26);

  /* Layout */
  --container:1440px;
  --hero-h:520px;
  --radius:12px;
}

/* ---------- Resets & base ----------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
h1,h2,h3{font-family:"Comfortaa","Open Sans",sans-serif; margin:0}
.container{max-width:var(--container); padding:0 40px; margin:0 auto}
.section{padding:56px 0}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* ---------- Topbar (depth + premium chips) ------------------------------ */
.topbar{
  position:relative;
  background:#234e70; /* fallback */
  background:linear-gradient(180deg,#234e70 0%,#1f4466 100%);
  color:#fff; font-size:14px;
}
.topbar::before,.topbar::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.topbar::before{top:0;height:1px;background:rgba(255,255,255,.06)}
.topbar::after{bottom:-1px;height:1px;background:rgba(0,0,0,.14)}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.topbar .dot{display:none}

/* “Chips” on the left (email/company/phone) */
.topbar__left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta-chip{
  display:inline-flex;align-items:center;gap:8px;line-height:1;
  color:#fff;font-weight:600;padding:6px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.meta-chip:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.12));
  box-shadow:0 8px 24px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.3);
}
.meta-chip a{color:inherit;text-decoration:none}
.meta-chip::before{
  content:"";width:16px;height:16px;background:currentColor;opacity:.95;
  -webkit-mask:var(--mask) no-repeat 50% 50%/contain; mask:var(--mask) no-repeat 50% 50%/contain;
}
.meta-chip[data-ico="mail"]{--mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>')}
.meta-chip[data-ico="company"]{--mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 21V3h8v4h10v14H3Zm2-2h6V5H5v14Zm8 0h6V9h-6v10Z"/></svg>')}
.meta-chip[data-ico="phone"]{--mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.31.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.3 22 2 13.7 2 3a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1c0 1.27.2 2.47.57 3.58a1 1 0 0 1-.24 1.01l-2.2 2.2Z"/></svg>')}
.meta-chip[data-copied="1"]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}

/* Language chip right-aligned */
.topbar .lang{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar .lang .slash{display:none}
.topbar .lang .lang__item{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  color:#fff;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.topbar .lang .lang__item.active{
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-900) 100%);
  box-shadow:var(--shadow-2), inset 0 0 0 1px rgba(255,255,255,.12);
}
.topbar .lang .lang__item:hover{transform:translateY(-1px)}

/* Tiny, gentle bob animation (disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  @keyframes bobY{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
  .topbar .meta-chip{animation:bobY 7s ease-in-out infinite}
}

/* ---------- Sticky header (floating on scroll) -------------------------- */
.main-header{
  position:sticky; top:0; z-index:30;
  background:#fff; border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background-color .25s ease, backdrop-filter .25s ease;
  will-change:box-shadow, backdrop-filter, background-color;
}
.main-header.elevated{
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
}
.header-row{display:flex;align-items:center;gap:24px;padding:14px 0}
.logo img{height:52px;display:block}

/* Nav “chips” */
.main-nav{display:flex;gap:6px;flex:1;align-items:center}
.main-nav > a, .main-nav > .has-submenu > a{
  position:relative;text-decoration:none;color:var(--ink);font-weight:600;
  padding:10px 14px;border-radius:8px;transition:color .15s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.main-nav > a:hover, .main-nav > .has-submenu > a:hover{color:var(--brand);transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,100,175,.18)}
.main-nav > a.active{
  background:linear-gradient(180deg,var(--brand) 0%, var(--brand-900) 100%);
  color:#fff!important; box-shadow:var(--shadow-2);
}

/* Dropdown */
.has-submenu{position:relative}
.submenu{
  position:absolute;top:100%;left:0;min-width:260px;background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.04);
  padding:8px;display:none;
}
.submenu.wide{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;min-width:440px}
.submenu a{display:block;text-decoration:none;color:var(--ink);padding:10px 12px;border-radius:8px}
.submenu a:hover{background:#f5f7fb;color:var(--brand)}
.submenu.open,.has-submenu:hover .submenu{display:grid}

/* Search */
.search{position:relative;flex:0 0 320px;display:flex;align-items:center}
.search input{
  width:100%;height:40px;padding:0 44px 0 16px;border:1px solid #ddd;border-radius:999px;font-size:14px;color:var(--brand)
}
.search input::placeholder{color:var(--brand)}
.search button{position:absolute;right:6px;height:28px;width:28px;border:0;cursor:pointer;background:transparent;display:grid;place-items:center}

/* Base (you already have these) */
.search{position:relative;flex:0 0 320px;display:flex;align-items:center}
.search input{
  width:100%;height:40px;padding:0 92px 0 16px;border:1px solid #ddd;border-radius:999px;
  font-size:14px;color:var(--brand);background:#fff;outline:0;transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{color:var(--brand)}
.search button{position:absolute;border:0;cursor:pointer;background:transparent;display:grid;place-items:center}

/* Premium chrome */
:root{
  --ring: rgba(32,132,255,.18);
  --panel: #fff;
  --ink: #0f172a;
  --muted: #64748b;
  --shadow: 0 10px 30px rgba(2,6,23,.12), 0 2px 8px rgba(2,6,23,.06);
}
.search.premium input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Buttons */
.icon-btn{top:6px;height:28px;width:28px;color:var(--brand);opacity:.9}
.search-btn{right:8px}
.clear-btn{right:44px;display:none}
.mic-btn{right:72px}

.search.premium[data-dirty="true"] .clear-btn{display:grid}
.search.premium[data-loading="true"] .search-btn svg{opacity:0}
.search.premium[data-loading="true"] .spinner{display:block}
.spinner{display:none;position:absolute;inset:0;margin:auto;height:18px;width:18px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Panel */
.search-panel{
  position:absolute;top:46px;right:0;left:0;z-index:50;
  background:var(--panel);border:1px solid #e5e7eb;border-radius:16px;padding:12px;
  box-shadow: var(--shadow);display:none;
}
.search.premium[data-open="true"] .search-panel{display:block}

.panel-section{padding:8px 8px 10px}
.panel-section + .panel-section{border-top:1px dashed #e5e7eb}
.panel-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:2px 6px 8px}

.pill-row,.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:#f8fafc;color:#0b1324;
  font-size:12px;line-height:1;cursor:pointer;transition:transform .05s;
}
.pill:active{transform:translateY(1px)}

.suggestions{list-style:none;margin:0;padding:0;max-height:270px;overflow:auto}
.suggestions li{
  display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;cursor:pointer;
}
.suggestions li:hover,.suggestions li.is-active{background:#f5f7fb}
.suggestions .tag{font-size:11px;color:#334155;background:#eef2ff;border:1px solid #e0e7ff;border-radius:6px;padding:2px 6px}
.suggestions .meta{margin-left:auto;font-size:12px;color:#64748b}

.panel-footer{padding:8px 10px 2px;font-size:12px;color:#64748b;display:flex;gap:12px}
.panel-footer span{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:2px 6px}

/* Mobile: sheet-style */
@media (max-width: 900px){
  .search{flex:1}
  .search-panel{position:fixed;left:12px;right:12px;top:64px;max-height:70vh;overflow:auto}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none}
}


/* Mobile nav */
.hamburger{display:none;background:transparent;border:0;padding:8px;margin-left:auto;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0}
.mobile-nav{display:flex;flex-direction:column;padding:8px 40px 16px;gap:6px;border-top:1px solid var(--line)}
.mobile-nav a{text-decoration:none;color:var(--ink);padding:10px 12px;border-radius:8px}
.mobile-nav a.active{background:var(--brand);color:#fff}
.mobile-submenu{display:grid;padding:4px 0 10px 10px}
#mobile-menu[hidden]{display:none !important}
@media (min-width:901px){#mobile-menu{display:none !important}}
/* Carousel (fade) */
.carousel{position:relative; height:var(--hero-h); overflow:hidden; background:#0b2942}
.carousel .carousel__stage{position:relative; height:100%}
.fade-carousel .slide{position:absolute; inset:0; opacity:0; transform:scale(1.005); transition:opacity .8s ease, transform .8s ease; will-change:opacity, transform}
.fade-carousel .slide.is-active{opacity:1; transform:scale(1)}
.fade-carousel .slide img{width:100%; height:100%; object-fit:cover; display:block; animation:kenburns 6s linear forwards}
@keyframes kenburns{0%{transform:scale(1.03)}100%{transform:scale(1.08)}}
.banner-description{position:absolute; inset:auto 0 40px 0; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35)}
.banner-name{font-size:clamp(28px,4vw,44px); font-weight:700; margin-bottom:12px}
.banner-name a{color:#fff; text-decoration:none}
.moreBtn{display:inline-block; font-weight:700; text-decoration:none; padding:10px 20px; border-radius:999px; border:2px solid #fff; color:#fff; background:var(--brand)} .moreBtn:hover{background:var(--brand-900)}
.carousel__dots{position:absolute; left:0; right:0; bottom:14px; display:flex; gap:8px; justify-content:center}
.dot{width:10px; height:10px; border-radius:50%; border:2px solid #fff; background:transparent; opacity:.8; cursor:pointer} .dot.active,.dot:hover{background:#fff}



/* ===== Hero (premium polish) =========================================== */

/* Soft vignette + bottom gradient so text always reads */
.carousel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 85%),
    linear-gradient(180deg, rgba(11,41,66,0) 0%, rgba(11,41,66,.45) 85%, rgba(11,41,66,.75) 100%);
}

/* Frosted glass card for the headline/button */
.banner-description{
  max-width: 680px;
  margin-left: 24px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
}
.banner-name{ text-shadow:0 2px 10px rgba(0,0,0,.45) }
.moreBtn{ border-color:rgba(255,255,255,.9) }

/* Hero nav paddles (auto-injected by JS) */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.16);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hero-nav:hover{ transform:translateY(-50%) scale(1.03); background:rgba(255,255,255,.24); box-shadow:0 12px 26px rgba(0,0,0,.28) }
.hero-nav.prev{ left:16px }
.hero-nav.next{ right:16px }

/* Dots spacing + progress bar */
.carousel__dots{ bottom:16px; gap:12px }
.carousel__dots .dot{ width:10px; height:10px; border-width:2px }

.hero-progress{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:8px; width:160px; height:3px; border-radius:999px;
  background:rgba(255,255,255,.28); overflow:hidden; pointer-events:none;
}
.hero-progress > span{ display:block; width:0; height:100%; background:#fff }
@keyframes heroFill{ from{width:0} to{width:100%} }
.hero-progress.play > span{ animation: heroFill var(--dur,5200ms) linear forwards }

/* Optional: tiny parallax on mouse move (won’t run for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .fade-carousel .slide.is-active img.parallax{ will-change: transform }
}


/* Cards, grids */
.info-cta{display:grid; grid-template-columns:2fr 1fr; gap:26px; align-items:start}
.info-card,.cta-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:0 6px 18px rgba(0,0,0,.04)}
.info-card h3,.cta-card h3{color:var(--brand); margin-bottom:12px}
.quick-links{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.quick-links li{display:flex; align-items:center; gap:8px}
.quick-links a{color:var(--ink); text-decoration:none} .quick-links a:hover{color:var(--brand)} .quick-links .arrow{color:var(--brand); font-weight:700}
.cta-card p{margin:8px 0 14px}

/* Products grid */
.products h2{color:var(--brand); margin-bottom:18px}
.prod-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.prod{border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.04)}
.prod .image{display:block; aspect-ratio:1/1; background:#f7f7f7} .prod img{width:100%; height:100%; object-fit:cover; display:block}
.prod .title{display:block; padding:12px; text-decoration:none; color:var(--ink); font-weight:600} .prod .title:hover{color:var(--brand)}
.view-more{text-align:center; margin-top:20px}


/* New Products — premium chrome */
.np-viewport{
  position: relative;
  overflow: hidden;
  cursor: grab;
  border-radius: 12px;                 /* subtle container shape */
  will-change: transform;
}
.np-viewport.grabbing{ cursor: grabbing }

/* soft edge fades (adjust background color if yours isn’t white) */
.np-viewport::before,
.np-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; pointer-events:none; z-index:2;
}
.np-viewport::before{ left:0;  background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)) }
.np-viewport::after { right:0; background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)) }

/* track motion quality */
.np-track{
  display: flex;
  gap: 16px;                           /* your existing gap */
  will-change: transform;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

/* nav buttons: pill + lift */
.np-controls .np-nav{
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  display: grid; place-items: center;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}
.np-controls .np-nav:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2) }
.np-controls .np-nav:disabled{ opacity:.38; cursor:not-allowed; box-shadow:none; transform:none }

/* keyboard focus */
.np-viewport:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; border-radius:12px }


/* ===== NEW FOOTER (drop-in, no HTML changes) ===== */
.site-footer{
  --footer-bg1:#0c2b46;
  --footer-bg2:#09243a;
  --footer-ink:#e6f0fa;
  --footer-muted:#c4d7e6;
  --footer-line:rgba(255,255,255,.12);

  margin-top:48px;
  color:var(--footer-ink);
  background:
    radial-gradient(1000px 400px at 20% -10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--footer-bg1) 0%, var(--footer-bg2) 100%);
  border-top:1px solid var(--footer-line);
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:32px; padding:48px 0;
}
.footer-brand img{height:52px; margin-bottom:12px}
.footer-brand p{max-width:420px; color:var(--footer-muted); margin:0}

/* Section heads */
.footer-col h4{
  margin:0 0 14px;
  color:#fff;
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  position:relative; padding-bottom:10px;
}
.footer-col h4::after{
  content:""; position:absolute; left:0; bottom:0;
  width:36px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), rgba(255,255,255,0));
}

/* Links */
.footer-col a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--footer-ink); opacity:.92; text-decoration:none; padding:6px 0;
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
}
.footer-col a::before{
  content:"›"; opacity:0; transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
.footer-col a:hover{
  color:#fff; opacity:1; transform:translateX(2px);
}
.footer-col a:hover::before{ opacity:1; transform:none }

/* Social icons as round buttons */
.social{display:flex; gap:10px; margin-top:10px}
.social img{
  width:30px; height:30px; border-radius:999px; background:#fff; padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.social img:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.35) }

/* Copyright bar */
.footer-bottom{
  border-top:1px solid var(--footer-line);
  color:var(--footer-muted); padding:14px 0;
}
.footer-bottom .container{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.legal-links a{ color:var(--footer-ink); text-decoration:none; opacity:.92 }
.legal-links a:hover{ color:#fff; opacity:1 }

/* Responsive */
@media (max-width:1000px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr }
  .footer-bottom .container{ flex-direction:column; align-items:flex-start }
}




/* Forms */
.form{display:grid; gap:12px}
.form input,.form textarea, .form select{padding:10px 12px; border:1px solid #d9d9d9; border-radius:8px; font-size:14px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form .actions{display:flex; gap:12px; align-items:center}
.btn{display:inline-block; text-decoration:none; font-weight:700; padding:12px 22px; border-radius:10px; background:var(--brand); color:#fff; border:2px solid #fff}
.btn:hover{background:var(--brand-900)}

/* Breadcrumbs */
.breadcrumbs{font-size:14px; color:#888; margin:16px 0}
.breadcrumbs a{color:var(--brand); text-decoration:none}

/* A11y */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

/* Responsive tweaks */
@media (max-width:1100px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .main-nav{display:none} .hamburger{display:block}
  .search{flex-basis:220px} .info-cta{grid-template-columns:1fr}
  :root{--hero-h:460px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .container{padding:0 20px} .search{flex:1} .logo img{height:44px}
  .prod-grid{grid-template-columns:repeat(2,1fr)} .banner-description{inset:auto 0 24px 0}
  .form .row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr} .footer-bottom .container{flex-direction:column; gap:8px}
}


/* --- Homepage sections polish --- */
.intro-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center}
.intro-left ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.intro-left li{position:relative;padding-left:18px}
.intro-left li::before{content:"•";position:absolute;left:0;color:var(--brand);font-weight:700}
.intro-right p{margin:0 0 14px}

.hot-products{position:relative;background:#183b5a;color:#fff;padding:48px 0;margin:24px 0}
.hot-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.25)), url('./assets/img/hero-1.jpg') center/cover no-repeat; opacity:.25}
.hot-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.6fr;gap:28px;align-items:stretch}
.hot-copy h2{font-size:clamp(26px,3vw,40px);margin:0 0 10px}
.hot-copy p{margin:0 0 14px}
.btn.ghost{background:transparent;border:2px solid #fff}
.hot-slider{position:relative;background:#fff;color:#333;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.hotslide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.hotslide.is-active{opacity:1}
/* loosen the crop height */
.hot-products .hotslide img{ height: 520px; max-height:none; }

.hotslide-meta{padding:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.hotslide-meta .title{font-weight:700}
.hotslide-meta .link{text-decoration:none;color:var(--brand);font-weight:600}
.hot-nav{position:absolute;top:12px;right:12px;background:transparent;border:2px solid #fff;color:#fff;border-radius:8px;width:40px;height:40px;cursor:pointer}
.hot-nav.prev{right:60px}

.new-products .np-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.np-controls .np-nav{background:#fff;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;cursor:pointer}
.np-viewport{overflow:hidden}
.np-track{display:flex;gap:16px;transition:transform .4s ease}
.new-products .card{flex:0 0 280px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.04);display:flex;flex-direction:column}
.new-products .card img{width:100%;height:180px;object-fit:cover}
.new-products .card h4{font-size:16px;margin:10px 12px 0}
.new-products .card a{ text-decoration:none; color:var(--brand) }
.btn.sm{padding:8px 14px;margin:10px 12px 12px;border-width:1.5px}

.value-band{position:relative;color:#fff;padding:42px 0 22px;margin:10px 0;background:#0b2942}
.value-band>.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.25)), var(--bg) center/cover no-repeat; background-image:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.2)), var(--bg)}
.value-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.value-band .val svg{width:34px;height:34px;color:#fff;margin-bottom:8px}
.value-band .val h4{margin:0 0 6px;font-size:18px}
.value-band .val p{margin:0;color:#eef3ff}
.value-band .btn.orange{background:#e67700;border-color:#fff}
.value-band .centered{display:flex;justify-content:center;margin-top:16px}

.why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.why-art img{width:100%;border-radius:12px;border:1px solid var(--line)}

.news-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px}
.lead-img{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.lead-img img{width:100%;height:360px;object-fit:cover;display:block}
.lead-meta{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;display:flex;gap:16px;align-items:center;padding:10px 12px;font-size:14px}
.lead-meta .title{font-weight:700}
.side .news-item{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:12px;background:#fff}
.side .news-item img{width:88px;height:70px;object-fit:cover;border-radius:8px}

.cta-contact{background:#f1f5f9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.cta-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cta-tiles .tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;place-items:center;text-align:center}
.cta-tiles .ico{font-size:28px}
.cta-tiles a{text-decoration:none;color:var(--brand)}

@media (max-width:1100px){
  .hot-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:1fr}
  .cta-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .intro-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .cta-tiles{grid-template-columns:1fr}
  .hotslide img{height:300px}
}

/* ===== Why Choose Us — premium treatment (no HTML changes) ===== */
.why{
  position: relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Headline with subtle brand underline */
.why .why-copy h2{
  font-size: clamp(22px, 2.1vw, 32px);
  letter-spacing:.2px;
  margin-bottom: 10px;
  position: relative;
}
.why .why-copy h2::after{
  content:"";
  display:block;
  width: 56px; height: 3px; border-radius: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--brand), rgba(0,100,175,0));
}

/* Copy width + tone */
.why .why-copy p{
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 58ch;
  margin-bottom: 16px;
}

/* Button gets a little lift here only */
.why .btn{
  box-shadow: 0 12px 28px rgba(0,100,175,.22);
  border-color:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.why .btn:hover{ transform: translateY(-1px) }

/* Product-shot frame with glow stripe (works with your existing <img>) */
.why-art{
  position: relative;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(145deg,#ffffff 0%, #eef3f8 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(20,33,60,.10);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.why-art:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(20,33,60,.16);
}

/* vertical brand “edge light” on the right */
.why-art::after{
  content:"";
  position:absolute; top:14px; bottom:14px; right:10px; width:14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  filter: blur(0.2px);
  box-shadow: 0 0 28px rgba(0,100,175,.45), inset 0 0 18px rgba(255,255,255,.25);
  opacity:.9;
}

/* soft vignette in the back */
.why-art::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%; height:60%;
  background: radial-gradient(600px 220px at 30% 0%, rgba(0,0,0,.06), transparent 60%);
  pointer-events:none;
}

.why-art img{
  display:block; width:100%;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

/* Optional points list – styles apply only if you add <ul class="why-points"> … */
.why-points{list-style:none; margin:10px 0 18px; padding:0; display:grid; gap:8px; }
.why-points li{
  position:relative; padding-left:26px; color:#0b2942; font-weight:600;
}
.why-points li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px;
  background: var(--brand);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat 50% 50%/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat 50% 50%/contain;
}

/* Responsive tune */
@media (max-width:900px){
  .why-grid{ grid-template-columns:1fr !important }
  .why-art{ order:-1; margin-bottom:16px }
}
/* ===== News / Articles — premium cards (no HTML changes) ===== */
.news{
  position:relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top:1px solid var(--line);
}

.news-grid{ gap:24px; align-items:start; }

/* --- Left: lead card --------------------------------------------------- */
.lead{ position:relative; }
.lead .lead-img{
  display:block;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(20,33,60,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lead .lead-img:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(20,33,60,.18);
}
/* soft vignette */
.lead .lead-img::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 220px at 0% 0%, rgba(0,100,175,.08), transparent 60%);
  pointer-events:none;
}
/* brand “edge light” */
.lead .lead-img::after{
  content:""; position:absolute; top:14px; bottom:14px; left:12px; width:12px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(0,100,175,.9), rgba(0,100,175,.35));
  box-shadow: 0 0 24px rgba(0,100,175,.45), inset 0 0 12px rgba(255,255,255,.25);
  opacity:.95;
}

/* glassy meta bar over the image */
.lead .lead-meta{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; gap:14px; align-items:center;
  padding:10px 12px; border-radius:10px;
  color:#fff; font-weight:600;
  background: rgba(0,20,40,.45);
  border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
}
.lead .lead-meta .date{ opacity:.9; font-variant-numeric: tabular-nums; }
.lead .lead-meta .title{ font-weight:800; }

/* --- Right: compact news cards ---------------------------------------- */
.side .news-item{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:12px;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px; align-items:center;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.side .news-item::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px;
  border-radius:4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-900));
  opacity:.9;
  transform: scaleY(.6); transform-origin:center;
  transition: transform .2s ease;
}
.side .news-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(0,0,0,.08);
}
.side .news-item:hover::before{ transform: scaleY(1); }
.side .news-item img{ border-radius:10px; border:1px solid rgba(0,0,0,.06); }
.side .news-item h4{ margin:0 0 4px; font-size:16px; line-height:1.25; }
.side .news-item h4 a{ color:var(--ink); text-decoration:none; }
.side .news-item:hover h4 a{ color:var(--brand); }
.side .news-item p{ margin:0; color:var(--muted); font-size:14px; }

/* Responsive tweaks */
@media (max-width:1000px){ .news-grid{ gap:16px } .lead .lead-img{ border-radius:16px } }
@media (max-width:600px){ .lead .lead-meta{ left:10px; right:10px; bottom:10px; font-size:14px } }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .lead .lead-img, .side .news-item{ transition:none }
}

/* Premium statement card under the hero (no HTML changes) */
.intro-right > p{
  position: relative;
  margin: 0 0 14px;
  padding: 18px 18px 18px 56px;             /* room for the brand bar */
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,40,80,.10);
  transform: translateY(4px);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* Brand glow bar on the left */
.intro-right > p::before{
  content:"";
  position:absolute; left:14px; top:14px; bottom:14px; width:8px;
  border-radius:8px;
  background: linear-gradient(180deg,var(--brand),var(--brand-900));
  box-shadow: 0 0 22px rgba(0,100,175,.35), inset 0 0 10px rgba(255,255,255,.25);
}

/* Soft sheen on the top-right corner */
.intro-right > p::after{
  content:"";
  position:absolute; right:0; top:0; width:180px; height:100%;
  background: radial-gradient(220px 80% at 100% 0, rgba(0,100,175,.08), transparent 60%);
  pointer-events:none;
}

/* Hover lift */
.intro-right > p:hover{
  transform: translateY(0);
  box-shadow: 0 26px 70px rgba(15,40,80,.16);
}

/* Optional: subtle inline highlight for key terms (wrap with <span class="hl">...)</span> */
.intro-right .hl{
  background: linear-gradient(to bottom, rgba(0,100,175,.18), rgba(0,100,175,0) 58%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .12em; border-radius: 4px;
}

/* Button spacing */
.intro-right .btn{ margin-top: 12px }

/* Scroll-reveal motion, with accessibility fallback */
@media (prefers-reduced-motion: no-preference){
  .intro-right > p.reveal{ opacity:0; transform: translateY(10px) }
  .intro-right > p.reveal.is-visible{ opacity:1; transform:none; transition:opacity .45s ease, transform .45s ease }
}



/* NEW — New Products: modern blue title chip + floating white CTA */
.new-products .card{
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 1) Title as a blue block under the image */
.new-products .card h4{
  order: 2;                 /* keep it under the image */
  margin: 10px 12px 12px;
}
.new-products .card h4 a{
  display: block;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
  color: #fff;
  text-decoration: none;
  padding: 12px 44px 12px 14px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,100,175,.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, letter-spacing .18s ease;
}
.new-products .card:hover h4 a{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,100,175,.26);
  letter-spacing: .1px;
}
/* subtle arrow on the right of the chip */
.new-products .card h4 a::after{
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .95;
  transition: transform .2s ease;
}
.new-products .card:hover h4 a::after{ transform: translate(4px,-50%); }

/* 2) “Magic” white View Details button — floats over image, appears on hover */
.new-products .card .btn.sm{
  position: absolute;
  top: 12px; right: 12px;   /* sits on the image corner */
  background: #fff;         /* very white */
  color: var(--brand);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.new-products .card:hover .btn.sm,
.new-products .card:focus-within .btn.sm{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* keyboard users */
.new-products .card .btn.sm:focus-visible{
  outline: 3px solid rgba(0,100,175,.35);
  outline-offset: 2px;
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* touch devices: always show the CTA */
@media (hover: none){
  .new-products .card .btn.sm{ opacity: 1; pointer-events: auto; }
}

/* if you previously added a bottom fade overlay for the button, disable it */
.new-products .card::after{ display: none; }

/* --- Premium Contact Tiles ------------------------------------------------ */

/* Subtle gradient band + hairlines for depth */
.cta-contact{
  background: linear-gradient(180deg,#f7f9fc 0%, #eef3f8 100%);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Glassy cards */
.cta-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.cta-tiles .tile{
  position: relative;
  text-align: left;                /* more “enterprise” feel */
  padding: 16px 16px 18px 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(20,33,60,.06);
  backdrop-filter: saturate(120%) blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cta-tiles .tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(20,33,60,.12);
  border-color: rgba(255,255,255,.95);
}

/* A thin brand accent that fades in on hover */
.cta-tiles .tile::after{
  content:"";
  position:absolute; left:14px; right:14px; top:0; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity:0; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
.cta-tiles .tile:hover::after{ opacity:1; transform: translateY(0) }

/* Icon badge (replaces emoji, no HTML changes needed) */
.cta-tiles .ico{
  width:46px; height:46px; border-radius:999px; margin-bottom:10px;
  display:grid; place-items:center; font-size:0; /* hide the emoji text */
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
  color:#fff; box-shadow: 0 10px 26px rgba(0,100,175,.28);
}
.cta-tiles .ico::before{
  content:""; width:22px; height:22px; background:#fff; opacity:.95;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain;
          mask: var(--mask) no-repeat 50% 50%/contain;
}
/* Map icons by position (so you don't have to change HTML) */
.cta-tiles .tile:nth-child(1) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>') }
.cta-tiles .tile:nth-child(2) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C7.6 2 4 5.6 4 10c0 5.2 7 12 8 12s8-6.8 8-12c0-4.4-3.6-8-8-8Zm0 10.5A2.5 2.5 0 1 1 12 7.5a2.5 2.5 0 0 1 0 5Z"/></svg>') } /* pin */
.cta-tiles .tile:nth-child(3) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"/></svg>') } /* chat bubble */
.cta-tiles .tile:nth-child(4) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.31.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.3 22 2 13.7 2 3a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1c0 1.27.2 2.47.57 3.58a1 1 0 0 1-.24 1.01l-2.2 2.2Z"/></svg>') } /* phone */

/* Typographic hierarchy: small label, strong value */
.cta-tiles .tile h5{
  margin: 6px 0 6px;
  font-size: 13px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted);
}
.cta-tiles .tile p{ margin:0; font-weight:700; color:#0b2942 }
.cta-tiles .tile p a{
  color: var(--brand); text-decoration: none; border-bottom: 1px dashed rgba(0,100,175,.35);
}
.cta-tiles .tile p a:hover{ border-bottom-color: transparent; text-decoration: underline }

/* Make the whole tile tappable without breaking links */
.cta-tiles .tile{ cursor: pointer }
.cta-tiles .tile a{ cursor: inherit }

/* Responsive refinements */
@media (max-width:1100px){ .cta-tiles{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .cta-tiles{ grid-template-columns:1fr } }




/* Premium skin for Hot Products */
.hot-products.premium{
  position: relative;
  background: radial-gradient(1200px 400px at 70% -10%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, #0f2e4a 0%, #0b2540 100%);
  color:#fff;
  padding: 56px 0;
}
.hot-products.premium .hot-copy h2{ font-size: clamp(28px,3.4vw,44px); margin:0 0 8px }
.hot-products.premium .hot-copy p{ opacity:.95; max-width: 46ch }
.hot-products.premium .btn.ghost{
  border-color:#fff; color:#fff; background:transparent;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.hot-products.premium .hot-slider{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 26px 70px rgba(8,18,36,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  --hot-h: min(56vh, 460px);
}

/* Hot Products – focal controls (put at END of style.css) */
.hot-products .hotslide img{
  object-fit: cover;
  object-position: 50% 50%; /* center by default */
}

.hot-products .hotslide.-pos-top    img{ object-position: 50% 15%  !important; }
.hot-products .hotslide.-pos-midlow img{ object-position: 50% 70%  !important; }
.hot-products .hotslide.-pos-bottom img{ object-position: 50% 85%  !important; }

/* show the whole image when needed */
.hot-products .hotslide.-contain img{
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background:#0b2942; padding:10px; border-radius:8px;
}

/* Belt style stays as default, but NOT in compact mode */
.hot-products .hot-slider:not(.-compact) .hotslide-meta{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:12px; color:#fff; font-weight:600;
  background: rgba(10,24,42,.55);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
          backdrop-filter: blur(8px) saturate(130%);
}
.hot-products .hot-slider:not(.-compact) .hotslide-meta .title{ font-weight:800; letter-spacing:.2px }
.hot-products .hot-slider:not(.-compact) .hotslide-meta .link{
  color:#fff; text-decoration:none; font-weight:700; padding:.4rem .8rem; border-radius:999px;
  background:#0064af; box-shadow:0 10px 26px rgba(0,100,175,.35)
}
.hot-products .hot-slider:not(.-compact) .hotslide-meta .link:hover{ background:#00508c }


/* Ensure the slide can host chips */
.hotslide { position: relative; }

/* Two tiny overlay chips, opposite corners */
.hotslide .hot-chip{
  position: absolute;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1;
  color: #fff;
  background: rgba(11,37,64,.75);                /* dark glass */
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);            /* Safari */
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  white-space: nowrap;
}

.hotslide .hot-chip.name{ left:16px; max-width: 42vw; overflow:hidden; text-overflow: ellipsis; }
.hotslide .hot-chip.cta{ right:16px; text-decoration:none; }

/* Button-ish vibe for the CTA */
.hotslide .hot-chip.cta{
  background: linear-gradient(180deg,#2c7be5,#1a5fb4);
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 12px 28px rgba(44,123,229,.35);
}

/* Keep the image visible and well-cropped; use your focal helpers */
.hotslide img{
  width:100%; height: var(--hot-h, 420px);
  object-fit: cover;
  object-position: 50% 50%;
  display:block;
  border-radius: inherit;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .hotslide .hot-chip{ bottom:12px; padding:7px 10px; }
  .hotslide .hot-chip.name{ left:12px; max-width: 58vw; }
  .hotslide .hot-chip.cta{ right:12px; }
}




/* Slides = crossfade + subtle zoom */
.hotslide{ position:absolute; inset:0; opacity:0; transition: opacity .55s ease, transform .55s ease }
.hotslide.is-active{ opacity:1 }
.hotslide::after{ /* bottom gradient to ensure text readability */
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hotslide img{
  width:100%; height:var(--hot-h); object-fit:cover; display:block;
  transform:none;
  transition:none;
}




/* Glassy meta bar */
.hotslide-meta{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:12px; color:#fff; font-weight:600;
  background: rgba(10,24,42,.55); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
}
.hotslide-meta .title{ font-weight:800; letter-spacing:.2px }
.hotslide-meta .link{ color:#fff; text-decoration:none; font-weight:700; padding:.4rem .8rem; border-radius:999px;
  background:#0064af; box-shadow: 0 10px 26px rgba(0,100,175,.35) }
.hotslide-meta .link:hover{ background:#00508c }

/* Nav buttons → circular glass */
.hot-nav{
  position:absolute; top:14px; right:14px; z-index:3;
  width:40px; height:40px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; font-weight:800;
  color:#fff; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.hot-nav.prev{ right:62px }
.hot-nav:hover{ transform: translateY(-1px) scale(1.03); background: rgba(255,255,255,.26); box-shadow: 0 12px 28px rgba(0,0,0,.3) }

/* Active nav chip — works for top-level AND submenu anchors */
.main-nav > a.active,
.main-nav > .has-submenu > a.active,
.main-nav a[aria-current="page"]{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
  color:#fff !important;
  box-shadow: var(--shadow-2);
}


/* Progress */
.hot-progress{
  position:absolute; left:14px; right:14px; bottom:64px; height:3px; z-index:3;
  border-radius:999px; background: rgba(255,255,255,.28); overflow:hidden; pointer-events:none;
}
.hot-progress > span{ display:block; width:0; height:100%; background:#fff }
@keyframes hotFill{ from{width:0} to{width:100%} }
.hot-progress.play > span{ animation: hotFill var(--hot-dur,5200ms) linear forwards }

/* Thumbnails strip */
.hot-thumbs{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; pointer-events:auto;
}
.hot-thumbs .thumb{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 10px; border-radius:999px; color:#fff; font-size:12px;
  background: rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.hot-thumbs .thumb .thumb-img{ width:20px; height:20px; border-radius:6px; overflow:hidden }
.hot-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.hot-thumbs .thumb.active,
.hot-thumbs .thumb:hover{ background: rgba(255,255,255,.22); box-shadow: 0 10px 24px rgba(0,0,0,.26) }

/* Layout guard on small screens */
@media (max-width: 860px){
  .hot-progress{ bottom:58px }
  .hot-thumbs{ gap:8px }
  .hotslide img{ height:min(46vh, 360px) }
}


/* COMPACT MODE — left/right chips, no belt */
.hot-products .hot-slider.-compact .hotslide-meta{
  position:absolute; inset:0;
  background:none !important; border:0 !important; padding:0 !important;
  pointer-events:none;              /* overlay passes clicks to children unless enabled below */
}
.hot-products .hot-slider.-compact .hotslide-meta .title,
.hot-products .hot-slider.-compact .hotslide-meta .link{
  position:absolute; bottom:16px; pointer-events:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; line-height:1;
  font-weight:700; font-size:clamp(12px,1.1vw,14px); white-space:nowrap;
  border:1px solid rgba(255,255,255,.16);
  color:#fff; text-decoration:none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* left = product name chip */
.hot-products .hot-slider.-compact .hotslide-meta .title{
  left:16px;
  max-width:52vw; overflow:hidden; text-overflow:ellipsis;
  background: rgba(11,37,64,.75);
  font-weight:800;
}

/* right = CTA chip */
.hot-products .hot-slider.-compact .hotslide-meta .link{
  right:16px;
  background: linear-gradient(180deg,#2c7be5,#1a5fb4);
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 12px 28px rgba(44,123,229,.35);
}

@media (max-width:768px){
  .hot-products .hot-slider.-compact .hotslide-meta .title,
  .hot-products .hot-slider.-compact .hotslide-meta .link{ bottom:12px; padding:7px 10px }
  .hot-products .hot-slider.-compact .hotslide-meta .title{ left:12px; max-width:58vw }
  .hot-products .hot-slider.-compact .hotslide-meta .link{ right:12px }
}


/* Blur-up while loading (removed when .is-loaded is added) */
.blur-up{ filter: blur(14px) saturate(110%); transform: translateZ(0); }
.blur-up.is-loaded{ filter:none; transform:none; transition: filter .35s ease, transform .35s ease; }

/* Fix: don't blur the whole slide in compact mode */
.hot-products .hot-slider.-compact .hotslide-meta{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}











/* ================== ABOUT – Premium polish (scoped) ================== */

/* Hero glass + stat rail */
.page-about .hero-glass{ position:relative; margin-top:-96px }
.page-about .hero-card{
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  background: rgba(0,23,43,.58);
  color:#fff; padding:22px 26px; border-radius:14px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  max-width: 780px;
}
.page-about .hero-card h1{ margin:0 0 6px }
.page-about .hero-card p{ margin:0 0 10px; opacity:.95 }
.page-about .hero-badges{ display:flex; gap:8px; flex-wrap:wrap }
.page-about .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  font-weight:700; font-size:12px;
}
.page-about .hero-stats{
  margin-top:12px; display:flex; gap:12px; flex-wrap:wrap;
}
.page-about .hero-stats .stat{
  flex:1 1 160px; min-width:160px; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.page-about .hero-stats .num{ font-family:"Comfortaa","Open Sans",sans-serif; font-size:28px; font-weight:800; line-height:1 }
.page-about .hero-stats .label{ font-size:12px; color:var(--muted) }


/* ===== ABOUT — Inner hero size + premium frame ========================= */
.page-about .about-hero{
  /* one knob to control height across breakpoints */
  --ah-h: clamp(260px, 42vh, 460px);
  position: relative;
  padding-top: 12px;    /* little breathing space above the frame */
}

/* The photo itself — smaller, framed, and cropped nicely */
.page-about .about-hero > img{
  display: block;
  width: 100%;
  height: var(--ah-h);
  object-fit: cover;
  object-position: 50% 30%;      /* bias toward faces */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(20,33,60,.12);
  filter: saturate(1.03) contrast(1.02);
}

/* Optional crop helpers you can add to <img class="..."> if needed */
.page-about .about-hero > img.-crop-top  { object-position: 50% 18% }
.page-about .about-hero > img.-crop-mid  { object-position: 50% 30% }  /* default */
.page-about .about-hero > img.-crop-low  { object-position: 50% 42% }
.page-about .about-hero > img.-zoom-105  { transform: scale(1.05); transform-origin: 50% 28% }
.page-about .about-hero > img.-zoom-110  { transform: scale(1.10); transform-origin: 50% 28% }

/* Keep the glass card overlap tasteful at this smaller height */
.page-about .about-hero .hero-glass{
  margin-top: calc(-1 * min(84px, var(--ah-h) * .32));
}

/* Premium “edge light” on the right, sized to the image height */
.page-about .about-hero::after{
  content:"";
  position:absolute;
  top: 26px;
  right: 26px;
  height: calc(var(--ah-h) - 52px);
  width: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow: 0 0 28px rgba(0,100,175,.45);
  pointer-events: none;
}

/* Small-screen tweak */
@media (max-width: 700px){
  .page-about .about-hero{ --ah-h: clamp(220px, 38vh, 380px) }
}


/* In-page nav */
.page-about .inpage-nav{ display:flex; gap:8px; align-items:center; margin:16px auto 0; position:sticky; top:66px; z-index:10;
  background:#fff; padding:8px 0 }
.page-about .inpage-nav .chip{
  text-decoration:none; color:var(--ink); font-weight:700; font-size:13px;
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; background:#f8fafc;
}
.page-about .inpage-nav .chip.is-active{ background:linear-gradient(180deg,var(--brand),var(--brand-900)); color:#fff; box-shadow:var(--shadow-2) }

/* Typography helpers */
.page-about .lead{ font-size:17px; line-height:1.7 }
.page-about .muted{ color:var(--muted) }

/* Icons (mask technology, no extra HTML assets) */
.page-about .value-cards .ico{
  width:18px; height:18px; display:inline-block; vertical-align:-2px; margin-right:6px;
  background: currentColor;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain; mask: var(--mask) no-repeat 50% 50%/contain;
}
.page-about [data-i="source"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 21V3h8v4h10v14H3Z"/></svg>') }
.page-about [data-i="lab"]   { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h12v2l-4 6v7a2 2 0 1 1-4 0v-7L6 4z"/></svg>') }
.page-about [data-i="doc"]   { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h9l5 5v15H6zM9 9h6M9 13h6"/></svg>') }
.page-about [data-i="truck"] { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M3 7h11v7h4l3 3v2h-2a2 2 0 1 1-4 0H9a2 2 0 1 1-4 0H3z"/></svg>') }
.page-about [data-i="qa"]    { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 2 7l10 5 10-5zM2 17l10 5 10-5"/></svg>') }
.page-about [data-i="handshake"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M8 12l4-4 4 4-4 4z"/></svg>') }

/* Lists with ticks */
.page-about .ticks{ margin:10px 0 0; padding-left:0; list-style:none; display:grid; gap:6px }
.page-about .ticks li{
  position:relative; padding-left:22px;
}
.page-about .ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; background:var(--brand);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat 50% 50%/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat 50% 50%/contain;
}

/* ================== GLOBAL FOOTPRINT — premium (scoped) ================= */
.page-about .footprint-premium{
  position:relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:56px; padding-bottom:44px;
}
.page-about .footprint-premium .fp-head .eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:800;
}
.page-about .footprint-premium .fp-head h2{
  margin:0 0 10px; font-size:clamp(22px,2.2vw,32px);
}
.page-about .footprint-premium .fp-head h2::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--brand),rgba(0,100,175,0));
}
.page-about .footprint-premium .fp-head .lead{ font-size:17px; line-height:1.7; max-width:62ch; margin:.5rem 0 1.1rem }

.page-about .footprint-premium .fp-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start;
}
@media (max-width:1000px){ .page-about .footprint-premium .fp-grid{ grid-template-columns:1fr } }


/* ===== ABOUT — Inner hero size + premium frame ========================= */
.page-about .about-hero{
  /* one knob to control height across breakpoints */
  --ah-h: clamp(260px, 42vh, 460px);
  position: relative;
  padding-top: 12px;    /* little breathing space above the frame */
}

/* The photo itself — smaller, framed, and cropped nicely */
.page-about .about-hero > img{
  display: block;
  width: 100%;
  height: var(--ah-h);
  object-fit: cover;
  object-position: 50% 30%;      /* bias toward faces */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(20,33,60,.12);
  filter: saturate(1.03) contrast(1.02);
}

/* Optional crop helpers you can add to <img class="..."> if needed */
.page-about .about-hero > img.-crop-top  { object-position: 50% 18% }
.page-about .about-hero > img.-crop-mid  { object-position: 50% 30% }  /* default */
.page-about .about-hero > img.-crop-low  { object-position: 50% 42% }
.page-about .about-hero > img.-zoom-105  { transform: scale(1.05); transform-origin: 50% 28% }
.page-about .about-hero > img.-zoom-110  { transform: scale(1.10); transform-origin: 50% 28% }

/* Keep the glass card overlap tasteful at this smaller height */
.page-about .about-hero .hero-glass{
  margin-top: calc(-1 * min(84px, var(--ah-h) * .32));
}

/* Premium “edge light” on the right, sized to the image height */
.page-about .about-hero::after{
  content:"";
  position:absolute;
  top: 26px;
  right: 26px;
  height: calc(var(--ah-h) - 52px);
  width: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow: 0 0 28px rgba(0,100,175,.45);
  pointer-events: none;
}

/* Small-screen tweak */
@media (max-width: 700px){
  .page-about .about-hero{ --ah-h: clamp(220px, 38vh, 380px) }
}


/* Region cards */
.page-about .footprint-premium .regions{ display:grid; gap:12px }
.page-about .footprint-premium .region-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px 16px 18px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-about .footprint-premium .region-card::after{
  content:""; position:absolute; left:12px; right:12px; top:0; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity:.75; transform:translateY(-6px); transition:transform .22s ease, opacity .22s ease;
}
.page-about .footprint-premium .region-card:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:rgba(0,0,0,.08);
}
.page-about .footprint-premium .region-card:hover::after{ transform:none; opacity:1 }
.page-about .footprint-premium .region-card h4{ margin:0 0 6px; color:var(--brand); font-size:18px }
.page-about .footprint-premium .region-card .sub{ margin:0 0 6px; color:#64748b; font-weight:600 }

/* Globe art (CSS-only) */
.page-about .footprint-premium .fp-map{
  position:relative; padding:12px; border-radius:18px;
  background:linear-gradient(145deg,#ffffff 0%, #eef3f8 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 16px 40px rgba(20,33,60,.10);
}
.page-about .footprint-premium .fp-map::after{
  content:""; position:absolute; top:14px; bottom:14px; right:10px; width:14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow:0 0 28px rgba(0,100,175,.45);
}
.page-about .footprint-premium .globe{
  position:relative; border-radius:14px; overflow:hidden; height:420px;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(0,100,175,.08), transparent 60%),
    linear-gradient(180deg,#0f2e4a 0%, #0b2540 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.page-about .footprint-premium .globe .grid{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 44px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 44px);
  opacity:.5;
  -webkit-mask: radial-gradient(100% 140% at 50% 50%, #000 60%, transparent 100%);
          mask: radial-gradient(100% 140% at 50% 50%, #000 60%, transparent 100%);
  animation: fpPan 24s linear infinite;
}
@keyframes fpPan{ to { transform: translateX(-44px) } }

.page-about .footprint-premium .pin{
  position:absolute; left:var(--x); top:var(--y);
  transform: translate(-50%,-50%);
  width:10px; height:10px; border-radius:999px; background:#fff;
  box-shadow: 0 0 0 2px rgba(0,100,175,.85), 0 10px 24px rgba(0,0,0,.35);
  border:0; cursor:default;
}
.page-about .footprint-premium .pin.halo{
  box-shadow:
    0 0 0 2px rgba(0,100,175,.95),
    0 0 0 10px rgba(0,100,175,.18),
    0 14px 32px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: no-preference){
  .page-about .footprint-premium .pin.halo::after{
    content:""; position:absolute; inset:-2px; border-radius:inherit;
    box-shadow: 0 0 0 0 rgba(0,100,175,.22);
    animation: fpPulse 2.8s ease-out infinite;
  }
  @keyframes fpPulse{
    0%{ box-shadow: 0 0 0 0 rgba(0,100,175,.28) }
    100%{ box-shadow: 0 0 0 22px rgba(0,100,175,0) }
  }
}

/* Legend */
.page-about .footprint-premium .legend{
  position:absolute; left:12px; bottom:12px;
  padding:6px 10px; border-radius:999px; font-size:12px; color:#fff; font-weight:600;
  background: rgba(10,24,42,.55); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Reveal for this section too */
@media (prefers-reduced-motion: no-preference){
  .page-about .footprint-premium .reveal{
    --reveal-delay: calc(60ms * var(--stagger, 0));
    opacity:0; transform: translateY(14px) scale(.98); filter:saturate(.96);
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      transform .55s cubic-bezier(.22,.61,.36,1),
      filter .55s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay);
    will-change: opacity, transform, filter;
  }
  .page-about .footprint-premium .reveal.is-visible{ opacity:1; transform:none; filter:none }
}


/* Footprint */
.page-about .footprint-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px }
.page-about .footprint-grid .sub{ color:var(--muted); margin:.25rem 0 .5rem }
@media (max-width:1000px){ .page-about .footprint-grid{ grid-template-columns:1fr } }

/* Leaders */
.page-about .leaders .leader-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:12px }
.page-about .leader img{ width:100%; height:220px; object-fit:cover; border-radius:10px; border:1px solid var(--line) }
.page-about .leader h4{ margin:.6rem 0 .2rem }
@media (max-width:800px){ .page-about .leaders .leader-grid{ grid-template-columns:1fr } }

/* Sustainability band tweaks */
.page-about .about-sustain .sustain-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:center;
}
.page-about .about-sustain .sustain-copy h2{ margin:0 0 6px }
.page-about .sustain-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.page-about .ss{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:12px; text-align:center }
.page-about .ss-num{ font-family:"Comfortaa","Open Sans",sans-serif; font-weight:800; font-size:26px }
.page-about .ss-label{ font-size:12px; opacity:.95 }
@media (max-width:900px){ .page-about .about-sustain .sustain-grid{ grid-template-columns:1fr } }

/* Reveal on scroll */
.page-about .reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease }
.page-about .reveal.is-visible{ opacity:1; transform:none }

/* Center helper */
.page-about .center{ text-align:center }

/* Active chip color on hover/focus */
.page-about .inpage-nav .chip:hover,
.page-about .inpage-nav .chip:focus-visible{ border-color:var(--brand); color:var(--brand) }

/* ===== WHO WE ARE — premium treatment (scoped) ======================= */
.page-about .who-premium .about-grid{
  grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center;
}
@media (max-width: 980px){
  .page-about .who-premium .about-grid{ grid-template-columns: 1fr }
}

/* Left: premium text panel */
.page-about .about-panel{
  position: relative;
  padding: 20px 20px 22px 54px;
  background: linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15,40,80,.10);
}
.page-about .about-panel::before{
  content:""; position:absolute; left:14px; top:14px; bottom:14px; width:8px; border-radius:8px;
  background: linear-gradient(180deg, var(--brand), var(--brand-900));
  box-shadow: 0 0 22px rgba(0,100,175,.35), inset 0 0 10px rgba(255,255,255,.25);
}
.page-about .about-panel .eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:800;
}
.page-about .about-panel .title{
  margin:0 0 10px; font-size: clamp(22px,2.1vw,32px); position:relative;
}
.page-about .about-panel .title::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--brand),rgba(0,100,175,0));
}
.page-about .about-panel .lead{ font-size:17px; line-height:1.7; margin:.4rem 0 1rem }
.page-about .about-panel .ticks{ margin:.2rem 0 1rem; padding-left:0; list-style:none; display:grid; gap:8px }
.page-about .about-panel .ticks li{ position:relative; padding-left:22px }
.page-about .about-panel .ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; background:var(--brand);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat 50% 50%/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat 50% 50%/contain;
}
.page-about .about-panel .key-badges{ display:flex; gap:8px; flex-wrap:wrap }
.page-about .about-panel .badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(0,100,175,.12),rgba(0,100,175,.06));
  border:1px solid rgba(0,100,175,.22); color:#0b2942; font-weight:700; font-size:12px;
}

/* Right: premium image frame */
.page-about .about-figure{
  position: relative;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(145deg,#ffffff 0%, #eef3f8 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(20,33,60,.10);
  overflow: hidden;
}
.page-about .about-figure::after{
  content:""; position:absolute; top:14px; bottom:14px; right:10px; width:14px; border-radius:12px;
  background: linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow: 0 0 28px rgba(0,100,175,.45);
  opacity:.9;
}
.page-about .about-figure img{
  display:block; width:100%; height:auto; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  filter: saturate(1.03) contrast(1.02);
}

/* Over-image chips */
.page-about .fig-chips{ position:absolute; left:18px; right:18px; bottom:18px; display:flex; gap:10px; flex-wrap:wrap }
.page-about .fig-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  color:#fff; font-weight:700; font-size:12px;
  background: rgba(11,37,64,.75);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.page-about .fig-chip.alt{
  background: linear-gradient(180deg,#2c7be5,#1a5fb4);
  border-color: rgba(0,0,0,.15);
  box-shadow: 0 12px 28px rgba(44,123,229,.35);
}

/* Inline icon masks for chips */
.page-about .fig-chip i{
  width:16px; height:16px; display:inline-block; background:#fff; opacity:.95;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain; mask: var(--mask) no-repeat 50% 50%/contain;
}
.page-about .fig-chip i[data-i="lab"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h12v2l-4 6v7a2 2 0 1 1-4 0v-7L6 4z"/></svg>') }
.page-about .fig-chip i[data-i="doc"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h9l5 5v15H6zM9 9h6M9 13h6"/></svg>') }

/* ===== HOW WE CREATE VALUE — premium (scoped to .page-about) =========== */
.page-about .value-premium{
  position:relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:56px; padding-bottom:42px;
}

.page-about .value-head .eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:800;
}
.page-about .value-head h2{
  margin:0 0 10px; font-size: clamp(22px,2.2vw,32px); position:relative;
}
.page-about .value-head h2::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--brand),rgba(0,100,175,0));
}
.page-about .value-head .lead{ font-size:17px; line-height:1.7; max-width:62ch; margin:.5rem 0 1rem }
.page-about .value-head .microchips{ display:flex; gap:8px; flex-wrap:wrap }
.page-about .value-head .chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(0,100,175,.12),rgba(0,100,175,.06));
  border:1px solid rgba(0,100,175,.22); color:#0b2942; font-weight:700; font-size:12px;
}

/* Cards grid */
.page-about .value-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px;
}
@media (max-width:1100px){ .page-about .value-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){  .page-about .value-grid{ grid-template-columns:1fr } }

.page-about .v-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px 16px 18px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-about .v-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: rgba(0,0,0,.08);
}
.page-about .v-card h3{ margin:6px 0 8px; font-size:18px; color:var(--brand) }
.page-about .v-card p{ margin:0 0 8px; color:var(--ink) }
.page-about .v-card .bullets{ margin:0; padding-left:18px; color:var(--muted) }

/* Icon badge on cards */
.page-about .v-ico{
  width:40px; height:40px; border-radius:10px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
  box-shadow:0 10px 26px rgba(0,100,175,.28);
  display:grid; place-items:center; color:#fff;
}
.page-about .v-ico::before{
  content:""; width:20px; height:20px; background:#fff; opacity:.95;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain;
          mask: var(--mask) no-repeat 50% 50%/contain;
}
.page-about .v-ico[data-i="cost"]  { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3v18m6-12-6 6-6-6"/></svg>') }
.page-about .v-ico[data-i="chain"] { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M10.6 13.4 7 17a3 3 0 1 1-4-4l3.6-3.6M13.4 10.6 17 7a3 3 0 1 1 4 4l-3.6 3.6"/></svg>') }
.page-about .v-ico[data-i="shield"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 4 5v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5zM8 12l2 2 4-4"/></svg>') }
.page-about .v-ico[data-i="clock"] { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 22A10 10 0 1 0 12 2a10 10 0 0 0 0 20Zm1-11V6h-2v7h6v-2h-4z"/></svg>') }

/* Lifecycle ribbon */
.page-about .process-ribbon{
  position:relative; margin-top:24px; padding:16px; border:1px solid rgba(0,0,0,.06);
  border-radius:16px; background:linear-gradient(180deg,#ffffff, #f6fbff);
  box-shadow:0 12px 28px rgba(20,33,60,.08);
}
.page-about .process-ribbon::before{
  content:""; position:absolute; left:16px; right:16px; top:34px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, rgba(0,100,175,.25), rgba(0,100,175,.05));
}
.page-about .process-ribbon .step{
  position:relative; display:grid; gap:4px; padding:8px 10px; text-align:center;
}
.page-about .process-ribbon .step h4{ margin:0; font-size:14px; letter-spacing:.02em }
.page-about .process-ribbon .step p{ margin:0; color:var(--muted); font-size:13px }
.page-about .process-ribbon .pin{
  width:14px; height:14px; border-radius:999px; margin:0 auto 6px;
  background: linear-gradient(180deg, var(--brand), var(--brand-900));
  box-shadow: 0 0 0 3px rgba(0,100,175,.12), 0 8px 18px rgba(0,100,175,.25);
}
.page-about .process-ribbon{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
@media (max-width:780px){
  .page-about .process-ribbon::before{ display:none }
  .page-about .process-ribbon{ grid-template-columns:1fr }
}
/* ===== REGULATORY READINESS — premium (scoped to .page-about) ========= */
.page-about .reg-premium{
  position:relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:56px; padding-bottom:42px;
}

.page-about .reg-head .eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:800;
}
.page-about .reg-head h2{
  margin:0 0 10px; font-size:clamp(22px,2.2vw,32px); position:relative;
}
.page-about .reg-head h2::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--brand),rgba(0,100,175,0));
}
.page-about .reg-head .lead{ font-size:17px; line-height:1.7; max-width:62ch; margin:.5rem 0 1rem }

.page-about .compliance-chips{ display:flex; gap:8px; flex-wrap:wrap }
.page-about .compliance-chips .chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(0,100,175,.12),rgba(0,100,175,.06));
  border:1px solid rgba(0,100,175,.22); color:#0b2942; font-weight:700; font-size:12px;
}



/* Layout */
.page-about .reg-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; margin-top:16px;
}
@media (max-width:1000px){ .page-about .reg-grid{ grid-template-columns:1fr } }

/* Cards */
.page-about .r-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px 16px 18px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-about .r-card + .r-card{ margin-top:12px }
.page-about .r-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:rgba(0,0,0,.08) }
.page-about .r-card h3{ margin:6px 0 8px; font-size:18px; color:var(--brand) }
.page-about .r-card p{ margin:0 0 8px }
.page-about .r-card .bullets{ margin:0; padding-left:18px; color:var(--muted) }

/* Icons on cards (CSS mask like the rest of your system) */
.page-about .r-ico{
  width:40px; height:40px; border-radius:10px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
  box-shadow:0 10px 26px rgba(0,100,175,.28);
  display:grid; place-items:center; color:#fff;
}
.page-about .r-ico::before{
  content:""; width:20px; height:20px; background:#fff; opacity:.95;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain;
          mask: var(--mask) no-repeat 50% 50%/contain;
}
.page-about .r-ico[data-i="doc"]   { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h8l6 6v14H6zM14 2v6h6"/></svg>') }
.page-about .r-ico[data-i="shield"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 4 5v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5zM8 12l2 2 4-4"/></svg>') }
.page-about .r-ico[data-i="globe"] { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2Zm0 0c3 2.5 3 17.5 0 20m-8-10h16"/></svg>') }

/* Deliverables matrix */
.page-about .deliverable-matrix{
  margin-top:14px; border:1px dashed #e5e7eb; border-radius:12px; padding:10px 12px; background:#fff;
}
.page-about .deliverable-matrix .row{
  display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:start; padding:8px 0;
}
.page-about .deliverable-matrix .row + .row{ border-top:1px dashed #e5e7eb }
.page-about .deliverable-matrix .stage{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--muted);
}
.page-about .deliverable-matrix .items{ display:flex; gap:8px; flex-wrap:wrap }
.page-about .deliverable-matrix .pill{
  padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc; font-size:12px;
}

/* CTA row */
.page-about .cta-row{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap }
.page-about .cta-row .hint{ color:var(--muted); font-size:13px }

/* Art frame with brand edge light (matches your Why-art pattern) */
.page-about .reg-art{
  position:relative; padding:12px; border-radius:18px;
  background:linear-gradient(145deg,#ffffff 0%, #eef3f8 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 16px 40px rgba(20,33,60,.10); overflow:hidden;
}
.page-about .reg-art::after{
  content:""; position:absolute; top:14px; bottom:14px; right:10px; width:14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow:0 0 28px rgba(0,100,175,.45);
}
.page-about .reg-art img{ display:block; width:100%; border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.14) }

/* Overlay doc chips on the photo */
.page-about .doc-chips{
  position:absolute; left:22px; bottom:22px; display:flex; gap:8px; flex-wrap:wrap;
}
.page-about .doc-chips .dchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; color:#fff; font-weight:600; font-size:12px;
  background: rgba(11,37,64,.75);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.page-about .doc-chips .dchip i{
  width:16px; height:16px; display:inline-block; background:#fff; opacity:.95;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h8l6 6v14H6zM14 2v6h6"/></svg>') no-repeat 50% 50%/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h8l6 6v14H6zM14 2v6h6"/></svg>') no-repeat 50% 50%/contain;
}

/* Responsive polish */
@media (max-width:640px){
  .page-about .deliverable-matrix .row{ grid-template-columns:110px 1fr }
  .page-about .doc-chips{ left:12px; bottom:12px }
}
/* ===== REGULATORY READINESS – Reveal motion (scoped) =================== */
@media (prefers-reduced-motion: no-preference){
  .page-about .reg-premium .reveal{
    --reveal-delay: calc(60ms * var(--stagger, 0));
    opacity: 0;
    transform: translateY(14px) scale(.98);
    filter: saturate(.96);
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      transform .55s cubic-bezier(.22,.61,.36,1),
      filter .55s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay);
    will-change: opacity, transform, filter;
  }
  .page-about .reg-premium .reveal.in{
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* Slightly shorter easing for chips/pills so they feel “snappy” */
  .page-about .reg-premium .compliance-chips .chip.reveal,
  .page-about .reg-premium .deliverable-matrix .pill.reveal,
  .page-about .reg-premium .doc-chips .dchip.reveal{
    transform: translateY(10px) scale(.985);
    transition-duration: .38s;
  }

  

  /* Optional: micro float on the doc chips once revealed */
  @keyframes floatY {
    0%,100% { transform: translateY(0) }
    50%     { transform: translateY(-2px) }
  }
  .page-about .reg-premium .doc-chips .dchip.reveal.in{
    animation: floatY 6s ease-in-out infinite;
  }
}


/* ===== Leadership — Premium (scoped to .page-about) ===================== */
.page-about .leadership-premium{
  position:relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:56px; padding-bottom:42px;
}
.page-about .leadership-premium .l-head .eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:800;
}
.page-about .leadership-premium .l-head h2{ margin:0 0 10px; font-size:clamp(22px,2.2vw,32px) }
.page-about .leadership-premium .l-head h2::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg,var(--brand),rgba(0,100,175,0));
}

/* Grid */
.page-about .leadership-premium .l-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:16px }
@media (max-width:800px){ .page-about .leadership-premium .l-grid{ grid-template-columns:1fr } }

/* Card */
.page-about .leadership-premium .l-card{
  position:relative; overflow:hidden; border-radius:14px; background:#fff;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 26px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-about .leadership-premium .l-card::after{
  content:""; position:absolute; left:12px; right:12px; top:0; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand), transparent);
  opacity:.75; transform:translateY(-6px); transition:transform .22s ease, opacity .22s ease;
}
.page-about .leadership-premium .l-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:rgba(0,0,0,.08) }
.page-about .leadership-premium .l-card:hover::after{ transform:none; opacity:1 }

/* Media */
.page-about .leadership-premium .l-media{ aspect-ratio:4/5; overflow:hidden; background:#f7f9fc; }
.page-about .leadership-premium .l-media img{ width:100%; height:100%; object-fit:cover; display:block }

/* Meta */
.page-about .leadership-premium .l-meta{ padding:14px 16px 16px }
.page-about .leadership-premium .l-role{ margin:0 0 6px; font-size:18px; color:var(--brand) }
.page-about .leadership-premium .l-summary{ margin:0; color:var(--ink) }

/* Link chips (optional) */
.page-about .leadership-premium .l-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.page-about .leadership-premium .l-chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; line-height:1;
  background:linear-gradient(180deg,rgba(0,100,175,.12),rgba(0,100,175,.06)); border:1px solid rgba(0,100,175,.22);
  color:#0b2942; font-weight:700; font-size:12px; text-decoration:none;
}
.page-about .leadership-premium .l-chip.alt{
  background: linear-gradient(180deg,#2c7be5,#1a5fb4); border-color: rgba(0,0,0,.15); color:#fff;
}
.page-about .leadership-premium .l-chip i{
  width:16px; height:16px; background: currentColor; opacity:.95; display:inline-block;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain; mask: var(--mask) no-repeat 50% 50%/contain;
}
.page-about .leadership-premium [data-i="linkedin"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM0 8h5v16H0zM8 8h4.8v2.2h.1c.7-1.2 2.3-2.5 4.7-2.5 5 0 5.9 3.3 5.9 7.6V24h-5v-7.6c0-1.8 0-4-2.5-4s-2.9 2-2.9 3.9V24H8z"/></svg>') }
.page-about .leadership-premium [data-i="mail"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>') }
.page-about .leadership-premium [data-i="doc"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h9l5 5v15H6zM9 9h6M9 13h6"/></svg>') }
.page-about .leadership-premium [data-i="shield"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 4 5v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5zM8 12l2 2 4-4"/></svg>') }

/* Governance pills */
.page-about .leadership-premium .gov-callout{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.page-about .leadership-premium .gov-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; line-height:1;
  color:#fff; text-decoration:none; font-weight:700; font-size:12px;
  background: linear-gradient(180deg,#2c7be5,#1a5fb4); border:1px solid rgba(0,0,0,.15);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(44,123,229,.35);
}
.page-about .leadership-premium .gov-pill i{
  width:16px; height:16px; background:#fff; opacity:.95; display:inline-block;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain; mask: var(--mask) no-repeat 50% 50%/contain;
}

/* Reveal for this section (accepts either .in or .is-visible) */
@media (prefers-reduced-motion: no-preference){
  .page-about .leadership-premium .reveal{
    opacity:0; transform: translateY(12px) scale(.985); filter:saturate(.96);
    transition: opacity .45s cubic-bezier(.22,.61,.36,1),
                transform .45s cubic-bezier(.22,.61,.36,1),
                filter .45s cubic-bezier(.22,.61,.36,1);
  }
  .page-about .leadership-premium .reveal.in,
  .page-about .leadership-premium .reveal.is-visible{ opacity:1; transform:none; filter:none }
}
/* === Leadership image sizing + crop helpers ============================ */
/* Smaller, responsive portrait frame */
.page-about .leadership-premium .l-media{
  height: clamp(220px, 28vw, 340px);  /* ↓ smaller than before */
  overflow: hidden;
  border-radius: 12px;
  background:#f2f6fb;
}

/* Fill the frame, allow zoom */
.page-about .leadership-premium .l-media img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% 28%;     /* bias toward face by default */
  transform: scale(1.08);       /* slight zoom for head→stomach crop */
  will-change: transform;
}

/* Quick per-card tuning (use on <figure class="l-media ...">) */
.page-about .leadership-premium .l-media.-zoom-115 img{ transform: scale(1.15) }
.page-about .leadership-premium .l-media.-zoom-120 img{ transform: scale(1.20) }
.page-about .leadership-premium .l-media.-crop-top   img{ object-position: 50% 18% }
.page-about .leadership-premium .l-media.-crop-mid   img{ object-position: 50% 28% } /* default */
.page-about .leadership-premium .l-media.-crop-low   img{ object-position: 50% 40% }

@media (max-width: 900px){
  .page-about .leadership-premium .l-media{ height: 260px }
}

/* ================== SUSTAINABILITY — Premium (scoped) ================== */
.page-about .sustain-premium{
  position:relative;
  color:#fff;
  padding:56px 0 36px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(0,0,0,.12);
  background:
    radial-gradient(1000px 400px at 70% -10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0f2e4a 0%, #0b2540 100%);
}

/* Background image + gradient overlay (uses inline --bg var) */
.page-about .sustain-premium > .overlay{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25)),
    var(--bg) center/cover no-repeat;
  opacity:.85;
}

/* Layout */
.page-about .sustain-premium .sp-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start;
}
@media (max-width:1000px){
  .page-about .sustain-premium .sp-grid{ grid-template-columns:1fr }
}

/* Head */
.page-about .sustain-premium .sp-head .eyebrow{
  margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; opacity:.95;
}
.page-about .sustain-premium .sp-head h2{
  margin:0 0 10px; font-size:clamp(22px,2.2vw,32px);
}
.page-about .sustain-premium .sp-head h2::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px; margin-top:10px;
  background:linear-gradient(90deg, var(--brand), rgba(255,255,255,0));
}
.page-about .sustain-premium .sp-head .lead{
  font-size:17px; line-height:1.7; max-width:62ch; opacity:.98;
}

/* Chips */
.page-about .sustain-premium .sp-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.page-about .sustain-premium .sp-chips .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 11px; border-radius:999px; line-height:1;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.22);
  font-weight:700; font-size:12px; color:#fff;
}
.page-about .sustain-premium .sp-chips .chip i{
  width:16px; height:16px; background:#fff; opacity:.95;
  -webkit-mask:var(--mask) no-repeat 50% 50%/contain; mask:var(--mask) no-repeat 50% 50%/contain;
}

/* Stats */
.page-about .sustain-premium .sp-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
@media (max-width:700px){ .page-about .sustain-premium .sp-stats{ grid-template-columns:1fr } }

.page-about .sustain-premium .sp-card{
  position:relative;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-about .sustain-premium .sp-card:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 44px rgba(0,0,0,.26);
  background:rgba(255,255,255,.14);
}

/* Icon badge */
.page-about .sustain-premium .sp-ico{
  width:40px; height:40px; border-radius:10px; margin-bottom:8px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
  box-shadow:0 10px 26px rgba(0,100,175,.35);
}
.page-about .sustain-premium .sp-ico::before{
  content:""; width:20px; height:20px; background:#fff; opacity:.95;
  -webkit-mask:var(--mask) no-repeat 50% 50%/contain; mask:var(--mask) no-repeat 50% 50%/contain;
}

/* Numbers */
.page-about .sustain-premium .sp-num{
  font-family:"Comfortaa","Open Sans",sans-serif;
  font-weight:800; font-size:28px; line-height:1; margin:6px 0 4px;
}
.page-about .sustain-premium .sp-label{
  font-size:12px; letter-spacing:.02em; opacity:.95;
}

/* Icons (new leaf, reuse existing doc/truck/globe) */
.page-about [data-i="leaf"]  { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M19 3c-7 1-12 6-12 12 0 3 2 6 6 6 6 0 11-5 12-12 0-3-2-6-6-6Zm-6 16a4 4 0 0 1-4-4c0-3 3-6 8-7-1 5-4 8-7 8Z"/></svg>') }

/* Reveal (match your other premium sections) */
@media (prefers-reduced-motion: no-preference){
  .page-about .sustain-premium .reveal{
    --reveal-delay: calc(60ms * var(--stagger, 0));
    opacity:0; transform: translateY(12px) scale(.985); filter:saturate(.96);
    transition: opacity .48s cubic-bezier(.22,.61,.36,1),
                transform .48s cubic-bezier(.22,.61,.36,1),
                filter .48s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay);
    will-change: opacity, transform, filter;
  }
  .page-about .sustain-premium .reveal.is-visible{ opacity:1; transform:none; filter:none }
}


/* ===== FINAL CTA — premium (scoped to .page-about) ===================== */
.page-about .cta-premium{
  position:relative;
  background: linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-top:56px; padding-bottom:42px;
}

.page-about .cta-wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:stretch;
}
@media (max-width:980px){ .page-about .cta-wrap{ grid-template-columns:1fr } }

.page-about .cta-card{
  position:relative;
  padding:22px 22px 24px 54px;
  background: linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(15,40,80,.10);
}
.page-about .cta-card::before{
  content:""; position:absolute; left:14px; top:14px; bottom:14px; width:8px; border-radius:8px;
  background: linear-gradient(180deg, var(--brand), var(--brand-900));
  box-shadow: 0 0 22px rgba(0,100,175,.35), inset 0 0 10px rgba(255,255,255,.25);
}
.page-about .cta-card h2{ margin:0 0 8px; font-size:clamp(22px,2.2vw,32px) }
.page-about .cta-card .lead{ margin:.25rem 0 1rem; font-size:17px; line-height:1.7 }

.page-about .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 10px }
.page-about .cta-actions .btn.ghost{
  background:transparent; color:var(--brand); border-color:var(--brand);
}

.page-about .assure{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.page-about .assure .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(0,100,175,.12),rgba(0,100,175,.06));
  border:1px solid rgba(0,100,175,.22);
  color:#0b2942; font-weight:700; font-size:12px;
}
.page-about .assure .pill i{
  width:16px; height:16px; background:currentColor; opacity:.95;
  -webkit-mask: var(--mask) no-repeat 50% 50%/contain; mask: var(--mask) no-repeat 50% 50%/contain;
}

/* Icon masks used in the pills */
.page-about [data-i="clock"] { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 22A10 10 0 1 0 12 2a10 10 0 0 0 0 20Zm1-11V6h-2v7h6v-2h-4z"/></svg>') }
.page-about [data-i="shield"]{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2 4 5v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V5zM8 12l2 2 4-4"/></svg>') }
.page-about [data-i="doc"]   { --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h9l5 5v15H6zM9 9h6M9 13h6"/></svg>') }

/* Right-side visual (CSS only) */
.page-about .cta-visual{
  position:relative; padding:12px; border-radius:18px;
  background:linear-gradient(145deg,#ffffff 0%, #eef3f8 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 16px 40px rgba(20,33,60,.10);
  overflow:hidden;
}
.page-about .cta-visual::after{
  content:""; position:absolute; top:14px; bottom:14px; right:10px; width:14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow:0 0 28px rgba(0,100,175,.45);
}
.page-about .cta-visual .glow-grid{
  height:340px; border-radius:14px; position:relative; overflow:hidden;
  background:
    radial-gradient(140% 70% at 20% 0%, rgba(0,100,175,.10), transparent 60%),
    linear-gradient(180deg,#0f2e4a 0%, #0b2540 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.page-about .cta-visual .glow-grid::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 44px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 44px);
  opacity:.5;
  animation: ctaGridPan 24s linear infinite;
  -webkit-mask: radial-gradient(100% 140% at 50% 50%, #000 60%, transparent 100%);
          mask: radial-gradient(100% 140% at 50% 50%, #000 60%, transparent 100%);
}
@keyframes ctaGridPan{ to { transform: translateX(-44px) } }

/* Overlay chips on the visual */
.page-about .cta-chips{
  position:absolute; left:22px; bottom:22px; display:flex; gap:8px; flex-wrap:wrap;
}
.page-about .cta-chips .dchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; color:#fff; font-weight:600; font-size:12px;
  background: rgba(11,37,64,.75);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.page-about .cta-chips .dchip i{
  width:16px; height:16px; display:inline-block; background:#fff; opacity:.95;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h8l6 6v14H6zM14 2v6h6"/></svg>') no-repeat 50% 50%/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6 2h8l6 6v14H6zM14 2v6h6"/></svg>') no-repeat 50% 50%/contain;
}

/* Mobile tweak */
@media (max-width:640px){
  .page-about .cta-visual .glow-grid{ height:280px }
  .page-about .cta-chips{ left:12px; bottom:12px }
}

/* ABOUT — about-figure image sizing (per-image classes) */
.page-about .about-figure img.-xs { height: clamp(200px, 30vh, 300px); width:100%; object-fit:cover }
.page-about .about-figure img.-sm { height: clamp(240px, 34vh, 340px); width:100%; object-fit:cover }
.page-about .about-figure img.-md { height: clamp(280px, 38vh, 380px); width:100%; object-fit:cover }

/* Optional crop helpers for nicer focus */
.page-about .about-figure img.-crop-top { object-position:50% 22% }
.page-about .about-figure img.-crop-mid { object-position:50% 32% }
.page-about .about-figure img.-crop-low { object-position:50% 45% }

/* Optional gentle zoom to get head→stomach framing */
.page-about .about-figure img.-zoom-105 { transform:scale(1.05); transform-origin:50% 28% }
.page-about .about-figure img.-zoom-110 { transform:scale(1.10); transform-origin:50% 28% }

.page-about .cta-visual img{
  display:block; width:100%;
  height: clamp(260px, 30vh, 340px);
  object-fit: cover; border-radius:14px;
}







/* ================= CONTACT — Premium (scoped) ================= */
/* ================= CONTACT — Premium (scoped) ================= */
.page-contact{
  /* safe fallbacks in case :root vars aren't defined */
  --brand:#0064af; --brand-900:#0b2540; --line:#e9eef5;
}
/* Shorter banner on Contact */
.page-contact .contact-hero .hero-img{
  width:100%;
  height: clamp(180px, 28vw, 300px); /* ~180–300px instead of 320–520px */
  object-fit: cover;
  display:block;
}

/* Glass hero card */
.page-contact .hero-glass{ position:relative; margin-top:-80px }
.page-contact .hero-card{
  color:#fff; padding:22px 26px; border-radius:14px;
  background:rgba(0,23,43,.58);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%);
  max-width:780px;
}
.page-contact .hero-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.page-contact .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); font-weight:700; font-size:12px;
}
/* Section layout */
.page-contact .contact-premium{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.page-contact .contact-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start;
}
@media (max-width:980px){ .page-contact .contact-grid{ grid-template-columns:1fr } }
/* Form card */
.page-contact .contact-form-card{
  position:relative; padding:22px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(2,6,23,.06);
}
.page-contact .contact-form-card::before{
  content:""; position:absolute; left:14px; top:14px; bottom:14px; width:8px; border-radius:8px;
  background:linear-gradient(180deg,var(--brand),var(--brand-900));
  box-shadow:0 0 22px rgba(0,100,175,.35), inset 0 0 10px rgba(255,255,255,.25);
}
.page-contact .form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px }
@media (max-width:720px){ .page-contact .form .row{ grid-template-columns:1fr } }
.page-contact .form input,
.page-contact .form textarea,
.page-contact .form select{
  background:#fff; border-radius:10px; border:1px solid #e5e7eb; padding:12px 14px;
  transition:border-color .2s, box-shadow .2s;
}
.page-contact .form textarea{ resize:vertical }
.page-contact .form input:focus,
.page-contact .form textarea:focus,
.page-contact .form select:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(32,132,255,.18); outline:0;
}
.page-contact .form .actions{ display:flex; align-items:center; gap:12px; margin-top:12px }
.page-contact .form .actions .btn{ box-shadow:0 12px 28px rgba(0,100,175,.22) }
.page-contact .form .pill{ margin-top:10px }
/* Right visual (CSS-only) */
.page-contact .contact-aside{ position:relative }
.page-contact .cta-visual{
  position:relative; padding:12px; border-radius:18px;
  background:linear-gradient(145deg,#ffffff 0%,#eef3f8 100%);
  border:1px solid rgba(0,0,0,.06); box-shadow:0 16px 40px rgba(20,33,60,.10);
  overflow:hidden; margin-bottom:16px;
}
.page-contact .cta-visual::after{
  content:""; position:absolute; top:14px; bottom:14px; right:10px; width:14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,100,175,.85), rgba(0,100,175,.35));
  box-shadow:0 0 28px rgba(0,100,175,.45);
}
.page-contact .cta-visual .glow-grid{
  height:340px; border-radius:14px; position:relative; overflow:hidden;
  background:
    radial-gradient(140% 70% at 20% 0, rgba(0,100,175,.10), transparent 60%),
    linear-gradient(180deg,#0f2e4a 0%, #0b2540 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.page-contact .cta-visual .glow-grid::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 44px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 44px);
  opacity:.5; animation:ctaGridPan 24s linear infinite;
  -webkit-mask:radial-gradient(100% 140% at 50% 50%, #000 60%, transparent 100%);
          mask:radial-gradient(100% 140% at 50% 50%, #000 60%, transparent 100%);
}
@keyframes ctaGridPan{ to{ transform:translateX(-44px) } }
@media (prefers-reduced-motion:reduce){ .page-contact .cta-visual .glow-grid::before{ animation:none } }
.page-contact .cta-chips{
  position:absolute; left:22px; bottom:22px; display:flex; gap:8px; flex-wrap:wrap;
}
.page-contact .cta-chips .dchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; color:#fff; font-weight:600; font-size:12px;
  background:rgba(11,37,64,.75); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.page-contact .cta-chips .dchip i{ width:16px; height:16px; background:#fff; opacity:.95; display:inline-block }
/* Quick contact tiles */
.page-contact .contact-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media (max-width:480px){ .page-contact .contact-tiles{ grid-template-columns:1fr } }
.page-contact .contact-tiles .tile{
  border-radius:16px; padding:18px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
.page-contact .contact-tiles .tile h5{ margin:8px 0 4px; letter-spacing:.02em }
.page-contact .contact-tiles .tile p{ margin:0 }
.page-contact .contact-tiles .tile .ico{
  width:44px; height:44px; border-radius:999px; background:var(--brand); box-shadow:0 6px 16px rgba(0,100,175,.25);
  -webkit-mask:var(--mask) center/60% 60% no-repeat; mask:var(--mask) center/60% 60% no-repeat;
  display:inline-block;
}
/* per-tile icons */
.page-contact .contact-tiles .tile:nth-child(1) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>'); }
.page-contact .contact-tiles .tile:nth-child(2) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.11.37 2.31.57 3.58.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.3 22 2 13.7 2 3a1 1 0 0 1 1-1h4.5a1 1 0 0 1 1 1c0 1.27.2 2.47.57 3.58a1 1 0 0 1-.24 1.01l-2.2 2.2Z"/></svg>'); }
.page-contact .contact-tiles .tile:nth-child(3) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2C7.6 2 4 5.6 4 10c0 5.2 7 12 8 12s8-6.8 8-12c0-4.4-3.6-8-8-8Zm0 10.5A2.5 2.5 0 1 1 12 7.5a2.5 2.5 0 0 1 0 5Z"/></svg>'); }
.page-contact .contact-tiles .tile:nth-child(4) .ico{ --mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 22A10 10 0 1 0 12 2a10 10 0 0 0 0 20Zm1-11V6h-2v7h6v-2h-4z"/></svg>'); }
/* Accessibility + legacy labels cleanup */
.page-contact .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.page-contact .hp{ position:absolute; left:-9999px }
.page-contact .contact-form-card > label,
.page-contact .contact-form-card .form > label,
.page-contact .contact-form-card .form .row > label:not(.sr-only){ display:none !important }


/* Optional: slightly tighter chips wrap in the figure */
.page-contact .cta-chips { gap: 6px; }
.page-contact .cta-chips .dchip { font-size: 12px; padding: 7px 11px; }


/* RFQ mini-card */
.page-contact .rfq-mini{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:12px; margin-bottom:16px;
  box-shadow:0 12px 28px rgba(2,6,23,.06);
}
.page-contact .rfq-mini input{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px;
  transition:border-color .2s, box-shadow .2s;
}
.page-contact .rfq-mini input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(32,132,255,.18); outline:0; }
.page-contact .rfq-mini .btn{
  grid-column: 1 / -1; justify-self: end; box-shadow:0 12px 28px rgba(0,100,175,.22);
}
@media (max-width:720px){
  .page-contact .rfq-mini{ grid-template-columns:1fr; }
  .page-contact .rfq-mini .btn{ justify-self: stretch; }
}



/* ================= CASES — Premium (scoped) ================= */
.page-cases .cases-hero .hero-img{
 width:100%;
  height: clamp(180px, 28vw, 300px); /* ~180–300px instead of 320–520px */
  object-fit: cover;
  display:block;
}
.page-cases .hero-glass{ position:relative; margin-top:-70px }
.page-cases .hero-card{
  color:#fff; padding:20px 24px; border-radius:14px;
  background:rgba(0,23,43,.58);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%);
  max-width:860px;
}
.page-cases .hero-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.page-cases .hero-badges .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); font-weight:700; font-size:12px;
}

/* Controls */
.page-cases .cases-controls{ border-top:1px solid var(--line); background:#fff }
.page-cases .cases-toolbar{
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:12px 0;
}
.page-cases .chips{ display:flex; gap:8px; flex-wrap:wrap }
.page-cases .chip{
  padding:8px 12px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; font-weight:600;
}
.page-cases .chip.is-active{ background:var(--brand); color:#fff; border-color:var(--brand) }
.page-cases .search-holder{ position:relative; display:flex; align-items:center; gap:6px }
.page-cases #caseSearch{
  width:min(56ch, 64vw); padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb;
}
.page-cases #caseSearch:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(32,132,255,.18) }

/* Grid + card */
.page-cases .case-grid{
  --cols: 3;
  display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:18px;
}
@media (max-width:1024px){ .page-cases .case-grid{ --cols: 2 } }
@media (max-width:640px){  .page-cases .case-grid{ --cols: 1 } }

.page-cases .case-card{
  position:relative; overflow:hidden; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 28px rgba(2,6,23,.06); transition:transform .18s ease, box-shadow .18s ease;
}
.page-cases .case-card:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(2,6,23,.10) }
.page-cases .case-card .card-link{ display:block; color:inherit; text-decoration:none }
.page-cases .case-card .media{ margin:0; position:relative; aspect-ratio: 16 / 9; overflow:hidden }
.page-cases .case-card img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .35s ease }
.page-cases .case-card:hover img{ transform:scale(1.06) }
.page-cases .case-card .media::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), transparent 60%);
}

.page-cases .case-card .content{ padding:14px 14px 16px }
.page-cases .case-card h3{ margin:0 0 6px; font-size:18px; letter-spacing:.01em }
.page-cases .case-card p{ margin:0 0 10px; color:#334155 }
.page-cases .case-card .meta{ display:flex; gap:8px; flex-wrap:wrap }
.page-cases .pill{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#eef2f7; font-weight:700; font-size:12px;
  border:1px solid #e5e7eb;
}

/* Empty state */
.page-cases .case-empty{
  margin:18px 0; padding:18px; border-radius:12px; background:#f8fafc; border:1px dashed #cbd5e1; color:#475569; text-align:center;
}

/* CTA */
.page-cases .cases-cta{ background:linear-gradient(180deg,#ffffff 0%, #f6f9fc 100%); border-top:1px solid var(--line) }
.page-cases .cta-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 0;
}
.page-cases .cta-wrap .btn{ padding:10px 16px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700;
  box-shadow:0 12px 28px rgba(0,100,175,.22); border:1px solid rgba(0,0,0,.05) }



  .main-nav .submenu { min-width: 260px; }
.main-nav .submenu a.view-all { font-weight: 600; }
.main-nav .submenu .menu-divider {
  border: 0; height: 1px; background: rgba(0,0,0,.08); margin: 6px 0;
}
@media (max-width: 900px){
  .mobile-submenu .view-all { font-weight: 600; }
}




  /* ===== Premium Products layout ===== */
  :root{
    --brand:#0064af; --brand-600:#045a9a; --ink:#0f172a; --muted:#475569; --card:#f7f9fc;
  }
  .page-intro{
    position:relative; overflow:hidden; border-radius:16px; padding:38px 28px;
    background: radial-gradient(1000px 380px at 20% -10%, #0a6abf 0%, #063e6f 55%, #08243f 100%);
    color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  .page-intro h1{margin:0 0 6px;font-size:clamp(28px,3.2vw,38px);line-height:1.1}
  .page-intro p{margin:0;color:#e6f1ff;max-width:70ch}
  .page-intro .cta-row{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:10px;
    font-weight:600;text-decoration:none;border:1px solid transparent;transition:all .18s ease;
  }
  .btn.primary{background:#fff;color:var(--brand);border-color:#ffffff22}
  .btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
  .btn.ghost{background:transparent;color:#fff;border-color:#ffffff40}
  .btn.ghost:hover{background:#ffffff12;border-color:#ffffff6b}

  /* Sticky category index */
  .cat-index{
    position:sticky; top:64px; z-index:10; background:#fff; border:1px solid #e9eef5;
    border-radius:12px; padding:10px; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px;
  }
  .cat-chip{
    border:1px solid #e3e9f3; background:#fff; color:var(--ink);
    padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer;
    transition:all .18s; user-select:none;
  }
  .cat-chip[aria-pressed="true"]{background:var(--brand); color:#fff; border-color:var(--brand)}
  .cat-chip:hover{border-color:var(--brand)}

  /* Section blocks */
  .cat-section{padding:28px 0 10px}
  .cat-hd{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px}
  .cat-hd h2{margin:0;font-size:22px;color:var(--ink)}
  .cat-hd p{margin:0;color:var(--muted)}

  /* Cards grid */
  .cat-grid{display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:1200px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.cat-grid{grid-template-columns:1fr}}

  .cat-card{
    display:block; border:1px solid #e9eef5; background:linear-gradient(#fff,#fbfdff);
    border-radius:14px; overflow:hidden; text-decoration:none; color:inherit;
    box-shadow:0 1px 0 #eef3f9; transition:transform .18s, box-shadow .18s, border-color .18s;
  }
  .cat-card:hover{transform:translateY(-3px); border-color:#dfe8f5; box-shadow:0 14px 26px rgba(16,24,40,.08)}
  .cat-media{aspect-ratio:16/10; background:#f3f7fb; display:block; position:relative}
  .cat-media img{width:100%;height:100%;object-fit:cover; display:block}
  .cat-body{padding:12px 14px 14px}
  .cat-title{font-weight:700; color:#0a1e38; line-height:1.3}
  .cat-meta{margin-top:4px; font-size:13px; color:#60708a}

  /* Small helpers */
  .menu-divider{border:0;height:1px;background:#e9eef5;margin:6px 0}
  .view-all{font-weight:600}
  /* graceful fallback if an image is missing */
  .cat-media::after{
    content:""; position:absolute; inset:0; background:
      repeating-linear-gradient(45deg,#edf3fb,#edf3fb 10px,#f7fbff 10px,#f7fbff 20px);
  }
  .cat-media img{position:relative; z-index:1}




  /* ===== Premium Case Module (scoped) ===== */
/* ===== CASE PAGES — final override block ===== */
.page-cases .inner-hero{position:relative;overflow:clip}
.page-cases .cases-hero .hero-img{width:100%;height:clamp(200px,26vw,360px);object-fit:cover;display:block}
.page-cases .cases-hero .hero-glass{position:absolute;left:0;right:0;bottom:0}
.page-cases .cases-hero .hero-card{
  margin:0 0 16px;max-width:clamp(560px,52vw,760px);
  padding:18px 20px;border-radius:18px;color:#0b2540;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:saturate(1.05) blur(10px);
  box-shadow:0 20px 40px -22px rgba(11,37,64,.25);
}
.page-cases .hero-badges{display:flex;gap:8px;flex-wrap:wrap}

/* Make badges readable on glass (wins over any global .badge) */
.page-cases .hero-badges .badge,
.page-cases .hero-card .badge{
  color:#0b2540 !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(11,37,64,.10) !important;
  box-shadow:0 6px 18px rgba(11,37,64,.12), inset 0 0 0 1px rgba(255,255,255,.45);
  font-weight:700;
}

/* Article + tables + rail */
.page-cases .article-wrap{padding:20px 0 8px}
.page-cases .article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}
@media (max-width:980px){.page-cases .article-grid{grid-template-columns:1fr}}
.page-cases .case-article{max-width:68ch}
.page-cases .case-meta{display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin:.5rem 0 0}
.page-cases .case-meta .pill{background:#eef4fa;border:1px solid #e0e8f2}
.page-cases .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:12px 0 2px}
.page-cases .kpi{background:#fff;border:1px solid #e9eef5;border-radius:16px;padding:14px 16px}
.page-cases .kpi b{display:block;font-size:1.05rem;color:#0b2540}
.page-cases .pro-table{width:100%;border-collapse:collapse;margin:.5rem 0}
.page-cases .pro-table th,.page-cases .pro-table td{border:1px solid #e9eef5;padding:10px;vertical-align:top}
.page-cases .pro-table th{background:#f6f9fc;text-align:left}
.page-cases .note{background:#f7fbff;border-left:4px solid #0064af;padding:.9rem 1rem;border-radius:10px}
.page-cases .rail .card{background:#fff;border:1px solid #e9eef5;border-radius:16px;padding:14px;margin-bottom:14px}
@media (min-width:981px){.page-cases .rail{position:sticky;top:98px;align-self:start}}
.page-cases #toc a{display:block;padding:.38rem .35rem;border-radius:10px;color:#2a3240;text-decoration:none}
.page-cases #toc a[aria-current="true"]{background:#f1f6fb;color:#0b2540;font-weight:600}

/* 1) Size tokens for the header logo */
:root{
  --logo-h: 80px;      /* desktop height */
  --logo-h-lg: 90px;   /* big screens */
}

@media (min-width: 1200px){
  :root{ --logo-h: var(--logo-h-lg); }
}

/* 2) Logo should not shrink; scale by height only */
.logo{ flex: 0 0 auto; display:flex; align-items:center }
.logo img{
  height: var(--logo-h);
  width: auto;                 /* keep aspect */
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* Safari crispness */
}

/* 3) Give the header enough vertical space so the logo isn’t squeezed */
.header-row{
  min-height: calc(var(--logo-h) + 24px);
  padding: 10px 0;   /* slightly tighter padding since logo is taller */
}

/* 4) Prevent nav from crowding the logo on medium widths */
.main-nav{ flex: 1 1 auto; min-width: 0 }
@media (max-width: 1100px){
  .main-nav > a, .main-nav > .has-submenu > a{ padding: 8px 10px; }
}


/* --- Keep header short while logo is big --- */
:root{
  --header-h: 64px;   /* visual bar height */
  --logo-h: 84px;     /* actual logo height (bigger than the bar) */
}

@media (min-width: 1200px){
  :root{ --header-h: 64px; --logo-h: 88px; } /* tweak if you like */
}

/* Header bar stays slim */
.main-header{ overflow: visible; }              /* allow logo to hang outside */
.header-row{
  height: var(--header-h);
  min-height: 0;                                /* kill previous min-height */
  padding: 0;                                   /* no extra vertical padding */
  display:flex; align-items:center; gap:24px;
}

/* Big logo, optically centered, but doesn't stretch the bar */
.logo{ flex: 0 0 auto; display:flex; align-items:center }
.logo img{
  height: var(--logo-h);
  width: auto;
  display:block;
  /* center the taller logo inside the shorter bar (negative when logo>bar) */
  margin-block: calc((var(--header-h) - var(--logo-h)) / 2);
  image-rendering: -webkit-optimize-contrast;   /* Safari crispness */
}

/* Tighten nav so it fits the slimmer bar */
.main-nav > a,
.main-nav > .has-submenu > a{
  padding: 8px 12px;
  line-height: 1.1;
}

/* Optional: slightly smaller on phones so it doesn't crowd */
@media (max-width: 900px){
  :root{ --header-h: 58px; --logo-h: 76px; }
}


/* Footer logo only (keep bar as-is) */
:root{
  --footer-logo-h: 72px;   /* try 72–84px */
}

.site-footer .footer-brand{ 
  display:flex; align-items:center; gap:14px;
}

.site-footer .footer-brand img,
.site-footer .logo img{
  height: var(--footer-logo-h) !important;   /* force past inline width/height */
  width: auto !important;
  display:block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* Safari crispness */
}


/* Remove underline from the email in the topbar (and keep it on hover/visited too) */
/* Remove underline for email, company name, and telephone in the topbar */
.topbar a:is([href^="mailto:"],[href^="tel:"],.company-name),
.topbar a:is([href^="mailto:"],[href^="tel:"],.company-name):is(:hover,:focus,:visited){
  text-decoration: none !important;
  background-image: none !important;
  border-bottom: 0 !important;
  color: inherit;
  display: inline-flex; align-items: center;
}



/* === TEAM PORTRAIT FIX (scoped) ======================================= */
/* Force portrait aspect, cap visual size, and keep face in frame */
.page-team .member .photo {
  /* make it a portrait frame, not full-card width */
  width: clamp(160px, 42%, 260px);
  aspect-ratio: 3 / 4;          /* passport-style portrait */
  margin: 16px auto 12px;       /* center inside the card */
  border-radius: 12px;
  overflow: hidden;
  background: #0b1f36;          /* fallback behind img */
}

/* Ensure the image fits the frame cleanly */
.page-team .member .photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;            /* fills the portrait frame without distortion */
  object-position: 50% 20%;     /* bias upward to keep eyes in view */
}

/* Optional: slightly smaller on compact phones */
@media (max-width: 560px) {
  .page-team .member .photo {
    width: clamp(150px, 60%, 220px);
  }
}

/* If your theme adds a status dot via :after on .photo, keep it positioned */
.page-team .member .photo::after {
  right: 10px;
  top: 10px;
}


/* ===== Compact Email Popover (classic style) ===== */
.email-popover{
  position: fixed; inset:auto auto;
  padding:12px; border-radius:12px;
  width: clamp(240px, 32vw, 340px);
  border:1px solid #e6edf7; background:#fff;
  box-shadow: 0 20px 40px rgba(11,37,64,.14), 0 1px 0 rgba(11,37,64,.06);
  color:#0f172a; margin:0;
  animation: ep-pop .14s ease-out;
}
@keyframes ep-pop{from{transform:translateY(6px);opacity:.0}to{transform:none;opacity:1}}

.email-popover::backdrop{background:transparent} /* non-modal but safe */

.email-popover .arrow{
  position:absolute; top:-6px; left:50%; translate:-50% 0;
  width:12px; height:12px; rotate:45deg;
  background:#fff; border-left:1px solid #e6edf7; border-top:1px solid #e6edf7;
}

.email-popover .ep-row{display:flex; gap:8px; align-items:center}
.email-popover input{
  flex:1 1 auto; height:38px; padding:0 10px; border-radius:9px;
  border:1px solid #e6edf7; background:#f9fbff; font-weight:700;
  letter-spacing:.2px; color:#0b2540;
}
.email-popover input:focus{outline:none; border-color:#cfe0f7; box-shadow:0 0 0 3px #e9f3ff}
.email-popover .ep-copy{
  height:38px; min-width:38px; display:inline-grid; place-items:center;
  padding:0 10px; border-radius:9px; border:1px solid #d9e6f8; background:#fff;
  color:#0b4073; font-weight:700; cursor:pointer;
}
.email-popover .ep-copy:hover{border-color:#bcd6fb}
.email-popover .ep-copy .copied{
  position:absolute; inset:auto auto -18px 0; font-size:12px; color:#0b7a43;
  opacity:0; transition:opacity .12s ease;
}
.email-popover.copied .ep-copy .copied{opacity:1}

.email-popover .ep-hint{display:block; margin-top:8px; color:#64748b; font-size:12px}
.email-popover kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  background:#f3f7fc; border:1px solid #e6edf7; border-bottom-color:#d9e6f8;
  padding:2px 6px; border-radius:6px; font-size:11px;
}

/* Buttons that trigger the popover (optional refinement) */
.btn-mini.email, .card-actions .btn-mini[href^="mailto:"]{position:relative}

/* --- Quick directory (no photos) --- */
.dir-list{
  display:grid; gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:820px){ .dir-list{ grid-template-columns:1fr; } }

.dir-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
  padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff;
  box-shadow:0 1px 0 #eef3f9;
}
.dir-ico{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center; font-weight:800; color:#fff; letter-spacing:.4px;
  background:
    radial-gradient(80% 60% at 30% 20%, #4aa3ff33, transparent 60%),
    radial-gradient(80% 60% at 70% 80%, #7dc6ff22, transparent 60%),
    linear-gradient(160deg, #0e3d6b 0%, #0a2646 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  user-select:none;
}
.dir-text strong{display:block; color:var(--brand-900)}
.dir-text span{display:block; color:#334155}



/* Premium “glass” container */
.team-charter .glass{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, #f3f9ff 0%, transparent 50%),
    linear-gradient(#fff,#fbfdff);
  box-shadow: 0 18px 34px rgba(16,24,40,.08);
}

/* Charter grid */
.pledge-grid{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.pledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pledge-grid{grid-template-columns:1fr}}

.pledge{
  border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px;
  box-shadow:0 1px 0 #eef3f9; transition:transform .18s, box-shadow .18s;
}
.pledge:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(16,24,40,.10)}
.pledge .ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,#0e3d6b,#0a2646); margin-bottom:8px; box-shadow:0 8px 22px rgba(0,0,0,.12)}
.pledge .ico svg{width:22px; height:22px}
.pledge h3{margin:0 0 4px; font-size:16px; color:var(--ink)}
.pledge p{margin:0; color:var(--muted)}

/* Contacts */
.contact-grid{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.contact-grid{grid-template-columns:1fr}}

.contact-card{
  display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff;
}
.contact-card img{width:60px; height:60px; object-fit:cover; border-radius:12px}
.contact-card .meta strong{display:block; color:var(--brand-900)}
.contact-card .meta span{display:block; color:#334155}
.contact-card .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.contact-card .chip{border:1px solid #e3e9f3; background:#fff; color:var(--ink); padding:4px 8px; border-radius:999px; font-weight:700; font-size:11px}
.contact-card .actions .btn-mini{height:32px; padding:0 10px; border-radius:8px; border:1px solid #dbe6f7; background:#fff; font-weight:700; cursor:pointer}
.contact-card .actions .btn-mini:hover{border-color:#bcd6fb}

/* Docs band */
.doc-band{
  margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  border:1px dashed #cfe0f7; background:#f8fbff; border-radius:12px; padding:12px 14px;
}
.doc-note{font-weight:800; color:#0b2540}
.doc-link{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:999px;
  background:#ffffff; border:1px solid #e2ecf8; text-decoration:none; color:#0b2540; font-weight:700;
}
.doc-link:hover{border-color:#bfd8fb}


.fade-carousel .slide { position: relative; overflow: hidden; }
.fade-carousel .slide > img,
.fade-carousel .slide > video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop nicely */
  display: block;
}

/* Optional Ken Burns on the active slide only */
@keyframes kb {
  from { transform: scale(1.04); }
  to   { transform: scale(1.10); }
}
.fade-carousel .slide.is-active > video {
  animation: kb 12s linear infinite alternate;
}


/* Carousel layout */
.carousel { position: relative; overflow: hidden; }
.carousel__stage { position: relative; min-height: clamp(360px, 60vh, 760px); }

/* Hide all slides by default; show only the active one */
.carousel .slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease;
}
.carousel .slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Make images/videos cover and stay centered */
.carousel .slide img,
.carousel .slide video {
  width: 100%; height: 100%;
  object-fit: cover;            /* crop edges instead of letterboxing */
  object-position: center;      /* keep subject centered */
  display: block;
}

/* If you use [hidden] in JS, make sure it's enforced */
[hidden] { display: none !important; }



/* Hide when [hidden] is present */
.mobile-nav[hidden] { display: none !important; }

/* Slide-over style; adjust header height (64px) to your real value */
.mobile-nav{
  position: fixed;
  inset: 64px 0 0 0;              /* below header */
  height: calc(100dvh - 64px);
  overflow: auto;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 12px 16px;
}

/* Keep the hamburger clickable above overlays */
.hamburger{ position: relative; z-index: 1001; }

/* Prevent body scroll when open (nice-to-have) */
body.menu-open { overflow: hidden; }



/* =========================================================
   MOBILE RESCUE v2  — hard overrides for < 768px
   (Place at the VERY END of style.css)
   ========================================================= */
html,body{overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}

/* ---- iOS safe-areas so stuff doesn't kiss the notch ---- */
@supports (padding:max(0px)) {
  .topbar,.main-header,.banner-description,.hot-slider .hotslide-meta,
  .mobile-nav,.container{
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
}

/* ===================== phones & small tablets ===================== */
@media (max-width: 768px){

  /* 1) Kill the crowded topbar; keep the site clean */
  .topbar{display:none !important}

  /* 2) Slim header + logo; keep everything on one line */
  :root{ --header-h:56px; }
  .main-header{border-bottom:1px solid #e5e7eb}
  .header-row{height:var(--header-h); padding:0 0}
  .logo img{height:40px !important}
  .main-nav{display:none !important}      /* rely on hamburger menu */
  .hamburger{display:block}

  /* 3) Search = compact pill; no extra icons */
  .search{flex:1 1 auto; min-width:0}
  .search input{
    height:36px; padding:0 38px 0 12px; font-size:14px;
    border-radius:999px;
  }
  .icon-btn,.mic-btn,.clear-btn{display:none !important}
  .search-btn{right:8px}

  /* 4) Hero: shorter, lighter overlays, no paddles/dots */
  :root{ --hero-h: clamp(220px, 44vh, 320px); }
  .carousel .carousel__stage{min-height: var(--hero-h)}
  .banner-description{
    margin: 0 0 12px 0;
    padding: 12px 14px;
    max-width: 92vw; border-radius: 12px;
  }
  .banner-name{font-size: clamp(20px, 6vw, 26px)}
  .moreBtn{padding:8px 14px; font-size:14px; border-width:1.5px}
  .hero-nav,.carousel__dots{display:none !important} /* swipe only */

  /* 5) Hot Products: force simple "chip" overlay; hide belts & thumbs */
  .hot-progress,.hot-thumbs{display:none !important}
  .hotslide::after{display:none} /* remove extra gradient weight */
  .hot-products .hot-slider .hotslide-meta{
    position:absolute; inset:auto 12px 12px 12px;
    display:flex; gap:8px; justify-content:space-between;
    padding:8px 10px; border-radius:999px; font-size:13px;
    background: rgba(10,24,42,.55);
    color:#fff; border:1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hot-products .hotslide img{height: min(44vh, 320px) !important}

  /* 6) New Products carousel: 1-up cards, always visible CTA */
  .new-products .np-controls{display:none}
  .new-products .card{flex:0 0 auto}
  .new-products .card .btn.sm{opacity:1; pointer-events:auto}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

@media (max-width: 600px){
  /* 7) Tighter container, readable body text */
  .container{padding:0 16px}
  body{font-size:15px; line-height:1.55}

  /* Make all section paddings lighter */
  .section{padding:32px 0}

  /* 8) One-column everywhere; prevent odd wraps */
  .value-grid,.cta-tiles,.news-grid,.why-grid,.intro-grid{grid-template-columns:1fr !important}
  .prod-grid{grid-template-columns:1fr !important}

  /* 9) Footer: stack and inflate tap targets */
  .footer-grid{grid-template-columns:1fr !important; gap:18px}
  .site-footer .footer-bottom .container{gap:8px; align-items:flex-start}
}

@media (max-width: 420px){
  /* 10) Ultra-compact tweaks */
  .logo img{height:36px !important}
  .banner-description{padding:10px 12px}
  .banner-name{font-size: clamp(19px, 6.5vw, 24px)}
  .search input{height:34px}
}


/* ===== Helpers: mobile-only visibility ================================= */
.mobile-only{ display:none }
@media (max-width:768px){
  .mobile-only{ display:block }
}

/* ===== Contact tabs (Email / Skype / Telephone) — phones only ========= */
@media (max-width:768px){
  .contact-tabs{
    padding:10px 0; border-bottom:1px solid #e6e9ee; background:#fff;
  }
  .contact-tabs__rail{
    display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:0 16px 6px;
  }
  .contact-tab{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:999px;
    background:#0b65a8; color:#fff; text-decoration:none; white-space:nowrap;
    box-shadow:0 4px 12px rgba(11,101,168,.18);
    font-weight:600; font-size:14px;
  }
  .contact-tab svg{ display:block }
}

/* ===== New Products — improved phone layout (no desktop change) ======= */
@media (max-width:768px){
  /* tighten header, hide arrows */
  .new-products .np-head{ margin-bottom:6px; padding:0 4px }
  .new-products .np-controls{ display:none }

  /* horizontal snap-scrolling track */
  .np-viewport{
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;     /* space for finger */
  }
  .np-track{
    gap:12px;
    padding:0 4px;
    transform: none !important;   /* ignore any desktop JS translate on mobile */
  }
  .new-products .card{
    flex:0 0 82%;                 /* bigger and more readable */
    min-width:82%;
    scroll-snap-align:start;
    border-radius:14px;
  }
  .new-products .card img{
    height:auto; aspect-ratio:16/10; object-fit:cover;
  }
  .new-products .card h4{ margin:10px 12px 0 }
  .new-products .card .btn.sm{ margin:10px 12px 12px }
}

/* ===== Footer — stacked, larger tap targets on phones ================= */
@media (max-width:768px){
  .site-footer .footer-grid{
    grid-template-columns:1fr; gap:18px; padding:28px 0;
  }
  .site-footer .footer-col a{
    padding:8px 0; font-size:15px;
  }
  .site-footer .social{ gap:12px }
  .site-footer .social img{ width:36px; height:36px }
  .footer-bottom .container{
    flex-direction:column; align-items:flex-start; gap:6px;
  }
}


/* ============== Mobile top tabs (desktop-style menu, mobile only) ============== */
.mobile-tabs{ display:none }
@media (max-width: 900px){
  .mobile-tabs{
    position: sticky; top: 64px; z-index: 29;
    display: flex; gap: 8px; overflow-x: auto;
    padding: 10px 20px; margin: 0;
    background: #fff; border-top: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }
  .mobile-tabs a{
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700; font-size: 14px;
    padding: 8px 12px; border-radius: 999px;
    background: #f8fafc; border: 1px solid #e5e7eb;
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
  }
  .mobile-tabs a:active{ transform: translateY(1px) }
  .mobile-tabs a.active{
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-900) 100%);
    color: #fff; border-color: transparent; box-shadow: var(--shadow-2);
  }
}

/* ============== Compact “Email / Skype / Call / Address” band on mobile ============== */
@media (max-width: 600px){
  .cta-contact{ padding: 14px 0 } /* was 28px */
  .cta-tiles{
    grid-template-columns: repeat(3, 1fr); /* 3-up row */
    gap: 10px;                              /* tighter */
  }
  .cta-tiles .tile{
    padding: 10px;                           /* was 14–16px */
    border-radius: 12px;
  }
  .cta-tiles .ico{
    width: 30px; height: 30px; margin: 0;    /* smaller badge */
  }
  .cta-tiles .tile h5{ display: none }       /* hide the small label to save space */
  .cta-tiles .tile p{
    margin: 0;
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ============== Footer: professional + smaller on mobile ============== */
@media (max-width: 600px){
  .site-footer{ margin-top: 24px }
  .footer-grid{ gap: 18px; padding: 22px 0 }      /* was 48px */
  .footer-brand img{ height: 40px }
  .footer-brand p{ font-size: 14px }
  .footer-col h4{ margin: 0 0 8px; font-size: 12px }
  .footer-col a{ padding: 4px 0; font-size: 14px }
  .social{ gap: 8px }
  .social img{ width: 28px; height: 28px; padding: 5px }
  .footer-bottom{ padding: 10px 0 }                /* was 14px */
}