:root{
  --blue:#18355d;
  --red:#e4022c;
  --white:#fff;
  --light:#f5f7fb;
  --dark:#10213b;
  --muted:#667085;
  --pink:#963c67;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Verdana,Arial,sans-serif;
  background:var(--light);
  color:var(--dark);
  line-height:1.6;
}

img{max-width:100%}

header{
  background:rgba(16,33,59,.94);
  color:white;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.nav{
  max-width:1240px;
  margin:auto;
  padding:12px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.brand img{height:58px}

nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

nav a{
  color:white;
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
  opacity:.92;
}

nav a:hover{opacity:1;color:#fff}

.hero{
  min-height:calc(100vh - 82px);
  padding:0;
  display:block;
  background:#963c67;
}

.hero-image{
  min-height:calc(100vh - 82px);
  width:100%;
  background:url("assets/constantia-hero.webp") center/cover no-repeat;
  position:relative;
}

.hero-join-link{
  position:absolute;
  left:9.1%;
  top:76%;
  width:16.5%;
  height:6.3%;
  min-width:170px;
  min-height:48px;
  border-radius:14px;
  z-index:5;
}

.hero-join-link:focus-visible{
  outline:4px solid white;
  outline-offset:4px;
}

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

.button{
  padding:14px 24px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.primary{background:white;color:var(--red)}
.secondary{border:2px solid white;color:white}
.red-button{background:var(--red);color:white}

section{padding:78px 24px}
.container{max-width:1200px;margin:auto}

.section-title{
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.08;
  margin:0 0 16px;
  color:var(--blue);
}

.section-intro{
  max-width:780px;
  margin:0 0 34px;
  color:var(--muted);
}

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

.card,.schedule-item,.camp-item,.training-card{
  background:white;
  padding:26px;
  border-radius:24px;
  box-shadow:0 16px 42px rgba(16,33,59,.09);
}

.card{border-top:6px solid var(--red)}
.card h3,.training-card h3{margin-top:0;color:var(--blue)}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:center;
}

.blue-band{
  background:linear-gradient(135deg,var(--blue),#10213b);
  color:white;
}

.blue-band .section-title,.blue-band h2{color:white}
.blue-band p{color:rgba(255,255,255,.86)}

.schedule-list,.camp-details{
  display:grid;
  gap:16px;
}

.schedule-item,.camp-item,.training-card{
  border-left:6px solid var(--red);
  color:var(--dark);
}

.schedule-item strong,
.camp-item strong,
.training-card h3{
  color:var(--blue);
}

.schedule-item,
.camp-item{
  font-size:1.05rem;
  line-height:1.7;
}

.training-section{background:white}

.training-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:32px;
  align-items:start;
}

.training-info{display:grid;gap:16px}

.image-card{
  background:linear-gradient(135deg,var(--blue),#10213b);
  padding:18px;
  border-radius:30px;
  box-shadow:0 20px 50px rgba(16,33,59,.16);
}

.image-card img{
  width:100%;
  display:block;
  border-radius:20px;
}

.poster-card{max-width:520px;justify-self:center}

.camps,.achievement,.event-section{background:#f2f5fa}

.logo-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

.logo-tile{
  background:white;
  padding:22px;
  border-radius:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:130px;
  box-shadow:0 16px 38px rgba(16,33,59,.08);
}

.logo-tile img{
  max-width:100%;
  max-height:76px;
  object-fit:contain;
}

.cta{
  background:
    linear-gradient(135deg,rgba(228,2,44,.92),rgba(24,53,93,.96)),
    url("assets/constantia-hero-optimized.png") center/cover no-repeat;
  color:white;
  text-align:center;
}

.cta h2{
  font-size:clamp(2.2rem,5vw,4rem);
  margin:0 0 12px;
}

.cta p{font-size:1.2rem}
.cta-logo{width:130px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.25))}

footer{
  background:#0d1d35;
  color:white;
  padding:32px 24px;
}

.footer-inner{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

@media(max-width:980px){
  nav{display:none}
  .hero,.hero-image{min-height:62vh}
  .split,.cards,.training-layout,.logo-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:560px){
  .hero-join-link{
    left:8%;
    top:75%;
    width:58%;
  }

  .brand span{font-size:.76rem}
  .brand img{height:48px}
  .hero,.hero-image{min-height:58vh}
  .button{width:100%}
  section{padding:56px 18px}
  .logo-grid{grid-template-columns:1fr}
}


.menu-toggle{
display:none;
background:none;
border:none;
color:white;
font-size:2rem;
cursor:pointer;
}

@media(max-width:980px){

.menu-toggle{
display:block;
}

nav{
position:fixed;
top:72px;
right:0;
width:240px;
height:100vh;
background:#10213b;
flex-direction:column;
padding:24px;
gap:20px;
transform:translateX(100%);
transition:.3s;
z-index:999;
display:flex !important;
}

body.menu-open nav{
transform:translateX(0);
}

.hero,
.hero-image{
min-height:70vh;
background-position:75% center;
}

.hero-join-link{
left:8%;
top:76%;
width:50%;
}

.brand span{
font-size:.8rem;
}

.cards,
.split,
.training-layout,
.logo-grid{
grid-template-columns:1fr;
}

section{
padding:48px 18px;
}
}

@media(max-width:640px){

.hero,
.hero-image{
min-height:60vh;
background-position:78% center;
}

.hero-join-link{
width:58%;
top:77%;
}

.brand img{
height:42px;
}

.brand span{
font-size:.7rem;
}
}


/* Final responsive hero fix: show the complete 16:9 hero on desktop and mobile */
.hero{
  min-height:auto !important;
  padding:0 !important;
  background:#963c67 !important;
  overflow:hidden;
}

.hero-image{
  position:relative !important;
  width:100% !important;
  min-height:0 !important;
  background:none !important;
}

.hero-image img{
  display:block;
  width:100%;
  height:auto;
}

.hero-join-link{
  position:absolute;
  left:8.9%;
  top:79%;
  width:16.5%;
  height:7%;
  min-width:0;
  min-height:0;
  border-radius:14px;
  z-index:5;
}

@media(max-width:980px){
  .hero,
  .hero-image{
    min-height:0 !important;
    background:none !important;
  }

  .hero-join-link{
    left:8.9%;
    top:79%;
    width:16.5%;
    height:7%;
    min-width:0;
    min-height:0;
  }
}

@media(max-width:640px){
  .hero,
  .hero-image{
    min-height:0 !important;
    background:none !important;
  }

  .hero-join-link{
    left:8.9%;
    top:79%;
    width:16.5%;
    height:7%;
    min-width:0;
    min-height:0;
  }
}


/* Final landing-page hero fit: complete image, no vertical overflow */
.hero{
  height:calc(100vh - 72px) !important;
  min-height:520px !important;
  max-height:900px !important;
  padding:0 !important;
  background:#963c67 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.hero-image{
  height:100% !important;
  width:100% !important;
  min-height:0 !important;
  background:#963c67 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
}

.hero-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

@media(max-width:980px){
  .hero{
    height:calc(100vh - 64px) !important;
    min-height:420px !important;
  }
}

@media(max-width:640px){
  .hero{
    height:auto !important;
    min-height:0 !important;
  }

  .hero-image{
    height:auto !important;
  }

  .hero-image img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}


/* Clickable hero CTA button */
.hero-join-link{
  position:absolute !important;
  left:8.9% !important;
  top:78.4% !important;
  width:auto !important;
  height:auto !important;
  min-width:210px !important;
  min-height:54px !important;
  padding:16px 32px !important;
  border-radius:14px !important;
  background:#e42b35 !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font-weight:800 !important;
  font-size:1rem !important;
  letter-spacing:.04em !important;
  z-index:20 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

.hero-join-link:hover{
  background:#c90026 !important;
}

@media(max-width:640px){
  .hero-join-link{
    left:8% !important;
    top:78% !important;
    min-width:135px !important;
    min-height:38px !important;
    padding:10px 16px !important;
    font-size:.72rem !important;
    border-radius:10px !important;
  }
}


/* Final fix: invisible hotspot only, so the baked-in hero button is clickable without showing a duplicate button */
.hero-join-link{
  position:absolute !important;
  left:8.9% !important;
  top:78.4% !important;
  width:16.5% !important;
  height:7% !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-indent:-9999px !important;
  overflow:hidden !important;
  z-index:20 !important;
  display:block !important;
}

.hero-join-link:hover{
  background:transparent !important;
}

.hero-join-link:focus-visible{
  outline:3px solid #fff !important;
  outline-offset:4px !important;
}

@media(max-width:640px){
  .hero-join-link{
    left:8.9% !important;
    top:78.4% !important;
    width:16.5% !important;
    height:7% !important;
  }
}


/* Final mobile navigation refinement */
@media(max-width:980px){
  nav{
    top:66px !important;
    right:12px !important;
    width:min(82vw, 300px) !important;
    height:auto !important;
    max-height:calc(100vh - 90px) !important;
    overflow-y:auto !important;
    background:rgba(16,33,59,.88) !important;
    backdrop-filter:blur(10px) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:0 0 18px 18px !important;
    padding:22px 24px !important;
    gap:14px !important;
    box-shadow:0 18px 45px rgba(0,0,0,.28) !important;
  }

  nav a{
    font-size:1rem !important;
    padding:8px 0 !important;
    line-height:1.25 !important;
  }
}

@media(max-width:480px){
  nav{
    right:10px !important;
    width:72vw !important;
    max-height:calc(100vh - 84px) !important;
    padding:18px 20px !important;
    gap:10px !important;
  }

  nav a{
    font-size:.95rem !important;
  }
}


.camp-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.camp-buttons .button{
  flex:1;
  min-width:280px;
}


/* Final footer credit link */
.footer-credit{
  color:inherit !important;
  text-decoration:none !important;
  transition:opacity .25s ease, text-decoration-color .25s ease !important;
}

.footer-credit:hover{
  opacity:.85 !important;
  text-decoration:underline !important;
}

/* Final hero fix: make the full hero image clickable */
.hero-full-link{
  display:flex !important;
  position:relative !important;
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer !important;
}

.hero-full-link img{
  pointer-events:none !important;
}

.hero-full-link:focus-visible{
  outline:4px solid #fff !important;
  outline-offset:-8px !important;
}

/* Final sponsor layout: six logos on one desktop line */
.logo-grid{
  display:grid !important;
  grid-template-columns:repeat(6,1fr) !important;
  gap:16px !important;
  align-items:center !important;
}

.logo-tile{
  background:white !important;
  padding:16px !important;
  border-radius:22px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:110px !important;
  box-shadow:0 16px 38px rgba(16,33,59,.08) !important;
}

.logo-tile img{
  max-width:90% !important;
  max-height:60px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}

.logo-tile img[alt="Saxo"]{
  max-height:52px !important;
}

@media(max-width:1100px){
  .logo-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

@media(max-width:640px){
  .logo-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:420px){
  .logo-grid{
    grid-template-columns:1fr !important;
  }
}