/* ==========================================================================
   Site chrome — navbar (.bd-nav-*) and footer (.bdtc-footer*)

   Extracted 20 Sep 2026 from nine pages that each carried their own
   identical copy inline: index, about, ami, superhuman, eta, loa, cv, lok,
   thoughtpower. Edit the chrome HERE now — editing one page's markup no
   longer means editing the same CSS nine times.

   Only the CSS was shared. Each page keeps its own header/footer MARKUP,
   because those genuinely differ per page (active nav item, page links).
   ========================================================================== */

/* ------------------------------------------------------------ navbar --- */

.bd-nav-wrapper{
  font-family:"Montserrat", sans-serif;
  position:relative;
  z-index:1000;
}
.bd-nav-wrapper *{ box-sizing:border-box; }
.bd-nav-wrapper a{ text-decoration:none; color:#000; }
.bd-nav-wrapper ul{ list-style:none; margin:0; padding:0; }
.bd-nav-wrapper button{
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  color:#000;
}

/* ===============================
   TYPOGRAPHY CONTROL
================================ */

/* MAIN MENU (Cinzel) - Desktop */
.bd-nav-menu > li > a,
.bd-nav-menu > li > .bd-nav-toggle-btn{
  font-family:"Cinzel", serif !important;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.05rem;
}

/* MAIN MENU (Cinzel) - Mobile */
.bd-nav-drawer > a,
.bd-nav-drawer > .bd-nav-item > .bd-nav-toggle-btn{
  font-family:"Cinzel", serif !important;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.05rem;
}

/* DROPDOWN (Montserrat) */
.bd-nav-submenu a,
.bd-nav-drawer .bd-nav-submenu a{
  font-family:"Montserrat", sans-serif !important;
  font-weight:500;
  font-size:.95rem;
}

/* ===============================
   TOP BAR
================================ */
.bd-nav-container{
  width:100%;
  height:85px;
  background:#fff;
  border-bottom:1px solid #eaeaea;
  position:sticky;
  top:0;
}
.bd-nav-inner{
  max-width:1280px;
  margin:auto;
  height:85px;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.bd-nav-logo img{ height:3.2rem; }

/* DESKTOP MENU */
.bd-nav-menu{
  display:flex;
  gap:2rem;
  align-items:center;
}
.bd-nav-menu > li > a:hover,
.bd-nav-toggle-btn:hover{
  color:#C2A74E;
}

.bd-nav-item{ position:relative; }

.bd-nav-submenu{
  position:absolute;
  top:120%;
  left:0;
  min-width:240px;
  background:#fff;
  border-radius:12px;
  padding:.6rem 0;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  display:none;
}
.bd-nav-submenu a{
  padding:.8rem 1.3rem;
  display:block;
}
.bd-nav-submenu a:hover{
  background:#f5f5f5;
  color:#C2A74E;
}
.bd-nav-item.active > .bd-nav-submenu{
  display:block;
}

.bd-nav-arrow{
  width:14px;
  height:14px;
  transition:.25s ease;
}
.bd-nav-item.active > .bd-nav-toggle-btn .bd-nav-arrow{
  transform:rotate(180deg);
}

/* CONTACT */
.bd-nav-contact{
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  font-size:.85rem;
  padding:.65rem 1.5rem;
  border:2px solid #C2A74E;
  border-radius:30px;
  transition:.25s ease;
}
.bd-nav-contact:hover{
  background:#C2A74E;
  color:#fff;
}

/* MOBILE */
.bd-nav-hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
}
.bd-nav-hamburger span{
  width:24px;
  height:2px;
  background:#000;
}

.bd-nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
  z-index:998;
}
.bd-nav-overlay.show{
  opacity:1;
  pointer-events:auto;
}

.bd-nav-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:85%;
  max-width:360px;
  background:#fff;
  padding:90px 2rem;
  transform:translateX(100%);
  transition:.35s ease;
  z-index:999;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.bd-nav-drawer.open{
  transform:translateX(0);
}

.bd-nav-drawer .bd-nav-submenu{
  position:static;
  box-shadow:none;
  display:none;
  padding-left:1rem;
}
.bd-nav-drawer .bd-nav-item.active > .bd-nav-submenu{
  display:block;
}

.bd-nav-close{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#f5f5f5;
}

@media (max-width:992px){
  .bd-nav-menu,
  .bd-nav-contact.desktop{
    display:none;
  }
  .bd-nav-hamburger{
    display:flex;
  }
}
.bd-nav-actions{
  display:flex;
  gap:12px; /* reduce space here */
  align-items:center;
}

/* ------------------------------------------------------------ footer --- */

/* ===============================
   HARD NAMESPACE PROTECTION
================================ */
.bdtc-footer,
.bdtc-footer *{
  box-sizing:border-box;
}

.bdtc-footer{
  --bdtc-gold:#c2a74e;

  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:0.875rem; /* 14px */
  line-height:1.6;
  color:#ffffff;

  background:
    linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.85)),
    url("world-map.png");
  background-size:cover;
  background-position:center;

  padding:70px 20px 30px;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  z-index:5;
}

/* Force text */
.bdtc-footer p,
.bdtc-footer a,
.bdtc-footer span{
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:0.875rem;
  color:#ffffff;
  margin:0;
}

/* Headings */
.bdtc-footer h3,
.bdtc-footer h4{
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:1rem; /* 16px */
  letter-spacing:.05em;
  margin:0 0 12px 0;
  color:#ffffff;
}

/* Links */
.bdtc-footer a{
  text-decoration:none;
  transition:.25s ease;
}
.bdtc-footer a:hover{
  color:var(--bdtc-gold);
}

/* ===============================
   GRID
================================ */
.bdtc-grid{
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:4fr 2fr 2fr 2fr 2fr;
  gap:40px;
}

/* Brand */
.bdtc-brand{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bdtc-brand img{
  width:150px;
}

/* Column */
.bdtc-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Divider */
.bdtc-divider{
  border-top:2px dotted #ffffff;
  width:70%;
  margin:14px 0;
}

/* ===============================
   BOTTOM BAR
================================ */
.bdtc-bottom{
  max-width:1400px;
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.3);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}

.bdtc-social{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.bdtc-social a{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:#ffffff !important;
  transition:.3s ease;
}

.bdtc-social a:hover{
  background:#c2a74e;
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.bdtc-social svg{
  width:22px;
  height:22px;
  fill:currentColor !important;
}

/* Legal Links */
.bdtc-legal{
  display:flex;
  gap:18px;
  justify-content:center;
}

/* Copyright */
.bdtc-copy{
  justify-self:end;
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:992px){
  .bdtc-grid{
    grid-template-columns:1fr 1fr;
    row-gap:30px;
  }
  .bdtc-brand{
    grid-column:1/-1;
    align-items:center;
    text-align:center;
  }
  .bdtc-bottom{
    grid-template-columns:1fr;
    text-align:center;
  }
  .bdtc-copy{
    justify-self:center;
  }
}

@media(max-width:600px){
  .bdtc-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* ------------------------------------------------------------- current --- */
/*
   The menu is identical on every page. The item for the page you are on is
   rendered as an <a> with NO href — not clickable, not focusable, and
   announced as current by assistive tech — so it still matches every rule
   above and only needs the accent adding.
*/
.bd-nav-current,
.bd-nav-menu > li > .bd-nav-current,
.bd-nav-submenu .bd-nav-current,
.bd-nav-drawer > .bd-nav-current {
  color: #c2a74e;
  cursor: default;
  pointer-events: none;
}

.bd-nav-menu > li > .bd-nav-current {
  position: relative;
}

.bd-nav-menu > li > .bd-nav-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: #c2a74e;
}

/* ------------------------------------------------- control reset --------- */
/*
   The nav's controls are <button> elements — the right choice, because they
   are operable by keyboard and can carry aria-expanded. But a button arrives
   with browser defaults a link does not have: padding, border, background,
   centred text and the system font.

   Until now those were being cancelled by Bootstrap, which most pages happen
   to load. The three that do NOT (about.html, superhuman/, results.php) showed
   the bug: in the mobile drawer, "Live Sessions" and "Recorded Programs" sat
   indented from Home / About / Corporate / Results beside them, because the
   buttons had padding and the links did not.

   The shared chrome should not depend on a framework it never asked for, so
   it resets its own controls here.
*/
.bd-nav-toggle-btn,
.bd-nav-hamburger {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* The close button keeps its own grey disc, so only the defaults are removed
   and its background/border-radius are left alone. */
.bd-nav-close {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bd-nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* In the drawer the toggle is a full-width row: the whole line becomes the tap
   target, and the chevron sits at the right edge the way an accordion reads —
   rather than floating next to the text at a different indent from its
   neighbours. */
.bd-nav-drawer > .bd-nav-item > .bd-nav-toggle-btn {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.bd-nav-drawer .bd-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* ==========================================================================
   Scroll reveal  (see assets/js/reveal.js)
   Added 20 Sep 2026.

   There is deliberately NO rule here that hides anything. The animation runs
   FROM transparent when reveal.js adds .rv-in, so every element is visible
   whether or not that script ever runs.

   Do NOT "improve" this by giving the targets an opacity:0 default. That is
   the recipe every scroll-reveal tutorial uses and it is how a section becomes
   permanently invisible when a script fails to load. This site has already
   lost its Live Sessions videos to that exact failure mode once.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
   @keyframes rv-rise {
      from { opacity: 0; transform: translate3d(0, 14px, 0); }
      to   { opacity: 1; transform: none; }
   }

   /* transform + opacity only: compositor-only, so this cannot shift layout */
   .rv-in {
      animation: rv-rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
   }
}

/* The nav and footer have hover and open transitions of their own, and this
   file carried no reduced-motion guard at all until now. */
@media (prefers-reduced-motion: reduce) {
   .bd-nav-wrapper *,
   .bdtc-footer * {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
   }
}

/* ==========================================================================
   App-like mobile shell
   Added 20 Sep 2026.
   ========================================================================== */

html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
}

body {
   /* the grey flash on every tap is the single most "web page" tell there is */
   -webkit-tap-highlight-color: transparent;
   /* stop the rubber-band revealing blank canvas past the top and bottom */
   overscroll-behavior-y: contain;
}

a, button, [role="button"], summary, label,
input, select, textarea {
   touch-action: manipulation;   /* removes the legacy 300ms tap delay */
}

@media (max-width: 992px) {
   /* iOS zooms the entire page when a focused field is under 16px, and never
      zooms back out. This is the whole fix. */
   input, select, textarea { font-size: max(16px, 1rem); }

   /* clear the notch and the home indicator */
   .bd-nav-drawer { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}

/* --- bottom tab bar ------------------------------------------------------ */

.app-tabs { display: none; }

@media (max-width: 768px) {
   .app-tabs {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      /* below the drawer (999) and its overlay (998) on purpose, so opening
         the menu covers this rather than fighting it */
      z-index: 900;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      background: rgba(255, 255, 255, 0.94);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      backdrop-filter: saturate(180%) blur(16px);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
      padding-bottom: env(safe-area-inset-bottom, 0px);
   }

   .app-tab {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 3px;
      min-height: 56px;          /* comfortably past the 44px target minimum */
      padding: 7px 2px;
      border: 0;
      background: none;
      font-family: inherit;
      font-size: 10px;
      font-weight: 600;
      color: #6b6b6b;
      text-decoration: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.12s ease, color 0.15s ease;
   }

   .app-tab svg {
      display: block;
      width: 22px;
      height: 22px;
   }

   .app-tab[aria-current="page"] { color: #c2a74e; }

   /* the press response is most of what separates an app from a web page */
   .app-tab:active { transform: scale(0.92); }

   /* the drawer IS this navigation - showing both at once is clutter */
   body:has(.bd-nav-drawer.open) .app-tabs {
      opacity: 0;
      pointer-events: none;
   }

   /* keep the bar off the last of the content */
   body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
   .app-tab { transition: none; }
   .app-tab:active { transform: none; }
}