@font-face {
  font-family: "CactusBlack";
  src: url("https://sixer.s3.amazonaws.com/Cactus/Cactus-Black.otf");
}
@font-face {
  font-family: "CactusBold";
  src: url("https://sixer.s3.amazonaws.com/Cactus/Cactus-Bold.otf");
}
@font-face {
  font-family: "WhitneyBold";
  src: url("https://sixer.s3.amazonaws.com/Whitney/Whitney-Bold.otf");
}
@font-face {
  font-family: "WhitneyBlack";
  src: url("https://sixer.s3.amazonaws.com/Whitney/Whitney-Black.otf");
}
@font-face {
  font-family: "FuturaBold";
  src: url("https://sixer.s3.us-east-1.amazonaws.com/Futura/Futura+Bold.otf");
}
  
  [data-testid="footer-list"] {
    text-align: left !important;
  }
  
  :root{
    --blue-900:#061a3a;
    --blue-800:#0a2a63;
    --ink:#eaf0ff;
    --red:#e31837;
    --gold:#bc955c;
    --shadow:0 18px 40px rgba(0,0,0,.35);
    --radius:18px;
    --max:1100px;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:var(--ink);
    background: linear-gradient(180deg, #07173a 0%, #07173a 18%, #081a3f 40%, #07173a 65%, #06163a 100%);
    overflow-x:hidden;
  }

  .container{width:min(var(--max), calc(100% - 40px)); margin:0 auto;}
  .section{padding:64px 0;}
  .divider{height:1px; background:rgba(255,255,255,.08); margin:42px 0;}

  /* HERO */
  .hero{
    padding:56px 0 36px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hero::before{
    content:"";
    position:absolute; inset:-120px -120px auto -120px;
    height:520px;
    background:
      radial-gradient(closest-side, rgba(188,149,92,.22), rgba(188,149,92,0) 70%),
      radial-gradient(closest-side, rgba(227,24,55,.18), rgba(227,24,55,0) 68%),
      radial-gradient(closest-side, rgba(77,130,255,.20), rgba(77,130,255,0) 70%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:28px;
    align-items:center;
    position:relative;
  }
  .hero h1{
    margin:0 0 12px;
    font-size:clamp(34px, 4.6vw, 54px);
    line-height:1.04;
    letter-spacing:.5px;
    text-transform:uppercase;
    font-weight:900;
  }
  .hero h1 span{color:var(--red)}
  .hero p{
    margin:0 0 18px;
    color:rgba(234,240,255,.82);
    max-width:60ch;
    font-size:15px;
    line-height:1.55;
  }
  .hero-actions{
    display:flex; gap:12px; flex-wrap:wrap;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:var(--ink);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.4px;
    font-size:14px;
    cursor:pointer;
  }
  .btn.primary{
    background:var(--red);
    border-color: transparent;
  }

  .hero-aside{
    position:relative;
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    min-height:220px;
  }
  .ph-img{
    background:#003da6;
    opacity:.9;
  }
  .hero-aside .ph-img{position:absolute; inset:0;}
  .hero-aside .badge{
    position:absolute; top:16px; right:16px;
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(6,22,58,.7);
    border:1px solid rgba(255,255,255,.14);
    padding:8px 10px;
    border-radius:999px;
    font-size:12px;
    letter-spacing:.7px;
    text-transform:uppercase;
  }
  .hero-aside .badge::before{
    content:"";
    width:10px; height:10px; border-radius:999px;
    background:var(--red);
    box-shadow: 0 0 0 4px rgba(227,24,55,.25);
  }
  .hero-aside .ribbon{
    position:absolute; left:16px; bottom:16px;
    background:rgba(6,22,58,.75);
    border:1px solid rgba(255,255,255,.14);
    padding:10px 12px;
    border-radius:12px;
    max-width:260px;
    font-size:13px;
    color:rgba(234,240,255,.85);
  }

  .section-title{
    text-align:center;
    margin:0 0 8px;
    font-size:clamp(22px, 3vw, 34px);
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:900;
  }
  .section-sub{
    text-align:center;
    margin:0 auto 34px;
    max-width:70ch;
    color:rgba(234,240,255,.78);
    line-height:1.6;
    font-size:14px;
  }

  /* PROGRAMS (2 cards) */
  .programs-wrap{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:22px;
  }
  .card{
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;
  }
  .card-inner{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    min-height:170px;
  }
  .card-body{
    padding:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(234,240,255,.85);
    font-weight:800;
  }
  .eyebrow .dot{
    width:10px; height:10px; border-radius:999px;
    background:var(--red);
    box-shadow: 0 0 0 4px rgba(227,24,55,.22);
  }
  .card h3{
    margin:8px 0 6px;
    font-size:18px;
    letter-spacing:.4px;
    text-transform:uppercase;
  }
  .card p{
    margin:0;
    color:rgba(234,240,255,.76);
    line-height:1.55;
    font-size:13px;
  }
  .card .card-cta{
    margin-top:14px;
    width:max-content;
    background:var(--red);
    border:0;
    padding:10px 14px;
    border-radius:999px;
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.8px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
  }
  .card .card-cta::after{content:"→"; font-size:14px; line-height:1; transform: translateY(-.5px);}

  .media{
    position:relative;
    min-height:170px;
    border-left:1px solid rgba(255,255,255,.10);
  }
  .media .ph-img{position:absolute; inset:0;}
  .media .stamp{
    position:absolute; top:16px; left:16px;
    width:46px; height:32px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(6,22,58,.65);
    display:flex; align-items:center; justify-content:center;
    font-size:11px;
    letter-spacing:1px;
    font-weight:900;
    text-transform:uppercase;
    z-index:2;
  }

  /* SPOTLIGHT */
  .spotlight{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:22px;
    align-items:stretch;
  }
  .spotlight .left{
    padding:26px;
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    position:relative;
    overflow:hidden;
    min-height:180px;
  }
  .spotlight .left::before{
    content:"13";
    position:absolute; left:20px; top:10px;
    font-size:120px; font-weight:900;
    color:rgba(255,255,255,.06);
    letter-spacing:-6px;
    line-height:1;
    pointer-events:none;
  }
  .spotlight h3{
    margin:0 0 10px;
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:.6px;
  }
  .spotlight p{
    margin:0 0 16px;
    color:rgba(234,240,255,.78);
    line-height:1.6;
    font-size:13px;
    max-width:60ch;
  }
  .spotlight .right{
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    min-height:180px;
    position:relative;
    overflow:hidden;
  }
  .spotlight .right .ph-img{position:absolute; inset:0;}
  .spotlight .right .label{
    position:absolute; left:16px; bottom:16px;
    background:rgba(6,22,58,.7);
    border:1px solid rgba(255,255,255,.14);
    padding:10px 12px;
    border-radius:12px;
    font-size:12px;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:rgba(234,240,255,.85);
    z-index:2;
  }

  /* JR PROGRAMS */
  .jr-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
  }
  .tile{
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;
  }
  .tile .img-ph{
    height:150px;
    position:relative;
  }
  .tile .img-ph .ph-img{position:absolute; inset:0;}
  .tile .content{padding:16px 16px 18px;}
  .tile h4{
    margin:0 0 8px;
    text-transform:uppercase;
    letter-spacing:.7px;
    font-size:14px;
  }
  .tile p{
    margin:0 0 12px;
    color:rgba(234,240,255,.74);
    font-size:12.5px;
    line-height:1.55;
    min-height:40px;
  }
  .tile .pill{
    position:absolute; top:12px; right:12px;
    width:34px; height:34px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(6,22,58,.65);
    z-index:2;
  }
  .tile .mini-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 12px;
    border-radius:999px;
    background:var(--red);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.9px;
    text-decoration:none;
    cursor:pointer;
  }

  /* AWARDS */
  .recognition{display:grid; gap:16px;}
  .recognition-item{
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height:160px;
  }
  .recognition-item .img-ph{
    position:relative;
    min-height:160px;
    border-right:1px solid rgba(255,255,255,.10);
  }
  .recognition-item .img-ph .ph-img{position:absolute; inset:0;}
  .recognition-item .info{
    padding:18px 18px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
  }
  .recognition-item .kicker{
    display:flex; align-items:center; gap:8px;
    color:rgba(234,240,255,.85);
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:900;
  }
  .trophy{
    width:18px; height:18px;
    border-radius:6px;
    background:linear-gradient(135deg, rgba(188,149,92,.95), rgba(188,149,92,.35));
    box-shadow: 0 10px 20px rgba(188,149,92,.18);
  }

  /* INITIATIVES + FILTER */
  .pillbar{
    display:flex; justify-content:center;
    gap:10px; flex-wrap:wrap;
    margin: 18px 0 28px;
  }
  .pillbar button{
    appearance:none;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:rgba(234,240,255,.92);
    border-radius:999px;
    padding:10px 14px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-size:11px;
    cursor:pointer;
  }
  .pillbar button.active{
    border-color: rgba(188,149,92,.45);
    box-shadow: 0 0 0 4px rgba(188,149,92,.18);
  }
  .initiative-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:18px;
  }
  .initiative{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    position:relative;
    min-height:220px;
  }
  .initiative .ph-img{position:absolute; inset:0; opacity:.95;}
  .initiative .overlay{
    position:absolute; inset:auto 0 0 0;
    padding:18px 18px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  }
  .initiative h4{
    margin:0;
    text-transform:uppercase;
    letter-spacing:.7px;
    font-size:14px;
  }
  .initiative p{
    margin:0;
    color:rgba(234,240,255,.78);
    font-size:12.5px;
    line-height:1.5;
    max-width:60ch;
  }

  /* CAROUSEL */
  .carousel-shell{
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    position:relative;
    padding:22px;
  }
  .carousel-header{
    text-align:center;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    margin:0 0 16px;
    font-size:18px;
  }
  .carousel-viewport{
    overflow:hidden;
    border-radius:14px;
  }
  .carousel-track{
    display:flex;
    gap:14px;
    transition: transform .45s ease;
    will-change: transform;
  }
  .carousel-card{
    flex: 0 0 calc((100% - 28px) / 3);
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    overflow:hidden;
    background:rgba(6,22,58,.55);
  }
  .carousel-card .img-ph{
    height:110px;
    position:relative;
  }
  .carousel-card .img-ph .ph-img{position:absolute; inset:0;}
  .carousel-card .meta{padding:10px 10px 12px}
  .carousel-card .meta strong{display:block; font-size:14px; letter-spacing:.6px; text-transform:uppercase}
  .carousel-card .meta span{display:block; font-size:12.5px; color:rgba(234,240,255,.7); margin-top:4px}

  .carousel-controls{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:14px;
  }
  .arrow-btn{
    width:44px; height:44px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:var(--ink);
    cursor:pointer;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:900;
    line-height:1;
    user-select:none;
  }
  .arrow-btn.primary{
    background:var(--red);
    border-color:transparent;
  }
  .carousel-dots{
    display:flex; gap:8px; align-items:center; justify-content:center;
    flex:1;
  }
  .dot{
    width:8px; height:8px; border-radius:999px;
    background:rgba(255,255,255,.25);
    border:1px solid rgba(255,255,255,.12);
  }
  .dot.active{background:rgba(188,149,92,.95); box-shadow: 0 0 0 4px rgba(188,149,92,.18);}

  /* SOCIAL */
  .social-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:16px;
  }
  .social{
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  }
  .social .img-ph{height:150px; position:relative;}
  .social .img-ph .ph-img{position:absolute; inset:0;}
  .social .body{padding:14px 14px 16px}
  .social .body a{
    display:inline-flex; margin-top:10px;
    font-size:11px; font-weight:900; letter-spacing:.9px;
    text-transform:uppercase;
    color:rgba(234,240,255,.9);
    text-decoration:none;
    border-bottom:1px solid rgba(234,240,255,.25);
    padding-bottom:2px;
    cursor:pointer;
  }

  /* reveal animation (used on load) */
  .reveal-up{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal-up.is-in{
    opacity:1;
    transform:none;
  }

  /* RESPONSIVE */
  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr}
    .programs-wrap{grid-template-columns:1fr}
    .spotlight{grid-template-columns:1fr}
    .jr-grid{grid-template-columns:1fr}
    .recognition-item{grid-template-columns:1fr}
    .recognition-item .img-ph{border-right:0; border-bottom:1px solid rgba(255,255,255,.10);}
    .initiative-grid{grid-template-columns:1fr}
    .social-grid{grid-template-columns:1fr}

    .carousel-card{flex: 0 0 100%;}
  }