/* =====================================================
   FORCE FEST 2K26 - SECOND PASS POLISH
   forcefest-pass2.css
   
   Technogenesis - Innovate. Create. Evolve.
   
   This file overrides and refines pass 1.
   Loaded last so it wins every cascade.
   
   Sections:
   1.  Token refinements
   2.  Navigation bar
   3.  Hero section
   4.  Results button
   5.  About Us
   6.  Events - day grouping
   7.  Event cards - polish
   8.  Timeline - lighter roadmap
   9.  Team cards
   10. Contact / Footer
   11. Unified button system
   12. Background & atmosphere
   13. Global spacing consistency
   14. Accessibility & reduced-motion
   ===================================================== */

/* ─────────────────────────────────────────────────────
   1. TOKEN REFINEMENTS
   Tighten the palette. Less purple noise, more intentional.
   ───────────────────────────────────────────────────── */
:root {
  --c-black: #050508;
  --c-bg: #080810;
  --c-bg-raised: #0e0e1a;
  --c-bg-card: #0b0b16;
  --c-cyan: #00e5ff;
  --c-cyan-soft: rgba(0, 229, 255, 0.12);
  --c-cyan-line: rgba(0, 229, 255, 0.2);
  --c-cyan-glow: rgba(0, 229, 255, 0.28);
  --c-purple: #a855f7;
  --c-purple-soft: rgba(168, 85, 247, 0.1);
  --c-white: #ffffff;
  --c-text: #dce8ee;
  --c-text-mid: #7a99a8;
  --c-text-dim: #445566;
  --c-border: rgba(0, 229, 255, 0.16);
  --c-border-dim: rgba(255, 255, 255, 0.07);
  --c-border-hair: rgba(255, 255, 255, 0.04);

  --s-card: 0 2px 12px rgba(0, 0, 0, 0.5);
  --s-card-up: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--c-border);
  --s-cyan: 0 0 20px rgba(0, 229, 255, 0.22);

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 32px;
  --sp-xl: 64px;
  --sp-2xl: 100px;

  --font-display: var(--p3-font-d, "Tektur", "Segoe UI", sans-serif);
  --font-body: "Sora", "Oxanium", sans-serif;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  --t-fast: 0.18s ease;
  --t-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
} /* ─────────────────────────────────────────────────────
   2. NAVIGATION BAR
   Issues: links too faint, no active indicator, letter-
   spacing inconsistent, hover color change only.
   Fix: stronger weight, clear underline active state,
   consistent spacing, subtle backdrop.
   ───────────────────────────────────────────────────── */

#qodef-page-header {
  background: rgba(5, 5, 8, 0.88) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border-bottom: 1px solid var(--c-border-dim) !important;
  transition: border-color var(--t-normal) !important;
}
#qodef-page-header:hover {
  border-bottom-color: var(--c-border) !important;
} /* Nav link base state */
.qodef-header-navigation .qodef-menu-item-text {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--c-text-mid) !important;
  transition: color var(--t-fast) !important;
  padding-bottom: 2px !important;
  border-bottom: 1px solid transparent !important;
  transition:
    color var(--t-fast),
    border-color var(--t-fast) !important;
} /* Nav link hover */
.qodef-header-navigation li:hover > a .qodef-menu-item-text,
.qodef-header-navigation li:focus-within > a .qodef-menu-item-text {
  color: var(--c-cyan) !important;
  border-bottom-color: var(--c-cyan) !important;
} /* Nav link active (current page) */
.qodef-header-navigation li.current-menu-item > a .qodef-menu-item-text,
.qodef-header-navigation li.current-menu-ancestor > a .qodef-menu-item-text {
  color: var(--c-cyan) !important;
  border-bottom-color: var(--c-cyan) !important;
} /* Spacing between nav items */
.qodef-header-navigation ul.menu > li {
  margin: 0 18px !important;
} /* Dropdown menu polish */
.qodef-drop-down-second {
  background: rgba(8, 8, 16, 0.97) !important;
  border: 1px solid var(--c-border-dim) !important;
  border-top: 1px solid var(--c-border) !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}
.qodef-drop-down-second .qodef-menu-item-text {
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  font-weight: 500 !important;
  color: var(--c-text-mid) !important;
  padding: 6px 0 !important;
  border-bottom: none !important;
}
.qodef-drop-down-second li:hover .qodef-menu-item-text {
  color: var(--c-cyan) !important;
  border-bottom: none !important;
} /* Hide the chevron arrow SVGs - they add visual noise */
.qodef-svg--menu-arrow {
  display: none !important;
} /* Mobile header */
#qodef-page-mobile-header {
  background: rgba(5, 5, 8, 0.95) !important;
  border-bottom: 1px solid var(--c-border-dim) !important;
}
.qodef-mobile-header-navigation .qodef-menu-item-text {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--c-text-mid) !important;
}
.qodef-mobile-header-navigation li:hover .qodef-menu-item-text {
  color: var(--c-cyan) !important;
} /* ─────────────────────────────────────────────────────
   3. HERO SECTION
   Issues: date/venue text weak, disconnected hierarchy,
   date div uses arbitrary top%, inline style overload.
   Fix: tighten the vertical rhythm, improve contrast.
   ───────────────────────────────────────────────────── */

rs-layer[data-xy*="yo:20px"] {
  color: rgba(220, 232, 238, 0.75) !important;
  letter-spacing: 0.14em !important;
} /* Date line - better contrast and spacing */
.event-date {
  font-family: var(--font-display) !important;
  font-size: clamp(14px, 2vw, 22px) !important;
  color: rgba(0, 229, 255, 0.65) !important;
  letter-spacing: 0.2em !important;
} /* Thin horizontal rule below hero - visual separator */
.hero-separator {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--c-border) 20%,
    var(--c-border) 80%,
    transparent 100%
  );
  margin: 0;
} /* ─────────────────────────────────────────────────────
   4. UNIFIED BUTTON SYSTEM
   Issues: btnrg uses #7ce3ff fill (too bright/garish),
   rs-layer button has no cohesion with rest of site.
   Every button needs ONE visual language.

   System:
   ff-btn            - default outlined cyan
   ff-btn--solid     - filled cyan (primary CTA)
   ff-btn--ghost     - no background, just text + chevron
   ff-btn--sm        - smaller variant
   ───────────────────────────────────────────────────── */

.ff-btn,
.btnrg,
rs-layer button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 24px !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast) !important;
  position: relative !important;
  white-space: nowrap !important;
} /* Default (outlined) - used for team Contact buttons */
.btnrg {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-mid) !important;
  padding: 8px 20px !important;
  font-size: 0.7rem !important;
  margin: 24px 0 8px !important;
}
.btnrg:hover {
  border-color: var(--c-cyan) !important;
  color: var(--c-cyan) !important;
  box-shadow: none !important;
  background: rgba(0, 229, 255, 0.06) !important;
} /* Results / hero CTA - solid with cyan fill */
rs-layer button {
  background: transparent !important;
  border: 1px solid var(--c-cyan) !important;
  color: var(--c-cyan) !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.2em !important;
  padding: 13px 40px !important;
  box-shadow: none !important;
}
rs-layer button:hover {
  background: var(--c-cyan) !important;
  color: var(--c-black) !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.3) !important;
} /* View Details card button - outlined small */
.ff-card-btn {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--c-text-mid) !important;
  text-decoration: none !important;
  padding: 7px 14px !important;
  border: 1px solid var(--c-border-dim) !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast) !important;
}
.ff-card-btn:hover {
  color: var(--c-cyan) !important;
  border-color: var(--c-border) !important;
  background: var(--c-cyan-soft) !important;
  box-shadow: none !important;
}
.ff-card-btn::before {
  display: none !important; /* remove pass-1 gradient overlay */
} /* Back to Top button */
.ff-back-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-mid);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-sm);
  background: transparent;
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast);
}
.ff-back-top:hover {
  color: var(--c-cyan);
  border-color: var(--c-border);
  background: var(--c-cyan-soft);
}

/* ─────────────────────────────────────────────────────
   5. ABOUT US SECTION
   Issues: text uses inline `font-family: rounded` which
   renders in generic fallback; no visual identity for
   Technogenesis;gap too large on mid screens.
   Fix: clean layout, Technogenesis callout, better text.
   ───────────────────────────────────────────────────── */

.about-section {
  background: var(--c-bg) !important;
  padding: clamp(64px, 8vw, 110px) 0 !important;
  position: relative !important;
  overflow: hidden !important;
} /* Subtle ambient corner glow - not competing */
.about-section::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(0, 229, 255, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.about-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(40px, 6vw, 80px) !important;
  padding: 0 clamp(24px, 5vw, 60px) !important;
  position: relative !important;
  z-index: 1 !important;
} /* Image side */
.about-image-container {
  flex: 0 0 40% !important;
  aspect-ratio: auto !important;
}
.animated-border {
  border-radius: var(--r-lg) !important;
  width: 100% !important;
}
.animated-border::before {
  background: linear-gradient(
    270deg,
    var(--c-purple) 0%,
    var(--c-cyan) 50%,
    var(--c-purple) 100%
  ) !important;
  background-size: 300% 300% !important;
  animation: animated-rgb-border 6s linear infinite !important;
}
.animated-border img {
  border-radius: calc(var(--r-lg) - 2px) !important;
  filter: brightness(0.9) saturate(0.95) !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
} /* Text side */
.about-content {
  flex: 1 !important;
} /* Override the inline font-family: rounded */
.about-content p {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
  color: var(--c-text-mid) !important;
  margin-bottom: 1rem !important;
} /* Technogenesis identity callout */
.about-theme-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-cyan);
  background: var(--c-cyan-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  margin-bottom: 18px;
}
.about-tagline {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--c-text-dim);
  letter-spacing: 0.08em;
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid var(--c-border-hair);
  font-style: italic;
} /* About section heading uses ff-section-title - left-align fix */
.about-content .ff-section-title {
  text-align: left !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  margin-bottom: 20px !important;
  color: var(--c-cyan) !important;
}
@media (max-width: 768px) {
  .about-container {
    flex-direction: column !important;
  }
  .about-image-container {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .about-content .ff-section-title {
    text-align: center !important;
  }
  .about-theme-tag {
    display: block;
    text-align: center;
    width: fit-content;
    margin: 0 auto 18px;
  }
} /* ─────────────────────────────────────────────────────
   6. EVENTS - DAY GROUPING HEADERS
   Issues: all events appear as one undifferentiated list.
   Fix: add day-group containers with clean divider headers.
   ───────────────────────────────────────────────────── */

.ff-events-grid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 60px) clamp(48px, 6vw, 72px) !important;
  gap: 24px !important;
} /* Day group wrapper */
.ff-event-day-group {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}
.ff-event-day-group + .ff-event-day-group {
  margin-top: 52px;
} /* Day header */
.ff-day-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.ff-day-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cyan);
  background: var(--c-cyan-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 5px 14px;
  white-space: nowrap;
}
.ff-day-name {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-text-mid);
  letter-spacing: 0.06em;
}
.ff-day-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--c-border), transparent);
} /*
.ff-event-searching .ff-events-line,
.ff-event-searching .ff-events-grid{
    display: none !important;
}*/

.ff-events-grid,
.ff-events-line,
.ff-events-glow {
  transition: opacity 0.25s ease;
}
.ff-event-searching .ff-events-grid,
.ff-event-searching .ff-events-line {
  opacity: 0;
} /* Day 2 header uses purple accent */
.ff-day-header--day2 .ff-day-label {
  color: #a78bfa;
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.22);
}
.ff-day-header--day2 .ff-day-rule {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.22), transparent);
} /* Events grid within a group */
.ff-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
@media (max-width: 640px) {
  .ff-day-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────
   7. EVENT CARDS - PASS 2 POLISH
   Issues: card hover scale+translate combination feels
   excessive; top bar gradient too rainbow; scan lines
   too prominent;card body gradient unnecessary.
   Fix: subdued hover, cleaner surfaces, less noise.
   ───────────────────────────────────────────────────── */

.ff-event-card {
  border-radius: var(--r-lg) !important;
  border-color: var(--c-border-dim) !important;
  background: var(--c-bg-card) !important;
  box-shadow: var(--s-card) !important;
}
.ff-event-card:hover {
  transform: translateY(-5px) !important; /* was -8px + scale */
  border-color: var(--c-border) !important;
  box-shadow: var(--s-card-up) !important;
} /* Top bar: just cyan, no purple - matches palette */
.ff-event-card::before {
  background: var(--c-cyan) !important;
  opacity: 0 !important;
  height: 1px !important;
}
.ff-event-card:hover::before {
  opacity: 0.7 !important;
} /* Remove corner accent (too decorative) */
.ff-event-card::after {
  display: none !important;
} /* Scan-line - more subtle */
.ff-card-image-wrap::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 4px,
    rgba(0, 0, 0, 0.04) 4px,
    rgba(0, 0, 0, 0.04) 5px
  ) !important;
} /* Card body - flat background, no gradient */
.ff-card-body {
  background: var(--c-bg-card) !important;
  padding: 18px 20px 20px !important;
  gap: 8px !important;
}
.ff-card-title {
  font-size: 1.1rem !important;
  letter-spacing: 0.04em !important;
}
.ff-card-desc {
  font-size: 0.8rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.6 !important;
  -webkit-line-clamp: 2 !important; /* 2 lines is enough */
}
.ff-card-footer {
  padding-top: 12px !important;
  border-top-color: var(--c-border-hair) !important;
}
.ff-card-day {
  font-size: 0.65rem !important;
  color: var(--c-text-dim) !important;
  letter-spacing: 0.12em !important;
} /* Badge - more restrained */
.ff-card-badge {
  font-size: 0.6rem !important;
  padding: 3px 8px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
} /* ─────────────────────────────────────────────────────
   8. TIMELINE - LIGHTER FLOATING ROADMAP
   Issues: too many decorative elements (pulse rings,
   glow boxes, tag chips), grid background competing
   with content. Replace with clean, airy roadmap.
   ───────────────────────────────────────────────────── */

.ff-schedule-section {
  padding: clamp(60px, 7vw, 96px) 0 !important;
  background: var(--c-bg) !important;
} /* Remove the grid background - it's too busy */
.ff-schedule-section::before {
  display: none !important;
}
.ff-timeline-wrap {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 40px) !important;
} /* Day badge */
.ff-timeline-day-badge {
  font-family: var(--font-display) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  padding: 5px 14px !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  background: var(--c-cyan-soft) !important;
  border-color: var(--c-border) !important;
  color: var(--c-cyan) !important;
}
.ff-timeline-day-label {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
} /* Spine - thinner, subtler */
.ff-timeline::before {
  width: 1px !important;
  background: linear-gradient(
    to bottom,
    var(--c-cyan) 0%,
    rgba(0, 229, 255, 0.15) 100%
  ) !important;
  box-shadow: none !important;
  left: 5px !important;
} /* Nodes - smaller, no pulse ring */
.ff-timeline-node {
  width: 11px !important;
  height: 11px !important;
  border-width: 1px !important;
  border-color: var(--c-cyan) !important;
  box-shadow: none !important;
  left: -34px !important;
  top: 5px !important;
  background: var(--c-bg) !important;
} /* Remove the pulse ring animation completely */
.ff-timeline-node::before {
  display: none !important;
}
.ff-timeline-item:hover .ff-timeline-node {
  background: var(--c-cyan) !important;
  box-shadow: none !important;
} /* Cards - flat, minimal */
.ff-timeline-card {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--c-border-hair) !important;
  border-radius: 0 !important;
  padding: 0 0 0 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ff-timeline-item:hover .ff-timeline-card {
  background: transparent !important;
  border-left-color: var(--c-border) !important;
  box-shadow: none !important;
}
.ff-timeline-time {
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  color: var(--c-cyan) !important;
  margin-bottom: 5px !important;
}
.ff-timeline-events {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.75 !important;
}
.ff-timeline-events strong {
  color: var(--c-text) !important;
  font-weight: 600 !important;
} /* Remove the tag chips - they clutter the clean roadmap */
.ff-timeline-tags {
  display: none !important;
} /* Tighter item spacing */
.ff-timeline-item {
  padding-bottom: 26px !important;
}
.ff-timeline {
  padding-left: 42px !important;
  margin-bottom: 48px !important;
} /* Day 2 timeline spine */
.ff-timeline:nth-of-type(2)::before,
.ff-timeline + .ff-timeline-day + .ff-timeline::before {
  background: linear-gradient(
    to bottom,
    rgba(168, 85, 247, 0.6) 0%,
    rgba(168, 85, 247, 0.12) 100%
  ) !important;
}

/* ─────────────────────────────────────────────────────
   9. TEAM CARDS - 2K26 REDESIGN
   Issues: profile picture position (absolute bottom -60px)
   creates overflow; nbsp spacing for role text;btnrg
   uses bright fill. Rebuild the card layout cleanly.
   ───────────────────────────────────────────────────── */

.sectionrg {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.cardrg {
  width: 220px !important;
  padding: 0 !important;
  background: var(--c-bg-card) !important;
  border: 1px solid var(--c-border-dim) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  text-align: center !important;
  transition:
    border-color var(--t-normal),
    box-shadow var(--t-normal),
    transform var(--t-normal) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.cardrg:hover {
  transform: translateY(-4px) !important;
  border-color: var(--c-border) !important;
  box-shadow: var(--s-card-up) !important;
} /* Profile photo area - new layout: top banner + circular photo */
.cover-photorg {
  width: 100% !important;
  height: 72px !important;
  background: linear-gradient(
    135deg,
    var(--c-bg-raised) 0%,
    rgba(0, 229, 255, 0.06) 100%
  ) !important;
  border-bottom: 1px solid var(--c-border-dim) !important;
  position: relative !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  flex-shrink: 0 !important;
}
.profilerg {
  position: absolute !important;
  width: 88px !important;
  height: 88px !important;
  bottom: -44px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  border: 2px solid var(--c-bg-card) !important;
  outline: 1px solid var(--c-border-dim) !important;
  object-fit: cover !important;
  background: var(--c-bg-raised) !important;
} /* Name - push down to clear the photo */
.profile-namerg {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  margin: 54px 16px 0 !important; /* 44px offset + 10px padding */
  letter-spacing: 0.02em !important;
}

.aboutrg {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--c-cyan) !important;
  margin: 6px 16px 0 !important;
  line-height: 1.4 !important;
} /* The btnrg Contact button */
.cardrg .btnrg {
  margin: 16px 16px 20px !important;
  padding: 7px 18px !important;
  font-size: 0.65rem !important;
  align-self: center !important;
}

/* ─────────────────────────────────────────────────────
   12. SECTION HEADING SYSTEM - CONSISTENCY
   Issues: ff-section-title has 6vw font size that's too
   large at mid breakpoints;subtitle spacing uneven.
   ───────────────────────────────────────────────────── */

.ff-section-title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.15em !important;
  color: var(--c-cyan) !important;
  line-height: 1.05 !important;
}
.ff-section-subtitle {
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
  color: var(--c-text-dim) !important;
} /* Section header divider line */
.ff-section-header::after {
  width: 48px !important;
  height: 1px !important;
  background: var(--c-cyan) !important;
  box-shadow: none !important;
  margin-top: 14px !important;
  opacity: 0.5;
} /* Section padding - unified */
.ff-section {
  padding: clamp(56px, 7vw, 96px) 0 !important;
}

/* ─────────────────────────────────────────────────────
   13. MARQUEE BAND
   Issue: marquee uses inline white color on near-white
   surface;logo proportions are inconsistent.
   ───────────────────────────────────────────────────── */

/* .qodef-text-marquee{
  border-top: 1px solid var(--c-border-hair);
  border-bottom: 1px solid var(--c-border-hair);
  background: var(--c-bg) !important;
}.qodef-m-text-1,
.qodef-m-text-2,
.qodef-m-text-3{
  font-family: var(--font-display) !important;
  font-size: clamp(0.7rem, 1.2vw, 0.88rem) !important;
  letter-spacing: 0.24em !important;
  color: var(--c-text-dim) !important;
}*/

/* ─────────────────────────────────────────────────────
   14. GLOBAL SPACING - REMOVE <br> ABUSE
   Replace all the loose br-based spacing with clean
   CSS margins on the wrapper elements.
   ───────────────────────────────────────────────────── */

.ff-section#events {
  padding-top: clamp(56px, 7vw, 96px) !important;
  padding-bottom: 0 !important;
} /* Spacing between About and Events */
.about-section + br,
.about-section + .ff-section {
  margin-top: 0 !important;
} /* Team section heading alignment */
#team.ff-section-title {
  margin-bottom: 0 !important;
} /* Map section */
.map1 {
  margin-top: 0 !important;
}
.map1 .google-map {
  height: 28rem !important;
}
.map1 .google-map iframe {
  border-radius: 0 !important;
  filter: invert(90%) hue-rotate(180deg) !important;
} /* ─────────────────────────────────────────────────────
   15. SCROLLBAR - UNIFIED
   Override the ouredits.css animated scrollbar with the
   simpler, more intentional pass-1 version.
   ───────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 5px !important;
}
::-webkit-scrollbar-track {
  background: var(--c-black) !important;
  border-radius: 0 !important;
}
::-webkit-scrollbar-thumb {
  background: var(--c-border) !important;
  border-radius: 0 !important;
  animation: none !important;
  background-size: unset !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-cyan) !important;
}
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--c-border) var(--c-black) !important;
} /* ─────────────────────────────────────────────────────
   16. ACCESSIBILITY & REDUCED MOTION
   ───────────────────────────────────────────────────── */

:focus-visible {
  outline: 1px solid var(--c-cyan) !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body {
    background-attachment: scroll !important;
  }
  .ff-timeline-item {
    opacity: 1 !important;
    transform: none !important;
  }
}