@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap");

html { scroll-behavior: smooth; }
body.defender-mission-page { background: #161616; color: #f4f9fc; font-family: "Outfit", sans-serif; overflow-x: hidden; }
body.defender-mission-page * { box-sizing: border-box; }
body.defender-mission-page section { padding-block: 125px; }
body.defender-mission-page section .container { margin: 0 auto; max-width: 1318px; padding: 0; width: 76.36vw; }
body.defender-mission-page .sectionTop { margin: 0 auto 75px; max-width: 1318px; text-align: center; text-transform: uppercase; }
body.defender-mission-page .sectionTitle { color: #f4f9fc; font: 900 80px/66px "Outfit", sans-serif; letter-spacing: -1.92px; margin: 0; text-transform: uppercase; }
body.defender-mission-page .sectionTop .displayMeta { font: 800 45px/44px "Outfit", sans-serif; letter-spacing: -1.08px; margin: 25px auto 0; max-width: 870px; text-transform: uppercase; }
body.defender-mission-page p { font-family: "Outfit", sans-serif; }

body.defender-mission-page .defender-scroll-reveal {
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity 700ms ease,transform 760ms cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--defender-reveal-delay,0ms);
  will-change:opacity,transform;
}
body.defender-mission-page .defender-scroll-reveal.is-visible { opacity:1; transform:translate3d(0,0,0); }
@media (prefers-reduced-motion:reduce) {
  body.defender-mission-page .defender-scroll-reveal,
  body.defender-mission-page .defender-scroll-reveal.is-visible { opacity:1; transform:none; transition:none; }
}

/* Fixed Figma titlebar */
body.defender-mission-page #navMission { background: #002237; height: 136px; left: 0; padding: 30px 85px; position: fixed; right: 0; top: 0; z-index: 1000; }
body.defender-mission-page #navMission .nav__wrap { align-items: center; display: flex; height: 76px; justify-content: space-between; margin: 0 auto; max-width: 1556px; position: relative; }
body.defender-mission-page .mission-nav__brand { align-items: center; display: flex; height: 76px; justify-content: flex-start; width: 78px; }
body.defender-mission-page .mission-nav__brand img { display: block; height: 48px; object-fit: contain; width: 49px; }
body.defender-mission-page #navMission ul { align-items: center; display: flex; gap: 38px; left: 50%; list-style: none; margin: 0; padding: 0; position: absolute; transform: translateX(-50%); }
body.defender-mission-page #navMission ul a,
body.defender-mission-page #navMission .metaLinks a { align-items: center; background: transparent !important; border: 0; box-shadow: none !important; color: #f4f9fc; display: inline-flex; font: 400 18px/29px "Outfit", sans-serif; height: 55px; padding: 0 8px; position: relative; text-decoration: none; text-transform: none; transition: color .2s ease, opacity .2s ease; white-space:nowrap; }
body.defender-mission-page #navMission ul a::after,
body.defender-mission-page #navMission .metaLinks a::after { background: #b7f9d8; bottom: 5px; content: ""; height: 2px; left: 8px; position: absolute; right: 8px; transform: scaleX(0); transform-origin: center; transition: transform .2s ease; }
body.defender-mission-page #navMission ul a:hover::after,
body.defender-mission-page #navMission ul a:focus-visible::after,
body.defender-mission-page #navMission ul a.active::after,
body.defender-mission-page #navMission .metaLinks a:hover::after,
body.defender-mission-page #navMission .metaLinks a:focus-visible::after { transform: scaleX(1); }
body.defender-mission-page #navMission ul a.active { background: transparent !important; color: #f4f9fc !important; }
body.defender-mission-page #navMission .metaLinks { align-items: center; display: flex; gap: 0; order: 3; }
body.defender-mission-page #navMission .metaLinks a { gap: 8px; opacity: .62; }
body.defender-mission-page #navMission .metaLinks i { color: #b7f9d8; }
body.defender-mission-page #navMission .metaLinks a:hover,
body.defender-mission-page #navMission .metaLinks a:focus-visible { color: #b7f9d8; opacity: 1; }
body.defender-mission-page #navMission .hamburger { display: none; }

/* Hero */
body.defender-mission-page #hero { background-color: #1d3a3d; background-position: center; background-size: cover; height: 1228px; margin-top: 0; overflow: hidden; padding: 0; position: relative; }
body.defender-mission-page #hero::after { background: linear-gradient(90deg, rgba(0,23,37,.08), rgba(0,23,37,.04) 58%, rgba(0,23,37,.2)); content: ""; inset: 0; position: absolute; }
body.defender-mission-page .mission-hero__mark { background: url("/packages/kalla/css/images/defenderMark.svg") center / contain no-repeat; height: 835px; left: -362px; opacity: .55; position: absolute; top: 197px; width: 854px; z-index: 1; }
body.defender-mission-page #hero .missionCTA-wrap { align-items: center; bottom: auto; display: flex; height: 670px; justify-content: center; left: auto; padding: 0; position: absolute; right: 115px; top: 280px; width: 482px; z-index: 2; }
body.defender-mission-page #hero .missionCTA { background: #001725; border: 0; border-radius: 0; height: 670px; min-height: 0; position: relative; width: 482px; }
body.defender-mission-page #hero .missionCTA::before,
body.defender-mission-page #hero .missionCTA::after { border-color: #b7f9d8; content: ""; height: 18px; position: absolute; width: 18px; }
body.defender-mission-page #hero .missionCTA::before { border-left: 3px solid #b7f9d8; border-top: 3px solid #b7f9d8; left: 30px; top: 26px; }
body.defender-mission-page #hero .missionCTA::after { border-bottom: 3px solid #b7f9d8; border-right: 3px solid #b7f9d8; bottom: 18px; right: 30px; }
body.defender-mission-page #hero .missionCTA-content { align-items: center; display: flex; height: 100%; justify-content: center; max-width: none; padding: 42px 30px; text-align: center; width: 100%; }
body.defender-mission-page #hero .missionCTA-content > img { height: 68px; margin: 0; object-fit: contain; width: 114px; }
body.defender-mission-page #hero .missionCTA-content .sectionTitleSm { color: #8edde2; font: 900 clamp(48px, 4.6vw, 80px)/.83 "Outfit", sans-serif; letter-spacing: -1.9px; margin: 32px 0; text-transform: uppercase; }
body.defender-mission-page #hero .missionCTA-content p { color: #f4f9fc; font: 400 18px/29px "Outfit", sans-serif; margin: 0 0 32px; text-transform: none; }
body.defender-mission-page #hero .missionCTA-content .button { border: 3px solid #b7f9d8; color: #b7f9d8; font: 600 19px/21px "Outfit", sans-serif; padding: 14px 50px; text-decoration: none; text-transform: uppercase; }
body.defender-mission-page #hero .missionCTA-content .button:hover { background: #b7f9d8; box-shadow: 6px 6px 0 #8edde2; color: #001725; transform: translate(-3px,-3px); }
body.defender-mission-page .mission-color-border { display: flex; height: 14px; width: 100%; }
body.defender-mission-page .mission-color-border span { flex: 1; }
body.defender-mission-page .mission-color-border span:nth-child(1) { background:#002237; }
body.defender-mission-page .mission-color-border span:nth-child(2) { background:#8edde2; }
body.defender-mission-page .mission-color-border span:nth-child(3) { background:#b7f9d8; }
body.defender-mission-page .mission-color-border span:nth-child(4) { background:#f4f9fc; }
body.defender-mission-page .mission-color-border span:nth-child(5) { background:#161616; }

/* Overview */
body.defender-mission-page #overview { background: #161616; color: #ebe3dc; position: relative; }
body.defender-mission-page #overview::before { background: url("/packages/kalla/css/images/defenderMissionOverviewTexture.png") center / cover no-repeat; content:""; inset:0; opacity:.13; pointer-events:none; position:absolute; }
body.defender-mission-page #overview::after { background: url("/packages/kalla/css/images/defenderCauseDots.svg") center / contain no-repeat; content:""; height:218px; left:-14px; position:absolute; top:72px; width:218px; }
body.defender-mission-page #overview > * { position:relative; z-index:1; }
body.defender-mission-page #overview .displayMeta { color: #8edde2; }
body.defender-mission-page #overview .twoCols { align-items: flex-start; display: grid; gap: 25px; grid-template-columns: 1fr 1fr; margin: 0; max-width: none; padding: 0; }
body.defender-mission-page #overview .leftCol { order: 1; padding-left: 50px; }
body.defender-mission-page #overview .rightCol { order: 2; padding: 50px 50px 0 0; }
body.defender-mission-page #overview .mission_slide .splide__slide img { border-radius: 0; display: block; height: 328px; margin: 0 auto; object-fit: cover; width: 328px; }
body.defender-mission-page #overview .button_wrap { gap: 6px; padding-top: 10px; }
body.defender-mission-page #overview .misson__arrow i::before { color: #b7f9d8; font-size: 48px; }
body.defender-mission-page #overview .rightCol .displayL { color: #ebe3dc; font: 600 27px/30px "Outfit", sans-serif; letter-spacing: -.66px; margin: 0 0 10px; text-transform: uppercase; }
body.defender-mission-page #overview .rightCol p { color: #ebe3dc; font: 400 18px/29px "Outfit", sans-serif; margin: 0 0 18px; }

/* Impact */
body.defender-mission-page #impactDetail { background:#002237; color:#f4f9fc; overflow:hidden; position:relative; }
body.defender-mission-page #impactDetail::before { background:url("/packages/kalla/css/images/defenderQuizBarricade.svg") center / contain no-repeat; content:""; height:65px; opacity:1; pointer-events:none; position:absolute; right:-59px; top:78px; width:413px; }
body.defender-mission-page #impactDetail::after { display:none; }
body.defender-mission-page #impactDetail > * { position:relative; z-index:1; }
body.defender-mission-page #impactDetail .displayMeta { color: #8edde2; }
body.defender-mission-page #impactDetail .twoCols { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; margin: 0; max-width: none; padding: 0; text-align: left; }
body.defender-mission-page #impactDetail .twoCols > .leftCol,
body.defender-mission-page #impactDetail .twoCols > .rightCol { padding:0 !important; width:auto !important; }
body.defender-mission-page #impactDetail .featuredStory { background-color:#001725 !important; background-position:center top; background-repeat:no-repeat; background-size:100% 285px; display:flex; flex-direction:column; height:473px; justify-content:flex-end; overflow:hidden; padding:0 30px; position:relative; }
body.defender-mission-page #impactDetail .featuredStory::after { display:none; }
body.defender-mission-page #impactDetail .featuredStory > .bodySmall { background:#8edde2; color:#001725; font:500 14px/21px "Outfit",sans-serif; margin:0; padding:1px 7px; position:absolute; right:30px; text-transform:uppercase; top:20px; z-index:2; }
body.defender-mission-page #impactDetail .featuredStory .content { display:flex; flex-direction:column; height:188px; justify-content:center; padding:18px 0; position:relative; z-index:1; }
body.defender-mission-page #impactDetail .featuredStory .display { color:#b7f9d8; font:800 22px/30px "Outfit",sans-serif; margin:0 0 7px; text-transform:uppercase; }
body.defender-mission-page #impactDetail .featuredStory .content p { color:#f4f9fc; font:500 14px/21px "Outfit",sans-serif; margin:0 0 22px; }
body.defender-mission-page #impactDetail .readMission { color:#8edde2; font:400 18px/29px "Outfit",sans-serif; text-decoration:none; }
body.defender-mission-page #impactDetail .readMission:hover { color:#b7f9d8; letter-spacing:.5px; }
body.defender-mission-page #impactDetail .update { background:#f4f9fc; color:#142645; height:473px; min-height:473px; padding:40px 65px 30px; position:relative; text-align:center; }
body.defender-mission-page #impactDetail .update::before { background:url("/packages/kalla/css/images/defenderMissionGivingTexture.png") center / cover no-repeat; content:""; inset:0; opacity:.18; pointer-events:none; position:absolute; }
body.defender-mission-page #impactDetail .update > * { position:relative; z-index:1; }
body.defender-mission-page #impactDetail .update .display { color:#002237; font:800 22px/30px "Outfit",sans-serif; margin:0; text-transform:uppercase; }
body.defender-mission-page #impactDetail .update .bodyMeta { color:#142645; font:500 14px/21px "Outfit",sans-serif; letter-spacing:4.4px; margin:0 0 28px; text-transform:uppercase; }
body.defender-mission-page #impactDetail .update .date { background:#8edde2; color:#fff; font:500 14px/21px "Outfit",sans-serif; letter-spacing:4px; margin:0 auto 25px; padding:12px 10px; text-transform:uppercase; width:203px; }
body.defender-mission-page #impactDetail .update .splide__slide { background:#f4f9fc; color:#142645; font:400 18px/29px "Outfit",sans-serif; padding:40px 45px; }

/* Give / testimonials */
body.defender-mission-page #donate { background:#f4f9fc; color:#161616; overflow:hidden; position:relative; }
body.defender-mission-page #donate::before { background:url("/packages/kalla/css/images/defenderMissionGivingTexture.png") center / cover no-repeat; content:""; inset:0; opacity:.35; pointer-events:none; position:absolute; }
body.defender-mission-page #donate > * { position:relative; z-index:1; }
body.defender-mission-page #donate .sectionTitle { color:#002237; }
body.defender-mission-page #donate .displayMeta { color:#161616; }
body.defender-mission-page #donate .twoCols { align-items:center; display:grid; gap:75px; grid-template-columns:1fr 1fr; margin:0 auto 75px; max-width:1320px; }
body.defender-mission-page #donate .twoCols > .leftCol,
body.defender-mission-page #donate .twoCols > .rightCol { padding:0 !important; width:auto !important; }
body.defender-mission-page #donate .donateButtons { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
body.defender-mission-page #donate .buttonDonate { background:#8edde2; border:2px solid #8edde2; color:#002237; font:900 15px/27px "Outfit",sans-serif; padding:14px 10px; text-align:center; text-decoration:none; }
body.defender-mission-page #donate .buttonDonate:hover { background:#b7f9d8; border-color:#002237; transform:translateY(-3px); }
body.defender-mission-page #donate .rightCol p { color:#161616; font:400 18px/29px "Outfit",sans-serif; }
body.defender-mission-page #donate #splide-02 { overflow:visible; }
body.defender-mission-page #donate #splide-02 .splide__track { overflow:visible; }
body.defender-mission-page #donate #splide-02 .testimonial { background:rgba(0,34,55,.08); border-top:2px solid transparent; color:#002237; min-height:276px; padding:42px 55px; }
body.defender-mission-page #donate #splide-02 .displayXL { color:#8edde2; font:900 54px/45px "Outfit",sans-serif; margin:0 0 20px; }
body.defender-mission-page #donate #splide-02 .testimonial p { color:#002237; font:500 18px/29px "Outfit",sans-serif; }
body.defender-mission-page #donate #splide-02 .testimonial.is-next { background:#002237; border-top-color:#b7f9d8; color:#f4f9fc; opacity:1; }
body.defender-mission-page #donate #splide-02 .testimonial.is-next p { color:#f4f9fc; }

/* Involvement */
body.defender-mission-page #unlock { background:#161616; color:#f4f9fc; position:relative; }
body.defender-mission-page #unlock::before { background:url("/packages/kalla/css/images/defenderMissionOverviewTexture.png") center / cover no-repeat; content:""; inset:0; opacity:.1; pointer-events:none; position:absolute; }
body.defender-mission-page #unlock > * { position:relative; z-index:1; }
body.defender-mission-page #unlock .sectionTitle span { color:#8edde2; }
body.defender-mission-page #unlock .sectionTop { margin-bottom:75px; }
body.defender-mission-page #unlock .displayMeta { color:#f4f9fc; font:800 27px/30px "Outfit",sans-serif; letter-spacing:-.65px; margin-top:25px; max-width:900px; }
body.defender-mission-page #unlock .threeCols { display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
body.defender-mission-page #unlock .merch { background:#f4f9fc; color:#002237; display:flex; flex-direction:column; min-height:532px; padding:40px 25px; position:relative; text-align:center; }
body.defender-mission-page #unlock .merch .displayL { color:#002237; font:800 22px/30px "Outfit",sans-serif; margin:0; text-transform:uppercase; }
body.defender-mission-page #unlock .merch .bodySmall { color:#002237; font:500 14px/21px "Outfit",sans-serif; letter-spacing:2px; margin:0; text-transform:uppercase; }
body.defender-mission-page #unlock .merch img { height:158px; margin:26px 0; object-fit:cover; width:100%; }
body.defender-mission-page #unlock .merch p { color:#142645; font:400 16px/25px "Outfit",sans-serif; margin:0 0 20px; }
body.defender-mission-page #unlock .merch .button { align-items:center; background:#b7f9d8; border:2px solid #002237; color:#002237; display:flex; font:900 15px/27px "Outfit",sans-serif; height:55px; justify-content:center; margin:auto auto 0; padding:0; text-decoration:none; text-transform:uppercase; width:230px; }
body.defender-mission-page #unlock .merch .button:hover { background:#8edde2; box-shadow:none; transform:none; }
body.defender-mission-page #unlock .merch:nth-child(2) { background:#8edde2; }
body.defender-mission-page #unlock .merch:nth-child(2) .button { background:transparent; }
body.defender-mission-page #unlock .merch:nth-child(3) { background:#002237; color:#f4f9fc; }
body.defender-mission-page #unlock .merch:nth-child(3) .displayL,
body.defender-mission-page #unlock .merch:nth-child(3) .bodySmall,
body.defender-mission-page #unlock .merch:nth-child(3) p { color:#f4f9fc; }
body.defender-mission-page #unlock .merch:nth-child(3) .button { background:transparent; border-color:#b7f9d8; color:#b7f9d8; }

/* FAQs */
body.defender-mission-page #faqs { background:#002237; color:#f4f9fc; min-height:1718px; }
body.defender-mission-page #faqs .displayMeta { color:#8edde2; }
body.defender-mission-page #faqs .faqs-section { margin:0 auto; max-width:1074px; }
body.defender-mission-page #faqs .faqs-list-title { color:#8edde2; font:500 14px/21px "Outfit",sans-serif; letter-spacing:2px; margin:0 0 20px; text-transform:uppercase; }
body.defender-mission-page #faqs .faqs-listing { border-bottom:1px solid rgba(244,249,252,.22); }
body.defender-mission-page #faqs .question { color:#f4f9fc; display:block; font:400 18px/29px "Outfit",sans-serif; padding:25px 50px 25px 0; position:relative; text-decoration:none; }
body.defender-mission-page #faqs .question::after { color:#b7f9d8; content:"\f078"; font-family:"Font Awesome 6 Pro"; font-size:20px; position:absolute; right:25px; top:27px; transition:transform .2s ease; }
body.defender-mission-page #faqs .question.faq-active::after { transform:rotate(180deg); }
body.defender-mission-page #faqs .answer { color:#b7f9d8; font:400 18px/29px "Outfit",sans-serif; margin:0; padding:0 50px 25px 0; }

body.defender-mission-page #missionPopup { background:#161616; color:#f4f9fc; }
body.defender-mission-page #overview,
body.defender-mission-page #impactDetail,
body.defender-mission-page #donate,
body.defender-mission-page #unlock,
body.defender-mission-page #faqs { scroll-margin-top:136px; }

@media (max-width: 1200px) {
  body.defender-mission-page #navMission { height:96px; padding:10px 28px; }
  body.defender-mission-page #navMission .nav__wrap { height:76px; }
  body.defender-mission-page #navMission ul { gap:10px; }
  body.defender-mission-page #hero { height:900px; }
  body.defender-mission-page #hero .missionCTA-wrap { height:570px; right:55px; top:190px; width:440px; }
  body.defender-mission-page #hero .missionCTA { height:570px; width:440px; }
  body.defender-mission-page #hero .missionCTA-content .sectionTitleSm { font-size:58px; line-height:52px; }
  body.defender-mission-page .sectionTitle { font-size:64px; line-height:58px; }
  body.defender-mission-page .sectionTop .displayMeta { font-size:36px; line-height:38px; }
}

@media (max-width: 900px) {
  body.defender-mission-page section { padding-block:88px; }
  body.defender-mission-page section .container { width:calc(100% - 80px); }
  body.defender-mission-page #navMission ul { display:none; }
  body.defender-mission-page #navMission .metaLinks a span { display:none; }
  body.defender-mission-page #hero { height:800px; }
  body.defender-mission-page #hero .missionCTA-wrap { left:50%; right:auto; top:170px; transform:translateX(-50%); width:min(505px,calc(100% - 48px)); }
  body.defender-mission-page #hero .missionCTA { width:100%; }
  body.defender-mission-page #overview .twoCols,
  body.defender-mission-page #impactDetail .twoCols,
  body.defender-mission-page #donate .twoCols { grid-template-columns:1fr; }
  body.defender-mission-page #overview .leftCol { padding:0; }
  body.defender-mission-page #overview .rightCol { padding:20px 0 0; }
  body.defender-mission-page #unlock .threeCols { grid-template-columns:1fr; margin:0 auto; max-width:520px; }
}

@media (max-width: 600px) {
  body.defender-mission-page section { padding-block:64px; }
  body.defender-mission-page section .container { width:calc(100% - 40px); }
  body.defender-mission-page .sectionTop { margin-bottom:48px; }
  body.defender-mission-page .sectionTitle { font-size:42px; line-height:40px; }
  body.defender-mission-page .sectionTop .displayMeta { font-size:25px; line-height:29px; }
  body.defender-mission-page #navMission { height:76px; padding:8px 20px; }
  body.defender-mission-page #navMission .nav__wrap { height:60px; }
  body.defender-mission-page .mission-nav__brand,
  body.defender-mission-page .mission-nav__brand img { height:54px; width:54px; }
  body.defender-mission-page #hero { height:720px; }
  body.defender-mission-page #hero .missionCTA-wrap { height:520px; top:120px; }
  body.defender-mission-page #hero .missionCTA { height:520px; }
  body.defender-mission-page #hero .missionCTA-content { padding:40px 24px; }
  body.defender-mission-page #hero .missionCTA-content .sectionTitleSm { font-size:42px; line-height:39px; margin:22px 0; }
  body.defender-mission-page #hero .missionCTA-content p { font-size:16px; line-height:24px; }
  body.defender-mission-page #hero .missionCTA-content .button { font-size:15px; padding:12px 26px; }
  body.defender-mission-page #overview .mission_slide .splide__slide img { height:min(328px,calc(100vw - 70px)); width:min(328px,calc(100vw - 70px)); }
  body.defender-mission-page #impactDetail .update { padding:34px 20px; }
  body.defender-mission-page #donate .donateButtons { grid-template-columns:repeat(2,1fr); }
}
