@charset "UTF-8";
/* Cleaned style.css — footer rules removed per request */

/* import Barlow (fallback if not included in HTML head) */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700;800&display=swap");

:root{
  /* brand */
  --brand-magenta: #b81d89;
  --brand-purple:  #722c8b;
  --brand-cyan:    #25b2e1;

  /* general */
  --bg-900: #060617;
  --muted:  #a9b0b6;
  --glass:  rgba(255,255,255,0.05);

  --container: 1100px;
  
  --radius: 12px;
  --trans: 300ms cubic-bezier(.2,.9,.2,1);
  --glow: 0 14px 50px rgba(0,0,0,.75);

  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* ========== RESET & BASE ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  background-color: #07101a; /* <- site-wide solid background */
  background-image: none;
	color: #e6eef6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  -webkit-font-variant-ligatures: contextual;
  -moz-font-feature-settings: "liga" 1;
}

/* layout container */
.container {
  width: 90%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem 0;
}

/* ========== HEADER (sticky) ========== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 9999;
  background-color:#000000;
  backdrop-filter: blur(6px);
  transition: box-shadow var(--trans), background var(--trans);
}

.site-header.scrolled {
  box-shadow: 0 8px 28px rgba(3,4,14,0.55);
  background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.30));
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
  height: 100%;
  padding: 1rem 2rem;
}

/* logo */
.logo { display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; }
.logo img{
  height: 80px; /* keep your existing logo size */
  width: auto;
  display:block;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
  object-fit: contain;
}

/* logo sizes (desktop default) */
.site-logo {
  display: block;
  width: auto;
  height: 145px;        /* desktop height */
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
}

/* mobile: smaller logo */
@media (max-width: 900px) {
  .site-logo {
    height: 52px;       /* mobile height */
  }
}

/* tidy: keep anchor inline-flex so layout doesn't shift */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

/* nav */
.nav { display:flex; gap:1.2rem; align-items:center; }
.nav a{
  color: var(--muted);
  text-decoration: none;
  padding: 0.45rem 0.6rem;
  transition: color var(--trans), transform 180ms;
  font-weight: 600;
}
.nav a:hover { color: var(--brand-cyan); transform: translateY(-2px); }

.cta.small-cta{
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-magenta));
  color: #fff;
  box-shadow: var(--glow);
  font-weight: 700;
}

/* mobile burger */
.burger { display: none; background: none; border: 0; color: white; font-size: 1.6rem; cursor: pointer; }

/* ensure content doesn't sit under fixed header */
main { margin-top: calc(var(--header-height) + 8px); }
.hero { margin-top: 0; } /* hero handles its own height */

/* ========== HERO (video background) ========== */
.hero{
   margin-top: -10px !important;
  background-color: #000; /* fallback background while video loads */
  position: relative;
  height: calc(100vh - var(--header-height));
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 0;
  filter: brightness(.55) saturate(1.05);
  transform-origin: center;
}


.hero-overlay{
	margin-top: -10px !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,6,23,0.25), rgba(6,6,23,0.70));
  mix-blend-mode: multiply;
}

.hero-content{
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
  max-width: 1000px;
  margin-top: 4vh;
  padding: 0 1rem;
}

.eyebrow{
  display:inline-block;
  color: var(--brand-magenta);
  font-weight:700;
  letter-spacing:1.2px;
  font-size:0.8rem;
  margin-bottom:0.6rem;
}

.headline{
  font-size: clamp(2rem, 5.2vw, 4rem);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 800;
  text-shadow: 0 8px 30px rgba(0,0,0,0.65);
}

.subhead{
  color: var(--muted);
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

/* hero actions */
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.25rem; }

.btn{
  border: 0;
  padding: 0.85rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.btn-primary{
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-magenta));
  color: white;
  box-shadow: 0 18px 60px rgba(37,178,225,0.12), inset 0 -2px 0 rgba(0,0,0,0.06);
}
.btn-primary:hover { transform: translateY(-5px); box-shadow: 0 28px 80px rgba(37,178,225,0.18); }

.btn-ghost{
  background: transparent;
  color: var(--brand-cyan);
  border: 1px solid rgba(255,255,255,0.06);
}

/* floating callouts */
.callouts{ display:flex; gap:0.75rem; justify-content:center; margin-top:1.5rem; list-style:none; padding:0; }
.callout{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.875rem;
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  transition: transform var(--trans), color var(--trans);
}
.callout:hover { transform: translateY(-6px); color: white; }

/* drone image (cursor follow) */
.drone{
  position:absolute;
  z-index:12;
  right:8%;
  bottom:14%;
  width:220px;
  pointer-events:none;
  transform-origin:center;
  transition: transform 120ms linear;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  will-change: transform;
  mix-blend-mode: screen;
}

/* ==========================
   FEATURE CARDS — darker base, bright-on-hover
   Replace your existing feature-card rules with this
   ========================== */

/* layout for the three feature cards */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 10px;
  padding-bottom: 2rem;
}

/* shared card base */
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border-radius: 14px;
  text-align: left;
  color: #e6eef6;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.02);

  /* smoother, snappier motion */
  transition:
    transform 120ms cubic-bezier(.2,.9,.2,1),
    box-shadow 160ms cubic-bezier(.2,.9,.2,1),
    background-color 140ms linear,
    color 120ms linear;
  will-change: transform, box-shadow, background;

  /* must accept pointer events so hover works */
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

/* per-card color tokens (same as you had) */
.feature-card-one  { --feat-bright: #25b2e1; --feat-dark: #1b7fa8; --feat-glow: rgba(37,178,225,0.18); }
.feature-card-two  { --feat-bright: #722c8b; --feat-dark: #572063; --feat-glow: rgba(114,44,139,0.18); }
.feature-card-three{ --feat-bright: #b81d89; --feat-dark: #8f1468; --feat-glow: rgba(184,29,137,0.18); }

/* darker default background (fallback for color-mix) */
.feature-card-one,
.feature-card-two,
.feature-card-three {
  background: linear-gradient(180deg, rgba(0,0,0,0.06), var(--feat-dark));
  color: #f3f7fb;
}

/* Hover & focus: lift, glow, switch to bright color */
.feature-card:hover,
.feature-card:focus-visible {
  transform: translate3d(0, -12px, 0);
  box-shadow: 0 20px 60px var(--feat-glow), 0 6px 18px rgba(0,0,0,0.28);
  z-index: 10;
  color: #ffffff;
}

/* Apply the bright color per-card on hover */
.feature-card-one:hover,
.feature-card-one:focus-visible {
  background: linear-gradient(180deg, var(--feat-bright), color-mix(in srgb, var(--feat-bright) 86%, rgba(0,0,0,0.06) 14%));
}
.feature-card-two:hover,
.feature-card-two:focus-visible {
  background: linear-gradient(180deg, var(--feat-bright), color-mix(in srgb, var(--feat-bright) 86%, rgba(0,0,0,0.06) 14%));
}
.feature-card-three:hover,
.feature-card-three:focus-visible {
  background: linear-gradient(180deg, var(--feat-bright), color-mix(in srgb, var(--feat-bright) 86%, rgba(0,0,0,0.06) 14%));
}

/* fallback plain colors for older browsers */
.feature-card-one { background: var(--feat-dark); }
.feature-card-two { background: var(--feat-dark); }
.feature-card-three { background: var(--feat-dark); }

.feature-card-one:hover,
.feature-card-one:focus-visible { background: var(--feat-bright); }
.feature-card-two:hover,
.feature-card-two:focus-visible { background: var(--feat-bright); }
.feature-card-three:hover,
.feature-card-three:focus-visible { background: var(--feat-bright); }

/* touch / active feedback */
.feature-card:active {
  transform: translate3d(0, -6px, 0) scale(0.997);
  transition-duration: 70ms;
}

/* small-screen: reduce lift so layout doesn't feel jumpy */
@media (max-width: 480px) {
  .feature-card { transition-duration: 160ms; }
  .feature-card:hover, .feature-card:focus-visible { transform: translate3d(0, -8px, 0); }
}
/* split section */
.split-section{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:center; margin-top:2rem; }
.split-media img{ width:100%; height:100%; object-fit:cover; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.split-copy h2{ margin-top:0; color:white; }

/* gallery preview */
.preview-gallery .grid-preview{ display:flex; gap:0.6rem; justify-content:center; }
.preview-gallery img{ width: calc(33.33% - 0.4rem); border-radius: 10px; object-fit: cover; height: 170px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); }

/* CTA band */
/* ===== Wow CTA band: dramatic, animated, accessible ===== */
.wow-cta {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 2.25rem 0;
  margin: 2.5rem 0;
  isolation: isolate; /* keeps blend modes contained */
  background-color: #04101a; /* fallback */
  /* subtle dark -> mid -> dark vertical gradient */
  background-image: linear-gradient(180deg,
    rgba(7,16,26,0.98) 0%,
    rgba(10,22,33,0.86) 38%,
    rgba(7,16,26,0.98) 100%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.02);
}

/* container layout inside CTA */
.wow-cta .cta-band-inner {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 0.5rem;
}

/* copy column */
.wow-cta .cta-copy {
  flex: 1 1 520px;
  min-width: 260px;
  color: #fff;
  text-align: center;
}

/* eyebrow */
.wow-cta .cta-eyebrow {
  color: var(--brand-magenta);
  font-weight: 700;
  letter-spacing: 1.2px;
  font-size: 0.88rem;
  margin-bottom: 0.45rem;
}

/* large headline (gradient text) */
.wow-cta .cta-text {
  margin: 0 0 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: clamp(1.5rem, 3.8vw, 2.6rem);
  /* vibrant gradient for the text */
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-purple), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,0.7);
  display: inline-block;
  line-height: 1.05;
}

/* supportive subhead */
.wow-cta .cta-subhead {
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.99rem;
}


/* actions column */
.wow-cta .cta-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* primary button gets stronger glow + pink hover */
.wow-cta .cta-btn {
  padding: 0.9rem 1.35rem;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-magenta));
  color: #fff;
  box-shadow: 0 18px 60px rgba(37,178,225,0.12), 0 6px 18px rgba(0,0,0,0.5);
  transition: transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease, filter 220ms ease;
  display: inline-block;
  text-decoration: none;
}

/* hover: quick pop + pink tint */
.wow-cta .cta-btn:hover,
.wow-cta .cta-btn:focus {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 30px 90px rgba(184,29,137,0.22);
  filter: saturate(1.06);
  outline: none;
  background: linear-gradient(90deg, var(--brand-magenta), var(--brand-purple));
}

/* secondary ghost button */
.wow-cta .cta-secondary {
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.04);
  font-weight: 700;
}

/* decorative animated dots (soft drifting particles) */
.wow-cta .cta-bg-dots {
  pointer-events: none;
  position: absolute;
  inset: -20% -10%;
  background-image:
    radial-gradient(2px 2px at 10% 12%, rgba(255,255,255,0.06) 0, transparent 40%),
    radial-gradient(2px 2px at 35% 25%, rgba(255,255,255,0.05) 0, transparent 40%),
    radial-gradient(3px 3px at 70% 18%, rgba(255,255,255,0.04) 0, transparent 40%),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,0.06) 0, transparent 40%),
    radial-gradient(2px 2px at 18% 78%, rgba(255,255,255,0.03) 0, transparent 40%);
  mix-blend-mode: screen;
  opacity: 0.7;
  transform: translateZ(0);
  animation: dots-drift 18s linear infinite;
  z-index: 0;
}

/* moving sheen (slanted light sweep) */
.wow-cta .cta-sheen {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.00) 100%);
  transform: translateX(-40%);
  z-index: 1;
  mix-blend-mode: overlay;
  filter: blur(10px) contrast(1.1);
  animation: sheen-sweep 6.5s linear infinite;
}

/* make sure content sits above decorations */
.wow-cta .cta-band-inner,
.wow-cta .cta-copy,
.wow-cta .cta-actions { position: relative; z-index: 2; }

/* KEYFRAMES */
@keyframes dots-drift {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .72; }
  50% { transform: translate3d(-5%, 3%, 0) scale(1.02); opacity:.9; }
  100% { transform: translate3d(0,0,0) scale(1); opacity:.72; }
}
@keyframes sheen-sweep {
  0% { transform: translateX(-60%) skewX(-12deg); opacity: 0; }
  10% { opacity: 0.08; }
  40% { transform: translateX(30%) skewX(-12deg); opacity: 0.12; }
  80% { opacity: 0.02; }
  100% { transform: translateX(120%) skewX(-12deg); opacity: 0; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wow-cta .cta-bg-dots,
  .wow-cta .cta-sheen { animation: none; transition: none; }
  .wow-cta .cta-btn { transition: none; }
}

/* Responsive */
@media (max-width: 980px) {
  .wow-cta .cta-band-inner { gap: 1rem; }
  .wow-cta .cta-copy { order: 1; text-align: center; }
  .wow-cta .cta-actions { order: 2; width: 100%; justify-content: center; }
  .wow-cta { padding: 1.5rem 0; border-radius: 10px; }
  .wow-cta .cta-subhead { max-width: 60ch; }
}

/* CTA drone assembly CSS — replace prior drone-particles rules with this */
.drone-particles {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999; /* sits above CTA but doesn't block clicks */
  overflow: visible;
}

.drone-particles .drone-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform, opacity;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset;
  opacity: 0;
}

/* slightly larger on high-DPI */
@media (min-resolution: 2dppx) {
  .drone-particles .drone-dot { width: 11px; height: 11px; }
}

/* optional glow style */
.drone-particles .drone-dot.glow {
  box-shadow: 0 18px 44px rgba(184,29,137,0.12), 0 6px 18px rgba(0,0,0,0.45);
}

/* hide static text while animating (keeps text accessible) */
.wow-cta.animating .assembly-target {
  color: transparent !important;
  text-shadow: none !important;
}

/* respects reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .drone-particles { display: none !important; }
  .wow-cta .assembly-target { color: inherit !important; }
}

/* keep CTA actions clickable above the particles */
.wow-cta .cta-actions { position: relative; z-index: 10001; }


/* ========== GALLERY / MASONRY / LIGHTBOX ========== */
.masonry{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-items: start; margin-top: 1.25rem; }
.masonry-item{ width:100%; height:220px; object-fit: cover; border-radius: 12px; cursor:pointer; transition: transform 220ms, box-shadow 220ms; border: 1px solid rgba(255,255,255,0.02); }
.masonry-item:hover { transform: scale(1.03); box-shadow: 0 28px 80px rgba(0,0,0,0.6); }

.lightbox{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:99999; background: rgba(0,0,0,0.9); }
.lightbox img{ max-width:92%; max-height:86%; border-radius:8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lb-close{ position:absolute; right:28px; top:28px; background:none; border:0; color:white; font-size:1.6rem; cursor:pointer; }

/* ========== TEAM / STATS / CARDS ========== */
.team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1rem; }
.team-card{ background: var(--glass); padding:1rem; border-radius:12px; text-align:center; border:1px solid rgba(255,255,255,0.02); }
.team-card img{ width:100%; height:160px; object-fit:cover; border-radius:8px; margin-bottom:0.5rem; }

.stats{ display:flex; gap:1rem; margin-top:1.5rem; }
.stat{ background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1rem; border-radius:10px; text-align:center; flex:1; border:1px solid rgba(255,255,255,0.02); }
.stat-num{ font-size:1.75rem; font-weight:700; color: var(--brand-cyan); }


/* ---------- Team grid (3 columns -> stack on small screens) ---------- */
.nb-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}

/* team-card baseline — keep internal flow so contact pill sits below content */
.nb-team-grid .team-card {
  display: flex;
  flex-direction: column;
  align-items: center;     /* center contents horizontally */
  text-align: center;
  padding: 1.25rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  min-height: 100%;
  gap: 0.75rem;
}

/* portrait/photo clamp */
.nb-team-grid .team-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 0;
  -webkit-user-drag: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* headings / p */
.nb-team-grid .team-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.nb-team-grid .team-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* contact pill (inside the card) */
.nb-team-grid .team-contact-card {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.6rem;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  font-size: 0.92rem;
}

/* each clickable pill item */
.nb-team-grid .team-contact-card .tc-item {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  text-decoration: none;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

/* icon size */
.nb-team-grid .team-contact-card svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--brand-cyan);
}

/* contact text truncation to keep pills tidy */
.nb-team-grid .team-contact-card .tc-text {
  display: inline-block;
  max-width: 10.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover/focus */
.nb-team-grid .team-contact-card .tc-item:hover,
.nb-team-grid .team-contact-card .tc-item:focus {
  background: linear-gradient(90deg, rgba(37,178,225,0.08), rgba(184,29,137,0.06));
  color: #fff;
  transform: translateY(-3px);
}
.nb-team-grid .team-contact-card .tc-item:focus {
  outline: 3px solid rgba(37,178,225,0.14);
  outline-offset: 4px;
}

/* give email / phone slight accent icons */
.nb-team-grid .tc-email svg { color: var(--brand-magenta); }
.nb-team-grid .tc-phone svg { color: var(--brand-cyan); }

/* responsive — stack cards on narrower screens (tablet/phone) */
@media (max-width: 980px) {
  .nb-team-grid {
    grid-template-columns: 1fr;   /* single column stack */
  }

  .nb-team-grid .team-contact-card {
    width: 100%;
    justify-content: center;
    padding: 8px;
  }

  .nb-team-grid .team-contact-card .tc-text {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .nb-team-grid .team-photo {
    width: 120px;
    height: 120px;
  }
}

/* accessibility: make sure link focus is evident */
.nb-team-grid .team-contact-card .tc-item:focus-visible {
  box-shadow: 0 8px 26px rgba(37,178,225,0.12);
  background: rgba(37,178,225,0.06);
}


/* preview slideshow crossfade */
.preview-gallery .grid-preview {
  position: relative;
  gap: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* ---------- Centered Team grid (replace previous team-grid rules) ---------- */
.nb-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); /* adaptive column width */
  gap: 1.25rem;
  justify-content: center;   /* center the whole grid inside its container */
  justify-items: center;     /* center each card in its grid cell */
  align-items: start;
  margin: 0 auto;            /* extra safety to keep the block centered */
  max-width: 1100px;         /* optional: prevents the grid from becoming too wide */
  padding: 1rem 0;
}

/* make each card a fixed-width 'card' (keeps cards visually consistent) */
.nb-team-grid .team-card {
  width: 100%;
  max-width: 320px;            /* matches the grid min/max above */
  display: flex;
  flex-direction: column;
  align-items: center;         /* center contents inside the card */
  text-align: center;
  padding: 1.25rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  gap: 0.75rem;
  box-sizing: border-box;
}

/* photo stays centered and constrained */
.nb-team-grid .team-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  -webkit-user-drag: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* contact card stays centered inside each card */
.nb-team-grid .team-contact-card {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
}

/* responsive: stack on smaller screens */
@media (max-width: 980px) {
  .nb-team-grid {
    grid-template-columns: 1fr;   /* single column stack */
    max-width: 720px;            /* optional: narrower center on smaller screens */
  }

  .nb-team-grid .team-card  {
    max-width: 100%;
    width: 100%;
  }

  .nb-team-grid .team-photo {
    width: 120px;
    height: 120px;
  }
}

/* Keep contact links compact inside the centered team contact pill */
.nb-team-grid .team-contact-card {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  padding: 6px 10px;               /* slightly wider so links don't touch edges */
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  white-space: nowrap;             /* prevent wrapping inside the pill */
  column-gap: 0.6rem;
}

/* Force anchors inside the pill to be inline and auto width */
.nb-team-grid .team-contact-card a {
  display: inline-block !important;   /* override any global block rules */
  width: auto !important;             /* ensure they don't expand */
  max-width: none !important;
  padding: 4px 8px;                   /* smaller internal padding for links */
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;                /* keep email/phone on one line */
  border-radius: 6px;
  background: transparent;
}

/* If one of the links is a "btn" and you want it styled as a tiny pill */
.nb-team-grid .team-contact-card a.btn {
  background: rgba(255,255,255,0.03);
  color: #fff;
  box-shadow: none;
  padding: 6px 10px;
}

/* Make sure the dot separator doesn't make the pill too wide on small screens */
.nb-team-grid .team-contact-card span {
  display: inline-block;
  padding: 0 4px;
  color: rgba(255,255,255,0.6);
}

/* Small screens: allow wrapping if absolutely necessary, but keep compact */
@media (max-width: 480px) {
  .nb-team-grid .team-contact-card {
    padding: 6px;
    gap: 0.35rem;
  }
  .nb-team-grid .team-contact-card a { padding: 4px 6px; font-size: 0.95rem; }
}


/* slot images: stacked via absolute/fill to allow smooth fades */
.preview-gallery .grid-preview .preview-slot {
  position: relative;
  width: calc(33.333% - 0.53rem);
  border-radius: 10px;
  overflow: hidden;
  height: 170px;
  flex: 0 0 auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
@media (max-width:900px){ .preview-gallery .grid-preview .preview-slot { width: calc(50% - 0.4rem); height: 140px; } }
@media (max-width:520px){ .preview-gallery .grid-preview .preview-slot { width:100%; height:120px; } }

/* two stacked imgs per slot for crossfading */
.preview-gallery .preview-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 700ms cubic-bezier(.2,.9,.25,1);
  opacity: 0;
  will-change: opacity;
}

/* visible layer */
.preview-gallery .preview-slot img.visible {
  opacity: 1;
}

/* the anchor wrapper remains clickable and accessible */
.preview-gallery .preview-slot a,
.preview-gallery .preview-slot button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}

/* ========== CONTACT / FORM ========== */
.contact-form{ max-width:720px; margin-top:1rem; display:grid; gap:0.75rem; }
.contact-form label{ display:flex; flex-direction:column; font-size:0.9rem; color: var(--muted); }
.contact-form input, .contact-form textarea{
  margin-top:0.35rem;
  padding:0.75rem;
  border-radius:8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: white;
  font-family: var(--font-sans);
}

/* Center the contact columns block horizontally as a unit */
.contact-columns {
  display: grid;                    /* keep grid layout */
  grid-template-columns: 1fr 360px; /* form | image */
  gap: 2rem;
  align-items: center;              /* vertical centering of children */
  justify-content: center;          /* center the whole grid horizontally */
  width: 100%;
  box-sizing: border-box;
}

/* Constrain the left column so it doesn't expand too wide */
.contact-columns > section {
  width: 100%;
  max-width: 720px; /* prevents the form from growing too wide when centered */
}

/* Ensure the aside/image column keeps its intended width */
.contact-columns > aside {
  width: 360px;
  max-width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Small screens: stack and keep centered */
@media (max-width: 900px) {
  .contact-columns {
    grid-template-columns: 1fr;
    justify-content: stretch; /* allow full width on mobile */
    gap: 1rem;
  }
  .contact-columns > aside { order: 2; width: 100%; max-width: none; }
  .contact-columns > section { order: 1; max-width: none; }
}



/* ===== Compact contact pill for team cards (override any global block rules) ===== */
.nb-team-grid .team-card {
  position: relative;        /* ensure pill sits relative to each card */
  overflow: visible;         /* allow pill to visually extend if needed */
}

/* The pill itself — size to contents, centered, not full-width */
.nb-team-grid .team-contact-card {
  display: inline-flex !important;      /* inline-flex so it sizes to children */
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.03);
  white-space: nowrap;                  /* keep each link on one line */
  max-width: calc(100% - 32px);         /* safety clamp inside narrow cards */
  width: auto !important;               /* override width:100% globals */
  box-sizing: border-box;
  align-self: center;                   /* center in the card column */
  position: static !important;          /* ensure it's not absolutely positioned */
}

/* Make sure links don't stretch and show an ellipsis if too long */
.nb-team-grid .team-contact-card a,
.nb-team-grid .team-contact-card .contact-item {
  display: inline-block !important;     /* override any global block rules */
  width: auto !important;
  max-width: 170px;                     /* prevents super-long text from widening the pill */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border-radius: 6px;
}

/* Optionally style icons inside the pill smaller so they don't force width */
.nb-team-grid .team-contact-card svg,
.nb-team-grid .team-contact-card .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* If one of the link types should look like a small CTA */
.nb-team-grid .team-contact-card a.btn {
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  color: #fff;
  box-shadow: none;
}

/* On very small screens allow natural wrapping and full-width pill */
@media (max-width: 520px) {
  .nb-team-grid .team-contact-card {
    display: flex !important;
    width: 100% !important;
    justify-content: center;
    gap: 0.5rem;
    padding: 8px;
  }
  .nb-team-grid .team-contact-card a,
  .nb-team-grid .team-contact-card .contact-item {
    max-width: none;
    white-space: normal;
  }
}


/* ===== Team contact: stack email + phone for full visibility ===== */
.nb-team-grid .team-contact-card {
  display: flex !important;
  flex-direction: column;       /* stack vertically */
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.03);
  width: auto !important;       /* let it size naturally */
  max-width: 320px;             /* keeps pill aligned with card width */
  box-sizing: border-box;
  white-space: normal;          /* allow wrapping if needed */
  text-align: center;
}

/* each line inside the pill (email / phone) */
.nb-team-grid .team-contact-card .contact-item,
.nb-team-grid .team-contact-card a {
  display: inline-flex !important;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  white-space: normal;          /* allow wrap instead of ellipsis */
  overflow: visible;
  text-overflow: clip;
  padding: 6px 8px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border-radius: 8px;
}

/* make icons compact */
.nb-team-grid .team-contact-card svg,
.nb-team-grid .team-contact-card .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* On very small screens let the pill expand to card width */
@media (max-width: 520px) {
  .nb-team-grid .team-contact-card {
    width: 100% !important;
    max-width: none;
    align-items: center;
    padding: 10px;
  }
}


/* media grid */
.media-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:1rem; }
.media-card video{ width:100%; border-radius:10px; display:block; }

/* ========== REVEAL ANIMATIONS ========== */
.reveal-up, .reveal-left, .reveal-right{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms cubic-bezier(.2,.9,.2,1), transform 620ms cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity;
}
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.in-view { opacity:1; transform: translateY(0) translateX(0); }

/* scroll hint */
.scroll-hint{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); margin-top:12px; opacity:0.95; }
.scroll-hint .arrow{ width:18px; height:18px; border-left:2px solid var(--muted); border-bottom:2px solid var(--muted); transform: rotate(-45deg); animation: scroll-dot 1.2s infinite; }
@keyframes scroll-dot { 0% { transform: translateY(0) rotate(-45deg); opacity:1 } 50% { transform: translateY(10px) rotate(-45deg); opacity:0.45 } 100% { transform: translateY(0) rotate(-45deg); opacity:1 } }

/* accessibility focus */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(37,178,225,0.18);
  outline-offset: 3px;
  box-shadow: 0 12px 40px rgba(37,178,225,0.06);
}

/* small utilities */
.text-muted { color: var(--muted); font-size: 0.95rem; }
.kicker { color: var(--brand-magenta); font-weight: 700; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px){
  :root{ --header-height: 80px; }
  .logo img{ height: 100px; }
  .header-inner{ padding: 0 0.75rem; }

  .features{ grid-template-columns: 1fr; margin-top: 0; }
  .team-grid{ grid-template-columns: 1fr; }
  .masonry-item{ height: 180px; }

  .drone{ display:none; }
  .burger{ display:block; }
  .nav{ display:none; }
  .nav.nav-open{
    display:flex !important;
    flex-direction: column;
    gap:0.6rem;
    padding: 1rem;
    background: rgba(6,6,23,0.95);
    border-radius: 8px;
    position: absolute;
    top: calc(var(--header-height) + 8px);
    right: 1rem;
  }

  .preview-gallery img{ height:120px; object-fit: cover; }
  .split-section{ grid-template-columns: 1fr; }
}

/* ===== NiteBrite footer (global) ===== */
:root {
  --nb-footer-logo-height: 200px; /* change to taste (120/140/etc) */
  --nb-footer-padding: 40px;
}

.nitebrite-footer {
  background: #000;
  color: #e6eef6;
  padding: var(--nb-footer-padding) 0;
  border-top: 1px solid rgba(255,255,255,0.03);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.nitebrite-footer__inner {
  max-width: var(--container,1100px);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 420px 280px;
  gap: 22px;
  align-items: center;
}

.nitebrite-footer__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.nitebrite-footer__logo {
  height: var(--nb-footer-logo-height);
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,0.45));
  margin: 0;
}

.nitebrite-footer__strap {
  margin: 0;
	margin-top: -30px;
	margin-bottom: 10px;
  color: #bfc8d3;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 0.86rem;
}

.nitebrite-footer__cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.96rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg,#25b2e1,#722c8b,#b81d89);
  box-shadow: 0 12px 36px rgba(114,44,139,0.12);
}

.nitebrite-footer__center { text-align: center; }
.nitebrite-footer__navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 34px;
  justify-content: center;
  align-items: center;
}
.nitebrite-footer__navlist a {
  color: #bfc8d3;
  text-decoration: none;
  font-weight: 600;
  padding: 6px;
}
.nitebrite-footer__navlist a:hover { color: #fff; transform: translateY(-3px); }

.nitebrite-footer__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.nb-social-link {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background: rgba(255,255,255,0.03);
  color: #bfc8d3;
  text-decoration:none;
  transition: transform .16s ease, background .16s ease, color .16s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.nb-social-link svg { width:18px; height:18px; fill: currentColor; }
.nb-social-link:hover { transform: translateY(-4px); color: #fff; background: linear-gradient(90deg,#25b2e1,#722c8b,#b81d89); box-shadow: 0 22px 60px rgba(114,44,139,0.18); }

.nitebrite-footer__copyright { margin: 0; color: #bfc8d3; font-size: 0.95rem; }

/* responsive: stack on small screens */
@media (max-width: 980px) {
  .nitebrite-footer__inner { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 18px; }
  .nitebrite-footer__left, .nitebrite-footer__right { align-items: center; }
  .nitebrite-footer__logo { height: calc(var(--nb-footer-logo-height) * 0.8); }
  .nitebrite-footer__navlist { gap: 18px; flex-wrap: wrap; justify-content:center; }
}

/* OPTION A: Make footer always use the stacked / mobile layout */
.nitebrite-footer__inner {
  grid-template-columns: 1fr !important;
  text-align: center !important;
  gap: 16px !important;
  padding: 18px !important;
}

.nitebrite-footer__left,
.nitebrite-footer__center,
.nitebrite-footer__right {
  align-items: center !important;
  justify-content: center !important;
}

.nitebrite-footer__left { display:flex; flex-direction:column; gap:10px; }
.nitebrite-footer__logo { height: calc(var(--nb-footer-logo-height,120px) * 0.9) !important; margin: 0 auto !important; }
.nitebrite-footer__navlist { flex-wrap: wrap !important; gap: 18px !important; justify-content:center !important; }
.nitebrite-footer__right { gap: 10px !important; }

/* Normalize footer social icons */
.nb-social-link,
.nitebrite-footer__socials a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;                 /* prevents text / inherited font-size from affecting icon */
  line-height: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: #bfc8d3;
}

/* Ensure footer social icons are a consistent size */
.nb-social-link {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;          /* prevent inherited font-size from affecting icon */
  line-height: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: #bfc8d3;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, color .16s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Force inline SVGs to a fixed icon size */
.nb-social-link svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}

/* If you ever use an <img> for icons */
.nb-social-link img {
  width: 18px !important;
  height: 18px !important;
  display: block;
  object-fit: contain;
}

/* Hover effect preserved */
.nb-social-link:hover {
  transform: translateY(-4px);
  color: #fff;
  background: linear-gradient(90deg,#25b2e1,#722c8b,#b81d89);
}




/* Footer social icon normalization — paste at end of style.css */
.nitebrite-footer__socials,
.nitebrite-footer__socials a,
.nitebrite-footer__socials .nb-social-link {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* make the button circle consistently sized */
.nitebrite-footer__socials .nb-social-link {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-size: 0;                /* prevent text size inheritance */
  line-height: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: #bfc8d3;
  display: inline-grid;
  place-items: center;
}

/* force inline SVGs / images inside social links to small icon size */
.nitebrite-footer__socials .nb-social-link svg,
.nitebrite-footer__socials .nb-social-link img {
  width: 18px !important;
  height: 18px !important;
  display: block;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* if a large preview image snuck into footer accidentally, clamp it */
.nitebrite-footer__socials img.large-preview,
.nitebrite-footer__right > img {
  width: 88px !important;
  height: auto !important;
  max-width: 100%;
  display:block;
}

/* preserve hover look */
.nitebrite-footer__socials .nb-social-link:hover {
  transform: translateY(-4px);
  color: #fff;
  background: linear-gradient(90deg,#25b2e1,#722c8b,#b81d89);
}


/* FOOTER ICONS: normalize and clamp any stray footer images */
.nitebrite-footer__socials { display:flex; gap:12px; align-items:center; justify-content:center; }

/* Social button */
.nb-social-link {
  display: inline-grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.03) !important;
  color: #bfc8d3 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

/* Force SVG / IMG inside social link to icon size */
.nb-social-link svg,
.nb-social-link img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Hide any other <img> inside footer that is NOT the footer logo (prevents accidental large previews) */
.nitebrite-footer img:not(.nitebrite-footer__logo) {
  display: none !important;
}

/* hover */
.nb-social-link:hover {
  transform: translateY(-4px);
  color: #fff !important;
  background: linear-gradient(90deg,#25b2e1,#722c8b,#b81d89) !important;
}

/* ===== Media page visual fixes — scoped to .media-wrap =====
   - restore card borders & shadow
   - enforce thumbnail sizing & roundness
   - keep thumbnails responsive and centered
   - reduce oversized play-icon and spacing
*/
.media-wrap .video-grid {
  gap: 18px;
  grid-auto-rows: auto;
  align-items: start;
}

/* card container: remove accidental global overrides */
.media-wrap .video-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  overflow: hidden;
  padding: 0; /* meta has its own padding below */
  border: 1px solid rgba(255,255,255,0.06); /* visible border */
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  min-height: 0; /* avoid flex overflow issues */
}

/* thumbnail frame: keep height ratio and clamp max height on large screens */
.media-wrap .thumb {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  max-height: 340px;            /* caps super-tall thumbnails on large screens */
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: #000;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01);
}

/* ensure the image fills the thumb, but is constrained to the frame */
.media-wrap .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  -webkit-user-drag: none;
}

/* slightly smaller play icon so it doesn't visually dominate */
.media-wrap .play-overlay {
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 8px 22px rgba(0,0,0,0.6);
}

/* meta area (title + actions) visually separated from image */
.media-wrap .video-meta {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));
}

/* title: give room, limit long text */
.media-wrap .video-title {
  font-weight: 700;
  color: #fff;
  margin: 0;
  flex: 1 1 60%;
  min-width: 0; /* allows truncation on small screens */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* show up to 2 lines */
  -webkit-box-orient: vertical;
}

/* action area alignment */
.media-wrap .video-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* keep the Watch button consistent size */
.media-wrap .watch-button {
  padding: 8px 12px;
  font-size: 0.95rem;
}

/* Responsive tweak: smaller max thumbnail height on phones */
@media (max-width: 720px) {
  .media-wrap .thumb { max-height: none; padding-top: 56.25%; }
  .media-wrap .video-card { border-radius: 10px; }
  .media-wrap .play-overlay { font-size: 28px; }
}


/* ===== center Media heading & hint (scoped) ===== */
.media-wrap .media-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  text-align: center !important;
	margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.media-wrap .media-hero h1,
.media-wrap .media-hero .inline-hint,
.media-wrap .media-hero p {
  margin: 0 !important;
  width: 100%;
}

/* slightly bump the hint style so it reads like a subtitle */
.media-wrap .media-hero .inline-hint {
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.2px;
}

/* optional: tighten spacing on small screens */
@media (max-width: 520px) {
  .media-wrap .media-hero { gap: 0.25rem !important; padding: 0 10px; }
  .media-wrap .media-hero .inline-hint { font-size: 0.95rem; }
}



/* ===== Modal / player: force fullscreen centered player ===== */
.video-modal,
#videoModal {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important; /* top-most */
  padding: 24px !important;
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(6px) !important;
}

/* show state */
.video-modal.open,
#videoModal.open {
  display: flex !important;
}

/* player container: constrain to viewport and always fill */
.player-frame,
#playerFrame {
  width: 100% !important;
  max-width: 1200px !important;
  height: calc(100vh - 120px) !important; /* leave room for header / padding */
  max-height: 90vh !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7) !important;
  background: #000 !important;
  display: block !important;
}

/* iframe inside player must always fill */
.player-frame iframe,
#playerFrame iframe {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
}

/* ensure close button is visible and clickable */
.modal-close,
#modalClose {
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  z-index: 2147483650 !important;
  background: rgba(0,0,0,0.35) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-size: 20px !important;
}

/* mobile: full-screen fill */
@media (max-width: 720px) {
  .player-frame, #playerFrame { max-width: 100% !important; height: calc(100vh - 60px) !important; border-radius: 6px !important; }
  .video-modal, #videoModal { padding: 12px !important; }
}

/* ===== Footer SVG/icon restore (scoped to NiteBrite footer) ===== */
.nitebrite-footer__socials { display:flex; gap:12px; align-items:center; }

/* Icon container */
.nitebrite-footer__socials .nb-social-link {
  display:inline-grid !important;
  place-items:center !important;
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--nbf-muted) !important;           /* icon color via currentColor */
  text-decoration:none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease !important;
  overflow: visible !important;
}

/* Inline SVGs */
.nitebrite-footer__socials .nb-social-link svg {
  width:18px !important;
  height:18px !important;
  display:block !important;
  fill: currentColor !important;   /* ensures SVG uses the link color */
  opacity: 1 !important;
  transform-origin: center center !important;
}

/* Hover state */
.nitebrite-footer__socials .nb-social-link:hover {
  transform: translateY(-4px) !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--nbf-cyan), var(--nbf-purple), var(--nbf-pink)) !important;
}
.nitebrite-footer__socials .nb-social-link:hover svg { transform: scale(1.06) !important; }

/* If some global rule accidentally set svg to none/hidden, force visibility */
.nitebrite-footer__socials .nb-social-link svg[hidden] { display:block !important; visibility:visible !important; }


/* NiteBrite slideshow (crossfade) */
.nitebrite-slideshow-wrap .slideshow-title {
  text-align: center;
  margin-bottom: 0.25rem;
  font-weight: 700;
  color: #fff;
}
.nitebrite-slideshow-wrap .slideshow-subhead {
  text-align: center;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* slideshow container */
.nitebrite-slideshow {
  position: relative;
  width: 100%;
  height: 420px;            /* desktop height - adjust as needed */
  max-height: 56vh;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  display: block;
}

/* each slide */
.nitebrite-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 900ms cubic-bezier(.2,.9,.2,1), transform 900ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
  display: block;
}

/* visible slide */
.nitebrite-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* image styling */
.nitebrite-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* caption (optional) overlay */
.nitebrite-slide .slide-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
}

/* controls */
.slideshow-controls {
  display:flex;
  gap:0.5rem;
  justify-content:center;
  align-items:center;
  margin-top:12px;
}
.sl-control {
  background: rgba(255,255,255,0.06);
  color:var(--muted);
  border: 0;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:18px;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.sl-control:hover { transform: translateY(-4px); color: #fff; background: linear-gradient(90deg, var(--brand-cyan), var(--brand-magenta)); }

/* responsive */
@media (max-width: 900px) {
  .nitebrite-slideshow { height: 320px; }
  .nitebrite-slide .slide-caption { left: 12px; bottom: 12px; padding: 7px 10px; font-size:0.9rem; }
}
@media (max-width: 520px) {
  .nitebrite-slideshow { height: 240px; }
  .slideshow-controls { gap:0.4rem; }
}


/* Slideshow split layout: text left, square slideshow right */
.gallery-split {
  display: grid;
  grid-template-columns: 1fr 520px; /* left flexible, right fixed slideshow width */
  gap: 2.25rem;
  align-items: center;
}


/* make slideshow responsive */
:root { --slideshow-max: 520px; }

.sl-left { padding-right: 0.5rem; }
.sl-left .section-title { margin-bottom: 0.4rem; }
.sl-left .slideshow-subhead { color: var(--muted); margin-bottom: 1rem; max-width: 44ch; }
.sl-left-cta .btn { margin-top: 0.5rem; }


/* slideshow container is square via aspect-ratio */
.nitebrite-slideshow {
  width: 100%;
  max-width: var(--slideshow-max);
  aspect-ratio: 1 / 1;      /* forces square */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}

/* each slide layers on top of each other */
.nitebrite-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.2,.9,.2,1), transform 600ms cubic-bezier(.2,.9,.2,1);
  transform: scale(1.02);
  padding: 0; /* image touches edges */
  pointer-events: none;
}

/* active slide visible */
.nitebrite-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* image fills square and stays cropped */
.nitebrite-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop to square nicely */
  display: block;
  border-radius: 8px;
}

/* optional small caption/label */
.nitebrite-slide .slide-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: rgba(255,255,255,0.95);
  font-weight:600;
  background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0.18));
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
}

/* controls — align right under slideshow */
.sl-right .slideshow-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

/* control button visuals */
.sl-control {
  border: 0;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.sl-control:hover { transform: translateY(-3px); color: #fff; background: linear-gradient(90deg,var(--brand-cyan),var(--brand-magenta)); }

/* small-screen: stack */
@media (max-width: 980px) {
  .gallery-split { grid-template-columns: 1fr; gap: 1.25rem; }
  .sl-right { order: 2; }
  .sl-left { order: 1; text-align: left; }
  .nitebrite-slideshow { max-width: 100%; aspect-ratio: 1 / 1; }
  .slideshow-controls { justify-content: center; }
}

/* -------------------------
   Center the text column
   ------------------------- */
.sl-left {
  display: flex;
  flex-direction: column;
  align-items: center;      /* center horizontally */
  justify-content: center;  /* center vertically within the grid cell */
  text-align: center;       /* center inline text */
  padding-right: 0.5rem;
  gap: 0.6rem;
}

.sl-left .section-title {
  margin: 0 0 0.25rem;

}

/* use when .lead is INSIDE .section-title */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;    /* horizontally center children */
  justify-content: center;/*
	vertically if needed */
  text-align: center;     /* ensures text inside children centers */
  gap: 0.25rem; 
	text-size: 4rem;
	/* optional spacing between title + lead */
}
galley 
/* center both elements */
.section-title,
.lead {
  text-align: center;
}

/* OR target .lead that comes right after section-title */
.section-title + .lead {
  text-align: center;
}


.sl-left .slideshow-subhead {
  color: var(--muted);
  margin: 0 0 1rem;
  max-width: 44ch;
}

/* center the CTA/button */
.sl-left-cta {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 3) A solid black band immediately below the header
   (this prevents the 'edge' showing the page BG as a different color) */
.site-header::after {
  content: "";
                        /* keep it locked under the header */
  left: 0;
  right: 0;
  top: calc(var(--header-height, 110px)); /* sits immediately below header */
  height: 48px;                           /* change if you want thicker/thinner */
  background: #000000;                    /* pitch black */
  pointer-events: none;
  z-index: 9998;                          /* just below header but above content */
}

/* ---------- CTA assembly: multicolor title + brighter dots ---------- */

/* make title large and multicolored (uses background-clip) */
.assembly-target {
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1.02;
  margin: 0;
  font-size: clamp(2.2rem, 6.2vw, 5rem); /* larger like you wanted */
  background: linear-gradient(90deg,
    #25b2e1 0%,
    #722c8b 40%,
    #b81d89 68%,
    #f39bff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1), background-position 1100ms ease;
  text-wrap: balance;
  will-change: opacity, transform, background-position;
  /* small shadow for pop when visible */
  text-shadow: 0 6px 26px rgba(0,0,0,0.45);
}

/* when animation starts, keep title hidden (dots assemble) */
.wow-cta.animating .assembly-target {
  opacity: 0 !important;
  transform: translateY(6px);
}

/* assembled state: show the multicolor title and nudge gradient */
.wow-cta.assembled .assembly-target {
  opacity: 1 !important;
  transform: translateY(0) !important;
  background-position: 100% 50%;
}

/* subtext */
.cta-sub { color: var(--muted); margin-top: .35rem; margin-bottom: .25rem; }

/* ===== smoother continuous color swirl for assembly headline =====
   Replace previous .assembly-target.swirl and @keyframes nb-swirl with this block.
*/
.assembly-target {
  /* smoother multi-stop gradient to avoid hard bands */
  background: linear-gradient(
    90deg,
    #6a2780 0%,
    #7f3d95 12%,
    #9a2f89 28%,
    #b81d89 42%,
    #d05aa0 52%,
    #40a7d6 70%,
    #25b2e1 82%,
    #6a2780 100%
  );

  /* make the stripe long so it can glide continuously */
  background-size: 240% 100%;
  background-repeat: repeat-x;

  /* text-fill via background-clip */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
  color: transparent;

  /* initial entrance (keeps fade-in you already like) */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
  display: inline-block;
	padding: .2em;
}

/* visible state */
.assembly-target.visible { opacity: 1; transform: none; }

/* continuous swirl - LONGER, SMOOTH, LINEAR */
.assembly-target.swirl {
  animation: nb-swirl-smooth 12s linear infinite;
  /* subtle shadow so the colored text pops */
  text-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* keyframes: move background smoothly left→right over the extended strip */
@keyframes nb-swirl-smooth {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .assembly-target.swirl { animation: none; }
}

/* =========================
   Override patch — paste at end of style.css
   ========================= */

/* 1) Section titles + lead text — make them consistent and centered */
.section-title {
  display: block; /* ensure block layout */
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.5rem;
  line-height: 1.05;
  text-align: center !important;
  /* responsive size similar to the media page styling */
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  letter-spacing: -0.02em;
}

/* If your .section-title wraps a small .lead inside, this will still center it */
.section-title .lead,
.section-title + .lead,
.lead {
  margin: 0 auto 1rem;
  color: var(--muted) !important;
  text-align: center !important;
  max-width: 64ch;
  font-size: clamp(0.98rem, 1.4vw, 1.125rem) !important;
  line-height: 1.45;
}

/* 2) Fix CTA text sizing — you used `text-size` earlier */
.cta-text { 
  font-size: clamp(1.25rem, 2.6vw, 1.5rem) !important;
  margin: 0;
  font-weight: 700;
}

/* 3) Restore feature card interactivity and stacking above hero overlay */
.feature-card {
  pointer-events: auto !important;   /* restore hover/clicks */
  z-index: 12;                       /* sit above hero overlay (which is z-index:1) */
  transform: translateZ(0);          /* keep it on the GPU layer */
}

/* Make sure hovered card is clearly on top and lifts smoothly */
.feature-card:hover,
.feature-card:focus-visible {
  z-index: 30 !important;
  transform: translate3d(0, -12px, 0) !important;
  transition: transform 140ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease !important;
}

/* Optional: stronger visible glow on hover for clarity */
.feature-card-one:hover  { box-shadow: 0 20px 60px rgba(37,178,225,0.12) !important; }
.feature-card-two:hover  { box-shadow: 0 20px 60px rgba(114,44,139,0.10) !important; }
.feature-card-three:hover{ box-shadow: 0 20px 60px rgba(184,29,137,0.12) !important; }

/* 4) Prevent hero-overlay from covering other sections unexpectedly:
   ensure overlay z-index stays low and only affects the hero area */
.hero-overlay { z-index: 1 !important; pointer-events: none !important; }

/* 5) A tiny responsive tweak so section titles don't get overwhelming on very small screens */
@media (max-width: 420px) {
  .section-title { font-size: clamp(1.6rem, 6.5vw, 2rem) !important; }
  .lead { font-size: 0.95rem !important; }
  .cta-text { font-size: 1.15rem !important; }
}

/* 6) Quick visual debug aid (remove after verifying) —
   outlines section-title when loading so you can confirm the rule is applied */
/* .section-title { outline: 2px dashed rgba(255,255,255,0.05); } */

/* ========================
   Contact page: reliable flex layout (override)
   Paste at end of style.css
   ======================== */

.contact-section {
  padding: 2.75rem 0 4.5rem;
  box-sizing: border-box;
}

/* Use a simple flex grid so the image sits inline reliably */
.contact-grid {
  display: flex;
  gap: 2rem;
  align-items: center;            /* vertical center */
  justify-content: center;        /* center the block on page */
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* left (form) grows, right is fixed */
.contact-form-wrap { flex: 1 1 0; min-width: 280px; }
.contact-aside { flex: 0 0 360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem; }

/* Title — ensure it is visible (not same color as background) */
.contact-title {
  color: var(--brand-magenta);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 0 0 1rem;
  text-align: left;
}

/* Form card look */
.contact-form {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  display: grid;
  gap: 0.85rem;
}

/* label + small label text */
.contact-form label { display:block; font-size: 0.92rem; color: var(--muted); }
.label-text { display:block; margin-bottom:0.4rem; font-weight:600; color: rgba(255,255,255,0.9); }

/* inputs */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="date"],
.contact-form textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.01);
}

/* textarea */
.contact-form textarea { min-height: 120px; resize: vertical; }

/* actions */
.contact-actions { display:flex; gap:0.8rem; align-items:center; margin-top:6px; }
.contact-actions .btn { padding: 0.62rem 1rem; font-weight:700; }

/* aside image */
.contact-aside-img {
  width: 100%;
  max-width: 360px;
  height: 360px;
  border-radius: 12px;
  object-fit: cover;
  display:block;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.03);
}

/* caption */
.aside-caption { font-size:1rem; color:var(--muted); text-align:center; margin:0; }

/* responsive: stack under 900px */
@media (max-width: 900px) {
  .contact-grid { flex-direction: column; gap: 1rem; align-items: stretch; }
  .contact-aside { order: 2; width:100%; max-width:100%; }
  .contact-title { text-align: center; }
  .contact-form { padding: 18px; }
  .contact-aside-img { max-width: 100%; width: 100%; }
}

/* Extra safety: override prior hide/display mistakes */
.contact-title, .contact-form-wrap, .contact-aside { display: block !important; visibility: visible !important; opacity: 1 !important; }

/* Hide any stray file input remnants */
.contact-form input[type="file"] { display:none !important; }

/* =========================
   Contact header / overlap fixes
   Paste at end of style.css
   ========================= */

/* Ensure the site header height variable exists (fallback) */
:root { --header-height: 110px; }

/* Make sure main content sits below the fixed header (safety override) */
main {
  /* keep your existing spacing but force a minimum safe offset */
  margin-top: calc(var(--header-height) + 12px) !important;
  scroll-padding-top: calc(var(--header-height) + 16px); /* improves in-page anchor scrolling */
}

/* Give the contact section an explicit top padding so it can't sit under header */
.contact-section {
  padding-top: calc(var(--header-height) + 28px) !important;
  /* keep a little breathing room */
  padding-bottom: 3.5rem !important;
  box-sizing: border-box;
}

/* If the contact grid was moved too high on some pages, push it down */
.contact-grid { margin-top: 6px !important; }

/* Make sure the contact title is visible and sized */
.contact-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--brand-magenta) !important; /* bright, visible color */
  font-weight: 800 !important;
  font-size: clamp(2.2rem, 2.4vw, 1.6rem) !important;
  line-height: 1.05 !important;
  margin-top: 0 !important;
  margin-bottom: 0.9rem !important;
  text-align: left !important;
  z-index: 3 !important;
}

/* If header::after (black band) was accidentally covering content, keep it under content */
.site-header::after {
  z-index: 9997 !important; /* below header but above page background */
}

/* safety: ensure no rule is hiding the entire contact block */
.contact-section, .contact-form-wrap, .contact-aside, .contact-title {
  pointer-events: auto !important;
}

/* small screens: maintain spacing under header */
@media (max-width: 900px) {
  main { margin-top: calc(var(--header-height) + 6px) !important; }
  .contact-section { padding-top: calc(var(--header-height) + 18px) !important; }
  .contact-title { text-align: center !important; font-size: clamp(1rem, 4.2vw, 1.4rem) !important; }
}

/* Reduce gap above the Media page header */
/* Paste near the end of style.css so it overrides earlier rules */

/* Make media hero sit closer to the fixed header */
.media-wrap .media-hero {
  margin-top: 6px !important;        /* tiny gap — adjust (0 / 6px / 12px) */
  padding-top: 6px !important;       /* ensure no internal padding pushes it down */
  scroll-margin-top: calc(var(--header-height, 110px) + 8px); /* good for anchor links */
}

/* Remove default h1/p top spacing that can add extra gap */
.media-wrap .media-hero h1,
.media-wrap .media-hero p,
.media-wrap .media-hero .inline-hint {
  margin-top: 0 !important;
  margin-bottom: 6px !important;    /* small vertical rhythm — tweak as needed */
  line-height: 1.08;
}

/* If you set a big top band under the header (site-header::after), make sure it
   doesn't push the hero down. This reduces the band height only for pages with .media-wrap */
.media-wrap ~ .site-header::after,
.site-header::after {
  /* only change if you are certain this band is causing extra space */
  /* height: 28px !important; */
}

/* Responsive: keep it compact on small screens too */
@media (max-width: 900px) {
  .media-wrap .media-hero { margin-top: 4px !important; padding-top: 6px !important; }
  .media-wrap .media-hero h1 { font-size: clamp(1.4rem, 5.6vw, 2.4rem); }
}

/* CTA band heading — smaller on desktop, larger on narrow screens */
.cta-text {
  font-size: 1.05rem;      /* desktop size — ~17px */
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
}

/* Slightly larger on tablets/phones for readability */
@media (max-width: 900px) {
  .cta-text {
    font-size: 1.6rem;     /* tablet/phone size */
  }
}

/* Optional: extra large phones / narrow screens */
@media (max-width: 520px) {
  .cta-text {
    font-size: 1.8rem;
  }
}


/* target the assembly text block (DOM) — override any other rules */
#assembly-target,
.assembly-target {
  font-size: 3rem !important;    /* change this value to taste */
  line-height: 1.05 !important;
  display: inline-block !important;
  transform-origin: center center !important; /* if transforms used */
  color: #f3f7fb !important;        /* ensure contrast if needed */
}

/* slightly larger on small screens so legible */
@media (max-width: 900px) {
  #assembly-target,
  .assembly-target {
    font-size: 1.6rem !important;
  }
}


/* ---------------------------
   Thanks page styles
   --------------------------- */
.thanks-page {
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 4.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(248,248,250,1) 0%, rgba(255,255,255,1) 100%);
  min-height: calc(100vh - 120px);
}

.thanks-card {
  width: 100%;
  max-width: 840px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(18, 25, 35, 0.08);
  padding: 2.25rem;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Brand area */
.thanks-brand {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.thanks-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
}

.thanks-wordmark {
  height: 48px;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

/* Heading + copy */
.thanks-title {
  font-size: 1.9rem;
  margin: 0.4rem 0 0.4rem;
  color: #1b1b1b;
  font-weight: 700;
}

.thanks-copy {
  color: #3b3b3b;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

/* Actions */
.thanks-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Re-usable button styles if not present in global CSS */
.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.625rem 1.15rem;
  font-weight: 600;
  transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
  box-shadow: 0 6px 18px rgba(11,13,15,0.05);
}


/* ===========================
   Thanks page dark theme (add at end of style.css)
   Background: #07101a, text: white
   Uses media/logo.png centered above the message
   =========================== */

.thanks-page {
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #07101a;
  color: #ffffff;
  padding: 3.5rem 1rem;
  min-height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.thanks-card {
  width: 100%;
  max-width: 860px;
  background: transparent;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(2,6,10,0.6);
  padding: 2.25rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.03);
  color: #ffffff;
}

/* Logo centered above title */
.thanks-logo-wrap { margin-bottom: 1rem; display:flex; justify-content:center; align-items:center; }
.thanks-main-logo {
  max-width: 420px;
  width: 68%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.6));
}

/* Heading + copy */
.thanks-title {
  font-size: 1.95rem;
  margin: 0.35rem 0 0.6rem;
  color: #ffffff;
  font-weight: 700;
}

.thanks-copy {
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

/* Actions */
.thanks-actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }

/* Buttons */
.btn { display:inline-block; text-decoration:none; border-radius:10px; padding:0.6rem 1.15rem; font-weight:600; transition: transform .14s ease, box-shadow .14s ease; box-shadow:0 8px 28px rgba(0,0,0,0.6); }
.btn-primary {  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.96rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg,#25b2e1,#722c8b,#b81d89);
  box-shadow: 0 12px 36px rgba(114,44,139,0.12); }
.btn-ghost { background: rgba(255,255,255,0.03); color:#fff; border:1px solid rgba(255,255,255,0.08); }

/* small helper text */
.thanks-small { color: rgba(255,255,255,0.78); font-size:0.95rem; margin-top:0.35rem; }

/* Footer chips & note */
.brand-chips { display:flex; gap:0.5rem; justify-content:center; margin-top:1rem; }
.brand-chips .chip { width:28px; height:14px; border-radius:6px; display:inline-block; box-shadow:0 8px 22px rgba(11,13,15,0.6); border:1px solid rgba(255,255,255,0.06); }

/* Footer text */
.footer-note { color: rgba(255,255,255,0.72); font-size:0.95rem; margin-top:0.5rem; }

/
/* Responsive tweaks */
@media (max-width: 680px) {
  .thanks-card { padding: 1.25rem; border-radius: 12px; }
  .thanks-main-logo { width: 80%; max-width: 300px; }
  .thanks-title { font-size: 1.55rem; }
  .btn { padding: 0.5rem 0.9rem; }
}

/* HEADER: blurred black transparent on scroll
   Paste this at the very end of style.css
*/

/* Scrolled state: blurred, semi-transparent black */
.site-header.scrolled {
  background: rgba(0,0,0,0.45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}


/* Fallback: if JS fails, don't hide content */
.reveal-up, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }


/* end of cleaned stylesheet */