:root {
   --ink: #06141d;
   --deep: #071d2b;
   --ocean: #0a3146;
   --cyan: #11b6ce;
   --foam: #eaf8f9;
   --white: #fff;
   --muted: #9fb3bf;
   --line: rgba(255, 255, 255, .13);
   --saffron: #ff9933;
   --green: #138808;
   --sand: #f3efe6;
   --radius: 26px;
   --shadow: 0 30px 80px rgba(0, 0, 0, .28)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   background: var(--ink);
   color: var(--white);
   font-family: Manrope, Arial, sans-serif;
   line-height: 1.65;
   overflow-x: hidden
}

body.menu-open {
   overflow: hidden
}

a {
   color: inherit;
   text-decoration: none
}

img {
   max-width: 100%;
   display: block
}

.container {
   width: min(1180px, calc(100% - 40px));
   margin: auto
}

.site-header {
   position: fixed;
   z-index: 1000;
   top: 0;
   left: 0;
   right: 0;
   border-bottom: 1px solid transparent;
   transition: .3s;
   background: linear-gradient(to bottom, rgba(2, 15, 23, .8), transparent)
}

.site-header.scrolled {
   background: rgba(3, 16, 24, .92);
   backdrop-filter: blur(18px);
   border-color: var(--line)
}

.nav-wrap {
   height: 86px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.brand {
   display: flex;
   align-items: center;
   gap: 13px
}

.brand img {
   width: 112px;
   height: 70px;
   object-fit: contain;
   object-position: left
}

.brand-divider {
   width: 1px;
   height: 35px;
   background: rgba(255, 255, 255, .25)
}

.brand-campaign {
   font-family: 'Bebas Neue';
   font-size: 19px;
   letter-spacing: 2px;
   line-height: 1
}

.brand-campaign b {
   color: var(--cyan)
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 22px;
   font-size: 13px;
   font-weight: 700
}

.main-nav>a:not(.btn) {
   opacity: .78;
   transition: .2s
}

.main-nav>a:hover,
.main-nav>a.is-active {
   opacity: 1;
   color: #fff
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border-radius: 999px;
   padding: 13px 21px;
   font-weight: 800;
   border: 1px solid transparent;
   transition: .25s;
   cursor: pointer;
   font-family: inherit
}

.btn-primary {
   background: linear-gradient(135deg, var(--cyan), #087ea0);
   box-shadow: 0 10px 30px rgba(17, 182, 206, .22)
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 16px 40px rgba(17, 182, 206, .32)
}

.btn-outline {
   border-color: rgba(255, 255, 255, .35);
   background: rgba(255, 255, 255, .03)
}

.btn-outline:hover {
   background: #fff;
   color: var(--ink)
}

.btn-light {
   background: #fff;
   color: var(--ink)
}

.menu-toggle {
   display: none;
   background: none;
   border: 0;
   padding: 10px
}

.menu-toggle span {
   display: block;
   width: 25px;
   height: 2px;
   background: #fff;
   margin: 5px
}

.eyebrow {
   display: inline-flex;
   gap: 9px;
   align-items: center;
   text-transform: uppercase;
   letter-spacing: 2.4px;
   font-size: 11px;
   font-weight: 800;
   color: #b9eef4
}

.eyebrow:before {
   content: "";
   width: 28px;
   height: 1px;
   background: var(--cyan)
}

h1,
h2,
h3,
p {
   margin-top: 0
}

h1,
h2,
.display {
   font-family: 'Bebas Neue', sans-serif;
   font-weight: 400;
   letter-spacing: .5px;
   line-height: .94
}

h1 {
   font-size: clamp(62px, 9vw, 138px);
   margin-bottom: 25px
}

h2 {
   font-size: clamp(44px, 6vw, 82px);
   margin-bottom: 24px
}

h3 {
   font-size: 21px;
   line-height: 1.2
}

.lead {
   font-size: clamp(18px, 2vw, 23px);
   color: #d5e3e8;
   max-width: 760px
}

.muted {
   color: var(--muted)
}

.hero {
   min-height: 100vh;
   position: relative;
   display: flex;
   align-items: flex-end;
   padding: 150px 0 80px;
   background: linear-gradient(90deg, rgba(3, 17, 26, .97) 0%, rgba(3, 17, 26, .72) 45%, rgba(3, 17, 26, .2) 74%), linear-gradient(0deg, rgba(3, 17, 26, 1), transparent 40%), url('https://images.unsplash.com/photo-1534289692684-c02577d5560d?auto=format&fit=crop&w=2000&q=88') center 35%/cover no-repeat
}

.hero:after {
   content: "";
   position: absolute;
   inset: auto 0 0;
   height: 6px;
   background: linear-gradient(90deg, var(--saffron) 0 33%, #f6f6f4 33% 66%, var(--green) 66%)
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 900px
}

.hero h1 em {
   font-style: normal;
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .7)
}

.hero-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   margin-top: 34px
}

.hero-meta {
   display: flex;
   gap: 38px;
   flex-wrap: wrap;
   margin-top: 60px
}

.hero-meta strong {
   display: block;
   font-family: 'Bebas Neue';
   font-size: 36px;
   color: #fff
}

.hero-meta span {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1.8px;
   color: var(--muted)
}

.section {
   padding: 110px 0
}

.section-light {
   background: var(--sand);
   color: #102029
}

.section-light .muted {
   color: #62717a
}

.section-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 30px;
   margin-bottom: 48px
}

.section-head>div {
   max-width: 720px
}

.section-head p {
   max-width: 470px;
   color: var(--muted)
}

.grid-2 {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 70px;
   align-items: center
}

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
}

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px
}

.card {
   background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 28px;
   position: relative;
   overflow: hidden
}

.card:hover {
   border-color: rgba(17, 182, 206, .4)
}

.card .num {
   font-family: 'Bebas Neue';
   font-size: 56px;
   color: var(--cyan);
   line-height: 1
}

.image-frame {
   border-radius: 34px;
   overflow: hidden;
   position: relative;
   min-height: 560px;
   box-shadow: var(--shadow)
}

.image-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   inset: 0
}

.image-frame:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(5, 20, 29, .45), transparent 50%)
}

.quote-block {
   padding: 38px 0 0;
   border-top: 1px solid var(--line);
   margin-top: 34px;
   font-size: 28px;
   line-height: 1.35
}

.campaign-strip {
   background: linear-gradient(120deg, #0b718a, #0d394c);
   padding: 48px;
   border-radius: 32px;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 24px;
   align-items: center
}

.campaign-strip h3 {
   font-family: 'Bebas Neue';
   font-size: 46px;
   margin: 0
}

.progress-wrap {
   margin-top: 28px
}

.progress-track {
   height: 10px;
   background: rgba(255, 255, 255, .13);
   border-radius: 99px;
   overflow: hidden
}

.progress-bar {
   height: 100%;
   background: linear-gradient(90deg, var(--saffron), #fff, var(--green));
   border-radius: 99px
}

.progress-copy {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   font-size: 13px;
   color: #d9eef0
}

.stat-card {
   padding: 30px;
   border-top: 1px solid rgba(6, 20, 29, .16)
}

.stat-card strong {
   font-family: 'Bebas Neue';
   font-size: 54px;
   display: block;
   color: #0b6f86
}

.ocean-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 10px
}

.ocean-pill {
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 18px 14px;
   min-height: 150px;
   background: rgba(255, 255, 255, .03);
   transition: .25s
}

.ocean-pill:hover {
   transform: translateY(-5px);
   background: rgba(17, 182, 206, .08)
}

.ocean-pill b {
   display: block;
   font-size: 15px
}

.ocean-pill span {
   display: block;
   font-size: 11px;
   color: var(--muted);
   margin-top: 7px
}

.status {
   display: inline-flex !important;
   width: auto;
   border: 1px solid rgba(255, 255, 255, .18);
   padding: 5px 8px;
   border-radius: 99px;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 9px !important;
   margin-top: 16px !important
}

.status.completed {
   background: #0c7a42;
   color: #fff
}

.update-card {
   border-radius: 26px;
   overflow: hidden;
   background: #0a2230;
   border: 1px solid var(--line)
}

.update-card .media {
   aspect-ratio: 16/10;
   overflow: hidden
}

.update-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .5s
}

.update-card:hover img {
   transform: scale(1.04)
}

.update-card .content {
   padding: 24px
}

.tag {
   display: inline-flex;
   padding: 5px 9px;
   border-radius: 99px;
   background: rgba(17, 182, 206, .13);
   color: #9debf3;
   font-size: 10px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1px
}

.page-hero {
   padding: 170px 0 88px;
   background: radial-gradient(circle at 82% 10%, rgba(17, 182, 206, .14), transparent 30%), linear-gradient(180deg, #081f2d, #06141d)
}

.page-hero h1 {
   font-size: clamp(60px, 8vw, 110px);
   max-width: 900px;
   margin-bottom: 18px
}

.breadcrumbs {
   font-size: 12px;
   color: var(--muted);
   margin-bottom: 26px
}

.timeline {
   position: relative;
   padding-left: 35px
}

.timeline:before {
   content: "";
   position: absolute;
   left: 7px;
   top: 5px;
   bottom: 0;
   width: 1px;
   background: rgba(255, 255, 255, .18)
}

.timeline-item {
   position: relative;
   padding: 0 0 42px 25px
}

.timeline-item:before {
   content: "";
   position: absolute;
   left: -34px;
   top: 4px;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 0 8px rgba(17, 182, 206, .1)
}

.journey-row {
   display: grid;
   grid-template-columns: 54px 1.5fr 1fr .7fr;
   gap: 20px;
   align-items: center;
   padding: 24px 0;
   border-bottom: 1px solid var(--line)
}

.journey-row .index {
   font-family: 'Bebas Neue';
   font-size: 32px;
   color: #5c7a89
}

.map-panel {
   min-height: 530px;
   border-radius: 32px;
   border: 1px solid var(--line);
   background: radial-gradient(circle at 50% 45%, rgba(19, 136, 8, .1), transparent 22%), radial-gradient(circle at 22% 36%, rgba(255, 153, 51, .13), transparent 18%), linear-gradient(145deg, #0d3042, #081b28);
   position: relative;
   overflow: hidden
}

.map-panel:before {
   content: "WORLD OCEAN ROUTE";
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-family: 'Bebas Neue';
   font-size: clamp(44px, 7vw, 110px);
   color: rgba(255, 255, 255, .055);
   letter-spacing: 5px
}

.map-dot {
   position: absolute;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 0 8px rgba(17, 182, 206, .14)
}

.map-dot:after {
   content: attr(data-name);
   position: absolute;
   left: 18px;
   top: -3px;
   white-space: nowrap;
   font-size: 11px;
   font-weight: 700
}

.donation-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.amount-card {
   cursor: pointer;
   padding: 25px;
   border-radius: 20px;
   border: 1px solid var(--line);
   background: rgba(255, 255, 255, .03);
   transition: .2s
}

.amount-card:hover,
.amount-card.selected {
   background: rgba(17, 182, 206, .11);
   border-color: var(--cyan)
}

.amount-card strong {
   font-family: 'Bebas Neue';
   font-size: 38px;
   display: block
}

.form-card {
   background: #fff;
   color: #13232c;
   border-radius: 28px;
   padding: 34px
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.field {
   display: flex;
   flex-direction: column;
   gap: 7px
}

.field.full {
   grid-column: 1/-1
}

.field label {
   font-size: 12px;
   font-weight: 800
}

.field input,
.field select,
.field textarea {
   width: 100%;
   border: 1px solid #d9e0e4;
   background: #f8fbfc;
   border-radius: 13px;
   padding: 14px 15px;
   font: inherit;
   color: #12222b
}

.field textarea {
   min-height: 130px;
   resize: vertical
}

.notice {
   border-left: 3px solid var(--cyan);
   padding: 13px 15px;
   background: rgba(17, 182, 206, .08);
   font-size: 13px
}

.cta-panel {
   border-radius: 36px;
   padding: 70px;
   background: linear-gradient(135deg, rgba(17, 182, 206, .94), rgba(5, 56, 79, .94)), url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1600&q=80') center/cover
}

.cta-panel h2 {
   max-width: 760px
}

.site-footer {
   padding: 78px 0 24px;
   background: #031018;
   border-top: 1px solid var(--line)
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.7fr .8fr .8fr 1fr;
   gap: 50px
}

.footer-brand img {
   width: 150px
}

.site-footer p {
   color: var(--muted);
   max-width: 330px
}

.site-footer h4 {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1.7px
}

.site-footer a {
   display: block;
   color: #a9bbc5;
   margin: 8px 0;
   font-size: 14px
}

.footer-statement {
   font-family: 'Bebas Neue';
   font-size: 28px;
   line-height: 1.05
}

.footer-statement em {
   color: var(--cyan);
   font-style: normal
}

.footer-bottom {
   border-top: 1px solid var(--line);
   margin-top: 50px;
   padding-top: 20px;
   display: flex;
   justify-content: space-between;
   color: #68808e;
   font-size: 11px
}

.floating-donate {
   display: none
}

.admin-shell {
   min-height: 100vh;
   background: #eef3f5;
   color: #17252d;
   padding: 40px
}

.admin-wrap {
   max-width: 1100px;
   margin: auto
}

.admin-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px
}

.admin-card {
   background: #fff;
   border-radius: 20px;
   padding: 25px;
   box-shadow: 0 20px 60px rgba(20, 40, 50, .08);
   margin-bottom: 22px
}

.admin-card table {
   width: 100%;
   border-collapse: collapse
}

.admin-card th,
.admin-card td {
   padding: 13px;
   border-bottom: 1px solid #edf1f2;
   text-align: left;
   font-size: 13px
}

.admin-card input,
.admin-card select,
.admin-card textarea {
   width: 100%;
   padding: 10px;
   border: 1px solid #d6e0e4;
   border-radius: 10px
}

.admin-btn {
   border: 0;
   background: #0b7e96;
   color: #fff;
   border-radius: 10px;
   padding: 10px 15px;
   font-weight: 700;
   cursor: pointer
}

[data-reveal] {
   opacity: 0;
   transform: translateY(24px);
   transition: .75s ease
}

[data-reveal].in-view {
   opacity: 1;
   transform: none
}

@media(max-width:1050px) {
   .main-nav {
      gap: 13px;
      font-size: 12px
   }

   .ocean-grid {
      grid-template-columns: repeat(4, 1fr)
   }

   .grid-4 {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:860px) {
   .menu-toggle {
      display: block;
      z-index: 1002
   }

   .main-nav {
      position: fixed;
      inset: 0 0 0 20%;
      background: #061721;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 110px 30px 30px;
      gap: 20px;
      transform: translateX(100%);
      transition: .35s;
      z-index: 1001;
      font-size: 17px
   }

   .main-nav.open {
      transform: none
   }

   .nav-donate {
      margin-top: 10px
   }

   .grid-2 {
      grid-template-columns: 1fr;
      gap: 38px
   }

   .grid-3 {
      grid-template-columns: 1fr 1fr
   }

   .section {
      padding: 80px 0
   }

   .section-head {
      display: block
   }

   .campaign-strip {
      grid-template-columns: 1fr
   }

   .journey-row {
      grid-template-columns: 40px 1fr
   }

   .journey-row>div:nth-child(3),
   .journey-row>div:nth-child(4) {
      grid-column: 2
   }

   .donation-grid {
      grid-template-columns: 1fr 1fr
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .hero {
      min-height: 820px
   }

   .hero-meta {
      gap: 24px
   }

   .floating-donate {
      display: flex;
      position: fixed;
      z-index: 999;
      bottom: 18px;
      right: 18px;
      background: var(--saffron);
      color: #1b1206;
      border-radius: 999px;
      padding: 13px 18px;
      font-weight: 900;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
   }
}

@media(max-width:600px) {
   .container {
      width: min(100% - 26px, 1180px)
   }

   .nav-wrap {
      height: 74px
   }

   .brand img {
      width: 86px
   }

   .brand-campaign {
      font-size: 16px
   }

   .brand-divider {
      height: 28px
   }

   .hero {
      padding: 130px 0 55px;
      min-height: 760px;
      background-position: 60% center
   }

   .hero h1 {
      font-size: 65px
   }

   .hero-meta strong {
      font-size: 28px
   }

   .hero-meta span {
      font-size: 9px
   }

   .section {
      padding: 68px 0
   }

   .grid-3,
   .grid-4,
   .donation-grid,
   .form-grid,
   .footer-grid {
      grid-template-columns: 1fr
   }

   .ocean-grid {
      grid-template-columns: 1fr 1fr
   }

   .image-frame {
      min-height: 430px
   }

   .campaign-strip {
      padding: 30px 24px
   }

   .campaign-strip h3 {
      font-size: 38px
   }

   .cta-panel {
      padding: 45px 25px
   }

   .page-hero {
      padding: 130px 0 60px
   }

   .footer-bottom {
      display: block
   }

   .footer-bottom span {
      display: block;
      margin: 4px 0
   }

   .main-nav {
      left: 7%
   }
}

/* ===== Home page v2: wireframe-aligned campaign experience ===== */
.hero-video {
   background: #05141f;
   overflow: hidden
}

.hero-media,
.hero-shade {
   position: absolute;
   inset: 0
}

.hero-media video {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hero-shade {
   background: linear-gradient(90deg, rgba(3, 17, 26, .96) 0%, rgba(3, 17, 26, .72) 43%, rgba(3, 17, 26, .25) 75%), linear-gradient(0deg, rgba(3, 17, 26, .92), transparent 48%)
}

.scroll-cue {
   position: absolute;
   z-index: 3;
   right: 38px;
   bottom: 34px;
   display: flex;
   align-items: center;
   gap: 12px;
   text-transform: uppercase;
   letter-spacing: 1.8px;
   font-size: 10px;
   color: #c6d6dc
}

.scroll-cue span {
   font-size: 20px
}

.section-links {
   display: grid;
   margin-top: 34px;
   border-top: 1px solid var(--line)
}

.section-links a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 0;
   border-bottom: 1px solid var(--line);
   font-size: 13px;
   font-weight: 800
}

.section-links a:hover {
   color: var(--cyan)
}

.cinematic-frame .frame-caption {
   position: absolute;
   z-index: 2;
   left: 28px;
   bottom: 26px
}

.frame-caption b,
.frame-caption span {
   display: block
}

.frame-caption b {
   font-family: 'Bebas Neue';
   font-size: 34px
}

.frame-caption span {
   font-size: 12px;
   color: #d7e3e7
}

.split-feature {
   display: grid;
   grid-template-columns: .92fr 1.08fr;
   gap: 85px;
   align-items: center
}

.portrait-panel {
   position: relative;
   min-height: 640px;
   border-radius: 32px;
   overflow: hidden
}

.portrait-panel img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.portrait-number {
   position: absolute;
   right: 18px;
   bottom: -12px;
   font-family: 'Bebas Neue';
   font-size: 130px;
   line-height: 1;
   color: rgba(255, 255, 255, .72)
}

.feature-copy {
   max-width: 590px
}

.eyebrow.dark {
   color: #0a7189
}

.eyebrow.dark:before {
   background: #0a7189
}

.dark-lead {
   color: #4c626e
}

.btn-dark {
   background: #071d2b;
   color: #fff
}

.btn-dark:hover {
   background: #0a3146;
   transform: translateY(-2px)
}

.mini-points {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;
   margin: 34px 0
}

.mini-points div {
   padding-top: 15px;
   border-top: 1px solid rgba(6, 20, 29, .16)
}

.mini-points strong,
.mini-points span {
   display: block
}

.mini-points strong {
   font-size: 13px
}

.mini-points span {
   font-size: 11px;
   color: #6c7f89;
   margin-top: 5px
}

.home-seven .ocean-pill {
   min-height: 190px;
   display: flex;
   flex-direction: column
}

.ocean-index {
   font-family: 'Bebas Neue';
   font-size: 26px !important;
   color: #456877 !important;
   margin: 0 0 28px !important
}

.home-seven .status {
   margin-top: auto !important
}

.center-action {
   text-align: center;
   margin-top: 34px
}

.challenge-section {
   background: #edf4f4;
   color: #0d212b
}

.challenge-intro {
   display: grid;
   grid-template-columns: .65fr 1fr 1fr;
   gap: 45px;
   align-items: start
}

.challenge-intro h2 {
   margin: 0
}

.challenge-intro p {
   color: #57707c;
   max-width: 530px
}

.challenge-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 65px;
   border-top: 1px solid rgba(6, 20, 29, .15)
}

.challenge-stat {
   padding: 30px 24px 0 0
}

.challenge-stat strong {
   display: block;
   font-family: 'Bebas Neue';
   font-size: 64px;
   line-height: 1;
   color: #0a7189
}

.challenge-stat span {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   color: #61757f
}

.campaign-home {
   background: radial-gradient(circle at 80% 20%, rgba(17, 182, 206, .18), transparent 26%), #04141f
}

.campaign-stage {
   display: grid;
   grid-template-columns: 1.25fr .75fr;
   border: 1px solid var(--line);
   border-radius: 36px;
   overflow: hidden;
   background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015))
}

.campaign-big-copy {
   padding: 65px
}

.campaign-big-copy h2 {
   font-size: clamp(58px, 7vw, 100px);
   margin-bottom: 24px
}

.campaign-big-copy p {
   max-width: 620px;
   color: #b6c9d1
}

.campaign-goal {
   padding: 60px 46px;
   background: linear-gradient(155deg, #0d6d84, #08445a);
   display: flex;
   flex-direction: column;
   justify-content: center
}

.campaign-goal>span {
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 11px
}

.campaign-goal strong {
   font-family: 'Bebas Neue';
   font-size: 112px;
   line-height: .95;
   margin-top: 24px
}

.campaign-goal b {
   font-family: 'Bebas Neue';
   font-size: 46px;
   letter-spacing: 3px
}

.campaign-goal .progress-track {
   margin-top: 28px
}

.campaign-goal>a {
   margin-top: 28px;
   font-size: 13px;
   font-weight: 800
}

.fund-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.fund-item {
   padding: 28px 24px;
   border: 1px solid rgba(6, 20, 29, .13);
   border-radius: 22px;
   background: rgba(255, 255, 255, .42)
}

.fund-item>span {
   font-family: 'Bebas Neue';
   font-size: 26px;
   color: #0a7189
}

.fund-item h3 {
   margin: 36px 0 10px
}

.fund-item p {
   font-size: 13px;
   color: #61747d;
   margin: 0
}

.journey-visual-grid {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   grid-template-rows: repeat(2, 280px);
   gap: 18px
}

.journey-visual {
   position: relative;
   overflow: hidden;
   border-radius: 28px
}

.journey-visual.large {
   grid-row: 1/3
}

.journey-visual img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .6s
}

.journey-visual:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(3, 16, 24, .9), transparent 65%)
}

.journey-visual>div {
   position: absolute;
   z-index: 2;
   left: 28px;
   right: 28px;
   bottom: 24px
}

.journey-visual span {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: #b7eaf0
}

.journey-visual h3 {
   font-family: 'Bebas Neue';
   font-size: 34px;
   margin: 6px 0 0
}

.journey-visual:hover img {
   transform: scale(1.045)
}

.foundation-band {
   background: linear-gradient(120deg, #0b7188, #063148);
   padding: 80px 0
}

.foundation-inner {
   display: grid;
   grid-template-columns: .75fr 1fr 1fr;
   align-items: center;
   gap: 55px
}

.foundation-logo {
   background: #fff;
   border-radius: 26px;
   padding: 30px;
   display: flex;
   align-items: center;
   justify-content: center
}

.foundation-logo img {
   max-width: 250px
}

.foundation-inner h2 {
   margin: 10px 0 0
}

.foundation-inner p {
   color: #d4e5e9;
   max-width: 420px
}

.partner-strip {
   display: grid;
   grid-template-columns: 1.15fr repeat(3, 1fr);
   gap: 14px
}

.partner-logo-card,
.partner-open {
   min-height: 200px;
   border: 1px solid rgba(6, 20, 29, .14);
   border-radius: 22px;
   padding: 26px;
   background: #fff
}

.partner-logo-card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center
}

.partner-logo-card img {
   max-width: 190px
}

.partner-logo-card span {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: #6a7b82;
   margin-top: 16px
}

.partner-open {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end
}

.partner-open b {
   font-size: 15px
}

.partner-open span {
   font-size: 11px;
   color: #70838c;
   margin-top: 5px
}

.partner-open i {
   position: absolute;
   right: 20px;
   top: 15px;
   font-style: normal;
   font-size: 28px;
   color: #0a7189
}

.partner-open:hover {
   border-color: #0a7189
}

.update-date {
   font-size: 12px;
   margin: 10px 0 5px
}

.update-card .content>a {
   font-size: 12px;
   font-weight: 800;
   color: #b9eef4
}

.story-change {
   min-height: 680px;
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden
}

.story-change-media,
.story-change-shade {
   position: absolute;
   inset: 0
}

.story-change-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.story-change-shade {
   background: linear-gradient(90deg, rgba(3, 15, 23, .95), rgba(3, 15, 23, .62) 52%, rgba(3, 15, 23, .2))
}

.story-change-copy {
   position: relative;
   z-index: 2
}

.story-change-copy h2 {
   max-width: 900px;
   font-size: clamp(54px, 7vw, 100px)
}

@media(max-width:1050px) {
   .challenge-intro {
      grid-template-columns: 1fr 1fr
   }

   .challenge-intro .eyebrow {
      grid-column: 1/-1
   }

   .fund-grid,
   .partner-strip {
      grid-template-columns: repeat(2, 1fr)
   }

   .campaign-stage {
      grid-template-columns: 1fr
   }

   .campaign-goal {
      min-height: 380px
   }

   .foundation-inner {
      grid-template-columns: 1fr 1fr
   }

   .foundation-inner p {
      grid-column: 2
   }

   .split-feature {
      gap: 45px
   }
}

@media(max-width:860px) {
   .split-feature {
      grid-template-columns: 1fr
   }

   .portrait-panel {
      min-height: 560px
   }

   .challenge-stats {
      grid-template-columns: repeat(2, 1fr)
   }

   .journey-visual-grid {
      grid-template-columns: 1fr;
      grid-template-rows: 460px 250px 250px
   }

   .journey-visual.large {
      grid-row: auto
   }

   .foundation-inner {
      grid-template-columns: 1fr
   }

   .foundation-inner p {
      grid-column: auto
   }

   .foundation-logo {
      max-width: 360px
   }

   .scroll-cue {
      display: none
   }

   .campaign-big-copy {
      padding: 45px 34px
   }

   .campaign-goal {
      padding: 44px 34px
   }

   .campaign-goal strong {
      font-size: 90px
   }
}

@media(max-width:600px) {
   .hero-video {
      min-height: 800px
   }

   .hero-media video {
      display: none
   }

   .hero-media {
      background: url('../img/campaign/hero-poster.jpg') center/cover no-repeat
   }

   .hero-content .lead {
      font-size: 16px
   }

   .mini-points,
   .challenge-intro,
   .fund-grid,
   .partner-strip {
      grid-template-columns: 1fr
   }

   .challenge-stats {
      grid-template-columns: 1fr 1fr
   }

   .challenge-stat strong {
      font-size: 50px
   }

   .portrait-panel {
      min-height: 480px
   }

   .portrait-number {
      font-size: 90px
   }

   .campaign-big-copy,
   .campaign-goal {
      padding: 34px 24px
   }

   .campaign-goal strong {
      font-size: 76px
   }

   .campaign-goal b {
      font-size: 34px
   }

   .journey-visual-grid {
      grid-template-rows: 390px 220px 220px
   }

   .story-change {
      min-height: 620px
   }

   .foundation-logo {
      max-width: none
   }
}


/* ===== Campaign media + concept-note content ===== */
.profile-facts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 24px;
   margin: 28px 0 34px;
   border-top: 1px solid var(--line)
}

.profile-facts>div {
   padding: 16px 0;
   border-bottom: 1px solid var(--line)
}

.profile-facts span,
.profile-facts strong {
   display: block
}

.profile-facts span {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--muted);
   margin-bottom: 5px
}

.profile-facts strong {
   font-size: 15px
}

.campaign-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
}

.campaign-metrics .stat-card {
   border: 1px solid var(--line);
   border-radius: 24px;
   background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
   padding: 34px
}

.campaign-metrics .stat-card strong {
   color: #fff;
   font-size: 64px
}

.campaign-metrics .stat-card span {
   color: var(--muted);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 1.2px
}

.campaign-links span {
   display: block;
   padding: 15px 0;
   border-bottom: 1px solid rgba(6, 20, 29, .14);
   font-size: 13px;
   font-weight: 800;
   color: #405660
}

.video-showcase {
   display: grid;
   grid-template-columns: 1.4fr .8fr .8fr;
   gap: 18px;
   align-items: stretch
}

.video-card {
   border-radius: 26px;
   overflow: hidden;
   background: #081c28;
   border: 1px solid rgba(6, 20, 29, .12);
   box-shadow: 0 20px 50px rgba(0, 0, 0, .12)
}

.video-card video {
   width: 100%;
   height: 460px;
   display: block;
   object-fit: cover;
   background: #000
}

.video-card.portrait video {
   object-fit: cover
}

.video-card>div {
   padding: 20px 22px
}

.video-card>div span {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.8px;
   color: #59c8d8
}

.video-card>div h3 {
   margin: 6px 0 0;
   color: #fff
}

.section-light .video-card {
   background: #071d2b
}

.compact-story {
   min-height: 560px
}

@media(max-width:900px) {
   .campaign-metrics {
      grid-template-columns: 1fr 1fr
   }

   .video-showcase {
      grid-template-columns: 1fr 1fr
   }

   .video-card.landscape {
      grid-column: 1/-1
   }

   .video-card video {
      height: 390px
   }
}

@media(max-width:600px) {

   .profile-facts,
   .campaign-metrics,
   .video-showcase {
      grid-template-columns: 1fr
   }

   .video-card.landscape {
      grid-column: auto
   }

   .video-card video {
      height: 360px
   }

   .hero-media video {
      display: block
   }

   .hero-media video {
      object-position: 57% center
   }

   .campaign-metrics .stat-card strong {
      font-size: 52px
   }
}

/* =========================================================
   V6 CLIENT FRAME UPDATES
========================================================= */
.home-mission {
   position: relative;
   overflow: hidden;
   background: linear-gradient(180deg, #06141d 0%, #071b28 68%, #0a3146 100%)
}

.home-mission:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 150px;
   pointer-events: none;
   background: linear-gradient(180deg, transparent, rgba(17, 182, 206, .10));
}

.home-mission>.container {
   position: relative;
   z-index: 1
}

.mission-video-frame {
   position: relative;
   min-height: 560px;
   border-radius: 34px;
   overflow: hidden;
   box-shadow: var(--shadow);
   background: #04131d
}

.mission-video-frame video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.mission-video-frame:after {
   content: "";
   position: absolute;
   inset: auto 0 0;
   height: 32%;
   background: linear-gradient(0deg, rgba(5, 20, 29, .28), transparent);
   pointer-events: none
}

.mission-video-control {
   position: absolute;
   z-index: 3;
   right: 18px;
   bottom: 18px;
   border: 1px solid rgba(255, 255, 255, .26);
   background: rgba(3, 20, 29, .62);
   backdrop-filter: blur(10px);
   color: #fff;
   border-radius: 999px;
   padding: 8px 13px;
   font: 700 10px Manrope;
   letter-spacing: .8px;
   text-transform: uppercase;
   cursor: pointer
}

.clean-portrait:after {
   display: none !important
}

.clean-portrait img {
   filter: none !important
}

.home-kamya .feature-copy {
   padding-block: 18px
}

.home-kamya .feature-copy .btn {
   margin-top: 18px
}

/* Interactive 7 Seas roadmap */
.seven-roadmap {
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
   border: 1px solid var(--line);
   border-radius: 34px;
   overflow: hidden;
   background: linear-gradient(145deg, #0b2939, #061824);
   box-shadow: 0 28px 70px rgba(0, 0, 0, .2)
}

.roadmap-viewport {
   position: relative;
   min-width: 0;
   overflow: auto hidden;
   cursor: grab;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
   touch-action: pan-y
}

.roadmap-viewport::-webkit-scrollbar {
   display: none
}

.roadmap-viewport.dragging {
   cursor: grabbing;
   user-select: none
}

.roadmap-canvas {
   position: relative;
   width: max(95%, 750px);
   min-height: 500px;
   background: radial-gradient(circle at 16% 35%, rgba(255, 153, 51, .08), transparent 18%), radial-gradient(circle at 82% 40%, rgba(17, 182, 206, .13), transparent 20%), linear-gradient(180deg, rgba(255, 255, 255, .018), transparent)
}

.roadmap-canvas:before {
   content: "7 SEAS";
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-family: 'Bebas Neue';
   font-size: clamp(90px, 13vw, 190px);
   letter-spacing: 8px;
   color: rgba(255, 255, 255, .025);
   pointer-events: none
}

.roadmap-line {
   position: absolute;
   inset: 70px 35px 55px;
   width: calc(100% - 70px);
   height: calc(100% - 125px);
   overflow: visible;
   pointer-events: none
}

.roadmap-line-base,
.roadmap-line-glow {
   fill: none;
   vector-effect: non-scaling-stroke;
   stroke-linecap: round
}

.roadmap-line-base {
   stroke: rgba(255, 255, 255, .17);
   stroke-width: 2;
   stroke-dasharray: 6 8
}

.roadmap-line-glow {
   stroke: rgba(17, 182, 206, .5);
   stroke-width: 1;
   filter: drop-shadow(0 0 5px rgba(17, 182, 206, .5));
   stroke-dasharray: 1 18
}

.roadmap-pin {
   position: absolute;
   z-index: 4;
   transform: translate(-50%, -50%);
   border: 0;
   background: none;
   color: #fff;
   padding: 0;
   cursor: pointer;
   text-align: center
}

.pin-icon {
   position: relative;
   z-index: 2;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   margin: auto;
   background: #0c7189;
   border: 4px solid #fff;
   color: #fff;
   font-size: 17px;
   box-shadow: 0 0 0 8px rgba(17, 182, 206, .10), 0 12px 28px rgba(0, 0, 0, .25);
   transition: .25s
}

.pin-ripple {
   position: absolute;
   left: 50%;
   top: 21px;
   width: 42px;
   height: 42px;
   border: 1px solid rgba(17, 182, 206, .55);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   opacity: 0
}

.roadmap-pin:hover .pin-icon,
.roadmap-pin.active .pin-icon {
   transform: translateY(-4px) scale(1.08);
   background: var(--cyan);
   box-shadow: 0 0 0 9px rgba(17, 182, 206, .13), 0 14px 32px rgba(0, 0, 0, .28)
}

.roadmap-pin.active .pin-ripple {
   animation: roadmapPulse 1.8s ease-out infinite
}

.pin-label {
   display: block;
   position: absolute;
   left: 90%;
   top: 52px;
   transform: translateX(-50%);
   min-width: max-content;
   max-width: 170px;
   padding: 6px 9px;
   border: 1px solid rgba(255, 255, 255, .13);
   border-radius: 9px;
   background: rgba(4, 23, 33, .88);
   backdrop-filter: blur(9px);
   font-size: 10px;
   font-weight: 800;
   line-height: 1.2;
   white-space: nowrap;
   transition: .25s
}

.roadmap-pin:hover .pin-label,
.roadmap-pin.active .pin-label {
   border-color: rgba(17, 182, 206, .55);
   color: #b9eef4
}

@keyframes roadmapPulse {
   0% {
      opacity: .8;
      transform: translate(-50%, -50%) scale(.7)
   }

   100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2.1)
   }
}

.roadmap-detail {
   background: #f2eee5;
   color: #102029;
   display: flex;
   flex-direction: column;
   min-height: 500px
}

.roadmap-detail-media {
   position: relative;
   min-height: 235px;
   overflow: hidden
}

.roadmap-detail-media img {
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   object-fit: cover;
   transition: .45s
}

.roadmap-detail-media:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(5, 20, 29, .55), transparent 55%)
}

.roadmap-status {
   position: absolute;
   z-index: 2;
   left: 18px;
   bottom: 16px;
   display: inline-flex;
   padding: 6px 9px;
   border-radius: 999px;
   background: #087f61;
   color: #fff;
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 1px;
   text-transform: uppercase
}

.roadmap-detail-copy {
   padding: 28px
}

.roadmap-detail-copy h3 {
   font-family: 'Bebas Neue';
   font-size: 38px;
   margin: 9px 0 5px
}

.roadmap-detail-copy .eyebrow {
   color: #0a7189
}

.roadmap-detail-copy .eyebrow:before {
   background: #0a7189
}

.roadmap-location {
   display: flex;
   gap: 6px;
   align-items: center;
   color: #61747d;
   font-size: 12px
}

.roadmap-facts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin: 20px 0
}

.roadmap-facts>div {
   padding: 12px;
   border-top: 1px solid rgba(6, 20, 29, .14)
}

.roadmap-facts small,
.roadmap-facts strong {
   display: block
}

.roadmap-facts small {
   text-transform: uppercase;
   letter-spacing: 1.2px;
   font-size: 8px;
   color: #6e8088
}

.roadmap-facts strong {
   font-size: 11px;
   margin-top: 5px
}

.roadmap-detail-copy>.muted {
   font-size: 12px;
   line-height: 1.55;
   color: #61747d
}

.roadmap-more {
   display: inline-flex;
   margin-top: 10px;
   font-size: 12px;
   font-weight: 800;
   color: #0a7189
}

.roadmap-hint {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   color: #7f9aa7;
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   margin-top: 16px
}

.roadmap-hint span {
   color: var(--cyan);
   font-size: 18px
}

@media(max-width:980px) {
   .seven-roadmap {
      grid-template-columns: 1fr
   }

   .roadmap-detail {
      min-height: 0;
      display: grid;
      grid-template-columns: .9fr 1.1fr
   }

   .roadmap-detail-media {
      min-height: 310px
   }

   .roadmap-canvas {
      min-height: 440px
   }

   .mission-video-frame {
      min-height: 480px
   }
}

@media(max-width:600px) {
   .home-mission:after {
      height: 95px
   }

   .mission-video-frame {
      min-height: 390px;
      border-radius: 24px
   }

   .seven-roadmap {
      border-radius: 24px
   }

   .roadmap-canvas {
      width: 900px;
      min-height: 390px
   }

   .roadmap-line {
      inset: 50px 32px 40px;
      height: calc(100% - 90px)
   }

   .pin-icon {
      width: 34px;
      height: 34px;
      border-width: 3px;
      font-size: 14px
   }

   .pin-label {
      top: 43px;
      font-size: 9px;
      padding: 5px 7px
   }

   .roadmap-detail {
      display: block
   }

   .roadmap-detail-media {
      min-height: 230px
   }

   .roadmap-detail-copy {
      padding: 22px
   }

   .roadmap-detail-copy h3 {
      font-size: 32px
   }

   .roadmap-facts {
      margin: 15px 0
   }

   .roadmap-hint {
      font-size: 8px;
      letter-spacing: .8px;
      text-align: center
   }
}