/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root{
  --primary-color:#ff2a40;
  --primary-hover:#e61f35;
  --primary-soft:#fff0f1;
  --primary-line:#ffd4d9;
  --header-text-color:#1a1a1a;
  --header-background:#ffffff;
  --header-border-color:rgba(0,0,0,.08);
  --text-secondary:#5c5a66;
  --text-muted:#95919f;
  --surface-hover:#f5f4f7;
  --surface-line:#efeef2;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --shadow-header:0 4px 16px -4px rgba(20,18,30,.10);
  --shadow-mega:0 20px 50px -14px rgba(20,18,30,.20), 0 4px 16px -6px rgba(20,18,30,.10);
  --header-height:76px;
  --header-height-mobile:64px;
  --container-max:1240px;
  --transition-fast:.15s ease;
  --transition-base:.2s ease;
  --rail-height:360px;
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-height)}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--header-text-color);
  background:#fbfbfc;
  margin:0;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
img{max-width:100%}

/* Accessible visible focus state (kept, not removed) */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--primary-color);
  outline-offset:2px;
  border-radius:6px;
}

.container-custom{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:1.5rem;
  width:100%;
}

/* ==========================================================================
   3. SITE HEADER / NAVBAR
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:var(--header-background);
  border-bottom:1px solid var(--header-border-color);
  transition:box-shadow var(--transition-base), border-color var(--transition-base);
}
.site-header.is-scrolled{
  box-shadow:var(--shadow-header);
}
.main-navbar{
  padding:0;
}
.navbar-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  height:var(--header-height);
}
@media (max-width:1199.98px){
  .navbar-row{height:var(--header-height-mobile)}
}

/* Brand / logo */
.navbar-brand{
  display:flex;
  align-items:center;
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.4px;
  color:var(--header-text-color);
  margin-right:1.5rem;
  white-space:nowrap;
  padding:0;
}
.navbar-brand .brand-accent{color:var(--primary-color)}
.navbar-brand:hover{color:var(--header-text-color)}

/* Desktop primary nav */
.main-nav{
  display:flex;
  align-items:center;
  gap:.15rem;
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav .nav-link{
  display:flex;
  align-items:center;
  gap:5px;
  padding:.55rem .65rem !important;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:.875rem;
  white-space:nowrap;
  color:var(--text-secondary);
  border:0;
  background:transparent;
  transition:background var(--transition-fast), color var(--transition-fast);
}
.main-nav .nav-link:hover{background:var(--surface-hover);color:var(--header-text-color)}
.main-nav .nav-link.active{color:var(--primary-color)}
.main-nav .nav-item.dropdown .nav-link[aria-expanded="true"]{
  background:var(--primary-color);
  color:#fff;
}
.main-nav .dropdown-toggle::after{display:none}
.main-nav .dropdown-toggle .chev-icon{
  font-size:.7rem;
  transition:transform var(--transition-fast);
}
.main-nav .dropdown-toggle[aria-expanded="true"] .chev-icon{transform:rotate(180deg)}

/* Right-side actions (CTA + mobile toggler) */
.header-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-left:auto;
}
.btn-cta{
  background:var(--primary-color);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  padding:.65rem 1.25rem;
  border-radius: 4rem;
  white-space:nowrap;
  border:0;
  box-shadow:0 4px 12px -3px rgba(255,42,64,.45);
  transition:background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn-cta:hover, .btn-cta:focus-visible{
  background:var(--primary-hover);
  color:#fff;
  box-shadow:0 6px 16px -3px rgba(255,42,64,.5);
}
.btn-cta:active{transform:translateY(1px)}

.mobile-toggler{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:var(--radius-sm);
  border:1px solid var(--header-border-color);
  background:#fff;
  color:var(--header-text-color);
  font-size:1.3rem;
  padding:0;
}
.mobile-toggler:hover{background:var(--surface-hover)}

@media (max-width:1199.98px){
  .main-nav, .header-actions .btn-cta{display:none}
  .mobile-toggler{display:flex}
}

/* ==========================================================================
   4. MEGA MENU — INDUSTRIES DROPDOWN
   ========================================================================== */
/* .mega-dropdown intentionally stays position:static (overriding Bootstrap's
   default .dropdown{position:relative}) so the mega panel below is NOT
   positioned relative to the small "Industries" toggle. Instead it inherits
   the next positioned ancestor up the tree — .site-header (position:sticky) —
   so it can center itself against the full header width and never get
   clipped off to one side regardless of where the toggle sits in the nav. */
.mega-dropdown{position:static}
.mega-menu-panel{
  position:absolute;
  top:100%;
  /* left:0 + right:0 + a capped width + auto margins is a more robust way to
     center an absolutely positioned box than left:50%/transform: it never
     depends on resolving a percentage against the containing block, so it
     can't get clipped or mis-centered regardless of where the toggle button
     sits inside the navbar. */
  left:0;
  right:0;
  width:min(1120px, calc(100vw - 2.5rem));
  margin:0 auto;
  padding:0;
  border:0;
  border-bottom:1px solid var(--header-border-color);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-mega);
  background:var(--header-background);
}
.mega-menu-inner{padding:0 1.5rem}
.mega-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px 4px 12px;
  border-bottom:1px solid var(--surface-line);
  font-size:.8rem;
  color:var(--text-muted);
  font-weight:500;
}
.mega-eyebrow strong{color:var(--header-text-color);font-weight:700}
.mega-eyebrow .dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);flex:none}
.mega-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
}

/* scrollable category rail — fixed height so menu never grows */
.mega-rail-wrap{position:relative}
.mega-rail{
  height:var(--rail-height);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:14px 16px 14px 0;
  border-right:1px solid var(--surface-line);
  scrollbar-width:thin;
  scrollbar-color:var(--primary-line) transparent;
}
.mega-rail::-webkit-scrollbar{width:5px}
.mega-rail::-webkit-scrollbar-thumb{background:var(--primary-line);border-radius:99px}
.mega-rail-wrap::after{
  content:"";
  position:absolute;
  left:0;right:16px;bottom:0;height:32px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}
.mega-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:10px 12px 10px 14px;
  border-radius:var(--radius-sm);
  border:0;
  background:transparent;
  font-size:.9rem;
  font-weight:600;
  color:var(--text-secondary);
  text-align:left;
  transition:background var(--transition-fast), color var(--transition-fast);
  margin-bottom:2px;
}
.mega-row .row-arrow{
  font-size:.8rem;
  color:var(--text-muted);
  opacity:0;
  transform:translateX(-3px);
  transition:opacity var(--transition-fast), transform var(--transition-fast);
  flex:none;
}
.mega-row:hover{background:var(--surface-hover);color:var(--header-text-color)}
.mega-row.is-active{
  background:var(--primary-soft);
  color:var(--primary-hover);
  box-shadow:inset 3px 0 0 var(--primary-color);
}
.mega-row.is-active .row-arrow,
.mega-row:hover .row-arrow{opacity:1;transform:none}
.mega-row.is-active .row-arrow{color:var(--primary-color)}

/* right specialization panel */
.mega-panels{
  padding:20px 4px 18px 26px;
  height:var(--rail-height);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--primary-line) transparent;
}
.mega-panel{display:none}
.mega-panel.is-active{display:block;animation:megaFadeIn .16s ease}
@keyframes megaFadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.mega-panel-head{border-left:3px solid var(--primary-color);padding-left:13px;margin-bottom:13px}
.mega-panel-kicker{font-size:.72rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.mega-panel-title{font-size:1.05rem;font-weight:800;letter-spacing:-.2px;margin:0}
.mega-panel-title a:hover{color:var(--primary-hover)}
.mega-spec-list{list-style:none;padding:0;margin:0}
.mega-spec-list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9.5px 10px 9.5px 13px;border-radius:var(--radius-sm);
  font-size:.875rem;font-weight:600;color:var(--text-secondary);
  transition:background var(--transition-fast), color var(--transition-fast);
}
.mega-spec-list a:hover{background:var(--primary-soft);color:var(--primary-hover)}
.mega-spec-list .spec-arrow{font-size:.8rem;color:var(--text-muted);opacity:0;transform:translateX(-4px);transition:opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast)}
.mega-spec-list a:hover .spec-arrow{opacity:1;transform:none;color:var(--primary-color)}
.mega-view-all{
  display:inline-flex;align-items:center;gap:7px;margin:12px 0 2px 13px;
  font-size:.85rem;font-weight:700;color:var(--primary-color);transition:color var(--transition-fast);
}
.mega-view-all:hover{color:var(--primary-hover)}
.mega-view-all i{transition:transform var(--transition-fast)}
.mega-view-all:hover i{transform:translateX(3px)}

/* trending strip */
.mega-trending{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:13px 4px 18px;border-top:1px solid var(--surface-line);
}
.mega-trending .t-label{font-size:.78rem;font-weight:600;color:var(--text-muted);margin-right:2px}
.mega-trending a{
  font-size:.8rem;font-weight:600;color:var(--text-secondary);
  border:1px solid var(--header-border-color);border-radius:999px;padding:6px 14px;
  transition:border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.mega-trending a:hover{border-color:var(--primary-line);background:var(--primary-soft);color:var(--primary-hover)}

@media (max-width:1200px){
  .mega-grid{grid-template-columns:minmax(0,1fr) 320px}
}

/* ==========================================================================
   4b. SIMPLE DROPDOWNS — Services / Company
   ========================================================================== */
.simple-dropdown-menu{
  border:0;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-mega);
  padding:.5rem;
  min-width:200px;
}
.simple-dropdown-menu .dropdown-item{
  border-radius:var(--radius-sm);
  padding:.55rem .75rem;
  font-size:.875rem;
  font-weight:600;
  color:var(--text-secondary);
  transition:background var(--transition-fast), color var(--transition-fast);
}
.simple-dropdown-menu .dropdown-item:hover,
.simple-dropdown-menu .dropdown-item:focus{
  background:var(--primary-soft);
  color:var(--primary-hover);
}

/* ==========================================================================
   5. MOBILE OFFCANVAS MENU
   ========================================================================== */
.mobile-offcanvas{--bs-offcanvas-width:min(360px, 88vw)}
.mobile-offcanvas .offcanvas-header{
  border-bottom:1px solid var(--surface-line);
  padding:1rem 1.25rem;
}
.mobile-offcanvas .offcanvas-body{
  padding:0;
  display:flex;
  flex-direction:column;
}
.mobile-nav{
  list-style:none;
  margin:0;
  padding:.5rem 1.25rem 1rem;
  flex:1 1 auto;
  overflow-y:auto;
}
.mobile-nav .nav-link,
.mobile-industries-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:14px 4px;
  font-weight:700;
  font-size:1rem;
  color:var(--header-text-color);
  border:0;
  border-bottom:1px solid var(--surface-line);
  background:transparent;
  text-align:left;
  border-radius:0;
}
.mobile-nav .nav-link.active{color:var(--primary-color)}
.mobile-industries-toggle .chev-icon{transition:transform var(--transition-fast);color:var(--text-muted)}
.mobile-industries-toggle[aria-expanded="true"] .chev-icon{transform:rotate(180deg)}

.mobile-industries-panel{padding:2px 0 8px 0}
.mobile-industries-hint{
  font-size:.72rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--text-muted);padding:12px 4px 6px;
}
.mobile-industries-accordion .accordion-item{border:0;border-bottom:1px solid var(--surface-line);background:transparent}
.mobile-industries-accordion .accordion-button{
  padding:12px 4px;font-weight:600;font-size:.9rem;color:var(--header-text-color);
  background:transparent;box-shadow:none;
}
.mobile-industries-accordion .accordion-button:not(.collapsed){color:var(--primary-color);background:transparent}
.mobile-industries-accordion .accordion-button:focus{box-shadow:none;outline:2px solid var(--primary-color);outline-offset:2px}
.mobile-industries-accordion .accordion-button::after{
  width:1rem;height:1rem;background-size:1rem;flex:none;
}
.mobile-industries-accordion .accordion-body{padding:2px 4px 12px 12px}
.mobile-spec-list{list-style:none;margin:0;padding:0}
.mobile-spec-list li a{
  display:block;padding:9px 6px;font-size:.87rem;font-weight:500;color:var(--text-secondary);
  border-radius:var(--radius-sm);
}
.mobile-spec-list li a:active,
.mobile-spec-list li a:hover{color:var(--primary-hover);background:var(--surface-hover)}
.mobile-view-all{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--primary-color) !important;font-weight:700 !important;
  padding:9px 6px;font-size:.87rem;
}
.mobile-view-all-main{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:10px 4px 4px;padding:11px;border:1px solid var(--primary-line);
  border-radius:var(--radius-sm);color:var(--primary-color);font-weight:700;font-size:.85rem;
}
.mobile-view-all-main:hover{background:var(--primary-soft)}

.mobile-cta-wrap{
  padding:1rem 1.25rem 1.25rem;
  border-top:1px solid var(--surface-line);
  flex:0 0 auto;
}
.mobile-cta-wrap .btn-cta{
  display:block;width:100%;text-align:center;padding:.85rem;font-size:.95rem;
}

/* ==========================================================================
   6. DEMO PAGE CONTENT (for standalone preview only)
   ========================================================================== */
.demo-content{max-width:var(--container-max);margin:0 auto;padding:70px 1.5rem}
.demo-hint{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-muted);
  font-weight:500;border:1px solid var(--header-border-color);border-radius:999px;padding:6px 14px 6px 8px;
}
.demo-hint .kbd{border:1px solid var(--header-border-color);background:#fff;border-radius:6px;padding:2px 8px;font-weight:700;color:var(--text-secondary);font-size:.72rem}
.demo-content h1{margin-top:18px;font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;letter-spacing:-1px;max-width:680px;line-height:1.15}
.demo-content h1 em{font-style:normal;color:var(--primary-color)}
.demo-content p{margin-top:14px;color:var(--text-secondary);max-width:560px;font-size:1rem;line-height:1.65}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}