:root{
  --white:#ffffff;
  --ink:#163046;
  --deep:#0d2739;
  --teal:#4fae63;
  --teal-dark:#2f6b43;
  --mist:#f4fbfd;
  --line:#d9e8ee;
  --soft:#69808f;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

.loading-popup{
  position:fixed;
  inset:0;
  z-index:140;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.98);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}
.loading-popup.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.loading-popup-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:rgba(10,42,64,0.94);
  color:var(--white);
  box-shadow:0 18px 40px -20px rgba(10,42,64,0.45);
}
.loading-spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color:var(--white);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.loading-popup span{
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  font-weight:700;
}
@keyframes spin{to{transform:rotate(360deg);}}

.topbar{
  border-bottom:1px solid #edf3f6;
  background:#fff;
}
.topbar-inner{
  max-width:1440px;
  margin:0 auto;
  min-height:38px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:#586f7e;
}
.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.topbar-item{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.topbar-item svg{
  width:14px;
  height:14px;
  color:#6f8795;
}

.main-nav{
  background:#fff;
  position:relative;
  z-index:20;
  box-shadow:0 1px 0 rgba(217,232,238,0.75);
}
.main-nav-inner{
  max-width:1440px;
  margin:0 auto;
  min-height:80px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:32px;
}
.logo-badge{
  flex-shrink:0;
  min-height:78px;
  padding:10px 0;
  display:flex;
  align-items:center;
}
.logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.logo img{
  height:62px;
  width:auto;
}
.logo span{ display:none; }
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  list-style:none;
  margin-left:4px;
}
.nav-links a{
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:#445867;
}
.nav-links a:hover{color:var(--teal-dark);}
.nav-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #d8e8ee;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#637987;
  background:#fff;
}
.nav-icon svg{
  width:18px;
  height:18px;
}
.quote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:198px;
  padding:16px 28px;
  border-radius:30px;
  background:#3d6871;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}
.quote-btn svg{
  width:18px;
  height:18px;
}

.hero{
  position:relative;
  min-height:720px;
  background:
    linear-gradient(rgba(8,33,46,0.34), rgba(8,33,46,0.24)),
    url('surf-hero.jpg') center/cover no-repeat;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(6,30,42,0.35) 0%, rgba(6,30,42,0.08) 48%, rgba(6,30,42,0.22) 100%);
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  padding:160px 20px 180px;
}
.hero-copy{
  max-width:640px;
  margin-left:90px;
  color:#fff;
}
.hero-kicker{
  font-family:'Dancing Script', cursive;
  font-size:32px;
  line-height:1;
  margin-bottom:14px;
}
.hero h1{
  font-size:clamp(56px, 6vw, 86px);
  line-height:1.03;
  font-weight:800;
  letter-spacing:-2px;
}
.hero-actions{
  margin-top:36px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:176px;
  padding:18px 28px;
  border-radius:32px;
  text-decoration:none;
  font-size:16px;
  font-weight:700;
}
.hero-btn-primary{
  background:var(--teal);
  color:#fff;
}
.hero-btn-secondary{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.62);
}
.hero-btn svg{
  width:20px;
  height:20px;
}

.packages-section{
  position:relative;
  padding:110px 20px 110px;
  background:
    radial-gradient(circle at 10px 10px, rgba(88,196,226,0.11) 1.5px, transparent 1.5px) 0 0/52px 52px,
    #fbfeff;
}
.packages-section::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(88,196,226,0.04) 25%, transparent 25%) -24px 0/120px 120px,
    linear-gradient(225deg, rgba(88,196,226,0.04) 25%, transparent 25%) -24px 0/120px 120px;
  opacity:0.65;
}
.packages-inner{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
}
.packages-head{
  display:flex;
  justify-content:center;
  margin-bottom:52px;
}
.packages-heading{
  text-align:center;
}
.section-kicker{
  text-align:center;
  font-family:'Dancing Script', cursive;
  color:#3d7f90;
  font-size:34px;
  line-height:1;
}
.section-title{
  margin-top:8px;
  text-align:center;
  font-family:'Manrope', sans-serif;
  font-size:56px;
  line-height:1.02;
  font-weight:800;
  color:#254859;
  letter-spacing:-1.5px;
}
.package-carousel-wrap{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;
}
.packages-arrow{
  position:relative;
  top:-28px;
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid #bfd6df;
  background:#fff;
  color:#254859;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 16px 36px -26px rgba(23,63,84,0.24);
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.packages-arrow svg{
  width:22px;
  height:22px;
}
.packages-arrow:hover{
  transform:translateY(-2px);
  background:#3d6871;
  color:#fff;
  border-color:#3d6871;
}
.packages-arrow:disabled{
  opacity:0.4;
  cursor:default;
  transform:none;
  background:#fff;
  color:#8ea2ad;
  border-color:#d8e5ea;
}
.packages-arrow-left{
  justify-self:start;
}
.packages-arrow-right{
  justify-self:end;
}
.package-carousel{
  overflow:hidden;
}
.package-track{
  display:flex;
  gap:28px;
  align-items:stretch;
  transition:transform 0.35s ease;
}
.package-card{
  flex:0 0 calc((100% - 140px) / 6);
  text-align:center;
  padding-bottom:12px;
  transition:transform 0.24s ease;
}
.package-card:hover{
  transform:translateY(-6px);
}
.package-card-soon .package-thumb{
  filter:saturate(0.9);
}
.package-thumb{
  display:block;
  width:100%;
  aspect-ratio:0.78;
  object-fit:cover;
  border-radius:26px;
  box-shadow:0 18px 40px -24px rgba(15,61,84,0.2);
  margin-bottom:20px;
}
.package-card h3{
  font-size:16px;
  font-weight:800;
  color:#2b4e60;
  margin-bottom:6px;
}
.package-card a{
  color:#6f8795;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:color 0.2s ease;
}
.package-card a:hover{
  color:#2f6b43;
}

.story{
  max-width:1320px;
  margin:0 auto;
  padding:90px 20px 0;
  display:grid;
  grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap:54px;
  align-items:start;
}
.story-kicker{
  color:#58c4e2;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  font-weight:800;
  margin-bottom:14px;
}
.story h2{
  font-size:40px;
  line-height:1.03;
  font-weight:800;
  color:#233f50;
  letter-spacing:-1.4px;
}
.story-copy p{
  color:#617886;
  line-height:1.9;
  font-size:16px;
  margin-bottom:18px;
}

.plan-section{
  max-width:1320px;
  margin:0 auto;
  padding:96px 20px 0;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap:56px;
  align-items:center;
}
.plan-visual{
  display:grid;
  grid-template-columns:0.9fr 1fr;
  gap:20px;
  align-items:start;
}
.plan-visual-main{
  height:620px;
  border-radius:180px 180px 20px 20px;
  overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(23,63,84,0.28);
}
.plan-visual-main img,
.plan-visual-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.plan-visual-stack{
  display:grid;
  gap:20px;
  padding-top:28px;
}
.plan-visual-card{
  overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(23,63,84,0.22);
}
.plan-visual-card.top{
  height:300px;
  border-radius:160px 160px 24px 24px;
}
.plan-visual-card.bottom{
  height:280px;
  border-radius:24px 24px 160px 160px;
}
.plan-copy{
  position:relative;
  padding-right:18px;
}
.plan-copy::after{
  content:'';
  position:absolute;
  right:-90px;
  bottom:-40px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,174,99,0.12) 0%, rgba(79,174,99,0.04) 55%, transparent 56%);
  pointer-events:none;
}
.plan-script{
  font-family:'Dancing Script', cursive;
  font-size:42px;
  color:#3d7f90;
  line-height:1;
  margin-bottom:8px;
}
.plan-copy h2{
  font-size:58px;
  line-height:1.03;
  font-weight:800;
  color:#2a5361;
  letter-spacing:-1.7px;
  max-width:460px;
}
.plan-copy p{
  margin-top:24px;
  color:#6f838d;
  line-height:1.85;
  font-size:16px;
  max-width:560px;
}
.plan-points{
  margin-top:36px;
  display:grid;
  gap:26px;
}
.plan-point{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  gap:20px;
  align-items:start;
}
.plan-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#58c4e2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 18px 34px -24px rgba(88,196,226,0.8);
}
.plan-icon svg{
  width:28px;
  height:28px;
}
.plan-point h3{
  font-size:20px;
  color:#2a5361;
  margin-bottom:6px;
  font-weight:800;
}
.plan-point p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#7b8d96;
  max-width:360px;
}
.plan-btn{
  margin-top:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:194px;
  padding:18px 28px;
  border-radius:30px;
  background:#3d6871;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}
.plan-btn svg{
  width:18px;
  height:18px;
}

.home-contact{
  padding:110px 20px 0;
}
.home-contact-inner{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap:34px;
  align-items:stretch;
}
.home-contact-panel{
  position:relative;
  overflow:hidden;
  height:100%;
  padding:42px 38px;
  border-radius:34px;
  background:linear-gradient(160deg, #3e7450 0%, #2f6b43 52%, #204d31 100%);
  color:#fff;
  box-shadow:0 30px 60px -34px rgba(27,70,44,0.45);
}
.home-contact-panel::after{
  content:'';
  position:absolute;
  right:-90px;
  bottom:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 56%, transparent 57%);
}
.home-contact-kicker{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
}
.home-contact-panel h2{
  margin-top:14px;
  font-size:42px;
  line-height:1.06;
  letter-spacing:-1.4px;
  font-weight:800;
  max-width:440px;
}
.home-contact-panel p{
  margin-top:18px;
  max-width:420px;
  color:rgba(255,255,255,0.82);
  font-size:15px;
  line-height:1.85;
}
.home-contact-list{
  margin-top:34px;
  display:grid;
  gap:18px;
}
.home-contact-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#fff;
  font-size:14px;
  line-height:1.7;
}
.home-contact-item svg{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:2px;
}
.home-contact-card{
  height:100%;
  padding:38px;
  border:1px solid #dce9ee;
  border-radius:34px;
  background:#fff;
  box-shadow:0 26px 60px -40px rgba(15,61,84,0.22);
}
.home-contact-card-head h3{
  margin-top:10px;
  font-size:34px;
  line-height:1.08;
  letter-spacing:-1px;
  color:#203d4f;
  font-weight:800;
}
.home-contact-form{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 20px;
}
.home-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.home-field label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.3px;
  color:#728896;
  font-weight:800;
}
.home-field input,
.home-field textarea{
  width:100%;
  border:1px solid #d6e5eb;
  border-radius:18px;
  padding:15px 16px;
  font-family:'Manrope', sans-serif;
  font-size:14px;
  color:#183246;
  background:#fbfeff;
  outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.home-field input:focus,
.home-field textarea:focus{
  border-color:#7bc488;
  box-shadow:0 0 0 4px rgba(79,174,99,0.12);
  background:#fff;
}
.home-field textarea{
  min-height:150px;
  resize:vertical;
}
.home-field-full{
  grid-column:1 / -1;
}
.home-submit-row{
  margin-top:2px;
}
.home-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:186px;
  padding:16px 26px;
  border-radius:28px;
  background:#3d6871;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}
.home-submit-btn svg{
  width:18px;
  height:18px;
}

.nav-toggle{
  display:none;
}

@media (max-width: 1150px){
  .main-nav-inner{
    gap:20px;
  }
  .logo-badge{
    width:236px;
  }
  .nav-links{
    gap:20px;
    font-size:14px;
  }
  .package-card{
    flex-basis:calc((100% - 56px) / 3);
  }
  .story{
    grid-template-columns:1fr;
  }
  .plan-section{
    grid-template-columns:1fr;
  }
  .home-contact-inner{
    grid-template-columns:1fr;
  }
}

@media (max-width: 880px){
  .topbar{
    display:none;
  }
  .main-nav-inner{
    min-height:76px;
    padding:0 14px;
    gap:14px;
  }
  .logo-badge{
    min-height:66px;
    padding:8px 0;
  }
  .logo img{
    height:48px;
  }
  .nav-toggle{
    display:inline-flex;
    width:46px;
    height:46px;
    border:1px solid #d8e8ee;
    background:#fff;
    color:#47606d;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin-left:auto;
  }
  .nav-toggle-lines,
  .nav-toggle-lines::before,
  .nav-toggle-lines::after{
    display:block;
    width:18px;
    height:2px;
    background:currentColor;
    transition:transform 0.25s ease;
    content:'';
  }
  .nav-toggle-lines{
    position:relative;
  }
  .nav-toggle-lines::before{position:absolute;top:-6px;}
  .nav-toggle-lines::after{position:absolute;top:6px;}
  .main-nav.nav-open .nav-toggle-lines{background:transparent;}
  .main-nav.nav-open .nav-toggle-lines::before{transform:translateY(6px) rotate(45deg);}
  .main-nav.nav-open .nav-toggle-lines::after{transform:translateY(-6px) rotate(-45deg);}
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:14px;
    right:14px;
    background:#fff;
    border:1px solid #dbe8ed;
    border-radius:18px;
    box-shadow:0 22px 48px -28px rgba(15,61,84,0.26);
    padding:18px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .main-nav.nav-open .nav-links{
    display:flex;
  }
  .nav-actions{
    display:none;
  }
  .hero{
    min-height:auto;
  }
  .hero-inner{
    padding:110px 20px 130px;
  }
  .hero-copy{
    margin-left:0;
    max-width:520px;
  }
  .hero h1{
    font-size:40px;
    letter-spacing:-1.2px;
  }
  .packages-section{
    padding:70px 14px 90px;
  }
  .packages-head{
    margin-bottom:34px;
  }
  .package-carousel-wrap{
    grid-template-columns:1fr;
    gap:0;
  }
  .packages-arrow{
    display:none;
  }
  .section-title{
    font-size:40px;
  }
  .package-carousel{
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
  }
  .package-track{
    gap:20px;
  }
  .package-card{
    flex:0 0 78%;
    scroll-snap-align:start;
  }
  .story{
    padding:74px 14px 0;
    gap:28px;
  }
  .story h2{
    font-size:40px;
  }
  .plan-section{
    padding:74px 14px 0;
    gap:34px;
  }
  .home-contact{
    padding:74px 14px 0;
  }
  .home-contact-panel,
  .home-contact-card{
    padding:32px 26px;
  }
  .plan-visual{
    grid-template-columns:1fr;
    gap:18px;
  }
  .plan-visual-main{
    height:420px;
    border-radius:120px 120px 20px 20px;
  }
  .plan-visual-stack{
    grid-template-columns:1fr 1fr;
    padding-top:0;
  }
  .plan-visual-card.top,
  .plan-visual-card.bottom{
    height:220px;
    border-radius:26px;
  }
  .plan-copy h2{
    font-size:40px;
    max-width:100%;
  }
  .plan-script{
    font-size:32px;
  }
  .home-contact-panel h2{
    font-size:34px;
  }
  .home-contact-card-head h3{
    font-size:28px;
  }
  .home-contact-form{
    grid-template-columns:1fr;
  }
  .plan-copy::after{
    display:none;
  }
  footer{
    padding:50px 24px 30px;
  }
}