:root{
  --bg:#000;
  --text:#e9eef5;
  --muted:rgba(233,238,245,.65);
  --accent:#ff6a00;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  background:#000;
  color:var(--text);
  overflow:hidden;
}

/* subtle film grain */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events:none;
}

.stage{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 18px 22px;
  gap:10px;
  text-align:center;
}

/* logo */
.logo{
  width:min(920px, 92vw);
  margin-top:-18px;
  height:auto;
  display:block;
  user-select:none;
}

/* nav */
.nav{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  margin-top:2px;
}

.nav a{
  color:var(--muted);
  font-size:20px;
  font-weight:500;
  text-decoration:none;
  transition:opacity .15s ease, transform .15s ease;
}

.nav a:hover{
  opacity:.95;
  transform:translateY(-1px);
}

.dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,106,0,.8);
  box-shadow:0 0 0 6px rgba(255,106,0,.10);
}

/* panel */
.panelWrap{
  width:min(820px, 92vw);
  margin-top:12px;
  display:block;
}

.panel{
  border-radius:18px;
  border:1px solid rgba(233,238,245,.14);
  background:rgba(255,255,255,.03);
  padding:16px 18px;
  text-align:left;
}

.panel h2{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.panel p, .panel li{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.panel ul{padding-left:18px}

/* footer */
.footer{
  margin-top:auto;
  padding-top:10px;
  font-size:12px;
  color:rgba(233,238,245,.38);
}

/* --- Intentional navigation upgrades --- */
.nav a.is-active{
  opacity:.95;
  transform:translateY(-1px);
  color:rgba(233,238,245,.92);
}

/* Make mailto link match nav styling */
.nav-link{
  color:var(--muted);
  font-size:30px;
  font-weight:500;
  text-decoration:none;
  transition:opacity .15s ease, transform .15s ease;
}
.nav-link:hover{
  opacity:.95;
  transform:translateY(-1px);
}

/* Panel: intentional motion */
#panelWrap{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}
#panelWrap.open{
  opacity:1;
  transform:translateY(0);
}

/* Content crossfade */
#panelBody{
  opacity:1;
  transition:opacity .12s ease;
}
#panelBody.is-swapping{
  opacity:0;
}

@media (prefers-reduced-motion: reduce){
  #panelWrap, #panelBody{ transition:none; }
}

@media (max-width:560px){
  .nav a{font-size:26px}
  .nav-link{font-size:26px}
  .logo{margin-top:-12px}
}



/* ===============================
   Background video hero (v4)
   Fixes: double-paint / off-screen / partial fill
   =============================== */

:root{
  --bg:#0b0b0b; /* unify blacks across devices */
}

/* Create a stable stacking context so fixed video doesn't "double render" on iOS */
body{
  position: relative;
  isolation: isolate;
  background: var(--bg);
}

/* Background video pinned to the visible viewport */
.video-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
  background: var(--bg);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.video-bg video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* true background fill */
  background: var(--bg);
  transform: translateZ(0);
  will-change: transform;
}

/* Dark overlay to normalize blacks + ensure legible UI */
.video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.38);
  pointer-events:none;
}

/* Keep site UI above the background */
.stage{
  position: relative;
  z-index: 2;
  justify-content: flex-start; /* avoid vertical centering that fights the hero text */
  padding-top: clamp(14px, 4vh, 42px);
}

/* This spacer controls where the nav lands relative to the video text */
.heroSpace{
  width: 100%;
  height: clamp(220px, 46svh, 520px);
}

/* Nav sits closer to the video text and stays consistent */
.nav{
  margin-top: clamp(-16px, -2vh, -6px);
  margin-bottom: 6px;
}

/* Panel should sit comfortably under nav */
.panelWrap{
  margin-top: 10px;
}

/* On very small screens, pull nav slightly tighter */
@media (max-width: 420px){
  .heroSpace{ height: clamp(200px, 44svh, 460px); }
  .nav a{ font-size: 26px; }
}

/* On wide desktop, give the hero more presence */
@media (min-width: 1100px){
  .heroSpace{ height: clamp(320px, 52svh, 640px); }
}



/* ===============================
   Nav anchored at bottom (v5)
   =============================== */

.stage{
  min-height: 100svh;
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pushDown{
  flex: 1 1 auto;
}

/* Panel sits above nav; keep it readable */
.panelWrap{
  margin-top: 0;
  margin-bottom: 14px;
}

/* Nav near bottom, above footer */
.navBottom{
  margin-top: 0;
  margin-bottom: 6px;
}

/* Footer stays below nav and respects iOS safe area */
.footer{
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}

/* If previous versions included heroSpace, collapse it */
.heroSpace{ display:none !important; height:0 !important; }


/* WP additions */
.footer .siteLogo{max-height:40px;width:auto;display:inline-block;vertical-align:middle;}
.bkLeadForm input,.bkLeadForm select,.bkLeadForm textarea{width:100%;max-width:520px;}
.bkLeadForm button{cursor:pointer;}
.navList .dotItem{display:flex;align-items:center;}


/* === Enrichment pass (WP) === */
:root{--bk-ease:cubic-bezier(.2,.8,.2,1);}
.dotItem:hover .dot{transform:scale(1.12);}
.footerText{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.65;margin-top:10px;}
.bkPanelBlock h3{margin:0 0 10px 0;letter-spacing:.08em;text-transform:uppercase;font-size:14px;opacity:.9;}
.bkPanelBody{font-size:15px;line-height:1.6;opacity:.92;}
.bkServicesBlock{margin:14px 0 0 0;padding-left:18px;}
.bkServicesBlock li{margin:6px 0;}
.bkCtaBlock a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);}
.bkCtaBlock a:hover{border-bottom-color:rgba(255,255,255,.55);}

/* === NAV FIX (WP menu) === */
.nav.navBottom .navList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.nav.navBottom .navList > li{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
}
.nav.navBottom .navList > li.dotItem{
  pointer-events:none;
}
.nav.navBottom .navList > li.dotItem .dot{
  display:inline-block;
  transform:translateY(1px);
  opacity:.85;
}



/* === HARD NAV RESET === */
.navBottom ul,
.navBottom li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.navBottom ul {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
}
.navBottom li::marker { content: none !important; }
.navBottom a {
  display: inline-flex;
  align-items: center;
}

.navBottom .dotItem{pointer-events:none;}
.navBottom .dot{display:inline-block;}


/* === NAV STRONG OVERRIDE (WP menu stacking/bullets) === */
.nav.navBottom .navList,
.nav.navBottom .navList > li,
.nav.navBottom .navList > li > a {
  list-style: none !important;
}
.nav.navBottom .navList{
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}
.nav.navBottom .navList > li{
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.nav.navBottom .navList > li::marker{ content: none !important; }
.nav.navBottom .navList > li.dotItem{ pointer-events:none !important; }


/* === NAV INLINE (no UL/LI) === */
.navBottom .navInline{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.navBottom .navInline a{
  display:inline-block;
}
.navBottom .navInline .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(255,255,255,.55);
  opacity:.9;
  transform: translateY(1px);
}


/* === NAV INLINE SPACING (stable) === */
.navBottom .navInline{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
}
.navBottom .navInline a{
  display:inline-block !important;
  margin:0 2px !important;
}
.navBottom .navInline .navDot{
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background: rgba(200,95,20,.95) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35) !important;
  transform: translateY(1px) !important;
}



/* === NAV SPACING FINAL (cache-busted) === */
.nav.navBottom .navInline{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  gap:22px !important;
}
.nav.navBottom .navInline a{
  display:inline-block !important;
  padding:0 10px !important; /* guarantees visible spacing */
}
.nav.navBottom .navInline .navDot{
  margin:0 6px !important;
}