:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0b1220;
  --muted:#445069;
  --line:rgba(11,18,32,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --radius: 18px;
  --header-bg:#070a12;
  --header-text:#eef3ff;
  --header-muted:rgba(238,243,255,.78);
  --header-line:rgba(238,243,255,.14);
  --accent:#2aa8ff;
  --header-h:78px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(42,168,255,.14), transparent 60%),
    radial-gradient(900px 600px at 90% 5%, rgba(108,92,231,.12), transparent 55%),
    radial-gradient(900px 600px at 40% 110%, rgba(42,168,255,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:0 18px}

/* Sticky black header */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(7,10,18,.92);
  color:var(--header-text);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--header-line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{height:72px; width:auto; max-width:620px; display:block; object-fit:contain}
.brand-text{font-weight:900; letter-spacing:.02em}
.nav{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  text-decoration:none;
  color:var(--header-muted);
  font-weight:800;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  white-space:nowrap;
}
.nav a:hover{color:var(--header-text)}
.nav a.active{
  color:var(--header-text);
  background: rgba(238,243,255,.10);
  border:1px solid var(--header-line);
}
.header-spacer{height:0 !important; display:none !important;}
@media (max-width:920px){
  .logo{height:82px; width:auto; max-width:620px; display:block; object-fit:contain; transform:scale(1.15); transform-origin:left center}
  .header-spacer{height:110px}
  .nav{gap:8px}
  .nav a{font-size:.95rem; padding:8px 9px}
}

/* Sections */
.hero{padding:28px 0 10px}
.kicker{color:var(--muted); font-weight:800; letter-spacing:.02em}
h1{margin:8px 0 0; font-size: clamp(28px, 3.2vw, 42px); line-height:1.15}
.lead{color:var(--muted); font-size:1.1rem; margin:10px 0 0}
.section{padding: 18px 0}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.grid{display:grid; grid-template-columns: 1fr; gap:16px}
@media (min-width: 920px){ .grid{grid-template-columns: 1fr 1fr} }
.btn{
  display:inline-block;
  text-decoration:none;
  font-weight:900;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(42,168,255,.55);
  background: rgba(42,168,255,.10);
}
.btn:hover{box-shadow:0 0 0 4px rgba(42,168,255,.12)}
.muted{color:var(--muted)}

/* Lists */
.bullets{margin:10px 0 0; padding-left:22px}
.bullets li{margin:8px 0}

.footer{
  border-top:1px solid var(--line);
  padding:22px 0;
  margin-top:18px;
  background: rgba(255,255,255,.65);
}
.footer-inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* Executive Summary vertical tabs (Home) */
.exec-tabs{padding:18px}
.exec-layout{
  display:grid;
  grid-template-columns: max-content 1fr;
  gap:14px;
  margin-top:14px;
  align-items:start;
}
.vtablist{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(255,255,255,.75);
}
.vtab-btn{
  appearance:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  padding:10px 10px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
  line-height:1.15;
  font-size:.95rem;
}
.vtab-btn[aria-selected="true"]{
  border-color: rgba(42,168,255,.55);
  box-shadow: 0 0 0 4px rgba(42,168,255,.14);
}
.vtabcontent{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(255,255,255,.75);
}
.panel-title{margin:0 0 10px}
@media (max-width: 920px){
  .exec-layout{grid-template-columns: 1fr; }
  .vtablist{flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .vtab-btn{white-space:nowrap}
}

.section-tight{padding-top:10px}

/* Prevent vertical tab overlap */
.vtab-btn{
  white-space:nowrap;
  overflow:hidden;
  
}

.exec-tabs{
  border:1px solid var(--line);
}
.exec-layout{margin-top:0}
.vtabcontent{margin-top:0}

/* Ensure vertical tab text fits on one line */
.vtab-btn{
  font-size: .88rem;
  padding: 9px 10px;
}

/* Auto-width vertical tabs based on text length */
.vtablist{
  width: max-content;
}
.vtab-btn{
  width: max-content;
  max-width: none;
  padding: 9px 12px;
}

/* Accordion (Training page) */
.acc{padding:8px}
.acc-item{
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(255,255,255,.88);
  margin:10px 0;
  overflow:hidden;
}
.acc-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  font-weight:900;
  color: var(--text);
}
.acc-summary::-webkit-details-marker{display:none}
.acc-title{display:block}
.acc-icon{
  width:22px; height:22px;
  border-radius:999px;
  border:1px solid var(--line);
  position:relative;
  flex:0 0 auto;
  background: rgba(255,255,255,.9);
}
.acc-icon:before, .acc-icon:after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:2px;
  background: var(--muted);
  transform:translate(-50%,-50%);
}
.acc-icon:after{
  width:2px; height:12px;
}
.acc-item[open] 
.acc-content{
  padding:0 14px 14px 14px;
}
.acc-content p{margin-top:0}

/* Tight section spacing (Training) */
.section-tight{padding-top:10px}

/* Training accordion container border emphasis */
.acc{
  border:1px solid var(--line);
  padding:8px;
}

/* Mission page container border emphasis */
.exec-tabs{
  border:1px solid var(--line);
}

/* Courses accordion nesting */
.acc-courses{border:1px solid var(--line); padding:8px}
.acc-nested{padding-top:6px}
.acc-parent{background: rgba(255,255,255,.92)}
.acc-child{margin:10px 0; background: rgba(255,255,255,.88)}
.acc-child .acc-summary{font-weight:850}

/* Training nested accordion */
.acc-training{border:1px solid var(--line); padding:8px}
.acc-training .acc-parent{background: rgba(255,255,255,.92)}
.acc-training .acc-child{margin:10px 0; background: rgba(255,255,255,.88)}

/* Consulting accordion */
.acc-consulting{border:1px solid var(--line); padding:8px}

/* Dropdown menu for Training */
.has-sub{position:relative}
.has-sub .sub-menu{
  display:none; position:absolute; left:0; top:100%;
  background:#000; border:1px solid var(--line);
  min-width:220px; padding:6px 0; z-index:1000;
}
.has-sub:hover .sub-menu{display:block}
.sub-menu li{list-style:none}
.sub-menu a{display:block; padding:10px 14px; color:#fff; text-decoration:none}
.sub-menu a:hover{background:#111}

/* --- Nav alignment fix --- */
.nav{
  display:flex;
  align-items:center; /* ensures all menu items align */
}

.nav > a,
.nav-item{
  display:flex;
  align-items:center;
}

.nav-item > a{
  line-height:1;
}

/* Subtle CTA for Bookings in nav */
.nav a.cta{
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(238,243,255,.22);
  background: rgba(238,243,255,.10);
  color:#eef3ff !important;
}
.nav a.cta:hover{
  background: rgba(238,243,255,.16);
  border:1px solid rgba(238,243,255,.30);
}

/* --- Bookings nav CTA: distinct from active tab --- */
.nav a.cta{
  position: relative;
}

/* Only style CTA when it is NOT the active page */
.nav a.cta:not(.active){
  background: transparent !important;          /* avoid 'pressed' look */
  border: 1px solid rgba(238,243,255,.35);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Subtle visual cue that it's a call-to-action, not an active tab */
.nav a.cta:not(.active)::after{
  content: "•";
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  opacity:.65;
  font-size: 18px;
  line-height: 1;
}

/* Hover: clearer CTA without becoming active-looking */
.nav a.cta:not(.active):hover{
  background: rgba(238,243,255,.06) !important;
  border-color: rgba(238,243,255,.55);
}

/* When Bookings IS active, it should look exactly like other active menu items */
.nav a.cta.active{
  padding: inherit;
}

/* --- Training parent active state (ensure visible even when submenu selected) --- */
.has-sub.active > a{
  color: #eef3ff;
  background: rgba(238,243,255,.10);
  border:1px solid rgba(238,243,255,.14);
}

/* --- Bookings CTA: keep size when active; dot only when not active --- */
.nav a.cta{
  padding:10px 14px;            /* keep consistent size always */
  border-radius:14px;
}
.nav a.cta.active::after{content:"";}  /* remove dot when active */

/* --- Nav: Training + Courses as top-level (remove dropdown remnants) --- */
.nav-item.has-sub{display:none !important;} /* safety: hide any leftover dropdown container */

/* --- Bookings CTA: stable size + normal active highlight --- */
.nav a.cta{
  position: relative;
  padding:10px 14px;
  border-radius:14px;
}

.nav a.cta:not(.active){
  background: transparent !important;
  border: 1px solid rgba(238,243,255,.35);
}

.nav a.cta:not(.active)::after{
  content: "•";
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  opacity:.65;
  font-size:18px;
  line-height:1;
}

.nav a.cta:not(.active):hover{
  background: rgba(238,243,255,.06) !important;
  border-color: rgba(238,243,255,.55);
}

.nav a.cta.active{
  background: rgba(238,243,255,.10) !important;
  border:1px solid rgba(238,243,255,.14);
}

.nav a.cta.active::after{content:"";}

/* --- FINAL: Bookings CTA should never resize on active --- */
.nav a.cta,
.nav a.cta.active{
  padding:10px 14px !important;   /* lock size */
  border-radius:14px !important;
}

/* Active state: match normal active highlight but keep CTA sizing */
.nav a.cta.active{
  background: rgba(238,243,255,.10) !important;
  border: 1px solid rgba(238,243,255,.14) !important;
  color: #eef3ff !important;
}

/* --- Sticky header height control --- */
.header{
  height: var(--header-h);
}

/* --- Global content offset directly under sticky header --- */

/* --- Global offset: content sits directly under sticky header --- */
.header{height: var(--header-h);}
/* Reduce vertical gap so cards start near the header */
.section{padding:18px 0;}
.section-tight{padding-top:0;}

/* Ensure nav text colors are correct */
.nav a{color: var(--header-muted);}
.nav a.active{color: var(--header-text);}
.nav a:hover{color: var(--header-text);}

/* --- Precise top buffer under sticky header --- */


/* --- Force visible 10px gap under sticky header --- */

/* --- One-line visual buffer under sticky header --- */
main{padding-top: calc(var(--header-h) + 44px) !important;}

/* --- Align logo with main content left edge --- */
.header .container{
  padding-left: 0;
}

.container{
  padding-left: 0;
  padding-right: 0;
}

/* Keep inner content centered with max width */
.container > *{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* Logo alignment */
.brand{
  margin-left: 0;
}

/* --- Slightly larger logo without changing header height --- */
.header{
  overflow: hidden; /* prevent header growth */
}

.logo{
  height: 82px;      /* was ~72px, slight increase */
  max-height: 100%;
  width: auto;
}

/* --- Logo: max readability without increasing sticky header height --- */
.header{
  height: var(--header-h);
  overflow: visible; /* allow logo to extend without resizing header */
}

.logo{
  height: 90px;               /* larger for tagline readability */
  width: auto;
  max-height: none;
  padding: 6px 10px;          /* keep border visible */
  border: 1px solid var(--header-line);
  border-radius: 14px;
  background: transparent;
  object-fit: contain;
  display: block;
}

/* Keep header row stable */
.header .container{
  align-items: center;
}

/* --- Make logo fill its frame fully --- */
.logo{
  height: 90px;
  width: auto;
  padding: 0;                 /* remove inner padding */
  border: 1px solid var(--header-line);
  border-radius: 14px;
  object-fit: contain;
}

/* Pricing table */
.pricing-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.pricing-table th,
.pricing-table td{
  text-align:left;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.pricing-table thead th{
  font-weight:900;
}
@media (max-width: 720px){
  .pricing-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* Ensure no stray markers or underline dots in menu */
nav ul, nav li { list-style: none; }
nav a { text-decoration: none; }


/* FIX: remove dot/bullet indicator under/near Bookings (and any CTA nav item) */
.nav a.cta::after,
.nav a.cta::before{
  content: none !important;
  display: none !important;
}


/* Hide native disclosure marker so only the custom + icon is shown (prevents double icons, esp. on nested accordions) */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::marker {
  content: "";
}


/* Show + by default (both bars). When open, hide the vertical bar to form a minus. */
details[open] > summary 


/* Ensure the vertical bar is visible by default so collapsed items show a + */
.acc-icon:after{
  display: block;
}


/* When an accordion item is open, hide the vertical bar to form a minus */


/* When a specific <details> is open, hide ONLY its own summary's vertical bar (so + becomes -).
   Using direct-child selector prevents nested closed items inheriting the minus state. */
details[open] > summary .acc-icon:after{
  display: none;
}


/* FIX: Nested How We Work accordions show ONE + when closed and ONE – only when open (no duplicate icons) */
.acc-how-we-work-nested .acc-icon:after{
  display: block; /* vertical bar visible => + */
}
.acc-how-we-work-nested details[open] > summary .acc-icon:after{
  display: none;  /* hide vertical bar => – */
}


/* Executive takeaway callout */
.exec-callout {
  background: #f4f6f8;
  padding: 16px 18px;
  margin: 20px 0;
  border-left: 4px solid #cbd5e1;
  color: #1f2933;
  font-size: 0.95rem;
}


/* Mobile menu toggle (desktop unaffected) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--header-line);
  background: rgba(238,243,255,.06);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background: var(--header-text);
  border-radius:2px;
  margin:3px 0;
}
@media (max-width:920px){
  .nav-toggle{display:inline-flex}
  .topbar-inner{position:relative}
  .nav{
    display:none;
    position:fixed;
    left:14px;
    right:14px;
    top:96px;
    flex-direction:column;
    gap:10px;
    padding:14px;
    background: rgba(7,10,18,.98);
    border:1px solid var(--header-line);
    border-radius:16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    z-index:1100;
  }
  .nav.is-open{display:flex}
  .nav a{justify-content:flex-start}
}


/* Mobile footer tagline – keep on one line */
@media (max-width: 768px) {
  .footer-tagline {
    white-space: nowrap;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* Mobile-only horizontal padding for readability */
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}