/* ===========================================================
   YAYA — Surf / SUP / Photo & Video Portfolio
   Editorial / Magazine style
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#15150f;
  --paper:#f4f1ea;
  --paper-2:#eae5da;
  --accent:#c8632c;      /* sunset orange */
  --accent-2:#2c5f66;    /* ocean teal */
  --line: rgba(21,21,15,0.14);
  --line-strong: rgba(21,21,15,0.35);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --max: 1360px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,64px);}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  display:inline-block;
  margin-bottom:14px;
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:-.01em;}

/* ---------------- NAV ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,241,234,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,5vw,64px);
  max-width:var(--max); margin:0 auto;
}
.brand{
  font-family:var(--serif);
  font-size:24px;
  font-weight:700;
  letter-spacing:.02em;
}
.brand span{color:var(--accent);}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  position:relative;
  padding-bottom:4px;
  white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ink); transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:var(--accent);}
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{width:24px; height:2px; background:var(--ink); display:block;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; top:65px; height:calc(100vh - 65px);
    width:78%; max-width:340px; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:20px 28px; transform:translateX(100%); transition:transform .3s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{width:100%; padding:16px 0; border-bottom:1px solid var(--line);}
  .nav-toggle{display:flex;}
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; min-height:92vh;
  background-image:url('../images/hero/hero-desktop.jpg');
  background-size:cover; background-position:center;
  color:#fff; overflow:hidden;
}
@media (max-width:860px){
  .hero{ background-image:url('../images/hero/hero-mobile.jpg'); }
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,15,10,.18) 0%, rgba(15,15,10,.1) 35%, rgba(15,15,10,.65) 100%);
}
/* Headline pinned top-left over the first photo; tag shifted right onto the
   2nd/3rd photo boundary, matching the reference composite's arrangement. */
.hero-headline{
  position:absolute; z-index:2; top:70px; left:0;
  padding:0 clamp(20px,5vw,64px);
  font-family:var(--serif); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(40px,7.5vw,108px); line-height:.95; color:#fff;
}
.hero .hero-tag{
  position:absolute; z-index:2; top:88px; left:50%; transform:translateX(-50%);
  font-size:18px; letter-spacing:.28em; text-transform:uppercase; line-height:1.6;
  text-align:center; color:var(--accent); font-weight:600;
}
@media (max-width:860px){
  .hero{ display:flex; flex-direction:column; justify-content:flex-end; }
  .hero .hero-tag{ position:relative; top:auto; left:auto; transform:none; padding:0 clamp(20px,5vw,64px); order:1; }
  .hero-headline{ position:relative; top:auto; padding:0 clamp(20px,5vw,64px); margin-top:14px; order:2; }
}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:.75;
  writing-mode:vertical-rl;
}

.page-hero{
  padding:170px clamp(20px,5vw,64px) 70px; max-width:var(--max); margin:0 auto;
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(40px,7vw,84px); line-height:.95;}
.page-hero .sub{max-width:560px; margin-top:20px; font-size:16px; color:#3a3a30;}

/* ---------------- INTRO / EDITORIAL BLOCK ---------------- */
.editorial{
  padding:110px clamp(20px,5vw,64px);
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:.6fr 1fr; gap:60px;
  border-bottom:1px solid var(--line);
}
.editorial h2{font-size:clamp(30px,4vw,46px); line-height:1.1;}
.editorial p{font-size:17px; color:#332f27; max-width:52ch;}
.editorial p + p{margin-top:16px;}
@media (max-width:860px){ .editorial{grid-template-columns:1fr; gap:24px;} }

/* ---------------- SECTIONS GRID (home teasers) ---------------- */
.teasers{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line);
}
.teaser{
  position:relative; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  aspect-ratio:3/4; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; color:#fff;
}
.teaser img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; z-index:0;}
.teaser::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.05), rgba(10,10,8,.78)); z-index:1;}
.teaser:hover img{transform:scale(1.06);}
.teaser-content{position:relative; z-index:2;}
.teaser-num{font-size:12px; letter-spacing:.2em; opacity:.8; margin-bottom:8px; display:block;}
.teaser h3{font-size:26px;}
.teaser .arrow{margin-top:10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px;}
@media (max-width:1000px){ .teasers{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .teasers{grid-template-columns:1fr;} }

/* ---------------- GALLERY (photos page) ---------------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; padding:0 clamp(20px,5vw,64px) 50px; max-width:var(--max); margin:0 auto;
}
.filter-btn{
  border:1px solid var(--line-strong); background:transparent; padding:9px 20px; border-radius:100px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{border-color:var(--ink);}
.filter-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.masonry{
  column-count:3; column-gap:20px; padding:0 clamp(20px,5vw,64px) 100px; max-width:var(--max); margin:0 auto;
}
.masonry-item{
  break-inside:avoid; margin-bottom:20px; position:relative; overflow:hidden; cursor:pointer;
  opacity:1; transform:scale(1); transition:opacity .35s ease, transform .35s ease;
}
.masonry-item.hide{display:none;}
.masonry-item img{width:100%; transition:transform .5s ease;}
.masonry-item:hover img{transform:scale(1.04);}
.masonry-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(0deg, rgba(10,10,8,.75), transparent);
  color:#fff; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  opacity:0; transition:opacity .25s ease;
}
.masonry-item:hover .cap{opacity:1;}
@media (max-width:900px){ .masonry{column-count:2;} }
@media (max-width:560px){ .masonry{column-count:1;} }

/* ---------------- VIDEO GRID ---------------- */
.video-featured{
  max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,64px) 60px;
}
.video-featured .frame{
  position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--ink);
}
.video-featured img{width:100%; height:100%; object-fit:cover; opacity:.8;}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; background:rgba(244,241,234,.92);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.play-btn::after{
  content:''; border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--ink); margin-left:4px;
}
.video-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,64px) 100px;
}
.video-card{position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer;}
.video-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.video-card:hover img{transform:scale(1.06);}
.video-card .cap{
  position:absolute; left:0; right:0; bottom:0; padding:18px;
  background:linear-gradient(0deg, rgba(10,10,8,.8), transparent); color:#fff;
}
.video-card .cap .eyebrow{color:#f0c9a4; margin-bottom:4px;}
.video-card .play-btn{width:50px; height:50px;}
.video-card .play-btn::after{border-width:8px 0 8px 13px;}
@media (max-width:900px){ .video-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .video-grid{grid-template-columns:1fr;} }

/* ---------------- LESSONS (surf / sup) ---------------- */
.lesson-hero{
  position:relative; min-height:70vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; color:#fff;
}
.lesson-hero::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,10,.1), rgba(15,15,10,.75));}
.lesson-hero-inner{position:relative; z-index:2; padding:0 clamp(20px,5vw,64px) 56px; max-width:var(--max); margin:0 auto; width:100%;}
.lesson-hero h1{font-size:clamp(40px,7vw,92px); line-height:.95;}
.hero-tag{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; opacity:.85; margin-bottom:18px; line-height:1.6;
}
.hero-sub{
  max-width:520px; font-size:17px; font-weight:300; opacity:.92;
}

.courses{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong);
  max-width:var(--max); margin:0 auto;
}
.course-card{background:var(--paper); padding:44px 32px; display:flex; flex-direction:column;}
.course-card .lvl{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); font-weight:600; margin-bottom:16px;}
.course-card h3{font-size:26px; margin-bottom:10px;}
.course-card .price{font-family:var(--serif); font-size:34px; margin:18px 0;}
.course-card .price small{font-family:var(--sans); font-size:13px; font-weight:400; color:#5c5848;}
.course-card ul{margin:14px 0 26px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:#3a3a30;}
.course-card li::before{content:'— '; color:var(--accent);}
.course-card .btn{margin-top:auto;}
@media (max-width:900px){ .courses{grid-template-columns:1fr;} }

.strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin:0 auto; max-width:var(--max);
}
.strip img{aspect-ratio:3/4; object-fit:cover; width:100%; height:100%;}
@media (max-width:700px){ .strip{grid-template-columns:repeat(2,1fr);} }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border:1px solid var(--ink); border-radius:100px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  background:var(--ink); color:var(--paper); transition:all .2s ease; cursor:pointer;
}
.btn:hover{background:transparent; color:var(--ink);}
.btn.outline{background:transparent; color:var(--ink);}
.btn.outline:hover{background:var(--ink); color:var(--paper);}
.btn.light{border-color:#fff; color:#fff; background:transparent;}
.btn.light:hover{background:#fff; color:var(--ink);}

/* ---------------- CONTACT / FORM ---------------- */
.contact{
  padding:110px clamp(20px,5vw,64px); max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:.7fr 1fr; gap:60px; border-top:1px solid var(--line);
}
.contact h2{font-size:clamp(30px,4vw,48px); margin-bottom:16px;}
.contact p{color:#3a3a30; max-width:44ch;}
.contact-meta{margin-top:30px; font-size:14px; color:#3a3a30;}
.contact-meta a{border-bottom:1px solid var(--line-strong);}
form.card{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:#3a3a30;}
.field input, .field select, .field textarea{
  border:none; border-bottom:1px solid var(--line-strong); background:transparent;
  padding:10px 2px; font-family:var(--sans); font-size:15px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent);}
.field textarea{resize:vertical; min-height:100px;}
.hp-field{position:absolute; left:-9999px; opacity:0;}
@media (max-width:860px){ .contact{grid-template-columns:1fr;} }

/* ---------------- FOOTER ---------------- */
.site-footer{
  border-top:1px solid var(--line); padding:44px clamp(20px,5vw,64px);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  max-width:var(--max); margin:0 auto; font-size:13px; color:#54503f;
}
.site-footer .fbrand{font-family:var(--serif); font-size:18px; color:var(--ink);}
.site-footer .socials{display:flex; gap:18px; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:600;}
.site-footer .socials a:hover{color:var(--accent);}

/* section spacing helper */
.section-title{padding:90px clamp(20px,5vw,64px) 30px; max-width:var(--max); margin:0 auto;}
.section-title .eyebrow{margin-bottom:10px;}
.section-title h2{font-size:clamp(32px,5vw,54px);}

/* ---------------- PROJECT WALL (photos.html) ---------------- */
.project-wall{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-strong);
  max-width:var(--max); margin:0 auto 100px;
}
.project-card{
  position:relative; background:var(--paper); aspect-ratio:4/5; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
}
.project-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.project-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.05), rgba(10,10,8,.8)); z-index:1;}
.project-card:hover img{transform:scale(1.06);}
.project-card-content{position:relative; z-index:2; padding:26px;}
.project-num{font-size:12px; letter-spacing:.2em; opacity:.85; display:block; margin-bottom:8px;}
.project-card h3{font-size:24px; margin-bottom:6px;}
.project-meta{font-size:12px; letter-spacing:.05em; opacity:.85; text-transform:uppercase;}
@media (max-width:900px){ .project-wall{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .project-wall{grid-template-columns:1fr;} }

/* ---------------- PROJECT DETAIL (project.html) ---------------- */
.project-head{
  padding:170px clamp(20px,5vw,64px) 60px; max-width:900px; margin:0 auto;
  border-bottom:1px solid var(--line);
}
.project-head .back-link{
  display:block; margin-bottom:26px; font-size:13px; letter-spacing:.05em; color:#54503f;
}
.project-head .back-link:hover{color:var(--accent);}
.project-head h1{font-size:clamp(36px,6vw,64px); margin-top:10px;}
.project-stack{
  max-width:900px; margin:0 auto; padding:60px clamp(20px,5vw,64px) 100px;
  display:flex; flex-direction:column; gap:28px;
}
.project-stack img{width:100%; border-radius:2px;}

/* ---------------- VIDEO WALL (videos.html) ---------------- */
.video-wall{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-strong);
  max-width:var(--max); margin:0 auto 100px;
}
.video-tile{
  position:relative; background:var(--ink); aspect-ratio:3/4; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff; cursor:pointer;
}
.video-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.video-tile::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.1), rgba(10,10,8,.8)); z-index:1;}
.video-tile:hover img{transform:scale(1.06);}
.video-tile-content{position:relative; z-index:2; padding:26px;}
.video-tile .project-num{font-size:12px; letter-spacing:.2em; opacity:.85; display:block; margin-bottom:8px;}
.video-tile h3{font-size:22px; margin-bottom:6px;}
.video-tile .project-meta{font-size:12px; letter-spacing:.05em; opacity:.85;}
.video-tile .play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:60px; height:60px; border-radius:50%; background:rgba(244,241,234,.92);
  display:flex; align-items:center; justify-content:center;
}
.video-tile .play-btn::after{
  content:''; border-style:solid; border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent var(--ink); margin-left:3px;
}
.video-tile .play-btn.is-external::after{
  content:'↗'; border:none; margin-left:0; font-size:22px; line-height:1; color:var(--ink);
}
@media (max-width:900px){ .video-wall{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .video-wall{grid-template-columns:1fr;} }

/* ---------------- LIGHTBOX ---------------- */
.lightbox{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(10,10,8,.94); align-items:center; justify-content:center; padding:40px 20px;
}
.lightbox.open{display:flex;}
.lightbox-close{
  position:absolute; top:24px; right:28px; z-index:1002;
  background:none; border:none; color:#fff; font-size:24px; cursor:pointer; line-height:1;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.lightbox-inner{
  position:relative; width:100%; max-width:960px; max-height:85vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-inner.is-vertical{max-width:420px;}
.lightbox-inner iframe,
.lightbox-inner video{
  width:100%; max-height:85vh; border:none; background:#000;
}
.lightbox-inner:not(.is-vertical) iframe,
.lightbox-inner:not(.is-vertical) video{ aspect-ratio:16/9; height:auto; }
.lightbox-inner.is-vertical iframe,
.lightbox-inner.is-vertical video{ aspect-ratio:9/16; height:85vh; width:auto; max-width:100%; }
.lightbox-inner .ig-wrap{ width:100%; max-height:85vh; overflow:auto; }

/* ===========================================================
   SUP lesson page (sup.html)
=========================================================== */
.notice-box{max-width:var(--max); margin:0 auto; padding:32px clamp(20px,5vw,64px) 0;}
.notice-box .inner{
  border:1px solid var(--line-strong); border-left:3px solid var(--accent);
  padding:18px 22px; font-size:14px; color:#3a3a30; line-height:1.85;
}

.schedule-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong);
}
.schedule-card{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  background-color:var(--ink); background-size:cover; background-position:center;
  padding:30px; display:flex; flex-direction:column; justify-content:flex-end;
}
.schedule-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.18), rgba(10,10,8,.85)); z-index:0;}
.schedule-card > *{position:relative; z-index:1;}
.schedule-card .eyebrow{display:block; margin-bottom:12px; color:#f0c9a4;}
.schedule-card h3{font-size:19px; margin-bottom:12px; color:#fff;}
.schedule-card ul{display:flex; flex-direction:column; gap:6px; font-size:14px; color:#fff; margin-bottom:10px; list-style:none;}
.schedule-card .note{font-size:12px; color:#e0c9a6; line-height:1.6;}
@media (max-width:800px){ .schedule-card{aspect-ratio:3/2;} }

.content-list{
  max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,64px);
  display:flex; flex-direction:column; gap:18px;
}
.content-list li{list-style:none; font-size:15px; color:#3a3a30; line-height:1.8; padding-left:26px; position:relative;}
.content-list li::before{content:'—'; position:absolute; left:0; color:var(--accent);}
.content-list li strong{color:var(--ink); font-weight:600;}

.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-strong);}
.price-card{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background-color:var(--ink); background-size:cover; background-position:center;
  padding:26px 22px; text-align:center; display:flex; flex-direction:column; justify-content:flex-end;
}
.price-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.15), rgba(10,10,8,.85)); z-index:0;}
.price-card > *{position:relative; z-index:1;}
.price-card.is-popular::after{
  content:'推薦'; position:absolute; top:16px; right:16px; font-size:10px; letter-spacing:.12em;
  color:var(--paper); background:var(--accent); padding:3px 9px; border-radius:100px; font-weight:600; z-index:2;
}
.price-card h4{font-size:13px; color:#fff; margin-bottom:12px; font-weight:600; line-height:1.5;}
.price-card .amt{font-family:var(--serif); font-size:28px; color:#fff;}
.price-card .amt small{font-family:var(--sans); font-size:12px; font-weight:400; color:#e8e2d4;}
.price-note{max-width:var(--max); margin:22px auto 0; padding:0 clamp(20px,5vw,64px); font-size:13px; color:#5c5848; text-align:center;}
@media (max-width:800px){ .price-card{aspect-ratio:3/4;} }

.addon-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-strong);
  max-width:var(--max); margin:0 auto;
}
.addon-card{background:var(--paper); padding:30px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:15px;}
.addon-card .amt{font-family:var(--serif); color:var(--accent); white-space:nowrap; font-size:20px;}

.rules-list{max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,64px); display:grid; grid-template-columns:repeat(2,1fr); gap:14px 60px;}
.rules-list li{list-style:none; font-size:14px; color:#3a3a30; line-height:1.75; padding-left:26px; position:relative;}
.rules-list li::before{content:'✔'; position:absolute; left:0; color:var(--accent-2); font-size:11px; top:4px;}

/* ---- Full-bleed photo feature cards (replaces flat emoji boxes) ---- */
.feature-photo-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);}
.feature-photo{
  position:relative; aspect-ratio:3/4; overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:flex-end; padding:30px; color:#fff;
}
.feature-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; z-index:0;}
.feature-photo::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.05), rgba(10,10,8,.78)); z-index:1;}
.feature-photo:hover img{transform:scale(1.06);}
.feature-photo h3{position:relative; z-index:2; font-size:22px; margin-bottom:8px; color:#fff;}
.feature-photo p{position:relative; z-index:2; font-size:14px; opacity:.92; max-width:26ch;}
@media (max-width:900px){ .feature-photo-grid{grid-template-columns:1fr;} }

/* ---- 2-column variant (surf course cards: longer copy, taller cards) ---- */
.feature-photo-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.feature-photo-grid.cols-2 .feature-photo{aspect-ratio:4/5; padding:36px;}
.feature-photo-grid.cols-2 .feature-photo .lvl{position:relative; z-index:2; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#f0c9a4; font-weight:600; margin-bottom:10px; display:block;}
.feature-photo-grid.cols-2 .feature-photo h3{font-size:26px;}
.feature-photo-grid.cols-2 .feature-photo p{max-width:38ch; font-size:14.5px; line-height:1.75;}
@media (max-width:900px){ .feature-photo-grid.cols-2{grid-template-columns:1fr;} }

/* ---- 4-column schedule variant (surf: 4 flat time slots, no sunset highlight) ---- */
.schedule-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .schedule-grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .schedule-grid.cols-4{grid-template-columns:1fr;} }

/* ---- 3-column pricing variant (surf: 1:1 / 1:2 / 1:3) ---- */
.price-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:800px){ .price-grid.cols-3{grid-template-columns:1fr;} }

/* ---- Split image + list section (course content) ---- */
.content-split{
  display:grid; grid-template-columns:.85fr 1fr; gap:60px; max-width:var(--max); margin:0 auto;
  padding:0 clamp(20px,5vw,64px) 20px; align-items:center;
}
.content-split .img-wrap{aspect-ratio:4/5; overflow:hidden;}
.content-split .img-wrap img{width:100%; height:100%; object-fit:cover;}
.content-split .content-list{padding:0; max-width:none; margin:0;}
@media (max-width:860px){ .content-split{grid-template-columns:1fr; gap:28px;} }

/* ---- Closing CTA as full-bleed photo band ---- */
.cta-hero{
  position:relative; min-height:52vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background-size:cover; background-position:center; color:#fff; margin-top:70px;
}
.cta-hero::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,.4), rgba(10,10,8,.82));}
.cta-hero-inner{position:relative; z-index:2; padding:60px clamp(20px,5vw,64px); max-width:640px; margin:0 auto;}
.cta-hero .eyebrow{color:#f0c9a4;}
.cta-hero h2{font-size:clamp(30px,5vw,54px); margin-bottom:16px; color:#fff;}
.cta-hero p{opacity:.92; margin-bottom:34px;}
.cta-hero .btn{padding:18px 46px; font-size:15px;}

@media (max-width:800px){
  .schedule-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:repeat(2,1fr);}
  .addon-grid{grid-template-columns:1fr;}
  .rules-list{grid-template-columns:1fr;}
}

/* ---------------- BOOKING FORM PRICE CALCULATOR ---------------- */
.price-box{
  border:1px solid var(--line-strong); border-radius:8px; padding:18px 20px;
  font-size:14px; color:var(--ink); background:var(--paper-2);
}
.price-box .row{display:flex; justify-content:space-between; padding:4px 0;}
.price-box .row.total{
  border-top:1px solid var(--line-strong); margin-top:8px; padding-top:10px;
  font-weight:700; font-size:17px; color:var(--accent);
}
.addon-row{display:flex; align-items:center; gap:10px; font-size:14px; margin-top:8px;}
.addon-row label{display:flex; align-items:center; gap:8px; cursor:pointer;}
.addon-row .price{color:#54503f; font-size:13px;}

.count-stepper{display:flex; align-items:center; gap:12px;}
.count-stepper input{width:56px; text-align:center; flex:none;}
.count-stepper button{
  width:32px; height:32px; flex:none; border:1px solid var(--line-strong); border-radius:50%;
  background:transparent; color:var(--ink); font-size:16px; line-height:1; cursor:pointer;
}
.count-stepper button:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}
.count-stepper button:disabled{opacity:.35; cursor:not-allowed;}

.heights-list{display:flex; flex-direction:column; gap:10px;}
.height-row{display:flex; align-items:center; gap:10px;}
.height-row span{font-size:13px; color:#54503f; min-width:52px; flex:none;}
.height-row select{flex:1;}

.inapp-notice{
  margin-top:16px; padding:14px 16px; border:1px solid var(--accent); border-radius:8px;
  background:#fbe9dd; color:#5a3a1c; font-size:13px; line-height:1.6;
}

.contact-method-row{ display:flex; gap:10px; }
.contact-method-row select{ flex:none; width:auto; }
.contact-method-row input{ flex:1; }

/* ---------------- FLOATING BOOKING BUTTONS ---------------- */
.float-book{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:flex; flex-direction:column; gap:12px;
}
.float-book a{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:78px; height:78px; border-radius:50%;
  background:var(--accent); color:#fff; text-decoration:none;
  font-size:12px; font-weight:700; line-height:1.35; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(21,21,15,.28);
  transition:transform .15s ease, background-color .15s ease;
}
.float-book a:hover{ transform:translateY(-2px); background:#a8501f; }
@media (max-width:640px){
  .float-book{ right:14px; bottom:14px; gap:10px; }
  .float-book a{ width:64px; height:64px; font-size:11px; }
}