@charset "UTF-8";

/* ============================================================
   1. BASE STYLES
   ============================================================ */
body, html {
  margin: 0;
  padding: 0;
  font-family: "open-sans", sans-serif;
  color: #000;
  background-color: #fff;
}

.wedge { width: 250px; }

.secondarylogo { 
	width: 275px;
	position: absolute;
	top: 20px;
	left: 30px;
}

.yellow { color: #ffc609; }

#main-content-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative; 
  z-index: 1; 
  background-color: transparent; /* CHANGED: Remove white background */
  display: block;
}

#main-content-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('images/blueSwirl6.jpg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  opacity: 0.44;
  z-index: -1; 
  pointer-events: none;
}

h1, h2, h3, h4 { color: #044f7c; margin-bottom: 0; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.75em; }

section { 
  padding: 2vw 6vw; 
  background: transparent; 
  position: relative; 
  z-index: 2; 
}

.section1 { 
	display: flex; 
	padding-top: 5vw;
	flex-direction: row-reverse;
}

.section1 img { margin-left: 20px; }

.swirl1 {
	background-image: url("images/blueSwirl1.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl2 {
	background-image: url("images/blueSwirl2.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl3 {
	background-image: url("images/blueSwirl3.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl4 {
	background-image: url("images/blueSwirl4.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}

.swirl5 {
	background-image: url("images/blueSwirl5.jpg");
  	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
}



.main-nav {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: linear-gradient(to bottom, #053a60, #044d7a);
  border-bottom: #ffc60b 3px solid;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.nav-list { 
  display: flex; 
  justify-content: center; 
  list-style: none; 
  margin: 0; 
  padding: 0.8rem 1rem; 
  gap: 24px; /* Increased from 10px to give links more breathing room */
  flex-wrap: wrap; 
}

.nav-list { 
  display: flex; 
  justify-content: center; 
  list-style: none; 
  margin: 0; 
  padding: 0 1rem; 
  gap: 6px; 
  flex-wrap: wrap; 
}

.nav-list a { 
  display: inline-block; 
  color: white; 
  text-decoration: none; 
  font-weight: 500; 
  font-size: 0.9rem; 
  padding: 1.1rem 8px; 
  transition: color 0.1s ease, background-color 0.1s ease; /* Slightly faster transition for snappier click response */
}

/* Rollover State */
.nav-list a:hover { 
  color: #ffc60b; 
  background-color: #002b46; 
}

/* Active Page State (The page you are currently viewing) */
.nav-list a.current {
  color: #ffffff;
  background-color: #002b46; 
  font-weight: 500; 
}

/* Click/Press State (Flashes when actively clicked) */
.nav-list a:active {
  background-color: #0084d4;
  color: #fff; /* Switches text to clean white during the click for sharp contrast */
}

.nav-list a:visited {
  color: #ffffff;
}

/* Hide hamburger button by default on desktop viewports */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 1rem;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
}

/* Beautiful modern pure CSS hamburger icon */
.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: background 0.2s ease-in-out;
}
.hamburger::before, .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: transform 0.2s ease-in-out, top 0.2s ease-in-out;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Morph hamburger into an 'X' icon when open */
.nav-toggle.open .hamburger { background: transparent; }
.nav-toggle.open .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open .hamburger::after { top: 0; transform: rotate(-45deg); }

/* ============================================================
   2. HERO & FLY-IN TEXT (Staggered Twinkle)
   ============================================================ */
.hero-container {
  margin-top: 57px; 
  margin-bottom: 0 !important;
  width: 100%; 
  height: auto; 
  overflow: visible;
  background-color: transparent;
  line-height: 0;
  animation: fadeInDown 1s ease-out forwards;
  position: relative;
  z-index: 3; 
}

.hero-image { width: 100%; height: auto; display: block; min-height: 250px; object-fit: cover; }

.hero2 { border-bottom: 3px #ffc60b solid; }

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-35px); }
  100% { opacity: 1; transform: translateY(0); }
}

.readyToLaunch {
  margin: 0; padding: 0 6vw; margin-top: -15px !important; 
  overflow: visible; width: 100%;
}

.readyToLaunch #fly-in-text {
  display: block; font-family: "open-sans", sans-serif; font-weight: 800; 
  font-size: clamp(1.8rem, 7.5vw, 3.8rem); color: #044f7c; 
  line-height: 0.95; letter-spacing: -0.02em;
  -webkit-text-stroke: 1px #044f7c; 
}

.readyToLaunch .word { display: inline-block; white-space: nowrap; margin-right: 0.25em; }
.readyToLaunch .letter-Y { margin-right: -0.1em; }

.readyToLaunch .letter {
  display: inline-block; opacity: 0; filter: blur(12px); transform: scale(4);
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
  padding-bottom: 0.15em; margin-bottom: -0.15em;
  will-change: transform, opacity, color;
  color: #044f7c;
}

.readyToLaunch .letter.active { 
  opacity: 1; 
  transform: scale(1); 
  filter: blur(0); 
  animation: textTwinkle 14s ease-in-out infinite;
}

@keyframes textTwinkle {
  0%, 100% { color: #044f7c; }
  14% { color: #5da9dd; } 
  28% { color: #044f7c; }
}

/* ============================================================
   3. WATERFALL REVEAL
   ============================================================ */
.intro, .wheel-section, .instructions { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: opacity 1s ease, transform 1s ease; 
}

.section-reveal { 
  opacity: 1 !important; 
  transform: translateY(0) !important; 
  pointer-events: auto; 
}

.intro { 
	padding: 2vw 6vw; 
	padding-top: 10px !important; 
	padding-bottom: 0 !important; 
}

/* ============================================================
   4. THE WHEEL
   ============================================================ */
.wheel-outer-container { display: flex; align-items: center; justify-content: center; gap: 50px; margin: 0 auto; }

.wheel-section { 
  padding: 0 !important; 
  margin: 0 !important; 
  margin-top: -5px !important; 
  /* CHANGE THIS LINE: Increased from 1px to create a clean separation */
  margin-bottom: 60px !important; 
}

.wheel-graphic-wrapper { flex: 0 0 520px; width: 520px; height: 520px; position: relative; z-index: 99; }

.path-wheel-svg { 
  width: 100%; height: 100%; display: block; overflow: visible; 
  transform-origin: center center;
  transform: rotate(-360deg);
  transition: transform 2.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.path-wheel-svg.spin-active { transform: rotate(0deg); }

.slice { cursor: pointer; outline: none; transform: translateZ(0); will-change: transform; }
.base-path { stroke: #0a141d; stroke-width: 2; transform-origin: 300px 300px; transition: transform 0.3s ease-out, fill 0.3s ease; }

.slice.s-gr .base-path { fill: #011A28 !important; }
.slice.s-li .base-path { fill: #023452 !important; }
.slice.s-le .base-path { fill: #044F7C !important; }
.slice.s-hs .base-path { fill: #2C6E9C !important; }
.slice.s-ug .base-path { fill: #4B8CC0 !important; }



/* Triggers on desktop hover OR mobile active tap */
.slice:hover .base-path,
.slice.tapped .base-path { 
  fill: #ffc60b !important; 
  transform: scale(1.06); 
}

.slice:hover text,
.slice.tapped text { 
  fill: #000000 !important; 
  transform: scale(1.06); 
}



@keyframes balanced-sparkle { 
  0%, 100% { opacity: 0; } 
  25% { opacity: 0.3; } 
  50% { opacity: 0; } 
}

.glow-path { 
  fill: #ffffff; 
  pointer-events: none; 
  opacity: 0; 
  transform-origin: 300px 300px; 
  animation: balanced-sparkle 6s ease-in-out infinite; 
  will-change: opacity; 
}

.s-ug .glow-path { animation-duration: 4.8s; animation-delay: 0.2s; }
.s-gr .glow-path { animation-duration: 8.5s; animation-delay: 1.5s; }
.s-li .glow-path { animation-duration: 6.2s; animation-delay: 0.8s; }
.s-le .glow-path { animation-duration: 9.5s; animation-delay: 2.2s; }
.s-hs .glow-path { animation-duration: 5.5s; animation-delay: 3.5s; }

.slice text { pointer-events: none; font-weight: bold; font-size: 21px; text-anchor: middle; dominant-baseline: middle; fill: #ffffff; transform-origin: 300px 300px; transition: transform 0.3s ease-out; }
.slice:hover text { fill: #000000 !important; transform: scale(1.06); }





/* REFACTORED MODULAR INFO PANEL ARCHITECTURE */
.wheel-info-panel {
  flex: 0 1 420px;          
  width: 420px;
  padding: 0;                  /* CHANGED: Removed parent padding so header can flush to edges */
  background: rgba(255, 255, 255, 0.98); 
  border-radius: 10px; 
  border: 2px solid #ccc;
  min-height: 380px;        
  height: auto;             
  box-sizing: border-box;
  display: block;           
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;         /* Retained: Clips the header corners to match the 10px frame */
}

/* Visual state transition management */
.info-content {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.info-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* CLEAN REWRIte: NATURAL EDGE-TO-EDGE HEADER */
.wheel-info-panel h2 { 
  font-size: 1.3rem; 
  line-height: 1.2;
  margin: 0;                   /* CHANGED: Zeroed out margins so it rests naturally at the top */
  padding: 18px 24px;          
  background: #044f7c;            
  color: #ffffff;                 
  font-weight: 600;
  border-bottom: 3px solid #ffc60b; 
}

/* NEW: Safely adds internal padding to contents following the header */
.path-summary, 
.instructional-text { 
  margin-top: 20px;            /* Gives text breathing room right below the blue block */
  padding-left: 24px;
  padding-right: 24px;
}

.path-summary {
  font-size: 0.92rem; 
  line-height: 1.45; 
  color: #333;
  margin-bottom: 16px;
}

.instructional-text {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
  padding-bottom: 24px;        /* Spacing at the very bottom of the instruction state */
}

/* Layout systems for secondary content parameters */
.info-details-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 24px;          /* Added padding back here */
  padding-right: 24px;         /* Added padding back here */
  padding-bottom: 24px;        /* Spacing at the very bottom of the data states */
}

.info-block h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2c6e9c;
  margin-top: 0;
  margin-bottom: 6px;
}

.badge-list {
  font-weight: 700;
  color: #044f7c;
  background: #eaf2f8;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
  font-size: 0.85rem;
  margin: 0;
}

.careers-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #444;
  line-height: 1.45;
}

.careers-list li {
  margin-bottom: 5px;
}







/* ============================================================
   5. INSTRUCTIONS
   ============================================================ */
.instructions {
  padding-bottom: 4vw !important; 
}

/* ============================================================
   6. FOOTER
   ============================================================ */
footer {
  background: linear-gradient(to bottom, #022c49, #044f7b);
  padding: 3.5rem 1rem; 
  text-align: center; color: white;
  border-top: #ffc609 3px solid; 
  margin-top: 0; overflow: hidden;
  position: relative; z-index: 10;
}

.footerText { color: #fff; margin-bottom: 2.5rem; }
.footerLogos { display: flex; justify-content: center; align-items: center; gap: 13px; }

.footerLogos img { 
  height: 7vw; width: auto; max-height: 85px; opacity: 0; 
  transition: opacity 1.2s ease-out, transform 5s cubic-bezier(0.1, 1, 0.2, 1);
}

.footerLogos img:first-child { transform: translateX(-150px); }
.footerLogos img:last-child { transform: translateX(150px); }

.footerLogos.visible img { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }

footer a:link, a:visited { 
  color: #ffc609; 
  text-decoration: underline; 
}
footer a:hover { color: #fff; }
footer a:active { color: red; }

.partnerLogos { 
	width: 500px;
	margin-top: 10px;
	margin-bottom: 10px;
}


/* ============================================================
   TRANSITIONAL ZONE (801px to 950px)
   Keeps layout side-by-side but shrinks the wheel & optimizes info panel
   ============================================================ */
@media (min-width: 801px) and (max-width: 950px) {
  section, .intro {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    padding-top: 1.5vw !important;    
    padding-bottom: 1.5vw !important; 
  }

  .intro {
    padding-top: 5px !important;      
    padding-bottom: 0 !important;     
  }

  .wheel-outer-container {
    gap: 25px; /* Slightly increased gap for better visual separation */
    max-width: 820px;
  }

  .wheel-graphic-wrapper {
    flex: 0 0 410px; /* Kept stable at 410px */
    max-width: 410px;
    height: auto;          
    aspect-ratio: 1 / 1;   
  }

  /* REFINED: Allowed the panel to expand horizontally so long text doesn't overflow */
  .wheel-info-panel {
    flex: 1 1 auto;       /* Allows the panel to dynamically claim leftover layout space */
    max-width: 340px;     /* Increased from 250px to comfortably hold the Workforce text */
    padding: 22px;
    min-height: 240px;    /* Slightly deeper floor to guarantee text coverage */
    box-sizing: border-box;
  }
}

/* ============================================================
   MOBILE ZONE (800px and Below)
   Stacks layout vertically, handles hamburger menu & tight spacing
   ============================================================ */
@media (max-width: 800px) {
  .main-nav {
    min-height: 54px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-toggle {
    display: block;
  }

  .nav-list {
    display: none; 
    flex-direction: column;
    width: 100%;
    gap: 0; 
    padding: 0;
    position: absolute;
    top: 100%; 
    left: 0;
    background: #044d7a;
    border-bottom: #ffc60b 3px solid;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .nav-list.open {
    display: flex;
  }

  .nav-list a {
    display: block;
    width: 100%;
    padding: 14px 24px; 
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
  }
  
  .nav-list li {
    width: 100%;
  }

  .hero-container {
    margin-top: 54px; 
  }

  .hero-image {
    min-height: auto; 
  }

  .readyToLaunch {
    padding-bottom: 0 !important; 
  }

  .intro {
    padding-top: 4px !important;    
    padding-bottom: 12px !important; 
  }

  .intro p {
    margin-top: 4px !important;    
    margin-bottom: 0 !important;   
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .wheel-section {
    padding-top: 0 !important;      
    padding-bottom: 0 !important;
	margin-bottom: 30px !important;
  }

  .wheel-outer-container { 
    flex-direction: column; 
    gap: 15px; 
    padding: 0 20px;
    box-sizing: border-box;
  }

  .wheel-graphic-wrapper {
    flex: 0 0 auto;       
    width: 100%;
    max-width: 420px;     
    height: auto;         
    aspect-ratio: 1 / 1;  
  }


  .wheel-info-panel {
    max-width: 90%;           
    width: 90%;              
    margin-left: auto;      
    margin-right: auto;       
    flex: 0 1 auto;
    min-height: auto; 
    margin-bottom: 0 !important;
  }

  .instructions {
    padding-top: 15px !important;   
    padding-bottom: 35px !important; /* Retained the fix for the footer cushion */
  }

  .instructions h2 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;  
  }

  .instructions p {
    margin-top: 0 !important;       
    margin-bottom: 0 !important;    
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .footerLogos img { 
    height: 12vw; 
    max-height: 60px; 
  }
	
	.partnerLogos { 
		width: 90%;
		max-width: 500px;
	}
}





/* ============================================================
   CRITICAL UI LAYOUT PATCH (FORCE OVERRIDES)
   ============================================================ */

/* 1. Force the info panel to scale naturally and adopt block hierarchy */
.wheel-info-panel {
  height: auto !important;        /* Obliterates the old 220px fixed restriction */
  min-height: 400px !important;   /* Provides a clean vertical container footprint */
  display: block !important;      /* Changes from old flex layout to clean block flow */
  flex: 0 1 420px !important;     /* Allows width expansion to fit long text lines */
  width: 420px !important;
  background: rgba(255, 255, 255, 0.98) !important; /* High contrast background */
}

/* 2. Fix the display states so text NEVER shows simultaneously */
.info-content {
  display: none !important;       /* Hard guarantee that inactive screens stay invisible */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.info-content.active {
  display: block !important;      /* Only shows the explicitly active hovered/tapped path */
  opacity: 1;
  transform: translateY(0);
}

/* 3. Scale down panel typography for pristine data density */
.wheel-info-panel h2 {
  font-size: 1.35rem !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.path-summary {
  font-size: 0.88rem !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

.info-block h3 {
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2c6e9c;
  margin-bottom: 4px !important;
}

.badge-list {
  font-size: 0.8rem !important;
  padding: 4px 8px !important;
}

.careers-list {
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
  padding-left: 16px !important;
}


/* ============================================================
   FOOTER STYLES (Copied from styles.css)
   ============================================================ */
footer {
  background: linear-gradient(to bottom, #022c49, #044f7b);
  padding: 3.5rem 1rem; 
  text-align: center; 
  color: white;
  border-top: #ffc609 3px solid; 
  margin-top: auto; 
  position: relative; 
  z-index: 10;
}

/* Flex layout for copyright and contact info */
.footer-credits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px 40px;               
  flex-wrap: wrap;         
  margin: 15px 0 35px 0;      
}

/* Links inside footer */
footer a:link, footer a:visited { 
  color: #ffc609; 
  text-decoration: underline; 
}
footer a:hover { color: #fff; }
footer a:active { color: red; }

/* Text color helper used in the footer partner text */
.yellow { color: #ffc609; }

/* Virtual glue classes to prevent awkward mobile linebreaks */
.nowrap, .contact-nowrap {
  white-space: nowrap;
}

/* Logo container layout */
.footerLogos { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 13px; 
}

/* Desktop logo settings and slide-in animation rules */
.footerLogos img { 
  height: 7vw; 
  max-height: 85px; 
  opacity: 0; 
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.footerLogos img:first-child { transform: translateX(-50px); }
.footerLogos img:last-child { transform: translateX(50px); }
.footerLogos.visible img { opacity: 1; transform: translateX(0); }


/* ============================================================
   MOBILE FOOTER OVERRIDES (Add to your existing media query or paste as-is)
   ============================================================ */
@media (max-width: 800px) {
  .footerLogos img { 
    /* Increases logo size by 50% only on mobile/tablet screens */
    height: 18vw;            
    max-height: 90px;        
  }
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

/* 1. Tablet View (801px - 950px): Tighten Nav to prevent wrapping */
@media (max-width: 950px) and (min-width: 801px) {
  body .main-nav .nav-list {
    gap: 5px !important;       /* Tighten gap */
    padding: 0 5px !important; /* Reduce padding */
  }

  body .main-nav .nav-list a {
    font-size: 0.82rem !important;
    padding: 1.1rem 5px !important;
  }
}

/* 2. Mobile View (800px and Below): Ensure hamburger/menu functionality */
@media (max-width: 800px) {
  body .main-nav .nav-toggle {
    display: block !important;
  }

  body .main-nav .nav-list {
    display: none !important; 
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #044d7a !important;
    border-bottom: #ffc60b 3px solid !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
  }
  
  body .main-nav .nav-list.open {
    display: flex !important;
  }
  
  body .main-nav .nav-list a {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    box-sizing: border-box !important;
  }
}