:root {
  --navy-deep: #191454;
  --navy: #241d6b;
  --indigo: #322a8a;
  --purple: #4a3fb8;
  --purple-light: #6c5ce7;
  --accent: #ffb020;
  --accent-2: #22c1a4;
  --surface: #ffffff;
  --surface-2: #f4f3fb;
  --text: #181534;
  --muted: #5c5a7a;
  --border: rgba(24, 21, 52, 0.07);
  --shadow: 0 10px 30px rgba(24, 20, 60, 0.07);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Themed scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--purple) var(--surface-2); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(160deg, var(--indigo), var(--purple));
  border-radius: 999px; border: 3px solid var(--surface-2); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(160deg, var(--purple), var(--purple-light)); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: var(--surface-2); }
::selection { background: var(--purple); color: #fff; }

/* dark surfaces get a matching dark scrollbar */
.nav-links { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255,255,255,.12); }
.nav-links::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }
.nav-links::-webkit-scrollbar-thumb {
  background: var(--accent); border: 3px solid transparent; background-clip: padding-box;
}
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--surface-2);
  color: var(--text);
  line-height: 1.65;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: 'Poppins', 'Inter', sans-serif; letter-spacing: -0.01em; }
.container { width: min(1220px, calc(100% - 32px)); margin: 0 auto; }

/* ---------- Announcement + Header (sticky together) ---------- */
/* placeholder must not create a containing block, or sticky children
   stop sticking as soon as the placeholder scrolls out of view */
#header-placeholder { display: contents; }
.announce {
  /* below .site-header so the full-screen mobile menu (nested inside the
     header's stacking context) can cover it */
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(90deg, var(--accent), #ff9d3d);
  color: var(--navy-deep); font-weight: 800; font-size: 0.84rem;
  padding: 8px 0; letter-spacing: .01em; overflow: hidden;
}
.announce a { text-decoration: underline; }

/* Scrolling marquee */
.marquee { overflow: hidden; width: 100%; }
.marquee-track {
  display: flex; align-items: center; gap: 0;
  width: max-content; white-space: nowrap;
  animation: marquee-scroll 42s linear infinite;
}
.announce:hover .marquee-track { animation-play-state: paused; }
.mq-item { padding: 0 18px; }
.mq-sep { opacity: .5; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Full-screen mobile nav pieces (hidden on desktop) */
.nav-panel-head, .nav-panel-foot, .nav-close { display: none; }
.site-header {
  position: sticky; top: var(--announce-h, 0px); z-index: 55;
  background: linear-gradient(135deg, var(--navy-deep), var(--indigo));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(10,8,30,0.25);
}
.topbar {
  background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.85);
  font-size: 0.82rem; padding: 6px 0;
}
.topbar .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.topbar a { color: rgba(255,255,255,0.85); }
.topbar .topbar-links { display:flex; gap:18px; flex-wrap:wrap; }
.navbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 0 10px; gap: 10px 20px; }
.brand-badge { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.05rem; color: white; flex-shrink:0; }
.brand-badge img { height: 42px; width: auto; object-fit: contain; }
.brand-badge .brand-sub { display:block; font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 18px; font-weight: 600; color: rgba(255,255,255,0.82); flex-wrap: wrap; font-size: 0.9rem; width: 100%; order: 3; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); }
.nav-links a:hover { color: white; }
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink:0; order: 2; }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px 6px; flex-shrink:0; width:42px; height:40px; }
.menu-toggle span { display:block; height:2.5px; width:24px; margin:0 auto; background:#fff; border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.menu-toggle span + span { margin-top:5px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

.btn, .btn-outline, .btn-dark, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; padding: 12px 20px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.95rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap;
}
.btn:hover, .btn-outline:hover, .btn-dark:hover, .btn-ghost:hover { transform: translateY(-2px); }
.btn { background: linear-gradient(135deg, var(--accent), #ff9d3d); color: var(--navy-deep); box-shadow: 0 10px 25px rgba(255,176,32,.28); }
.btn-outline { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.35); }
.btn-dark { background: var(--navy-deep); color:white; }
.btn-ghost { background: white; color: var(--indigo); border: 1px solid var(--border); }
.btn.btn-block, .btn-outline.btn-block { width:100%; }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 60px; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--navy-deep) 0%, var(--indigo) 55%, var(--purple) 100%); color: white; }
.hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(108,92,231,0.35), transparent 40%), radial-gradient(circle at 85% 80%, rgba(255,176,32,0.18), transparent 35%);
  z-index:0;
}
.hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items:center; position:relative; z-index:1; }
.hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.12; margin:0 0 16px; }
.hero-copy p { font-size: 1.05rem; color: rgba(255,255,255,0.82); max-width: 600px; margin-bottom: 22px; }
.hero-badges { display:flex; flex-wrap:wrap; gap: 10px; margin: 20px 0 28px; }
.badge-pill { padding: 9px 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius:999px; font-size: .88rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.badge-pill.on-light { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.hero-actions { display:flex; gap: 14px; flex-wrap:wrap; }
.hero-card {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 18px; backdrop-filter: blur(10px);
}
.hero-card img { border-radius: 12px; width:100%; height:auto; aspect-ratio: 1.4 / 1; object-fit: cover; background:#fff; }
.hero-card .mini-stat { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.mini-stat div { background: rgba(255,255,255,0.08); padding: 12px; border-radius: 14px; text-align:center; }
.mini-stat strong { display:block; font-size:1.15rem; color: var(--accent); }
.mini-stat span { font-size: 0.78rem; color: rgba(255,255,255,0.75); }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section.tight { padding: 40px 0; }
.section-alt { background: white; }
.section-dark { background: linear-gradient(135deg, var(--navy-deep), var(--indigo)); color:white; }
.section-title { display:flex; justify-content:space-between; align-items:end; gap: 16px; margin-bottom: 28px; flex-wrap:wrap; }
.section-title h2 { margin:0; font-size: clamp(1.5rem,2.6vw,2.1rem); }
.section-title p { margin:6px 0 0; color: var(--muted); max-width:560px; }
.section-title.center { flex-direction:column; align-items:center; text-align:center; margin: 0 auto 34px; }
.section-dark .section-title p { color: rgba(255,255,255,0.75); }
.eyebrow { display:inline-block; font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color: var(--purple); background: rgba(74,63,184,0.1); padding:6px 14px; border-radius:999px; margin-bottom:12px; }
.section-dark .eyebrow { color: var(--accent); background: rgba(255,176,32,0.14); }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }

.card { background:white; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 38px rgba(24,20,60,0.11); }
.card img { border-radius: 12px; width:100%; height: 200px; object-fit: cover; margin-bottom: 14px; background:#eee; }
.card h3 { margin: 6px 0 8px; font-size: 1.1rem; }
.card p { margin:0; color: var(--muted); font-size: 0.95rem; }
.card .tag { display:inline-block; font-size:0.72rem; font-weight:800; color: var(--purple); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; margin-bottom:10px; }

.product-card { padding: 0; overflow:hidden; }
.product-card img { height: 190px; margin:0; border-radius:0; }
.product-card .content { padding: 16px; }
.product-card h3 { font-size: 1rem; margin: 0 0 4px; }
.product-card p { font-size: 0.85rem; }

.icon-tile { background:white; border-radius:14px; padding:22px 16px; text-align:center; box-shadow: 0 8px 22px rgba(24,20,60,.06); transition: transform .2s ease; }
.icon-tile:hover { transform: translateY(-4px); }
.icon-tile .icon-circle { width:52px; height:52px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background: linear-gradient(135deg, var(--purple-light), var(--purple)); color:white; font-size:1.4rem; }
.icon-tile h4 { margin:0; font-size:0.92rem; }

.stats-bar { background: linear-gradient(135deg, var(--navy-deep), var(--purple)); color:white; padding: 52px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stats-grid strong { font-size: clamp(1.6rem,3vw,2.2rem); display:block; }
.stats-grid span { color: rgba(255,255,255,0.78); font-size:0.88rem; }

.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.feature-list .feature { background:white; padding: 22px; border-radius: 14px; }
.feature-list .feature h3 { margin-top:0; font-size:1.05rem; }
.feature-list .feature p { color: var(--muted); margin-bottom:0; }

.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.timeline .step { background:white; border-radius:14px; padding:20px; position:relative; }
.timeline .step strong.num { display:block; font-size:1.6rem; color: var(--purple); margin-bottom:8px; }

.logo-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:center; }
.logo-strip .logo-chip { background:white; border-radius:14px; padding:14px; display:flex; align-items:center; justify-content:center; font-weight:800; color: var(--muted); font-size:0.82rem; text-align:center; min-height:64px; }

.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial { background:white; border-radius:14px; padding:24px; box-shadow: var(--shadow); }
.testimonial p.quote { font-style:italic; color:var(--text); }
.testimonial .who { font-weight:800; margin-top:14px; }
.testimonial .who span { display:block; font-weight:600; color:var(--muted); font-size:0.85rem; }

.org-chart { display:flex; flex-direction:column; align-items:center; gap:14px; }
.org-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.org-box { background:white; border-radius:14px; padding:12px 18px; text-align:center; box-shadow: var(--shadow); min-width:160px; }
.org-box strong { display:block; font-size:0.92rem; }
.org-box span { font-size:0.8rem; color:var(--muted); }

.newsletter { background: linear-gradient(135deg, var(--navy-deep), var(--purple)); padding: 44px; border-radius: 16px; box-shadow: var(--shadow); color:white; text-align:center; }
.newsletter p { color: rgba(255,255,255,0.82); max-width:560px; margin: 8px auto 20px; }
.newsletter form { display:flex; gap: 12px; flex-wrap:wrap; margin-top:16px; justify-content:center; }
.newsletter input { flex:1; min-width: 260px; max-width:360px; padding: 13px 16px; border:1px solid rgba(255,255,255,0.3); border-radius:999px; background: rgba(255,255,255,0.1); color:white; }
.newsletter input::placeholder { color: rgba(255,255,255,0.6); }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0 20px; margin-top: 0; background: var(--navy-deep); color: rgba(255,255,255,0.85); }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-top h3 { color:white; margin-top:0; font-size:1rem; }
.footer-top ul { list-style:none; padding:0; margin:0; }
.footer-top li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-top li a:hover { color: var(--accent); }
.footer-brand img { height:46px; margin-bottom:12px; }
.footer-brand p { font-size:0.9rem; color: rgba(255,255,255,0.68); max-width: 280px; }
.footer-social { display:flex; gap:10px; margin-top:14px; }
.footer-social a { width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.1); display:grid; place-items:center; font-size:0.9rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:0.82rem; color: rgba(255,255,255,0.55); flex-wrap:wrap; gap:10px; }

/* ---------- Page-level ---------- */
.page-intro { padding: 42px 0 30px; background: linear-gradient(135deg, var(--navy-deep), var(--indigo)); color:white; }
.page-intro h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 10px; }
.page-intro p { color: rgba(255,255,255,0.8); max-width: 760px; margin:0; }
.breadcrumbs { color: rgba(255,255,255,0.65); font-weight: 600; margin-bottom: 12px; font-size:0.88rem; }
.breadcrumbs a { color: var(--accent); }

.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.catalog-card { padding: 0; overflow:hidden; }
.catalog-card img { height: 210px; margin:0; border-radius:0; }
.catalog-card .content { padding:18px; }
.catalog-card .price { color: var(--purple); font-weight: 800; margin-top: 8px; font-size:0.9rem; }
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0 30px; }
.filter-chip { border:1px solid var(--border); background:white; padding: 10px 16px; border-radius: 999px; color: var(--muted); font-weight: 700; font-size:0.85rem; cursor:pointer; }
.filter-chip.active { background: var(--indigo); color:white; border-color: var(--indigo); }

.form-card { background:white; padding: 28px; border-radius: 14px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label { display:block; margin-bottom: 8px; font-weight: 700; font-size:0.92rem; }
.field input, .field textarea, .field select { width:100%; border:1px solid var(--border); border-radius: 14px; padding: 12px 14px; font: inherit; background: var(--surface-2); }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--purple-light); background:white; }
.group-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.group-three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

.info-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.info-strip .info-card { background:white; border-radius:14px; padding:22px; }
.info-card .icon-circle { width:44px; height:44px; border-radius:12px; background: linear-gradient(135deg, var(--purple-light), var(--purple)); display:grid; place-items:center; color:white; margin-bottom:12px; }

.map-embed { border-radius:14px; overflow:hidden; box-shadow: var(--shadow); }
.map-embed iframe { width:100%; height:340px; border:0; display:block; }

.accordion-item { background:white; border-radius:16px; margin-bottom:12px; overflow:hidden; }
.accordion-item summary { padding:18px 20px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.accordion-item summary::-webkit-details-marker { display:none; }
.accordion-item summary::after { content:'+'; font-size:1.3rem; color:var(--purple); }
.accordion-item[open] summary::after { content:'\2212'; }
.accordion-item .accordion-body { padding: 0 20px 18px; color: var(--muted); }

.compliance-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
/* sits inside .section-dark, so the text colour must be set explicitly
   or it inherits white and disappears against the white card */
.compliance-list li { display:flex; align-items:flex-start; gap:10px; background:white; color:var(--text); border-radius:14px; padding:14px 16px; font-weight:600; }
.compliance-list li .check { color: var(--accent-2); font-size:1.1rem; flex-shrink:0; }

/* white-surfaced components keep dark text even on dark sections */
.section-dark .card, .section-dark .feature, .section-dark .branch-card,
.section-dark .info-card, .section-dark .org-box, .section-dark .quick-link,
.section-dark .testimonial, .section-dark .logo-chip, .section-dark .accordion-item,
.photo-band .card, .photo-band .feature, .photo-band .branch-card,
.photo-band .info-card, .photo-band .org-box, .photo-band .quick-link,
.photo-band .testimonial, .photo-band .logo-chip, .photo-band .accordion-item { color: var(--text); }
.section-dark .card h3, .section-dark .quick-link strong,
.photo-band .card h3, .photo-band .quick-link strong { color: var(--text); }
.section-dark .card p, .section-dark .quick-link span,
.photo-band .card p, .photo-band .quick-link span { color: var(--muted); }

.branch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.branch-card { background:white; border-radius:14px; padding:22px; box-shadow: var(--shadow); }
.branch-card h3 { margin-top:0; }

.cart-table { width:100%; border-collapse: collapse; background:white; border-radius:14px; overflow:hidden; box-shadow: var(--shadow); }
.cart-table th, .cart-table td { padding:16px; text-align:left; border-bottom:1px solid var(--border); }
.cart-table th { background: var(--surface-2); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
.qty-input { width:64px; padding:8px; border-radius:8px; border:1px solid var(--border); text-align:center; }
.cart-summary { background:white; border-radius:14px; padding:24px; box-shadow: var(--shadow); }
.cart-summary .row { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--muted); }
.cart-summary .row.total { color:var(--text); font-weight:800; font-size:1.1rem; border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }

.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; border-bottom:1px solid var(--border); }
.tab-btn { padding:12px 18px; font-weight:700; color:var(--muted); border-bottom:3px solid transparent; cursor:pointer; background:none; border-left:none;border-right:none;border-top:none; font-size:0.95rem; }
.tab-btn.active { color: var(--indigo); border-bottom-color: var(--indigo); }

.hero-animate { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height:48px; border-radius:50%; background: var(--indigo); color:white; display:grid; place-items:center; box-shadow: 0 10px 30px rgba(24,20,60,.3); font-size:1.2rem; z-index:60; border:none; cursor:pointer; }

/* ---------- Category tiles (image + overlay label) ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.cat-tile { position:relative; display:block; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 8px 22px rgba(24,20,60,.07); transition:transform .25s ease, box-shadow .25s ease; }
.cat-tile:hover { transform:translateY(-6px); box-shadow:0 16px 38px rgba(24,20,60,.13); }
.cat-tile img { width:100%; height:190px; object-fit:contain; background:#fff; padding:10px; }
.cat-tile .cat-label { background:linear-gradient(135deg,var(--indigo),var(--purple)); color:#fff; font-weight:700; font-size:.92rem; text-align:center; padding:11px 8px; }
.cat-tile .cat-label span { display:block; font-weight:600; font-size:.75rem; color:rgba(255,255,255,.75); }

.cat-heading { font-size:1.35rem; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--border); scroll-margin-top:170px; }

/* ---------- Split feature (image + text) ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.split.reverse .split-media { order:2; }
.split-media img { width:100%; height:420px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); }
.split-body h2 { margin-top:0; }
.split-body ul { list-style:none; padding:0; margin:18px 0 0; }
.split-body li { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; color:var(--muted); }
.split-body li::before { content:'\2713'; color:var(--accent-2); font-weight:900; flex-shrink:0; }

/* ---------- Media card (photo on top, dark caption) ---------- */
.media-card { position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); min-height:260px; display:flex; align-items:flex-end; color:#fff; }
.media-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.media-card .mc-body { position:relative; z-index:2; padding:22px; background:linear-gradient(transparent, rgba(16,12,45,.92)); width:100%; }
.media-card h3 { margin:0 0 6px; font-size:1.1rem; }
.media-card p { margin:0; color:rgba(255,255,255,.82); font-size:.9rem; }
.media-card::after { content:''; position:absolute; inset:0; background:rgba(20,15,55,.18); z-index:1; }

/* ---------- CTA band ---------- */
.cta-band { background:linear-gradient(135deg,var(--navy-deep),var(--purple)); color:#fff; border-radius:16px; padding:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; box-shadow:var(--shadow); }
.cta-band h2 { margin:0 0 6px; }
.cta-band p { margin:0; color:rgba(255,255,255,.8); }

/* ---------- Client logo marquee ---------- */
.logo-marquee { overflow:hidden; position:relative; padding:6px 0; }
.logo-marquee::before, .logo-marquee::after {
  content:''; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.logo-marquee::before { left:0;  background:linear-gradient(90deg, var(--surface-2), transparent); }
.logo-marquee::after  { right:0; background:linear-gradient(270deg, var(--surface-2), transparent); }
.section-alt .logo-marquee::before { background:linear-gradient(90deg, #fff, transparent); }
.section-alt .logo-marquee::after  { background:linear-gradient(270deg, #fff, transparent); }
.lm-track { display:flex; align-items:center; gap:58px; width:max-content; animation: lm-scroll 46s linear infinite; }
.logo-marquee.reverse .lm-track { animation-direction: reverse; animation-duration: 54s; }
.logo-marquee:hover .lm-track { animation-play-state: paused; }
.lm-track img {
  height:46px; width:auto; max-width:150px; object-fit:contain; flex-shrink:0;
  filter:grayscale(1); opacity:.55; transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.lm-track img:hover { filter:none; opacity:1; transform:scale(1.08); }
@keyframes lm-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lm-track { animation:none; } }

/* static logo grid (clients page) */
.logo-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.logo-grid .lg-item {
  background:#fff; border-radius:12px; min-height:86px; padding:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(24,20,60,.05); transition:transform .2s ease, box-shadow .2s ease;
}
.logo-grid .lg-item:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(24,20,60,.11); }
.logo-grid img { max-height:52px; max-width:100%; width:auto; object-fit:contain; }

/* ---------- Quick links (cross-page navigation) ---------- */
.quick-links { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.quick-link {
  position:relative; display:flex; flex-direction:column; background:#fff; border-radius:16px;
  padding:26px 22px 22px; overflow:hidden; box-shadow:0 4px 16px rgba(24,20,60,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.quick-link::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--purple), var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.quick-link:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(24,20,60,.13); }
.quick-link:hover::before { transform:scaleX(1); }
.ql-icon {
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(74,63,184,.12), rgba(108,92,231,.16)); color:var(--purple);
  transition:background .3s ease, color .3s ease;
}
.ql-icon svg { width:22px; height:22px; }
.quick-link:hover .ql-icon { background:linear-gradient(135deg, var(--purple), var(--purple-light)); color:#fff; }
.quick-link strong { display:block; font-size:1.02rem; margin-bottom:7px; font-family:'Poppins',sans-serif; }
.quick-link span { color:var(--muted); font-size:.88rem; line-height:1.55; }
.quick-link .arrow {
  color:var(--purple); font-weight:800; margin-top:14px; display:inline-flex; align-items:center;
  gap:6px; font-size:.85rem; transition:gap .25s ease;
}
.quick-link:hover .arrow { gap:12px; }

/* ---------- SVG icon defaults ---------- */
.icon-tile .icon-circle svg, .info-card .icon-circle svg { width:24px; height:24px; }
.icon-circle svg { stroke:currentColor; fill:none; }

/* ---------- Section band with photo background ---------- */
.photo-band { position:relative; padding:80px 0; color:#fff; overflow:hidden; }
.photo-band img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.photo-band::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg, rgba(25,20,84,.94), rgba(74,63,184,.82)); z-index:1; }
.photo-band .container { position:relative; z-index:2; }
.photo-band h1, .photo-band h2, .photo-band h3, .photo-band h4 { color:#fff; }
.photo-band p, .photo-band .section-title p { color:rgba(255,255,255,.85); }
.photo-band .eyebrow { color:var(--accent); background:rgba(255,176,32,.18); }

@media (max-width: 980px) {
  .cat-grid { grid-template-columns:repeat(3,1fr); }
  .quick-links { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; gap:26px; }
  .split.reverse .split-media { order:0; }
  .split-media img { height:300px; }
}
@media (max-width: 720px) {
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .cat-tile img { height:140px; }
  .quick-links { grid-template-columns:1fr; }
  .cta-band { padding:28px; flex-direction:column; align-items:flex-start; text-align:left; }
  .split-media img { height:230px; }
  .photo-band { padding:52px 0; }
}

@media (max-width: 980px) {
  .hero-grid, .grid-2, .grid-3, .catalog-grid, .footer-top, .stats-grid, .feature-list, .group-two, .group-three, .testimonial-grid, .info-strip, .branch-grid, .timeline { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(3,1fr); }
  .grid-5, .grid-6 { grid-template-columns: repeat(3,1fr); }
  .logo-strip { grid-template-columns: repeat(3,1fr); }
  .compliance-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .announce { font-size: .76rem; padding: 7px 0; }
  .mq-item { padding: 0 12px; }
  .marquee-track { animation-duration: 30s; }
  .navbar { flex-wrap: nowrap; gap: 8px; padding: 10px 0; }
  .brand-badge { gap: 8px; min-width:0; }
  .brand-badge img { height: 34px; flex-shrink:0; }
  .brand-badge span { font-size: 0.72rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
  .brand-badge .brand-sub { display:none; }
  .nav-account { display:none; }
  /* topbar duplicates the marquee + menu contact info on small screens */
  .topbar { display: none; }
  .nav-actions { gap: 6px; flex-shrink:0; }
  .nav-actions .btn { padding: 9px 12px; font-size: 0.8rem; }
  .menu-toggle { display:block; position:relative; z-index:210; }
  .menu-toggle[aria-expanded="true"] { display:none; }
  .nav-quote { display:none; }

  /* Full-screen overlay menu */
  .nav-links {
    position: fixed !important; inset: 0 !important; margin:0; width:100%; height:100%;
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--indigo) 60%, var(--purple) 100%);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    padding: 0 24px 32px; gap: 0; border-top: none; order: 0; box-sizing: border-box;
    overflow-y: auto; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }

  .nav-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto; width: 100%;
    padding: 16px 0 20px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.14);
    position: sticky; top: 0; z-index: 2;
    background: var(--navy-deep);
  }
  .nav-panel-head img { height: 38px; width: auto; }
  .nav-close { display: block; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1.7rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

  .nav-links a {
    flex: 0 0 auto; width: 100%;
    padding: 16px 4px; font-size: 1.08rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.09);
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-links a::after { content: '\203A'; color: var(--accent); font-size: 1.4rem; opacity: .7; }
  .nav-links a:active { background: rgba(255,255,255,.06); }

  .nav-panel-foot { display: block; flex: 0 0 auto; width: 100%; margin-top: 26px; }
  .nav-panel-foot .btn, .nav-panel-foot .btn-outline { margin-bottom: 12px; padding: 15px 20px; font-size: 1rem; }
  .nav-panel-foot a::after { content: none; }
  .nav-contact { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
  .nav-contact a { padding: 0; border: none; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.8); justify-content: flex-start; }

  body.nav-open { overflow: hidden; }
  .hero-grid, .grid-2, .grid-3, .grid-4, .catalog-grid, .footer-top, .stats-grid, .feature-list, .group-two, .group-three, .testimonial-grid, .info-strip, .branch-grid, .timeline, .grid-5, .grid-6, .logo-strip, .org-row { grid-template-columns: 1fr; }
  .hero { padding: 36px 0 40px; }
  .hero-card img { height: 260px; }
  .section { padding: 44px 0; }
  .section-title { flex-direction:column; align-items:flex-start; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .logo-strip { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   MEGA MENU
   ============================================================ */
/* Anchor mega panels to the nav row, not the individual trigger, so a panel
   under a left- or right-most item cannot overflow the viewport. */
.nav-links { position: relative; }
.has-mega { position: static; }
.mega-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 620px; max-width: min(1100px, 94vw); background: #fff; color: var(--text);
  border-radius: 16px; box-shadow: 0 28px 70px rgba(12,9,40,.28); padding: 22px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel,
.has-mega.open .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px 18px; }
.mega-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mega-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; color: var(--text); transition: background .15s ease, color .15s ease;
}
.mega-link:hover { background: var(--surface-2); color: var(--purple); }
.mega-link img { width: 34px; height: 34px; object-fit: contain; border-radius: 7px; background: var(--surface-2); flex-shrink: 0; }
.mega-link .mega-ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(74,63,184,.12), rgba(108,92,231,.18)); color: var(--purple); flex-shrink: 0; }
.mega-link .mega-ico svg { width: 17px; height: 17px; }
.mega-head { grid-column: 1/-1; font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); padding: 4px 10px 2px; }
.mega-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mega-foot span { color: var(--muted); font-size: .85rem; }
.nav-caret { display: inline-block; margin-left: 5px; font-size: .62rem; opacity: .75; transition: transform .2s ease; }
.has-mega:hover .nav-caret { transform: rotate(180deg); }

/* ============================================================
   INDUSTRY PAGES
   ============================================================ */
.ind-hero { position: relative; overflow: hidden; padding: 92px 0 78px; color: #fff; }
.ind-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ind-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(20,16,70,.95) 0%, rgba(37,30,110,.88) 45%, rgba(74,63,184,.72) 100%); }
.ind-hero .container { position: relative; z-index: 2; }
.ind-hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); margin: 8px 0 12px; }
.ind-hero p.lede { color: rgba(255,255,255,.88); max-width: 720px; font-size: 1.06rem; margin: 0 0 24px; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(24,20,60,.06);
  transition: transform .25s ease, box-shadow .25s ease; }
.gallery-item:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(24,20,60,.14); }
.gallery-item img { width: 100%; height: 180px; object-fit: contain; background: #fff; padding: 12px; }
.gallery-item .gi-name { padding: 10px 12px 14px; font-size: .88rem; font-weight: 700; text-align: center; border-top: 1px solid var(--border); }

.assist-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.assist-list li { display: flex; gap: 11px; align-items: flex-start; background: #fff; border-radius: 12px;
  padding: 15px 17px; font-weight: 600; font-size: .95rem; box-shadow: 0 4px 14px rgba(24,20,60,.05); }
.assist-list li svg { width: 18px; height: 18px; color: var(--accent-2); flex-shrink: 0; margin-top: 3px; }

.cert-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cert-item { background: #fff; border-radius: 13px; padding: 18px; display: flex; gap: 13px; align-items: flex-start;
  box-shadow: 0 4px 14px rgba(24,20,60,.05); }
.cert-item .cert-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--indigo), var(--purple)); color: #fff; }
.cert-item .cert-ico svg { width: 20px; height: 20px; }
.cert-item strong { display: block; font-size: .96rem; margin-bottom: 3px; }
.cert-item span { color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* ============================================================
   RFQ / UPLOAD
   ============================================================ */
.rfq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rfq-card { background: #fff; border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.rfq-card h3 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.rfq-card h3 svg { width: 22px; height: 22px; color: var(--purple); }
.dropzone { border: 2px dashed rgba(74,63,184,.35); border-radius: 14px; padding: 30px 20px; text-align: center;
  background: var(--surface-2); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.dropzone:hover, .dropzone.drag { border-color: var(--purple); background: rgba(74,63,184,.06); }
.dropzone svg { width: 34px; height: 34px; color: var(--purple); margin-bottom: 8px; }
.dropzone p { margin: 0; color: var(--muted); font-size: .9rem; }
.dropzone strong { display: block; margin-bottom: 4px; color: var(--text); }
.file-list { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.file-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2);
  border-radius: 9px; padding: 9px 12px; font-size: .85rem; font-weight: 600; }
.file-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.turnaround-note { display: flex; gap: 11px; align-items: flex-start; background: rgba(34,193,164,.1);
  border-radius: 12px; padding: 15px 17px; margin-bottom: 22px; }
.turnaround-note svg { width: 20px; height: 20px; color: var(--accent-2); flex-shrink: 0; margin-top: 2px; }
.turnaround-note p { margin: 0; font-size: .92rem; }
.form-success { background: linear-gradient(135deg, var(--navy-deep), var(--purple)); color: #fff;
  border-radius: 16px; padding: 30px; text-align: center; }
.form-success .ref-no { font-family: monospace; font-size: 1.3rem; font-weight: 800; color: var(--accent);
  background: rgba(255,255,255,.1); border-radius: 10px; padding: 10px 18px; display: inline-block; margin: 12px 0; letter-spacing: .06em; }

/* ============================================================
   AI ASSISTANT + FLOATING ACTIONS
   ============================================================ */
.fab-stack { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.fab { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: none; cursor: pointer;
  box-shadow: 0 10px 28px rgba(12,9,40,.3); transition: transform .2s ease; }
.fab:hover { transform: scale(1.08); }
.fab svg { width: 25px; height: 25px; }
.fab-chat { background: linear-gradient(135deg, var(--indigo), var(--purple)); color: #fff; }
.fab-wa { background: #25D366; color: #fff; }

.chat-panel { position: fixed; right: 20px; bottom: 88px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px));
  background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(12,9,40,.35); z-index: 310;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.chat-panel.open { opacity: 1; visibility: visible; transform: none; }
.chat-head { background: linear-gradient(135deg, var(--navy-deep), var(--indigo)); color: #fff; padding: 15px 18px;
  display: flex; align-items: center; gap: 11px; }
.chat-head img { height: 30px; width: auto; }
.chat-head .ch-t { flex: 1; }
.chat-head strong { display: block; font-size: .95rem; }
.chat-head span { font-size: .74rem; color: rgba(255,255,255,.7); }
.chat-head button { background: rgba(255,255,255,.12); border: none; color: #fff; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 11px; }
.msg { max-width: 85%; padding: 11px 14px; border-radius: 14px; font-size: .89rem; line-height: 1.55; }
.msg.bot { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px rgba(24,20,60,.06); }
.msg.user { background: linear-gradient(135deg, var(--indigo), var(--purple)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg a { color: var(--purple); font-weight: 700; text-decoration: underline; }
.msg.user a { color: #fff; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--border); }
.chat-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px;
  font-size: .79rem; font-weight: 700; color: var(--indigo); cursor: pointer; transition: background .15s ease; }
.chat-chip:hover { background: rgba(74,63,184,.1); }
.chat-input { display: flex; gap: 8px; padding: 12px 14px; background: #fff; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 11px 15px; font: inherit; font-size: .88rem; background: var(--surface-2); }
.chat-input button { background: linear-gradient(135deg, var(--indigo), var(--purple)); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.chat-input button svg { width: 18px; height: 18px; }

.mobile-cta { display: none; }

/* ============================================================
   PRODUCT FINDER
   ============================================================ */
.finder { background: #fff; border-radius: 18px; padding: 30px; box-shadow: var(--shadow); max-width: 680px; margin: 0 auto; }
.finder-step { display: none; }
.finder-step.active { display: block; }
.finder-q { font-size: 1.15rem; font-weight: 800; font-family: 'Poppins', sans-serif; margin: 0 0 18px; }
.finder-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.finder-opt { background: var(--surface-2); border: 2px solid transparent; border-radius: 12px; padding: 15px;
  font-weight: 700; font-size: .92rem; cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease; }
.finder-opt:hover { border-color: var(--purple); background: rgba(74,63,184,.06); }
.finder-bar { height: 5px; background: var(--surface-2); border-radius: 999px; margin-bottom: 22px; overflow: hidden; }
.finder-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--accent)); transition: width .3s ease; }

/* ============================================================
   MISC
   ============================================================ */
.subnav { position: sticky; top: var(--header-h, 120px); z-index: 30; background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 11px 0; }
.subnav .container { display: flex; gap: 8px; overflow-x: auto; }
.subnav a { padding: 8px 15px; border-radius: 999px; font-size: .87rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.subnav a:hover, .subnav a.active { background: var(--indigo); color: #fff; }

.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind-card { position: relative; display: block; border-radius: 16px; overflow: hidden; min-height: 178px;
  box-shadow: 0 6px 20px rgba(24,20,60,.08); transition: transform .25s ease, box-shadow .25s ease; }
.ind-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(24,20,60,.18); }
.ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s ease; }
.ind-card:hover img { transform: scale(1.07); }
.ind-card::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,70,.15) 30%, rgba(20,16,70,.9) 100%); }
.ind-card .ic-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 15px 16px; color: #fff; }
.ind-card .ic-body strong { display: block; font-size: 1rem; font-family: 'Poppins', sans-serif; }
.ind-card .ic-body span { display: block; font-size: .78rem; color: rgba(255,255,255,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.why-card { background: #fff; border-radius: 15px; padding: 24px; box-shadow: 0 5px 16px rgba(24,20,60,.05); }
.why-card .w-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--indigo), var(--purple)); color: #fff; }
.why-card .w-ico svg { width: 22px; height: 22px; }
.why-card h3 { margin: 0 0 7px; font-size: 1.03rem; }
.why-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }

.branch-photo { width: 100%; height: 172px; object-fit: cover; border-radius: 12px; margin-bottom: 15px; background: var(--surface-2); }
.branch-badge { display: inline-block; background: linear-gradient(135deg, var(--accent), #ff9d3d); color: var(--navy-deep);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 8px; }
.branch-meta { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; font-size: .9rem; }
.branch-meta a, .branch-meta span { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); }
.branch-meta svg { width: 16px; height: 16px; color: var(--purple); flex-shrink: 0; margin-top: 3px; }
.branch-meta a { font-weight: 700; color: var(--text); }

.map-placeholder { position: relative; height: 172px; border-radius: 12px; margin-bottom: 15px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-deep), var(--purple)); display: grid; place-items: center; color: #fff; }
.map-placeholder svg { width: 40px; height: 40px; opacity: .9; }

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-strip { grid-template-columns: repeat(2, 1fr); }
  .rfq-split { grid-template-columns: 1fr; }
  .mega-panel { min-width: 480px; }
  .mega-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item img { height: 130px; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-card { min-height: 140px; }
  .assist-list, .cert-strip, .finder-opts { grid-template-columns: 1fr; }
  .ind-hero { padding: 54px 0 46px; }
  .mega-panel { display: none; }
  .fab-stack { bottom: 78px; right: 14px; }
  .chat-panel { bottom: 14px; right: 14px; height: min(78vh, 560px); }
  .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 290;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
    padding: 10px 14px; gap: 10px; box-shadow: 0 -6px 22px rgba(24,20,60,.12); }
  .mobile-cta .btn { flex: 1; }
  .mobile-cta .btn-ghost { flex: 0 0 auto; }
  body { padding-bottom: 68px; }
  .subnav { top: 0; }
}

/* ---------- desktop: mega vs mobile accordion visibility ---------- */
.m-acc-wrap { display: none; }
.nav-links .has-mega > a { display: inline-flex; align-items: center; }

@media (max-width: 720px) {
  /* on mobile the mega panels are replaced by tap accordions */
  .nav-links .has-mega { display: none; }
  /* explicit flex order: logo, Home, category accordions, remaining links, CTAs */
  .nav-panel-head { order: 0; }
  .nav-links > a.nav-simple:first-of-type { order: 1; }
  .m-acc-wrap { display: block; width: 100%; order: 2; }
  .nav-links > a.nav-simple { order: 3; }
  .nav-panel-foot { order: 4; }
  .m-acc { border-bottom: 1px solid rgba(255,255,255,.09); }
  .m-acc-t {
    width: 100%; background: none; border: none; color: #fff; text-align: left;
    font: inherit; font-size: 1.08rem; font-weight: 700; padding: 16px 4px;
    display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  }
  .m-acc-t span { color: var(--accent); font-size: .8rem; transition: transform .25s ease; }
  .m-acc.open .m-acc-t span { transform: rotate(180deg); }
  .m-acc-p { display: none; padding: 0 0 12px 10px; flex-direction: column; }
  .m-acc.open .m-acc-p { display: flex; }
  .m-acc-p a {
    padding: 11px 6px !important; font-size: .95rem !important; font-weight: 600 !important;
    color: rgba(255,255,255,.82) !important; border-bottom: none !important;
  }
  .m-acc-p a::after { content: none !important; }
  .m-acc-p .m-acc-all { color: var(--accent) !important; font-weight: 800 !important; }
}

/* ---------- blog cards ---------- */
.blog-post { display: block; padding: 0; overflow: hidden; }
.blog-post img { height: 200px; margin: 0; border-radius: 0; object-fit: cover; }
.blog-post .tag, .blog-post h3, .blog-post p, .blog-post .arrow { margin-left: 20px; margin-right: 20px; }
.blog-post .tag { margin-top: 16px; }
.blog-post h3 { font-size: 1.06rem; line-height: 1.35; }
.blog-post p { margin-bottom: 18px !important; }
.blog-post .arrow { margin-bottom: 20px; }

/* ---------- language toggle ---------- */
.lang-toggle { display: inline-flex; background: rgba(255,255,255,.12); border-radius: 999px; padding: 3px; gap: 2px; }
.lang-toggle button { background: none; border: none; color: rgba(255,255,255,.75); font: inherit; font-size: .78rem;
  font-weight: 800; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.lang-toggle button.active { background: var(--accent); color: var(--navy-deep); }
html[lang="ur"] body { direction: rtl; }
html[lang="ur"] .container, html[lang="ur"] .navbar { direction: rtl; }
html[lang="ur"] .marquee-track, html[lang="ur"] .lm-track { direction: ltr; }

/* ---------- RTL / Urdu ---------- */
html[dir="rtl"] body { direction: rtl; }
/* Latin runs — phone numbers, emails, addresses — must stay LTR inside RTL
   text, otherwise the leading + and digit groups render reversed. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .footer-top li,
html[dir="rtl"] .branch-meta span,
html[dir="rtl"] .ref-no,
html[dir="rtl"] .brand-badge span { unicode-bidi: isolate; }
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] { direction: ltr; display: inline-block; }
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .lm-track { direction: ltr; }
html[dir="rtl"] .finder-opt,
html[dir="rtl"] .subnav .container { text-align: right; }
html[dir="rtl"] .fab-stack { right: auto; left: 20px; }
html[dir="rtl"] .chat-panel { right: auto; left: 20px; }
html[dir="rtl"] .back-to-top { right: auto; left: 24px; }
@media (max-width: 720px) {
  html[dir="rtl"] .fab-stack { left: 14px; right: auto; }
  html[dir="rtl"] .chat-panel { left: 14px; right: auto; }
}

/* ---------- client cards: logo boxed on top, name underneath ---------- */
.client-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.client-card {
  background: #fff; border-radius: 14px; padding: 16px 12px 14px; text-align: center;
  box-shadow: 0 4px 14px rgba(24,20,60,.05);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column; gap: 12px;
}
.client-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(24,20,60,.13); }
.cc-logo {
  height: 76px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border); padding-bottom: 12px;
}
.cc-logo img { max-height: 62px; max-width: 100%; width: auto; object-fit: contain; }
.cc-name {
  font-size: .8rem; font-weight: 700; color: var(--text); line-height: 1.35;
  display: flex; align-items: center; justify-content: center; flex: 1; min-height: 34px;
}
@media (max-width: 1100px) { .client-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 900px)  { .client-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px)  { .client-grid { grid-template-columns: repeat(3, 1fr); }
  .cc-logo { height: 58px; } .cc-logo img { max-height: 46px; } .cc-name { font-size: .72rem; } }
@media (max-width: 420px)  { .client-grid { grid-template-columns: repeat(2, 1fr); } }

/* Latin proper nouns need an LTR run of their own, or trailing punctuation
   ("Corp.") is placed by the surrounding RTL paragraph and jumps to the front. */
html[dir="rtl"] .cc-name,
html[dir="rtl"] .lg-item,
html[dir="rtl"] .logo-chip { direction: ltr; unicode-bidi: isolate; }

/* ---------- branch photos + lightbox ---------- */
.branch-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:-9px 0 14px; }
.bt-thumb { padding:0; border:none; background:var(--surface-2); border-radius:8px; overflow:hidden;
  cursor:pointer; aspect-ratio:1/1; display:grid; place-items:center;
  font-weight:800; font-size:.8rem; color:var(--purple); transition:transform .18s ease; }
.bt-thumb:hover { transform:scale(1.06); }
.bt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bt-more { background:linear-gradient(135deg,var(--indigo),var(--purple)); color:#fff; }

.bt-lightbox { position:fixed; inset:0; z-index:400; background:rgba(10,8,30,.94);
  display:flex; align-items:center; justify-content:center; padding:40px 60px; }
.bt-lightbox[hidden] { display:none; }
.bt-lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; }
.bt-close { position:absolute; top:16px; right:20px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:none; font-size:1.7rem; line-height:1; cursor:pointer; }
.bt-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:none; font-size:1.9rem; line-height:1; cursor:pointer; }
.bt-prev { left:14px; } .bt-next { right:14px; }
.bt-close:hover, .bt-nav:hover { background:rgba(255,255,255,.26); }
.bt-count { position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:.85rem; font-weight:700; }
@media (max-width:720px) {
  .bt-lightbox { padding:56px 12px; }
  .bt-nav { width:38px; height:38px; font-size:1.5rem; }
}

/* ---------- spec tables ---------- */
.table-wrap { overflow-x:auto; border-radius:14px; box-shadow:0 4px 16px rgba(24,20,60,.05); background:#fff; }
.spec-table { width:100%; border-collapse:collapse; min-width:520px; }
.spec-table th, .spec-table td { padding:14px 18px; text-align:left; vertical-align:top; font-size:.92rem; }
.spec-table thead th { background:linear-gradient(135deg,var(--navy-deep),var(--indigo)); color:#fff;
  font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.spec-table tbody tr + tr { border-top:1px solid var(--border); }
.spec-table tbody tr:nth-child(even) { background:var(--surface-2); }
.spec-table tbody td:first-child { font-weight:800; color:var(--text); white-space:nowrap; }
.spec-table tbody tr:target { background:rgba(255,176,32,.16); }
@media (max-width:720px){ .spec-table th, .spec-table td { padding:11px 13px; font-size:.86rem; } }
html[dir="rtl"] .spec-table th, html[dir="rtl"] .spec-table td { text-align:right; }

/* product shots inside a cropping card need a white ground, not a letterbox */
.ind-card img { background:#fff; }