/* === Extracted from about.html === *//* stop accidental page-wide sideways scroll */html, body { overflow-x: clip; }/* mission gif: don't exceed viewport width *//* labels fix - prevent cut off */.label-text {
  font-size: clamp(30px, 2.8vw, 30px);
  white-space: nowrap;
  text-align: center;
}/* remove decorative circles */.label .circle { display: none !important; }/* description boxes responsive */.description-text {
  font-size: clamp(12px, 2.5vw, 16px);
  line-height: 1.4;
  word-wrap: break-word;
  max-width: 40%;
}/* arrows style: CSS triangles instead of text chars */#arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}#arrow-container .arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  cursor: pointer;
  display: inline-block;
}#arrow-container .arrow[data-dir="-1"] {
  border-right: 12px solid #ff4d4d; /* left triangle */
}#arrow-container .arrow[data-dir="1"] {
  border-left: 12px solid #ff4d4d; /* right triangle */
}/* nav overflow fix *//* Triangular Ties headings */.integrated-bar.partnerships-banner h2 {
  font-size: clamp(24px, 5.5vw, 36px) !important;
  line-height: 1.25;
  text-align: center;
  margin: 0 auto 1rem;
}/* === GLOBAL HEADLINE/UNDERLINE SYSTEM === */:root{
  --headline-size: clamp(40px, 7vw, 88px);
  --underline-h: 6px;
  --underline-gap: 12px;
}/* Apply consistent size to main headings */.mission-copy h1,
.integrated-bar h2,
.partnerships-banner h2{
  font-size: var(--headline-size) !important;
  line-height: 1.08;
  display: inline-block;
  position: relative;
  padding-bottom: var(--underline-gap);
}/* Underlines match text width only */.mission-copy h1::after,
.integrated-bar h2::after,
.partnerships-banner h2::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:var(--underline-h);
  border-radius: calc(var(--underline-h)/2);
  background-image:linear-gradient(90deg, rgba(249,203,34,.95) 0%, rgba(239,118,22,.95) 50%, rgba(240,17,95,.95) 100%);
}/* Remove any legacy full-width bars under headings */.mission-line{ display:none !important; }.integrated-bar, .partnerships-banner{ text-align:center; }/* === MISSION SECTION: BACKGROUND BEHIND, CONTENT OVERLAY === */
/* MISSION SECTION */
.mission-section {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    padding: 80px 0;
    display: flex;
    justify-content: flex-start; /* keeps left aligned */
    align-items: center;
}

/* Body text: narrow readable column */.mission-copy p{
  max-width: 760px;
  margin: 0 auto 16px;
  line-height: 1.45;
  opacity: 1 !important;          /* ensure not faded */
  filter: none !important;
}/* Buttons: no fading; keep tight spacing */.mission-copy .btn-row{
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}.btn-row a, .btn-outline, .btn-img img{
  opacity: 1 !important;
  filter: none !important;
}/* Keep spacing sane on smaller screens */@media (max-width: 1122px){
  .mission-section{ padding: 72px 16px 40px; }
}@media (max-width: 768px){
  .mission-section{ padding: 56px 12px 32px; }
}/* === TRIANGULAR TIES PLACE DIRECTLY AFTER MISSION === */.integrated-bar{ 
  margin-top: 0 !important;
  padding-top: 24px !important;
}/* === Extracted from about.html === *//* --- Desktop cut-off fix for triangle labels --- */.triangle-container {
  /* preserve horizontal clipping to avoid side scroll,
     but allow vertical overflow so labels aren't cut */
  overflow-x: hidden !important;
  overflow-y: visible !important;
}/* increase container height on larger screens so bottom labels fit */@media (min-width: 992px) {
  .triangle-container { height: 920px !important; }
}@media (min-width: 1280px) {
  .triangle-container { height: 980px !important; }
}/* === Extracted from about.html (style id="nav-core") === */.logo{ width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }/* --- Mobile overflow fixes --- */html { overflow-x: clip; }body { overflow-x: hidden; }img, svg, video { max-width: 100%; height: auto; }.support-why h2,
.support-how h2,
.support-tiers-title,
.carousel-title {
  overflow: clip;
}@media (max-width: 600px) {
  :root { --support-underline-overhang: 0; }
}.sponsor-marquee { overflow-x: hidden; }/* === Extracted from about.html (style id="nav-left-hotfix") === *//* === NAV alignment + size hotfix (match index fix) === *//* === Extracted from about.html (style id="tri-large-tune") === */.integrated-approach{ padding-top:0 !important; padding-bottom:0 !important; position:relative; }.triangle-container{
  width:100% !important;
  overflow:visible !important;
  margin:12px auto !important; /* tight gap to headers */
  padding-left: clamp(8px, 2vw, 120px) !important;
  padding-right: clamp(8px, 2vw, 120px) !important;
}/* === Extracted from about.html === *//* Make gradient arrow symbols larger and responsive */#arrow-container .arrow,
.tri-mobile .m-arrow {
  font-size: 3rem !important; /* default size on desktop */
  width: 3.5rem !important;
  height: 3.5rem !important;
}#arrow-container .arrow::before,
.tri-mobile .m-arrow::before {
  font-size: 7rem !important;
}/* Medium screens */@media (max-width: 900px) {
  #arrow-container .arrow,
  .tri-mobile .m-arrow {
    font-size: 2.5rem !important;
    width: 3rem !important;
    height: 3rem !important;
  }
  #arrow-container .arrow::before,
  .tri-mobile .m-arrow::before {
    font-size: 7rem !important;
  }
}/* Small screens */@media (max-width: 480px) {
  #arrow-container .arrow,
  .tri-mobile .m-arrow {
    font-size: 2rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
  }
  #arrow-container .arrow::before,
  .tri-mobile .m-arrow::before {
    font-size: 7rem !important;
  }
}/* === Extracted from about.html (style id="final-overrides") === *//* === FINAL OVERRIDES (alignment, scaling, widths) === *//* 1) Mission background: scale to 0.8 and center */.mission-section { position: relative; overflow: hidden; }
.mission-section .mission-gif {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;    /* grows properly */
    height: 100% !important;

    object-fit: cover !important;
    object-position: left top !important;

    filter: blur(10px);
    opacity: 0.45;
    z-index: 0 !important;
    pointer-events: none !important;
}
/* 2) Mission content on top & readable */.mission-copy, .mission-copy * {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  color: #fff !important;
}/* Body text width: 100% of container */.mission-copy p {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  line-height: 1.5 !important;
}/* 3) Headline underline should match text width and be centered */.integrated-bar, .partnerships-banner { text-align: center !important; }.integrated-bar h2, .partnerships-banner h2, .mission-copy h1 {
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 12px !important;
  margin: 0 auto 10px auto !important;
}.integrated-bar h2::after, .partnerships-banner h2::after, .mission-copy h1::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  background-image: linear-gradient(90deg,#F9CB22 0%, #EF7616 50%, #F0115F 100%) !important;
}/* Hide any legacy full-width decorative bars */.integrated-bar .line, .integrated-bar .bar,
.partnerships-banner .line, .partnerships-banner .bar,
.mission-line { display: none !important; }/* === Extracted from about.html (style id="center-buttons-and-spacing") === *//* Center the two buttons on all widths */.mission-copy .btn-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}.mission-copy .btn-row a,
.mission-copy .btn-row .btn {
  display: inline-block !important;
  white-space: nowrap;
}/* Give the mission section extra bottom breathing room so next section never overlaps the background image */.mission-section {
  padding-bottom: 88px !important; /* increase/decrease if needed */
}/* Ensure the Triangular Ties section starts lower */.integrated-bar, .after-mission {
  margin-top: 56px !important;
  padding-top: 8px !important;
}/* === Extracted from about.html (style id="center-spacing-fixes") === *//* Center the Our Mission content */.mission-copy{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}.mission-copy .btn-row{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}/* Add more spacing before Triangular Ties */.integrated-bar{
  margin-top: 96px !important;
  padding-top: 16px !important;
}/* Extra breathing room below mission background */.mission-section{
  padding-bottom: 120px !important;
}/* === Extracted from about.html (style id="mission-gif-size-and-overflow-fix") === *//* Make section height auto so content is never cut off */.mission-section{
  position: relative !important;
  height: auto !important;
  min-height: unset !important;
  overflow: visible !important;
  padding-bottom: 24px !important;
  text-align: center !important;
}/* Ensure mission copy sits above and stays centered */.mission-copy{
  position: relative !important;
  z-index: 1 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 16px 16px 0 !important;
  text-align: center !important;
}/* Buttons always visible, wrap on tight widths */.mission-copy .btn-row{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 16px !important;
}.mission-copy .btn-row a,
.mission-copy .btn-outline,
.mission-copy .btn-img img{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}/* Slightly tighten the gap before the next section */.integrated-bar{
  margin-top: 48px !important;
  padding-top: 8px !important;
}/* Phone tweaks */@media (max-width: 600px){
  .mission-copy .btn-row{ flex-direction: column !important; }
  .mission-copy .btn-row a,
  .mission-copy .btn-outline{ width: auto !important; max-width: none !important; }
}/* === Extracted from about.html (style id="overlay-order-fix") === *//* Ensure stacking order: GIF (-1) < shade (0) < text (2) */.mission-section { position: relative !important; }.mission-section::after {
  z-index: 0 !important;
  pointer-events: none !important;
  /* keep your shade but it will no longer dim the text */
}.mission-gif { z-index: -1 !important; pointer-events: none !important; }.mission-copy, .mission-copy * {
  z-index: 2 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}/* === Extracted from about.html === *//* — Reset & Base — */* { margin:0; padding:0; box-sizing:border-box; }html, body { width:100%; }body { background:#000; color:#fff; font-family:'Instrument Sans',sans-serif; line-height:1.4; overflow-x:hidden; }a { color:inherit; text-decoration:none; }/* — Sticky Nav — */.logo{ width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }nav{ display:flex; gap:40px; }nav a:hover{ opacity:.7; }/* 1) allow transforms on all of these icons *//* 2) scale up on hover *//* 3) preserve your existing Donate hover filter *//* Responsive nav for mobile and tablets *//* —— Mission Section —— */:root{
      --mission-gif-offset-x:10%;
      --mission-copy-offset-x:55%;
      --mission-copy-offset-y:50%;
      --animated-gradient:linear-gradient(90deg, rgba(249,203,34,.9) 23%, rgba(239,118,22,.9) 50%, rgba(240,17,95,.9) 77%);
      --partnerships-underline-height:10px;
      --partnerships-underline-radius:1000px;
      --partnerships-underline-overhang:5rem;
      --partnerships-underline-offset:.5rem;
      --bar-left:0px; --bar-top:0px; --bar-width:200px; --bar-height:6px; --bar-radius:3px;
      --bar-gradient:linear-gradient(90deg, rgba(249,203,34,.9) 23%, rgba(239,118,22,.9) 50%, rgba(240,17,95,.9) 77%);
    }.gradient-bar{ position:absolute; left:var(--bar-left); top:var(--bar-top); width:var(--bar-width); height:var(--bar-height); background:var(--bar-gradient); border-radius:var(--bar-radius); }.mission-section{ position:relative; height:auto; overflow:visible; margin-bottom:4rem; }
    .mission-copy{ position:absolute; top:var(--mission-copy-offset-y); left:var(--mission-copy-offset-x); transform:translate(-50%,-50%); z-index:2; max-width:45%; }.mission-copy .btn-row{ display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; margin-top:1rem; }.mission-copy h1{ font-family:'Tilt Warp',sans-serif; font-size:60px; line-height:1.2; margin-bottom:1rem; }.mission-copy p{ font-size:24px; line-height:1.4; margin-bottom:1.5rem; }.btn-outline{
      position:relative; font-family:'Tilt Warp',sans-serif; font-size:30px;
      text-transform:uppercase; padding:3px; color:#fff; border-radius:8px;
      display:inline-block; background:transparent; border:2px solid transparent;
      --btn-gradient:linear-gradient(90deg,#F0115F,#EF7616);
      transition:transform .3s ease,color .3s ease;
    }.btn-outline::before{
      content:""; position:absolute; inset:-5px; border-radius:8px; padding:4px;
      background:var(--btn-gradient);
      mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite:exclude; z-index:-1; transition:filter .3s ease;
      display:inline-flex; align-items:center; justify-content:center;
    }.btn-outline.hover-grayscale:hover::before{ filter:grayscale(100%); }.btn-outline.hover-scale:hover{ transform:scale(1.05); }/* — Partnerships / Bars — */.section-title{ font-family:'Tilt Warp',sans-serif; font-size:60px; line-height:76px; text-align:center; margin:4rem 0 1rem; }.partnerships-banner h2{
      display:inline-block; font-family:'Tilt Warp',sans-serif;
      font-size:var(--partners-text-size,60px); font-weight:var(--partnerships-text-weight,100);
      color:#000; margin:0; position:relative; padding-bottom:var(--partnerships-underline-offset);
    }.partnerships-banner h2::after{
      content:''; position:absolute; left:calc(-1 * var(--partnerships-underline-overhang));
      right:calc(-1 * var(--partnerships-underline-overhang)); bottom:0;
      height:var(--partnerships-underline-height); border-radius:var(--partnerships-underline-radius);
      background:linear-gradient(90deg, rgba(249,203,34,.9) 23%, rgba(239,118,22,.9) 50%, rgba(240,17,95,.9) 77%);
    }.integrated-approach{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 1rem; z-index:1; }.integrated-approach .section-title, .integrated-approach .triangle-container{ position:relative; z-index:2; width:100%; margin:5rem 0; height:clamp(520px, 70vh, 900px); }.integrated-bar.partnerships-banner h2{ color:#fff!important; }.integrated-bar.partnerships-banner{ display:flex; justify-content:center; align-items:center; flex-direction:column; align-items:center; background:none!important; box-shadow:none!important; padding:0; }.background-effects{
      position:absolute; top:0; left:0; width:100%; height:100%;
      background:linear-gradient(to right, rgba(0,0,0,.2) 0%, #000 40%, #000 50%, #000 60%, rgba(0,0,0,.2) 100%);
      z-index:-1;
    }/* ===== Desktop triangle text (no fade on desktop) ===== */.label{ 
      position:absolute; 
      font-weight:bold; 
      font-family:'Tilt Warp',sans-serif; 
      font-size:2.75rem; 
      transform:translate(-50%,-50%); 
      white-space:nowrap; 
      text-align:center; 
      opacity:1; 
    }.description-text{ 
      background-color: black;
      position:absolute; 
      font-size:5rem; 
      color:#fff; 
      max-width:280px; 
      line-height:1.4; 
      text-align:center; 
      opacity:1;
      font-weight: bold;
      padding: 10px; 
      z-index: 4; 
    }/* Triangle container scaling for different screen sizes */.triangle-container{ position:relative; z-index:2; width:100%; margin:5rem 0; height:clamp(520px, 70vh, 750px); }/* ===== Desktop triangle text (no fade on desktop) ===== */.label{ position:absolute; font-weight:bold; font-family:'Tilt Warp',sans-serif; font-size:2.75rem; transform:translate(-50%,-50%); white-space:nowrap; text-align:center; opacity:1; }.description-text{ 
      position:absolute; 
      font-size:1.5rem; 
      color:#fff; 
      max-width:280px; /* Increased from 240px */
      line-height:1.4; /* Increased from 1.3 for better spacing */
      text-align:center; 
      opacity:1;
      font-weight: bold;
      padding: 10px; /* Add padding for breathing room */
      z-index: 4; /* Ensure text appears above other elements */
    }/* Adjust the triangle container height to accommodate text */.triangle-container{ position:relative; z-index:2; width:100%; margin:5rem 0; height:clamp(520px, 70vh, 750px); }/* Update the desktop scaler base height *//* ...in the JavaScript section, update BASE_H... */#arrow-container{
      position:absolute; top:-32px; left:50%; transform:translateX(-50%);
      display:flex; gap:20rem; pointer-events:auto; z-index:5; transition:gap .5s ease;
    }.arrow{
      display:inline-block; font-size:1.75rem; cursor:pointer;
      background:var(--animated-gradient); background-size:200% 200%;
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:gradient-move 3s linear infinite;
    }@keyframes gradient-move{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }.arrow:hover{ transform:scale(1.1); }/* — Team absolute layout (desktop) — */.role { overflow: hidden; }.role-text { word-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; }.team-container{ position:relative; width:1200px; margin:0 auto; padding-bottom:1400px; }.team-item{ position:relative; }.gradient-line{ position:absolute; height:8px; background:linear-gradient(90deg,#F9CB22 23%,#EF7616 50%,#F0115F 77%); }.portrait{ position:absolute; width:165px; height:210px; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:10px; }.name{ position:absolute; font-family:'Tilt Warp',sans-serif; font-size:40px; line-height:50px; color:#fff; }.role{ position:absolute; font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:24px; line-height:29px; color:#fff; }.role-title {
      font-family: 'Tilt Warp', sans-serif;
      font-size: 24px;
      line-height: 29px;
      color: rgba(239,118,22,.9);
      font-weight: 350;
      margin-bottom: 12px; /* Add space between title and text */
    }.role-text {
      font-family: 'Instrument Sans', sans-serif;
      font-size: 24px;
      line-height: 29px;
      color: #fff;
      font-weight: 400;
    }/* Mobile responsive adjustments */@media (max-width: 1122px) {
      .role-title {
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        margin-bottom: 8px;
      }
      
      .role-text {
        font-size: 18px;
        line-height: 22px;
        text-align: center;
      }

      /* Center and resize portraits on mobile */
      .portrait {
        width: min(140px, 35vw) !important;
        height: auto !important;
        aspect-ratio: 165/210;
        max-width: 165px;
        display: block !important;
        margin: auto !important;
        width: 50% !important;
      }

      /* Add spacing between team items */
      .team-item {
        margin-bottom: 1rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      }

      .team-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
      }
    }@media (max-width: 600px) {
      .role-title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 6px;
      }
      
      .role-text {
        font-size: 16px;
        line-height: 20px;
      }

      /* Smaller centered portraits for mobile */
      .portrait {
        width: min(120px, 30vw) !important;
        height: auto !important;
        aspect-ratio: 165/210;
        max-width: 120px;
        display: block !important;
        margin: auto !important;
        width: 50% !important;
      }

      /* Reduce spacing slightly on smaller screens */
      .team-item {
        margin-bottom: 1rem !important;
        padding-bottom: 1rem !important;
      }
    }@media (max-width: 480px) {
      /* Even smaller centered portraits for very narrow screens */
      .portrait {
        width: min(100px, 25vw) !important;
        height: auto !important;
        aspect-ratio: 165/210;
        max-width: 100px;
        display: block !important;
        margin: auto !important;
        width: 50% !important;
      }

      /* Further reduce spacing on very small screens */
      .team-item {
        margin-bottom: 2rem !important;
        padding-bottom: 1rem !important;
      }
    }/* Split background images */.bg-split {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* Full container height */
      pointer-events: none;
      z-index: 0;
    }.bg-split__half{ float:left; width:50%; height:100%; background-size:cover; background-position:center; }.bg-split__left{
      background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 45%), url('../images/spectators.png');
      background-repeat: no-repeat, no-repeat;
      background-position: left center, center;
      background-size: 200% 100%, cover;
      background-color: #000;
    }.bg-split__right{
      background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 200%), url('../images/teaching.png');
      background-repeat: no-repeat, no-repeat;
      background-position: left center, center;
      background-size: 200% 100%, cover;
      background-color: #000;
    }.triangle-container{ position:relative; z-index:2; width:100%; margin:5rem 0; height:clamp(520px, 70vh, 900px); }.triangle-logo{ position:absolute; top:50%; left:50%; transform:translate(-50%,-35%); width:180px; height:auto; z-index:3; pointer-events:none; transform-origin:center center; transition:transform .8s ease; will-change:transform; }/* ===== Responsive helpers ===== */.triangle-container{ position:relative; z-index:2; width:100%; margin:5rem 0; height:clamp(520px, 70vh, 900px); }.mission-copy h1{ font-size:clamp(34px,7vw,60px); }.mission-copy p { font-size:clamp(14px,2.6vw,18px); line-height:1.35; }@media (max-width:1122px){
      :root{
        --mission-gif-offset-x:50%;
        --mission-copy-offset-x:50%;
        --mission-copy-offset-y:50%;
      }

      .mission-section{ height:auto; padding:2rem 1rem; }
      .mission-gif{
        width:min(120vw,780px); filter:blur(4px);
        position:relative; top:0; margin:0 auto 1rem;
      }
      .mission-copy{ position:static; max-width:100%; transform:none; text-align:center; }
      .mission-copy .btn-row{ align-items:center; }

      .gradient-bar, .gradient-line{ display:none!important; }
      .triangle-logo{ display: initial !important; }

      .team-container{ width:100%; padding:0 16px 48px; }
      .team-container .portrait,
      .team-container .name,
      .team-container .role{ position:static!important; width:100%!important; }
      .team-container .name{ text-align:center; }
      .team-container .role{ max-width:720px; margin:8px auto 0; }

      .triangle-container{ position:relative; z-index:2; width:100%; margin:5rem 0; height:clamp(520px, 70vh, 900px); }
    }/* Hide split background only on phones */@media (max-width: 768px) {
  .bg-split{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
}/* === Tablet triangle layout (481px-1122px) === */.tri-mobile { display:flex; flex-direction:column; gap:16px; align-items:center; }.tri-mobile .m-topline {
        width:100%; display:flex; align-items:center; justify-content:center; gap:16px;
        font-family: 'Tilt Warp', sans-serif; font-size:26px;
      }.tri-mobile .m-arrow {
        font-size:26px; line-height:1; background:none; border:none; color:#fff; padding:8px 12px; cursor:pointer;
      }.tri-mobile .m-toplabel { text-transform:uppercase; white-space:nowrap; opacity:1; transition:opacity .24s ease; }.tri-mobile .m-toplabel.fading { opacity:0; }.tri-mobile .m-svg { width:min(70vw, 480px); height:auto; }.tri-mobile .m-descs {
        width:100%; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px;
        font-size:16px; line-height:1.4; text-align:left; max-width:600px;
        font-weight: bold; /* Make tablet descriptions bold */
      }.tri-mobile .m-descs .right { text-align:right; }.tri-mobile .m-descs .cell { opacity:1; transition:opacity .24s ease; }.tri-mobile .m-descs .cell.fading { opacity:0; }/* === Mobile triangle layout & fades (≤480px) === */.tri-mobile { display:flex; flex-direction:column; gap:12px; align-items:center; }.tri-mobile .m-topline {
        width:100%; display:flex; align-items:center; justify-content:center; gap:12px;
        font-family: 'Tilt Warp', sans-serif; font-size:22px;
      }.tri-mobile .m-arrow {
        font-size:22px; line-height:1; background:none; border:none; color:#fff; padding:6px 10px; cursor:pointer;
      }.tri-mobile .m-toplabel { text-transform:uppercase; white-space:nowrap; opacity:1; transition:opacity .24s ease; }.tri-mobile .m-toplabel.fading { opacity:0; }.tri-mobile .m-svg { width:min(92vw, 360px); height:auto; }.tri-mobile .m-descs {
        width:100%; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px;
        font-size:14px; line-height:1.35; text-align:left;
        font-weight: bold; /* Make mobile descriptions bold */
      }.tri-mobile .m-descs .right { text-align:right; }.tri-mobile .m-descs .cell { opacity:1; transition:opacity .24s ease; }.tri-mobile .m-descs .cell.fading { opacity:0; }/* Footer tighter on phones */.triangle-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -35%);
      width: 225px;
      height: auto;
      z-index: 3;
      pointer-events: none;
      transform-origin: center center;
      transition: transform 0.8s ease;
      will-change: transform;
    }/* Remove the continuous rotation keyframes *//* @keyframes rotateClockwise {
      from {
        transform: translate(-50%, -35%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -35%) rotate(360deg);
      }
    } *//* Respect reduced motion preferences */@media (prefers-reduced-motion: reduce) {
      .triangle-logo {
        transition: none;
      }
    }/* ===== Footer (desktop + all) ===== */.footer-copy { margin:0; font-size:1.1rem; font-weight:bold; }.footer-sub { margin-top:.25rem; font-size:.95rem; opacity:.9; max-width: 520px; }/* 2) On hover, cancel the scale and apply grayscale *//* Enhanced arrow styling with accessibility */.arrow, .m-arrow {
      background: none;
      border: 2px solid transparent;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
      padding: 8px 12px;
      font-size: 1.75rem;
      color: #fff;
      /* Remove the conflicting background properties */
    }/* Create the gradient text effect properly */.arrow::before, .m-arrow::before {
      content: attr(data-arrow) "<";
      background: var(--animated-gradient);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-move 3s linear infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }.arrow[data-dir="1"]::before, .m-arrow[data-dir="1"]::before {
      content: ">";
    }.arrow[data-dir="-1"]::before, .m-arrow[data-dir="-1"]::before {
      content: "<";
    }.arrow[data-dir="1"]::before,
    .m-arrow[data-dir="1"]::before,
    .arrow[data-dir="-1"]::before,
    .m-arrow[data-dir="-1"]::before {
      font-weight: 1000; /* heavy bold */
    }/* Focus states for accessibility */.arrow:focus,
    .m-arrow:focus {
      outline: 2px solid #F0115F;
      outline-offset: 3px;
      border-color: rgba(240, 17, 95, 0.5);
    }.arrow:focus-visible,
    .m-arrow:focus-visible {
      border-color: #EF7616;
      box-shadow: 0 0 0 3px rgba(239, 118, 22, 0.3);
    }/* Enhanced hover states */.arrow:hover,
    .m-arrow:hover {
      transform: scale(1.15) translateY(-2px);
      background-color: rgba(240, 17, 95, 0.1);
      border-color: rgba(240, 17, 95, 0.3);
      box-shadow: 0 4px 12px rgba(240, 17, 95, 0.3);
    }.arrow:active,
    .m-arrow:active {
      transform: scale(1.05) translateY(0);
    }/* Rotate arrow on hover with reduced motion respect */.arrow:hover::before,
    .m-arrow:hover::before {
      animation-play-state: paused;
    }@media (prefers-reduced-motion: reduce) {
      .arrow::before, .m-arrow::before {
        animation: none;
        background: #F0115F;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: initial;
        color: #F0115F;
      }
      
      .arrow:hover,
      .m-arrow:hover {
        transform: none;
        box-shadow: none;
        background-color: #EF7616;
      }
    }/* Desktop arrows enhancement */#arrow-container .arrow {
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 1.75rem;
      line-height: 1;
      color: transparent; /* Hide the original text */
    }/* Mobile arrows enhancement */.tri-mobile .m-arrow {
      min-width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin: 0;
      color: transparent; /* Hide the original text */
    }/* Improved mobile responsive sizes */@media (max-width: 480px) {
      .tri-mobile .m-arrow {
        font-size: 20px;
        min-width: 2rem;
        height: 2rem;
        padding: 4px 8px;
      }
    }/* Enhanced gradient animation */@keyframes gradient-move {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }/* Keep the triangle stage visible at all sizes */.triangle-stage{display:block!important;}/* Disabled state for arrows */.arrow:disabled,
    .m-arrow:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none !important;
      animation-play-state: paused;
    }/* === Improved readability for triangle copy over images === */.description-text {
  color: #fff;
  /* strong black halo around paragraphs */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.95),
    0 -2px 6px rgba(0,0,0,0.95),
    2px 0 6px rgba(0,0,0,0.95),
    -2px 0 6px rgba(0,0,0,0.95);
}/* Outline the top label slightly for contrast too */.label .label-text {
  color: #fff;
  -webkit-text-stroke: 1px rgba(0,0,0,0.65);
  text-shadow:
    0 1px 3px rgba(0,0,0,0.8),
    0 -1px 3px rgba(0,0,0,0.8),
    1px 0 3px rgba(0,0,0,0.8),
    -1px 0 3px rgba(0,0,0,0.8);
}/* === Extracted from about.html === *//* === Override arrow styles to remove circular background === */#arrow-container .arrow,
.tri-mobile .m-arrow {
  border-radius: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important; /* hide text base */
}#arrow-container .arrow:hover,
#arrow-container .arrow:active,
.tri-mobile .m-arrow:hover,
.tri-mobile .m-arrow:active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}#arrow-container .arrow:focus,
#arrow-container .arrow:focus-visible,
.tri-mobile .m-arrow:focus,
.tri-mobile .m-arrow:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}@media (prefers-reduced-motion: reduce) {
  #arrow-container .arrow:hover,
  .tri-mobile .m-arrow:hover {
    background-color: transparent !important;
  }
}/* === Extracted from about.html (style id="no-clip-guard") === */.triangle-container { overflow: visible !important; }.label-text br.br-sm { display: none; }@media (max-width: 1122px) {
  .label-text br.br-sm { display: inline; }
}


/* ===== Roles Demo (replaces triangle) ===== */
.roles-demo{
  --rd-accent1:#ffb703;
  --rd-accent2:#ff2d95;
  --rd-panel:#121212;
  --rd-muted:#a9b0bb;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 5rem 0;
}
.rd-labels{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom: 12px;
}
.rd-chip{
  padding:10px 14px; border-radius:999px; background:#1b1b1b;
  border:1px solid #2a2a2a; color:#fff; font-weight:700; letter-spacing:.3px;
  cursor:pointer; transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.rd-chip:hover{ transform:translateY(-1px); }
.rd-chip.active{ background:linear-gradient(135deg,var(--rd-accent1),var(--rd-accent2)); border-color:transparent; }

.rd-stage{ display:grid; grid-template-columns: 1fr 1.2fr; gap:28px; align-items:center; }
@media (max-width:900px){ .rd-stage{ grid-template-columns: 1fr; } }

.rd-gear-pane{ position:relative; min-height:320px; display:grid; place-items:center; }
.rd-gear{ width:min(90%, 420px); aspect-ratio:1/1; filter: drop-shadow(0 10px 30px rgba(255,45,149,.25)); transition:transform .6s cubic-bezier(.2,.7,.2,1); }

.rd-arrows{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; padding:0 6px; }
.rd-arrow{
  pointer-events:auto; width:44px; height:44px; border-radius:50%;
  background:#1b1b1b; border:1px solid #2a2a2a; color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  font-size:22px; line-height:1;
}
.rd-arrow:hover{ transform:scale(1.06) }
.rd-arrow:active{ transform:scale(.98) }

.rd-text .rd-title{ font:900 clamp(28px,4vw,40px)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0 0 6px; }
.rd-sub{ margin:0 0 18px; color:var(--rd-muted); font-size:14px; }
.rd-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .rd-cards{ grid-template-columns:1fr; } }

.rd-card{
  background:var(--rd-panel); border:1px solid #222; border-radius:16px; padding:16px;
  min-height:120px; display:flex; flex-direction:column; gap:8px; color:#e8e8e8;
}
.rd-card h4{
  margin:0; font:800 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; letter-spacing:.4px; text-transform:uppercase;
  background:linear-gradient(135deg,var(--rd-accent1),var(--rd-accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rd-card p{ margin:0; }

/* hide old triangle if still present */
.triangle-container{ display:none !important; }


/* ===== v2 adjustments per feedback ===== */

/* 1) mobile: shrink gear to ~90% of previously rendered size (from ~90% -> ~81%) */
@media (max-width: 700px){
  .rd-gear{ width:81%; }            /* ~90% of the previous 90% width */
  .rd-gear-pane{ min-height:300px; }
}

/* 2) arrows: lighter/visible with gradient hover */
.rd-arrow{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  color:#fff;
}
.rd-arrow:hover{
  background: linear-gradient(135deg, var(--rd-accent1), var(--rd-accent2));
  border-color: transparent;
  color:#000;
}

/* 3) background section height: ensure the host can grow and reduce bottom gap */
.roles-demo{ margin-block: 4rem 2rem; }          /* smaller bottom margin to reduce gap */
@media (max-width: 700px){
  .roles-demo{ margin-block: 3rem 1.25rem; }
}

/* 5) chips: active black text; inactive white */
.rd-chip{ color:#fff; }
.rd-chip.active{ color:#0c0c0c; }


/* ===== v3 refinements ===== */

/* Arrows: solid black by default, white icon; gradient on hover (same as before) */
.rd-arrow{
  background:#000000 !important;
  border-color: rgba(255,255,255,0.55) !important;
  color:#ffffff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.rd-arrow:hover{
  background: linear-gradient(135deg, var(--rd-accent1), var(--rd-accent2)) !important;
  border-color: transparent !important;
  color:#000000 !important;
}

/* Make the gear smaller so arrows don't overlap */
.rd-gear{ width:min(76%, 400px) !important; }
@media (max-width: 1100px){
  .rd-gear{ width:72% !important; }
}
@media (max-width: 700px){
  .rd-gear{ width:70% !important; }
  .rd-gear-pane{ min-height: 290px; }
}

/* Tiny bottom extension/gap control */
.roles-demo{ margin-block-end: 1.5rem; }


/* ===== v4: bottom-only background extension + tighter gap ===== */
.roles-demo{ margin-block-end: 0.25rem !important; }
.integrated-approach{ margin-bottom: 0 !important; }

.stats-section {
  text-align: center;
  margin: 4rem 0;
  position: relative;
}

.stats-gradient {
  height: 6px; /* line thickness */
  background: linear-gradient(
    90deg,
    rgba(249,203,34,0.9) 23%,
    rgba(239,118,22,0.9) 50%,
    rgba(240,17,95,0.9) 77%
  );
  border-radius: 1000px;
}
.site-footer .logo {
  background: url('../images/logo.png') center/cover no-repeat;
}
.site-footer .footer-copy {
  font-size: 24px;
  font-weight: 1000 !important;
  margin: 0 0 8px 0;
}
.site-footer .footer-sub {
  font-size: 18x;
  font-weight: 1200 !important;
  line-height: 16px;
  opacity: 0.8;
  margin-right: 2px;
}

/* === Extracted from vex.html (style id="final-overrides") === *//* ===== HERO: stack headline, paragraph, and button ===== */.page-container.hero-section {
  position: relative;
  min-height: var(--hero-bg-height);
  height: auto;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}.hero-headline {
  position: relative !important;
  top: 20px !important; left: auto !important;
  transform: none !important;
  margin-top: 1rem !important;
  text-align: center !important;
  width: 100% !important;
  z-index: 2 !important;
}.copy-text {
  position: relative !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  width: 80% !important;
  max-width: 938px !important;
  font-size: 24px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  z-index: 1 !important;
}.btn-img {
  position: relative !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  z-index: 1 !important;
}@media (max-width: 900px) {
  .page-container.hero-section { gap: 1.25rem !important; padding-bottom: 2rem !important; }
  .hero-headline { font-size: clamp(28px, 8vw, 48px) !important; }
  .copy-text { margin-top: 0.25rem !important; width: 90vw !important; max-width: 90vw !important; font-size: 16px !important; line-height: 1.4 !important; }
}/* ===== LOCATION SECTION: prevent image from squeezing text ===== */.location-section { flex-wrap: wrap !important; }.location-image { flex: 1 1 520px !important; }.location-copy  { flex: 1 1 520px !important; max-width: 900px !important; }.location-copy .copy { width: 100% !important; margin: 1rem auto !important; }/* ===== LOCATION HEADLINE definitive sizing (ID outranks other rules) ===== */#loc-headline {
  font-size: 48px !important;   /* desktop */
  line-height: 1.15 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  margin: 0 auto 1rem !important;
  max-width: min(90vw, 900px) !important;
  display: block !important;
}@media (max-width: 900px) { #loc-headline { font-size: 36px !important; } }@media (max-width: 600px) { #loc-headline { font-size: 28px !important; } }/* === Extracted from vex.html (style id="nav-core") === */.logo{ width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }/* --- Mobile overflow fixes --- */html { overflow-x: clip; }body { overflow-x: hidden; }img, svg, video { max-width: 100%; height: auto; }.support-why h2,
.support-how h2,
.support-tiers-title,
.carousel-title {
  overflow: clip;
}@media (max-width: 600px) {
  :root { --support-underline-overhang: 0; }
}.sponsor-marquee { overflow-x: hidden; }/* === Extracted from vex.html (style id="nav-left-hotfix") === *//* === NAV alignment + size hotfix (match index fix) === *//* === Extracted from vex.html (style id="sync-nav-footer") === *//* ===== Sync nav & footer with site-wide styles (canonical) ===== *//* Header logo stays colored *//* Hide-on-scroll uses translate *//* Footer parity (gradient background, grid layout, white logo behavior) *//* Responsive spacing consistent with other pages *//* === Extracted from vex.html (style id="nav-size-enforcer") === *//* === Extracted from vex.html === */:root {
       --compare-bar-offset-x:   0px;    /* move the bar left/right */
  --compare-bar-offset-y:   0px;    /* move the bar up/down, if you like */
  --compare-bar-height:    360px;   /* length of the vertical bar */
  --compare-bar-width:      20px;   /* thickness of the bar */
      /* Hero background controls */
      --hero-bg-left:     10px;
      --hero-bg-top:      71px;
      --hero-bg-width:    100%;
      --hero-bg-max-width:2000px;
      --hero-bg-height:   690px;
  --bar-left:   0;
  --bar-top:    0;
  --bar-width:  100vw;
  --bar-height: 6px;
  --bar-radius: 3px;
  --bar-gradient:
    linear-gradient(
      90deg,
      rgba(249,203,34,0.9) 23%,
      rgba(239,118,22,0.9) 50%,
      rgba(240,17,95,0.9) 77%
    );
      /* Text & design tokens */
      --hero-text-size:               72px;
      --partnerships-underline-height:10px;
      --partnerships-underline-radius:1000px;
      --partnerships-underline-offset:0.5rem;
      --partnerships-underline-overhang:5rem;
      --btn-gradient:linear-gradient(90deg,#F0115F,#EF7616);
      

      /* Headline & Copy positioning */
        --embed-offset-y: 8rem;  
  --headline-top: 75px;   /* move “WHAT IS VEX…” up/down */
  --copy-top:     220px;   /* distance from top for the paragraph */
  /* controls for both embeds */
  --embed-width:  690px;   /* adjust width here */
  --embed-height: 445px;   /* adjust height here */
  --embed-gap:    6rem;    /* spacing between the two boxes */
  

  /* path to your border ../images */
  --border-worlds:  url('../images/worldsborder.png');
  --border-season:  url('../images/seasonborder.png');

 /* entire section offset */
  --loc-sec-offset-x: 0px;
  --loc-sec-offset-y: 0px;
  /* image sizing & offset */
  --loc-img-width:       800px;
  --loc-img-offset-x:    0px;
  --loc-img-offset-y:    0px;
  /* text block offset */
  --loc-text-offset-x:   0px;
  --loc-text-offset-y:   0px;
  /* paragraph wrap */
  --loc-desc-wrap:       600px;
 --compare-para-gap: 1.5rem;
  
   /* Comparison-bar sizing & position */
  --compare-bar-width:     20px;                         /* thickness */
  --compare-bar-height:    360px;                       /* length */
  --compare-bar-offset-x:  0px;                        /* nudge left/right */
  --compare-bar-offset-y:  0px;                        /* nudge up/down */
  --compare-bar-gradient:  
    linear-gradient(
      180deg,
      #F9CB22 23%,
      #EF7616 50%,
      #F0115F 77%
    );                                                   /* same gradient */
    }/* Reset & Base */* { margin:0; padding:0; box-sizing:border-box; }html, body { width:100%; overflow-x:hidden; background:#000; color:#fff; }body { font-family:'Instrument Sans',sans-serif; line-height:1.4; }a { color:inherit; text-decoration:none; }/* — Sticky Nav — */@media (max-width: 600px) {
  .hero-headline {
    font-size: 36px !important;
  }
}/* Responsive nav for mobile and tablets */@media (max-width: 900px) {
  
  .logo {
    width: 60px;
    height: 54px;
    margin-right: 0;
  }
  
  
  /* Headline and copy: stack and shrink */
  .hero-headline {
    position:absolute;
    top:    5px;
    left:   50%;
    transform:translateX(-50%);
    font-family:'Tilt Warp',sans-serif;
    font-size: 10vw;
    color:#fff;
    padding-bottom:var(--partnerships-underline-offset);
    white-space: normal;
    max-width: 90vw;
  }
  .hero-headline::after {
    left: -1rem;
    right: -1rem;
    height: 5px;
  }
  .copy-text {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px !important;
    width: 90vw;
    max-width: 90vw;
    padding: 0 2vw;
    text-align: center;
    line-height: 1.4;
  }
  .location-headline {
  position: relative;
  display: inline-block;
  white-space: normal;
  padding-bottom: var(--partnerships-underline-offset);
  font-family:'Tilt Warp',sans-serif;
  font-size: 200px;        /* ← change this */
  font-weight: 400;
  color:#fff;
  max-width: 100%;
  word-wrap: break-word;
}
@media (max-width: 900px) {
  .location-copy .location-headline {
    font-size: 3.5rem;   /* instead of 2.5rem */
  }
}
  .location-headline::after {
    left: -1rem;
    right: -1rem;
    height: 5px;
  }
  .btn-img {
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
  }
  /* Embeds: stack vertically */
  .embed-container {
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0 2rem 0;
    align-items: center;
  }
  .embed-box {
    width: 95vw !important;
    max-width: 100vw;
    min-width: 0;
    /* Responsive 16:9 aspect ratio */
    aspect-ratio: 16 / 9;
    height: auto !important;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .embed-box iframe {
    position: absolute;
    top: 12% !important;
    left: 1% !important;
    width: 97% !important;
    height: 85% !important;
    border: none;
  }

  /* Location section: stack image and text */
  .location-section {
    flex-direction: column;
    gap: 2rem;
    left: 0;
    padding: 0 1vw;
    max-width: 100vw;
    margin: 4rem 0 6rem;
  }
  .location-image img {
    width: 100vw;
    max-width: 100vw;
  }
  /* put this at the very end of your <style> */
.location-copy {
  text-align: center;             /* center both headline and paragraph */
}

.location-copy .location-headline {
  font-size: 64px !important;     /* your new desktop size */
  margin-bottom: 1.5rem;          /* gap below headline, adjust as you like */
  display: inline-block;          /* shrink to fit text for centering underline */
}

.location-copy .copy {
  text-align: center;             /* ensure paragraph is centered */
  margin-top: 1.5rem;             /* extra gap if you prefer */
}
 
  /* VEX compare: stack columns */
  .vex-compare {
    margin: 8rem 8rem;
    padding-top: 14rem;
    align-content: center;
  }
  .compare-headline {
    font-size: 2rem;
    line-height: 2.2rem;
    white-space: normal;
  }
  .compare-headline .vs {
    font-size: 1.2rem;
    margin: 0 1rem;
  }
 /* 1) Spread columns to the edges */
.compare-body {
  justify-content: space-between;
  /* remove any hard padding if you want them truly flush */
  padding-left: 0;
  padding-right: 0;
}

/* 2) Column alignment */
.compare-body .column {
  display: flex;
  flex-direction: column;
}
.compare-body .column.left {
  align-items: flex-start;     /* children start at left */
  text-align: left;
}
.compare-body .column.right {
  align-items: flex-end;       /* children start at right */
  text-align: right;
}
/* ensure each <p> actually right-aligns */
.compare-body .column.right p {
  text-align: right;
  align-self: flex-end;
}

/* 3) Fully round the comparison bar */
.vex-bar-vertical {
  border-radius: 99px;         /* pill shape */
}
  /* Carousel: shrink and stack */
  .image-carousel {
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100vw;
    padding: 0 1vw;
    margin: 6rem auto 2rem;
  }
  .carousel-track-container {
    width: 100vw;
    max-width: 100vw;
  }
  
}/* — Gradient border for carousel ../images — */.carousel-slide {
  position: relative;
}.carousel-slide img {
  display: block;
  width: 100%;
  /* transparent border as the “canvas” for the gradient */
  border: 6px solid transparent;
  border-radius: 12px;
  /* slice = 1 tells CSS to stretch the gradient over the border width */
  border-image: linear-gradient(
    90deg,
    rgba(249,203,34,1) 0%,
    rgba(239,118,22,1) 50%,
    rgba(240,17,95,1) 100%
  ) 1;
  box-sizing: border-box;
}/* — Gradient border for captions — */.carousel-caption {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  /* same transparent border setup */
  border: 4px solid transparent;
  border-radius: 8px;
  border-image: linear-gradient(
    90deg,
    rgba(249,203,34,1) 0%,
    rgba(239,118,22,1) 50%,
    rgba(240,17,95,1) 100%
  ) 1;
  background-color: #000; /* optional: give the caption a solid BG */
}@media (max-width: 600px) {
  
  .logo {
    width: 50px;
    height: 45px;
  }
  
  nav a {
    font-size: 18px;
  }
  
}/* — Sticky Nav — *//* Make room for a 100px-tall fixed nav *//* Single, un-conflicted nav rule *//* Hides by moving up exactly its own height */.logo { width:81px; height:73px; background:url('../images/logo.png') center/cover no-repeat; margin-right:20px; }nav { display:flex; gap:40px; }nav a:hover { opacity:.7; }/* Tablet responsiveness */@media (max-width: 900px) and (min-width: 701px) {
  .location-copy .location-headline {
    font-size: 3rem;
  }
  .location-copy .copy {
    font-size: 1.2rem;
  }
}/* Main Content */.page-container { 
      position: relative; 
      height: 500px; /* Set a height so content below knows where to start */
    }/* HERO BACKDROP IMAGE */.hero-bg {
      position:absolute;
      left:   var(--hero-bg-left);
      top:    var(--hero-bg-top);
      width:  var(--hero-bg-width);
      max-width:var(--hero-bg-max-width);
      height: var(--hero-bg-height);
      background:
        url('../images/whatisvex.png') center/cover no-repeat;
    }.hero-overlay {
      position:absolute;
      left:   var(--hero-bg-left);
      top:    var(--hero-bg-top);
      width:  var(--hero-bg-width);
      max-width:var(--hero-bg-max-width);
      height: var(--hero-bg-height);
      background:
        linear-gradient(360deg,
          rgba(0,0,0,0)   0%,
          rgba(0,0,0,0.8)50%,
          #000           100%
        );
    }/* Headline + underline */.headline {
  position:absolute;
  top:    var(--headline-top);
  left:   50%;
  transform:translateX(-50%);
  font-family:'Tilt Warp',sans-serif;
  font-size:var(--hero-text-size);
  font-weight:100;
  color:#fff;
  padding-bottom:var(--partnerships-underline-offset);
}/* Hero headline + underline */.hero-headline {
      position:absolute;
      top:    var(--headline-top);
      left:   50%;
      transform:translateX(-50%);
      font-family:'Tilt Warp',sans-serif;
      font-size: 48px;
      text-align: center;
      color:#fff;
      padding-bottom:var(--partnerships-underline-offset);
    }/* Location section headline + underline */.location-headline {
      position: relative;
      display: inline-block;
      white-space: normal;
      padding-bottom: var(--partnerships-underline-offset);
      font-family:'Tilt Warp',sans-serif;
      font-size: 48px;
      font-weight: 400;
      color:#fff;
      max-width: 100%;
      word-wrap: break-word;
    }/* VEX comparison headline */.compare-headline {
      font-family: 'Tilt Warp', sans-serif;
      font-size: 2rem;
      font-weight: 400;
      line-height: 2.2rem;
      text-align: center;
      white-space: nowrap;
      margin-bottom: 1.5rem;
      color:#fff;
    }.headline::after {
      content:''; position:absolute;
      left:calc(-1 * var(--partnerships-underline-overhang));
      right:calc(-1 * var(--partnerships-underline-overhang));
      bottom:0; height:var(--partnerships-underline-height);
      background:linear-gradient(90deg,
        rgba(249,203,34,0.9) 23%,
        rgba(239,118,22,0.9) 50%,
        rgba(240,17,95,0.9) 77%
      );
      border-radius:var(--partnerships-underline-radius);
    }.hero-headline::after {
      content:''; position:absolute;
      left:calc(-1 * var(--partnerships-underline-overhang));
      right:calc(-1 * var(--partnerships-underline-overhang));
      bottom:0; height:var(--partnerships-underline-height);
      background:linear-gradient(90deg,
        rgba(249,203,34,0.9) 23%,
        rgba(239,118,22,0.9) 50%,
        rgba(240,17,95,0.9) 77%
      );
      border-radius:var(--partnerships-underline-radius);
    }.location-headline::after {
      content: "";
      position: absolute;
      left:    calc(-1 * var(--partnerships-underline-overhang));
      right:   calc(-1 * var(--partnerships-underline-overhang));
      bottom:  0;
      height:  var(--partnerships-underline-height);
      background: var(--bar-gradient);
      border-radius: var(--partnerships-underline-radius);
    }/* Body copy */.copy {
  position:absolute;
  top:    var(--copy-top);
  left:   50%;
  transform:translateX(-50%);
  width:80%; max-width:938px;
  font-size:24px;
  line-height:1.4;
  text-align:center;
}/* Copy text - same styling as copy */.copy-text {
  position:absolute;
  top:    var(--copy-top);
  left:   50%;
  transform:translateX(-50%);
  width:80%; max-width:938px;
  font-size: 24px;
  line-height:1.4;
  text-align:center;
}/* LEARN MORE image button */.btn-img {
      position:absolute; top:440px; left:50%;
      transform:translateX(-50%);
    }.btn-img img {
      height:48px; transition:transform .3s ease;
    }.btn-img:hover img {
      transform:scale(1.05);
    }.gradient-bar {
  position: absolute;
  left:       var(--bar-left);
  top:        var(--bar-top);
  width:      var(--bar-width);
  height:     var(--bar-height);
  background: var(--bar-gradient);
  border-radius: var(--bar-radius);
}.embed-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--embed-gap);
  margin: 20rem auto 8rem;
  flex-wrap: wrap;
  /* Increased bottom margin for proper spacing */
}.embed-box {
  position: relative;
  width: var(--embed-width);
  height: var(--embed-height);
  background-color: #000;        /* fallback behind iframe */
  padding-top: 48px; /* Adjust this value to match your border/title height */
  box-sizing: border-box;
  margin: 0 auto;
  flex-shrink: 0;
}.embed-box::before {
  content: "";
  position: absolute;
  inset: 0;                      /* stretch to cover entire box */
  background-repeat: no-repeat;
  background-size: 100% 100%;    /* make the PNG fill the box */
  pointer-events: none;          /* clicks pass through to iframe */
  z-index: 2;
}/* assign each box its own border image */.embed-box.worlds::before {
  background-image: var(--border-worlds);
}.embed-box.season::before {
  background-image: var(--border-season);
}/* inset by 10px on left and right */.embed-box iframe {
  position: absolute;
  top: 68px;
  left: 28px;
  right: 28px;
  bottom: 28px;
  border: none;
  z-index: 1;
  width: calc(100% - 56px);
  height: calc(100% - 96px);
}/* Footer */.logo-link:hover .logo {
      transform:scale(1.05);
    }.footer-copy { font-size:1.5rem; font-weight:bold; margin:0; }.footer-sub {
      margin-top:.5rem; font-size:1rem; opacity:.9; max-width:400px;
    }/* Container & positioning */.location-section {
  position: relative;
  left: var(--loc-sec-offset-x);
  top:  var(--loc-sec-offset-y);
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  margin: 4rem auto 8rem;
  padding: 0 1rem;
  max-width: var(--hero-bg-max-width);
  justify-content: center;
}/* image side */.location-image img {
  width: var(--loc-img-width);
  height: auto;
  position: relative;
  left: var(--loc-img-offset-x);
  top:  var(--loc-img-offset-y);
}/* text side */.location-copy {
  position: relative;
  left: var(--loc-text-offset-x);
  top:  var(--loc-text-offset-y);
  max-width: var(--loc-desc-wrap);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}/* headline underline */.location-copy .headline {
  position: relative;         /* create a positioning context */
  display: inline-block;      /* so ::after width matches text */
  white-space: normal;        /* allow wrapping */
  padding-bottom: var(--partnerships-underline-offset);
  font-size: 48px;           /* smaller headline size */
  font-weight: 400;          /* add some weight */
  max-width: 100%;           /* don't exceed container width */
  word-wrap: break-word;     /* break long words if needed */
}.location-copy .headline::after {
  content: "";
  position: absolute;
  left:    calc(-1 * var(--partnerships-underline-overhang));
  right:   calc(-1 * var(--partnerships-underline-overhang));
  bottom:  0;
  height:  var(--partnerships-underline-height);
  background: var(--bar-gradient);            /* same gradient */
  border-radius: var(--partnerships-underline-radius);
}/* paragraph */.location-copy .copy {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  max-width: var(--loc-desc-wrap);
  text-align: left;
}.image-carousel {
  position: relative;
  margin: 8rem auto 4rem;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 1rem;
}.carousel-track-container {
  overflow: hidden;
  flex: 1 1 auto;
}.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  list-style: none;
  padding: 0;
  margin: 0;
}.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  text-align: center;
}.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}.carousel-caption {
  margin: 0.5rem 0 0;
  font-size: 1.1rem;
}/* Remove any previous ::before border-triangle setup */.carousel-arrow::before { border: none; }/* Base arrow button */.carousel-arrow {
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}/* Shared triangle styling */.carousel-arrow::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* moving 3-color gradient */
  background: linear-gradient(
    90deg,
    rgba(249,203,34,1)   0%,
    rgba(239,118,22,1)   50%,
    rgba(240,17,95,1)   100%
  );
  background-size: 200% 200%;
  animation: gradient-move 3s linear infinite;
  /* clip to a triangle */
  clip-path: polygon(
    /* default: point right */
    0% 0%,    /* top-left */
    0% 100%,  /* bottom-left */
    100% 50%  /* middle-right */
  );
  will-change: background-position;
}/* flip for “left” arrow */.carousel-arrow.left::after {
  /* mirror horizontally */
  clip-path: polygon(
    100% 0%,   /* top-right */
    100% 100%, /* bottom-right */
    0%   50%   /* middle-left */
  );
}/* hover scaling */.carousel-arrow:hover {
  transform: scale(1.1);
}/* gradient animation keyframes */@keyframes gradient-move {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}/* put this at the very end of your <style> */.location-copy {
  text-align: center;             /* center both headline and paragraph */
}.location-copy .copy {
  /* center and control wrap width */
  max-width: 600px;       /* or any px/rem value you prefer */
  width: 900%;             /* scales on smaller screens */
  margin: -6.5rem auto 0; /* negative top-margin retained, horizontal auto centers */
  
  /* text styling */
  text-align: center;
  font-size: 24px !important;
  line-height: 1.6;       /* improves readability */
  
  /* ensure long words break rather than overflow */
  word-wrap: break-word;
  hyphens: auto;
}/* Container */.vex-compare {
  margin: 12rem auto 3rem;
  padding-top: -10px;
  max-width: 700px;
  color: #fff;
}/* Headline */.compare-headline {
  font-family: 'Tilt Warp', sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.2rem;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 1.5rem;
  color:#fff;
}.compare-headline .vs {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.2rem;
  margin: 0 1rem;
  vertical-align: middle;
}/* Body flex row *//* Center the bar & columns under the header */.compare-body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin: 0 auto;
  max-width: 900px;
  padding-left: 24px;
  padding-right: 24px;
}.compare-body .column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}.compare-body .column.left p {
  text-align: left;
  align-self: flex-start;
  font-size: 18px;
}.compare-body .column.right p {
  text-align: left;
  align-self: flex-start;
  font-size: 18px;
}.vex-bar-vertical {
  width: var(--compare-bar-width, 20px);
  min-width: 10px;
  height: var(--compare-bar-height, 360px);
  background: var(--compare-bar-gradient);
}.vex-compare .compare-body .vex-bar-vertical {
  /* dimension */
  width:  var(--compare-bar-width)   !important;
  height: var(--compare-bar-height)  !important;

  /* pill shape + gradient */
  background: var(--compare-bar-gradient) !important;
  border-radius: 999px !important;

  /* reposition */
  /* margin-left will nudge it right (use negative to go left) */
  margin-left: var(--compare-bar-offset-x) !important;
  /* margin-top will nudge it down (use negative to go up) */
  margin-top:  var(--compare-bar-offset-y) !important;
}/* Past Seasons button */.past-seasons-container {
  text-align: center;
  margin: 2rem 0;          /* space above/below */
}.past-seasons-btn {
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  display: inline-block;
}.past-seasons-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}/* 2) On hover, cancel the scale and apply grayscale */.compare-chart {
  max-width: 1000px;
  margin: 6rem auto 4rem;
  padding: 0 1rem;
  color: #fff;
}.compare-chart__title {
  text-align: center;
  font-family: 'Tilt Warp',sans-serif;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  position: relative;
}.compare-chart__title::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -0.5rem;
  width: 6rem; height: 6px;
  background: var(--bar-gradient);
  border-radius: 3px;
}.compare-chart__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}.compare-chart__cell {
  padding: 1.25rem;
  text-align: center;
  font-size: 1rem;
  background: #000000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}.compare-chart__cell:nth-child(3n) {
  border-right: none;
}/* Header styling */.compare-chart__cell--header {
  background: var(--bar-gradient);
  color: #000000;
  font-weight: bold;
  font-size: 1.1rem;
}/* Remove bottom border on last row */.compare-chart__grid > .compare-chart__cell:nth-last-child(-n+3) {
  border-bottom: none;
}/* Zebra-stripe every other row to aid readability */.compare-chart__grid > .compare-chart__cell:nth-child(n+4):nth-child(odd) {
  background: #000000;
}/* Responsive: switch to single-col on narrow screens */@media (max-width: 600px) {
  .compare-chart__grid {
    grid-template-columns: 1fr;
  }
  .compare-chart__cell--header {
    text-align: left;
  }
  .compare-chart__cell {
    border-right: none !important;
    text-align: left;
  }
}/* Make headers white, Tilt Warp, with a gradient underline */.compare-chart__cell--header {
  background: none;                      /* drop the gradient box */
  color: #fff;                           /* white text */
  font-family: 'Tilt Warp', sans-serif; /* match your section titles */
  font-size: 1.1rem;
  position: relative;
  padding-bottom: 1.5rem;               /* give room for the underline */
}/* Underline with your gradient bar */.compare-chart__cell--header::after {
  content: '';
  position: absolute;
  left: 1rem;       /* inset from the sides */
  right: 1rem;
  bottom: 0.5rem;   /* just below text */
  height: 6px;      /* thickness of underline */
  background: var(--bar-gradient);
  border-radius: 3px;
}/* Remove any leftover borders so the underline stands out */.compare-chart__cell--header {
  border-bottom: none;
}/* Increase body cell text */.compare-chart__cell {
  font-size: 1.5rem;   /* ~20px */
}/* Increase header text */.compare-chart__cell--header {
  font-size: 2rem;    /* ~24px */
}/* 2) On hover, apply grayscale + slight dim *//* === Do NOT place paragraph over the map (≤1500px) === */@media (max-width: 1500px) {
  .location-section { 
    display: block !important;
    margin-bottom: 6rem !important; /* breathing room before table */
  }
  .location-image { 
    display: block !important; 
    position: static !important; 
    margin: 0 auto 2rem auto !important; 
    text-align: center;
  }
  .location-image img { 
    display: inline-block !important;
    width: min(900px, 92vw) !important; 
    height: auto !important; 
  }
  .location-copy { 
    display: block !important; 
    position: static !important; 
    max-width: 800px !important; 
    margin: 0 auto !important; 
    padding: 0 20px !important;
  }
  .location-copy .location-headline,
  .location-copy .copy { 
    position: static !important; 
    max-width: 800px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
  }
  .location-copy .copy { 
    margin-top: 1rem;
    text-align: left;
    margin-left: auto !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}/* ===== Fix: Center the Close‑Knit paragraph and keep it within screen ===== */@media (min-width: 0px) {
  /* Override the generic .copy absolute rules ONLY inside the location section */
  .location-copy .copy {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    /* container sizing */
    max-width: 800px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;

    /* text layout */
    text-align: center !important;      /* center text as requested */
    font-size: clamp(18px, 1.8vw, 24px) !important;
    line-height: 1.55 !important;

    /* robust wrapping */
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}/* Extra breathing room below the Close‑Knit paragraph */.location-copy .copy {
  margin-bottom: clamp(24px, 3.5vw, 56px) !important;
}/* ===== Keep comparison table in 3-column format on all widths ===== */@media (max-width: 900px) {
  .compare-chart__grid {
    display: grid !important;
    grid-template-columns: 0.9fr 1fr 1fr !important; /* slightly narrower Features column */
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
  }
  /* Ensure headers + features column stay visible (undo any old mobile rules) */
  .compare-chart__cell--header { display: block !important; text-align: center; }
  .compare-chart__cell:nth-child(n+4):nth-child(3n+1) { display: block !important; }
  /* Remove any injected labels/lines that were used on earlier mobile treatments */
  .compare-chart__cell:not(.compare-chart__cell--header)::before,
  .compare-chart__cell:not(.compare-chart__cell--header)::after { content: none !important; display: none !important; }

  /* Tighter, readable sizing on phones while preserving rows */
  .compare-chart__cell { 
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    padding: 0.5rem 0.35rem !important;
    border: none !important;
  }
  .compare-chart__cell--header {
    font-size: 1.05rem !important;
    padding: 0.6rem 0.35rem 0.8rem !important;
  }
}/* === DESKTOP/LAPTOP underline fixes === */@media (min-width: 601px) {
  /* Make headline boxes shrink to their text so ::after matches the text width */
  .hero-headline,
  .location-headline {
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;       /* keep centered */
  }

  /* Remove the wide overhang on big screens */
  .hero-headline::after,
  .location-headline::after {
    left: 0 !important;
    right: 0 !important;
  }

  /* Bring the Close-Knit underline up closer to the text */
  #loc-headline {                     /* “A CLOSE-KNIT COMMUNITY” */
    padding-bottom: 0.2rem !important;  /* was ~0.5rem */
  }
}@media (min-width: 601px) {
  #loc-headline {
    display: inline-block !important;      /* shrink to text width */
    padding-bottom: 0.35rem !important;    /* pull underline closer */
    margin-bottom: 0.75rem !important;     /* keep some gap below */
    /* kill the wide overhang only for this headline */
    --partnerships-underline-overhang: 0rem;
  }
  #loc-headline::after {
    left: 0 !important;
    right: 0 !important;                   /* match the text width */
    bottom: 0 !important;
  }
}/* ===== FINAL: Close-Knit underline sits right under the headline ===== */@media (min-width: 601px) {
  h1.location-headline#loc-headline {
    position: relative !important;
    display: inline-block !important;   /* shrink box to text width */
    width: auto !important;
    text-align: center !important;
    padding-bottom: 0.28rem !important; /* put line tight under letters */
    margin: 0 auto 1.0rem !important;   /* space between headline and paragraph */
    /* kill any inherited overhang that makes the line too long */
    --partnerships-underline-overhang: 0 !important;
  }
  h1.location-headline#loc-headline::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;  /* center under the text */
    width: 100% !important;                  /* exactly the heading width */
    height: var(--partnerships-underline-height) !important;
    background: var(--bar-gradient) !important;
    border-radius: var(--partnerships-underline-radius) !important;
  }
}/* Phone / small tablets: same behavior */@media (max-width: 600px) {
  h1.location-headline#loc-headline {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    padding-bottom: 0.22rem !important;
    margin: 0 auto 0.85rem !important;
    --partnerships-underline-overhang: 0 !important;
  }
  h1.location-headline#loc-headline::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    height: 6px !important;                 /* slightly thinner on phones */
    background: var(--bar-gradient) !important;
    border-radius: 999px !important;
  }
}


/* === VEX compare (two-column) — screenshot-accurate layout === */
.vex-compare{
  margin: 8rem auto 4rem;
  max-width: 1100px;
  padding: 0 1rem;
}
.compare-headline{
  font-family:'Tilt Warp',sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  text-align:center;
  white-space: nowrap;
  margin-bottom: 2rem;
}
.compare-headline .vs{
  font-family:'Instrument Sans',sans-serif;
  font-size: clamp(1rem, 3vw, 1.4rem);
  margin: 0 1rem;
  opacity:.9;
}
.compare-body{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.compare-body .column{
  display:flex;
  flex-direction:column;
  gap: var(--compare-para-gap, 1.25rem);
  max-width: 480px;
}
.compare-body .column.left{
  align-items:flex-start;
  text-align:left;
}
.compare-body .column.right{
  align-items:flex-end;
  text-align:right;
}
.compare-body .column p{
  font-size: clamp(1rem, 1.4vw, 1.25rem); /* keep larger readable size */
  line-height: 1.55;
}
.vex-bar-vertical{
  width: var(--compare-bar-width, 20px);
  height: var(--compare-bar-height, 360px);
  background: var(--compare-bar-gradient);
  border-radius: 999px;
}
@media (max-width: 900px){
  .compare-body{
    gap: 2rem;
    padding: 0 0.5rem;
  }
}



/* === Fix vertical bar to span full column height, below headline === */
.vex-compare{
  position: relative;
}
.compare-body{
  position: relative;
  align-items: stretch; /* ensure columns stretch equally */
}
.vex-bar-vertical{
  position: relative;
  align-self: stretch;  /* stretch to full height of .compare-body */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
}



/* === Override: make center gradient bar match full column height (not the title) === */
.vex-compare .compare-body{
  align-items: stretch !important;   /* stretch items to tallest column */
}
.vex-compare .vex-bar-vertical{
  height: auto !important;           /* let flex define the height */
  align-self: stretch !important;    /* ensure the bar stretches */
  border-radius: 999px !important;   /* keep pill shape */
}



/* === Fix: Ensure vertical bar stretches fully even on thin screens === */
@media (max-width: 600px){
  .vex-compare .compare-body{
    align-items: stretch !important;
  }
  .vex-compare .vex-bar-vertical{
    height: auto !important;
    min-height: 100% !important;  /* enforce full column height */
    flex-shrink: 0 !important;
  }
}



/* === Strong override: make the vertical gradient bar match the tallest column === */
.vex-compare .compare-body{ 
  align-items: stretch !important;        /* stretch all three items to same height */
}
.vex-compare .compare-body .vex-bar-vertical{
  height: auto !important;                /* cancel fixed var height */
  align-self: stretch !important;         /* ensure it stretches with the row height */
  flex: 0 0 var(--compare-bar-width, 20px) !important;  /* fixed width, no shrink */
  margin-top: 0 !important;               /* ignore offset so it starts with columns */
  margin-bottom: 0 !important;
  border-radius: 999px !important;
}
/* Tidy paragraph margins so column height is consistent */
.vex-compare .compare-body .column p{
  margin: 0 !important;
}

.btn-outline:hover {
  transform: scale(1.05);
}

/* --- Community Carousel Styles --- */
/* --- Position arrows outside the image --- */
.community-gallery {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  max-width: 650px;
}

.community-gallery .slides {
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
}

.community-gallery .slides img {
  width: 100%;
  display: none;
  border-radius: 12px;
  transition: opacity 0.4s ease-in-out;
}

.community-gallery .slides img.active {
  display: block;
}

/* Arrows outside image bounds */
.community-gallery .arrow {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 2rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.community-gallery .arrow:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

/* Move arrows outside by 60px from the image edge */
.community-gallery .arrow.prev { left: -60px; }
.community-gallery .arrow.next { right: -60px; }

/* Clean overlays and pseudo-elements */
.community-gallery .arrow::before,
.community-gallery .arrow::after {
  content: none !important;
  display: none !important;
}

/* Responsive positioning for smaller screens */
@media (max-width: 768px) {
  .community-gallery .arrow.prev { left: -40px; }
  .community-gallery .arrow.next { right: -40px; }
}

/* Make mission section a stacking context so the GIF stays inside it */
.mission-section {
  position: relative;
  overflow: hidden; /* prevents GIF from leaking downward */
  height: 800px !important;  /* set a height for the mission section */
}

.mission-line {
  height: 6px;
  border-radius: 3px;
  margin: 20px 0;
  background-image: linear-gradient(90deg, #F9CB22, #EF7616, #F0115F);
}

.integrated-approach {
  min-height: auto;
  padding-bottom: 200px; /* if needed */
  position: relative;
}

.background-effects,
.bg-split {
    height: 100% !important;
    top: 0 !important;
}

.integrated-approach {
    height: auto !important;
}

/* --- FINAL MISSION COPY RESET --- */
.mission-copy {
    position: relative !important;
    z-index: 10 !important;

    /* width & alignment like Figma */
    max-width: 650px !important;
    width: 100% !important;

    /* push left */
    margin-left: 5% !important;
    margin-right: auto !important;
    text-align: left !important;

    /* remove conflicting transforms */
    top: 0 !important;
    left: 0 !important;
    transform: none !important;

    color: white !important;
}

/* === FINAL FIX FOR MISSION COPY LAYOUT === */
.mission-copy {
    position: relative !important;
    z-index: 2 !important;

    /* ALIGN LEFT LIKE FIGMA */
    text-align: left !important;

    /* MAKE IT WIDE so it actually expands to the right */
    max-width: 1100px !important;

    /* SHIFT LEFT */
    margin-left: 50% !important;

    /* RESET ALL AUTO-CENTERING */
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
}

.mission-copy p {
    text-align: left !important;
    max-width: 900px !important;   /* widen the paragraph block */
    margin-left: 0 !important;      /* push left */
    margin-right: auto !important;
    font-size: x-large !important;
    width: 100% !important;
}

.mission-copy {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 10% !important;
    padding-right: 4rem !important; /* keep spacing away from GIF */
    text-align: left !important;
    z-index: 10 !important;
}

.mission-copy p {
    max-width: 900px;   /* optional */
    line-height: 1.55;  /* optional */
}

/* === CLEAN RESPONSIVE MISSION SECTION FIX === */
@media (max-width: 900px) {

  /* Background image behaves correctly */
  .mission-gif {
    max-width: 100% !important;
    height: 100vw !important;
    width: 100vw !important;
    left: -100% !important;
    opacity: 0.35 !important;
  }

  /* Mission section container */
  .mission-section {
    padding: 40px 20px !important;
    text-align: left !important;
  }

  /* Text container */
  .mission-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Heading */
  .mission-copy h1 {
    font-size: 4rem !important;
    text-align: left !important;
  }

  /* Paragraphs */
  .mission-copy p {
    width: 100% !important;
    font-size: 1.25rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Donate button row */
  .btn-row {
    justify-content: flex-start !important;
  }

  .mission-copy a {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 450px) {
  .mission-copy p {
    font-size: 0.8rem !important;
  }
  .mission-copy h1 {
    font-size: 3rem !important;
  }
  .mission-copy a {
    font-size: 1rem !important;
  }
}

/* FINAL mobile fix — GIF only */
@media (max-width: 768px) {
  .mission-section .mission-gif {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;   /* wide enough but not crazy */
    height: auto !important;  /* fixes zoom */
    align-self: center !important;
    object-fit: cover !important;
    opacity: 0.35 !important;
    z-index: 0 !important;
    overflow: visible !important;
  }
}