@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800;900&display=swap');

:root{
    --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Brand palette */
  --burnt-orange:#d2691e; /* primary */
  --dark-brown:#3c2f2f;
  --caramel:#c97e43;
  --soft-peach:#fff3e6;

  /* Neutrals / lines */
  --light:#fffaf4;
  --border:#e6cdb7;
  --ink:#14161a;
  --muted:#60656f;
  --line:#efe7de;

  /* Brand accents */
  --brand:#ff8a00;
  --brand-2:#ffbf75;
  --brand-soft:#fff3e6;
  --brand-dark:#b85a12;

  /* Surfaces / shadows / easing */
  --glass:rgba(255,255,255,.72);
  --glass-stroke:rgba(20,22,26,.06);
  --stroke:rgba(18,20,24,.08);
  --shadow:0 16px 40px rgba(20,22,26,.08);
  --shadow-strong:0 18px 60px rgba(2,6,23,.12);
  --shadow-soft:0 10px 30px rgba(2,6,23,.10);

  --radius:14px;
  --e:cubic-bezier(.2,.8,.2,1);
  --bezier:cubic-bezier(.2,.8,.2,1);

  /* Card gradients */
  --card-odd:  linear-gradient(180deg,#fffdf9 0%, #ffffff 100%);
  --card-even: linear-gradient(180deg,#fff7f2 0%, #fffaf4 100%);
  --grad-orange:  linear-gradient(145deg, rgba(210,105,30,.12) 0%, rgba(210,105,30,.06) 55%, rgba(255,243,230,.9) 100%);
  --grad-caramel: linear-gradient(145deg, rgba(201,126,67,.14) 0%, rgba(201,126,67,.07) 55%, rgba(255,250,244,.95) 100%);
  --grad-brown:   linear-gradient(145deg, rgba(60,47,47,.10) 0%, rgba(60,47,47,.05) 55%, rgba(255,250,244,.96) 100%);
  --grad-hover:   linear-gradient(145deg, rgba(210,105,30,.18) 0%, rgba(201,126,67,.12) 50%, rgba(255,243,230,.95) 100%);

  /* Background mesh + network */
  --mesh:
    radial-gradient(1200px 700px at 85% 8%, rgba(255,159,66,.18), transparent 62%),
    radial-gradient(900px 600px at 10% 82%, rgba(255,191,117,.14), transparent 64%),
    linear-gradient(180deg,#fff,#fff);

  --network:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'>\
      <defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
        <stop offset='0%' stop-color='%23ff8a00'/><stop offset='100%' stop-color='%23ffbf75'/>\
      </linearGradient><filter id='b'><feGaussianBlur stdDeviation='0.6'/></filter></defs>\
      <g stroke='url(%23g)' stroke-width='1' stroke-opacity='.55' fill='none'>\
        <path d='M0,650 C180,560 260,520 420,540 C600,560 760,620 940,590 C1060,570 1140,520 1200,520'/>\
        <path d='M0,480 C160,450 280,420 420,440 C650,470 760,520 920,500 C1040,480 1120,450 1200,440'/>\
        <path d='M0,300 C180,320 320,360 460,370 C660,385 840,360 1000,340 C1100,325 1160,315 1200,310'/>\
      </g><g fill='url(%23g)' filter='url(%23b)'>\
        <circle cx='120' cy='610' r='3'/><circle cx='280' cy='540' r='3'/>\
        <circle cx='460' cy='550' r='3'/><circle cx='700' cy='570' r='3'/>\
        <circle cx='920' cy='560' r='3'/><circle cx='1090' cy='530' r='3'/>\
        <circle cx='160' cy='455' r='3'/><circle cx='420' cy='445' r='3'/><circle cx='740' cy='505' r='3'/>\
        <circle cx='1020' cy='485' r='3'/><circle cx='220' cy='330' r='3'/><circle cx='520' cy='370' r='3'/>\
        <circle cx='880' cy='350' r='3'/>\
      </g></svg>");

  /* Molecule SVGs */
  --chem-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><g fill="none" stroke="%23e6cdb7" stroke-width="1.2" stroke-linecap="round"><path d="M40 40l40 0 20 34 -20 34 -40 0 -20 -34z"/></g></svg>');
  --chem-svg-accent:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><g fill="none" stroke="%23e6cdb7" stroke-width="1.2" stroke-linecap="round"><path d="M40 40l40 0 20 34 -20 34 -40 0 -20 -34z"/><circle cx="40" cy="40" r="2.5" fill="%23d2691e"/></g></svg>');

  /* Header theme */
  --header-brand: var(--burnt-orange);
  --header-line:#ece8e3;
  --header-shadow: var(--shadow-strong);
}

/* Baseline */
*{box-sizing:border-box}
html,body{
  font-family:Open Sans;
  background:var(--mesh);
  color:var(--ink);
  margin:0;
  -webkit-font-smoothing:antialiased
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}


/* ==============================
   1) ANIMATIONS & REDUCED MOTION
   ============================== */
@keyframes accentFlow{0%{background-position:0 0}50%{background-position:0 100%}100%{background-position:0 0}}
@keyframes lineSweep{to{background-position:200% 0}}
@keyframes iconPulse{
  0%,100%{box-shadow:0 12px 26px rgba(210,105,30,.30),inset 0 0 0 6px rgba(255,255,255,.35)}
  50%{box-shadow:0 16px 34px rgba(210,105,30,.42),inset 0 0 0 8px rgba(255,255,255,.45)}
}
@keyframes drift{0%{transform:translateY(-12px) scale(1.01)}100%{transform:translateY(12px) scale(1.03)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes meshDrift{0%{transform:translateY(-10px) scale(1.01)}100%{transform:translateY(10px) scale(1.03)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1)}
.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal-up,.reveal-left,.reveal-right{transition:none !important;transform:none !important}
  .circle-icon{animation:none !important}
  .hero-net::before{animation:none !important}
  .mesh-section::before{animation:none !important}
  .ssx-bg{transform:none !important}
  *{scroll-behavior:auto !important}
}


/* ==============================
   2) ABOUT — PRO INFO BOXES
   ============================== */
.info-stack{display:grid;gap:22px;margin-block:40px 70px}
.info-stack>.info-box.pro:nth-child(even){background:var(--card-even)}

.info-box.pro{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:26px 26px 26px 22px;background:var(--card-odd);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 28px rgba(60,47,47,.08);
  overflow:hidden;isolation:isolate;transition:transform .28s ease,box-shadow .28s ease
}
.info-box.pro:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(60,47,47,.12)}
.info-box.pro::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;z-index:0;
  background:linear-gradient(180deg,var(--burnt-orange),#7b4d00 60%,var(--caramel));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;border-radius:18px 0 0 18px
}
.info-box.pro .chem-bg,.info-box.pro .glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.info-box.pro .chem-bg{
  background-image:var(--chem-svg-accent);background-size:220px 220px;opacity:.10;
  -webkit-mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%)
}
.info-box.pro .glow{background:radial-gradient(420px 240px at 85% -10%,rgba(210,105,30,.10),transparent 60%)}

.icon-line{z-index:1;display:flex;align-items:flex-start;justify-content:center;padding:6px 0 6px 8px;position:relative}
.icon-line .stem{position:absolute;left:38px;top:72px;bottom:8px;width:2px;background:linear-gradient(#efdac7,transparent);border-radius:2px}
.circle-icon{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 24px rgba(210,105,30,.35),inset 0 0 0 6px rgba(255,255,255,.35);
  animation:iconPulse 3.2s ease-in-out infinite
}
.circle-icon i{font-size:24px}
.circle-icon.burnt-orange{background:var(--burnt-orange)}
.circle-icon.dark-brown{background:var(--dark-brown);box-shadow:0 10px 24px rgba(60,47,47,.35),inset 0 0 0 6px rgba(255,255,255,.28)}
.circle-icon.caramel{background:var(--caramel)}
.circle-icon.soft-peach{background:var(--soft-peach);color:#3c2f2f}

.info-box.pro.right{grid-template-columns:1fr auto;padding:26px 22px 26px 26px}
.info-box.pro.right::before{left:auto;right:0;border-radius:0 18px 18px 0}
.info-box.pro.right .icon-line{padding-left:0;padding-right:8px}
.info-box.pro.right .icon-line .stem{left:auto;right:38px}
.info-box.pro.right .chem-bg{
  -webkit-mask-image:radial-gradient(50% 50% at 10% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 10% 10%,#000 15%,transparent 70%)
}

.info-box.pro .content{z-index:1}
.info-box.pro h3{margin:0 0 10px;font-size:22px;color:#7b4d00;display:flex;align-items:center;gap:10px}
.info-box.pro .chip{font-size:12px;color:#7b4d00;background:#fff3e6;border:1px solid var(--border);padding:4px 8px;border-radius:999px}
.info-box.pro p{margin:8px 0 14px;line-height:1.7;color:#4d2e00}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#7b4d00;background:#fff7f2;border:1px solid var(--border);padding:6px 10px;border-radius:999px}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:2px}

.btn-ghost,.btn-soft{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;font-size:14px;
  border-radius:10px;padding:10px 14px;transition:transform .15s ease,background .2s ease,box-shadow .2s ease
}
.btn-ghost{color:#fff;background:var(--burnt-orange);box-shadow:0 8px 22px rgba(210,105,30,.28)}
.btn-ghost:hover{transform:translateY(-1px)}
.btn-soft{color:#7b4d00;background:#fff3e6;border:1px solid var(--border)}
.btn-soft:hover{background:#ffe9d7}

.line{
  height:3px;width:100%;margin-top:16px;border-radius:999px;background-size:200% 100%;
  animation:lineSweep 6s linear infinite
}
.burnt-orange-line{background:linear-gradient(90deg,var(--burnt-orange),#b65c00 60%,var(--caramel))}
.dark-brown-line{background:linear-gradient(90deg,var(--dark-brown),#7b4d00 60%,var(--caramel))}
.caramel-line{background:linear-gradient(90deg,#c97e43,#d2691e 60%,#f0b187)}
.soft-peach-line{background:linear-gradient(90deg,#fff3e6,#c97e43 60%,#d2691e)}

@media (max-width:680px){
  .info-box.pro{grid-template-columns:1fr;padding:22px}
  .info-box.pro .icon-line{order:-1;padding-left:0}
  .info-box.pro .icon-line .stem{display:none}
  .info-box.pro.right{grid-template-columns:1fr;padding:22px}
}


/* ==============================
   3) CONTACT — TITLE CARD / PANELS
   ============================== */
.page-title .title-card{
  position:relative;background:var(--card-odd);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 12px 26px rgba(60,47,47,.08);
  overflow:hidden;isolation:isolate
}
.page-title .title-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;
  background:linear-gradient(180deg,var(--burnt-orange),#7b4d00 60%,var(--caramel));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;
  border-radius:16px 0 0 16px;z-index:0
}
.page-title .title-card::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--chem-svg-accent);background-size:220px 220px;opacity:.08;
  -webkit-mask-image:radial-gradient(50% 50% at 88% 10%,#000 12%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 88% 10%,#000 12%,transparent 70%)
}
.page-breadcrumb a{text-decoration:none}

.pro-card{
  position:relative;background:var(--card-odd);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 12px 28px rgba(60,47,47,.08);overflow:hidden;isolation:isolate;
  transition:transform .28s ease,box-shadow .28s ease
}
.pro-card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(60,47,47,.12)}
.pro-card .chem-bg,.pro-card .glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.pro-card .chem-bg{
  background-image:var(--chem-svg);background-size:220px 220px;opacity:.10;
  -webkit-mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%)
}
.pro-card .glow{background:radial-gradient(420px 240px at 85% -10%,rgba(210,105,30,.10),transparent 60%)}
.pro-card>*{position:relative;z-index:1}

.contact-dark{
  position:relative;color:#fff;background:linear-gradient(180deg,#3c2f2f,#2a1f1f);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  overflow:hidden;isolation:isolate;padding:28px
}
.contact-dark::before{
  content:"";position:absolute;inset:0 0 0 auto;width:6px;right:0;
  background:linear-gradient(180deg,#7b4d00,var(--caramel) 60%,var(--burnt-orange));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;
  border-radius:0 18px 18px 0;z-index:0
}
.contact-dark .chem-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.12;
  background-image:var(--chem-svg);background-size:220px 220px;
  -webkit-mask-image:radial-gradient(50% 50% at 12% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 12% 10%,#000 15%,transparent 70%)
}
.contact-media h5{margin-bottom:.25rem}
.social-icons .list-inline{margin:0;padding:0;display:flex;gap:10px}
.social-icons a{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;text-decoration:none;
  transition:transform .12s ease,background .2s ease
}
.social-icons a:hover{transform:translateY(-1px);background:rgba(255,255,255,.18)}

.contact-card{padding:26px}
.contact-card .form-group{position:relative;margin-bottom:14px}
.contact-card .form-control,.contact-card .form-select{
  background:#fffdf9;border:1px solid var(--border);border-radius:10px;
  padding:12px 12px 12px 40px;color:#3c2f2f
}
.contact-card textarea.form-control{padding-left:40px}
.contact-card .form-control:focus,.contact-card .form-select:focus{
  border-color:#d8bda5;box-shadow:0 7px 18px rgba(210,105,30,.10)
}
.contact-card .form-group::before{
  font-family:"Font Awesome 6 Free";font-weight:900;content:"";color:#a8744a;
  position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none
}
.contact-card .fg-name::before{content:"\f007"}
.contact-card .fg-email::before{content:"\f0e0"}
.contact-card .fg-phone::before{content:"\f095"}
.contact-card .fg-service::before{content:"\f1de"}
.contact-card .fg-message::before{content:"\f304";top:16px}


/* ==============================
   4) INDUSTRIES — BAND + CARDS
   ============================== */
.pro-band{
  position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#2f2323,#1f1717);
  border-radius:18px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 26px rgba(60,47,47,.18)
}
.pro-band::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;z-index:0;
  background:linear-gradient(180deg,var(--burnt-orange),#7b4d00 60%,var(--caramel));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;border-radius:18px 0 0 18px
}
.pro-band::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px 240px at 85% -10%,rgba(210,105,30,.15),transparent 60%);
  opacity:.25;
  -webkit-mask-image:radial-gradient(50% 50% at 88% 10%,#000 14%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 88% 10%,#000 14%,transparent 70%)
}
.pro-band>*{position:relative;z-index:1;color:#fff}

.industries-pro .dark-bg{
  position:relative;overflow:hidden;isolation:isolate;border-radius:18px;
  box-shadow:0 12px 26px rgba(60,47,47,.12)
}
.industries-pro .dark-bg::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;z-index:0;
  background:linear-gradient(180deg,var(--burnt-orange),#7b4d00 60%,var(--caramel));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;border-radius:18px 0 0 18px
}
.industries-pro .dark-bg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;
  background-image:var(--chem-svg);background-size:220px 220px;
  -webkit-mask-image:radial-gradient(50% 50% at 88% 10%,#000 12%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 88% 10%,#000 12%,transparent 70%)
}

/* Owl skin */
.industries-pro .service-item.style-2{
  position:relative;overflow:hidden;isolation:isolate;background:var(--card-odd);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 28px rgba(60,47,47,.08);
  transition:transform .25s ease,box-shadow .25s ease,opacity .5s ease;
  opacity:0;transform:translateY(16px)
}
.industries-pro .owl-item.active .service-item.style-2{opacity:1;transform:none}
.industries-pro .service-item.style-2:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(60,47,47,.12)}
.industries-pro .owl-carousel .owl-item:nth-child(even) .service-item.style-2{background:var(--card-even)}
.industries-pro .service-item.style-2::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;z-index:0;
  background:linear-gradient(180deg,var(--burnt-orange),#7b4d00 60%,var(--caramel));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;border-radius:18px 0 0 18px
}
.industries-pro .service-item.style-2::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.10;
  background-image:var(--chem-svg);background-size:220px 220px;
  -webkit-mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%)
}
.industries-pro .service-item.style-2>*{position:relative;z-index:1}
.industries-pro .service-img{
  height:200px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fbe9de,#fff3e6) !important;
  border-bottom:1px solid var(--border)
}
.industries-pro .service-img i{
  width:72px;height:72px;display:grid;place-items:center;border-radius:50%;
  background:#d2691e;color:#fff !important;
  box-shadow:0 12px 26px rgba(210,105,30,.30),inset 0 0 0 6px rgba(255,255,255,.35);
  font-size:28px !important;animation:iconPulse 3.2s ease-in-out infinite
}
.industries-pro .owl-item:nth-child(2) .service-img i{background:#2e8b57}
.industries-pro .owl-item:nth-child(3) .service-img i{background:#d69e2e}
.industries-pro .owl-item:nth-child(4) .service-img i{background:#0ea5e9}
.industries-pro .service-desc{background:transparent !important;padding:18px 18px 22px 22px}
.industries-pro .service-title h4{margin:0 0 8px;color:#7b4d00;font-size:20px}
.industries-pro .service-desc p{margin:0 0 8px;line-height:1.6;color:#3c2f2f}
.industries-pro .service-desc p strong{color:#7b4d00}

/* Grid fallback */
.industry-grid{display:grid;gap:22px;margin-top:-40px;grid-template-columns:repeat(12,1fr)}
.industry-grid>*{grid-column:span 4}
@media (max-width:1199.98px){.industry-grid>*{grid-column:span 6}}
@media (max-width:575.98px){
  .industry-grid{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .industry-grid>*{grid-column:auto;scroll-snap-align:start}
}

.industry-card{
  position:relative;overflow:hidden;isolation:isolate;background:var(--card-odd);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 28px rgba(60,47,47,.08);
  transition:transform .28s ease,box-shadow .28s ease
}
.industry-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(60,47,47,.12)}
.industry-grid>.industry-card:nth-child(even){background:var(--card-even)}
.industry-card .chem-bg,.industry-card .glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.industry-card .chem-bg{
  background-image:var(--chem-svg);background-size:220px 220px;opacity:.10;
  -webkit-mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%)
}
.industry-card .glow{background:radial-gradient(420px 240px at 85% -10%,rgba(210,105,30,.10),transparent 60%)}
.industry-card>*{position:relative;z-index:1}

/* Split-card variant */
.industries-split .industry-grid{display:grid;gap:22px;margin-top:-40px;grid-template-columns:repeat(12,1fr)}
.industries-split .industry-grid>*{grid-column:span 6}
@media (min-width:1200px){.industries-split .industry-grid>*{grid-column:span 4}}
@media (max-width:767.98px){.industries-split .industry-grid>*{grid-column:span 12}}

.industries-split .industry-card.split{
  position:relative;overflow:hidden;isolation:isolate;background:var(--card-odd);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 28px rgba(60,47,47,.08);
  transition:transform .25s ease,box-shadow .25s ease;display:grid;grid-template-columns:160px 1fr
}
.industries-split .industry-grid>.industry-card.split:nth-child(even){background:var(--card-even)}
.industries-split .industry-card.split:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(60,47,47,.12)}
.industries-split .industry-card.split::before{
  content:"";position:absolute;inset:0 auto 0 0;width:6px;z-index:0;
  background:linear-gradient(180deg,var(--burnt-orange),#7b4d00 60%,var(--caramel));
  background-size:100% 200%;animation:accentFlow 4s ease-in-out infinite;border-radius:18px 0 0 18px
}
.industries-split .industry-card.split .chem-bg,.industries-split .industry-card.split .glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.industries-split .industry-card.split .chem-bg{
  background-image:var(--chem-svg);background-size:220px 220px;opacity:.10;
  -webkit-mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%);
  mask-image:radial-gradient(50% 50% at 90% 10%,#000 15%,transparent 70%)
}
.industries-split .industry-card.split .glow{background:radial-gradient(420px 240px at 85% -10%,rgba(210,105,30,.10),transparent 60%)}
.industries-split .industry-card.split>*{position:relative;z-index:1}
.industries-split .icon-col{
  background:linear-gradient(180deg,#fbe9de,#fff3e6);border-right:1px solid var(--border);
  display:grid;place-items:center;padding:20px
}
.industries-split .icon-col .circle{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:#d2691e;box-shadow:0 12px 26px rgba(210,105,30,.30),inset 0 0 0 6px rgba(255,255,255,.35);
  animation:iconPulse 3.2s ease-in-out infinite;font-size:28px
}
.industries-split .body{padding:18px 18px 22px 22px;color:#3c2f2f}
.industries-split .body h4{margin:0 0 8px;color:#7b4d00;font-size:20px}
.industries-split .body p{margin:0 0 8px;line-height:1.6}
.industries-split .industry-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.industries-split .industry-chip{
  font-size:12px;color:#7b4d00;background:#fff7f2;border:1px solid var(--border);
  padding:6px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px
}
.industries-split .industry-case{
  display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:14px;
  background:#fffdf9;border:1px dashed var(--border);border-radius:10px;padding:10px 12px
}
.industries-split .industry-case i{color:#b15e2a;margin-top:2px}
@media (max-width:575.98px){
  .industries-split .industry-card.split{grid-template-columns:1fr}
  .industries-split .icon-col{border-right:0;border-bottom:1px solid var(--border)}
}


/* ==============================
   5) APPLY PANEL + CARDS
   ============================== */
 
.card-grid{display:flex;flex-wrap:wrap;gap:24px;transition:filter .3s ease,opacity .3s ease}
.card{
  border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(60,47,47,.08);
  flex:1 1 calc(33.333% - 24px);min-width:min(320px,100%);padding:32px;position:relative;
  color:#3c2f2f;display:flex;flex-direction:column;
  background:linear-gradient(0deg, rgba(210,105,30,.15) 0%, rgba(210,105,30,.05) 50%, #fffaf4 100%);
  transition:transform .3s ease,box-shadow .3s ease,background .25s ease
}
.card:nth-child(2){background:linear-gradient(0deg, rgba(201,126,67,.15) 0%, rgba(201,126,67,.05) 50%, #fffaf4 100%)}
.card:nth-child(3){background:linear-gradient(0deg, rgba(60,47,47,.15) 0%, rgba(60,47,47,.05) 50%, #fffaf4 100%)}
.card:hover{
  transform:translateY(-6px);box-shadow:0 12px 30px rgba(60,47,47,.15);
  background:linear-gradient(0deg, rgba(210,105,30,.22) 0%, rgba(201,126,67,.12) 60%, #fff3e6 100%)
}
.card .icon{font-size:38px;margin-bottom:20px;color:var(--burnt-orange)}
.card h2{font-size:22px;font-weight:700;margin-bottom:12px;color:#7b4d00}
.card p{font-size:15px;line-height:1.6;color:#5c3b00}
.card.active{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 18px 40px rgba(90,60,20,.18);
  outline:4px solid rgba(210,105,30,.2)
}
.expand-title{
  cursor:pointer;font-weight:700;margin:20px 0 10px;
  display:flex;align-items:center;justify-content:space-between;color:#944d00
}
.expand-title i{transition:transform .3s ease}
.expand-title.active i{transform:rotate(180deg)}
.expand-content{overflow:hidden;max-height:0;transition:max-height .4s ease}
.expand-content.show{max-height:500px;margin-bottom:20px}
.expand-content ul{padding-left:20px;margin:10px 0 0 0;color:#4d2e00}
.expand-content ul li{margin-bottom:8px}
.card .submit-btn{margin-top:auto;align-self:stretch}
@media (max-width:1199.98px){.card{flex:1 1 calc(50% - 24px)}}
@media (max-width:767.98px){.card{flex:1 1 100%}}


/* ==============================
   6) OFF-CANVAS (PRO)
   ============================== */
.offcanvas{position:fixed;inset:0;display:grid;grid-template-columns:auto 1fr;pointer-events:none;z-index:1000}
.offcanvas .panel{
  grid-column:1;width:min(880px,95vw);
  background:linear-gradient(180deg,#fffaf4 0%,#fff3e6 100%);
  border-right:1px solid #e9d3c0;transform:translateX(-100%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  box-shadow:12px 0 40px rgba(60,47,47,.15);
  pointer-events:auto;overflow-y:auto;position:relative;border-radius:0 18px 18px 0
}
.offcanvas .panel::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(transparent 60%,rgba(255,255,255,.9) 61%),var(--chem-svg-accent);
  background-size:cover,200px 200px;background-repeat:no-repeat,repeat;opacity:.15;pointer-events:none
}
.offcanvas .backdrop{grid-column:2/-1;grid-row:1/2;background:rgba(60,47,47,.35);opacity:0;transition:opacity .35s ease}
.offcanvas.show{pointer-events:auto}
.offcanvas.show .panel{transform:translateX(0)}
.offcanvas.show .backdrop{opacity:1}

.panel-header{
  position:sticky;top:0;background:linear-gradient(90deg,#d2691e,#c97e43);
  border-bottom:none;padding:22px 26px;display:flex;align-items:center;gap:12px;
  z-index:2;color:#fff
}
.panel-header h2{font-size:22px;margin:0;font-weight:700;color:#fff}
.panel-header i{font-size:22px;color:#fff}
.panel-close{
  margin-left:auto;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#fff;
  padding:6px 10px;border-radius:8px;transition:background .2s ease
}
.panel-close:hover{background:rgba(255,255,255,.15)}
.panel-body{
  padding:28px;background:#fffdf9;border-radius:14px;box-shadow:inset 0 2px 8px rgba(60,47,47,.05);
  position:relative;z-index:1
}
.expanded-card{display:flex;gap:28px}
.expanded-card .left,.expanded-card .right{flex:1;min-width:0}
.expanded-card .right{
  background:#fffaf4;border:1px solid #e0cbb5;padding:24px;border-radius:14px;
  box-shadow:0 6px 18px rgba(60,47,47,.08)
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row .full{grid-column:1/-1}
.input-group{position:relative}
.input-group i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#b1743c;font-size:16px;pointer-events:none
}
.input-group input,.input-group textarea,.input-group select{
  width:100%;padding:16px 16px 16px 44px;margin:0 0 14px;border-radius:12px;
  border:1px solid #dcb89b;background:#fff;font-size:16px;color:#3c2f2f;
  transition:all .25s ease
}
.input-group textarea{min-height:120px;resize:vertical}
.input-group input:focus,.input-group textarea:focus,.input-group select:focus{
  border-color:var(--burnt-orange);box-shadow:0 0 0 3px rgba(210,105,30,.18);outline:0
}
.submit-btn{
  background:linear-gradient(90deg,#d2691e,#c97e43);color:#fff;padding:14px 22px;font-size:16px;font-weight:600;border:0;
  border-radius:10px;cursor:pointer;transition:transform .12s ease,background .25s ease,box-shadow .25s ease;
  box-shadow:0 8px 22px rgba(210,105,30,.28)
}
.submit-btn:hover{
  background:linear-gradient(90deg,#c97e43,#d2691e);transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(210,105,30,.35)
}
.submit-btn:active{transform:translateY(1px)}
@media (max-width:968px){
  .expanded-card{flex-direction:column}
  .form-row{grid-template-columns:1fr}
  .offcanvas .panel{width:100vw;border-radius:0}
  .panel-body{padding:22px}
}


/* ==============================
   7) UTILITIES
   ============================== */
.text-theme{color:var(--burnt-orange)!important}
.light-bg{background:#fffdf9}
.dark-bg{background:#2a2a2a;color:#fff}
.btn-theme{
  background:var(--burnt-orange);color:#fff;border:0;border-radius:10px;padding:12px 18px;
  box-shadow:0 10px 24px rgba(210,105,30,.25);
  transition:transform .08s ease,background .2s ease,box-shadow .2s ease
}
.btn-theme:hover{background:#a04e00}
.feature-box{display:flex;flex-direction:column;height:100%}
.feature-box .cta{margin-top:auto;display:flex}
.feature-box .btn-soft{align-self:flex-start}
.row>[class*="col-"]{display:flex}
.row>[class*="col-"]>.feature-box{flex:1 1 auto}
.footer .row>[class*="col-"]{display:block}
.footer .row>[class*="col-"]>*{width:100%}


/* ==============================
   8) ELEGANT + MINIMAL BREADCRUMB / HERO (Generic "bc")
   ============================== */
.bc{--h:42px;--r:14px;--gap:8px;width:100%;color:var(--muted)}
.bc--hero{position:relative;padding:26px 0 20px;background:var(--mesh);border-bottom:1px solid var(--line)}
.bc__container{max-width:1180px;margin:0 auto;padding:0 16px}
.bc__strip{
  min-height:var(--h);display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(140%) blur(6px);
  border:1px solid rgba(18,20,24,.06);border-radius:18px;padding:8px 10px;box-shadow:var(--shadow)
}
@supports not ((-webkit-backdrop-filter:blur(6px)) or (backdrop-filter:blur(6px))){
  .bc__strip{background:#ffffff}
}
.bc__btn{
  height:34px;min-width:34px;border-radius:10px;display:inline-grid;place-items:center;
  background:#fff;border:1px solid var(--line);cursor:pointer;transition:.25s var(--bezier)
}
.bc__btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(18,20,24,.08)}
.bc__track-wrap{position:relative;flex:1 1 auto;overflow:hidden}
.bc__track{display:flex;align-items:center;gap:0;overflow:auto;scrollbar-width:thin;padding:0 4px}
.bc__track::-webkit-scrollbar{height:8px}
.bc__track::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px}
.bc__item{position:relative;display:flex;align-items:center}
.bc__item+.bc__item:before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  display:inline-block;margin:0 10px;opacity:.5
}
.bc__link{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  text-decoration:none;color:var(--muted);transition:.25s var(--bezier)
}
.bc__link:hover{color:var(--ink)}
.bc__link:after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0);transform-origin:left;transition:.25s var(--bezier);opacity:.9
}
.bc__link:hover:after{transform:scaleX(1)}
.is-current{
  color:var(--ink);font-weight:700;background:linear-gradient(0deg,rgba(255,138,0,.12),rgba(255,138,0,.08));
  border:1px solid rgba(255,138,0,.25)
}
.bc--smallcaps .bc__link span{font-variant-caps:all-small-caps;letter-spacing:.04em}
.u-gradient-text{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}


/* ==============================
   9) CONTACT THEME BLOCKS (SCOPED)
   ============================== */
.ss-contact{
  --brand:#b35b1a;--brand-soft:#fff3e8;--ink:#1d1f23;--muted:#6a6f79;--line:#ece7df;
  --bg:#ffffff;--shadow:0 14px 40px rgba(20,22,26,.08);--bezier:cubic-bezier(.2,.8,.2,1)
}
.ss-contact .ss-hero{
  position:relative;background:
    radial-gradient(900px 600px at 100% 0%, rgba(255,191,117,.22), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(179,91,26,.12), transparent 62%),
    linear-gradient(180deg,#fff,#fff);
  border-bottom:1px solid var(--line);overflow:hidden
}
.ss-contact .ss-hero h1{font-weight:900;letter-spacing:.2px}
.ss-contact .ss-wrap{margin-top:-8px}
.ss-contact .ss-left{
  position:relative;height:100%;
  background:var(--glass);
  color:#fff;border-radius:16px 0 0 16px;box-shadow:var(--shadow);
  padding:2rem 1.5rem;overflow:hidden;display:flex;flex-direction:column
}
@media (min-width:992px){.ss-contact .ss-left{padding:3rem 2rem}}
@media (max-width:991.98px){.ss-contact .ss-left{border-radius:16px 16px 0 0}}
.ss-contact .ss-chem{
  position:absolute;inset:-10% -30% auto auto;height:320px;width:420px;z-index:0;
  background:
    radial-gradient(160px 140px at 20% 25%, rgba(255,191,117,.25), transparent 60%),
    radial-gradient(220px 160px at 80% 50%, rgba(255,159,66,.18), transparent 60%),
    radial-gradient(220px 200px at 30% 100%, rgba(255,255,255,.08), transparent 64%);
  filter:blur(14px);opacity:.8;pointer-events:none
}
.ss-contact .ss-left .ss-inner{position:relative;z-index:1}
.contact-list{list-style:none;padding-left:0;margin:0}
.contact-list li{margin-bottom:8px;color:#f5f5f5;font-size:15px;display:flex;align-items:center}
.contact-list li i{font-size:16px;min-width:22px}
.contact-list a{color:#f5f5f5;text-decoration:none}
.contact-list a:hover{color:var(--brand)}
.ss-contact .ss-media h5{font-weight:900;letter-spacing:.3px;margin-bottom:.4rem}
.ss-contact .ss-media span,.ss-contact .ss-media li,.ss-contact .ss-media a{color:#000;opacity:.96;font-weight:600}
.ss-contact .ss-social a{
  --size:40px;display:inline-flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);
  border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;margin-right:8px;
  transition:transform .2s var(--bezier),background .2s,border-color .2s
}
.ss-contact .ss-social a:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.ss-contact .ss-card{
  background:var(--bg);border:1px solid var(--line);border-radius:0 16px 16px 0;box-shadow:var(--shadow);
  position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:100%
}
@media (max-width:991.98px){.ss-contact .ss-card{border-radius:0 0 16px 16px}}
.ss-contact .ss-card .ss-chem{inset:auto -18% -34% auto;width:340px;height:240px;filter:blur(18px);opacity:.38}
.ss-contact .ss-glow{
  position:absolute;inset:auto auto -30% -30%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,191,117,.28), transparent);pointer-events:none
}
@media (min-width:992px){.ss-contact .ss-left,.ss-contact .ss-card{min-height:460px}}

/* Floating labels */
.ss-contact .ss-field{position:relative}
.ss-contact .ss-field .form-control,.ss-contact .ss-field .form-select{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:1.05rem 1rem .6rem 2.6rem;font-weight:700;color:var(--ink);
  transition:border-color .2s var(--bezier),box-shadow .2s var(--bezier),background .2s
}
.ss-contact .ss-field .form-control::placeholder{color:#9aa0aa;opacity:.7}
.ss-contact .ss-field .form-control:focus,.ss-contact .ss-field .form-select:focus{
  outline:0;border-color:#f1d6c2;box-shadow:0 0 0 4px rgba(255,191,117,.25)
}
.ss-contact .ss-ic{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  font-size:1rem;color:#a16b45;opacity:.9;pointer-events:none
}
.ss-contact .ss-field label{
  position:absolute;left:2.6rem;top:.82rem;margin:0;font-size:.78rem;color:#a16b45;
  font-weight:800;letter-spacing:.02em;transform-origin:left top;
  pointer-events:none;opacity:.85;transition:transform .18s var(--bezier),opacity .18s
}
.ss-contact .ss-field .form-control:placeholder-shown+label{transform:translateY(.35rem) scale(1.02);opacity:.66}
.ss-contact .ss-field .form-control:not(:placeholder-shown)+label,
.ss-contact .ss-field .form-control:focus+label,
.ss-contact .ss-field .form-select:focus+label{
  transform:translateY(-.65rem) scale(.92);opacity:1
}
.ss-contact textarea.form-control{min-height:140px;resize:vertical}

/* CTA */
.ss-contact .btn-theme{
  --btn:#b35b1a;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:900;letter-spacing:.3px;color:#fff;background:linear-gradient(180deg,var(--btn),#8e4916);
  border:1px solid #9b5620;border-radius:12px;padding:.85rem 1.25rem;
  box-shadow:0 10px 24px rgba(179,91,26,.26);
  transition:transform .2s var(--bezier),box-shadow .2s var(--bezier);margin-left:.15rem
}
.ss-contact .btn-theme:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(179,91,26,.32)}
.ss-contact .btn-theme .spinner{display:none}
.ss-contact .btn-theme.is-loading .spinner{display:inline-block!important}
.ss-contact .btn-theme.is-loading span{opacity:.85}

/* Reveal helpers (scoped) */
.ss-contact .reveal-up,.ss-contact .reveal-left,.ss-contact .reveal-right{
  opacity:0;transform:translateY(16px);transition:all .5s var(--bezier)
}
.ss-contact .reveal-left{transform:translateX(-22px)}
.ss-contact .reveal-right{transform:translateX(22px)}
.ss-contact .is-visible{opacity:1!important;transform:none!important}

/* Map */
.ss-contact .ss-map iframe{
  width:100%;height:460px;border:0;display:block;border-radius:16px;box-shadow:var(--shadow);margin-top:16px
}

/* Tighten hero/breadcrumb spacing for contact */
.ss-contact .ss-hero{padding-bottom:0!important}
.ss-contact .ss-hero h1,.ss-contact .ss-hero p{text-align:center;margin-left:auto;margin-right:auto}
.ss-contact .ss-breadcrumb{padding:6px 0!important;margin:0!important;border-bottom:0}
.ss-contact .ss-breadcrumb .container{padding-top:0;padding-bottom:0}
.ss-contact .page-content{margin-top:12px}


/* ==============================
   10) HERO & IMAGE BLOCKS
   ============================== */
.section{padding:0;position:relative}
.rule{height:2px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:22px 0}

/* Keep global h2/p because template uses these widely */
h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.4rem);margin:0 0 .6rem}
p{color:var(--muted);line-height:1.7}

[data-reveal]{opacity:0;transform:translateY(18px)}
[data-reveal].in{opacity:1;transform:none;transition:transform .8s var(--bezier),opacity .55s ease}
[data-reveal="left"]{transform:translateX(-24px)}
[data-reveal="right"]{transform:translateX(24px)}

a.btn{display:inline-flex;gap:10px;align-items:center;font-weight:800;text-decoration:none}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badges a.btn-portal{
  border:1px solid var(--line);border-radius:999px;padding:.6rem .9rem;background:#fff;
  transition:transform .2s var(--bezier),box-shadow .2s var(--bezier),border-color .2s
}
.badges a.btn-portal:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(20,22,26,.08)}
.badges a.btn-portal.active{
  border-color: var(--brand);
  box-shadow: 0 8px 18px rgba(255,138,0,.18);
}

.hero-net{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(4px,6vw,4px) 0;
  margin-bottom:0 !important; padding-bottom:0 !important;
}
.hero-net::before{
  content:"";position:absolute;inset:-10%;
  background-image:var(--network);background-size:cover;background-position:center;
  opacity:.6;mix-blend-mode:multiply;animation:drift 18s linear infinite alternate
}
.hero-grid{
  position:relative;z-index:1;display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:1.15fr .85fr;align-items:center
}
@media (max-width:992px){.hero-grid{grid-template-columns:1fr}}
.hero-title{
  font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem);
  line-height:1.06;letter-spacing:-.02em;margin:6px 0 12px
}
.hero-sub{color:var(--muted);max-width:62ch}

/* Hero badges row (single line + swipe on mobile) */
.hero-net .badges{
  display:flex; align-items:center; gap:.6rem;
  flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling:touch; padding-bottom:.25rem;
  scroll-snap-type:x proximity
}
.hero-net .badges .btn-portal{ flex:0 0 auto; white-space:nowrap; scroll-snap-align:start; }
.hero-net .badges::-webkit-scrollbar{ height:6px }
.hero-net .badges::-webkit-scrollbar-thumb{ background:#c07a3a66; border-radius:4px }

.block{position:relative;box-shadow:none;background:#fff}
.block .inner{padding:clamp(22px,2.6vw,34px)}

.image-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;margin-top:18px
}
.image-row figure{
  text-align:center;border:1px solid var(--glass-stroke);border-radius:0;padding:14px;
  box-shadow:none;transition:transform .25s var(--bezier);background:#fff
}
.image-row figure:hover{transform:translateY(-4px)}
.image-row img{
  width:100%;max-width:110px;height:110px;object-fit:contain;margin-bottom:10px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.08));
  opacity:0;transform:scale(.96);
  transition:opacity .45s ease,transform .45s var(--bezier)
}
.image-row img.in{opacity:1;transform:none}
.image-row figcaption{font-size:.92rem;color:var(--muted)}

/* Decorative molecule dots */
.molecule{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--brand));
  box-shadow:0 0 12px rgba(255,138,0,.35);animation:float 6s ease-in-out infinite
}


/* ==============================
   11) BREADCRUMB (SCOPED SS variant)
   ============================== */
.ss-breadcrumb{
  --ink:#14161a;--muted:#6a6f79;--line:#efe7de;--brand:#b35b1a;--brand-soft:#fff3e8;
  position:relative;padding:18px 0;border-bottom:1px solid var(--line);
  background:radial-gradient(800px 400px at 100% 0, rgba(255,191,117,.22), transparent 60%),linear-gradient(180deg,#fff,#fff)
}
.ss-bc-list{
  display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:0;list-style:none;
  overflow:auto;scrollbar-width:thin
}
.ss-bc-item{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ss-bc-item+.ss-bc-item::before{content:"›";color:#caa178;font-weight:900;opacity:.9}
.ss-bc-link{
  display:inline-flex;align-items:center;gap:6px;padding:.35rem .55rem;border-radius:10px;
  text-decoration:none;color:var(--ink);border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s
}
.ss-bc-link:hover{background:#fff7ef;border-color:#f1d6c2;transform:translateY(-1px)}
.ss-bc-home i{font-size:1rem;line-height:1}
.ss-bc-current{
  display:inline-flex;align-items:center;gap:6px;padding:.35rem .55rem;border-radius:10px;
  background:#fff7ef;color:#7a4b2a;border:1px solid #f1d6c2;
}
@media (max-width:575.98px){.ss-breadcrumb{padding:12px 0}}

/* Zero-gap handoff: hero → breadcrumb → next section */
.ss-breadcrumb-wrap{
  margin:0!important;padding-block:0!important;
  background:linear-gradient(180deg,#ffffff,#fffaf3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.ss-breadcrumb-wrap .container{padding-top:0!important;padding-bottom:0!important}
.ss-breadcrumb{padding-block:0!important;min-height:34px;display:flex;align-items:center}
.ss-breadcrumb-wrap+section{margin-top:0!important;padding-top:0!important}


/* ==============================
   12) HEADER / NAV (DESKTOP + MOBILE) — SINGLE SYSTEM
   ============================== */
.site-header{
  position:sticky;top:0;z-index:4000;
  background:#fff;border-bottom:1px solid var(--header-line);
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  overflow:visible
}

/* Desktop layout */
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:.7rem 1rem
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:72px;width:auto;object-fit:contain}

.center-area{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  flex:1;min-width:0
}
.tagline-text{
  font-size:12px;color:var(--muted);font-weight:800;
  margin:0 0 8px;text-align:center
}

/* Main nav */
.nav-cat{
  display:flex;list-style:none;margin:0;padding:0;
  gap:22px;align-items:center;justify-content:center;flex-wrap:wrap
}
.nav-cat>li{list-style:none;position:relative}
.nav-cat>li>a{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;color:#334155;font-weight:900;font-size:15px;
  padding:6px 0;position:relative;
  transition:color .2s ease
}
.nav-cat>li>a:hover,
.nav-cat>li>a.active{color:var(--header-brand)}
.nav-cat>li>a.active::after,
.nav-cat>li:hover>a::after{
  content:"";position:absolute;left:50%;bottom:-6px;width:70%;height:3px;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--header-brand), var(--brand-2));
  border-radius:3px;opacity:.9
}

/* Right actions (desktop) */
.right-actions{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:10px
}
.language-select{
  border:1px solid rgba(0,0,0,.10);
  background:#f8fafc;border-radius:10px;
  padding:7px 10px;font-size:10px;
  color:#475569;
  cursor:pointer;width:auto
}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.btn-spark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;gap:8px;
  padding:12px 16px;
  border-radius:999px;font-weight:900;
  
  letter-spacing:.4px;
  text-decoration:none !important;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  line-height:1;white-space:nowrap
}
.btn-theme-orange{
  background:#fff;color:var(--burnt-orange);
  border:1px solid var(--burnt-orange)
}
.btn-theme-orange:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(217,119,6,.18);
  background:#111;color:#fff;border-color:#111
}

/* ============ DESKTOP DROPDOWN (Services vertical + flyouts) ============ */
@media (min-width:992px){
  /* dropdown panel */
  .dropdown-vert{
    position:absolute;left:0;top:calc(100% + 12px);
    min-width:320px;max-width:380px;background:#fff;
    border:1px solid var(--header-line);border-radius:16px;box-shadow:var(--header-shadow);
    padding:10px;opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(8px);transition:opacity .16s var(--bezier),transform .16s var(--bezier),visibility .16s var(--bezier);
    z-index:5000
  }
  .dropdown-vert::before{
    content:"";position:absolute;top:-8px;left:18px;width:16px;height:16px;background:#fff;
    transform:rotate(45deg);border-left:1px solid var(--header-line);border-top:1px solid var(--header-line)
  }

  /* IMPORTANT: keep open when hovering the dropdown itself */
  .nav-cat>li:hover>.dropdown-vert,
  .nav-cat>li:focus-within>.dropdown-vert,
  .nav-cat>li.open>.dropdown-vert{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)
  }

  .menu-vert{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
  .menu-vert>li{position:relative}
  .menu-vert>li>a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 12px;border-radius:12px;border:1px solid transparent;background:#fff;
    color:#0f172a;font-weight:900;text-decoration:none;
    transition:background .16s var(--bezier),border-color .16s var(--bezier),transform .16s var(--bezier)
  }
  .menu-vert>li>a:hover{background:#fff7ed;border-color:#fed7aa;transform:translateY(-1px)}
  .menu-vert>li.has-fly>a::after{
    content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.8rem;opacity:.7
  }

  /* Flyout */
  .flyout{
    position:absolute;top:0;left:calc(100% + 10px);
    min-width:300px;max-width:440px;background:#fff;border:1px solid var(--header-line);
    border-radius:16px;box-shadow:var(--header-shadow);padding:10px;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
    transition:opacity .14s var(--bezier),transform .14s var(--bezier),visibility .14s var(--bezier);
    z-index:5100
  }

  /* Open flyout on hover OR when inside flyout (stable) */
  .menu-vert>li.has-fly:hover>.flyout,
  .menu-vert>li.has-fly:focus-within>.flyout,
  .menu-vert>li.has-fly:hover>.flyout:hover{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)
  }

  .fly-title{
    font-size:.78rem;color:#7c2d12;font-weight:900;
    padding:6px 8px 10px;border-bottom:1px dashed #efe6de;margin-bottom:8px;letter-spacing:.08em
  }
  .fly-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}

  .fly-list a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 11px;border-radius:12px;border:1px dashed #e5e7eb;background:#fff;
    color:#111827;font-weight:800;text-decoration:none;
    transition:background .16s var(--bezier),border-color .16s var(--bezier),transform .16s var(--bezier)
  }
  .fly-list a:hover{background:#f8fafc;border-style:solid;border-color:#cbd5e1;transform:translateY(-1px)}
  .fly-list>li.has-fly>a::after{
    content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.78rem;opacity:.65
  }

  /* Nested flyouts */
  .flyout .flyout{top:0;left:calc(100% + 10px);z-index:5200}

  /* Hover bridge (prevents gap close) */
  .menu-vert>li.has-fly::after,
  .fly-list>li.has-fly::after{
    content:"";position:absolute;top:0;right:-12px;width:12px;height:100%;
    background:transparent;
    pointer-events:auto; /* keep hover “connected” */
  }

  @media (max-width:1200px){.flyout{max-width:380px}}
}

/* ============ MOBILE HEADER ============ */
@media (max-width:991.98px){
  .nav-cat{display:none}
  .header-row{
    display:grid;grid-template-columns:44px 1fr 44px;
    grid-template-areas:"menu logo spare" "tag tag tag";
    align-items:center;gap:6px 8px;padding:.6rem .75rem
  }
  .burger{
    grid-area:menu;justify-self:start;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--header-line);border-radius:12px;background:#fff
  }
  .right-actions{display:none!important}
  .brand{grid-area:logo;justify-self:center}
  .brand img{height:56px}
  .center-area{grid-area:tag;width:100%}
  .tagline-text{
    margin:0;font-weight:900;font-size:clamp(12px,2.8vw,15px);
    color:var(--header-brand);line-height:1.35;text-wrap:balance;
    max-width:min(92vw,560px);margin-left:auto;margin-right:auto
  }
}

/* ============ MOBILE OFFCANVAS MENU ============ */
.mobile-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  opacity:0;visibility:hidden;transition:opacity .2s var(--bezier),visibility .2s var(--bezier);
  z-index:4200
}
.mobile-backdrop.show{opacity:1;visibility:visible}

.mobile-panel{
  position:fixed;top:0;left:0;height:100%;
  width:min(92vw,380px);background:#fff;
  box-shadow:24px 0 60px rgba(0,0,0,.18);
  transform:translateX(-100%);
  transition:transform .28s var(--bezier);
  z-index:4300;display:flex;flex-direction:column
}
.mobile-panel.open{transform:none}

.mp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--header-line)}
.mp-title{font-weight:900;color:var(--ink)}
.mp-body{padding:12px 14px;overflow:auto}

.m-accordion{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.m-link,.m-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;
  border:1px solid var(--header-line);border-radius:12px;background:#fff;color:var(--ink);font-weight:900;
  transition:background .18s var(--bezier),border-color .18s var(--bezier),transform .18s var(--bezier)
}
.m-link{text-decoration:none}
.m-link:hover,.m-toggle:hover{background:#faf8f6}
.m-toggle{cursor:pointer}
.m-toggle[aria-expanded="true"]{background:#fff7ef;border-color:#f1d6c2}
.m-toggle .chev{transition:transform .2s var(--bezier)}
.m-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.m-sub,.m-coll{
  overflow:hidden;max-height:0;transition:max-height .28s var(--bezier);
  border-left:3px solid #f1d6c2;margin-left:8px;padding-left:8px;border-radius:0 0 12px 12px
}
.m-sub.in,.m-coll.in{overflow:visible}

.m-group{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.m-hed{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
  border:1px solid var(--header-line);border-radius:10px;background:#fff;font-weight:900;color:#1f2024
}
.m-hed .chev{transition:transform .2s var(--bezier)}
.m-hed[aria-expanded="true"] .chev{transform:rotate(180deg)}
.m-coll ul{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.m-coll a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #efdfd2;
  border-radius:10px;font-weight:800;color:#222;text-decoration:none;background:#fff
}
.m-coll a:hover{background:#fff7ef;border-style:solid}
.btn-chip{border:1px solid var(--header-line);border-radius:999px;font-weight:900;color:#7c5033;padding:.35rem .8rem}


/* ===============================
   13) HERO / BANNER — Owl (banner-pro)
   =============================== */
.fullscreen-banner{min-height:clamp(68vh,88vh,100vh);display:block;position:relative;overflow:hidden}
.banner-slider .item{position:relative;min-height:inherit;display:flex;align-items:center;isolation:isolate}
.hero-overlay{background-color:#111;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-overlay::before{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35));
  mix-blend-mode:multiply;z-index:0;pointer-events:none;transition:opacity .35s var(--bezier)
}
.align-center{position:relative;z-index:1;padding-block:clamp(40px,6vh,80px)}

/* Scoped banner titles */
.banner-pro .hero-title,
.banner-slider .hero-title{
  color:#000;line-height:1.06;letter-spacing:-.015em;font-weight:900;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);text-wrap:balance
}
.banner-pro .hero-sub,
.banner-slider .hero-sub{
  color:#0f0f00;max-width:62ch;font-size:clamp(1rem,.96rem + .4vw,1.125rem);line-height:1.7
}

.btn-box{display:flex;gap:12px;flex-wrap:wrap}
.btn-box .btn{padding:.85rem 1.15rem;border-radius:12px;font-weight:800}
.btn-box .btn-dark{background:#1f1f22;color:#fff;border:1px solid rgba(255,255,255,.14)}
.btn-box .btn-dark:hover{background:#151518}
.hero-badges{
  display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:0;list-style:none;color:#fff;opacity:.95
}
.hero-badges li{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;padding:.45rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)
}
.hero-badges i{font-size:1rem;opacity:.95}

.banner .container{max-width:min(1200px,95vw)}
.banner .row{margin:0}
.banner .col-12{padding:0}

/* Owl controls */
.banner-slider.owl-carousel .owl-nav{
  position:absolute;inset:auto 0 18px 0;display:flex;justify-content:center;gap:10px;pointer-events:none
}
.banner-slider.owl-carousel .owl-nav button{
  pointer-events:auto;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;font-size:0;
  transition:transform .15s var(--bezier),background .2s,border-color .2s
}
.banner-slider.owl-carousel .owl-nav button:hover{
  transform:translateY(-1px);background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.4)
}
.banner-slider.owl-carousel .owl-nav .owl-prev::before,
.banner-slider.owl-carousel .owl-nav .owl-next::before{
  font-family:"Line Awesome Free","Font Awesome 6 Free";font-weight:900;font-size:16px;line-height:1;content:"\f104"
}
.banner-slider.owl-carousel .owl-nav .owl-next::before{content:"\f105"}
.banner-slider.owl-carousel .owl-dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:22px;display:flex;gap:8px
}
.banner-slider.owl-carousel .owl-dot{
  width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.55);
  transition:transform .18s var(--bezier),background .2s
}
.banner-slider.owl-carousel .owl-dot.active{transform:scale(1.2);background:#fff}

@media (max-width:1199.98px){
  .banner-pro .hero-title,.banner-slider .hero-title{font-size:clamp(1.8rem,1.1rem + 2.4vw,2.6rem)}
}
@media (max-width:991.98px){
  .banner-pro .hero-title,.banner-slider .hero-title{text-align:center}
  .banner-pro .hero-sub,.banner-slider .hero-sub{text-align:center;margin-inline:auto}
  .btn-box{justify-content:center}
  .hero-badges{justify-content:center}
}
@media (max-width:575.98px){
  .align-center{padding-block:48px}
  .banner-slider.owl-carousel .owl-nav{bottom:14px}
  .banner-slider.owl-carousel .owl-dots{bottom:14px}
  .btn-box .btn{width:100%;justify-content:center}
}

/* Owl safety fixes + FOUC guard */
.owl-carousel{opacity:0;transition:opacity .2s ease}
.owl-carousel.owl-loaded{opacity:1}
.owl-carousel,.owl-carousel .owl-stage-outer{width:100%}
.owl-carousel .owl-item img{display:block;width:100%;height:auto}


/* ================= SCIENCE SPARK — SWIPER HERO (single) ================= */
.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide{height:80vh}
@media (max-width: 767.98px){
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide{height:65vh}
}
.hero-slide{
  position:relative;background-size:cover;background-position:center top;background-repeat:no-repeat;
  display:flex;align-items:flex-end;justify-content:center;
  padding:clamp(16px,4vw,32px);isolation:isolate
}
.hero-slide .hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  mix-blend-mode:multiply;z-index:0
}
.hero-caption{
  position:relative;z-index:1;
  width:min(1100px, 92vw);
  margin-bottom:clamp(14px, 4vh, 28px);
  padding:clamp(16px, 2.4vw, 26px);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(18,20,24,.08);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 18px 40px rgba(20,22,26,.10);
  text-align:center
}
@supports not ((-webkit-backdrop-filter:blur(6px)) or (backdrop-filter:blur(6px))){
  .hero-caption{background:#ffffff}
}
.hero-caption .hero-title{
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  line-height:1.06;letter-spacing:-.02em;margin:0 0 .5rem;
  color:var(--ink,#14161a)
}
.hero-caption .hero-title .accent{color:var(--burnt-orange,#d2691e)}
.hero-caption .hero-sub{
  max-width:60ch;margin:0 auto .9rem;
  color:var(--muted,#60656f);font-size:clamp(1rem, .96rem + .3vw, 1.1rem);
  line-height:1.7
}
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.15rem;border-radius:12px;background:#1f1f22;color:#fff;text-decoration:none;font-weight:900;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.24);
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease
}
.hero-btn .ico{transform:translateY(1px)}
.hero-btn:hover{background:#151518;transform:translateY(-1px)}
.hero-btn:focus-visible{outline:3px solid var(--brand-2,#ffbf75);outline-offset:2px}

/* Swiper pagination (dots) */
.hero-swiper-pagination{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(14px, 3vh, 22px);z-index:2
}
.hero-swiper-pagination .swiper-pagination-bullet{
  width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.55);
  opacity:1;transition:width .2s ease, background .2s ease
}
.hero-swiper-pagination .swiper-pagination-bullet-active{
  width:22px;background:linear-gradient(90deg,var(--brand,#ff8a00),var(--brand-2,#ffbf75))
}

/* Swiper arrows */
.hero-swiper-btn{
  position:absolute;bottom:clamp(14px, 3vh, 22px);z-index:2;
  width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease
}
.hero-swiper-btn.prev{right:70px}
.hero-swiper-btn.next{right:20px}
.hero-swiper-btn::before{
  font-family:"Font Awesome 6 Free","Line Awesome Free";font-weight:900;font-size:16px;content:"\f104"
}
.hero-swiper-btn.next::before{content:"\f105"}
.hero-swiper-btn:hover{transform:translateY(-1px);background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.45)}
@media (max-width:575.98px){
  .hero-caption{padding:14px 16px;margin-bottom:12px}
  .hero-swiper-btn{width:36px;height:36px;bottom:10px}
  .hero-swiper-btn.prev{right:66px}
  .hero-swiper-btn.next{right:20px}
}


/* ==============================
   FORM SELECT + HERO IMAGE UTILITIES
   ============================== */
.btn-select{
  display:block;width:100%;
  padding:.375rem 2.25rem .375rem .75rem;
  font-size:1rem;font-weight:400;line-height:1.5;
  color:#212529;background-color:#fff;
  background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;
  border:1px solid #ced4da;border-radius:.75rem;
  -webkit-appearance:none;-moz-appearance:none;
}
.hero-img{
  width:100%;height:100vh;object-fit:cover;border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.1);
  transition:transform .3s ease
}
.hero-img:hover{transform:scale(1.02)}
@media (max-width:768px){.hero-img{height:340px;border-radius:16px}}

/* About page hooks */
.hide{display:none !important;}


/* ==============================
   “Who We Serve” grid + staggered reveal
   ============================== */
.section.serve-pro{ padding: clamp(40px,6vw,88px) 0; }
.serve-header{ max-width:900px; margin-inline:auto; text-align:center; }
.serve-title{ font-weight:900; letter-spacing:.2px; margin-bottom:.4rem; }
.serve-lead{ color:var(--muted,#60656f); margin:0 auto 1.6rem; }

.serve-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:1fr;
}
@media (min-width:680px){ .serve-grid{ grid-template-columns:1fr 1fr; } }

.serve-item{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  padding:clamp(14px,1.6vw,18px); border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.98)) padding-box,
    linear-gradient(135deg, rgba(255,138,0,.25), rgba(255,191,117,.18)) border-box;
  border:1px solid transparent; box-shadow: var(--shadow, 0 14px 40px rgba(20,22,26,.08));
  transition: transform .35s var(--bezier),
              box-shadow .35s var(--bezier),
              border-color .35s var(--bezier),
              opacity .35s var(--bezier);
  outline:none; opacity:0; transform:translateY(10px);
}
.serve-item:is(:hover,:focus-visible){
  transform:translateY(-2px);
  box-shadow:0 20px 52px rgba(20,22,26,.14);
  border-color:rgba(255,138,0,.35);
}
.serve-chip{
  width:56px; height:56px; border-radius:14px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background: radial-gradient(80px 60px at 70% 20%, rgba(255,191,117,.35), transparent 60%), #fff;
  color: var(--brand,#ff8a00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(255,138,0,.18);
}
.serve-chip i{ font-size:26px; line-height:1; }
.serve-copy{ color:var(--muted,#60656f) }
.serve-copy strong{
  color:var(--ink,#14161a); font-weight:900; display:inline-block; margin-bottom:4px;
  position:relative; padding-bottom:6px;
}
.serve-copy strong::after{
  content:""; position:absolute; left:0; bottom:0; width:68px; height:3px;
  background:linear-gradient(90deg, var(--brand,#ff8a00), var(--brand-soft,#ffbf75));
  transition:width .3s var(--bezier);
}
.serve-item:is(:hover,:focus-visible) .serve-copy strong::after{ width:100px; }

@keyframes serveFadeUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.serve-item.is-visible{
  animation:serveFadeUp .6s var(--bezier) forwards;
  animation-delay:var(--d, 0s);
}
@media (prefers-reduced-motion:reduce){
  .serve-item{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* HERO mobile-only override */
@media (max-width: 768px){
  .hero-visual{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-title, .hero-sub{ text-align:center; margin-inline:auto; }
  .hero-net .badges{
    flex-direction:column; align-items:center; gap:.6rem;
    overflow:visible; white-space:normal;
  }
  .hero-net .badges .btn-portal{ width:100%; max-width:260px; text-align:center; }
}
@media (max-width:575.98px){
  .hero-net .container{ padding-left:14px; padding-right:14px; }
}


/* ===========================================
   OPTIONAL LIGHT OVERRIDES (SCOPED)
   Add class="ss-light" on <body> or main wrapper
   =========================================== */
.ss-light{
  --brand:#ff8a00;
  --brand-2:#ffbf75;
  --brand-soft:#fff3e6;
  --brand-dark:#b85a12;
  --ink:#14161a;
  --muted:#60656f;
}
.ss-light .u-gradient-text,
.ss-light .hero-title .accent{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ss-light .btn-portal{
  background:var(--brand-soft);
  color:var(--ink);
  border:1px solid #f1d6c2;
}
.ss-light .btn-portal.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.ss-light .pro-band{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  box-shadow:0 10px 35px rgba(255,138,0,.20);
}
.ss-light .btn-theme{background:var(--brand);color:#fff;border:0}
.ss-light .btn-theme:hover{background:var(--brand-dark)}


/* ==============================
   SSX HERO (Xbox-style) — kept
   ============================== */
.ssx-hero{
  position: relative;
  width: 100%;
  height: clamp(660px, 70vh, 700px);
  overflow: hidden;
  background: #0b0f17;
}
.ssx-swiper,
.ssx-swiper .swiper-wrapper,
.ssx-swiper .swiper-slide{ height: 100%; }

.ssx-slide{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0f17;
}
.ssx-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}
.ssx-shade{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 70% 40%, rgba(0,0,0,.06), rgba(0,0,0,.55) 62%, rgba(0,0,0,.70)),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.22) 55%, rgba(0,0,0,.58));
}

.ssx-zone{
  position: absolute;
  top: 0; bottom: 0;
  width: 26%;
  min-width: 130px;
  z-index: 6;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .18s var(--e);
}
.ssx-zone:hover{ opacity: .98; }
.ssx-zone--left{
  left: 0;
  justify-content: flex-start;
  background:
    linear-gradient(90deg,
      rgba(60,47,47,.92) 0%,
      rgba(60,47,47,.72) 22%,
      rgba(210,105,30,.22) 52%,
      rgba(0,0,0,0) 100%);
}
.ssx-zone--right{
  right: 0;
  justify-content: flex-end;
  background:
    linear-gradient(270deg,
      rgba(60,47,47,.92) 0%,
      rgba(60,47,47,.70) 22%,
      rgba(201,126,67,.18) 52%,
      rgba(0,0,0,0) 100%);
}

.ssx-arrow{
  width: 54px;
  height: 54px;
  margin: 0 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 900;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s var(--e), background .18s var(--e);
}
.ssx-zone:hover .ssx-arrow{
  transform: scale(1.06);
  background: rgba(255,255,255,.14);
}

.ssx-hint{
  display: none;
  margin: 0 14px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (min-width: 1100px){ .ssx-hint{ display: inline-flex; } }

.ssx-content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(18px, 6vh, 58px);
  z-index: 7;
  width: min(1100px, calc(100% - 48px));
  text-align: center;
}
.ssx-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.86);
  background: rgba(60,47,47,.35);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 10px;
}
.ssx-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--burnt-orange);
  box-shadow: 0 0 0 6px rgba(210,105,30,.18);
}
.ssx-title{
  margin: 0 0 8px;
  color: #fff;
  font-weight: 900;
  line-height: 1.04;
  font-size: clamp(26px, 3.6vw, 54px);
  text-shadow: 0 16px 55px rgba(0,0,0,.55);
}
.ssx-sub{
  margin: 0 auto 14px;
  max-width: 72ch;
  color: rgba(255,255,255,.84);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.6;
  text-shadow: 0 16px 55px rgba(0,0,0,.55);
}
.ssx-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ssx-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s var(--e), background .18s var(--e), border-color .18s var(--e);
}
.ssx-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.26);
}
.ssx-btn--primary{
  background: linear-gradient(135deg, var(--burnt-orange), var(--caramel));
  border-color: rgba(210,105,30,.55);
  color: #201a18;
}
.ssx-pagination{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 8;
  width: auto;
}
.ssx-pagination .swiper-pagination-bullet{
  width: 9px;height: 9px;border-radius: 999px;
  background: rgba(255,255,255,.40);opacity: 1;
  transition: width .18s var(--e), background .18s var(--e);
}
.ssx-pagination .swiper-pagination-bullet-active{
  width: 30px;
  background: rgba(255,255,255,.92);
}
@media (max-width: 768px){
  .ssx-hero{ height: clamp(320px, 52vh, 560px); }
  .ssx-zone{ width: 30%; min-width: 110px; }
  .ssx-arrow{ width: 46px; height: 46px; margin: 0 12px; }
  .ssx-title{ font-size: clamp(22px, 6.2vw, 34px); }
}


/* ==============================
   SECTOR / INDUSTRIES SWIPER FIX
   Put this at END of your CSS file
   ============================== */

/* 1) Ensure swiper can calculate sizes correctly */
.slider-shell{
  width:100%;
  max-width:90%;
  margin:0 auto;
  padding:0 6px;
  position:relative;
}

.slider-shell .sector-swiper{
  width:100%;
  overflow:hidden;         /* IMPORTANT */
  position:relative;
  padding-bottom:18px;     /* room for pagination */
}

/* Swiper core: DO NOT let other CSS override these */
.slider-shell .sector-swiper .swiper-wrapper{
  display:flex;            /* IMPORTANT */
  align-items:stretch;     /* make slides same height */
}

.slider-shell .sector-swiper .swiper-slide{
  height:auto !important;  /* IMPORTANT */
  display:flex;            /* IMPORTANT */
  align-self:stretch;
}

/* 2) Card layout */
.slider-shell .slide-card{
  width:100%;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:24px;
  align-items:center;
  background:linear-gradient(180deg,#fffdf9 0%, #fff3e6 100%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height:320px;
}

/* text side */
.slider-shell .slide-card .copy{
  padding:26px 26px 26px 24px;
}
.slider-shell .slide-card .chip{
  width:54px;height:54px;
  border-radius:14px;
  display:grid;place-items:center;
  background:rgba(210,105,30,.12);
  border:1px solid rgba(210,105,30,.18);
  color:var(--burnt-orange);
  margin-bottom:12px;
}
.slider-shell .slide-card h3{
  margin:0 0 10px;
  color:#7b4d00;
  font-weight:900;
}
.slider-shell .slide-card p{
  margin:0 0 14px;
  color:#4d2e00;
  line-height:1.7;
}

/* image side */
.slider-shell .slide-card .visual{
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slider-shell .slide-card .visual img{
  width:100%;
  height:280px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.12));
}

/* 3) Pagination */
.slider-shell .sector-swiper .swiper-pagination{
  position:absolute;
  left:0; right:0;
  bottom:0;
  text-align:center;
}
.slider-shell .sector-swiper .swiper-pagination-bullet{
  width:9px;height:9px;
  opacity:1;
  background:rgba(60,47,47,.25);
  transition:width .2s ease, background .2s ease;
}
.slider-shell .sector-swiper .swiper-pagination-bullet-active{
  width:26px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* 4) Responsive */
@media (max-width:991.98px){
  .slider-shell .slide-card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .slider-shell .slide-card .copy{
    padding:22px 18px 0;
  }
  .slider-shell .slide-card .chip{
    margin:0 auto 12px;
  }
  .slider-shell .slide-card .visual{
    padding:10px 16px 18px;
  }
  .slider-shell .slide-card .visual img{
    height:220px;
  }
}
   
/* ==============================
   MOBILE MENU FIX (PATCH)
   Put at END of CSS
   ============================== */

/* 1) Only style the header burger button (not panel close) */
@media (max-width:991.98px){
  .site-header .ss-burger{
    width:44px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--header-line);
    border-radius:12px;
    background:#fff;
  }

  /* Keep your current mobile header row clean (Bootstrap row) */
  .site-header .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .site-header .mobile-header .mobile-btns{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    justify-content:center;
  }
}

/* 2) Panel close button should NOT look like a burger/menu button */
.mobile-panel .mp-close{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}
.mobile-panel .mp-close:hover{
  background:#f8fafc;
}
/* ---- scroll lock (robust) ---- */
/* ===== Mobile panel scroll fix ===== */
@media (max-width: 991.98px){

  /* make panel always full viewport height */
  .mobile-panel{
    height: 100dvh;       /* better on mobile */
    max-height: 100dvh;
  }

  /* IMPORTANT: allow this flex child to scroll */
  .mp-body{
    flex: 1 1 auto;       /* take remaining height */
    min-height: 0;        /* REQUIRED for overflow in flex */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* so the last items are not hidden behind bottom buttons/language */
    padding-bottom: 110px;
  }

  /* your accordion containers should NOT switch to overflow:visible */
  .m-sub.in,
  .m-coll.in{
    overflow: hidden;
  }
}

/* ===== MOBILE MENU: accordion + scrolling (FINAL FIX) ===== */
@media (max-width: 991.98px){

  .mobile-panel{
    height: 100dvh;
    max-height: 100dvh;
    display:flex;
    flex-direction:column;
  }

  .mp-body{
    flex: 1 1 auto;
    min-height: 0;                 /* REQUIRED */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 120px;         /* so items aren’t hidden behind buttons */
  }

  /* Accordion panels: JS controls max-height */
  .m-sub, .m-coll{
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s var(--bezier);
    border-left: 3px solid #f1d6c2;
    margin-left: 8px;
    padding-left: 8px;
    border-radius: 0 0 12px 12px;
  }

  /* Remove anything that breaks scrolling */
  .m-sub.in, .m-coll.in{
    overflow: hidden !important;
  }

  /* Make sure toggle is clickable (sometimes first item gets covered) */
  .m-toggle, .m-hed{
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* =========================
   MOBILE PANEL — PRO STYLE
   ========================= */

:root{
  --ss-brand:#d2691e;
  --ss-ink:#0f172a;
  --ss-muted:#64748b;
  --ss-line:#e9e2d9;
  --ss-soft:#fff3e6;
  --ss-card:#ffffff;
  --ss-shadow: 0 14px 40px rgba(2,6,23,.14);
}

/* lock scroll when menu open */
html.ss-lock, body.ss-lock{ overflow:hidden !important; height:100% !important; }

/* backdrop */
.mobile-backdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(2px);
  z-index:9998;
  opacity:0;
  transition:opacity .2s ease;
}
.mobile-backdrop.show{ opacity:1; }

/* panel */
.mobile-panel{
  position:fixed;
  top:0; right:0;
  height:100dvh;
  width:min(420px, 92vw);
  background:linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
  z-index:9999;
  transform:translateX(110%);
  transition:transform .22s ease;
  box-shadow:var(--ss-shadow);
  display:flex;
  flex-direction:column;
  border-left:1px solid rgba(15,23,42,.06);
}
.mobile-panel.open{ transform:translateX(0); }

/* header */
.mobile-panel .mp-head{
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(15,23,42,.06);
  background:#fff;
}
.mobile-panel .mp-title{
  font-weight:900;
  color:var(--ss-ink);
  letter-spacing:.2px;
}
.mobile-panel .mp-close{
  width:40px; height:40px;
  border-radius:12px;
  display:grid; place-items:center;
  background:rgba(210,105,30,.10);
  color:var(--ss-brand);
}
.mobile-panel .mp-close:hover{ background:rgba(210,105,30,.16); }

/* scrollable body */
.mobile-panel .mp-body{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 12px 14px;
}

/* banner (FIX huge image) */
.mobile-panel .mp-banner{
  background:linear-gradient(180deg, rgba(210,105,30,.12), rgba(255,255,255,1));
  border:1px solid rgba(210,105,30,.14);
  border-radius:18px;
  padding:12px 12px 10px;
  margin-bottom:10px;
}

/* brand row */
.mobile-panel .mp-brand{
  display:flex;
  gap:10px;
  align-items:center;
}
.mobile-panel .mp-brand img{
  width:46px; height:46px;
  border-radius:14px;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  padding:6px;
}
.mobile-panel .mp-tagline{
  margin-top:8px;
  font-size:12px;
  line-height:1.35;
  color:var(--ss-muted);
}

/* social icons */
.mobile-panel .mp-social{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.mobile-panel .mp-social a{
  width:36px; height:36px;
  border-radius:12px;
  display:grid; place-items:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  color:var(--ss-ink);
  text-decoration:none;
}
.mobile-panel .mp-social a:hover{
  border-color:rgba(210,105,30,.35);
  color:var(--ss-brand);
  transform:translateY(-1px);
}

/* accordion list */
.mobile-panel .m-accordion{
  list-style:none;
  padding:0;
  margin:10px 0 0;
}
.mobile-panel .m-item{ margin:8px 0; }

/* top row button */
.mobile-panel .m-toggle{
  width:100%;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:14px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  color:var(--ss-ink);
  box-shadow:0 6px 18px rgba(2,6,23,.05);
}
.mobile-panel .m-toggle:active{ transform:scale(.99); }
.mobile-panel .m-toggle .m-text{
  font-size:13px;
  letter-spacing:.2px;
}

/* chevron */
.mobile-panel .m-toggle .chev{
  transition:transform .2s ease;
  color:var(--ss-brand);
}
.mobile-panel .m-toggle[aria-expanded="true"] .chev{
  transform:rotate(180deg);
}

/* submenu panel */
.mobile-panel .m-sub{
  margin-top:8px;
  border:1px solid rgba(210,105,30,.14);
  background:var(--ss-soft);
  border-radius:14px;
  padding:8px;
  overflow:hidden;
  max-height:0;
  transition:max-height .25s ease;
}
.mobile-panel .m-sub.in{ /* JS sets max-height */ }

/* parent link inside submenu */
.mobile-panel .m-parent-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
  background:#fff;
  border:1px dashed rgba(210,105,30,.30);
  color:var(--ss-ink);
  text-decoration:none;
  font-size:12.5px;
}
.mobile-panel .m-parent-link:hover{
  border-style:solid;
  border-color:rgba(210,105,30,.40);
}

/* nested list */
.mobile-panel .m-level{
  list-style:none;
  padding:8px 0 0;
  margin:0;
}
.mobile-panel .m-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  margin:7px 0 0;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  color:var(--ss-ink);
  text-decoration:none;
  font-weight:700;
  font-size:12.5px;
}
.mobile-panel .m-link:hover{
  border-color:rgba(210,105,30,.35);
}

/* bottom tools area look nicer */
.mobile-panel .mobile-apply{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
@media (max-width:380px){
  .mobile-panel .mobile-apply{ grid-template-columns:1fr; }
}

/* make language select fit */
.mobile-panel .form-select{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  padding:10px 12px;
}
.mobile-panel .m-link:active,
.mobile-panel .m-parent-link:active,
.mobile-panel .m-toggle:active{
  transform:scale(.99);
}

/* ✅ FIX: submenu must fully disappear when closed */
.mobile-panel .m-sub{
  max-height:0;
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  transition:max-height .25s ease, padding .15s ease, margin .15s ease, border-color .15s ease;
}

/* open state restores the nice box */
.mobile-panel .m-sub.in{
  padding:8px !important;
  margin-top:8px !important;
  border:1px solid rgba(210,105,30,.14) !important;
  background:var(--ss-soft) !important;
  border-radius:14px;
}

/* ✅ Desktop must NEVER show mobile menu panel */
@media (min-width: 992px){
  #mobileNav,
  .mobile-panel{
    display: none !important;
    transform: translateX(110%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  #mbBackdrop,
  .mobile-backdrop{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* If you have burger button, hide it on desktop too */
  #openMobile,
  .ss-burger{
    display: none !important;
  }
}
/* ===============================
   DESKTOP DROPDOWN FIX (stable hover + bigger)
   =============================== */
@media (min-width: 992px){

  /* Ensure header allows dropdown to overflow */
  .site-header,
  .header-inner,
  .header-center-col{
          padding-bottom: 6px;
    overflow: visible !important;
  }

  /* Parent li */
  .nav-cat > li{
    position: relative;
  }

  /* 🔥 Bigger dropdown box */
  .nav-cat > li.has-dropdown .dropdown-vert{
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    width: min(600px, 98vw);     /* bigger */
    max-height: 70vh;            /* allow many items */
    overflow: auto;              /* scroll inside */
    background: #fff;
    border: 1px solid #efe7de;
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .14);
    padding: 10px;
    z-index: 9999;

    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  /* Show on hover/focus (stable) */
  .nav-cat > li.has-dropdown:hover > .dropdown-vert,
  .nav-cat > li.has-dropdown:focus-within > .dropdown-vert{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* ✅ "Hover bridge" to prevent disappearing while moving mouse */
  .nav-cat > li.has-dropdown::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px; /* bridge gap */
  }

  /* Dropdown list items spacing */
  .dropdown-vert .menu-vert{
    margin: 0;
    padding: 6px;
    list-style: none;
  }

  .dropdown-vert .menu-vert > li > a{
    display: block;
    padding: 6px 6px;
    border-radius: 12px;
    font-weight: 400;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.1;
  }

  .dropdown-vert .menu-vert > li > a:hover{
    background: #fff3e6; /* soft peach */
  }

  /* Improve scrollbar look (optional) */
  .nav-cat > li.has-dropdown .dropdown-vert::-webkit-scrollbar{
    width: 10px;
  }
  .nav-cat > li.has-dropdown .dropdown-vert::-webkit-scrollbar-thumb{
    background: #e6cdb7;
    border-radius: 99px;
    border: 2px solid #fff;
  }
}
/* Center the topbar content like the menu */
.site-header .ss-topbar{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.site-header .ss-topbar-left{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* Prevent it from looking too wide */
.site-header .ss-topbar-left span{
  max-width: 820px;
}

/* Mobile: allow wrap */
@media (max-width: 991.98px){
  .site-header .ss-topbar-left{
    flex-wrap: wrap;
    gap: 6px;
  }
  .site-header .ss-topbar-left span{
    max-width: 100%;
  }
  
}
/* =========================================================
   SS TOPBAR — SIMPLE PRO (compact)
   ========================================================= */

.site-header .ss-topbar{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 6px 0 8px; /* smaller */
}

.site-header .ss-topbar-left{
  width: min(860px, calc(100% - 24px));
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 8px 12px;           /* smaller */
  border-radius: 999px;        /* pill */

  background: rgba(255,243,230,.78); /* soft peach */
  border: 1px solid rgba(210,105,30,.18);

  box-shadow: 0 8px 18px rgba(15,23,42,.06); /* lighter */
}

/* small icon (no badge box) */
.site-header .ss-topbar-left > i{
  color: #b85a12;  /* brand-dark */
  font-size: 13px;
  opacity: .95;
}

/* text */
.site-header .ss-topbar-left > span{
  font-family: sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #1f2937;
  line-height: 1.2;
  text-align:center;
}

/* optional: small highlight words without chips */
.site-header .ss-topbar-left > span b{
  color:#b85a12;
  font-weight:800;
}

/* hover very subtle */
@media (hover:hover){
  .site-header .ss-topbar-left{
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  }
  .site-header .ss-topbar-left:hover{
    transform: translateY(-1px);
    border-color: rgba(210,105,30,.28);
    box-shadow: 0 12px 26px rgba(15,23,42,.08);
  }
}

/* Mobile */
@media (max-width: 991.98px){
  .site-header .ss-topbar{ padding: 6px 0 6px; }
  .site-header .ss-topbar-left{
    width: calc(100% - 16px);
    padding: 8px 10px;
  }
  .site-header .ss-topbar-left > span{
    font-size: 11.5px;
  }
}
/* =========================================================
   SCIENCE SPARK — GLOBAL BUTTON SYSTEM (PRO • FORCE)
   Default: soft white bg + orange text
   Hover:   black bg + white text
   ========================================================= */


html, body{
  font-family: var(--font-sans);
}

/* Optional: also make form controls match */
button, input, select, textarea,h1,h2,h3,h4,h5,h6{
  font: inherit;
}
/* =========================
   PDF MODE (mPDF friendly)
   ========================= */
body.is-pdf{ background:#fff; }
body.is-pdf .actions{ display:none !important; }

/* IMPORTANT: remove "screen card" look so mPDF doesn't scale */
body.is-pdf .page{
  width:auto !important;           /* let mPDF use page width */
  min-height:auto !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  page-break-after:always;
}

/* safer spacing for PDF */
body.is-pdf .header{ padding:22px 28px 14px; }
body.is-pdf .titlebar{ padding:10px 28px; }
body.is-pdf .billgrid{ padding:18px 28px 0; }
body.is-pdf .tablewrap{ padding:12px 28px 0; }
body.is-pdf .totalsArea{ padding:16px 28px 20px; }
body.is-pdf .footer{ padding:12px 28px; }

/* mPDF does NOT load Google Fonts reliably, use built-in font */
body.is-pdf *{
  font-family: dejavusans, sans-serif !important;
}

/* ==============================
   SS TYPOGRAPHY PATCH (BOTTOM)
   - Keep all your styles
   - Force ONE font (Open Sans)
   - Force ALL headings same size
   - Force ALL normal text same size
   ============================== */

:root{
  /* You can change these 2 values only if you want */
  --ss-body-size: 16px;     /* normal text size everywhere */
  --ss-head-size: 26px;     /* ALL headers/section headers same size */
  --ss-body-lh: 1.7;
  --ss-head-lh: 1.25;
}

/* Force Open Sans everywhere (without breaking icon fonts) */
html, body{
  font-family: var(--font-sans) !important;
  font-size: var(--ss-body-size) !important;
  line-height: var(--ss-body-lh) !important;
}

button, input, select, textarea{
  font-family: var(--font-sans) !important;
  font-size: var(--ss-body-size) !important;
  line-height: var(--ss-body-lh) !important;
}

/* NORMAL TEXT = same size */
p,
li,
td, th,
small,
label,
.form-control,
.form-select,
textarea,
.info-box.pro p,
.industries-pro .service-desc p,
.industries-split .body p,
.card p,
.hero-sub,
.banner-pro .hero-sub,
.banner-slider .hero-sub,
.hero-caption .hero-sub,
.ssx-sub,
.serve-lead,
.serve-copy{
  font-size: var(--ss-body-size) !important;
  line-height: var(--ss-body-lh) !important;
}

/* HEADERS / SECTION HEADERS = same size (all unified) */
h1,h2,h3,h4,h5,h6,
.section-title,
.page-title h1,
.page-title h2,
.page-title h3,
.info-box.pro h3,
.pro-card h2,
.pro-card h3,
.card h2,
.panel-header h2,
.industries-pro .service-title h4,
.industries-split .body h4,
.slider-shell .slide-card h3,
.serve-title,
.ss-contact .ss-hero h1,
.hero-title,
.banner-pro .hero-title,
.banner-slider .hero-title,
.hero-caption .hero-title .tc-title .itemTitle
.ssx-title{
padding-bottom:12px;
padding-top:10px;
    font-weight: 500;
  font-size: var(--ss-head-size) !important;
  line-height: var(--ss-head-lh) !important;
}

/* Make sure links and nav inherit the unified font (keep your sizes) */
a, .nav-cat > li > a, .btn, .btn-spark{
  font-family: var(--font-sans) !important;
}

section {
     padding: 8px ; 
}

:root{
  --ss-orange: #d2691e;
  --ss-orange-dark: #b85a12;
  --ss-ink: #0b0f19;
  --ss-surface: rgba(255,255,255,.92);
  --ss-border: rgba(210,105,30,.28);
  --ss-shadow: 0 10px 24px rgba(15,23,42,.10);
}

:where(
  a.btn, .btn, button,
  input[type="button"], input[type="submit"], input[type="reset"],
  .btn-spark,
  .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark, .btn-outline-light
){
  -webkit-appearance: none;
  appearance: none;

  /* Pro default */
  background: var(--ss-surface) !important;
  color: var(--ss-orange) !important;

  border: 1px solid var(--ss-border) !important;
  border-radius: 999px !important;

  padding: 10px 16px !important;
  min-height: 40px;

  font-family:  sans-serif;
  letter-spacing: .22px;
  text-transform:math-auto;

  text-decoration: none !important;
  cursor: pointer;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-shadow: var(--ss-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

/* Hover / Active */
:where(
  a.btn, .btn, button,
  input[type="button"], input[type="submit"], input[type="reset"],
  .btn-spark,
  .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light,
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark, .btn-outline-light
):hover{
  background: var(--ss-ink) !important;
  color: #fff !important;
  border-color: rgba(11,15,25,.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
}

:where(
  a.btn, .btn, button,
  input[type="button"], input[type="submit"], input[type="reset"],
  .btn-spark
):active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
}

/* Icons inside buttons */
:where(.btn, .btn-spark, button) i,
:where(.btn, .btn-spark, button) svg{
  color: currentColor !important;
}

/* Focus ring */
:where(
  a.btn, .btn, button,
  input[type="button"], input[type="submit"], input[type="reset"],
  .btn-spark
):focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(210,105,30,.22),
    var(--ss-shadow) !important;
}

/* Disabled */
:where(
  button:disabled,
  .btn:disabled,
  .btn.disabled,
  input:disabled
){
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Small buttons (Bootstrap .btn-sm etc.) */
:where(.btn-sm){
  padding: 8px 12px !important;
  min-height: 34px !important;
}