/* =========================================================
   SRINGA LIFE SCIENCES — main stylesheet
   Soft modern pharma: rounded asymmetric surfaces, layered
   gradients, glass accents, generous depth.
   Palette drawn from the Sringa logo:
   Navy + Blue + Teal + Green + Gold
   Type: Sora (display) + Manrope (text) + JetBrains Mono (data)

   NOTE: the SRINGA IDENTITY LAYER at the foot of this file
   intentionally overrides the base rules above. Change visual
   signatures there, not here — see the index in that block.
   ========================================================= */

/* Fonts load via <link> in each page head (Sora + Manrope + JetBrains Mono);
   an @import here would block first paint. */

:root{
  /* ---- Brand colours, sampled from the Sringa logo ---- */
  --navy:#14417c;      /* SRINGA wordmark, ribbon top      */
  --navy-d:#0d2c57;    /* deepest navy                     */
  --blue:#1f5fa8;      /* bright blue, ribbon upper-middle */
  --blue-xl:#a8c6e8;   /* pale blue tint                   */
  --teal:#1e9e90;      /* ribbon middle / test-tube        */
  --teal-l:#35b8a8;
  --green:#1e8c4f;     /* "GA" + LIFE SCIENCES, ribbon tail */
  --green-l:#3fbf94;
  --gold:#d4a22f;      /* swoosh, triangle in "A", rules   */
  --gold-d:#b8891f;
  --gold-l:#e5b94e;
  --gold-xl:#f7e7be;

  /* Primary: navy blue (top of Sringa ribbon) */
  --pri:#14417c;
  --pri-d:#0d2c57;
  --pri-l:#1f5fa8;
  --pri-xl:#a8c6e8;
  --pri-bg:#eef4fb;
  /* Accent 1 (--orange var name kept for compatibility): Gold */
  --orange:#d4a22f;
  --orange-l:#e5b94e;
  --orange-xl:#f7e7be;
  /* Accent 2 (--red var name kept for compatibility): Teal (middle of ribbon) */
  --red:#1e9e90;
  --red-l:#35b8a8;
  /* Aurora pastel backgrounds — cool lab palette */
  --aurora-mint:#dcf2e4;
  --aurora-sky:#d6e9f8;
  --aurora-peach:#f6ecd2;
  --aurora-lavender:#cfe9e5;
  --grad-aurora:linear-gradient(135deg,#dcf2e4 0%,#d6e9f8 50%,#f6ecd2 100%);
  --grad-aurora-strong:linear-gradient(135deg,#cfe9e5 0%,#a8c6e8 50%,#e7cf90 100%);
  /* Signature gradient: the logo's navy → teal → green sweep */
  --grad-blue-emerald:linear-gradient(135deg,#14417c 0%,#1a7f7a 55%,#1e8c4f 100%);
  --grad-emerald:linear-gradient(135deg,#1e9e90 0%,#3fbf94 100%);
  --grad-blue:linear-gradient(135deg,#0d2c57 0%,#1f5fa8 100%);
  --grad-green:linear-gradient(135deg,#1e8c4f 0%,#3fbf94 100%);
  --grad-gold:linear-gradient(135deg,#b8891f 0%,#d4a22f 50%,#e5b94e 100%);
  --grad-orange-soft:linear-gradient(135deg,#1e9e90 0%,#35b8a8 100%);
  --grad-orange-warm:linear-gradient(135deg,#b8891f 0%,#d4a22f 50%,#e5b94e 100%);
  /* Deep navy base for nav/footer/dark sections */
  --ink-950:#071426;
  --ink-900:#0b1e38;
  --ink-800:#12304f;
  --white:#ffffff;
  --bg:#f7fafd;
  --g100:#f1f5f9;
  --g200:#e2e8f0;
  --g300:#cbd5e1;
  --g400:#94a3b8;
  --g500:#5a6b80;
  --g600:#475569;
  --g700:#334155;
  --g800:#1e293b;
  --g900:#0f172a;
  /* Typography identity: Sora for display/headings, Manrope for reading text.
     --ff stays the body/UI face so every existing rule inherits correctly. */
  --ff:"Manrope",system-ui,-apple-system,sans-serif;
  --ff-head:"Sora","Manrope",system-ui,sans-serif;
  --mono:"JetBrains Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--ff);color:var(--g800);font-size:15px;line-height:1.7;overflow-x:hidden;
  background:var(--white);
  background-image:
    radial-gradient(ellipse 60% 40% at 10% 0%,rgba(212,162,47,.08),transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 0%,rgba(30,158,144,.06),transparent 60%),
    radial-gradient(ellipse 80% 30% at 50% 100%,rgba(20,65,124,.05),transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4,h5,h6{font-family:var(--ff);font-weight:800;color:var(--g900);letter-spacing:-.03em;line-height:1.15;margin:0 0 .4em}
a{color:var(--pri);text-decoration:none;transition:.2s}
a:hover{color:var(--red)}
img{max-width:100%;display:block}
.container-wide{max-width:1260px;margin:0 auto;padding:0 28px}

/* ========== BUTTONS ========== */
.btn-sls{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;font-family:var(--ff);font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;border:none;cursor:pointer;
  text-decoration:none;border-radius:50px;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.btn-sls::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);transition:transform .7s;
}
.btn-sls:hover::before{transform:translateX(100%)}
.btn-sls.primary{
  background:var(--grad-blue-emerald);color:#fff;
  box-shadow:0 8px 22px rgba(30,140,79,.28),0 4px 10px rgba(20,65,124,.20);
}
.btn-sls.primary:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(30,140,79,.38),0 6px 14px rgba(20,65,124,.28);color:#fff}
.btn-sls.outline{
  background:transparent;color:var(--pri-d);
  border:2px solid var(--pri-d);
}
.btn-sls.outline:hover{background:var(--grad-blue);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,65,124,.3)}
.btn-sls.ghost-light{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.4);backdrop-filter:blur(10px)}
.btn-sls.ghost-light:hover{background:#fff;color:var(--pri-d);border-color:#fff;transform:translateY(-3px)}

/* ========== TOP BAR ========== */
.top-bar{
  /* mirrors the logo ribbon: navy → blue → teal → green → gold */
  background:linear-gradient(95deg,#0d2c57 0%,#14417c 22%,#1f5fa8 42%,#1e9e90 62%,#1e8c4f 80%,#d4a22f 100%);
  color:#fff;font-size:12px;
  padding:10px 0;letter-spacing:.02em;
  position:relative;overflow:hidden;
}
.top-bar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 90% at 15% 50%,rgba(0,0,0,.16),transparent 70%),
    radial-gradient(ellipse 50% 90% at 85% 50%,rgba(200,230,245,.22),transparent 70%);
}
.top-bar::after{
  content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,#f6ecd2 25%,#ffffff 50%,#f6ecd2 75%,transparent 100%);
  opacity:.55;
}
.top-bar .container-wide{position:relative;z-index:1}
.top-bar .top-info span{
  transition:transform .25s ease,color .25s ease;
  display:inline-flex;align-items:center;gap:7px;
}
.top-bar .top-info span:hover{transform:translateY(-1px)}
.top-bar .top-info .fa{
  color:#f6ecd2;
  background:rgba(255,255,255,.16);
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:10.5px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 6px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.10);
}
.top-bar .top-info span:hover .fa{
  background:rgba(255,255,255,.30);color:#fff;
}
.top-social{gap:8px}
.top-social a{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:#14417c;font-size:13px;
  background:#fff;
  border:1px solid rgba(255,255,255,.85);
  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s,color .3s,box-shadow .3s;
}
.top-social a:hover{
  color:#fff;
  background:linear-gradient(135deg,#0d2c57 0%,#14417c 100%);
  border-color:rgba(255,255,255,.95);
  transform:translateY(-2px) scale(1.10);
  box-shadow:0 8px 18px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.35);
}
.top-bar .container-wide{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.top-info{display:flex;gap:28px;flex-wrap:wrap}
.top-info span{display:inline-flex;align-items:center;gap:7px}
.top-info .fa{color:var(--orange-l)}
.top-social{display:flex;gap:8px}

/* ========== MAIN HEADER ========== */
.main-header{background:#fff;padding:14px 0;border-bottom:1px solid var(--g200)}
.main-header .container-wide{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:110px;width:auto;max-width:560px;object-fit:contain;display:block}
.site-footer .logo-img{height:115px;background:transparent;padding:0;max-width:500px}
@media(max-width:991px){.logo-img{height:88px;max-width:420px}.site-footer .logo-img{height:100px;max-width:440px}}
@media(max-width:768px){.logo-img{height:70px}.site-footer .logo-img{height:85px;max-width:380px}}
@media(max-width:480px){.logo-img{height:58px;max-width:300px}}

.search-pill{
  display:flex;align-items:center;background:var(--g100);
  border:1.5px solid var(--g200);border-radius:50px;padding:4px 4px 4px 22px;
  flex:1 1 auto;min-width:480px;max-width:640px;
  position:relative;transition:.3s ease;
}
.search-pill:focus-within{border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(212,162,47,.12)}
.search-pill .fa-search{color:var(--g400);margin-right:10px}
.search-pill input{flex:1;border:none;outline:none;font-family:var(--ff);font-size:13.5px;background:transparent;color:var(--g800)}
.search-pill button{
  background:var(--grad-blue-emerald);color:#fff;border:none;padding:11px 22px;
  font-family:var(--ff);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;cursor:pointer;transition:.3s ease;border-radius:50px;
  box-shadow:0 4px 12px rgba(212,162,47,.3);
}
.search-pill button:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(212,162,47,.4)}
.search-results-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:#fff;box-shadow:0 20px 52px rgba(20,65,124,.18);
  max-height:440px;overflow-y:auto;z-index:9999;display:none;
  border:1px solid var(--g200);border-radius:18px;
}
.search-results-dropdown.active{display:block;animation:slideUp .2s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.search-result-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--g100);cursor:pointer;transition:.15s}
.search-result-item:hover{background:var(--pri-bg)}
.search-result-item:last-child{border-bottom:none}
.result-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:4px 10px;border-radius:50px}
.result-badge.impurity{background:var(--aurora-sky);color:var(--pri)}
.result-badge.nitroso{background:var(--aurora-peach);color:#8a6410}
.result-badge.intermediate{background:var(--aurora-mint);color:#0d2c57}
.search-result-item .meta{font-size:12px;color:var(--g500);margin-top:2px}
.search-result-item .meta b{color:var(--pri);font-weight:600}
.search-result-item .name{font-weight:600;font-size:14px;color:var(--g800)}
.search-result-item mark{background:var(--orange-xl);color:inherit;padding:0 2px}
.search-empty{padding:24px;text-align:center;color:var(--g500);font-size:13px}

/* ========== NAV ========== */
.nav-bar{
  background:linear-gradient(90deg,#f7e7be 0%,#d6e9f8 45%,#cfe9e5 70%,#f6ecd2 100%);
  position:relative;z-index:100;
  border-top:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 20px rgba(20,65,124,.08);
}
.nav-bar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 8% 50%,rgba(212,162,47,.3),transparent 35%),
    radial-gradient(ellipse at 92% 50%,rgba(30,158,144,.26),transparent 35%),
    radial-gradient(ellipse at 50% 50%,rgba(168,198,232,.2),transparent 45%);
}
.nav-bar::after{display:none}
.nav-bar.sticky{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(14px);
  background:linear-gradient(90deg,rgba(209,250,229,.95) 0%,rgba(214,233,248,.95) 45%,rgba(207,233,229,.95) 70%,rgba(246,236,210,.95) 100%);
  box-shadow:0 8px 28px rgba(20,65,124,.18);
  animation:slideDown .35s cubic-bezier(.22,1,.36,1);
}

/* ===== STICKY NAV LAYOUT: [Brand] — [Menu centered] — [Search] ===== */

/* Compact brand mark (visible only when sticky) */
.nav-brand{
  display:none;align-items:center;gap:10px;flex-shrink:0;
  text-decoration:none;padding-right:4px;
}
.nav-brand:hover{text-decoration:none}
.nav-brand .nb-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
.nav-brand .nb-icon img{width:100%;height:100%;object-fit:contain;display:block}
.nav-brand .nb-text{
  display:flex;flex-direction:column;line-height:1.1;
}
.nav-brand .nb-text b{
  font-family:var(--ff);font-size:14px;font-weight:800;color:var(--g900);letter-spacing:-.01em;
}
.nav-bar.sticky .nav-brand{display:flex;animation:navFadeIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes navFadeIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1100px){.nav-brand .nb-text{display:none}}

/* Search pill */
.nav-search{
  display:none;
  align-items:center;flex-shrink:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,1);
  border-radius:50px;padding:3px 3px 3px 18px;
  width:270px;
  box-shadow:0 6px 18px rgba(20,65,124,.1);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.nav-search:focus-within{
  border-color:rgba(212,162,47,.5);
  box-shadow:0 0 0 4px rgba(212,162,47,.15),0 8px 22px rgba(212,162,47,.2);
}
.nav-search .fa-search{color:var(--g500);margin-right:10px;font-size:13px;flex-shrink:0}
.nav-search input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--ff);font-size:13px;color:var(--g800);padding:8px 0;
}
.nav-search input::placeholder{color:var(--g400)}
.nav-search button{
  flex-shrink:0;margin-left:8px;
  background:var(--grad-blue-emerald);color:#fff;border:none;
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:0 4px 12px rgba(212,162,47,.3);
}
.nav-search button:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(212,162,47,.42)}
.nav-search-drop{
  position:absolute;top:calc(100% + 10px);right:0;width:400px;
  background:#fff;border-radius:18px;border:1px solid var(--g200);
  box-shadow:0 20px 52px rgba(20,65,124,.2);
  max-height:420px;overflow-y:auto;z-index:9999;display:none;
}
.nav-search-drop.active{display:block;animation:slideUp .22s ease}

/* When sticky: three-zone layout (brand left | menu center | search right) */
.nav-bar.sticky .container-wide{justify-content:space-between;gap:20px}
.nav-bar.sticky .nav-menu{flex:1;justify-content:center;gap:0;flex-wrap:nowrap}
.nav-bar.sticky .nav-menu>li>a{padding:16px 14px;font-size:12.5px}
.nav-bar.sticky .nav-search{
  display:flex;
  animation:navSearchIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes navSearchIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

@media(max-width:1280px){.nav-search{width:240px}}
@media(max-width:1140px){.nav-search{width:200px}.nav-bar.sticky .nav-menu>li>a{padding:16px 10px;font-size:12px}}
@media(max-width:991px){.nav-search,.nav-brand{display:none !important}.nav-bar.sticky .container-wide{justify-content:center}}
@keyframes navDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:.7}to{transform:translateY(0);opacity:1}}
.nav-bar .container-wide{display:flex;justify-content:center;align-items:center;position:relative;z-index:2}
.nav-menu{display:flex;gap:2px;list-style:none;padding:0;margin:0}
.nav-menu>li{position:relative}
.nav-menu>li>a,
.nav-menu>li>a:hover,
.nav-menu>li>a:focus,
.nav-menu>li>a:active,
.nav-menu>li.active>a{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
}
.nav-menu>li>a{
  display:block;padding:18px 22px;color:var(--g800);
  font-family:var(--ff);font-weight:700;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;position:relative;
  transition:all .35s cubic-bezier(.22,1,.36,1);
}
/* === SPLIT CAPSULE === Two halves of a pill that pull apart on hover */
/* Left half */
.nav-menu>li>a::before{
  content:"";position:absolute;
  top:8px;bottom:8px;left:10px;right:50%;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);border-right:none;
  border-radius:999px 0 0 999px;
  box-shadow:0 2px 8px rgba(20,65,124,.06),inset 0 0 0 1px rgba(255,255,255,.25);
  z-index:-1;pointer-events:none;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),
             background .35s ease,box-shadow .35s ease,
             border-color .35s ease,border-radius .35s ease;
}
/* Right half */
.nav-menu>li>a::after{
  content:"";position:absolute;
  top:8px;bottom:8px;left:50%;right:10px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);border-left:none;
  border-radius:0 999px 999px 0;
  box-shadow:0 2px 8px rgba(20,65,124,.06),inset 0 0 0 1px rgba(255,255,255,.25);
  z-index:-1;pointer-events:none;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),
             background .35s ease,box-shadow .35s ease,
             border-color .35s ease,border-radius .35s ease;
}
/* HOVER — capsule splits open horizontally — each half keeps its FLAT inner rim (broken edge) */
.nav-menu>li>a:hover{color:#0d2c57;transform:translateY(-1px)}
.nav-menu>li>a:hover::before{
  transform:translateX(-10px);
  background:linear-gradient(135deg,#f6ecd2 0%,#d6e9f8 100%);
  border:1px solid rgba(31,95,168,.35);
  border-radius:999px 4px 4px 999px;
  box-shadow:0 10px 22px rgba(20,65,124,.22),
             inset -3px 0 6px rgba(13,44,87,.12),
             inset 0 0 0 1px rgba(255,255,255,.45);
}
.nav-menu>li>a:hover::after{
  transform:translateX(10px);
  background:linear-gradient(135deg,#d6e9f8 0%,#a8c6e8 100%);
  border:1px solid rgba(31,95,168,.35);
  border-radius:4px 999px 999px 4px;
  box-shadow:0 10px 22px rgba(20,65,124,.22),
             inset 3px 0 6px rgba(13,44,87,.12),
             inset 0 0 0 1px rgba(255,255,255,.45);
}
/* ACTIVE — capsule sealed, gradient brand color, no split */
.nav-menu>li.active>a{color:#fff}
.nav-menu>li.active>a::before{
  background:linear-gradient(135deg,#14417c 0%,#1f5fa8 100%);
  border:1px solid rgba(255,255,255,.25);border-right:none;
  box-shadow:0 10px 22px rgba(20,65,124,.32),inset 0 0 0 1px rgba(255,255,255,.20);
}
.nav-menu>li.active>a::after{
  background:linear-gradient(135deg,#1f5fa8 0%,#1e9e90 100%);
  border:1px solid rgba(255,255,255,.25);border-left:none;
  box-shadow:0 10px 22px rgba(20,65,124,.32),inset 0 0 0 1px rgba(255,255,255,.20);
}
.nav-menu>li.active>a:hover::before,
.nav-menu>li.active>a:hover::after{transform:none}
.nav-menu>li.active>a:hover{color:#fff;transform:translateY(-1px)}
.nav-menu li .fa-caret-down{font-size:10px;margin-left:6px;opacity:.7;color:#14417c;transition:transform .3s}
.nav-menu>li.active>.fa-caret-down,
.nav-menu>li.active>a .fa-caret-down{color:#fff}
.nav-menu>li:hover>a .fa-caret-down{transform:rotate(180deg)}
.dropdown-menu-sls{
  position:absolute;top:100%;left:0;min-width:290px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 48px rgba(20,65,124,.18),0 6px 18px rgba(30,158,144,.12);
  border-radius:16px;margin-top:10px;
  padding:10px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s cubic-bezier(.22,1,.36,1);
  border:1px solid rgba(255,255,255,.8);
}
.dropdown-menu-sls::before{display:none}
.dropdown-menu-sls::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,#d4a22f 0%,#1f5fa8 50%,#1e9e90 100%);
}
.nav-menu>li:hover .dropdown-menu-sls{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu-sls a,
.dropdown-menu-sls a:hover,
.dropdown-menu-sls a:focus,
.dropdown-menu-sls a:active{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
}
.dropdown-menu-sls a{
  display:block;padding:12px 18px;color:#334155;font-size:13px;
  font-weight:600;transition:.28s cubic-bezier(.22,1,.36,1);
  border-radius:10px;
  position:relative;overflow:hidden;
}
.dropdown-menu-sls a::after{
  content:"";position:absolute;left:18px;right:18px;bottom:6px;height:2.5px;
  background:linear-gradient(90deg,#d4a22f 0%,#1f5fa8 50%,#1e9e90 100%);
  border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.dropdown-menu-sls a:hover{
  color:#0d2c57;
  background:linear-gradient(90deg,rgba(212,162,47,.12) 0%,rgba(214,233,248,.3) 60%,rgba(246,236,210,.2) 100%);
  padding-left:24px;
}
.dropdown-menu-sls a:hover::after{transform:scaleX(1)}
.nav-toggle{display:none;background:transparent;border:none;color:#1e3a8a;font-size:22px;padding:14px;cursor:pointer}

/* ========== HERO ========== */
.hero-slider{position:relative;height:720px;overflow:hidden;background:#06121f}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;background-size:cover;background-position:center;transform:scale(1.04);filter:saturate(1.15) contrast(1.05) brightness(1.05)}
.hero-slide.active{opacity:1;z-index:2;transform:scale(1);transition:opacity 1.1s ease, transform 8s ease-out}
/* Colored left fade — deep navy → teal accent → transparent, keeps photo vibrant */
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 18% 50%,rgba(212,162,47,.28) 0%,rgba(212,162,47,0) 60%),
    radial-gradient(ellipse 50% 70% at 12% 30%,rgba(31,95,168,.25) 0%,rgba(31,95,168,0) 55%),
    linear-gradient(95deg,rgba(8,20,40,.82) 0%,rgba(12,28,52,.62) 30%,rgba(15,35,62,.28) 55%,rgba(15,35,62,.05) 78%,rgba(15,35,62,0) 100%);
}
/* Glow orb + bottom vignette */
.hero-slide::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle 320px at 22% 45%,rgba(63,191,148,.18) 0%,rgba(63,191,148,0) 70%),
    linear-gradient(180deg,rgba(6,18,31,0) 60%,rgba(6,18,31,.5) 100%);
}
.hero-content{
  position:relative;z-index:3;max-width:620px;padding:0 28px;
  height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:170px;
  margin:0 auto 0 max(28px,calc((100vw - 1260px)/2 + 28px));
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 12px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-family:var(--ff);font-weight:600;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;width:fit-content;
  border-radius:50px;box-shadow:0 6px 22px rgba(0,0,0,.35);
  animation:fadeIn .6s .1s both;
}
.hero-badge .dot{
  width:8px;height:8px;border-radius:50%;background:#d4a22f;
  box-shadow:0 0 0 3px rgba(212,162,47,.22),0 0 12px rgba(212,162,47,.9);
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(212,162,47,.22),0 0 12px rgba(212,162,47,.9)}50%{box-shadow:0 0 0 6px rgba(212,162,47,.05),0 0 16px rgba(212,162,47,1)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero-title{
  font-family:var(--ff);font-weight:800;
  font-size:clamp(32px,4.2vw,56px);line-height:1.08;color:#fff;
  letter-spacing:-.03em;margin:14px 0 0;
  text-shadow:0 2px 24px rgba(0,0,0,.55),0 0 60px rgba(212,162,47,.15);
}
.hero-title .word{display:inline-block;margin-right:.18em;opacity:0;transform:translateY(18px)}
.hero-slide.active .hero-title .word{animation:wordReveal .55s forwards}
@keyframes wordReveal{to{opacity:1;transform:translateY(0)}}
.hero-title .accent{
  font-style:italic;font-weight:800;
  /* all stops kept light so the shimmer stays legible over the dark hero photo */
  background:linear-gradient(120deg,#e5b94e 0%,#5fd6b4 25%,#a8c6e8 55%,#e5b94e 90%,#6fe0c8 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmerText 6s ease-in-out infinite;
}
@keyframes shimmerText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-line{
  position:relative;width:64px;height:3px;
  background:linear-gradient(90deg,#d4a22f,#1f5fa8,#d4a22f);
  background-size:200% 100%;
  margin:16px 0 14px;border-radius:4px;
  box-shadow:0 0 22px rgba(212,162,47,.65);
  animation:shimmerLine 4s ease-in-out infinite;
}
@keyframes shimmerLine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-line::after{content:none}
.hero-desc{
  color:rgba(255,255,255,.96);font-size:15.5px;max-width:500px;line-height:1.65;
  margin:0 0 24px;animation:fadeIn .6s .5s both;
  text-shadow:0 1px 16px rgba(0,0,0,.7);
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;animation:fadeIn .6s .7s both}
/* Floating decorative orbs */
.hero-particle{display:block;position:absolute;border-radius:50%;z-index:1;pointer-events:none;filter:blur(40px);opacity:.55}
.hero-particle.p1{width:300px;height:300px;background:radial-gradient(circle,#d4a22f 0%,transparent 70%);top:-80px;left:8%;animation:floatOrb 14s ease-in-out infinite}
.hero-particle.p2{width:220px;height:220px;background:radial-gradient(circle,#1f5fa8 0%,transparent 70%);bottom:-40px;left:28%;animation:floatOrb 18s ease-in-out infinite reverse;opacity:.4}
.hero-particle.p3{width:180px;height:180px;background:radial-gradient(circle,#1e9e90 0%,transparent 70%);top:40%;left:42%;animation:floatOrb 22s ease-in-out infinite;opacity:.32}
@keyframes floatOrb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.08)}66%{transform:translate(-20px,25px) scale(.94)}}
.hero-controls{position:absolute;bottom:24px;right:max(32px,calc((100vw - 1260px)/2 + 32px));z-index:5;display:flex;align-items:center;gap:14px}
.hero-arrow{
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:all .25s ease;
}
.hero-arrow:hover{background:var(--grad-emerald);border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,162,47,.4)}
.hero-dots{display:flex;gap:8px}
.hero-dot{width:24px;height:3px;border:none;background:rgba(255,255,255,.3);cursor:pointer;transition:.35s;border-radius:4px}
.hero-dot.active{background:var(--grad-emerald);width:48px;box-shadow:0 0 12px rgba(212,162,47,.6)}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1);z-index:5}
.hero-progress-bar{height:100%;background:var(--grad-emerald);width:0;transition:width .1s linear;box-shadow:0 0 10px rgba(212,162,47,.7)}

/* ===== HERO STAT STRIP (glass overlay) ===== */
.hero-stat-strip{
  position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:4;
  width:min(1180px,calc(100% - 56px));
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:rgba(7,20,38,.42);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  padding:16px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18);
  animation:fadeIn .8s .4s both;
}
.hs-item{
  display:flex;align-items:center;gap:14px;color:#fff;
  padding:6px 14px;
  border-right:1px solid rgba(255,255,255,.10);
  transition:transform .35s ease;
}
.hs-item:last-child{border-right:none}
.hs-item:hover{transform:translateY(-2px)}
.hs-ic{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,rgba(212,162,47,.35),rgba(31,95,168,.30));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(212,162,47,.18);
}
.hs-item b{font-family:var(--ff);font-size:16px;font-weight:800;color:#fff;display:block;line-height:1;letter-spacing:-.01em}
.hs-item small{display:block;font-size:9.5px;color:rgba(255,255,255,.78);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-top:5px}
@media (max-width:880px){
  .hero-stat-strip{grid-template-columns:1fr 1fr;bottom:120px;padding:12px}
  .hs-item:nth-child(2n){border-right:none}
  .hs-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:12px}
}
@media (max-width:560px){
  .hero-stat-strip{grid-template-columns:1fr;bottom:140px}
  .hs-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.10);padding:10px 6px}
  .hs-item:last-child{border-bottom:none}
}

/* Slide counter */
.hero-counter{
  display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--ff);color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding-right:14px;margin-right:8px;
  border-right:1px solid rgba(255,255,255,.20);
}
.hero-counter b{
  font-size:18px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(135deg,#e5b94e 0%,#1f5fa8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-counter .sep,.hero-counter .total{color:rgba(255,255,255,.55);font-weight:600}
@media (max-width:560px){.hero-counter{display:none}}

/* ========== SECTIONS ========== */
section{padding:90px 0}
.section-label{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 16px;background:var(--aurora-mint);
  border-radius:50px;color:var(--orange);
  font-family:var(--ff);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;
}
.section-label .bar{width:20px;height:2px;background:var(--grad-emerald);border-radius:2px}
.section-title{font-size:clamp(28px,3.5vw,46px);margin:14px 0 12px;line-height:1.12;color:var(--g900);letter-spacing:-.02em}
.section-title em{
  font-style:normal;font-weight:800;
  background:var(--grad-blue-emerald);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-desc{color:var(--g500);font-size:15.5px;max-width:600px;line-height:1.75}
.accent-line{width:56px;height:4px;background:var(--grad-emerald);margin:0 0 16px;border-radius:4px}

/* ========== WELCOME ========== */
/* ===== HOME ABOUT — Asymmetric visual with floating stat chips ===== */
.about-home{padding-top:90px;padding-bottom:90px;position:relative;overflow:hidden}
.about-home::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 50% at 90% 10%,rgba(212,162,47,.12),transparent 60%),
    radial-gradient(ellipse 40% 40% at 5% 90%,rgba(31,95,168,.08),transparent 60%);
  pointer-events:none;z-index:0;
}
.about-home .container-wide{position:relative;z-index:1}
.about-home-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.about-visual{position:relative;height:520px}
.av-frame{
  position:absolute;top:0;left:0;width:78%;height:88%;
  border-radius:24px;overflow:hidden;
  box-shadow:0 30px 70px rgba(13,27,62,.16),0 12px 30px rgba(212,162,47,.16);
  border:1px solid rgba(255,255,255,.6);
}
.av-frame::before{
  content:"";position:absolute;inset:0;border-radius:24px;padding:2px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--pri) 60%,var(--red) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;pointer-events:none;z-index:3;
}
.av-img{
  position:absolute;inset:0;
  background-image:url('../images/bg/Picture8.jpg?v2');
  background-size:cover;background-position:center;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.about-visual:hover .av-img{transform:scale(1.04)}
.av-overlay{
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(7,20,38,.08) 0%,rgba(7,20,38,.55) 100%);
}
.av-tag{
  position:absolute;bottom:18px;left:18px;z-index:2;
  background:rgba(255,255,255,.92);color:var(--pri-d);
  font-size:11px;font-weight:700;padding:8px 14px;border-radius:50px;
  letter-spacing:.05em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(13,27,62,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.av-tag i{color:var(--orange)}
.av-chip{
  position:absolute;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--g200);border-radius:16px;
  padding:14px 18px;
  box-shadow:0 14px 30px rgba(13,27,62,.10),0 6px 14px rgba(212,162,47,.10);
  z-index:5;min-width:180px;
  animation:chipFloat 6s ease-in-out infinite;
}
@keyframes chipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.av-chip .ico{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;flex-shrink:0;
}
.av-chip b{font-family:var(--ff);font-size:18px;font-weight:800;color:var(--g900);display:block;line-height:1.05;letter-spacing:-.015em}
.av-chip small{display:block;font-size:10px;color:var(--g500);text-transform:uppercase;letter-spacing:.10em;font-weight:600;margin-top:3px}
.av-chip-1{top:6%;right:0;animation-delay:0s}
.av-chip-1 .ico{background:linear-gradient(135deg,#14417c,#d4a22f)}
.av-chip-2{top:46%;right:-8%;animation-delay:1.5s}
.av-chip-2 .ico{background:linear-gradient(135deg,#d4a22f,#35b8a8)}
.av-chip-3{bottom:6%;right:22%;animation-delay:3s}
.av-chip-3 .ico{background:linear-gradient(135deg,#1e9e90,#b8891f)}

.about-content .section-title{margin-bottom:10px}
.about-mini-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:6px 0 28px;padding:18px 4px;
  border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);
}
.about-mini-stats > div{text-align:left;padding:0 6px}
.about-mini-stats b{
  font-family:var(--ff);font-size:26px;font-weight:800;
  background:linear-gradient(135deg,#14417c 0%,#d4a22f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;line-height:1;display:block;
}
.about-mini-stats span{display:block;font-size:11px;color:var(--g500);text-transform:uppercase;letter-spacing:.10em;font-weight:600;margin-top:6px}

@media (max-width: 980px){
  .about-home-grid{grid-template-columns:1fr;gap:60px}
  .about-visual{height:auto;min-height:420px}
  .av-frame{width:88%;height:340px;position:relative}
  .av-chip-1{top:8%;right:0}
  .av-chip-2{top:50%;right:-2%}
  .av-chip-3{bottom:8%;right:18%}
}
@media (max-width: 580px){
  .av-chip{min-width:160px;padding:10px 14px}
  .about-mini-stats{grid-template-columns:1fr 1fr}
}

.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.welcome-img{position:relative;height:460px}
.welcome-img .circle-img{
  position:absolute;inset:0;border-radius:24px;overflow:hidden;
  background-image:url('../images/bg/Picture8.jpg?v2');
  background-size:cover;background-position:center;
  box-shadow:0 30px 60px rgba(20,65,124,.18),0 10px 24px rgba(212,162,47,.14);
}
.welcome-img .ring{
  position:absolute;top:-16px;left:-16px;right:16px;bottom:16px;
  border-radius:24px;background:var(--grad-blue-emerald);
  opacity:.2;z-index:-1;filter:blur(6px);
}
.welcome-img .badge-float{
  position:absolute;bottom:-20px;right:-20px;
  background:#fff;color:var(--g800);padding:18px 22px;
  display:flex;align-items:center;gap:14px;z-index:2;
  border-radius:18px;box-shadow:0 18px 40px rgba(20,65,124,.18);
}
.welcome-img .badge-float b{font-family:var(--ff);font-size:30px;color:var(--pri-d);display:block;line-height:1}
.welcome-img .badge-float small{font-size:10px;color:var(--g500);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.welcome-img .badge-float .ico{
  width:50px;height:50px;background:var(--grad-emerald);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  border-radius:14px;box-shadow:0 6px 18px rgba(212,162,47,.4);
}

/* ========== RECENT CAROUSEL ========== */
.recent-section{
  background:linear-gradient(110deg,#f7e7be 0%,#bfdbfe 38%,#e0e7ff 62%,#f6ecd2 100%);
  color:var(--g800);position:relative;overflow:hidden;
}
.recent-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 45% 55% at 8% 50%,rgba(212,162,47,.42),transparent 55%),
    radial-gradient(ellipse 40% 55% at 92% 50%,rgba(31,95,168,.32),transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 85%,rgba(30,158,144,.22),transparent 55%);
  pointer-events:none;
}
.recent-section h2{color:var(--g900);position:relative}
.recent-section .section-label{
  background:rgba(255,255,255,.7);color:#0d2c57;
  border:1px solid rgba(212,162,47,.3);backdrop-filter:blur(8px);
}
.recent-section .section-label .bar{background:linear-gradient(90deg,#d4a22f,#1f5fa8)}
.recent-section .section-desc{color:var(--g600);position:relative}
.carousel-track{display:flex;gap:20px;margin-top:0;animation:scrollLoop 50s linear infinite;width:max-content}
.carousel-track:hover{animation-play-state:paused}
@keyframes scrollLoop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== MOSAIC: featured card + auto-scrolling row ===== */
.recent-mosaic{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:28px;
  align-items:stretch;
  position:relative;z-index:2;
}
.mosaic-scroll{
  position:relative;overflow:hidden;min-width:0;
  border-radius:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}

.featured-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  border:1px solid var(--g200);
  box-shadow:0 18px 50px rgba(13,27,62,.10),0 6px 18px rgba(212,162,47,.14);
  padding:22px;
  display:flex;flex-direction:column;gap:14px;
  overflow:hidden;
  text-decoration:none;color:var(--g800);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.featured-card:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(13,27,62,.14),0 10px 22px rgba(212,162,47,.20)}
.featured-card::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:2px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--pri) 50%,var(--red) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;pointer-events:none;
}
.featured-card .featured-badge{
  position:absolute;top:14px;left:14px;z-index:4;
  background:var(--grad-emerald);color:#fff;
  font-size:9px;font-weight:700;padding:5px 12px;
  text-transform:uppercase;letter-spacing:.1em;border-radius:20px;
  box-shadow:0 4px 14px rgba(212,162,47,.45);
}
.featured-card .featured-cat{
  position:absolute;top:14px;right:14px;z-index:4;
  background:rgba(255,255,255,.95);color:var(--pri);
  font-size:9px;font-weight:700;padding:5px 12px;
  text-transform:uppercase;letter-spacing:.1em;border-radius:20px;border:1px solid var(--g200);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.featured-card .feat-struct{
  height:230px;min-height:230px;
  background:linear-gradient(135deg,#f7e7be 0%,#d6e9f8 50%,#f6ecd2 100%);
  border-radius:16px;border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:14px;flex-shrink:0;
}
.featured-card .feat-struct::before{
  content:"";position:absolute;inset:8px;background:#fff;border-radius:12px;
}
.featured-card .feat-struct img{
  position:relative;z-index:2;max-height:190px;max-width:92%;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.07));
}
.featured-card .feat-struct .fallback{
  position:relative;z-index:2;color:var(--pri-l);font-size:80px;
}
.featured-card .feat-struct .struct-wm{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-22deg);
  font-family:var(--ff);font-weight:700;font-size:14px;
  color:rgba(13,44,87,.22);letter-spacing:.14em;
  pointer-events:none;user-select:none;z-index:3;
  white-space:nowrap;mix-blend-mode:multiply;
}
.featured-card .feat-info{display:flex;flex-direction:column;gap:8px;flex:1}
.featured-card h3{font-size:19px;font-weight:800;color:var(--g900);letter-spacing:-.015em;margin:0;line-height:1.25}
.featured-card .feat-chem{
  font-size:12.5px;color:var(--g500);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.featured-card dl{
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:6px 0 0;font-size:12px;
  padding:12px 14px;background:var(--bg);border:1px solid var(--g100);border-radius:12px;
}
.featured-card dt{color:var(--pri);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
.featured-card dd{margin:0;color:var(--g900);font-family:var(--mono);font-weight:500;font-size:12px}
.featured-card .feat-cta{
  margin-top:6px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#14417c 0%,#d4a22f 100%);
  color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.06em;
  padding:12px 18px;border-radius:50px;text-transform:uppercase;text-decoration:none;
  box-shadow:0 8px 20px rgba(20,65,124,.25);
  transition:transform .3s,box-shadow .3s;
}
.featured-card .feat-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(20,65,124,.35);color:#fff;text-decoration:none}

@media (max-width: 980px){
  .recent-mosaic{grid-template-columns:1fr;gap:24px}
  .featured-card{order:-1}
  .mosaic-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%)}
}
.product-card{
  width:290px;min-width:290px;max-width:290px;
  background:#fff;padding:18px;color:var(--g800);
  position:relative;border:1px solid var(--g200);
  border-radius:18px;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s;
  text-decoration:none;
  display:flex;flex-direction:column;
  box-shadow:0 4px 14px rgba(13,27,62,.06);
  will-change:transform;
}
.product-card::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:2px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--pri) 50%,var(--red) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:5;
}
.product-card::after{
  content:"";position:absolute;top:-60%;left:-60%;width:60%;height:220%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:translateX(-100%) skewX(-18deg);transition:transform .9s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:4;
}
.product-card:hover{
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 24px 48px rgba(20,65,124,.16),0 8px 20px rgba(212,162,47,.14);
  border-color:transparent;text-decoration:none;
}
.product-card:hover::before{opacity:1}
.product-card:hover::after{transform:translateX(400%) skewX(-18deg)}
.product-card .new-badge{
  position:absolute;top:10px;right:10px;z-index:6;
  background:var(--grad-emerald);color:#fff;
  font-size:9px;font-weight:700;padding:4px 10px;text-transform:uppercase;letter-spacing:.1em;
  border-radius:20px;box-shadow:0 4px 14px rgba(212,162,47,.45);
}
.product-card .new-badge::before{
  content:"";position:absolute;inset:-2px;border-radius:22px;
  background:var(--orange);opacity:.4;z-index:-1;
  animation:badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{transform:scale(1);opacity:.4}
  50%{transform:scale(1.15);opacity:0}
}
.product-card .cat-chip{
  position:absolute;top:10px;left:10px;z-index:6;
  background:#fff;color:var(--pri);
  font-size:9px;font-weight:700;padding:4px 10px;
  text-transform:uppercase;letter-spacing:.1em;
  border-radius:20px;border:1px solid var(--g200);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:all .3s ease;
}
.product-card:hover .cat-chip{background:var(--grad-blue-emerald);color:#fff;border-color:transparent}
.product-card .struct{
  height:150px;min-height:150px;
  background:linear-gradient(135deg,#f7e7be 0%,#d6e9f8 50%,#f6ecd2 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--pri-l);font-size:36px;margin-bottom:16px;
  border-radius:14px;border:1px solid rgba(255,255,255,.6);
  position:relative;overflow:hidden;flex-shrink:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card .struct::before{
  content:"";position:absolute;inset:6px;background:#fff;border-radius:10px;z-index:0;
}
.product-card .struct>*{position:relative;z-index:1}
.product-card:hover .struct{transform:scale(1.02)}
.product-card .struct.has-img{padding:10px}
.product-card .struct.has-img img{
  max-height:124px;max-width:92%;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.07));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .struct.has-img img{transform:scale(1.06)}
.product-card .struct .struct-wm{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-22deg);
  font-family:var(--ff);font-weight:700;font-size:12px;
  color:rgba(13,44,87,.22);
  letter-spacing:.14em;pointer-events:none;user-select:none;z-index:4;
  white-space:nowrap;mix-blend-mode:multiply;
  text-shadow:0 0 1px rgba(13,44,87,.18);
}
.product-card h4{
  font-size:13px;margin:0 0 10px;color:var(--g900);font-weight:700;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  word-break:break-word;overflow-wrap:break-word;
  min-height:56px;letter-spacing:-.01em;
  transition:color .3s ease;
}
.product-card:hover h4{color:var(--pri-d)}
.product-card .card-footer{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--g100);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.product-card .cas{font-size:11px;color:var(--g500);margin:0;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-card .cas b{color:var(--pri);font-weight:700}
.product-card .formula{
  display:inline-block;font-family:var(--mono);font-size:10.5px;
  padding:4px 10px;background:var(--pri-bg);color:var(--pri);font-weight:600;
  border-radius:20px;white-space:nowrap;flex-shrink:0;
  transition:all .3s ease;
}
.product-card:hover .formula{background:var(--grad-emerald);color:#fff}

/* ========== SERVICES ========== */
.services-timeline{margin-top:56px;position:relative}
.services-timeline::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;
  background:linear-gradient(180deg,var(--orange) 0%,var(--pri) 50%,var(--red) 100%);
  transform:translateX(-50%);border-radius:3px;
}
.svc-row{display:grid;grid-template-columns:1fr 100px 1fr;gap:20px;align-items:center;margin-bottom:80px}
.svc-row:last-child{margin-bottom:0}
.svc-text{padding:26px}
.svc-row.reverse .svc-image{order:1}
.svc-row.reverse .svc-number{order:2}
.svc-row.reverse .svc-text{order:3;text-align:right}
.svc-number{
  width:76px;height:76px;background:var(--grad-blue-emerald);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff);font-size:24px;font-weight:800;
  margin:0 auto;position:relative;z-index:2;
  box-shadow:0 10px 28px rgba(212,162,47,.36),0 4px 10px rgba(20,65,124,.22);
}
.svc-number::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  background:var(--grad-emerald);opacity:.3;filter:blur(4px);z-index:-1;
}
.svc-image{position:relative;height:300px}
.svc-image .circ{
  position:absolute;inset:0;border-radius:24px;overflow:hidden;
  box-shadow:0 24px 50px rgba(20,65,124,.18),0 8px 20px rgba(212,162,47,.14);
  background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.svc-image:hover .circ{transform:scale(1.03)}
.svc-text h3{font-size:28px;margin:12px 0 14px;line-height:1.2;letter-spacing:-.015em}
.svc-text p{color:var(--g600);margin:0 0 22px;line-height:1.8;font-size:14.5px}

/* ===== HOME SERVICES — Premium 2x2 Card Grid ===== */
.svc-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px;
}
.svc-card{
  position:relative;background:#fff;
  border-radius:22px;border:1px solid var(--g200);
  overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--g800);
  box-shadow:0 14px 40px rgba(13,27,62,.08),0 4px 12px rgba(212,162,47,.10);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .3s;
}
.svc-card::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:2px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--pri) 50%,var(--red) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;pointer-events:none;z-index:3;
}
.svc-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(13,27,62,.14),0 10px 22px rgba(212,162,47,.18);
  text-decoration:none;color:var(--g800);border-color:transparent;
}
.svc-card:hover::before{opacity:.85}
.svc-num{
  position:absolute;top:14px;right:22px;z-index:4;
  font-family:var(--ff);font-weight:800;font-size:54px;line-height:1;
  background:linear-gradient(135deg,#d4a22f 0%,#1f5fa8 50%,#14417c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;opacity:.85;
  transition:opacity .35s,transform .35s;
}
.svc-card:hover .svc-num{opacity:1;transform:scale(1.05)}
.svc-card-img{
  height:200px;background-color:#f7e7be;
  background-size:cover;background-position:center;
  position:relative;flex-shrink:0;
  border-bottom:1px solid var(--g100);
}
.svc-card-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.85) 100%);
}
.svc-card-body{
  padding:22px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1;
}
.svc-card-tag{
  font-size:10.5px;font-weight:700;color:var(--pri);
  text-transform:uppercase;letter-spacing:.14em;
  display:inline-flex;align-items:center;gap:10px;
}
.svc-card-tag::before{
  content:"";width:22px;height:2px;background:linear-gradient(90deg,#d4a22f,#1f5fa8);
  border-radius:2px;
}
.svc-card h3{
  font-size:21px;font-weight:800;color:var(--g900);
  letter-spacing:-.015em;line-height:1.25;margin:0;
}
.svc-card p{
  font-size:14px;color:var(--g600);
  line-height:1.7;margin:0;
}
.svc-card-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;color:var(--pri);
  text-transform:uppercase;letter-spacing:.1em;
  padding-top:8px;
  transition:gap .3s,color .3s;
}
.svc-card:hover .svc-card-link{gap:14px;color:var(--pri-d)}

@media (max-width: 880px){
  .svc-cards{grid-template-columns:1fr;gap:20px}
  .svc-card-img{height:180px}
}

/* ========== WHY SECTION ========== */
.why-section{
  background:
    linear-gradient(180deg,var(--white) 0%,var(--aurora-mint) 50%,var(--aurora-peach) 100%);
  border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);
  position:relative;overflow:hidden;
}
.why-section::before{
  content:"";position:absolute;top:10%;left:-5%;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,162,47,.2),transparent 70%);filter:blur(40px);
}
.why-section::after{
  content:"";position:absolute;bottom:10%;right:-5%;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,158,144,.18),transparent 70%);filter:blur(50px);
}
.why-section .container-wide{position:relative;z-index:2}
.why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.why-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.why-card{
  background:rgba(255,255,255,.8);backdrop-filter:blur(12px);
  padding:28px 22px;border:1px solid rgba(255,255,255,.8);
  border-radius:18px;transition:.35s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(20,65,124,.06);
}
.why-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-blue-emerald);transform:scaleX(0);transform-origin:left;transition:.4s ease;
}
.why-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(20,65,124,.14),0 6px 16px rgba(212,162,47,.1);background:#fff}
.why-card:hover::before{transform:scaleX(1)}
.why-icon{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:16px;border-radius:14px;color:#fff;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.why-card:hover .why-icon{transform:scale(1.1) rotate(-5deg)}
.why-card:nth-child(1) .why-icon{background:var(--grad-blue);box-shadow:0 6px 18px rgba(20,65,124,.35)}
.why-card:nth-child(2) .why-icon{background:var(--grad-emerald);box-shadow:0 6px 18px rgba(212,162,47,.35)}
.why-card:nth-child(3) .why-icon{background:var(--grad-blue-emerald);box-shadow:0 6px 18px rgba(20,65,124,.3)}
.why-card:nth-child(4) .why-icon{background:var(--grad-orange-soft);box-shadow:0 6px 18px rgba(30,158,144,.35)}
.why-card h4{font-size:16px;margin:0 0 6px;font-weight:700;color:var(--g900)}
.why-card p{font-size:13.5px;color:var(--g600);margin:0;line-height:1.65}

/* ===== HOME WHY US — Numbered Premium Cards ===== */
.why-grid-xl{
  display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start;
}
.why-cards-xl{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.why-card-xl{
  position:relative;background:rgba(255,255,255,.65);
  border:1px solid var(--g200);border-radius:18px;
  padding:24px 22px;overflow:hidden;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,background .3s,border-color .3s;
}
.why-card-xl::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#d4a22f 0%,#1f5fa8 50%,#14417c 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.why-card-xl:hover{
  background:#fff;transform:translateY(-6px);
  box-shadow:0 28px 56px rgba(13,27,62,.10),0 10px 22px rgba(212,162,47,.16);
  border-color:transparent;
}
.why-card-xl:hover::before{transform:scaleX(1)}
.wc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.wc-num{
  font-family:var(--ff);font-weight:800;font-size:34px;line-height:1;
  background:linear-gradient(135deg,#d4a22f 0%,#1f5fa8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;opacity:.55;
  transition:opacity .35s,transform .35s;
}
.why-card-xl:hover .wc-num{opacity:1;transform:scale(1.05)}
.wc-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:21px;
  box-shadow:0 6px 18px rgba(20,65,124,.25);
  transition:transform .35s;
}
.why-card-xl:hover .wc-icon{transform:scale(1.08) rotate(-6deg)}
.why-card-xl:nth-child(1) .wc-icon{background:linear-gradient(135deg,#14417c,#d4a22f)}
.why-card-xl:nth-child(2) .wc-icon{background:linear-gradient(135deg,#d4a22f,#35b8a8)}
.why-card-xl:nth-child(3) .wc-icon{background:linear-gradient(135deg,#1f5fa8,#14417c)}
.why-card-xl:nth-child(4) .wc-icon{background:linear-gradient(135deg,#1e9e90,#b8891f)}
.why-card-xl h4{font-size:17px;font-weight:800;color:var(--g900);margin:0 0 8px;letter-spacing:-.015em}
.why-card-xl p{font-size:13.5px;color:var(--g600);margin:0;line-height:1.65}

@media (max-width: 980px){
  .why-grid-xl{grid-template-columns:1fr;gap:40px}
}
@media (max-width: 580px){
  .why-cards-xl{grid-template-columns:1fr}
}

/* ========== QUOTE SECTION ========== */
.quote-section{
  background:linear-gradient(110deg,#f7e7be 0%,#bfdbfe 38%,#e0e7ff 62%,#f6ecd2 100%);
  color:var(--g800);position:relative;overflow:hidden;
}
.quote-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 45% 55% at 8% 50%,rgba(212,162,47,.42),transparent 55%),
    radial-gradient(ellipse 40% 55% at 92% 50%,rgba(31,95,168,.32),transparent 55%),
    radial-gradient(ellipse 50% 35% at 85% 85%,rgba(30,158,144,.22),transparent 55%);
  pointer-events:none;
}
.quote-section::after{content:none}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;position:relative;z-index:2}
.quote-section h2{color:var(--g900);position:relative}
.quote-section .section-label{
  background:rgba(255,255,255,.7);color:#0d2c57;
  border:1px solid rgba(212,162,47,.3);backdrop-filter:blur(8px);
}
.quote-section .section-label .bar{background:linear-gradient(90deg,#d4a22f,#1f5fa8)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;position:relative}
.stat-box{
  background:rgba(255,255,255,.7);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.8);
  padding:26px;border-radius:18px;position:relative;overflow:hidden;
  transition:.35s ease;
  box-shadow:0 8px 20px rgba(20,65,124,.08);
}
.stat-box:hover{background:rgba(255,255,255,.85);transform:translateY(-4px);box-shadow:0 14px 32px rgba(20,65,124,.14)}
.stat-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-blue-emerald);
}
.stat-box b{
  font-family:var(--ff);font-size:clamp(18px,2.4vw,28px);font-weight:600;display:block;line-height:1.2;color:var(--pri);letter-spacing:-.01em;
}
.stat-box span{display:block;font-size:11px;color:var(--g600);margin-top:8px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.quote-form-card{
  background:#fff;color:var(--g800);padding:36px;
  border-radius:22px;position:relative;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.25),0 10px 24px rgba(212,162,47,.2);
}
.quote-form-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-blue-emerald);
}
.quote-form-card h3{font-size:22px;margin:0 0 6px;color:var(--g900)}
.quote-form-card p{color:var(--g500);margin:0 0 22px;font-size:14px}
.form-field{margin-bottom:14px}
.form-field input,.form-field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--g200);border-radius:12px;
  font-family:var(--ff);font-size:14px;background:var(--bg);color:var(--g900);
  transition:.25s ease;outline:none;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--g400);opacity:1}
.form-field input:focus,.form-field textarea:focus{border-color:var(--orange);background:#fff;color:var(--g900);box-shadow:0 0 0 4px rgba(212,162,47,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ========== FOOTER ========== */
.site-footer{
  background:linear-gradient(135deg,#f7e7be 0%,#bfdbfe 40%,#e0e7ff 65%,#f6ecd2 100%);
  color:var(--g900);padding:80px 0 24px;
  position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#d4a22f 0%,#1f5fa8 50%,#1e9e90 100%);
}
.site-footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 60% at 5% 30%,rgba(212,162,47,.3),transparent 55%),
    radial-gradient(ellipse 40% 60% at 95% 70%,rgba(30,158,144,.22),transparent 55%),
    radial-gradient(ellipse 35% 50% at 50% 50%,rgba(31,95,168,.16),transparent 55%);
}
.site-footer .container-wide{position:relative;z-index:2}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:50px;margin-bottom:40px}
.footer-grid h4{
  color:var(--g900);font-size:13px;margin:0 0 20px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;
}
.footer-grid h4::after{content:"";display:block;width:36px;height:3px;background:var(--grad-blue-emerald);margin-top:8px;border-radius:3px}
.footer-grid p,.footer-grid a{color:var(--g900);font-size:13.5px;line-height:1.8;font-weight:500}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid ul li{margin-bottom:8px}
.footer-grid ul li a{display:inline-flex;align-items:center;gap:8px;transition:.25s;font-weight:600;color:var(--g900)}
.footer-grid ul li a::before{content:"";width:6px;height:2px;background:#d4a22f;transition:.25s;border-radius:2px}
.footer-grid ul li a:hover{color:#0d2c57;padding-left:6px}
.footer-grid ul li a:hover::before{width:14px;background:var(--orange)}
.footer-contact p{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;color:var(--g900);font-weight:500}
.footer-contact .fa{color:#d4a22f;margin-top:3px;width:14px;font-size:14px}
/* Office cards */
.footer-office{
  position:relative;display:block;margin:0 0 14px;padding:14px 16px 14px 18px;
  background:linear-gradient(135deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.4) 100%);
  border:1px solid rgba(255,255,255,.7);
  border-left:3px solid #d4a22f;
  border-radius:12px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .25s ease,box-shadow .25s ease;
}
.footer-office:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.footer-office:nth-child(odd){border-left-color:#d4a22f}
.footer-office:nth-child(even){border-left-color:#1f5fa8}
.footer-office .office-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#0f172a;
  margin-bottom:8px;
}
.footer-office .office-label .fa{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#d4a22f,#1f5fa8);
  color:#fff;font-size:11px;margin:0;flex-shrink:0;
}
.footer-office:nth-child(even) .office-label .fa{background:linear-gradient(135deg,#1f5fa8,#d4a22f)}
.footer-office p{
  display:block !important;margin:0 !important;
  color:var(--g800);font-size:13px;line-height:1.6;font-weight:500;
}
/* Compact phone/email row */
.footer-meta{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(15,23,42,.08)}
.footer-meta a,.footer-meta span{display:inline-flex;align-items:center;gap:10px;color:var(--g900);font-weight:600;font-size:13.5px;text-decoration:none;transition:color .2s}
.footer-meta a:hover{color:#0d2c57}
.footer-meta .fa{color:#d4a22f;font-size:14px;width:16px}
.footer-social{display:flex;gap:8px;margin-top:18px}
.footer-social a{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--g700);border:1px solid rgba(255,255,255,.7);border-radius:12px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
  font-size:14px;transition:.3s ease;
  box-shadow:0 2px 8px rgba(20,65,124,.06);
}
.footer-social a:hover{background:var(--grad-blue-emerald);color:#fff;border-color:transparent;transform:translateY(-3px);box-shadow:0 10px 24px rgba(212,162,47,.3)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.6);padding-top:22px;text-align:center;font-size:12.5px;color:var(--g800);font-weight:600}

/* ========== PAGE BANNER ========== */
.page-banner{
  background:linear-gradient(135deg,var(--ink-950) 0%,var(--pri-d) 50%,var(--ink-900) 100%);
  color:#fff;padding:32px 0 28px;position:relative;overflow:hidden;
}
.page-banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 15% 30%,rgba(212,162,47,.24),transparent 45%),
    radial-gradient(ellipse at 85% 70%,rgba(30,158,144,.18),transparent 45%),
    radial-gradient(ellipse at 50% 50%,rgba(31,95,168,.14),transparent 60%);
  pointer-events:none;
}
.page-banner::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,162,47,.5),rgba(30,158,144,.4),transparent);
}
.page-banner .container-wide{position:relative;z-index:2}
.page-banner .tag{
  display:inline-flex;padding:5px 14px;background:var(--grad-emerald);color:#fff;
  font-size:10px;font-family:var(--ff);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  border-radius:50px;box-shadow:0 4px 14px rgba(212,162,47,.32);
}
.page-banner h1{font-size:clamp(22px,2.8vw,34px);color:#fff;margin:10px 0 6px;line-height:1.1;letter-spacing:-.02em}
.page-banner h1 em{
  font-style:italic;font-weight:700;
  background:linear-gradient(135deg,#3fbf94 0%,#a8c6e8 50%,#e7cf90 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.breadcrumb-sls{color:rgba(255,255,255,.55);font-size:13px;display:flex;gap:8px;align-items:center}
.breadcrumb-sls a{color:rgba(255,255,255,.75);transition:color .25s}
.breadcrumb-sls a:hover{color:var(--orange-l)}
.breadcrumb-sls .sep{color:rgba(255,255,255,.25)}

/* ========== CAPABILITIES ========== */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.cap-card{
  background:#fff;padding:30px 26px;border:1px solid var(--g200);
  border-radius:20px;transition:.35s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.cap-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-blue-emerald);transform:scaleX(0);transform-origin:left;transition:.4s ease;
  border-radius:20px 20px 0 0;
}
.cap-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(20,65,124,.14),0 6px 16px rgba(212,162,47,.1);border-color:transparent}
.cap-card:hover::before{transform:scaleX(1)}
.cap-icon{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;margin-bottom:18px;border-radius:16px;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cap-card:hover .cap-icon{transform:scale(1.08) rotate(-6deg)}
.cap-card:nth-child(6n+1) .cap-icon{background:var(--grad-blue);box-shadow:0 8px 20px rgba(20,65,124,.32)}
.cap-card:nth-child(6n+2) .cap-icon{background:var(--grad-emerald);box-shadow:0 8px 20px rgba(212,162,47,.32)}
.cap-card:nth-child(6n+3) .cap-icon{background:var(--grad-blue-emerald);box-shadow:0 8px 20px rgba(20,65,124,.28)}
.cap-card:nth-child(6n+4) .cap-icon{background:var(--grad-orange-soft);box-shadow:0 8px 20px rgba(30,158,144,.32)}
.cap-card:nth-child(6n+5) .cap-icon{background:linear-gradient(135deg,#1f5fa8 0%,#3fbf94 100%);box-shadow:0 8px 20px rgba(31,95,168,.3)}
.cap-card:nth-child(6n+6) .cap-icon{background:linear-gradient(135deg,#e5b94e 0%,#35b8a8 100%);box-shadow:0 8px 20px rgba(229,185,78,.3)}
.cap-card h4{font-size:17px;margin:0 0 8px;font-weight:700;color:var(--g900)}
.cap-card p{color:var(--g500);font-size:13.5px;margin:0;line-height:1.7}

/* ========== CATALOG ========== */
.catalog-container{padding:24px 0 80px}

/* ===== Catalog toolbar — Premium segmented layout =====
   Row 1 : Search input (flex)  |  Status filter pills (auto)
   Row 2 : Alphabet segmented strip                                  */
.catalog-tools{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "search status"
    "alpha  alpha";
  column-gap:18px;row-gap:14px;
  align-items:center;
  background:#fff;
  padding:14px;
  margin-bottom:22px;
  border:1px solid var(--g200);border-radius:18px;
  box-shadow:0 10px 30px rgba(13,27,62,.06),0 3px 10px rgba(212,162,47,.06);
  position:relative;overflow:hidden;
}
.catalog-tools::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#d4a22f 0%,#1f5fa8 50%,#1e9e90 100%);
  opacity:.0;transition:opacity .35s;
}
.catalog-tools:focus-within::before{opacity:1}

/* Search input with leading icon */
.catalog-search{grid-area:search;position:relative;margin:0 !important}
.catalog-search::before{
  content:"\f002";font-family:'FontAwesome';
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--g400);font-size:14px;pointer-events:none;
  transition:color .3s;
}
.catalog-search:focus-within::before{color:var(--pri)}
.catalog-search input{
  width:100%;padding:12px 20px 12px 44px;
  border:1.5px solid var(--g200);border-radius:12px;
  font-family:var(--ff);font-size:13.5px;outline:none;
  background:var(--bg);color:var(--g900);transition:.3s ease;
}
.catalog-search input::placeholder{color:var(--g400);font-weight:500}
.catalog-search input:focus{
  border-color:var(--orange);background:#fff;
  box-shadow:0 0 0 3px rgba(212,162,47,.18);
}

/* Status filter — refined tab-style pills */
.status-filter{grid-area:status;display:flex;gap:4px;margin:0;
  background:var(--bg);border:1px solid var(--g200);border-radius:12px;padding:3px;}
.status-filter button{
  padding:8px 16px;border:none;background:transparent;color:var(--g600);
  font-family:var(--ff);font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;cursor:pointer;transition:.25s;border-radius:9px;
}
.status-filter button:hover{color:var(--pri);background:rgba(255,255,255,.6)}
.status-filter button.active{
  background:linear-gradient(135deg,#14417c 0%,#1e9e90 100%);color:#fff;
  box-shadow:0 4px 12px rgba(20,65,124,.25);
}

/* Alphabet — full-width segmented strip with staggered entry */
.alphabet-filter{
  grid-area:alpha;
  display:grid;
  grid-template-columns:auto repeat(26,1fr);
  gap:5px;margin:0;
  padding-top:12px;border-top:1px dashed var(--g200);
}
.alphabet-filter button{
  height:32px;border:1px solid var(--g200);background:#fff;
  color:var(--g700);font-family:var(--ff);font-weight:700;cursor:pointer;
  transition:transform .25s cubic-bezier(.22,1,.36,1),
             background .25s ease,color .25s ease,
             border-color .25s ease,box-shadow .25s ease;
  font-size:11.5px;border-radius:8px;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  animation:alphaReveal .55s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes alphaReveal{
  0%{opacity:0;transform:translateY(8px) scale(.85)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.alphabet-filter button:nth-child(1){animation-delay:.05s}
.alphabet-filter button:nth-child(2){animation-delay:.08s}
.alphabet-filter button:nth-child(3){animation-delay:.11s}
.alphabet-filter button:nth-child(4){animation-delay:.14s}
.alphabet-filter button:nth-child(5){animation-delay:.17s}
.alphabet-filter button:nth-child(6){animation-delay:.20s}
.alphabet-filter button:nth-child(7){animation-delay:.23s}
.alphabet-filter button:nth-child(8){animation-delay:.26s}
.alphabet-filter button:nth-child(9){animation-delay:.29s}
.alphabet-filter button:nth-child(10){animation-delay:.32s}
.alphabet-filter button:nth-child(11){animation-delay:.35s}
.alphabet-filter button:nth-child(12){animation-delay:.38s}
.alphabet-filter button:nth-child(13){animation-delay:.41s}
.alphabet-filter button:nth-child(14){animation-delay:.44s}
.alphabet-filter button:nth-child(15){animation-delay:.47s}
.alphabet-filter button:nth-child(16){animation-delay:.50s}
.alphabet-filter button:nth-child(17){animation-delay:.53s}
.alphabet-filter button:nth-child(18){animation-delay:.56s}
.alphabet-filter button:nth-child(19){animation-delay:.59s}
.alphabet-filter button:nth-child(20){animation-delay:.62s}
.alphabet-filter button:nth-child(21){animation-delay:.65s}
.alphabet-filter button:nth-child(22){animation-delay:.68s}
.alphabet-filter button:nth-child(23){animation-delay:.71s}
.alphabet-filter button:nth-child(24){animation-delay:.74s}
.alphabet-filter button:nth-child(25){animation-delay:.77s}
.alphabet-filter button:nth-child(26){animation-delay:.80s}
.alphabet-filter button:nth-child(27){animation-delay:.83s}

.alphabet-filter button.all{
  padding:0 14px;height:32px;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--bg);
}
.alphabet-filter button:hover{
  color:var(--pri);background:#fff;
  border-color:rgba(20,65,124,.35);
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 8px 18px rgba(20,65,124,.18),0 2px 6px rgba(212,162,47,.15);
}
.alphabet-filter button.active{
  background:linear-gradient(135deg,#14417c 0%,#1e9e90 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 6px 14px rgba(20,65,124,.32);transform:translateY(-1px);
  animation:alphaReveal .55s cubic-bezier(.22,1,.36,1) backwards,
            alphaPulse 2.4s ease-in-out infinite 1s;
}
@keyframes alphaPulse{
  0%,100%{box-shadow:0 6px 14px rgba(20,65,124,.32)}
  50%{box-shadow:0 6px 22px rgba(20,65,124,.55),0 0 0 4px rgba(212,162,47,.18)}
}
.alphabet-filter button.active::after{
  content:"";position:absolute;left:50%;bottom:-5px;
  width:4px;height:4px;border-radius:50%;
  background:var(--orange);transform:translateX(-50%);
  box-shadow:0 0 10px rgba(212,162,47,.9);
}

@media (max-width:900px){
  .alphabet-filter{grid-template-columns:auto repeat(13,1fr)}
}
@media (max-width:560px){
  .alphabet-filter{grid-template-columns:repeat(9,1fr)}
  .alphabet-filter button.all{grid-column:1 / -1}
}

@media (max-width:760px){
  .catalog-tools{grid-template-columns:1fr;grid-template-areas:"search" "status" "alpha";gap:12px}
  .status-filter{justify-self:start}
}

.api-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.api-group-card{
  background:#fff;padding:26px 24px;border:1px solid var(--g200);
  border-radius:18px;cursor:pointer;
  transition:all .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(20,65,124,.04);
}
.api-group-card::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:var(--grad-blue-emerald);transform:scaleY(0);transform-origin:top;transition:.35s ease;
}
.api-group-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,65,124,.14),0 6px 16px rgba(212,162,47,.1);border-color:transparent}
.api-group-card:hover::before{transform:scaleY(1)}
.api-group-card h4{font-size:18px;margin:0 0 6px;color:var(--g900);font-weight:700}
.api-group-card .count{font-size:12px;color:var(--g500);margin-bottom:16px}
.api-group-card .count b{color:var(--pri);font-weight:700}
.api-group-card .availability{display:flex;gap:6px;flex-wrap:wrap}
.availability .pill{font-size:10px;padding:4px 12px;font-weight:700;border-radius:50px;text-transform:uppercase;letter-spacing:.06em}
.availability .pill.av{background:var(--aurora-mint);color:#0d2c57}
.availability .pill.un{background:var(--aurora-peach);color:#8a6410}

.impurity-detail-view{display:none}
.impurity-detail-view.active{display:block}
.back-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;
  background:#fff;color:var(--pri-d);border:1px solid var(--g200);border-radius:50px;
  font-family:var(--ff);font-weight:700;cursor:pointer;transition:.3s ease;
  text-transform:uppercase;font-size:11px;letter-spacing:.1em;margin-bottom:30px;
}
.back-btn:hover{background:var(--grad-blue-emerald);color:#fff;border-color:transparent;transform:translateX(-4px);box-shadow:0 8px 20px rgba(212,162,47,.28)}
.detail-header{margin-bottom:28px}
.detail-header h3{font-size:32px;margin:0 0 6px}
.detail-header p{color:var(--g500);margin:0}

.impurity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.imp-card{
  background:#fff;border:1px solid var(--g200);overflow:hidden;
  border-radius:18px;
  transition:all .4s cubic-bezier(.22,1,.36,1);position:relative;
  box-shadow:0 4px 14px rgba(20,65,124,.05);
}
.imp-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-blue-emerald);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:4;
}
.imp-card.highlight{
  border-color:var(--orange);
  animation:cardPulse 1.6s ease-in-out 3;
  z-index:5;position:relative;
}
.imp-card.highlight::before{transform:scaleX(1)}
.imp-card.highlight .struct-box{background:#f5f9fd}
@keyframes cardPulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(184,137,31,.45),0 12px 36px rgba(184,137,31,.18);
    transform:translateY(0) scale(1);
  }
  50%{
    box-shadow:0 0 0 14px rgba(184,137,31,0),0 20px 48px rgba(184,137,31,.28);
    transform:translateY(-6px) scale(1.015);
  }
}
.imp-card.highlight-fade{
  transition:border-color 1s ease,box-shadow 1s ease,background 1s ease;
  border-color:var(--g200);
  box-shadow:0 1px 3px rgba(17,24,39,.04);
}
.imp-card.highlight-fade .struct-box{transition:background 1s ease;background:#fff}
.imp-card:hover{transform:translateY(-8px);box-shadow:0 24px 52px rgba(20,65,124,.16),0 8px 20px rgba(212,162,47,.12);border-color:transparent}
.imp-card:hover::before{transform:scaleX(1)}
.imp-card .struct-box{
  height:200px;background:#fff;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--g100);position:relative;padding:20px;
}
.imp-card .struct-box::before,
.imp-card .struct-box::after{
  content:"";position:absolute;width:14px;height:14px;
  border:2px solid var(--pri);opacity:.3;transition:.3s;
}
.imp-card .struct-box::before{top:10px;left:10px;border-right:none;border-bottom:none}
.imp-card .struct-box::after{bottom:10px;right:10px;border-left:none;border-top:none}
.imp-card:hover .struct-box::before,
.imp-card:hover .struct-box::after{opacity:.8;border-color:var(--orange);width:20px;height:20px}
.imp-card .struct-box i{font-size:56px;color:var(--pri-l);opacity:.2}
.imp-card .struct-box img{
  max-height:160px;max-width:90%;position:relative;z-index:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.06));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.imp-card:hover .struct-box img{transform:scale(1.05)}
.imp-card .status-pill{
  position:absolute;top:14px;right:14px;padding:5px 12px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.imp-card .status-pill{display:none !important}
.imp-card .status-pill.av{background:var(--grad-emerald);color:#fff;border-radius:50px}
.imp-card .status-pill.un{background:var(--grad-orange-soft);color:#fff;border-radius:50px}

/* Inventory Status — neutral charcoal to match other dd values */
.imp-card dd.inv-status{
  display:inline-block;
  color:var(--g900);
  background:transparent;
  font-family:var(--ff);
  font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;
  padding:0;
  white-space:nowrap;
}
.imp-card .cat-pill{
  position:absolute;top:14px;left:14px;padding:5px 14px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:#fff;color:var(--pri-d);z-index:3;
  border-radius:50px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  border-left:3px solid var(--orange);
}
.imp-card .cat-pill.insecticide{border-left-color:var(--red);color:var(--red)}
.imp-card .cat-pill.fungicide{border-left-color:var(--pri);color:var(--pri)}
.imp-card .cat-pill.herbicide{border-left-color:var(--orange);color:var(--orange)}
.imp-card .body{padding:22px 22px 20px}
.imp-card h5{font-size:17px;margin:0 0 4px;font-weight:800;color:var(--g900);letter-spacing:-.015em}
.imp-card .chem{font-size:12.5px;color:var(--g500);margin:0 0 16px;line-height:1.55}
.imp-card dl{
  display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 18px;font-size:11.5px;
  padding:14px;background:var(--bg);border:1px solid var(--g100);
}
.imp-card dt{color:var(--pri);text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:11px}
.imp-card dd{margin:0;color:var(--g900);font-family:var(--mono);font-weight:500;font-size:12px}
.imp-card .quote-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,#14417c 0%,#d4a22f 100%) !important;
  color:#fff !important;border:none;
  font-family:var(--ff);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;cursor:pointer;
  border-radius:12px;
  transition:background .4s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  box-shadow:0 6px 16px rgba(212,162,47,.25);
}
.imp-card .quote-btn::before{display:none !important}
.imp-card .quote-btn:hover{
  background:linear-gradient(135deg,#b8891f 0%,#1e9e90 50%,#35b8a8 100%) !important;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(184,137,31,.42);
}

/* ===== STRUCTURE WATERMARK ===== */
.imp-card .struct-box .struct-wm{
  position:absolute;bottom:34px;left:50%;
  transform:translateX(-50%) rotate(-18deg);
  transform-origin:center;
  font-family:var(--ff);font-weight:700;font-size:14px;
  color:rgba(13,44,87,.32);
  letter-spacing:.14em;pointer-events:none;user-select:none;z-index:4;
  white-space:nowrap;mix-blend-mode:multiply;
}
.imp-card:hover .struct-box .struct-wm{color:rgba(184,137,31,.18)}

/* ========== MODAL ========== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,15,30,.8);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;z-index:10000;padding:20px;
}
.modal-overlay.active{display:flex}
.modal-card{background:#fff;max-width:500px;width:100%;overflow:hidden;border-radius:22px;box-shadow:0 40px 80px rgba(0,0,0,.35);animation:modalUp .3s cubic-bezier(.22,1,.36,1)}
@keyframes modalUp{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-head{
  background:linear-gradient(135deg,var(--ink-950) 0%,var(--pri-d) 100%);
  color:#fff;padding:22px 26px;
  display:flex;justify-content:space-between;align-items:center;
  position:relative;overflow:hidden;
}
.modal-head::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--grad-emerald);
}
.modal-head h3{color:#fff;margin:0;font-size:19px;position:relative}
.modal-close{background:rgba(255,255,255,.1);color:#fff;border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:15px;transition:.25s}
.modal-close:hover{background:var(--grad-orange-soft);transform:rotate(90deg)}
.product-info-bar{background:var(--bg);padding:12px 24px;border-bottom:1px solid var(--g200);font-size:12px}
.product-info-bar b{color:var(--g800);font-family:var(--ff)}
.product-info-bar .sep{color:var(--g300);margin:0 8px}
.modal-body{padding:24px}
.modal-body .form-field{margin-bottom:12px}
.modal-body .form-field input,.modal-body .form-field textarea{padding:11px 14px;font-size:13px}
.modal-body .btn-submit{
  width:100%;padding:14px;background:var(--grad-blue-emerald);color:#fff;border:none;
  font-family:var(--ff);font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.1em;cursor:pointer;margin-top:8px;border-radius:12px;
  box-shadow:0 6px 18px rgba(212,162,47,.3);
  transition:.35s cubic-bezier(.22,1,.36,1);
}
.modal-body .btn-submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(212,162,47,.45)}
.modal-body .btn-submit:disabled{opacity:.6;cursor:wait}
.success-state{text-align:center;padding:28px 20px}
.success-state .check{
  width:68px;height:68px;margin:0 auto 18px;background:var(--grad-emerald);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;
  box-shadow:0 10px 28px rgba(212,162,47,.4);
}

/* ========== FLOATING BTNS ========== */
.float-btns{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:500}
.float-btns a,.scroll-top{
  width:48px;height:48px;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:.2s;
}
.float-btns a.wa{background:#25d366;border-radius:50%;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.float-btns a.ph{background:var(--grad-blue);border-radius:50%;box-shadow:0 8px 24px rgba(20,65,124,.35)}
.float-btns a:hover{transform:scale(1.12) translateY(-2px)}
.scroll-top{background:var(--grad-emerald);border:none;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:.35s;border-radius:50%;box-shadow:0 8px 24px rgba(212,162,47,.4)}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ========== UNDER CONSTRUCTION ========== */
.under-process{min-height:600px;display:grid;grid-template-columns:1fr 1fr}
.up-left{background:var(--pri-d);color:#fff;padding:70px 50px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.up-left::before{content:"";position:absolute;top:0;right:0;width:40%;height:100%;background:var(--pri);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);opacity:.2}
.up-svg{position:relative;z-index:2;max-width:460px;width:100%}
.up-right{padding:70px 50px;background:#fff;display:flex;flex-direction:column;justify-content:center}
.up-right .badge{
  display:inline-flex;padding:5px 12px;background:#eef4fb;color:var(--red);
  font-size:10px;font-family:var(--ff);font-weight:700;text-transform:uppercase;letter-spacing:.1em;width:fit-content;
}
.up-right h1{font-size:48px;margin:18px 0 14px}
.up-right p{color:var(--g500);font-size:15px;line-height:1.8;max-width:500px}
.up-right ul{list-style:none;padding:0;margin:22px 0 28px}
.up-right ul li{padding:9px 0;border-bottom:1px solid var(--g200);font-size:13px;display:flex;align-items:center;gap:10px}
.up-right ul li i{color:var(--orange)}
.up-right .cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ========== MISC ========== */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.mv-card{
  padding:40px;color:#fff;border-radius:24px;
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.mv-card:hover{transform:translateY(-6px)}
.mv-card.mission{
  background:
    linear-gradient(135deg,rgba(15,15,30,.55) 0%,rgba(13,44,87,.62) 100%),
    url('../images/mission-bg.jpg') center/cover no-repeat;
  box-shadow:0 20px 48px rgba(20,65,124,.25);
}
.mv-card.mission::before{
  content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,162,47,.25),transparent 70%);filter:blur(20px);
  pointer-events:none;
}
.mv-card.vision{
  background:
    linear-gradient(135deg,rgba(212,162,47,.85) 0%,rgba(229,185,78,.88) 100%),
    url('../images/vision-bg.jpg') center/cover no-repeat;
  box-shadow:0 20px 48px rgba(212,162,47,.35);
}
.mv-card.vision::before{
  content:"";position:absolute;bottom:-80px;left:-80px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,158,144,.3),transparent 70%);filter:blur(20px);
  pointer-events:none;
}
.mv-card i.icon-big{font-size:40px;margin-bottom:18px;opacity:.7;position:relative}
.mv-card h3{color:#fff;font-size:26px;position:relative;letter-spacing:-.015em}
.mv-card p{font-size:14.5px;line-height:1.8;opacity:.92;position:relative}

.dark-why{
  background:linear-gradient(135deg,var(--ink-950) 0%,var(--pri-d) 55%,var(--ink-900) 100%);
  color:#fff;padding:90px 0;position:relative;overflow:hidden;
}
.dark-why::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(212,162,47,.2),transparent 45%),
    radial-gradient(ellipse at 80% 70%,rgba(30,158,144,.16),transparent 45%);
  pointer-events:none;
}
.dark-why h2{color:#fff}
.dark-why .check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.dark-why .check-list li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.8);font-size:14.5px}
.dark-why .check-list li i{color:var(--orange-l);font-size:15px;margin-top:3px;filter:drop-shadow(0 0 8px rgba(229,185,78,.5))}
.dark-why-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;position:relative;z-index:2}
.dark-why-grid .img-wrap{overflow:hidden;height:400px;background-size:cover;background-position:center;border-radius:24px;box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 2px rgba(212,162,47,.2)}

.leader-card{
  background:#fff;padding:48px 38px;text-align:center;max-width:440px;margin:0 auto;
  border:1px solid var(--g200);border-radius:24px;
  box-shadow:0 18px 40px rgba(20,65,124,.08);
  position:relative;overflow:hidden;
}
.leader-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--grad-blue-emerald);
}
.leader-card .avatar{
  width:148px;height:148px;margin:0 auto 22px;
  background:var(--grad-blue-emerald);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:58px;
  border-radius:50%;box-shadow:0 12px 30px rgba(20,65,124,.32),0 4px 12px rgba(212,162,47,.2);
}
.leader-card .avatar::before{content:none}
.leader-card h4{font-size:24px;margin:0 0 4px;letter-spacing:-.01em}
.leader-card .role{
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:20px;
  background:var(--grad-blue-emerald);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.leader-card .bio{color:var(--g600);font-size:14px;line-height:1.75}

.leader-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1240px;margin:0 auto;align-items:stretch}
.leader-grid .leader-card{max-width:none;margin:0;padding:38px 28px 32px;transition:.4s cubic-bezier(.22,1,.36,1)}
.leader-grid .leader-card:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(20,65,124,.14),0 8px 20px rgba(212,162,47,.10)}
.leader-grid .leader-card .avatar{
  width:140px;height:140px;margin:0 auto 22px;padding:4px;
  background:var(--grad-blue-emerald);
  border-radius:50%;
  box-shadow:0 14px 30px rgba(20,65,124,.28),0 4px 12px rgba(212,162,47,.18);
  position:relative;overflow:visible;
}
.leader-grid .leader-card .avatar img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:center 18%;
  display:block;background:#fff;
  border:3px solid #fff;
}
.leader-grid .leader-card:hover .avatar{box-shadow:0 18px 38px rgba(20,65,124,.36),0 6px 16px rgba(212,162,47,.24)}
.leader-grid .leader-card h4{font-size:20px;margin-top:4px}
.leader-grid .leader-card .role{font-size:11px;margin-bottom:16px}
.leader-grid .leader-card .bio{font-size:13.5px;line-height:1.7;text-align:left;margin:0;position:relative;padding-left:18px}
.leader-grid .leader-card .bio + .bio{margin-top:14px}
.leader-grid .leader-card .bio::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;
  background:var(--grad-blue-emerald);
  box-shadow:0 0 0 3px rgba(20,65,124,.10);
}
@media(max-width:991px){.leader-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.leader-grid{grid-template-columns:1fr}}

.cta-banner{
  background:linear-gradient(135deg,var(--ink-950) 0%,var(--pri-d) 50%,var(--ink-900) 100%);
  color:#fff;padding:64px 44px;margin:70px auto;max-width:1200px;
  border-radius:28px;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 30px 70px rgba(20,65,124,.22),0 10px 24px rgba(212,162,47,.14);
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 15% 30%,rgba(212,162,47,.24),transparent 45%),
    radial-gradient(ellipse at 85% 70%,rgba(30,158,144,.2),transparent 45%);
  pointer-events:none;
}
.cta-banner::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--pri),var(--red),var(--orange));
}
.cta-banner h2{color:#fff;position:relative;font-size:38px;margin-bottom:14px;letter-spacing:-.02em}
.cta-banner p{position:relative;color:rgba(255,255,255,.7);max-width:580px;margin:0 auto 30px;font-size:15.5px}
.cta-banner .btn-sls{position:relative}

.stats-bar{
  background:linear-gradient(180deg,var(--white) 0%,var(--aurora-mint) 50%,var(--aurora-sky) 100%);
  padding:70px 0;border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);
  position:relative;overflow:hidden;
}
.stats-bar::before{
  content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,158,144,.14),transparent 70%);filter:blur(40px);
}
.stats-bar .row-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;position:relative}
.stats-bar .stat b{
  font-family:var(--ff);font-size:clamp(22px,2.8vw,32px);font-weight:600;display:block;line-height:1.2;color:var(--pri);letter-spacing:-.01em;
}
.stats-bar .stat span{display:block;font-size:11px;color:var(--g600);text-transform:uppercase;letter-spacing:.18em;margin-top:10px;font-weight:700}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;margin-top:36px}
.contact-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:28px}
.contact-card{
  display:flex;gap:16px;align-items:flex-start;background:#fff;padding:24px;
  border:1px solid var(--g200);border-radius:18px;transition:.35s ease;
  position:relative;overflow:hidden;
  box-shadow:0 4px 12px rgba(20,65,124,.05);
}
.contact-card::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:var(--grad-blue-emerald);transform:scaleY(0);transform-origin:top;transition:.3s;
}
.contact-card:hover{transform:translateX(4px);box-shadow:0 14px 32px rgba(20,65,124,.14)}
.contact-card:hover::before{transform:scaleY(1)}
.contact-card .ico{
  flex-shrink:0;width:50px;height:50px;background:var(--grad-blue-emerald);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;border-radius:14px;
  box-shadow:0 6px 16px rgba(212,162,47,.3);
}
.contact-card h5{font-size:14px;margin:0 0 3px;text-transform:uppercase;letter-spacing:.04em}
.contact-card p{margin:0;color:var(--g500);font-size:13px;line-height:1.6}
.map-wrap{overflow:hidden;height:340px;box-shadow:0 4px 16px rgba(0,0,0,.06);margin-top:28px}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px;margin-top:36px}
.gallery-item{overflow:hidden;position:relative;cursor:pointer;background-size:cover;background-position:center;transition:.3s}
.gallery-item:hover{transform:scale(1.02)}
.gallery-item.wide{grid-column:span 2}
.gallery-item.tall{grid-row:span 2}
.gallery-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(17,24,39,.85) 100%);
  opacity:0;transition:.3s;
}
.gallery-item:hover::after{opacity:1}
.gallery-item .label{
  position:absolute;bottom:16px;left:16px;color:#fff;
  font-family:var(--ff);font-weight:700;font-size:13px;z-index:2;
  opacity:0;transform:translateY(8px);transition:.3s;
}
.gallery-item:hover .label{opacity:1;transform:translateY(0)}

/* ========== RESPONSIVE ========== */
@media(max-width:1199px){
  .welcome-grid,.why-grid,.quote-grid,.dark-why-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .search-pill{min-width:420px;max-width:520px}
}
@media(max-width:991px){
  section{padding:60px 0}
  .hero-slider{height:520px}
  .main-header .container-wide{flex-wrap:wrap}
  .search-pill{order:3;min-width:100%;margin-top:10px}
  .nav-toggle{display:block;position:absolute;right:14px;top:4px}
  .nav-menu{display:none;flex-direction:column;width:100%;padding:12px 0;gap:0}
  .nav-menu.open{display:flex}
  .nav-menu>li>a{padding:12px 20px}
  .nav-menu>li>a::after{display:none}
  .dropdown-menu-sls{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(255,255,255,.6);padding:4px 14px;border-radius:10px;margin:4px 14px;border:none}
  .dropdown-menu-sls::before,.dropdown-menu-sls::after{display:none}
  .services-timeline::before{display:none}
  .svc-row{grid-template-columns:1fr;text-align:center}
  .svc-row.reverse .svc-text{order:initial;text-align:center}
  .svc-row.reverse .svc-image{order:initial}
  .svc-number{margin:0 auto}
  .cap-grid{grid-template-columns:1fr 1fr}
  .mission-grid{grid-template-columns:1fr}
  .stats-bar .row-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .under-process{grid-template-columns:1fr}
  .up-left,.up-right{padding:50px 28px}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .gallery-item.wide{grid-column:span 2}
  .gallery-item.tall{grid-row:span 1}
  .dark-why .check-list{grid-template-columns:1fr}
}
@media(max-width:768px){
  .hero-slider{height:480px}
  .hero-controls{right:16px;bottom:24px}
  .form-row{grid-template-columns:1fr}
  .why-cards,.stats-grid{grid-template-columns:1fr}
  .quote-grid{grid-template-columns:1fr}
  .cap-grid{grid-template-columns:1fr}
  .cta-banner h2{font-size:26px}
  .up-right h1{font-size:34px}
  .page-banner{padding:80px 0 50px}
  .quote-form-card{padding:24px 20px}
}
@media(max-width:480px){
  .container-wide{padding:0 16px}
  .top-info{font-size:11px;gap:10px}
  .hero-title{font-size:30px}
  .stats-bar .row-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .gallery-item.wide{grid-column:span 1}
}


/* =========================================================================
   ============  SRINGA IDENTITY LAYER  ====================================
   =========================================================================
   Everything above is the base sheet. This layer deliberately replaces the
   visual signatures that would otherwise make this site read as a copy of
   another company's design, while keeping the soft, premium, gradient-rich
   character intact.

   Replaced:
     1  typography          Plus Jakarta Sans  ->  Sora display + Manrope text
     2  top bar             6-stop rainbow     ->  navy/teal duotone + gold rule
     3  nav                 split-capsule pill ->  centre-grow gradient underline
     4  hero stat strip     centred glass slab ->  vertical glass panel, right
     5  hero accent         shimmering gradient text -> gold + swash underline
     6  section eyebrow     filled pill + bar  ->  gradient diamond + hairline
     7  card hover          masked gradient border + shine sweep -> ring + corner
     8  service number      giant corner text  ->  circular badge on the image
     9  about stats         3 scattered chips  ->  one grouped glass panel
    10  why cards           [num | icon] row   ->  icon + watermark numeral
    11  footer              pale pastel diagonal -> deep ink, gold accents
    12  buttons             sheen sweep        ->  fill-slide + arrow nudge
   ========================================================================= */

/* ---- 1. TYPOGRAPHY -------------------------------------------------- */
h1,h2,h3,h4,h5,h6,
.hero-title,.section-title,.stat-box b,.about-mini-stats b,.hs-item b,
.av-chip b,.svc-num,.wc-num,.svc-number,.stats-bar .stat b,.up-right h1,
.page-banner h1,.cta-banner h2,.featured-card h3,.leader-card h4,
.detail-header h3,.welcome-img .badge-float b{
  font-family:var(--ff-head);
}
body{letter-spacing:-.005em}
.section-title,.hero-title{letter-spacing:-.035em}

/* ---- 2. TOP BAR ----------------------------------------------------- */
.top-bar{
  background:linear-gradient(100deg,#0b2547 0%,#14417c 42%,#166b62 100%);
  border-bottom:none;
}
.top-bar::before{
  background:radial-gradient(ellipse 60% 100% at 78% 50%,rgba(30,158,144,.35),transparent 70%);
}
.top-bar::after{
  height:2px;opacity:1;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(212,162,47,.25) 45%,rgba(30,158,144,.55) 100%);
}
.top-info .fa{color:var(--gold-l)}

/* ---- 3. NAV: centre-grow gradient underline ------------------------- */
.nav-bar{
  background:linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);
  border-top:none;border-bottom:1px solid var(--g200);
  box-shadow:0 2px 14px rgba(20,65,124,.05);
}
.nav-bar::before{
  background:radial-gradient(ellipse 45% 120% at 50% 0%,rgba(212,162,47,.10),transparent 70%);
}
.nav-bar.sticky{
  background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  box-shadow:0 6px 26px rgba(20,65,124,.13);
}
/* neutralise the two capsule halves entirely */
.nav-menu>li>a::before{display:none}
.nav-menu>li>a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:6px;top:auto;
  height:3px;border-radius:3px;z-index:1;
  background:linear-gradient(90deg,var(--gold) 0%,var(--pri-l) 55%,var(--red) 100%);
  border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:left .32s cubic-bezier(.22,1,.36,1),right .32s cubic-bezier(.22,1,.36,1);
}
.nav-menu>li>a{color:var(--g700);border-radius:0}
.nav-menu>li>a:hover{color:var(--pri-d);transform:none;background:rgba(20,65,124,.04)}
.nav-menu>li>a:hover::after{left:18px;right:18px}
.nav-menu>li.active>a{color:var(--pri-d);background:rgba(20,65,124,.05)}
.nav-menu>li.active>a::before{display:none}
.nav-menu>li.active>a::after{left:18px;right:18px;transform:none}
.nav-menu>li.active>a:hover::after{left:18px;right:18px}
.nav-menu li .fa-caret-down{color:var(--gold-d)}
.nav-menu>li.active>a .fa-caret-down{color:var(--pri-d)}
/* dropdown: gold left-rail instead of the top rainbow bar */
.dropdown-menu-sls{border-radius:4px 4px 14px 14px;border-color:var(--g200)}
.dropdown-menu-sls::after{display:none}
.dropdown-menu-sls::before{
  display:block;content:"";position:absolute;top:10px;bottom:10px;left:0;width:3px;
  background:linear-gradient(180deg,var(--gold),var(--pri-l),var(--red));border-radius:3px;
}
.dropdown-menu-sls a{border-radius:8px}
.dropdown-menu-sls a::after{display:none}
.dropdown-menu-sls a:hover{background:rgba(20,65,124,.06);color:var(--pri-d);padding-left:22px}

/* ---- 12. BUTTONS: fill-slide + arrow nudge -------------------------- */
.btn-sls{overflow:hidden;isolation:isolate}
.btn-sls::before{
  background:linear-gradient(90deg,var(--pri-d) 0%,var(--red) 100%);
  transform:translateX(-101%);opacity:1;z-index:-1;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.btn-sls:hover::before{transform:translateX(0)}
.btn-sls i{transition:transform .32s cubic-bezier(.22,1,.36,1)}
.btn-sls:hover i{transform:translateX(4px)}
.btn-sls.primary:hover{transform:translateY(-2px)}
.btn-sls.outline::before{background:linear-gradient(90deg,var(--pri) 0%,var(--red) 100%)}
.btn-sls.outline:hover{color:#fff;border-color:transparent}
.btn-sls.ghost-light::before{background:#fff}
.btn-sls.ghost-light:hover{color:var(--pri-d)}

/* ---- 6. SECTION EYEBROW: gradient diamond + hairline --------------- */
.section-label{
  background:none;border:none !important;backdrop-filter:none !important;
  padding:0;color:var(--gold-d);gap:12px;
  font-weight:800;letter-spacing:.2em;
}
.section-label .bar{
  width:9px;height:9px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold) 0%,var(--red) 100%);
  transform:rotate(45deg);
}
.section-label::after{
  content:"";flex:0 0 44px;height:1px;
  background:linear-gradient(90deg,rgba(212,162,47,.7),transparent);
}
.recent-section .section-label,.quote-section .section-label{color:var(--gold-d)}
.accent-line{
  width:72px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--pri-l) 100%);
}

/* ---- 5. HERO: accent, badge, overlay ------------------------------- */
.hero-slide::before{
  background:
    linear-gradient(105deg,rgba(7,20,38,.90) 0%,rgba(11,37,71,.72) 38%,rgba(13,44,87,.30) 62%,rgba(13,44,87,.04) 100%),
    radial-gradient(ellipse 55% 75% at 8% 60%,rgba(30,158,144,.30) 0%,transparent 65%);
}
.hero-slide::after{
  background:
    radial-gradient(circle 340px at 14% 30%,rgba(212,162,47,.16) 0%,transparent 70%),
    linear-gradient(180deg,rgba(7,20,38,0) 62%,rgba(7,20,38,.55) 100%);
}
.hero-particle.p2{display:none}
.hero-particle.p1{background:radial-gradient(circle,var(--red) 0%,transparent 70%);opacity:.34;left:4%}
.hero-particle.p3{background:radial-gradient(circle,var(--gold) 0%,transparent 70%);opacity:.26;top:58%;left:22%}
/* accent word: solid gold with a soft swash under the baseline */
.hero-title .accent{
  position:relative;font-style:normal;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--gold-l);color:var(--gold-l);
  animation:none;
}
.hero-title .accent::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.22em;
  background:linear-gradient(90deg,rgba(212,162,47,.42),rgba(30,158,144,.30));
  border-radius:.14em;z-index:-1;
}
.hero-badge{
  border-radius:4px 14px 14px 4px;padding:8px 18px 8px 14px;
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.20);
  letter-spacing:.2em;
}
.hero-badge .dot{
  width:10px;height:10px;border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold) 0%,var(--red) 100%);
  animation:none;box-shadow:0 0 12px rgba(212,162,47,.7);
}
.hero-line{
  width:74px;height:4px;border-radius:4px;animation:none;
  background:linear-gradient(90deg,var(--gold) 0%,var(--red) 100%);
  box-shadow:0 0 18px rgba(212,162,47,.45);
}
.hero-content{padding-bottom:70px;max-width:600px}

/* ---- 4. HERO STATS: vertical glass panel, right-hand side ---------- */
.hero-stat-strip{
  left:auto;bottom:auto;top:50%;
  right:max(28px,calc((100vw - 1260px)/2 + 28px));
  transform:translateY(-50%);
  width:290px;
  grid-template-columns:1fr;gap:0;
  background:rgba(7,20,38,.40);
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px 22px 22px 6px;
  padding:8px 10px;
  box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.16);
}
.hero-stat-strip::before{
  content:"";position:absolute;top:14px;bottom:14px;left:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--red));
}
.hs-item{
  border-right:none;border-bottom:1px solid rgba(255,255,255,.10);
  padding:13px 10px 13px 14px;
}
.hs-item:last-child{border-bottom:none}
.hs-item:hover{transform:translateX(3px)}
.hs-ic{
  width:36px;height:36px;border-radius:10px;font-size:14px;
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);
  color:var(--gold-l);box-shadow:none;
}
.hs-item b{font-size:16px}
@media(max-width:1180px){
  .hero-stat-strip{display:none}
  .hero-content{padding-bottom:40px}
}

/* ---- 7. CARD SIGNATURE: ring + corner accent (no mask, no sheen) --- */
.product-card::before,.svc-card::before,.featured-card::before,
.product-card::after{display:none}
.product-card,.svc-card,.featured-card,.cap-card,.why-card-xl,
.api-group-card,.imp-card,.contact-card,.leader-grid .leader-card{
  transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s,border-color .3s;
}
.product-card:hover,.svc-card:hover,.featured-card:hover{
  border-color:rgba(20,65,124,.28);
  box-shadow:0 0 0 4px rgba(212,162,47,.14),0 22px 46px rgba(13,27,62,.15);
}
/* small gold corner tick — the new shared card accent */
.svc-card .svc-card-body::after,
.featured-card .feat-info::after{
  content:"";position:absolute;right:0;bottom:0;
  width:0;height:0;border-style:solid;border-width:0 0 22px 22px;
  border-color:transparent transparent rgba(212,162,47,.34) transparent;
  transition:border-width .35s cubic-bezier(.22,1,.36,1);
}
.svc-card .svc-card-body,.featured-card .feat-info{position:relative}
.svc-card:hover .svc-card-body::after,
.featured-card:hover .feat-info::after{border-width:0 0 34px 34px}
.cap-card:hover,.why-card-xl:hover,.api-group-card:hover,
.imp-card:hover,.leader-grid .leader-card:hover{
  box-shadow:0 0 0 4px rgba(212,162,47,.12),0 20px 44px rgba(13,27,62,.14);
}

/* ---- 8. SERVICE CARDS: circular badge on the image ----------------
   .svc-num is a child of .svc-card (not of the image), so it is offset from
   the top by the image height — bottom-anchoring would clip it at the card
   foot. --svc-img-h keeps the badge glued to the image edge per breakpoint. */
.svc-card{--svc-img-h:190px}
.svc-num{
  top:calc(var(--svc-img-h) - 28px);bottom:auto;right:auto;left:26px;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;letter-spacing:0;opacity:1;
  color:#fff;-webkit-text-fill-color:#fff;
  background:linear-gradient(135deg,var(--pri) 0%,var(--red) 100%);
  border:3px solid #fff;
  box-shadow:0 8px 22px rgba(20,65,124,.30);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-num{transform:translateY(-4px) scale(1.06);opacity:1}
.svc-card-img{position:relative;height:var(--svc-img-h)}
.svc-card{overflow:hidden}
.svc-card-body{padding-top:42px}
@media (max-width:880px){.svc-card{--svc-img-h:180px}}
.svc-card-tag{
  background:rgba(20,65,124,.07);color:var(--pri-d);
  border-radius:50px;padding:5px 14px;width:fit-content;
  letter-spacing:.12em;
}
.svc-card-tag::before{display:none}

/* ---- 9. ABOUT: one grouped glass stat panel ----------------------- */
.about-visual{height:500px}
.av-frame{width:82%;height:86%;border-radius:8px 30px 30px 8px}
.av-frame::before{border-radius:8px 30px 30px 8px}
.av-tag{border-radius:4px 14px 14px 4px}
.av-chip{
  position:absolute;right:0;left:auto;min-width:0;
  width:250px;animation:none;border-radius:0;
  border:1px solid rgba(255,255,255,.85);border-bottom:none;
  background:rgba(255,255,255,.90);backdrop-filter:blur(10px);
  box-shadow:none;padding:14px 16px;
}
.av-chip-1{top:auto;bottom:calc(50% + 46px);border-radius:6px 18px 0 0;
  box-shadow:0 -6px 24px rgba(13,27,62,.10)}
.av-chip-2{top:auto;bottom:calc(50% - 23px);right:0}
.av-chip-3{top:auto;bottom:calc(50% - 92px);right:0;
  border-bottom:1px solid rgba(255,255,255,.85);border-radius:0 0 18px 6px;
  box-shadow:0 14px 30px rgba(13,27,62,.12)}
.av-chip .ico{border-radius:9px;width:38px;height:38px;font-size:15px}
.av-chip b{font-size:17px}
@media(max-width:980px){
  .about-visual{height:auto}
  .av-chip{position:relative;width:100%;right:auto;bottom:auto !important;border-radius:0 !important;
    border-bottom:1px solid rgba(255,255,255,.85) !important;box-shadow:none !important}
  .av-chip-1{margin-top:18px;border-radius:6px 18px 0 0 !important}
  .av-chip-3{border-radius:0 0 18px 6px !important}
}
.about-mini-stats{
  border-top:none;border-bottom:none;
  background:linear-gradient(135deg,rgba(212,162,47,.07),rgba(30,158,144,.06));
  border-radius:6px 20px 20px 6px;padding:20px 18px;
}
.about-mini-stats>div+div{border-left:1px solid rgba(20,65,124,.10)}
.about-mini-stats>div{padding:0 14px}
.about-mini-stats b{
  background:linear-gradient(135deg,var(--pri) 0%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- 10. WHY CARDS: icon + watermark numeral ---------------------- */
.why-card-xl{border-radius:6px 22px 22px 6px;overflow:hidden}
.why-card-xl::before{
  height:100%;width:3px;right:auto;
  background:linear-gradient(180deg,var(--gold),var(--red));
  transform:scaleY(0);transform-origin:top;
}
.why-card-xl:hover::before{transform:scaleY(1)}
.wc-head{display:block;margin-bottom:14px;position:relative}
.wc-num{
  position:absolute;right:-4px;bottom:-14px;
  font-size:62px;font-weight:800;opacity:.10;letter-spacing:-.05em;
  background:none;-webkit-text-fill-color:var(--pri);color:var(--pri);
  transition:opacity .35s;
}
.why-card-xl:hover .wc-num{opacity:.18;transform:none}
.wc-icon{border-radius:12px;width:50px;height:50px;position:relative;z-index:2}
.why-card-xl:hover .wc-icon{transform:translateY(-3px) rotate(0deg)}

/* ---- 11. FOOTER: deep ink, gold accents --------------------------- */
.site-footer{
  background:linear-gradient(150deg,#071426 0%,#0d2c57 52%,#0b2547 100%);
  color:rgba(255,255,255,.80);
}
.site-footer::before{
  height:3px;background:linear-gradient(90deg,var(--gold) 0%,var(--pri-l) 50%,var(--red) 100%);
}
.site-footer::after{
  background:
    radial-gradient(ellipse 45% 70% at 6% 20%,rgba(212,162,47,.16),transparent 60%),
    radial-gradient(ellipse 45% 70% at 94% 80%,rgba(30,158,144,.16),transparent 60%);
}
.site-footer .logo-img{height:104px}
.footer-grid h4{color:#fff}
.footer-grid h4::after{background:linear-gradient(90deg,var(--gold),var(--red))}
.footer-grid p,.footer-grid a,.footer-contact p,.footer-office p{color:rgba(255,255,255,.76)}
.footer-grid ul li a{color:rgba(255,255,255,.80)}
.footer-grid ul li a::before{background:var(--gold)}
.footer-grid ul li a:hover{color:var(--gold-l)}
.footer-grid ul li a:hover::before{background:var(--gold-l)}
.footer-office{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--gold);
  border-radius:4px 14px 14px 4px;
  box-shadow:none;
}
.footer-office:hover{background:rgba(255,255,255,.08);box-shadow:none}
.footer-office:nth-child(even){border-left-color:var(--red)}
.footer-office .office-label{color:#fff}
.footer-office .office-label .fa{background:linear-gradient(135deg,var(--gold),var(--red))}
.footer-office:nth-child(even) .office-label .fa{background:linear-gradient(135deg,var(--red),var(--pri-l))}
.footer-contact .fa,.footer-meta .fa{color:var(--gold-l)}
.footer-meta{border-top:1px solid rgba(255,255,255,.12)}
.footer-meta a,.footer-meta span{color:rgba(255,255,255,.82)}
.footer-meta a:hover{color:var(--gold-l)}
.footer-social a{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);border-radius:10px;box-shadow:none;
}
.footer-social a:hover{
  background:linear-gradient(135deg,var(--gold),var(--red));color:#0b1e38;
  border-color:transparent;box-shadow:0 10px 22px rgba(212,162,47,.28);
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.60);font-weight:500;
}

/* ---- pale band sections: retune away from the old pastel wash ----- */
.recent-section,.quote-section{
  background:linear-gradient(165deg,#f7fbff 0%,#eef5fb 45%,#f4f1e6 100%);
}
.recent-section::before,.quote-section::before{
  background:
    radial-gradient(ellipse 40% 60% at 92% 12%,rgba(212,162,47,.22),transparent 60%),
    radial-gradient(ellipse 45% 55% at 4% 88%,rgba(30,158,144,.16),transparent 60%);
}
.why-section{background:linear-gradient(180deg,#ffffff 0%,#f6faff 60%,#f4f1e6 100%)}
.stats-bar{background:linear-gradient(180deg,#ffffff 0%,#f6faff 100%)}

/* softer, less uniform card radii — the old sheet used one 18-22px radius
   on every surface, which is itself a recognisable tell */
.svc-card,.featured-card,.quote-form-card,.cap-card,.leader-card,
.api-group-card,.imp-card,.stat-box,.contact-card,.modal-card,.mv-card{
  border-radius:6px 22px 22px 6px;
}
.product-card{border-radius:6px 18px 18px 6px}
.product-card .struct,.featured-card .feat-struct{border-radius:4px 14px 14px 4px}
.cta-banner{border-radius:8px 34px 34px 8px}
.dark-why-grid .img-wrap,.welcome-img .circle-img,.map-wrap{border-radius:8px 28px 28px 8px}
.gallery-item{border-radius:4px 16px 16px 4px}
.leader-grid .leader-card .avatar,.leader-card .avatar{border-radius:50% 50% 50% 12px}

/* ---- accessibility: v1 had no visible focus ring ------------------ */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.btn-sls:focus-visible,.nav-menu>li>a:focus-visible{outline-offset:3px}

/* ---- respect reduced motion -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .carousel-track{animation:none !important}
}

/* ---- hero crossfade: only the active slide's copy renders ---------
   Base sheet fades whole slides, so during the 1.1s crossfade two headlines,
   two badges and two CTA rows overlap. Toggling visibility only (no extra
   opacity or delay) lets the slide's own fade carry the copy in with the
   photograph — an opacity delay here would blank the hero between slides. */
.hero-slide .hero-content{visibility:hidden}
.hero-slide.active .hero-content{visibility:visible}

/* ---- structure plates: retune the cream wash to match the cooler bands -- */
.featured-card .feat-struct,.product-card .struct{
  background:linear-gradient(135deg,#eaf2fb 0%,#e4f2ef 55%,#f6efe1 100%);
  border-color:rgba(255,255,255,.75);
}
.product-card .formula{background:rgba(20,65,124,.07)}
.product-card:hover .formula{background:linear-gradient(135deg,var(--pri),var(--red));color:#fff}

/* ---- accessibility corrections to the identity layer ---------------
   The eyebrow reads as gold, but --gold-d (#b8891f) is only ~2.8:1 on the
   tinted band backgrounds and the label is 11px uppercase. --gold-ink keeps
   the gold hue while clearing 4.5:1 on white and on every band tint. */
:root{--gold-ink:#8a650b}
.section-label,
.recent-section .section-label,
.quote-section .section-label{color:var(--gold-ink)}
/* the diamond and hairline stay full-strength gold — they are not text */
.section-label .bar{background:linear-gradient(135deg,var(--gold) 0%,var(--red) 100%)}
.section-label::after{background:linear-gradient(90deg,rgba(212,162,47,.75),transparent)}

/* ---- fix: .av-frame uses height:86% of .about-visual, but the base sheet
   sets .about-visual{height:auto} below 980px, which collapses the frame to
   zero and hides the lab photo. Restore an explicit height there. ---------- */
@media (max-width:980px){
  .about-visual{height:auto;min-height:0}
  .av-frame{position:relative;width:100%;height:340px;border-radius:6px 24px 24px 6px}
  .av-frame::before{border-radius:6px 24px 24px 6px}
}
@media (max-width:580px){
  .av-frame{height:240px}
}

/* ---- fix: below 991px the base sheet hides .nav-menu and absolutely
   positions .nav-toggle, which leaves the nav bar with almost no height so the
   menu button floats onto the hero photograph. Give the bar real height and
   put the toggle back in flow. ------------------------------------------- */
@media (max-width:991px){
  .nav-bar{min-height:56px}
  .nav-bar .container-wide{
    display:flex;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;min-height:56px;
  }
  .nav-toggle{
    position:static;right:auto;top:auto;margin-left:auto;
    display:flex;align-items:center;justify-content:center;
    min-width:48px;min-height:48px;padding:0;
    color:var(--pri-d);font-size:20px;
  }
  .nav-menu{flex-basis:100%;order:3}
  .nav-menu>li>a::after{display:none}
  .nav-menu>li>a{border-left:3px solid transparent;padding-left:18px}
  .nav-menu>li.active>a{border-left-color:var(--gold);background:rgba(20,65,124,.05)}
}

/* ---- last remaining borrowed signature: .av-frame::before still drew the
   masked-gradient ring used on the old cards. Replace it with a gold corner
   bracket, so no element on the site uses that border trick any more. ------ */
.av-frame::before{
  display:block;content:"";position:absolute;
  top:16px;right:16px;left:auto;bottom:auto;
  width:46px;height:46px;padding:0;opacity:1;z-index:4;pointer-events:none;
  background:none;
  -webkit-mask:none;mask:none;
  -webkit-mask-composite:initial;mask-composite:initial;
  border:none;
  border-top:2px solid rgba(212,162,47,.9);
  border-right:2px solid rgba(212,162,47,.9);
  border-radius:0 14px 0 0;
}


/* =========================================================================
   ============  REFINEMENT PASS  ==========================================
   =========================================================================
   A. Footer logo — the navy wordmark was losing definition against the dark
      footer. The artwork is official brand material, so it is not recoloured;
      it is given a light "brand plate" to sit on instead.
   B. Product / catalog cards — rebuilt as a proper spec-sheet card:
      graph-paper structure plate, hairline data rows with right-aligned
      monospace values, status as a badge, and a clean single-hue CTA
      (the old navy->gold gradient went muddy brown through the midpoint).
   ========================================================================= */

/* ---- A. FOOTER BRAND PLATE ---------------------------------------- */
.site-footer .logo-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff 0%,#f2f7fc 100%);
  padding:16px 24px;
  border-radius:6px 22px 22px 6px;
  border-bottom:2px solid var(--gold);
  box-shadow:0 16px 38px rgba(0,0,0,.30),inset 0 1px 0 #fff;
}
.site-footer .logo-img{height:82px;max-width:300px}
@media(max-width:768px){
  .site-footer .logo-wrap{padding:13px 18px}
  .site-footer .logo-img{height:64px;max-width:250px}
}

/* ---- B1. STRUCTURE PLATE: faint chemistry graph paper -------------- */
.imp-card .struct-box,
.product-card .struct,
.featured-card .feat-struct{
  background-color:#fdfefe;
  background-image:
    linear-gradient(rgba(20,65,124,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,65,124,.055) 1px,transparent 1px);
  background-size:15px 15px;
  background-position:center center;
  border:none;
}
.imp-card .struct-box{
  height:215px;padding:22px;
  border-bottom:1px solid var(--g200);
  box-shadow:inset 0 0 0 1px rgba(20,65,124,.04);
}
.imp-card .struct-box img{max-height:168px;max-width:88%}
/* registration brackets: thin, all four corners, gold on hover */
.imp-card .struct-box::before,
.imp-card .struct-box::after{
  content:"";position:absolute;width:16px;height:16px;
  border:1.5px solid rgba(20,65,124,.28);opacity:1;
  transition:border-color .3s ease;
}
.imp-card .struct-box::before{top:12px;left:12px;border-right:none;border-bottom:none;border-radius:3px 0 0 0}
.imp-card .struct-box::after{bottom:12px;right:12px;border-left:none;border-top:none;border-radius:0 0 3px 0}
.imp-card:hover .struct-box::before,
.imp-card:hover .struct-box::after{
  border-color:var(--gold);width:16px;height:16px;
}
.imp-card .struct-box i{font-size:44px;color:rgba(20,65,124,.16);opacity:1}
.imp-card .struct-box .struct-wm{
  bottom:22px;font-size:11px;letter-spacing:.2em;
  color:rgba(20,65,124,.20);text-transform:uppercase;
}
.imp-card:hover .struct-box .struct-wm{color:rgba(184,137,31,.30)}

/* ---- B2. BODY + hairline spec rows -------------------------------- */
.imp-card .body{padding:20px 20px 22px}
.imp-card h5{
  font-family:var(--ff-head);font-size:16.5px;font-weight:600;
  color:var(--g900);letter-spacing:-.02em;line-height:1.35;margin:0 0 5px;
}
.imp-card .chem{
  font-size:12.5px;color:var(--g500);line-height:1.55;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:38px;
}
.imp-card dl{
  display:grid;grid-template-columns:auto 1fr;gap:0;
  margin:0 0 18px;padding:0;
  background:none;border:none;border-top:1px solid var(--g200);
}
.imp-card dt{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  color:var(--g500);text-transform:uppercase;letter-spacing:.13em;
  padding:9px 12px 9px 0;border-bottom:1px solid var(--g100);
  display:flex;align-items:center;
}
.imp-card dd{
  margin:0;font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--g900);text-align:right;
  padding:9px 0;border-bottom:1px solid var(--g100);
  display:flex;align-items:center;justify-content:flex-end;
}
.imp-card dt:nth-last-of-type(1),
.imp-card dd:nth-last-of-type(1){border-bottom:none}
/* inventory status reads as a badge, not as raw data */
.imp-card dd.inv-status{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  color:var(--pri-d);
  background:none;padding:9px 0;
}
.imp-card dd.inv-status::before{
  content:"";width:6px;height:6px;border-radius:50%;margin-right:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--red),var(--pri-l));
}

/* ---- B3. CTA: one clean hue, no muddy navy->gold midpoint --------- */
.imp-card .quote-btn{
  width:100%;padding:13px;border:none;
  background:var(--pri) !important;color:#fff !important;
  font-family:var(--ff);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.11em;
  border-radius:4px 16px 16px 4px;
  box-shadow:0 6px 16px rgba(20,65,124,.20);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.imp-card .quote-btn i{color:var(--gold-l);transition:transform .3s ease}
.imp-card .quote-btn:hover{
  background:linear-gradient(90deg,var(--pri-d) 0%,var(--red) 100%) !important;
  box-shadow:0 12px 26px rgba(20,65,124,.30);
  transform:translateY(-2px);
}
.imp-card .quote-btn:hover i{transform:scale(1.08)}

/* ---- B4. category pill (Agro pages) ------------------------------- */
.imp-card .cat-pill{
  border-radius:0 0 12px 0;top:0;left:0;
  border-left:none;border-bottom:2px solid var(--gold);
  padding:6px 12px;box-shadow:0 4px 12px rgba(13,27,62,.10);
  font-family:var(--mono);letter-spacing:.13em;font-size:9.5px;
}
.imp-card .cat-pill.insecticide{border-bottom-color:var(--red);color:var(--red)}
.imp-card .cat-pill.fungicide{border-bottom-color:var(--pri-l);color:var(--pri)}
.imp-card .cat-pill.herbicide{border-bottom-color:var(--gold);color:var(--gold-ink)}

/* ---- B5. homepage carousel card, kept in the same family ---------- */
.product-card .struct{height:158px;min-height:158px;border-bottom:1px solid var(--g200);margin-bottom:0}
.product-card h4{
  font-family:var(--ff-head);font-size:13px;font-weight:600;
  padding:15px 16px 10px;margin:0;min-height:58px;letter-spacing:-.015em;
}
.product-card .card-footer{padding:10px 16px 13px;border-top:1px solid var(--g100)}
.product-card .cas{font-family:var(--mono);font-size:10.5px}
.product-card .formula{
  font-family:var(--mono);border-radius:3px 10px 10px 3px;
  border:1px solid rgba(20,65,124,.14);
}
.featured-card .feat-struct{border:none;border-bottom:1px solid var(--g200)}

/* ---- B6. structure images are white-background PNGs, so the graph-paper
   plate only showed in the margin and framed a white rectangle. Multiply
   blending drops the white and lets the grid read behind the molecule, which
   is what a chemistry catalogue plate should look like. ------------------- */
.imp-card .struct-box img,
.product-card .struct.has-img img,
.featured-card .feat-struct img{
  mix-blend-mode:multiply;
}
/* status indicator dot — base sheet sets display:inline-block on this cell at
   higher specificity, which killed the pseudo-element's box */
.imp-card dd.inv-status{
  display:flex !important;align-items:center;justify-content:flex-end;
}
.imp-card dd.inv-status::before{display:inline-block}

/* ---- B7. featured card: same spec-sheet treatment as .imp-card, and drop
   the navy->gold CTA gradient here too (it was the muddiest of the lot) ---- */
.featured-card dl{
  display:grid;grid-template-columns:auto 1fr;gap:0;
  margin:10px 0 0;padding:0;
  background:none;border:none;border-top:1px solid var(--g200);border-radius:0;
}
.featured-card dt{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  color:var(--g500);text-transform:uppercase;letter-spacing:.13em;
  padding:9px 12px 9px 0;border-bottom:1px solid var(--g100);
  display:flex;align-items:center;
}
.featured-card dd{
  margin:0;font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--g900);text-align:right;
  padding:9px 0;border-bottom:1px solid var(--g100);
  display:flex;align-items:center;justify-content:flex-end;
}
.featured-card dt:nth-last-of-type(1),
.featured-card dd:nth-last-of-type(1){border-bottom:none}
.featured-card .feat-cta{
  background:var(--pri);color:#fff;
  border-radius:4px 16px 16px 4px;
  box-shadow:0 6px 16px rgba(20,65,124,.20);
  font-family:var(--ff);letter-spacing:.11em;
  transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.featured-card .feat-cta i{color:var(--gold-l);transition:transform .3s ease}
.featured-card .feat-cta:hover{
  background:linear-gradient(90deg,var(--pri-d) 0%,var(--red) 100%);
  color:#fff;box-shadow:0 12px 26px rgba(20,65,124,.30);transform:translateY(-2px);
}
.featured-card .feat-cta:hover i{transform:translateX(4px)}
.featured-card h3{font-family:var(--ff-head);letter-spacing:-.02em}

/* ---- B8. the base sheet paints a white inset panel inside the structure
   plates, which covered the graph paper and left it showing only as a thin
   margin. With multiply-blended images the grid is the bed, so drop it. ---- */
.featured-card .feat-struct::before,
.product-card .struct::before{display:none}
/* the gold corner tick lands on the CTA in the featured card — keep it on the
   service cards where there is empty corner space */
.featured-card .feat-info::after{display:none}

/* ---- B9. the insecticide pill used --red (#1e9e90 teal) as 9.5px text,
   which is only ~3.0:1 on white. Darken the text while keeping the teal
   identity on the rule beneath it. --------------------------------------- */
.imp-card .cat-pill.insecticide{color:#12665e;border-bottom-color:var(--red)}


/* =========================================================================
   ============  RECENT ADDITIONS — RECOMPOSED  ============================
   =========================================================================
   Was: a 360px portrait "featured" card beside an auto-scrolling rail. The
   grid stretched the rail cards to the featured card's height, which left a
   large dead area inside each one, and the row's left edge sliced a card in
   half. Now: a landscape spotlight card stacked above a rail of uniform,
   content-height cards.
   ========================================================================= */

/* stack instead of side-by-side */
.recent-mosaic{display:block;position:relative;z-index:2}

/* ---- spotlight card: landscape, structure plate left, spec right ---- */
.featured-card{
  display:grid;grid-template-columns:320px 1fr;gap:0;
  align-items:stretch;padding:0;overflow:hidden;
  border-radius:6px 26px 26px 6px;
}
.featured-card .feat-struct{
  height:auto;min-height:270px;margin:0;flex-shrink:0;
  border:none;border-right:1px solid var(--g200);border-radius:0;
  padding:26px;
}
.featured-card .feat-struct img{max-height:210px;max-width:92%}
.featured-card .feat-info{
  padding:30px 32px;gap:0;justify-content:center;
}
.featured-card .featured-badge{top:0;left:0;border-radius:0 0 14px 0}
.featured-card .featured-cat{top:0;right:0;border-radius:0 0 0 14px}
.featured-card h3{font-size:24px;margin:0 0 6px;line-height:1.25}
.featured-card .feat-chem{
  font-size:14px;color:var(--g500);margin:0 0 20px;line-height:1.6;
  -webkit-line-clamp:2;max-width:60ch;
}
/* spec row runs horizontally in this orientation: labels above values, 3-up.
   The dl children are dt,dd,dt,dd,dt,dd — column flow over two rows pairs
   each label with its value automatically. */
.featured-card dl{
  display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
  grid-template-columns:repeat(3,minmax(0,auto));
  gap:5px 42px;justify-content:start;
  margin:0 0 24px;padding:18px 0 0;
  border:none;border-top:1px solid var(--g200);border-radius:0;background:none;
}
.featured-card dt{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  color:var(--g500);text-transform:uppercase;letter-spacing:.14em;
  padding:0;border:none;display:block;text-align:left;
}
.featured-card dd{
  font-family:var(--mono);font-size:14px;font-weight:500;color:var(--g900);
  padding:0;border:none;display:block;text-align:left;margin:0;
}
.featured-card .feat-cta{
  width:fit-content;margin:0;padding:13px 26px;
}

/* ---- rail: uniform, content-height cards ---- */
.mosaic-scroll{
  margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
}
/* align-items:flex-start stops the flex row stretching every card to the
   tallest one, which was the source of the empty space */
.carousel-track{align-items:flex-start;gap:18px;padding:4px 0 10px}
.recent-section .product-card{
  width:250px;min-width:250px;max-width:250px;
  border-radius:6px 18px 18px 6px;
}
.recent-section .product-card .struct{height:140px;min-height:140px}
.recent-section .product-card h4{
  font-size:12.5px;padding:13px 14px 8px;min-height:52px;
  -webkit-line-clamp:3;
}
.recent-section .product-card .card-footer{
  padding:9px 14px 12px;flex-direction:column;align-items:flex-start;gap:7px;
}
.recent-section .product-card .cas{font-size:10px;width:100%}
.recent-section .product-card .formula{font-size:9.5px;padding:3px 9px}
.recent-section .product-card .new-badge{border-radius:0 0 0 12px}
.recent-section .product-card .cat-chip{border-radius:0 0 12px 0}

/* ---- section footer link ---- */
.recent-more{
  display:flex;justify-content:center;margin-top:30px;
}
.recent-more a{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pri-d);
  padding:13px 26px;background:rgba(255,255,255,.7);
  border:1px solid rgba(20,65,124,.16);border-radius:4px 18px 18px 4px;
  backdrop-filter:blur(8px);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.recent-more a i{transition:transform .3s ease;color:var(--gold-d)}
.recent-more a:hover{background:#fff;border-color:rgba(20,65,124,.34);color:var(--pri-d)}
.recent-more a:hover i{transform:translateX(4px)}

@media(max-width:900px){
  .featured-card{grid-template-columns:1fr}
  .featured-card .feat-struct{
    border-right:none;border-bottom:1px solid var(--g200);min-height:230px;
  }
  .featured-card .feat-info{padding:24px}
  .featured-card dl{gap:5px 28px}
}
@media(max-width:560px){
  .featured-card h3{font-size:20px}
  .featured-card dl{
    grid-auto-flow:row;grid-template-columns:auto 1fr;grid-template-rows:none;
    gap:0;
  }
  .featured-card dt{
    padding:9px 12px 9px 0;border-bottom:1px solid var(--g100);
    display:flex;align-items:center;
  }
  .featured-card dd{
    padding:9px 0;border-bottom:1px solid var(--g100);
    display:flex;align-items:center;justify-content:flex-end;text-align:right;
  }
  .featured-card dt:nth-last-of-type(1),
  .featured-card dd:nth-last-of-type(1){border-bottom:none}
  .featured-card .feat-cta{width:100%;justify-content:center}
}

/* ---- recent additions: final polish -------------------------------- */
/* inset the category chip so it stops fighting the 26px corner radius */
.featured-card .featured-cat{
  top:14px;right:14px;border-radius:3px 12px 12px 3px;
  border:1px solid var(--g200);
}
.featured-card .featured-badge{
  top:0;left:0;border-radius:0 0 14px 0;padding:6px 14px;
}
/* a marquee always has a partial card at each edge; widen the fade so the
   cut reads as "more this way" rather than as a broken card */
.mosaic-scroll{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 105px,#000 calc(100% - 105px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 105px,#000 calc(100% - 105px),transparent 100%);
}
@media(max-width:700px){
  .mosaic-scroll{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 60px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 60px),transparent 100%);
  }
}

/* ---- backgrounds are now dark abstract plates rather than bright photos,
   so the base sheet's white bottom fade on the service card image reads as
   milky haze. Drop it and let the plate meet the card body cleanly. ------- */
.svc-card-img::after{display:none}
.svc-card-img{border-bottom:1px solid rgba(255,255,255,.10)}
/* the about-visual overlay was tuned for a bright photo too */
.av-overlay{background:linear-gradient(170deg,rgba(7,20,38,.10) 0%,rgba(7,20,38,.45) 100%)}