/* ========================================
   ROC:IT - CONSOLIDATED STYLESHEET
   ======================================== */

/* ========================================
   1. RESET & CSS VARIABLES
   ======================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Colors */
  --roc-pink: #ff0066;
  --roc-pink-hover: #e6005c;
  --text-dark: #000;
  --text-light: #fff;
  --text-gray: #666;
  --text-gray-light: #ddd;
  --bg-dark: #000;
  --bg-light: #fff;
  
  /* Layout */
  --nav-h: 72px;
  --nav-anchor-offset: 72px;
}

/* ========================================
   2. BASE TYPOGRAPHY & BODY
   ======================================== */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  overflow-x: hidden;
  line-height: 1.6;
  width: 100%;
}
body.light-mode { background: var(--bg-light); color: var(--text-dark); }
body.no-scroll { overflow: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--roc-pink); outline-offset: 2px; border-radius: 6px; }
img, video { max-width: 100%; height: auto; display: block; }

/* ========================================
   3. NAVIGATION
   ======================================== */
nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 15px -3px rgba(255, 0, 102, 0.5);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 5%; z-index: 1000;
}
.logo { display: flex; align-items: center; z-index: 1100; height: 100%; }
.logo img { height: 50px; width: auto; }

.nav-groups { display: flex; align-items: center; gap: 3rem; }
.nav-center, .nav-right { display: flex; list-style: none; gap: 2rem; align-items: center; }
.nav-center { gap: 3rem; }

.nav-center a, .nav-right a {
  text-transform: uppercase; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.5px;
  color: var(--text-dark); position: relative;
}
.nav-right a { color: var(--text-gray); }
.nav-center a:hover { color: #555; }
.nav-right a:hover { color: var(--text-dark); }

.nav-center a::after, .nav-right a::after {
  content: ""; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px;
  background: currentColor; transition: width 0.25s;
}
.nav-center a:hover::after, .nav-right a:hover::after { width: 100%; }

.hamburger { display: none; background: transparent; border: 0; cursor: pointer; width: 40px; height: 40px; z-index: 1200; }
.hamburger span { display: block; width: 26px; height: 2px; background: #000; margin: 6px auto; transition: transform 0.3s, opacity 0.3s; }
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ========================================
   4. GENERAL SECTIONS & UTILITIES
   ======================================== */
main { padding-top: var(--nav-h); } /* Adds space for fixed nav on all pages */
section { 
  position: relative; 
}
[id] { scroll-margin-top: var(--nav-anchor-offset); 
}

.section-title { 
  font-weight: 300; 
  color: inherit; 
}
.section-subtitle { text-align: center; font-size: 1.3rem; color: inherit; opacity: 0.8; max-width: 900px; margin: 0 auto 3rem; line-height: 1.6; }
.gradient-text { background: linear-gradient(90deg, #ff0066, #9900ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.text-pink { color: var(--roc-pink); font-weight: 700; }
.accent-bold { font-weight: 700 !important; }

.cta-heading-combined {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #000;
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 1.5rem;
}

.platform-fullpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  overflow: hidden;
  padding-bottom: 0;
}

.suite-fullpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  padding: 1rem 5% 3rem 5%;
}

.about-fullpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #000;
}

.contact-fullpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #000;
  padding-bottom: 3rem;
}

.visually-hidden { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  white-space: nowrap; 
  border: 0; 
}

/* Stars */
.stars { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.static-star { position: absolute; border-radius: 50%; background: #fff; opacity: 0.7; }
.star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }

/* ========================================
   PRISM LINES - LAYOUT NEUTRAL
   ======================================== */

/* Base prism classes (no layout impact) */
.prism-line, .prism-line-under { 
  position: relative;
  height: 0; /* Takes no vertical space */
  margin: 0; /* Override browser defaults */
  padding: 0;
  overflow: visible;
}

.prism-line { 
  width: 100vw; 
  height: 4px; 
  left: 50%; 
  transform: translateX(-50%);
}

.prism-line-under::after, .prism-line::after {
  content: ''; 
  position: absolute; 
  inset: 0;
  background: linear-gradient(90deg, transparent, #ff0066, #9900ff, #ff9900, #0097a7, transparent);
  background-size: 200% 100%; 
  animation: prism-flow 5s linear infinite;
}

.prism-line-under::after { 
  top: auto; 
  bottom: 0; 
  height: 4px; 
  width: 100vw; 
  left: 50%; 
  transform: translateX(-50%); 
}

/* Spacing utilities (opt-in only) */
.prism-divider-lg { margin: 4rem 0; }
.prism-divider-md { margin: 2rem 0; }
.prism-divider-sm { margin: 1rem 0; }

/* Context-specific spacing */
.atlas-divider { margin: 2rem auto; }
.section-divider { margin: 2rem 0; }

/* Animations */
@keyframes prism-flow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

.section-top-divider,
.hero-bottom-line { 
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Buttons & CTAs */
.cta-btn {
  display: inline-block; background: var(--roc-pink); color: #fff; padding: 0.9rem 1.75rem;
  border-radius: 6px; font-weight: 700; font-size: 0.9rem; transition: background 0.3s;
}
.cta-btn:hover { background: var(--roc-pink-hover); }
.cta-box { padding: 2rem; background: #f4f4f4; border-radius: 8px; text-align: center; }
.cta-text { font-weight: 600; color: var(--text-dark); margin-bottom: 1rem; }

/* Fade In Animation */
.fade-in { opacity: 0; transition: opacity 0.6s ease-out; }
.fade-in.visible { opacity: 1; }

/* ========================================
   5. HERO SECTION
   ======================================== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  position: relative;
  background: #000;
  margin-top: calc(var(--nav-h) * -1);
}

.hero-content { 
  position: relative; 
  z-index: 1; 
  width: 100%; 
  padding-top: var(--nav-h);
}

.hero h1 { 
  font-size: clamp(4rem, 7vw, 8rem);
  font-weight: 500;
  margin-top: 11rem;
  line-height: 1.1;
  text-align: center;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 5rem;
}

.hero-subtitle { 
  font-size: 3rem; 
  color: #ccc; 
  font-weight: 200; 
}

.hero-logo-inline {
  display: inline-block;
  height: 1.3em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
}

.mission-update-text {
  font-family: 'VT323', monospace;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #fff;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 1rem;
  display: block;
}

.mission-update-svg {
  display: inline-block;
  height: 2em;
  width: auto;
  vertical-align: -0.15em;
  margin: -.5em;
}

.rocit-highlight {
  font-weight: bold;
  color: var(--roc-pink);
}

/* ========================================
   MANAGED SERVICES SECTION - CONSOLIDATED
   ======================================== */

/* Section Container */
#services { 
  background: #000; 
  padding: 3rem 5% 2rem 5%;
  position: relative;
  overflow: hidden;
}

/* Full-page layout class */
.services-fullpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #000;
  overflow: hidden;
}

/* Section Typography */
#services .section-title { 
  color: #fff;
  text-align: center;
}

#services .section-subtitle { 
  margin-bottom: 0; 
  margin-top: 0; 
  font-size: 1.5rem;
}

#services .section-subtitle .accent { 
  color: var(--roc-pink); 
  font-weight: 600; 
}

#servicesTitle {
  font-size: clamp(2.5rem, 4vw, 5rem); 
  font-weight: 200;
}

/* Services Grid */
.services-grid { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); 
  gap: 3rem; 
  margin-top: 3rem;
  margin-bottom: 1rem;
  width: 100%; 
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* Service Cards */
.service-card {
    background: transparent;
    border: none;
    box-shadow: 0 30px 80px rgba(255, 0, 102, .15); /* Keep pink glow */
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 40px 120px rgba(255,0,102,.25); 
}

/* Service Media (Video/Image) */
.service-media { 
  height: 300px; 
  background: transparent; 
  border-radius: 18px 18px 0 0; 
  overflow: hidden; 
}

.service-media img,
.service-media video { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

/* Service Card Body */
.service-body { 
  background: #fff; 
  color: #000; 
  padding: 1.25rem 1.5rem 1.5rem; 
  border-radius: 0 0 18px 18px; 
}

/* Service Tags */
.service-tag { 
    background: transparent; /* Remove black background */
    color: var(--roc-pink); /* Pink text instead */
    font-weight: 700; 
    letter-spacing: .5px; 
    font-size: .9rem; 
    padding: .4rem 0; /* Remove side padding */
    margin-left: 0; /* Remove negative margin */
}

/* Service Description */
.service-desc {
  color: #000; 
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.2px;
  padding-top: 2rem;
  min-height: 85px;
}

/* Service Links */
.service-link { 
  display: inline-flex; 
  align-items: center; 
  gap: .6rem; 
  margin-top: auto; 
  font-size: .95rem; 
  color: var(--roc-pink); 
  font-weight: 800; 
  text-decoration: none; 
}

.service-link::after { 
  content: '→'; 
  transition: transform .2s; 
  font-size: 3em; 
  font-weight: 700; 
  transform: translateY(-10%); 
  color: #000;
}

.service-link:hover::after { 
  transform: translateX(4px); 
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 1080px) {
  #servicesTitle { 
    font-size: clamp(4rem, 10vw, 5rem); 
  }
  
  #services .section-subtitle { 
    font-size: 1rem !important;
  }
}

/* ========================================
   7. ATLAS html
   ======================================== */
.platform-section, #Atlas { 
  background: transparent; 
}

#Atlas { 
  padding: 1rem 1% 2rem; /* Change from: padding: 20px 1% 2rem; */
  position: relative; 
  overflow: hidden;
  color: #fff;
}

#Atlas::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('/images/atlas-dashboard.png') no-repeat center center;
  background-size: cover;
  background-blend-mode: multiply;
  background-color: rgba(24, 21, 77, 0.87);
  z-index: -1;
}

#Atlas .section-intro { 
  margin-top: 1rem; 
  max-width: 1440px; 
  margin-left: auto; 
  margin-right: auto; 
  font-size: 1.2rem; 
  font-weight: 500; 
  text-align: center; 
  color: #ddd;
}

#platform {
  background-color: #ffffff;
  color: #000000;
  position: relative;
  z-index: 1; /* Ensures it sits above any fixed backgrounds if necessary */
}

.platform-section .cta-heading-combined { 
  margin-top: 2rem;
  margin-bottom: 0; 
}

.platform-section #atlasTitle { 
  margin-bottom: 0; 
}

.platform-logo-title {
  max-width: 500px; 
  width: 90%; 
  height: auto; 
  margin: 0 auto;
  display: block;
}

.platform-cta-btn { 
  display: inline-flex;
  min-width: 200px;
  padding: 1.1rem 2rem;
  background: var(--roc-pink); 
  color: #fff; 
  border: none; 
  font-size: 1rem; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  font-weight: 700; 
  cursor: pointer; 
  border-radius: 10px; 
  transition: transform .15s, box-shadow .15s, background .15s;
  text-align: center; 
  text-decoration: none;
}

#platform .section-subtitle + .platform-cta-btn {
  display: block; 
  margin-left: auto;
  margin-right: auto;
  width: fit-content; 
  margin-top: -2.3rem;
  margin-bottom: -1.5rem;
}

.platform-cta-btn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 30px rgba(255,0,102,.4); 
  background: #e6005c; 
}

.platform-features { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); 
  gap: 3rem; 
  margin-top: 4rem; 
  width: 100%; 
  max-width: 1440px; 
  margin-left: auto; 
  margin-right: auto; 
}

.feature-card { 
  background: #ddddddad; 
  border: 2px solid #00000059; 
  padding: 3rem; 
  border-radius: 20px; 
  transition: all .3s; 
  position: relative; 
  overflow: hidden; 
}

.feature-card::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: -100%; 
  width: 100%; 
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,0,102,.1), transparent); 
  transition: left .6s; 
}

.feature-card:hover::before { 
  left: 100%; 
}

.feature-card:hover { 
  transform: translateY(-10px); 
  border-color: var(--roc-pink); 
  box-shadow: 0 20px 60px rgba(255,0,102,.2); 
}

.feature-icon { 
  font-size: 3rem; 
  margin-bottom: 1.5rem; 
  text-align: center; 
}

.feature-card h3 { 
  font-size: 1.5rem; 
  margin-bottom: 1rem; 
  text-align: center; 
  color: #000; 
}

.feature-card p { 
  color: #444; 
  line-height: 1.6; 
}

/* Atlas-specific cards */
.atlas-cards-wrapper {
  display: grid; 
  grid-template-columns: 1fr 1.2fr; 
  gap: 1rem;
  margin-top: 3rem; 
  max-width: 99%; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100%;
}

.atlas-content-card {
  background: rgba(0, 0, 0, 0.664);
  border: 2px solid rgba(255, 0, 102, 0.3);
  padding: 1.5rem;
  border-radius: 20px;
  display: grid; 
  grid-template-columns: auto 1fr; 
  column-gap: 1rem; 
  row-gap: 1.5rem;
  align-items: start;
}

.atlas-content-card p:first-of-type { 
  font-weight: 600; 
  font-size: 1.3rem; 
  grid-column: 1 / -1; 
}
.atlas-content-card p:first-of-type span { 
  color: var(--roc-pink); 
}
.atlas-content-card h4 { 
  color: #fff; 
  font-size: 1.4rem; 
  font-weight: 700; 
  margin-bottom: 0; 
  text-transform: uppercase; 
}
.atlas-content-card p { 
  color: #ddd; 
  line-height: 1.7; 
  margin-bottom: 0; 
}

.atlas-image-card {
  border: none; 
  border-radius: 20px; 
  overflow: hidden; 
  min-height: 600px;
  background-image: url('/images/atlas-dash.png');
  background-size: contain; 
  background-repeat: no-repeat; 
  background-position: center;
  background-color: transparent;
}

/* ========================================
   CULTURAL INTELLIGENCE - SUITE PAGE
   ======================================== */
.ci-cta-btn,
.cc-cta-btn,
.pa-cta-btn,
.om-cta-btn {
  min-width: 280px;
  text-align: center;
}

#cultural-intelligence {
  background: #000;
  color: #fff;
  min-height: 100vh;
  padding: 3rem 5%;
  text-align: center;
}

.ci-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 200;
  color: #fff;
  margin-bottom: 0;
  text-align: center;
}

.ci-subtitle {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: #ccc;
  margin-bottom: .5rem;
  text-align: center;
}

#cultural-intelligence .prism-line-under {
  margin-bottom: 3rem;
}

.ci-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 3rem; 
  align-items: center;
  max-width: 1440px;
  margin: 0 auto; 
}

.ci-col-left { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1.5rem; 
}

.ci-service-box { 
  background: rgba(73, 73, 73, 0.562); 
  padding: 1.5rem; 
  border-radius: 8px; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-align: left;
}

.ci-service-box:hover {
  border-color: var(--roc-pink);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 0, 102, 0.15);
}

.ci-service-title { 
  color: var(--roc-pink); 
  font-weight: 700; 
  font-size: 1.2rem; 
  text-transform: uppercase; 
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.ci-service-desc { 
  color: #ddd; 
  font-size: 1rem; 
  line-height: 1.4; 
}

.ci-cta-box { 
  grid-column: 1 / -1;
  margin-top: 1rem; 
  padding: 0; 
  background: transparent; 
  border: none;
  text-align: left;
}

.ci-cta-text { 
  font-weight: 400; 
  color: #fff; 
  margin-bottom: 1rem; 
  font-size: 1.1rem; 
  text-align: left; 
}

.ci-cta-btn {
  display: inline-block; 
  background: var(--roc-pink); 
  color: #fff; 
  padding: 0.9rem 1.75rem;
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 700; 
  font-size: 0.9rem;
  transition: background 0.3s; 
  text-transform: uppercase;
}

.ci-cta-btn:hover { 
  background: #e6005c; 
}

/* Right column - image */
.ci-col-right img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ========================================
   EVENT PRODUCTION - SUITE PAGE
   ======================================== */
#event-production {
  background: #000;
  color: #fff;
  min-height: 100vh;
  padding: 1rem 5% 0 5%;
  display: flex;
  flex-direction: column;
}

.ep-header { 
  text-align: center;
  margin-bottom: 0.5rem;
}

.ep-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 200;
  color: #fff;
  margin-bottom: 0;
}

.ep-subtitle {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: #ccc;
  margin-bottom: 0.5rem;
}

#event-production .prism-line-under {
  margin-bottom: 0;
}

/* Video section fills remaining space */
.ep-main-content { 
  position: relative; 
  flex: 1; /* Takes all remaining height */
  width: 100vw; /* Full viewport width */
  margin-left: calc(-5%); /* Offset the section padding */
  margin-right: calc(-5%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 5%;
  border-radius: 0; /* No rounded corners */
}

.ep-bg-video { 
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  z-index: 0; 
  object-fit: cover; 
  opacity: 0.6; 
}

.ep-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 1.5rem; 
  position: relative; 
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto 2rem;
}

.ep-service-box { 
  background: rgba(255, 255, 255, 0.95); 
  padding: 2rem 1.5rem; 
  border-radius: 8px; 
  color: #000;
  transition: all 0.3s ease;
}

.ep-service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(255, 0, 102, 0.2);
}

.ep-service-title { 
  color: #000; 
  font-weight: 500; 
  font-size: 2rem;
  margin-bottom: 0.25rem; 
}

.ep-service-desc { 
  font-size: 1.3rem; 
  line-height: 1.5;
  color: #333;
}

.ep-cta-section {
  text-align: center;
  position: relative;
  z-index: 2;
  padding-top: 2rem;
}

.ep-cta-section .ci-cta-text {
  color: #fff;
  text-align: center;
}

/* ========================================
   ATLAS PAGE - ADDITIONAL STYLES
   Add these to your consolidated style.css
   ======================================== */

/* Atlas Content Wrapper */
.talent-content {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   8. SUITE SECTION
   ======================================== */
.suite-section { 
  background: #fff;
  padding: 0;
}

#suiteTitle {
  font-size: clamp(2.5rem, 8vw, 5rem); 
  color: #000;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

.suite-section .about-highlight,
.suite-fullpage .about-highlight { 
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 400;
  display: block;
  margin-top: 0;
  padding: 0;
  text-align: center;
}

.suite-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); 
  gap: 2rem; 
  margin-top: 1rem; 
  width: 100%; 
  max-width: 1440px; 
  margin-left: auto; 
  margin-right: auto; 
}

.suite-item { 
  background: #fff; 
  border: 2px solid #e0e0e0; 
  padding: 2rem; 
  border-radius: 15px; 
  transition: all .3s; 
}

.suite-item:hover { 
  border-color: var(--roc-pink); 
  transform: translateY(-5px); 
  box-shadow: 0 10px 30px rgba(0,0,0,.1); 
}

.suite-item h4 { 
  font-size: 1.1rem; 
  margin-bottom: 1rem; 
  color: #000; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  font-weight: 800; 
}

.suite-item p { 
  color: #444; 
  font-size: .95rem; 
  line-height: 1.5; 
  margin-bottom: 1rem; 
}

.suite-item a { 
  color: var(--roc-pink); 
  text-decoration: none; 
  font-size: .9rem; 
  font-weight: 700; 
}

/* ========================================
   UTILITY CLASSES - ADD TO END OF style.css
   ======================================== */

/* Pink highlight text (for spans in subtitles) */
.text-highlight-pink {
  color: var(--roc-pink);
}

/* White text variant for CI service titles (label above pink title) */
.ci-service-title-label {
  color: #fff;
  margin-bottom: 0.25rem;
}

/* Dashboard images - with min-height */
.dashboard-img {
  width: 100%;
  height: auto;
  min-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

/* Dashboard images - contain variant */
.dashboard-img-contain {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

/* Event Production - black title variant */
.ep-service-title-black {
  color: #000;
}

/* Event Production - pink subtitle */
.ep-service-subtitle {
  color: var(--roc-pink);
  font-weight: 600;
  font-size: 1.2rem;
}

/* White CTA text variant */
.ci-cta-text-white {
  color: #fff;
}

/* No margin utility */
.no-margin {
  margin: 0;
}

/* ========================================
   9. ABOUT SECTION
   ======================================== */
.about-section { 
  padding: 1.5rem 5% 1rem; 
} 

.about-section .section-title { 
  color: #fff; 
  margin-bottom: 0;
}

.about-we-are {
  font-family: 'Satisfy', cursive;
  font-size: 5rem;
  font-weight: 300;
  white-space: nowrap;
}

.about-title-flex {
  display: flex; 
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.about-logo-inline {
  height: 5.5rem;
  width: auto;
}

.about-copy { 
  position: relative; 
  max-width: 1000px;
  margin: 0 auto;
  text-align: left; 
  line-height: 1.5;
  color: #ffffff; 
  font-size: 1.25rem; 
  background: rgba(31, 31, 31, 0.603); 
  padding: 3rem 2rem;
  border-radius: 10px;
  box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, 0.9);
} 

.about-copy p { 
  margin-bottom: 1rem; 
}

.about-copy p:first-child {
  margin-top: 0;
}

.about-copy p:last-child {
  text-align: center; 
  margin-top: 1.5rem;
  margin-bottom: 0;
  line-height: 1.4;
}

.about-highlight { 
  color: var(--roc-pink); 
  font-weight: 300; 
  font-family: 'Satisfy', cursive; 
  font-size: 2rem;
}

.clients-title-combined {
  font-size: clamp(1rem, 4vw, 2rem); 
  font-weight: 300; 
  text-align: center; 
  margin-bottom: 1rem; 
  color: #fff; 
  margin-top: 0;
}

/* Client Logo Carousel */
.logo-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 1rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 80%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 80%);
}

.logo-track {
  display: flex;
  width: calc(250px * 9); 
  animation: scroll 30s linear infinite;
}

.logo-slide {
  flex-shrink: 0;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
}

.logo-slide img {
  max-width: 150px;
  height: 40px; 
  object-fit: contain;
  filter: brightness(0.7) grayscale(1); 
  opacity: 0.7;
  transition: filter .2s, opacity .2s;
}

.logo-slide:hover img {
  filter: brightness(1) grayscale(0);
  opacity: 1;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 3)); } 
}

/* ========================================
   10. CONTACT SECTION
   ======================================== */
.contact-section { 
  background: #000;
  padding-top: 6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}

.contact-pre-title {
  font-size: 1.1rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

/* 1. THE NEW WRAPPER */
/* This creates the "anchor box" around the text */
.contact-header-wrapper {
  position: relative;        
  width: fit-content;        /* Shrinks the container to hug the text */
  margin: 0 auto 2.5rem;     /* Centers the whole block & handles bottom spacing */
}

.contact-section .section-title { 
  color: #ffffff; 
  font-weight: 200; 
  font-size: clamp(2.1rem, 5vw, 5rem);
  padding-bottom: 0.5rem;
  text-align: center;
  
  /* REMOVED: margin-bottom is now handled by the wrapper above */
  margin-bottom: 0; 
}

.contact-rocket-icon { 
  position: absolute; 
  
  /* 2. PINNED POSITIONING */
  /* These values are now relative to the TEXT, not the screen width */
  top: -20%;   
  right: -8rem; /* Pushes it to the right of the words */
  
  /* Sizing & Rotation */
  height: clamp(6rem, 10vw, 9rem); 
  width: auto; 
  transform: rotate(35deg); 
  z-index: 10;
  pointer-events: none; 
}

.contact-container {
  width: 90%;
  max-width: 700px; 
  margin: 0 auto; 
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

.form-group { 
  margin-bottom: 1.25rem; 
}

.form-group input, 
.form-group select, 
.form-group textarea {
  width: 100%; 
  padding: 1.25rem 1rem;
  background: #1a1a1a;
  border: 1px solid #444;
  color: #fff;
  font-size: 1rem; 
  border-radius: 4px;
  transition: all .2s;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
}

.form-group input::placeholder, 
.form-group textarea::placeholder {
  color: #999;
  opacity: 1;
}

.form-group select {
  color: #999;
}

.form-group select:valid, 
.form-group select option {
  color: #fff;
}

.form-group select option:first-child {
  color: #999;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus { 
  outline: none; 
  border-color: var(--roc-pink); 
  box-shadow: 0 0 0 4px rgba(255,0,102,.15);
  background: #310404;
}

.form-group textarea { 
  min-height: 140px; 
  resize: vertical; 
}

.submit-btn { 
  display: block;
  width: auto;
  min-width: 200px;
  padding: 1.1rem 2rem;
  margin: 2rem auto 0;
  background: var(--roc-pink); 
  color: #fff; 
  border: none; 
  font-size: 1rem; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  font-weight: 900; 
  cursor: pointer; 
  border-radius: 10px; 
  transition: transform .15s, box-shadow .15s, background .15s;
  text-align: center;
  text-decoration: none;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
}

.submit-btn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 30px rgba(255,0,102,.4); 
  background: #e6005c; 
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn.secondary {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.form-status { 
  margin-top: .75rem; 
  font-weight: 700; 
  text-align: center;
  font-size: 0.95rem;
}

.form-status.success { 
  color: #4ade80;
}

.form-status.error { 
  color: #ef4444;
}

.contact-post-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}

/* ========================================
   11. MANAGED SERVICES (managed-services.html)
   ======================================== */

/* Section Header */
.section-header {
  padding: .5rem 5% 0;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Talent Partnerships Section */
#talent-partnerships {
  background: #000;
  color: #fff;
  position: relative;
  min-height: 100vh;
}

/* Title styling - matches branded content */
#talent-partnerships .section-title {
  color: #fff;
  font-weight: 200;
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ========================================
   INFLUENCER MARKETING SECTION
   ======================================== */
.im-section { 
  display: grid; 
  grid-template-columns: 1.6fr 0.8fr; 
  min-height: 100vh; 
  width: 100%; 
}

/* Left column (dark) */
.im-left {
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 2rem 5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Right column (light) */
.im-right {
  background: var(--bg-light);
  color: var(--text-dark);
  padding: 2rem 5%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.im-title { 
  font-size: clamp(3rem, 6vw, 5rem); 
  font-weight: 200; 
  margin-bottom: 0; 
}

.im-subtitle { 
  font-size: 1.5rem; 
  font-weight: 500; 
  line-height: 1.4; 
  margin-bottom: 1.5rem; 
}

.im-subtitle-left {
  text-align: left;
  margin: 0 0 2rem 0;
  font-size: 1.2rem;
}

.im-video {
  width: 80%;
  max-width: 800px;
  margin: 2rem auto 0 auto; /* Centers horizontally with top margin */
  display: block;
}

.im-right-title { 
  font-size: clamp(2rem, 4vw, 3.5rem); 
  font-weight: 900; 
  line-height: 1.1; 
  margin-bottom: 1rem;
  white-space: nowrap;
}

.im-right-subtitle {
  font-size: clamp(1.5rem, 2vw, 2.2rem); 
  font-weight: 200;
  color: #333;
  margin-bottom: 2rem;
}

.im-services { 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
  margin-bottom: 2rem; /* Reduced from 4rem */
}

.im-service { 
  font-weight: 600; 
  font-size: 1.5rem; 
  padding-bottom: 0.5rem; 
  border-bottom: 3px solid; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
}

.im-service-1 { border-color: #ff0066; width: 90%; }
.im-service-2 { border-color: #9900ff; width: 80%; }
.im-service-3 { border-color: #c084fc; width: 70%; }
.im-service-4 { border-color: #ff9900; width: 60%; }
.im-service-5 { border-color: #facc15; width: 50%; }
.im-service-6 { border-color: #10b981; width: 40%; }

/* CTA Box - Managed Services html */
.im-cta-box {
  background: #ddd;
  border: 1px solid #cacaca;
  padding: 1.5rem 2rem;
  border-radius: 8px;
  text-align: center;
  margin-top: 5rem; /* Adjust to push lower */
}

.im-cta-text {
  color: #000;
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.im-cta-btn {
  display: inline-block;
  background: var(--roc-pink);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
}

.im-cta-btn:hover {
  background: var(--roc-pink-hover);
}

/* ========================================
   CELEBRITY PARTNERSHIPS SECTION
   ======================================== */
.celeb-section { 
  display: grid; 
  grid-template-columns: 1fr 1fr; /* Changed to 50/50 split */
  min-height: 100vh; 
  width: 100%; 
}

/* Left side - white background, left aligned */
.celeb-left { 
  background: var(--bg-light); 
  color: var(--text-dark); 
  padding: 2rem 5% 5rem 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Left align content */
}

/* Right side - dark background, centered */
.celeb-right { 
  background: var(--bg-dark); 
  color: var(--text-light); 
  padding: 4rem 5%; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; /* Center content */
}

/* Title fix - ensure it's visible (black text on white) */
.celeb-section-title {
  text-align: left;
  color: #000;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 200;
  margin-bottom: 2rem;
  margin-top: 0;
  gap: 1rem;
  line-height: 1;
}

.celeb-section-subtitle {
  text-align: left;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-bottom: 3rem;
  color: #333;
}

.celeb-service-title {
  color: var(--roc-pink);
  font-weight: 550;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.celeb-service-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.3rem;
}

.celeb-service-item {
  color: #333;
}

/* Right side - Union section */
.celeb-union-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 200;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
  color: #fff;
}

.celeb-union-subtitle {
  color: var(--roc-pink);
  font-weight: 500;
  font-size: clamp(1.8rem, 2vw, 2rem);
  margin-bottom: 1.5rem;
  text-align: center;
}

.celeb-logos { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 2.5rem; 
  width: 100%; 
  max-width: 540px;
  margin-top: 2rem; 
}

.celeb-logos img {
  width: 100%;
  max-width: 180px;
}

/* ========================================
   AFFILIATE & CREATOR COMMERCE SECTION
   ======================================== */

.aff-section { 
  display: grid; 
  grid-template-columns: 1fr 1fr; /* Changed to 50/50 */
  min-height: 100vh; 
  width: 100%;
}

/* Left side - dark background */
.aff-left { 
  background: #000; 
  color: var(--text-light); 
  padding: 2rem 5% 5rem 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Right side - with background image */
.aff-right { 
  background-image: url('/images/aff-image.png');
  background-size: 90%; /* Reduced from cover/120% */
  background-position: center; 
  background-repeat: no-repeat;
  padding: 3rem 3%; 
  display: flex; 
  align-items: center;
  justify-content: center;
  position: relative; 
}

/* Title styling - matches other sections */
.aff-section-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 200;
  color: #fff;
  margin-bottom: 3rem;
  margin-top: 4rem;
   line-height: 1;
}

.aff-section-subtitle {
  text-align: left;
  margin-bottom: 1.5rem;
  color: #ccc;
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.6;
}

/* Content container */
.aff-content {
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}

.aff-section-subtitle {
  text-align: left;
  margin-bottom: 1rem;
  color: #ccc;
  font-size: 1.3rem;
  line-height: 1.6;
}

.aff-section-subtitle strong {
  color: #fff;
}

.aff-section-subtitle em {
  color: var(--roc-pink);
  font-style: italic;
}

/* Stat descriptions */
.aff-stat-desc {
  color: #999;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.aff-stats { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2.5rem; 
  margin-top: 3rem; 
}

.aff-stat-number { 
  font-size: clamp(3rem, 7vw, 5rem); 
  color: var(--text-gray-light); 
  font-weight: 200; 
  line-height: 1; 
}

.aff-stat-label {
  color: #fff;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Vertical Prism Line - FIX */
.prism-line-vertical {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    to bottom,
    #ff0066,
    #9900ff,
    #00ccff,
    #ff9900,
    #ff0066
  );
  z-index: 10;
}

/* Windows grid */
.aff-windows { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2px; 
  background: rgba(0,0,0,0.3); 
  position: relative; 
  z-index: 2;
  width: 100%;
}

.aff-window { 
  background: rgba(10,0,0,0.8); 
  padding: 2rem 1.5rem;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px); 
}

.aff-window-title {
  color: var(--roc-pink);
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.aff-window-desc {
  color: #ddd;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* ========================================
   12. EXPERIENTIAL html
   ======================================== */

.exp-wrapper {
  width: 100%;
}

#experiential {
  background: var(--bg-dark);
  background-image: linear-gradient(to left, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 75%);
  color: var(--text-light);
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 5% 0 5%;
}

/* Header - centered */
.exp-header { 
  position: relative;
  text-align: center;
  max-width: 1440px;
  margin: 0;
}

/* Title styling */
#experiential .section-title {
  color: #fff;
  font-weight: 200;
  font-size: clamp(2.75rem, 4vw, 4rem);
  text-align: center;
}

/* Subtitle styling */
#experiential .section-subtitle {
  color: #ccc;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  text-align: center;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

/* --- GRID FIXES BELOW --- */

.exp-grid { 
  display: grid; 
  /* CHANGE 1: Set to 3 columns */
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem;
  max-width: 1440px;
  margin: 0;
  padding-top: 3rem;
}

.exp-item:not(:last-child)::after {
  content: ''; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: -1rem; /* Positions line to the right */
  width: 1px;   /* Makes it a vertical line */
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
  display: block;
}

/* CHANGE 3: Remove the horizontal bottom borders you added */
.exp-item:not(:last-child) {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* --- END GRID FIXES --- */

.exp-item-title { 
  color: var(--roc-pink); 
  font-weight: 300; 
  font-size: 2rem; 
  text-transform: uppercase; 
  margin-bottom: 0; 
  min-height: 2.2em;
  line-height: 1.1;
}

.exp-item-tagline { 
  color: var(--text-light); 
  font-weight: 600; 
  font-size: 1.3rem; 
  font-style: italic; 
  margin-bottom: .5rem;
  margin-top: 0;
  min-height: 2.8em;
}

.exp-item-text {
  text-align: left !important;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  flex-grow: 1;
}

.exp-item-note {
  font-style: italic;
  color: #bbb;
  font-size: 1rem;
  margin-top: auto;
}

.exp-item-note strong {
  color: #fff;
  font-style: normal;
}

.exp-cta-float { 
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 0;
  margin-bottom: 5rem;
  z-index: 1;
}

.exp-cta-float .cta-box { 
  background: rgba(255,255,255,0.9); 
  border: 1px solid var(--bg-light);
  padding: 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ========================================
   13. BRANDED CONTENT (UPDATED)
   ======================================== */

#branded-content {
  background: #000;
  color: #fff;
  padding: 1rem 5% 2rem 5%;
  min-height: 100vh;
}

.bc-wrapper { 
  position: relative; 
  z-index: 2; 
  max-width: 1440px; 
  margin: 0 auto; 
  width: 80%;
  margin-top: 0;
}

/* Header - centered */
.bc-header {
  text-align: center; /* CHANGED from left */
  max-width: 900px;
  margin: 0 auto 1rem;
}

/* Title styling - ADD THIS */
#branded-content .section-title {
  color: #fff;
  font-weight: 200;
  font-size: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0rem;
}

/* Subtitle styling - ADD THIS */
#branded-content .bc-header .section-subtitle {
  color: #ccc;
  font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  margin-bottom: 0.5rem;
}

.bc-grid { 
  display: grid; 
  /* CHANGE 1: Change 1fr 2fr to 1fr 1fr for equal balance */
  grid-template-columns: 1fr 1fr; 
  gap: 4rem; /* Increased gap for cleaner separation */
  align-items: center;
  margin-top: 4rem;
}

/* Mobile fallback handled by your global media queries, 
   but ensuring it stacks here is good practice: */
@media (max-width: 900px) {
  .bc-grid {
    grid-template-columns: 1fr;
  }
}

.bc-services { 
  display: flex; 
  flex-direction: column; 
  gap: 2.5rem; 
}

.bc-service-title { 
  color: var(--roc-pink); 
  font-weight: 900; /* Bold to match your design style */
  font-size: 1.5rem; 
  text-transform: uppercase; 
  margin-bottom: 0;
}

.bc-service-text {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff;
}

.bc-video-wrapper { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%;
}

.bc-video { 
  /* CHANGE 2: Allow video to fill the new grid column properly */
  width: 100%; 
  max-width: 100%; /* Remove the 600px limit so it fits the grid */
  height: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Optional: Adds depth */
  border-radius: 12px; /* Optional: Softens edges */
}

/* ========================================
   14. CREATOR IRL - SUITE PAGE
   ======================================== */
#creator-irl { 
  background: #000; 
  color: #fff; 
  padding: 1rem 5% 3rem 5%;
  min-height: 100vh;
}

.cirl-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 200; 
  text-align: center; 
  margin-top: 0; 
  margin-bottom: 0; 
}

.cirl-subtitle { 
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
  font-weight: 300; 
  color: #ccc; 
  text-align: center; 
  max-width: 900px; 
  margin: 0 auto 0.5rem;
}

#creator-irl .prism-line-under {
  margin-bottom: 2rem;
}

/* DESKTOP LAYOUT CONFIGURATION */
.cirl-layout { 
  display: grid; 
  grid-template-columns: 1fr 1.2fr; /* 2 Columns */
  grid-template-rows: auto auto;    /* 2 Rows (Text is Row 1, Button is Row 2) */
  gap: 1rem 3rem; 
  align-items: start; 
  max-width: 1400px;
  margin: 0 auto;
}

.cirl-col-left { 
  grid-column: 1;
  grid-row: 1;
  display: flex; 
  flex-direction: column;
  padding-top: 3rem;
}

.cirl-col-right { 
  grid-column: 2;
  grid-row: 1 / span 2; /* Video spans both text and button rows */
  position: relative; 
  overflow: hidden; 
  min-height: 700px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0;
}

.cirl-cta-box { 
  grid-column: 1;
  grid-row: 2; /* Places button underneath text */
  margin-top: 1rem; 
  align-self: start;
}

.cirl-description { 
  color: #ddd; 
  font-size: 1.5rem; 
  font-weight: 300; 
  line-height: 1.7; 
  margin-top: 0;
  margin-bottom: 0; 
}

.cirl-video { 
  width: 90%; 
  height: auto;
  max-height: 700px;
  object-fit: contain;
}

#creator-irl .ci-cta-box, 
#creator-irl .ci-cta-text { 
  text-align: left; 
}

/* ========================================
   15. CONTENT CAPTURE
   ======================================== */
#content-capture { 
  background: #000; 
  color: #fff; 
  padding: 2rem 5% 3rem 5%; /* Reduced top padding */
  min-height: 100vh;
}

.cc-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 200; 
  text-align: center;
  margin-bottom: 0.5rem; 
  color: #fff; 
}

.cc-subtitle { 
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
  font-weight: 300; 
  color: #ccc; 
  text-align: center;
  margin-bottom: 0.5rem;
}

#content-capture .prism-line-under {
  margin-bottom: 2rem;
}

.cc-layout { 
  display: grid; 
  grid-template-columns: 1fr 1.2fr; 
  gap: 3rem; 
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

.cc-col-left { 
  display: flex; 
  flex-direction: column; 
  gap: 1.5rem; 
}

.cc-description { 
  color: #d3d3d3; 
  font-size: 1.3rem; 
  font-weight: 200; 
  line-height: 1.7; 
  margin-bottom: 0; 
}

.cc-service-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1.5rem; 
}

.cc-service-box { 
  background: #25252588; 
  padding: 1.5rem; 
  border-radius: 8px; 
}

.cc-service-title { 
  color: var(--roc-pink); 
  font-weight: 500; 
  font-size: 1rem; 
  text-transform: uppercase; 
  margin-bottom: 0.75rem; 
}

.cc-service-desc { 
  color: #fff; 
  font-size: 0.9rem; 
  font-weight: 300; 
  line-height: 1.6; 
}

.cc-col-right { 
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  min-height: 500px; 
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.cc-video { 
  width: 100%; 
  height: auto;
  max-height: 600px;
  object-fit: contain; /* Changed from cover */
  border-radius: 8px;
  background: transparent; /* Remove any background */
}

.cc-cta-section { 
  text-align: left; 
  margin-top: 1.5rem; 
  max-width: none; 
}

.cc-cta-text { 
  font-weight: 200; 
  color: #fff; 
  margin-bottom: 1rem; 
  font-size: 1.1rem; 
  text-align: left; 
}

.cc-cta-btn {
  display: inline-block; 
  background: var(--roc-pink); 
  color: #fff; 
  padding: 0.9rem 1.75rem;
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 700; 
  font-size: 0.9rem;
  transition: background 0.3s; 
  text-transform: uppercase;
}

.cc-cta-btn:hover { 
  background: #e6005c; 
}


/* ========================================
   16. ORGANIC MOMENTUM - SUITE PAGE
   ======================================== */
#organic-momentum { 
  background: #000; 
  color: #fff; 
  padding: 2rem 5% 3rem 5%;
  min-height: 100vh; 
}

.om-header { 
  text-align: center; 
}

.om-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 200; 
  text-align: center; 
  margin-bottom: 0.5rem; 
}

.om-subtitle { 
  font-size: clamp(1.2rem, 2.5vw, 2rem); 
  font-weight: 300; 
  color: #ccc; 
  text-align: center; 
  margin-bottom: 0.5rem; 
}

#organic-momentum .prism-line-under {
  margin-bottom: 2rem;
}

.om-description { 
  color: #ddd; 
  font-size: clamp(1.2rem, 2vw, 1.5rem);  
  line-height: 1.7; 
  max-width: 1440px; 
  margin: 0 auto 3rem;
  text-align: left; 
}

/* Single row grid for 4 videos */
.om-quadrant-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 1.5rem; 
  max-width: 100%; 
  margin: 0 auto; 
}

.om-quadrant { 
  position: relative; 
  padding: 1.5rem; 
  border-radius: 12px; 
  overflow: hidden; 
  min-height: 350px; 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: transparent; /* Remove PNG backgrounds */
}

/* Remove all PNG background images */
.om-quadrant.q1,
.om-quadrant.q2,
.om-quadrant.q3,
.om-quadrant.q4 { 
  background-image: none; 
}

/* Video wrapper - always visible */
.om-quadrant-video-wrapper { 
  display: block; /* Changed from none */
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 0; 
}

.om-quadrant-video-wrapper video { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.4s ease; 
}

.om-quadrant:hover .om-quadrant-video-wrapper video { 
  transform: scale(1.05); 
}

/* Gradient overlay */
.om-quadrant::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%); 
  z-index: 1; 
  transition: opacity 0.3s ease; 
}

.om-quadrant-text { 
  position: relative; 
  z-index: 2; 
}

.om-service-title { 
  color: var(--roc-pink); 
  font-weight: 700; 
  font-size: 1rem; 
  text-transform: uppercase; 
  margin-bottom: 0.2rem; 
}

.om-service-desc { 
  color: #fff; 
  font-size: 1rem; 
  line-height: 1.2; 
}

.om-cta-section { 
  text-align: center; 
  margin-top: 3rem;
}

#organic-momentum .ci-cta-text { 
  text-align: center; 
  font-weight: 200; 
}

/* ========================================
   17. PAID AMPLIFICATION - SUITE PAGE
   ======================================== */
#paid-amplification { 
  background: #000; 
  padding: 2rem 5% 3rem 5%;
  min-height: 100vh;
}

.pa-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 200; 
  text-align: center; 
  margin-bottom: 0.5rem; 
}

.pa-subtitle { 
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
  font-weight: 300; 
  color: #ccc; 
  text-align: center; 
  margin-bottom: 0.5rem; 
}

#paid-amplification .prism-line-under {
  margin-bottom: 2rem;
}

.pa-description { 
  color: #ddd; 
  font-size: clamp(1.2rem, 2vw, 1.5rem); 
  line-height: 1.5; 
  text-align: left; 
  max-width: 1100px; 
  margin: 0 auto 3rem; 
}

.pa-channels-grid { 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  gap: 1.5rem; 
  max-width: 1400px;
  margin: 0 auto 3rem;
  align-items: stretch; /* Force equal height */
}

.pa-channel-box { 
  background: rgba(36, 22, 49, 0.5); 
  padding: 1.5rem 1rem !important; 
  border-radius: 8px; 
  text-align: center; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  margin: 0 !important;
  width: 100% !important;
}

.pa-channel-title { 
  color: var(--roc-pink); 
  font-weight: 700; 
  font-size: 0.85rem; 
  text-transform: uppercase; 
  line-height: 1.3; 
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
}

.pa-channel-icon { 
  width: 100px; 
  height: 100px; 
  background: #ffffff00; 
  border-radius: 8px; 
  margin: 1.5rem auto 0; /* THIS could be the culprit */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #999; 
}

.pa-channel-icon img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  filter: brightness(0) invert(1); 
}

.pa-cta-section { 
  text-align: center; 
  margin-top: 3rem; 
}

.pa-cta-text { 
  font-weight: 200; 
  color: #fff; 
  margin-bottom: 1rem; 
  font-size: 1.1rem; 
  text-align: center; 
}

.pa-cta-btn {
  display: inline-block; 
  background: var(--roc-pink); 
  color: #fff; 
  padding: 0.9rem 1.75rem;
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 700; 
  font-size: 0.9rem;
  transition: background 0.3s; 
  text-transform: uppercase;
}

.pa-cta-btn:hover { 
  background: #e6005c; 
}

/* ========================================
   18. MEASUREMENT & OPTIMIZATION
   ======================================== */
#measurement-optimization { 
  background: #000; 
  color: #fff; 
  padding: 2rem 5% 3rem 5%; /* Changed from 6rem 5% */
  min-height: 100vh; 
  position: relative; 
  overflow: hidden; 
}
#measurement-optimization::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: url('../images/atlas-dashboard.png') center center / cover no-repeat; 
  opacity: 0.15; 
  z-index: 0; 
}
#measurement-optimization > * { 
  position: relative; 
  z-index: 1; 
}
.mo-title { 
  font-size: clamp(2.5rem, 4vw, 4rem); 
  font-weight: 300; 
  text-align: left; 
  margin-bottom: 0; 
  color: #fff; 
}
.mo-subtitle { 
  font-size: 1.5rem; 
  font-weight: 300; 
  color: var(--roc-pink); 
  text-align: left; 
  margin-bottom: 0; 
  max-width: none; 
}
.mo-layout { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
  align-items: start; 
}
.mo-col-left { 
  display: flex; 
  flex-direction: column; 
  gap: 2rem; 
}
.mo-description-box { 
  background: rgba(255, 255, 255, 0.05); 
  padding: 2rem; 
  border-radius: 8px; 
  border: 1px solid rgba(255, 255, 255, 0.1); 
}
.mo-description { 
  color: #ddd; 
  font-size: 1.2rem; 
  line-height: 1.5; 
  text-align: left; 
}
.mo-timeline { 
  display: flex; 
  flex-direction: column; 
  gap: 2rem; 
  position: relative; 
}
.mo-timeline::before { 
  content: ''; 
  position: absolute; 
  left: 15px; 
  top: 30px; 
  bottom: 30px; 
  width: 2px; 
  background: linear-gradient(to bottom, var(--roc-pink), #9900ff, #ff9900, #0097a7); 
}
.mo-timeline-item { 
  display: flex; 
  gap: 2rem; 
  align-items: flex-start; 
  position: relative; 
}
.mo-timeline-node { 
  width: 32px; 
  height: 32px; 
  min-width: 32px; 
  border-radius: 50%; 
  background: var(--roc-pink); 
  border: 3px solid #000; 
  position: relative; 
  z-index: 1; 
  box-shadow: 0 0 15px rgba(255, 0, 102, 0.5); 
}
.mo-timeline-content { 
  flex: 1; 
  padding-top: 3px; 
}
.mo-timeline-title { 
  color: var(--roc-pink); 
  font-weight: 600; 
  font-size: 1rem; 
  text-transform: uppercase; 
  margin-bottom: 0.5rem; 
  letter-spacing: 0.5px; 
}
.mo-timeline-desc { 
  color: #ddd; 
  font-size: 1rem; 
  line-height: 1.5; 
}
.mo-col-right { 
  display: flex; 
  align-items: flex-start; 
  justify-content: center; 
}
.mo-cta-section { 
  text-align: right; 
  margin-top: 0; 
}
#measurement-optimization .ci-cta-text { 
  text-align: right; 
  font-weight: 200; 
}

/* ========================================
   19. CRM ACTIVATION - SUITE PAGE
   ======================================== */
#crm-activation { 
  background: #000; 
  padding: 2rem 5% 3rem 5%; 
  min-height: 100vh;
}

.crm-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 200; 
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem; 
}

.crm-subtitle { 
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
  font-weight: 300; 
  color: #ccc; 
  text-align: center; 
  margin-bottom: 0.5rem; 
}

#crm-activation .prism-line-under {
  margin-bottom: 3rem;
}

.crm-layout { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 3rem; 
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

.crm-col-left { 
  display: flex; 
  flex-direction: column; 
  gap: 2rem; 
}

.crm-description { 
  color: #ddd; 
  font-size: clamp(1.2rem, 2vw, 1.4rem); 
  line-height: 1.4; 
}

.crm-service-box { 
  padding: 2rem; 
  border-radius: 8px; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.crm-service-title { 
  color: var(--roc-pink); 
  font-weight: 550; 
  font-size: 1rem; 
  text-transform: uppercase; 
  margin-bottom: 0.5rem; 
}

.crm-service-desc { 
  color: #ddd; 
  font-size: 1.1rem; 
  line-height: 1.6; 
  margin-bottom: 1.5rem; 
}

.crm-service-desc:last-child {
  margin-bottom: 0;
}

.crm-col-right { 
  display: flex; 
  align-items: center;
  justify-content: center;
}

.crm-col-right img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 5rem;
  margin-left: 6rem;
}

.crm-cta-section { 
  text-align: right; 
  margin-top: 1rem; 
}

.crm-cta-text { 
  font-weight: 200; 
  color: #fff; 
  margin-bottom: 1rem; 
  font-size: 1.1rem; 
  text-align: right; 
}

.crm-cta-btn {
  display: inline-block; 
  background: var(--roc-pink); 
  color: #fff; 
  padding: 0.9rem 1.75rem;
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 700; 
  font-size: 0.9rem;
  transition: background 0.3s; 
  text-transform: uppercase;
  min-width: 280px;
  text-align: right;
}

.crm-cta-btn:hover { 
  background: #e6005c; 
}

/* ========================================
   20. PRESS SOLUTIONS - SUITE PAGE
   ======================================== */
#press-solutions { 
  background: transparent; 
  padding: 2rem 5% 3rem 5%; 
  min-height: 100vh;
  position: relative; 
  overflow: hidden; 
}

#press-solutions::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: url('../images/wall.png') center center / cover no-repeat; 
  opacity: 0.5; 
  z-index: 0; 
}

#press-solutions > * { 
  position: relative; 
  z-index: 1; 
}

.ps-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 200; 
  text-align: center; 
  margin-bottom: 0.5rem; 
  color: #fff; 
}

.ps-subtitle { 
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); 
  font-weight: 300; 
  color: #ccc; 
  text-align: center; 
  margin-bottom: 0.5rem; 
}

.ps-subtitle span { 
  color: var(--roc-pink); 
  font-weight: 600; 
}

#press-solutions .prism-line-under {
  margin-bottom: 3rem;
}

.ps-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem; 
  max-width: 1200px;
  margin: 7rem auto 3rem;
}

.ps-service-box { 
  background: rgba(20, 15, 35, 0.85); 
  padding: 2rem; 
  border-radius: 8px; 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); 
}

.ps-service-box:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 10px 30px rgba(255, 0, 102, 0.2); 
  border-color: rgba(255, 0, 102, 0.3); 
}

.ps-service-title { 
  color: var(--roc-pink); 
  font-weight: 700; 
  font-size: 1rem; 
  text-transform: uppercase; 
  margin-bottom: 0.75rem; 
}

.ps-service-desc { 
  color: #ddd; 
  font-size: 0.95rem; 
  line-height: 1.6; 
}

.ps-cta-section { 
  text-align: center; 
  margin-top: 4rem; 
}

.ps-cta-text { 
  font-weight: 200; 
  color: #fff; 
  margin-bottom: 1rem; 
  font-size: 1.1rem; 
  text-align: center; 
}

.ps-cta-btn {
  display: inline-block; 
  background: var(--roc-pink); 
  color: #fff; 
  padding: 0.9rem 1.75rem;
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 700; 
  font-size: 0.9rem;
  transition: background 0.3s; 
  text-transform: uppercase;
  min-width: 280px;
  text-align: center;
}

.ps-cta-btn:hover { 
  background: #e6005c; 
}

/* ========================================
   21. LOCAULTURE
   ======================================== */
#locaulture { 
  background: #fff; 
  color: #000; 
  padding: 3rem 5%;
  min-height: 100vh;
}
.locaulture-content { 
  max-width: 1440px; 
  margin: 0 auto; 
}
.locaulture-logo-container { 
  text-align: center; 
  margin-bottom: 2rem; 
}
.locaulture-logo { 
  max-width: 600px; 
  width: 100%; 
  height: auto; 
}
.locaulture-layout { 
  display: grid; 
  grid-template-columns: 400px 1fr; 
  gap: 4rem; 
  align-items: start; 
}
.locaulture-left { 
  position: sticky; 
  top: 120px; 
}
.locaulture-heading { 
  font-size: 2.5rem; 
  font-weight: 900; 
  color: #000; 
  margin-bottom: 1.5rem; 
  line-height: 1.2; 
}
.locaulture-divider { 
  width: 400px; 
  height: 3px; 
  background: var(--roc-pink); 
  margin-bottom: 3rem; 
}
.locaulture-description { 
  font-size: 1.3rem; 
  line-height: 1.8; 
  color: #333; 
}
.locaulture-description strong { 
  font-weight: 700; 
  color: #000; 
}
.locaulture-description em { 
  font-style: italic; 
  color: #444; 
}
.locaulture-table { 
  display: flex; 
  flex-direction: column; 
  gap: 0; 
}
.table-row { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 0; 
}
.table-cell { 
  background: #f5f5f5; 
  border: 1px solid #e0e0e0; 
  padding: 2rem 1.5rem; 
  transition: all 0.3s ease; 
}
.table-cell:hover { 
  background: #fff; 
  border-color: var(--roc-pink); 
  transform: scale(1.02); 
  z-index: 1; 
  box-shadow: 0 8px 25px rgba(255, 0, 102, 0.15); 
  position: relative; 
}
.table-cell h4 { 
  font-size: 1.2rem; 
  font-weight: 700; 
  color: #000; 
  margin-bottom: 0.75rem; 
  line-height: 1.3; 
}
.table-cell p { 
  font-size: 1rem; 
  line-height: 1.5; 
  color: #444; 
  margin: 0; 
}

/* ========================================
   THE FIRM PAGE - HERO SECTION
   ======================================== */
#the-firm-hero {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  padding: 1rem 5% 0 5%;
  margin: 0;
  text-align: center;
}

/* "tHE fIRM" title styling */
#the-firm-hero .section-title {
  font-size: clamp(4rem, 10vw, 6rem);
  margin-top: 0; /* Control exact spacing from nav */
  margin-bottom: 0;
   max-width: 1200px;
  color: #000;
  letter-spacing: 0.05em;
}

/* Typography for "tHE fIRM" logo effect */
.firm-title-heavy { 
  font-weight: 900; 
}

.firm-title-thin { 
  font-weight: 200; 
  text-transform: uppercase;
}

/* Subtitle styling */
#the-firm-hero .section-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.5;
  max-width: 1200px;
  margin: 0 auto 0.5rem; /* Changed from 3rem to 0.5rem */
  color: #000;
}

/* Gray subtitle text */
.firm-text-gray {
  color: #444;
  font-weight: 300;
}

/* Pink highlight text */
.text-pink-highlight {
  color: var(--roc-pink);
  font-weight: 700;
}

/* ========================================
   CONTACT SECTION - LIGHT MODE (the-firm.html only)
   ======================================== */

/* Section & Container */
body.light-mode .contact-section {
  background: #fff;
  color: #000;
  padding: 0 5% 4rem 5%;
  margin-top: 0;
}

body.light-mode .contact-container {
  padding-top: 0;
  margin-top: 0;
}

/* Input & Textarea - black text when typing */
body.light-mode .form-group input,
body.light-mode .form-group textarea {
  background: #f8f8f8;
  border: 1px solid #ddd;
  color: #000;
}

/* Select dropdown - gray until JS changes on selection */
body.light-mode .form-group select {
  background: #f8f8f8;
  border: 1px solid #ddd;
  color: #999;
}

/* Placeholder text */
body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder {
  color: #999;
}

/* Dropdown options */
body.light-mode .form-group select option {
  background: #fff;
  color: #000;
}

/* Focus states */
body.light-mode .form-group input:focus,
body.light-mode .form-group select:focus,
body.light-mode .form-group textarea:focus {
  background: #fff;
  border-color: var(--roc-pink);
  box-shadow: 0 0 0 3px rgba(255, 0, 102, 0.1);
}

/* Submit button */
body.light-mode .submit-btn {
  background: var(--roc-pink);
  color: #fff;
}

body.light-mode .submit-btn:hover {
  background: var(--roc-pink-hover);
}

/* ========================================
   22. FOOTER (UPDATED: COMPACT & SLEEK)
   ======================================== */
footer { 
  background: #000; 
  /* Reduced padding: makes the footer shorter vertically */
  padding: 2rem 5% 2rem; 
  
  /* Sleek border & upward glow */
  border-top: 1px solid rgba(255, 0, 102, 0.2); 
  box-shadow: 0 -10px 30px -5px rgba(255, 0, 102, 0.15);
  
  position: relative;
  z-index: 10;
}

.footer-content { 
  /* Increased width: lets the columns spread out more */
  max-width: 1400px; 
  margin: 0 auto; 
}

.footer-grid { 
  display: grid; 
  /* Reduced min-width from 200px to 160px to allow 5 items to fit */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
  /* Slightly reduced gap (from 3rem) to help them squeeze in */
  gap: 2rem; 
  margin-bottom: 1.5rem;
}

.footer-column { 
  display: flex; 
  flex-direction: column; 
  gap: 0.6rem; 
}

/* Link Styling (Keeps the sleek look) */
.footer-column a { 
  color: #888; 
  text-transform: uppercase; 
  font-size: 0.75rem; 
  letter-spacing: 2px; 
  font-weight: 500;
  transition: all 0.3s ease;
  margin-bottom: 0.2rem;
  display: inline-block;
}

.footer-column a:hover { 
  color: var(--roc-pink); 
  transform: translateX(5px); 
  text-shadow: 0 0 10px rgba(255, 0, 102, 0.5); 
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  
  /* 1. Pack them together in the center (stops them from floating apart) */
  justify-content: center; 
  align-items: center; 
  
  /* 2. Set the spacing to match your text links */
  /* 1.5rem (approx 24px) matches the visual rhythm of your text columns */
  gap: 1.5rem; 
  
  /* 3. Center the whole group vertically relative to the text columns */
  margin-top: auto;
  margin-bottom: auto;
  height: auto; /* Ensures it doesn't force a full-height spread */
}

.logo-large { 
  width: 95px; 
  /* Adjusted margins for the tighter layout */
  margin: 0;
}

.logo-large img { 
  display: block; 
  margin: 0;
}

.social-links { 
  margin: 0; /* Clean reset */
  display: flex;
  justify-content: center;
}

.social-links a {
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
  color: var(--roc-pink);
  transform: scale(1.1);
}

/* Copyright Text (Pulled up closer) */
.footer-text { 
  color: #444; 
  font-size: 0.8rem; 
  text-align: center; 
  /* greatly reduced from 3rem */
  margin-top: 1.5rem; 
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ========================================
   23. SCROLL TO TOP BUTTON
   ======================================== */
#toTopBtn {
  position: fixed;
  bottom: 1.25rem; 
  right: 1.25rem; 
  z-index: 50;
  padding: 0.75rem; 
  border-radius: 9999px; 
  background-color: var(--roc-pink);
  color: #000; 
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

#toTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: pulsate-glow 2.5s infinite;
}

#toTopBtn .rocket-icon {
  width: 1.5rem; 
  height: 1.5rem; 
  display: block; 
}

#toTopBtn:hover {
  background-color: #e6005c; 
}

@keyframes pulsate-glow {
  0%, 100% {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 10px rgba(255, 0, 102, 0.3), 0 0 20px rgba(255, 0, 102, 0.2);
  }
  50% {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 20px rgba(255, 0, 102, 0.7), 0 0 30px rgba(255, 0, 102, 0.5);
  }
}

/* ========================================
   24. MOBILE STYLES - CONSOLIDATED
   All mobile adjustments in one place
   ======================================== */
@media (max-width: 1080px) {
  :root { 
    --nav-h: 65px;
    --nav-anchor-offset: 65px;
  }

  /* Navigation */
  nav { 
    padding: .75rem 5%; 
  }
  .logo img { 
    height: 40px; 
  }
  .hamburger { 
    display: block; 
  }
  .nav-groups {
    display: none; 
    position: fixed; 
    top: var(--nav-h); 
    left: 0; 
    right: 0;
    background: #fff; 
    border-bottom: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 12px 30px rgba(0,0,0,.08); 
    flex-direction: column; 
    gap: 0;
  }
  .nav-groups.open { 
    display: flex; 
  }
  .nav-center, .nav-right {
    flex-direction: column; 
    width: 100%; 
    padding: 0.9rem 5%; 
    gap: 0.75rem; 
    align-items: flex-start;
  }
  .nav-center a, .nav-right a { 
    padding: 0.35rem 0; 
    width: 100%; 
  }

  /* General */
  .full-page {
    min-height: 0;
  }

  /* Hero */
  .hero { 
    margin-top: calc(var(--nav-h) * -1);
  }
  .hero h1 {
    font-size: 3.75rem;
    margin-top: 8rem; /* Reduce from 9rem to 2rem */
    padding-top: 8rem; /* Reduce from 5rem to 1rem */
  }
  .hero-subtitle { 
    font-size: 1.3rem;
  }

  .hero-content {
    margin-top: 0;
  }
  
  .mission-update-text {
    margin-bottom: 0.5rem; /* Reduce space below mission update */
    margin-top: 0.5rem;
  }

  /* MANAGED SERVICES SECTION Decrease title size */
  #services .section-title,
  .services-fullpage .section-title {
    font-size: clamp(3rem, 8vw, 4rem); /* Smaller on mobile */
    line-height: 1.1; /* Tighter line spacing */
    margin-bottom: 1rem;
    margin-top: 0;
  }
  
  /* Tighten subtitle spacing */
  #services .section-subtitle,
  .services-fullpage .section-subtitle {
    font-size: 1rem; /* Smaller subtitle */
    line-height: 1.3; /* Tighter line height */
    margin-bottom: 1.5rem;
  }
  
  /* Reduce section padding */
  #services,
  .services-fullpage {
    padding-top: 3rem; /* Less top padding */
    padding-bottom: 2rem;
  }

  /* Mobile adjustments for Atlas page */

  #Atlas { 
    padding: 1rem 5% 2rem;
  }
  .atlas-cards-wrapper { 
    grid-template-columns: 1fr !important; 
    gap: 1.5rem; 
  }
  .atlas-content-card { 
    grid-template-columns: 1fr; 
    padding: 1.5rem; 
  }
  .atlas-content-card h4 {
    font-size: 1.2rem;
  }
  .atlas-content-card p {
    font-size: 1rem;
  }
  .atlas-image-card { 
    min-height: 350px;
    background-size: contain;
  }
  .ci-grid, .ci-col-left { 
    grid-template-columns: 1fr; 
  }
  .platform-logo-title {
    max-width: 300px;
  }

  #platform {
    /* Adds breathing room on the sides so text doesn't hit the edge */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    
    /* Ensure bottom spacing is consistent */
    padding-bottom: 3rem;
  }

  /* OPTIONAL: Reduce the internal padding of the gray cards so they don't feel squashed */
  .feature-card {
    padding: 2rem 1.5rem !important; /* Reduced from the massive 3rem on desktop */
  }

  .talent-content {
    padding: 0 1rem; /* KEEP THIS - moved here */
  }
  
  /* Suite */
  .suite-section .about-highlight { 
    text-align: center; 
  }

  /* About */
  #about + .prism-line-under,
  .about-section ~ .prism-line-under {
    display: none;
  }

  .about-section {
    padding-top: 2rem;
    padding-bottom: 0rem;
  }
  .about-title-flex { 
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center; 
    width: 100%; 
    margin-left: 0; 
    margin-right: 0; 
    padding-left: 1rem; 
    padding-right: 1rem;
    padding-bottom: 1rem;
    gap: .5rem;
    flex-wrap: nowrap;
  }
  .about-section .about-we-are { 
    font-size: clamp(2.8rem, 10vw, 4rem);
    white-space: nowrap;
    line-height: 1;
  }
  .about-logo-inline {
    height: clamp(3rem, 10vw, 4rem);
    width: auto;
    margin-bottom: 0;
  }

  /* Make quote smaller */
  .about-highlight {
    font-size: 1.6rem !important; /* Adjust to your preference */
  }
  
  /* Make "You're In Good Company" bigger */
  .clients-title-combined {
    font-size: 1.6rem !important; /* Adjust to your preference */
  }

  .logo-carousel {
    margin-bottom: 6rem;
  }

  /* Contact */
  .contact-section { 
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #contact {
    scroll-margin-top: 140px;
  }

  .contact-rocket-icon {
    /* Bring it closer on small screens so it doesn't fall off edge */
    right: -3.5rem; 
    top: 0;
    height: 4rem;
  }

  .contact-container {
    width: 100%;
  }
  .form-group input, 
  .form-group select, 
  .form-group textarea {
    padding: 1rem;
    font-size: 0.95rem;
  }
  .submit-btn {
    width: 100%;
    min-width: unset;
  }

  /* ========================================
   MANAGED SERVICES MOBILE
   ======================================== */
  #talent-partnerships .section-title {
    font-size: clamp(2rem, 8vw, 3rem);
    padding: 1rem 0;
  }

  .im-section, .celeb-section, .aff-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  .im-left, .im-right,
  .celeb-left, .celeb-right,
  .aff-left, .aff-right {
    padding: 0 5% 2rem;
    width: 100%;
  }

  .im-title, .celeb-section-title, .aff-section-title {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
    margin-bottom: 1rem;
  }

  .im-right-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    white-space: normal;
    line-height: 1.2;
  }

  .im-service {
    font-size: 1rem;
    width: 100% !important;
  }

  .celeb-logos {
    max-width: 100%;
    gap: 1.5rem;
  }

  .celeb-logos img {
    max-width: 120px;
  }

  .aff-stats {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .aff-windows {
    grid-template-columns: 1fr;
  }

  .prism-line-vertical {
    display: none;
  }

  .im-subtitle-left {
  font-size: 1rem;
  }

  .im-right-subtitle {
    font-size: 1.8rem;
  }

  .im-video {
    width: 100%;
  }

  .celeb-union-title {
    font-size: 1.8rem;
  }

  .celeb-union-subtitle {
    font-size: 1rem;
  }

  /* ========================================
   THE FIRM MOBILE
   ======================================== */
  #the-firm-hero {
    padding: 1rem 5% 2rem 5%;
  }

  #the-firm-hero .section-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
    margin-bottom: 0.5rem;
  }

  #the-firm-hero .section-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    text-align: left; /* Left align for better reading */
    padding: 0 1rem;
  }

  /* Light mode contact form mobile */
  body.light-mode .contact-section {
    padding: 0 5% 3rem 5%;
  }

  body.light-mode .contact-container {
    width: 100%;
  }

  body.light-mode .form-group input,
  body.light-mode .form-group select,
  body.light-mode .form-group textarea {
    padding: 1rem;
    font-size: 0.95rem;
  }

  body.light-mode .submit-btn {
    width: 100%;
  }

  /* ---------------------------
  Experiential html mobile
  ----------------------------*/

  #experiential {
  background: linear-gradient(to bottom, #000 0%, #1a1a1a 50%, #2a2a2a 100%);
  }

  .exp-grid { 
  grid-template-columns: 1fr; 
  }

  .exp-grid { 
    grid-template-columns: 1fr; 
  }
  .exp-item:not(:last-child)::after { 
    display: none; 
  }
  .exp-item { 
    padding-bottom: 2rem; 
    border-bottom: 2px solid rgba(255,255,255,0.1);
    text-align: left !important;
  }

  #experiential .exp-item-text {
    text-align: left;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .exp-cta-float { 
    position: relative; 
    top: auto; 
    right: auto; 
    margin-bottom: 2rem;
    justify-content: center;
    display: flex;
  }

  .ep-grid { 
    grid-template-columns: 1fr; 
  }
  .ep-bg-video { 
    display: none; 
  }
  .ep-main-content { 
    background: #222; 
  }

  /* ========================================
    BRANDED CONTENT MOBILE
    ======================================== */
  #branded-content {
    padding: 1rem 5% 2rem;
  }

  #branded-content .section-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .bc-grid { 
    grid-template-columns: 1fr; 
  }

  .bc-services { 
    display: flex; 
    flex-direction: column; 
    gap: 2rem; 
  }

  .bc-service-title { 
    font-size: 1.2rem; 
  }

  .bc-service-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .bc-video-wrapper { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%;
  }

  .bc-video { 
    width: 95%; 
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
    border-radius: 12px;
  }

  /* Cultural Intelligence - Button Centering */
  #cultural-intelligence .ci-cta-box {
    text-align: center;      /* Override desktop 'left' align */
    display: flex;           /* Use flexbox for perfect centering */
    flex-direction: column;
    align-items: center;     /* Centers the button itself */
    margin-top: 2rem;
  }

  #cultural-intelligence .ci-cta-text {
    text-align: center;      /* Center the "Learn More" text */
    width: 100%;
  }


  /* Creator IRL - Mobile Video Fix + Button Order */
  .cirl-layout { 
    display: flex; /* Switch to Flexbox to easily reorder */
    flex-direction: column;
    gap: 2rem;
  }

  .cirl-col-left {
    padding-top: 0;
    order: 1; /* Text First */
  }

  .cirl-col-right { 
    order: 2; /* Video Second */
    background-image: none; 
    background-color: transparent;
    min-height: auto; 
    margin-top: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cirl-video { 
    display: block;
    width: 100%; 
    height: auto;
    max-height: 600px;
    object-fit: contain;
  }

  /* Button Last & Centered */
  .cirl-cta-box {
    order: 3; /* Button Last */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    margin-top: 1rem;
  }

  #creator-irl .ci-cta-text {
    text-align: center;
  }

  /* Content Capture */
  .cc-layout { 
    grid-template-columns: 1fr; 
  }
  .cc-service-grid { 
    grid-template-columns: 1fr; 
  }
  .cc-col-right { 
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)); 
    background-size: cover; 
    background-position: center center; 
    min-height: 300px; 
    margin-top: 2rem; 
    align-self: auto;
  }

  /* Center the Text and Button via the CONTAINER, not the button itself */
  .cc-cta-section {
    text-align: center; /* Centers inline-block elements like the button */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers flex items */
    margin-top: 2rem;
  }

  .cc-cta-text {
    text-align: center;
    margin-bottom: 1rem;
  }

  .cc-cta-btn {
    /* Change 'flex' to 'inline-block' to stop it from being full-width */
    display: inline-block; 
    width: auto;           /* Reset any inherited widths */
    min-width: 280px;      /* Keep your standard minimum width */
  }

  /* Organic Momentum - Fix Squeezing */
  .om-quadrant-grid { 
    grid-template-columns: 1fr !important; /* Forces 1 column stack */
    gap: 2rem; 
  }

  .om-quadrant {
    min-height: 400px; /* Gives video cards proper height */
  }

  /* Paid Amplification */
  .pa-channels-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }

  /* Measurement & Optimization */
  .mo-layout { 
    grid-template-columns: 1fr; 
  } 
  .mo-timeline::before { 
    display: none; 
  } 
  .mo-timeline-node { 
    display: none; 
  } 
  .mo-timeline-item { 
    gap: 0; 
  } 
  .mo-timeline { 
    gap: 2rem; 
  }

  /* CRM Activation - Mobile Centering Fix */
  .crm-layout { 
    grid-template-columns: 1fr; 
    gap: 2rem;
  }

  /* 1. Fix the Image Alignment */
  .crm-col-right {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  .crm-col-right img {
    margin: 0;        /* REMOVE the 6rem margin from desktop */
    width: 100%;
    max-width: 400px; /* Keep it from getting too huge */
    height: auto;
  }

  /* 2. Fix the Button & Text Alignment */
  .crm-cta-section {
    text-align: center; /* Override desktop 'right' alignment */
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the button */
  }

  .crm-cta-text {
    text-align: center; /* Override desktop 'right' alignment */
    margin-bottom: 1.5rem;
  }

  /* Press Solutions */
  .ps-grid { 
    grid-template-columns: 1fr; 
    padding-left: 5%;
    padding-right: 5%;
  }

  /* Locaulture */
  .locaulture-layout { 
    grid-template-columns: 1fr;
    padding-bottom: 1rem;
  }

  .locaulture-left { 
    position: static; 
    margin-bottom: 0; 
  }
  
  .locaulture-divider { 
    width: 375px; 
    height: 2px; 
    background: var(--roc-pink);
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .locaulture-logo {
    max-width: 280px;
  }

  .locaulture-heading {
    font-size: 1.8rem;
  }

  .locaulture-description {
    font-size: 1rem;
  }
  
  .table-row { 
    grid-template-columns: repeat(2, 1fr); 
  }

  .om-quadrant-grid { 
    grid-template-columns: repeat(4, 1fr); /* 4 columns in a row */
    gap: 1.5rem; 
    max-width: 1400px; 
    margin: 0 auto; 
  }
  
  .om-quadrant { 
    aspect-ratio: auto; /* Remove forced square */
    min-height: 350px;
  }
  
  .om-quadrant-video-wrapper { 
    display: block; 
  }

  /* ========================================
   Organic Momentum Mobile
   ======================================== */

  .om-quadrant-grid { 
    grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
    gap: 1rem; 
    max-width: 100%;
  }

  .om-quadrant {
    min-height: 300px;
  }

  .om-service-title {
    font-size: 0.85rem;
  }

  .om-service-desc {
    font-size: 0.85rem;
  }

  /* --- SUITE MOBILE FIX: Adjust Scroll Position --- */
  #content-capture,
  #organic-momentum,
  #paid-amplification,
  #measurement-optimization,
  #crm-activation,
  #press-solutions {
    /* Set to 130px as requested to test spacing */
    scroll-margin-top: -130px !important;
  }

  /* ========================================
   Footer Mobile
   ======================================== */
  footer {
    text-align: center;
    padding: 3rem 1.5rem 4rem; /* Comfortable padding */
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem 0.5rem;
    margin-bottom: 0;
    text-align: center;
  }

  /* 3. Handle the Link Columns */
  .footer-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem; /* Tighter vertical spacing between links */
  }

  .footer-column a {
    font-size: 0.7rem; /* Sleek, smaller text */
    letter-spacing: 1px;
    line-height: 1.4;
    padding: 0;
    color: #999; /* Softer grey */
  }

  /* 4. The Magic Trick: Make Brand Column Span Full Width */
  /* This targets the logo/socials column (the last one) */
  .footer-brand-col {
    grid-column: 1 / -1; /* Forces it to span both columns */
    margin-top: 1rem;
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator line */
    width: 100%;
    gap: .25rem;
  }
  
  /* Ensure Logo and Socials are tight */
  .logo-large, .social-links {
    margin: 0;
  }
  
  .footer-text {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #888;
    font-size: 0.65rem;
    opacity: 1;
  }

  #toTopBtn {
    /* Push it up 90-100px to clear Safari/Chrome bottom bars */
    bottom: 6rem; 
    /* Keep it slightly away from the right edge */
    right: 1.25rem; 
    /* Ensure it floats above everything else */
    z-index: 1000;
  }

}

/* ========================================
   25. SMALL MOBILE (480px and below)
   ======================================== */
@media (max-width: 480px) {
  .atlas-content-card h4 { 
    font-size: 1.2rem; 
  }
  .atlas-image-card { 
    min-height: 400px; 
  }
  .pa-channels-grid { 
    grid-template-columns: 1fr; 
  }
  .ps-grid { 
    gap: 1.5rem; 
  }
  .table-row { 
    grid-template-columns: 1fr; 
  }
  .table-cell { 
    padding: 1.5rem; 
  }
  .locaulture-logo { 
    max-width: 400px; 
  }
  .locaulture-heading { 
    font-size: 2rem; 
  }

  /* Organic Momentum Small Mobile */
  .om-quadrant-grid { 
    grid-template-columns: 1fr; /* 1 column on small mobile */
    gap: 1rem;
  }

  .om-quadrant {
    min-height: 250px;
  }

}

/* Tablet specific (768px to 1200px) */
@media (max-width: 1200px) and (min-width: 768px) {
  .locaulture-layout { 
    grid-template-columns: 1fr; 
    gap: 3rem; 
  }
  .locaulture-left { 
    position: static; 
    margin-bottom: 2rem; 
  }
  .locaulture-divider { 
    width: 100px; 
  }
  .table-row { 
    grid-template-columns: repeat(2, 1fr); 
  }
}