/* ══════════════════════════════════════════════════════════════
   CODABYTE OVERRIDES  —  v3
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. NAVBAR LAYOUT
   Left group: logo + nav-links (Work/About/Contact/More▾)
   Right:      hamburger only
   ───────────────────────────────────────────────────────────── */

.bottom-menu-bar    { display: none !important; }
body                { padding-bottom: 0; }
.nav-changelog,
#openChangelogBtn   { display: none !important; }

/* Left group wraps logo + nav-links */
.navbar-left {
  display: flex;
  align-items: center;
}

.navbar-left .nav-links {
  margin-left: 32px;
  display: flex !important;
}

/* "More ▾" trigger — appended inside .nav-links by nav-dropdown.js */
.nav-banner-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.nav-banner-trigger:hover,
.nav-banner-trigger.open { color: var(--blue-hi); }
.nav-banner-trigger svg {
  width: 8px; height: 8px;
  transition: transform .25s var(--ease);
  flex-shrink: 0;
}
.nav-banner-trigger.open svg { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  transform: translateY(-6px);
  z-index: 9200;
  width: 300px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(72,120,248,.06) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px; left: 20px;
  transform: rotate(45deg);
  width: 10px; height: 10px;
  background: var(--bg-1);
  border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
}
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue) 50%, transparent);
  opacity: .5;
}
.nav-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nd-label {
  font-family: var(--f-mono);
  font-size: .48rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 8px 6px;
}
/* nd-item is now a <button> for modal triggers, and <a> for links */
.nd-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 2px;
  color: var(--ink-mid);
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
}
.nd-item:hover { background: var(--blue-glow-soft); color: var(--ink); }
.nd-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: .95rem;
  flex-shrink: 0;
  color: var(--blue-hi);
  transition: border-color .15s;
}
.nd-item:hover .nd-icon { border-color: var(--blue-dim); }
.nd-text { display: flex; flex-direction: column; gap: 1px; }
.nd-title {
  font-family: var(--f-body);
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.nd-sub {
  font-family: var(--f-mono);
  font-size: .48rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nd-divider { height: 1px; background: var(--line); margin: 6px 0; }
.nd-badge {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: .42rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--ink-faint);
  flex-shrink: 0;
}
.nd-badge.new { background: var(--blue-glow-soft); border-color: var(--blue-dim); color: var(--blue-hi); }

/* Hamburger — right side */
.navbar .nav-icon {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color .2s, background .2s, color .2s;
  cursor: pointer;
}
.navbar .nav-icon:hover {
  border-color: var(--blue);
  background: var(--blue-glow-soft);
  color: var(--blue-hi);
}

@media (max-width: 640px) {
  .navbar-left .nav-links { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   2. SIDE DRAWER — slides from the RIGHT, pages only
   ───────────────────────────────────────────────────────────── */

#sideMenu {
  left: auto !important;
  right: 0 !important;
  border-right: none !important;
  border-left: 1px solid var(--line-2) !important;
  transform: translateX(100%) translateZ(0) !important;
}
#sideMenu.active {
  transform: translateX(0) translateZ(0) !important;
}

#sideMenu nav a {
  font-family: var(--f-body) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  color: var(--ink-mid) !important;
  transition: color .2s, transform .25s var(--ease) !important;
  transform: translateZ(0) !important;
}
#sideMenu nav a:hover {
  color: var(--ink) !important;
  transform: translateX(-4px) translateZ(0) !important;
}

.sd-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  flex-shrink: 0;
  color: var(--blue-hi);
  transition: border-color .2s, background .2s;
}
#sideMenu nav a:hover .sd-icon {
  border-color: var(--blue-dim);
  background: var(--blue-glow-soft);
}

.sd-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sd-title {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.sd-sub {
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sd-badge {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: .44rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--blue-glow-soft);
  border: 1px solid var(--blue-dim);
  color: var(--blue-hi);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   3. MODAL SYSTEM — .cb-modal
   Changelog · FAQ · Pricing
   ───────────────────────────────────────────────────────────── */

.cb-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}
.cb-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.cb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.cb-modal-box {
  position: relative;
  z-index: 1;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  width: min(580px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(0.97);
  transition: transform .28s var(--ease);
  box-shadow: 0 0 0 1px rgba(72,120,248,.06) inset, 0 32px 80px rgba(0,0,0,.7);
}
.cb-modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue) 50%, transparent);
  opacity: .45;
  pointer-events: none;
}
.cb-modal.active .cb-modal-box {
  transform: translateY(0) scale(1);
}
.cb-modal-box--scroll .cb-modal-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.cb-modal-box--scroll .cb-modal-body::-webkit-scrollbar { width: 4px; }
.cb-modal-box--scroll .cb-modal-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.cb-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cb-modal-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cb-modal-eyebrow {
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.cb-modal-title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
  flex: 1;
}
.cb-modal-close {
  width: 32px; height: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-mid);
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, color .2s, background .2s;
}
.cb-modal-close:hover {
  border-color: var(--blue);
  color: var(--ink);
  background: var(--blue-glow-soft);
}
.cb-modal-body {
  padding: 26px 28px 28px;
  flex: 1;
  overflow-y: auto;
}

/* Changelog inside modal */
.cb-modal-body .changelog-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: visible;
  padding-right: 0;
  margin-top: 0;
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item {
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color .2s;
}
.faq-item[open], .faq-item:hover { border-color: var(--line-2); }
.faq-q {
  font-family: var(--f-body);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: color .2s;
  user-select: none;
}
.faq-q::after {
  content: '+';
  font-family: var(--f-mono);
  font-size: .9rem;
  color: var(--blue-hi);
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-q::-webkit-details-marker { display: none; }
.faq-a {
  padding: 0 18px 16px;
  font-size: .86rem;
  line-height: 1.72;
  color: var(--ink-mid);
  font-weight: 300;
}
.faq-a a { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; }

/* Pricing */
.pricing-notice {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  margin-bottom: 20px;
  line-height: 1.65;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 500px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 18px 16px;
  transition: border-color .2s;
}
.pricing-card:hover { border-color: var(--line-2); }
.pricing-card--full { grid-column: 1 / -1; }
.pricing-type {
  font-family: var(--f-mono);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-hi);
  margin-bottom: 6px;
}
.pricing-range {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 10px;
}
.pricing-includes { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.pricing-includes li {
  font-size: .82rem;
  color: var(--ink-mid);
  font-weight: 300;
  padding-left: 14px;
  position: relative;
}
.pricing-includes li::before { content: '›'; position: absolute; left: 0; color: var(--blue); font-family: var(--f-mono); }
.pricing-cta {
  font-size: .86rem;
  color: var(--ink-mid);
  font-weight: 300;
  text-align: center;
  padding-top: 4px;
}
.pricing-cta a { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; }


/* ─────────────────────────────────────────────────────────────
   4. CAROUSEL — 3D coverflow
   ───────────────────────────────────────────────────────────── */
.cb-carousel {
  position: relative; width: 100%; max-width: 860px; margin: 0 auto;
  height: clamp(280px, 44vh, 480px); background: transparent; border: none;
  overflow: visible; isolation: isolate; perspective: 1100px;
}
.cb-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: none; }
.cb-slide {
  position: absolute; top: 0; width: 72%; height: 100%;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: 8px;
  overflow: hidden; cursor: pointer !important; padding: 0;
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1), opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              filter 0.65s cubic-bezier(0.22,1,0.36,1), box-shadow 0.65s cubic-bezier(0.22,1,0.36,1);
}
.cb-slide[data-pos="0"]  { left:50%; transform:translateX(-50%) translateZ(0) scale(1); z-index:10; opacity:1; filter:brightness(1) saturate(1.1); box-shadow:0 16px 56px rgba(0,0,0,.6),0 0 0 1px rgba(72,120,248,.14) inset; }
.cb-slide[data-pos="1"]  { left:50%; transform:translateX(20%) translateZ(-160px) rotateY(-18deg) scale(0.88); z-index:5; opacity:0.58; filter:brightness(0.65) saturate(0.7); }
.cb-slide[data-pos="-1"] { left:50%; transform:translateX(-120%) translateZ(-160px) rotateY(18deg) scale(0.88); z-index:5; opacity:0.58; filter:brightness(0.65) saturate(0.7); }
.cb-slide[data-pos="2"]  { left:50%; transform:translateX(55%) translateZ(-300px) rotateY(-28deg) scale(0.72); z-index:2; opacity:0.28; filter:brightness(0.4) saturate(0.4); }
.cb-slide[data-pos="-2"] { left:50%; transform:translateX(-155%) translateZ(-300px) rotateY(28deg) scale(0.72); z-index:2; opacity:0.28; filter:brightness(0.4) saturate(0.4); }
.cb-slide[data-pos="hidden"] { opacity:0; pointer-events:none; z-index:0; }
.cb-slide img { width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; filter:brightness(0.82) saturate(1.05); transition:filter 0.4s; border-radius:8px; }
.cb-slide[data-pos="0"] img       { filter:brightness(0.88) saturate(1.1); }
.cb-slide[data-pos="0"]:hover img { filter:brightness(0.96) saturate(1.2); }
.cb-slide::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,7,16,0.75) 0%,rgba(6,7,16,0) 50%); pointer-events:none; border-radius:8px; }
.cb-slide-tag { position:absolute; top:14px; left:14px; z-index:2; font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); background:rgba(11,13,26,0.72); border:1px solid var(--line-2); padding:5px 10px; border-radius:3px; backdrop-filter:blur(6px); }
.cb-caption { position:absolute; left:20px; bottom:-52px; z-index:3; display:flex; flex-direction:column; gap:4px; pointer-events:none; }
.cb-cap-title { font-family:var(--f-display); font-size:clamp(1rem,2.2vw,1.6rem); font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.cb-cap-meta  { font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mid); }
.cb-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:46px; height:46px; border-radius:50%; background:rgba(11,13,26,0.78); border:1px solid var(--line-2); color:var(--ink); font-size:1.6rem; display:flex; align-items:center; justify-content:center; cursor:pointer !important; backdrop-filter:blur(8px); transition:background .2s,border-color .2s,color .2s; }
.cb-arrow:hover { background:var(--blue-glow); border-color:var(--blue); color:var(--blue-hi); }
.cb-arrow-prev { left:-22px; }
.cb-arrow-next { right:-22px; }
.cb-dots { position:absolute; left:0; right:0; bottom:-90px; z-index:3; display:flex; justify-content:center; gap:6px; }
.cb-dot { width:22px; height:2px; border:none; background:rgba(216,224,246,0.16); border-radius:2px; padding:0; cursor:pointer !important; transition:background .25s,width .25s; }
.cb-dot.active { background:var(--blue); width:36px; }
.cb-dot:hover  { background:var(--blue-hi); }
#work .carousel-wrapper { padding-bottom:110px; }
@media (max-width:680px) {
  .cb-carousel { max-width:100%; height:clamp(220px,52vw,340px); overflow:hidden; }
  .cb-slide { width:100%; border-radius:6px; }
  .cb-slide[data-pos="1"],.cb-slide[data-pos="-1"],.cb-slide[data-pos="2"],.cb-slide[data-pos="-2"] { opacity:0; pointer-events:none; }
  .cb-arrow-prev { left:10px; } .cb-arrow-next { right:10px; }
}


/* ─────────────────────────────────────────────────────────────
   5. TOOLKIT
   ───────────────────────────────────────────────────────────── */
#toolkit { padding:80px var(--pad) 0; max-width:1440px; margin:0 auto; }
#toolkit .section-head { display:flex; flex-direction:column; gap:6px; margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--line); }
#toolkit .section-num { color:var(--blue-hi); font-size:.56rem; letter-spacing:.22em; }
#toolkit .section-head h2 { font-family:var(--f-display); font-size:clamp(1.8rem,4vw,3rem); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--ink); margin:0; }
#toolkit .section-head h2 em { color:var(--blue-hi); }
.section-sub { display:block !important; font-family:var(--f-mono); font-size:.6rem !important; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:300; line-height:1.6; margin-top:4px !important; opacity:.85; }
.toolkit-container { padding:0 !important; margin:0 !important; max-width:100% !important; }
.periodic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px; }
@media (max-width:560px) { .periodic-grid { grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:5px; } }


/* ─────────────────────────────────────────────────────────────
   6. CONTACT
   ───────────────────────────────────────────────────────────── */
.contact-channels { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px !important; margin-top:24px; }
.contact-channel { display:flex !important; align-items:center; justify-content:center; gap:12px !important; padding:22px 18px !important; font-family:var(--f-display) !important; font-size:1rem !important; font-weight:600 !important; letter-spacing:0.02em !important; color:var(--ink) !important; background:var(--bg-1) !important; border:1px solid var(--line-2) !important; border-radius:3px; transition:border-color .2s,background .2s,transform .2s,color .2s !important; }
.contact-channel:hover { border-color:var(--blue) !important; background:var(--blue-glow-soft) !important; color:var(--blue-hi) !important; transform:translateY(-2px); }
.contact-channel-icon { font-size:1.4rem !important; color:var(--blue-hi); }


/* ─────────────────────────────────────────────────────────────
   7. HERO PLEXUS
   ───────────────────────────────────────────────────────────── */
.hero { position:relative; isolation:isolate; }
#hero-plexus { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.7; filter:blur(8px) saturate(1.2); mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 85%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 30%,transparent 85%); }
.hero > .hero-inner, .hero > .hero-marquee { position:relative; z-index:2; }
.hero-visual { position:relative; }
.hero-visual-link { position:absolute; inset:0; z-index:5; cursor:pointer !important; }