:root{
  --ocean: #123C3E;
  --ocean-deep: #0B2B2C;
  --sand: #EFE1B8;
  --sand-light: #FAF4E3;
  --coral: #F2603C;
  --foam: #FAF6EE;
  --ink: #1D2B29;
  --ink-soft: #4A5C58;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Work Sans', sans-serif;
  background:var(--foam);
  color:var(--ink);
  line-height:1.6;
}
h1,h2,h3,.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.02em;
  line-height:0.95;
  font-weight:400;
}
.eyebrow{
  font-family:'Work Sans', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.75rem;
  font-weight:600;
  color:var(--coral);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* NAV */
.navbar{
  position:sticky; top:0; z-index:100;
  background:var(--ocean);
  padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.navbar .brand{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6rem;
  color:var(--sand-light);
  padding:0.9rem 0;
  letter-spacing:0.03em;
}
.navbar .brand span{color:var(--coral);}
.navtabs{display:flex; gap:0.3rem;}
.navtabs a{
  background:none; border:none; cursor:pointer;
  font-family:'Work Sans',sans-serif;
  font-size:0.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em;
  color:rgba(250,246,238,0.65);
  padding:1.2rem 0.9rem;
  border-bottom:3px solid transparent;
  transition:color 0.2s, border-color 0.2s;
  display:inline-block;
}
.navtabs a:hover{color:var(--sand-light);}
.navtabs a.active{color:var(--foam); border-bottom-color:var(--coral);}

/* WAVE DIVIDER - signature element, encodes swell pattern of the two beaches */
.wave-divider{width:100%; height:48px; display:block;}
.wave-divider path{fill:none; stroke-width:3;}

.wrap{max-width:1080px; margin:0 auto; padding:0 1.5rem;}

/* HERO */
.hero{
  background:linear-gradient(180deg, var(--ocean) 0%, var(--ocean-deep) 100%);
  color:var(--foam);
  padding:5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:3rem; align-items:center;
}
.hero .eyebrow{color:var(--sand);}
.hero h1{font-size:clamp(3rem, 7vw, 5.2rem); margin:0.4rem 0 1.2rem; color:var(--foam);}
.hero h1 em{font-style:normal; color:var(--coral);}
.hero p.lede{font-size:1.15rem; color:rgba(250,246,238,0.85); max-width:34rem; margin-bottom:2rem;}
.instructor-badge{
  display:inline-flex; align-items:center; gap:0.7rem;
  margin-bottom:1.6rem; text-decoration:none;
}
.instructor-badge img{
  width:92px; height:92px; border-radius:50%; object-fit:cover;
  border:3px solid var(--coral); display:block;
}
.instructor-badge span{font-size:1rem; color:rgba(250,246,238,0.85);}
.instructor-badge span strong{color:var(--foam); font-weight:700;}
.beach-pill{
  display:inline-flex; gap:0.6rem; align-items:center;
  background:rgba(250,246,238,0.08);
  border:1px solid rgba(250,246,238,0.2);
  padding:0.4rem 0.9rem 0.4rem 0.5rem;
  border-radius:999px; font-size:0.85rem; margin-right:0.6rem; margin-bottom:0.6rem;
}
.beach-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--coral);}

.btn{
  display:inline-block;
  background:var(--coral);
  color:var(--foam);
  font-weight:700;
  padding:0.95rem 1.8rem;
  border-radius:4px;
  font-size:0.95rem;
  letter-spacing:0.02em;
  box-shadow:0 6px 20px rgba(242,96,60,0.35);
  transition:transform 0.15s, box-shadow 0.15s;
  border:none; cursor:pointer;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(242,96,60,0.45);}
.btn-ghost{
  background:transparent; border:1.5px solid rgba(250,246,238,0.4); color:var(--foam);
  box-shadow:none;
}
.btn-ghost:hover{border-color:var(--foam); transform:translateY(-2px); box-shadow:none;}

.hero-card{
  background:var(--sand-light);
  border-radius:8px;
  padding:1.8rem;
  color:var(--ink);
  transform:rotate(-2deg);
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.hero-card .num{font-family:'Bebas Neue',sans-serif; font-size:3.2rem; color:var(--ocean); line-height:1;}
.hero-card .label{text-transform:uppercase; font-size:0.7rem; letter-spacing:0.1em; color:var(--ink-soft); font-weight:700;}
.hero-card hr{border:none; border-top:1px dashed rgba(29,43,41,0.2); margin:1rem 0;}

/* SECTIONS */
.section{padding:4.5rem 0;}
.section-sand{background:var(--sand-light);}
.section-head{max-width:38rem; margin-bottom:3rem;}
.section-head h2{font-size:clamp(2.2rem,4vw,3.2rem); color:var(--ocean); margin-top:0.3rem;}

.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
.why-card{
  background:var(--foam); border:1px solid rgba(18,60,62,0.1);
  border-radius:8px; padding:1.6rem 1.3rem;
}
.why-card .icon{font-size:1.6rem; margin-bottom:0.7rem; display:block;}
.why-card h3{font-family:'Work Sans',sans-serif; font-weight:700; font-size:1rem; margin-bottom:0.4rem; color:var(--ocean);}
.why-card p{font-size:0.9rem; color:var(--ink-soft);}

.cta-band{
  background:var(--ocean); color:var(--foam);
  padding:3.5rem 0; text-align:center;
}
.cta-band h2{font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1rem; color:var(--foam);}
.cta-band p{color:rgba(250,246,238,0.8); margin-bottom:1.6rem;}

footer{background:var(--ocean-deep); color:rgba(250,246,238,0.55); padding:2rem 0; text-align:center; font-size:0.85rem;}
footer span{color:var(--coral);}
footer a{color:rgba(250,246,238,0.75); text-decoration:underline;}

/* PRICING PAGE */
.price-hero{background:var(--ocean); color:var(--foam); padding:4rem 0 3rem; text-align:center;}
.price-hero h1{font-size:clamp(2.6rem,6vw,4rem); color:var(--foam);}
.price-card{
  max-width:560px; margin:-3rem auto 0; background:var(--foam);
  border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,0.2);
  padding:2.5rem; position:relative; z-index:5;
}
.price-card .tag{
  background:var(--coral); color:var(--foam); font-size:0.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; padding:0.3rem 0.7rem; border-radius:999px;
  display:inline-block; margin-bottom:1rem;
}
.price-big{font-family:'Bebas Neue',sans-serif; font-size:4rem; color:var(--ocean); line-height:1;}
.price-big sub{font-family:'Work Sans',sans-serif; font-size:1rem; font-weight:600; color:var(--ink-soft);}
.price-note{color:var(--ink-soft); font-size:0.9rem; margin:0.6rem 0 1.6rem;}
.includes{list-style:none;}
.includes li{
  display:flex; gap:0.7rem; padding:0.6rem 0; border-top:1px solid rgba(18,60,62,0.08);
  font-size:0.95rem;
}
.includes li:first-child{border-top:none;}
.includes li::before{content:"✓"; color:var(--coral); font-weight:700;}

.book-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem;}
.book-step{padding:1.5rem; background:var(--sand-light); border-radius:8px;}
.book-step .step-num{font-family:'Bebas Neue',sans-serif; font-size:2.2rem; color:var(--coral);}

/* ABOUT PAGE */
.about-hero{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:3rem; align-items:center;
  padding:4.5rem 0;
}
.about-photo{
  background:linear-gradient(135deg, var(--ocean), var(--ocean-deep));
  border-radius:10px; aspect-ratio:4/5; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:1.5rem; color:var(--sand-light);
}
.about-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.about-photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,43,44,0) 40%, rgba(11,43,44,0.85) 100%);
}
.about-photo > div{position:relative; z-index:2;}
.about-photo .tag{
  position:absolute; top:1.2rem; left:1.2rem; z-index:2;
  background:var(--coral); color:var(--foam); font-size:0.75rem; font-weight:700;
  padding:0.3rem 0.7rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.06em;
}
.about-hero h1{font-size:clamp(2.6rem,5.5vw,4rem); color:var(--ocean);}
.quote{
  border-left:3px solid var(--coral); padding-left:1.2rem; margin:1.6rem 0;
  font-size:1.15rem; font-style:italic; color:var(--ocean);
}
.stat-row{display:flex; gap:2.5rem; margin-top:2rem; flex-wrap:wrap;}
.stat-row .stat-num{font-family:'Bebas Neue',sans-serif; font-size:2.2rem; color:var(--coral); line-height:1;}
.stat-row .stat-label{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);}

/* GALLERY PAGE */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.gallery-item{
  aspect-ratio:1/1; border-radius:8px; overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--ocean), var(--ocean-deep));
  display:flex; align-items:center; justify-content:center;
}
.gallery-item img, .gallery-item video{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-item .placeholder-label{
  color:rgba(250,246,238,0.55); font-size:0.8rem; text-align:center; padding:1rem;
  text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
}
.gallery-item.wide{grid-column:span 2;}

@media (max-width:800px){
  .hero-grid, .about-hero{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .book-steps{grid-template-columns:1fr;}
  .navbar{flex-direction:column; padding-top:0.5rem;}
  .navtabs a{padding:0.7rem 0.6rem; font-size:0.75rem;}
  .about-photo{aspect-ratio:16/9;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-item.wide{grid-column:span 2;}
}
:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}