/* ==========================================================================
   BlueShield — Structural layout: topbar, header, mega menu, drawer,
   footer, CTA band.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Utility topbar                                                         */
/* ---------------------------------------------------------------------- */
.topbar{
  height:var(--topbar-h);
  background:var(--ink-800);
  border-bottom:1px solid var(--line-soft);
  display:flex;
  align-items:center;
}
.topbar .container-wide{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
.topbar-announce{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mid);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.topbar-announce span{ display:inline-block; transition:opacity var(--dur) var(--ease-out); }
.topbar-hotline{
  display:flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-hi);
  white-space:nowrap;
}
.topbar-hotline .pulse-red{
  width:7px; height:7px; border-radius:50%; background:var(--sev-critical); flex:none;
  animation:pulse-red 1.8s var(--ease-in-out) infinite;
}
@keyframes pulse-red{
  0%{ box-shadow:0 0 0 0 rgba(255,77,94,.55); }
  70%{ box-shadow:0 0 0 7px rgba(255,77,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,94,0); }
}
.topbar-hotline a{ color:var(--text-hi); font-weight:600; opacity:.85; cursor:default; }
.topbar-hotline a:hover{ opacity:1; }
@media (max-width:992px){ .topbar{ display:none; } }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.site-header.is-scrolled{
  background:rgba(5,11,24,.84);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header .container-wide{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); height:100%; }

.brand{ display:flex; align-items:center; gap:var(--s-2); flex:none; }
/* The client-supplied logo is a full-colour lockup designed for a light
   background (its wordmark uses a dark navy that all but disappears on
   the dark header/drawer/footer), so it sits on its own white plate
   here rather than directly on --ink-900 — keeps it legible and reads
   as a deliberate badge rather than a colour clash. */
.brand-mark{
  display:inline-flex; align-items:center;
  background:#fff;
  padding:8px 16px;
  border-radius:var(--r-md);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px -6px rgba(0,0,0,.5);
  transition:box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.brand:hover .brand-mark{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 20px -6px rgba(0,0,0,.55); transform:translateY(-1px); }
.brand img,.brand svg{ height:44px; width:auto; display:block; }
.drawer-head .brand-mark,.footer-brand .brand-mark{ padding:7px 14px; }
.drawer-head .brand img,.footer-brand .brand img{ height:34px; }

.main-nav{ display:none; }
@media (min-width:1100px){
  .main-nav{ display:flex; align-items:center; gap:var(--s-6); }
}
/* Intentionally NOT position:relative — .mega-panel is centered on the
   full-width .site-header (which is already positioned via sticky), not
   on whichever individual nav item triggered it. Making nav-item a
   positioning context here was the bug: a 1440px-wide panel centred on
   a nav item near the left edge ran off both sides of the viewport on
   any screen under ~1600px. */
.nav-item{ }
.nav-link{
  display:flex; align-items:center; gap:6px;
  font-size:.9375rem; font-weight:500; color:var(--text-hi);
  padding:var(--s-2) 0;
  position:relative;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease-out);
}
.nav-link:hover::after,.nav-link[aria-current="page"]::after,.nav-item.is-open .nav-link::after{ transform:scaleX(1); }
.nav-link .chev{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease-out); flex:none; }
.nav-item.is-open .nav-link .chev{ transform:rotate(180deg); }

.header-ctas{ display:flex; align-items:center; gap:var(--s-3); }
.header-ctas .btn-ghost{ display:none; }
@media (min-width:1100px){ .header-ctas .btn-ghost{ display:inline-flex; } }

.hamburger{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm);
  flex:none;
}
@media (min-width:1100px){ .hamburger{ display:none; } }
.hamburger svg{ width:20px; height:20px; }

/* ---------------------------------------------------------------------- */
/* Mega menu                                                               */
/* ---------------------------------------------------------------------- */
.mega-overlay{
  position:fixed; inset:0; top:calc(var(--header-h) + var(--topbar-h));
  background:rgba(5,11,24,.6);
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease-out);
  z-index:850;
}
.mega-overlay.is-visible{ opacity:1; visibility:visible; }
.site-header.is-scrolled ~ .mega-overlay,
body:not(.at-top) .mega-overlay{ top:var(--header-h); }

.mega-panel{
  position:absolute; top:100%; left:50%; transform:translate(-50%,-10px);
  width:min(var(--container-wide), calc(100vw - 48px));
  background:rgba(8,18,38,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 280ms var(--ease-out), transform 280ms var(--ease-out), visibility 280ms;
  z-index:860;
  max-height:calc(100svh - var(--header-h) - var(--topbar-h) - 24px);
  overflow-y:auto;
}
.nav-item.is-open .mega-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.mega-panel--narrow{ width:min(640px, calc(100vw - 48px)); border-radius:var(--r-lg); }
.mega-grid--resources{ grid-template-columns:repeat(3, 1fr) 280px; }
.mega-grid--company{ grid-template-columns:1fr 1fr; }
.mega-col--advisory-rail{ background:var(--ink-700); }
.advisory-rail-item{ display:block; padding:var(--s-4) 0; border-bottom:1px solid var(--line-soft); }
.advisory-rail-item:last-of-type{ border-bottom:0; }
.advisory-rail-item .meta{ display:flex; align-items:center; gap:var(--s-2); margin-bottom:6px; }
.advisory-rail-item .meta .date{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-low); }
.advisory-rail-item p{ font-size:.8125rem; color:var(--text-mid); line-height:1.4; }
.mega-company-card{ grid-column:1 / -1; background:var(--ink-700); border-radius:var(--r-md); padding:var(--s-5); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-top:var(--s-2); flex-wrap:wrap; }

.mega-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr) 300px;
  gap:0;
}
.mega-col{ padding:var(--s-6) var(--s-5); border-right:1px solid var(--line-soft); }
.mega-col:last-child{ border-right:0; }
.mega-col .mono{ margin-bottom:var(--s-4); color:var(--text-low); display:flex; align-items:center; gap:var(--s-2); }
.mega-col .mono .dot{ width:5px; height:5px; border-radius:50%; background:var(--signal); animation:pulse-dot 2.2s var(--ease-in-out) infinite; }

.mega-row{
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-3); margin-inline:calc(var(--s-3) * -1);
  border-radius:var(--r-md);
  transition:background var(--dur-fast) var(--ease-out);
}
.mega-row:hover,.mega-row:focus-visible{ background:var(--ink-600); }
.mega-row .icon-tile{
  width:36px; height:36px; border-radius:var(--r-sm); background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:background var(--dur-fast) var(--ease-out);
}
.mega-row .icon-tile svg{ width:18px; height:18px; color:var(--accent-400); transition:color var(--dur-fast) var(--ease-out); }
.mega-row:hover .icon-tile{ background:var(--grad-accent); }
.mega-row:hover .icon-tile svg{ color:#fff; }
.mega-row-text strong{ display:block; font-size:.9375rem; color:var(--text-hi); font-weight:600; margin-bottom:2px; }
.mega-row-text span{ display:block; font-size:.8125rem; color:var(--text-mid); line-height:1.4; }
.mega-row .row-chev{ margin-left:auto; width:16px; height:16px; flex:none; opacity:0; transform:translateX(-4px); transition:all var(--dur-fast) var(--ease-out); color:var(--signal); }
.mega-row:hover .row-chev{ opacity:1; transform:translateX(0); }

.mega-featured{ background:var(--ink-700); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-5); }
.mega-featured-card{
  border-radius:var(--r-md); overflow:hidden;
  background:linear-gradient(var(--ink-700),var(--ink-700)) padding-box, var(--grad-accent) border-box;
  border:1px solid transparent;
}
.mega-featured-card .thumb{ aspect-ratio:16/10; background:var(--ink-600); position:relative; overflow:hidden; }
.mega-featured-card .thumb-inner{ position:absolute; inset:0; }
.mega-featured-card .body{ padding:var(--s-4); }
.mega-featured-card .body h5{ font-family:var(--font-display); font-size:1rem; color:var(--text-hi); font-weight:700; margin-bottom:4px; }
.mega-featured-card .body p{ font-size:.8125rem; color:var(--text-mid); margin-bottom:var(--s-3); }
.mega-build-list a{ display:flex; align-items:center; gap:6px; font-size:.875rem; color:var(--text); padding:6px 0; }
.mega-build-list a:hover{ color:var(--accent-400); }

.mega-strip{
  border-top:1px solid var(--line-soft);
  padding:var(--s-4) var(--s-6);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s-4);
}
.mega-strip-proof{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; }
.mega-strip-proof span{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); }
.mega-strip-proof .dot{ width:5px; height:5px; border-radius:50%; background:var(--signal); }

@media (max-width:1099px){ .mega-panel,.mega-overlay{ display:none; } }

/* ---------------------------------------------------------------------- */
/* Mobile drawer                                                          */
/* ---------------------------------------------------------------------- */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(5,11,24,.7);
  opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease-out);
  z-index:990;
}
.drawer-overlay.is-open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(400px, 92vw);
  background:rgba(5,11,24,.98);
  z-index:995;
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);
  display:flex; flex-direction:column;
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.is-open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line-soft); }
.drawer-close{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm); }
.drawer-hotline{
  margin:var(--s-4) var(--s-5); padding:var(--s-4);
  background:var(--sev-critical-soft); border:1px solid rgba(255,77,94,.35); border-radius:var(--r-md);
  display:flex; align-items:center; gap:var(--s-3);
}
.drawer-hotline strong{ display:block; color:var(--text-hi); font-size:.875rem; }
.drawer-hotline span{ display:block; font-family:var(--font-mono); font-size:.8125rem; color:var(--text-mid); }
.drawer-body{ padding:0 var(--s-5); flex:1; }
.drawer-acc-item{ border-bottom:1px solid var(--line-soft); }
.drawer-acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) 0; font-weight:600; color:var(--text-hi); font-size:.9375rem;
}
.drawer-acc-trigger .chev{ width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-out); }
.drawer-acc-item.is-open .drawer-acc-trigger .chev{ transform:rotate(180deg); }
.drawer-acc-panel{ overflow:hidden; height:0; transition:height var(--dur) var(--ease-out); }
.drawer-acc-panel-inner{ padding-bottom:var(--s-4); display:flex; flex-direction:column; gap:2px; }
.drawer-acc-panel-inner a{
  display:block; padding:var(--s-2) 0 var(--s-2) var(--s-4); border-left:1px solid var(--line);
  font-size:.875rem; color:var(--text-mid);
}
.drawer-acc-panel-inner a:hover{ color:var(--accent-400); border-left-color:var(--accent-500); }
.drawer-plain-link{ display:block; padding:var(--s-4) 0; font-weight:600; color:var(--text-hi); font-size:.9375rem; border-bottom:1px solid var(--line-soft); }
.drawer-ctas{ padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); }
.drawer-ctas .btn-primary,.drawer-ctas .btn-ghost{ width:100%; justify-content:center; }
.drawer-foot{ padding:var(--s-5); border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:var(--s-2); }
.drawer-foot a{ font-size:.8125rem; color:var(--text-mid); }
.drawer-foot .socials{ display:flex; gap:var(--s-3); margin-top:var(--s-2); }
@media (min-width:1100px){ .drawer,.drawer-overlay{ display:none; } }

/* ---------------------------------------------------------------------- */
/* Pre-footer CTA band                                                    */
/* ---------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--ink-800);
  padding-block:var(--section-y);
  text-align:center;
}
.cta-band .overlay-glow{ background:radial-gradient(700px 340px at 50% 120%, rgba(30,107,255,.35), transparent 70%); }
.cta-band-inner{ position:relative; z-index:1; max-width:680px; margin-inline:auto; }
.cta-band .eyebrow{ justify-content:center; }
.cta-band h2{ margin-bottom:var(--s-4); }
.cta-band p{ margin-inline:auto; margin-bottom:var(--s-6); }
.cta-band-actions{ display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s-7); }
.cta-trust-strip{
  display:flex; align-items:center; justify-content:center; gap:var(--s-6); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid);
}
.cta-trust-strip span{ display:flex; align-items:center; gap:6px; }
.cta-trust-strip .dot{ width:5px; height:5px; border-radius:50%; background:var(--signal); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer{
  background:var(--ink-900);
  border-top:1px solid transparent;
  background-image:linear-gradient(var(--ink-900),var(--ink-900)), var(--grad-accent);
  background-origin:border-box; background-clip:padding-box, border-box;
  border-top:1px solid transparent;
  padding-top:var(--s-9);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:var(--s-6);
  padding-bottom:var(--s-8);
}
.footer-col h5{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-low); margin-bottom:var(--s-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:var(--s-3); }
.footer-col a{ font-size:.875rem; color:var(--text-mid); }
.footer-col a:hover{ color:var(--accent-400); }
.footer-brand p{ font-size:.875rem; color:var(--text-mid); margin-block:var(--s-4); max-width:32ch; }
.footer-brand .brand{ margin-bottom:var(--s-2); }
.footer-location{ display:flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-mid); margin-bottom:var(--s-4); }
.footer-location svg{ width:15px; height:15px; flex:none; color:var(--signal); }
.footer-phones{ display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-4); }
.footer-phones a{ font-family:var(--font-mono); font-size:.8125rem; color:var(--text-hi); }
.footer-socials{ display:flex; gap:var(--s-3); }
.footer-socials a{
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); transition:all var(--dur-fast) var(--ease-out);
}
.footer-socials a svg{ width:16px; height:16px; }
.footer-socials a:hover{ border-color:var(--accent-500); background:var(--accent-soft); color:var(--text-hi); }

.drawer-foot .socials a{
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-mid); transition:all var(--dur-fast) var(--ease-out);
}
.drawer-foot .socials a svg{ width:16px; height:16px; }
.drawer-foot .socials a:hover{ border-color:var(--accent-500); background:var(--accent-soft); color:var(--text-hi); }
.footer-get-started{ display:flex; flex-direction:column; gap:var(--s-3); }
.footer-get-started .btn-primary,.footer-get-started .btn-ghost{ width:100%; justify-content:center; }
.footer-bottom{
  border-top:1px solid var(--line-soft);
  padding-block:var(--s-5);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3);
}
.footer-bottom p{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-low); }
.footer-bottom-links{ display:flex; gap:var(--s-5); }
.footer-bottom-links a{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-low); }
.footer-bottom-links a:hover{ color:var(--accent-400); }

@media (max-width:992px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr; gap:var(--s-7); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------------------------------- */
/* Inner-page hero + breadcrumb                                          */
/* ---------------------------------------------------------------------- */
.breadcrumb{
  display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-low); margin-bottom:var(--s-6);
}
.breadcrumb a{ color:var(--text-low); }
.breadcrumb a:hover{ color:var(--accent-400); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--text-mid); }

.page-hero{
  position:relative; overflow:hidden;
  background:var(--ink-800);
  min-height:62vh;
  display:flex; align-items:center;
  padding-block:calc(var(--s-9) + var(--topbar-h) + var(--header-h)) var(--s-9);
  margin-top:calc((var(--topbar-h) + var(--header-h)) * -1);
}
.page-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-8); align-items:center; }
.page-hero-actions{ display:flex; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-6); }
.page-hero-visual{ aspect-ratio:5/4; border-radius:var(--r-xl); overflow:hidden; position:relative; border:1px solid var(--line); background:var(--ink-700); }
@media (max-width:992px){
  .page-hero{ padding-top:calc(var(--s-8) + var(--topbar-h) + var(--header-h)); }
  .page-hero-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .page-hero-visual{ order:-1; aspect-ratio:16/10; }
}

/* ---------------------------------------------------------------------- */
/* Sticky sub-nav (service pages)                                         */
/* ---------------------------------------------------------------------- */
.sub-nav{
  position:sticky; top:var(--header-h); z-index:400;
  background:rgba(5,11,24,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition:transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.sub-nav.is-hidden{ transform:translateY(-100%); }
.sub-nav-list{ display:flex; gap:var(--s-6); overflow-x:auto; padding-block:var(--s-3); scrollbar-width:none; }
.sub-nav-list::-webkit-scrollbar{ display:none; }
.sub-nav-list a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-low); white-space:nowrap; padding-bottom:6px; border-bottom:2px solid transparent;
}
.sub-nav-list a.is-active,.sub-nav-list a:hover{ color:var(--text-hi); border-bottom-color:var(--accent-500); }

/* Page transition veil */
.page-veil{
  position:fixed; inset:0; background:var(--ink-900); z-index:9998;
  opacity:0; pointer-events:none;
}