/* Extensions of the existing Icon Surf visual system. */
html { overflow-x:clip; }
.reveal { opacity:1; transform:none; }
.reveal.in-view { animation:contentUp .5s ease both; }
[hidden] { display:none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--terracotta); outline-offset:4px; }
section[id] { scroll-margin-top:108px; }
.flag { font-size:1.18rem; line-height:1; }
.language-current { gap:6px; }
.language-popover a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:.78rem; font-weight:600; }
.language-popover a:hover,.language-popover a.active { background:var(--sand); color:var(--ocean-dark); }
.desktop-nav .active { color:var(--ocean); }
.nav-dropdown.open .dropdown-panel { opacity:1; visibility:visible; transform:translate(-50%,0); }
.package-nav-panel { width:310px; }
.package-nav-panel a,.mobile-submenu a { display:grid; gap:4px; }
.package-nav-panel strong { font-size:.77rem; }
.package-nav-panel small,.mobile-submenu small { font-size:.63rem; font-weight:500; opacity:.75; }
.nav-all-packages { border-bottom:1px solid var(--line); margin-bottom:6px; border-radius:0 !important; }
.mobile-place { margin:6px 0 0; color:var(--muted); font-size:.69rem; letter-spacing:.18em; font-weight:700; }
.mobile-rule { margin-top:16px; margin-bottom:16px; }
.mobile-languages a { display:grid; gap:8px; place-items:center; min-height:72px; padding:12px 4px; border:1px solid var(--line); border-radius:11px; background:var(--white); font-size:.72rem; font-weight:700; }
.mobile-languages a.active { border-color:var(--ocean); color:var(--ocean-dark); background:rgba(0,138,170,.08); }
.mobile-languages a .flag { font-size:1.38rem; }
.mobile-utility { display:flex; justify-content:center; gap:28px; margin-top:18px; font-size:.8rem; color:var(--ocean-dark); font-weight:700; }
.whatsapp-icon svg { width:22px; height:22px; }
.whatsapp-float { z-index:110; }
.page-hero { position:relative; display:grid; place-items:center; min-height:580px; overflow:hidden; color:white; background:var(--ocean-dark); }
.page-hero-media,.page-hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.page-hero-media { object-fit:cover; object-position:center 42%; }
.page-hero-shade { background:linear-gradient(180deg,rgba(2,39,48,.47),rgba(2,39,48,.63)); }
.page-hero-copy { position:relative; z-index:1; padding:162px 0 78px; text-align:center; }
.page-hero .hero-kicker { color:#ffe4d0; margin-bottom:18px; }
.page-hero h1 { max-width:1040px; margin:0 auto 25px; font-size:clamp(3.3rem,6.8vw,6rem); color:white; line-height:1.02; text-wrap:balance; }
.page-hero-copy > p:not(.hero-kicker) { max-width:820px; margin:0 auto; font-size:1.01rem; line-height:1.8; }
.page-hero .hero-actions { margin-top:28px; }
.hero-wave { position:absolute; right:5%; bottom:18px; color:rgba(255,255,255,.65); width:55px; }
.page-jump-links { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 27px; padding:24px 0; border-bottom:1px solid var(--line); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--ocean-dark); }
.page-jump-links a:hover { color:var(--terracotta-deep); }
.detail-split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:75px; }
.detail-split h2 { font-size:clamp(2.7rem,4.1vw,4.4rem); }
.detail-split p { color:var(--muted); }
.detail-split h3 { margin-top:28px; color:var(--ocean-dark); }
.detail-image { position:relative; min-height:410px; border-radius:var(--radius-lg); }
.detail-image > img { width:100%; height:100%; min-height:410px; max-height:580px; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-lg); }
.image-stamp { position:absolute; right:-12px; bottom:25px; display:grid; place-content:center; width:118px; height:118px; border-radius:50%; background:var(--terracotta); color:white; transform:rotate(8deg); font-family:var(--display); font-size:1.05rem; line-height:1.2; text-align:center; }
.fine-print { max-width:950px; margin:28px 0 0; color:var(--muted); font-size:.82rem; line-height:1.8; }
.check-list { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.check-list li { display:flex; align-items:flex-start; gap:10px; font-size:.84rem; line-height:1.55; }
.check-list svg { flex:0 0 19px; width:19px; height:19px; margin-top:2px; color:var(--ocean); }
.detail-split .check-list { margin:20px 0 30px; }
.weekly-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.weekly-card { overflow:hidden; border-radius:var(--radius-lg); background:var(--paper); color:var(--ink); box-shadow:0 16px 45px rgba(0,41,53,.1); }
.weekly-photo { position:relative; display:block; height:300px; overflow:hidden; }
.weekly-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.weekly-photo:hover img { transform:scale(1.045); }
.weekly-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,44,55,.36),transparent 65%); }
.weekly-chip { position:absolute; z-index:1; top:19px; left:19px; max-width:calc(100% - 38px); padding:9px 13px; border-radius:999px; color:var(--ocean-dark); background:var(--paper); font-size:.68rem; font-weight:700; }
.weekly-photo-arrow { position:absolute; z-index:1; right:20px; bottom:20px; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--terracotta); color:white; font-size:1.25rem; }
.weekly-copy { padding:29px 31px 32px; }
.weekly-copy .eyebrow { margin-bottom:15px; color:var(--terracotta-deep); font-size:.64rem; }
.weekly-copy h3 { margin-bottom:16px; color:var(--ocean-dark); font-size:2.2rem; }
.weekly-description { min-height:92px; margin-bottom:22px; color:var(--muted); font-size:.84rem; line-height:1.8; }
.weekly-copy h4,.info-card h4,.lesson-price-card h4 { margin:15px 0 14px; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ocean-dark); }
.weekly-price { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:28px; padding-top:23px; border-top:1px solid var(--line); }
.weekly-price > div { display:grid; gap:4px; }
.weekly-price small { text-transform:uppercase; font-size:.61rem; letter-spacing:.07em; color:var(--muted); font-weight:600; }
.weekly-price strong { font-family:var(--display); font-size:1.35rem; color:var(--ocean-dark); }
.weekly-price > div > span { font-size:.63rem; color:var(--muted); }
.weekly-price .button { padding-inline:17px; gap:8px; font-size:.64rem; }
.on-blue-note { max-width:1000px; margin:32px auto 0; font-size:.82rem; line-height:1.8; opacity:.9; }
.school-teaser,.package-inclusions { background:var(--paper); }
.teaser-prices { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0; }
.teaser-prices > div { padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--cream); }
.teaser-prices span { font-size:.71rem; font-weight:700; color:var(--ocean-dark); }
.teaser-prices strong { display:block; margin:10px 0; color:var(--ocean); font-family:var(--display); font-size:2.25rem; }
.teaser-prices strong small { font-family:var(--body); font-size:.6rem; font-weight:500; }
.teaser-prices p { margin:0; font-size:.72rem; }
.inclusions-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.inclusion-card { padding:27px; border:1px solid var(--line); border-radius:20px; background:var(--cream); }
.inclusion-card > svg { width:32px; height:32px; margin-bottom:22px; color:var(--terracotta-deep); }
.inclusion-card h3 { margin:0; font-size:1.25rem; line-height:1.3; color:var(--ocean-dark); letter-spacing:-.01em; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.info-card { display:block; padding:33px 27px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); }
.info-card h3 { margin:24px 0 15px; color:var(--ocean-dark); font-size:1.65rem; line-height:1.15; }
.info-card p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.8; }
.info-card .check-list { margin-top:17px; }
.step-number { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; color:white; background:var(--terracotta); font-family:var(--display); font-size:1.3rem; }
.trust-value { display:block; color:var(--terracotta-deep); font-family:var(--display); font-size:2.45rem; line-height:1; }
.school-why,.room-prices,.lesson-prices { background:var(--sand); }
.school-why h2,.levels-section h2,.booking-steps h2 { margin-bottom:40px; }
.photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.gallery-photo { position:relative; padding:0; overflow:hidden; aspect-ratio:4/5; border:0; border-radius:19px; background:var(--sand); cursor:pointer; }
.gallery-photo img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-photo:hover img { transform:scale(1.055); }
.gallery-photo > span { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--paper); color:var(--ocean-dark); font-size:1.25rem; }
.room-price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.room-price-card { overflow:hidden; border-radius:23px; background:var(--paper); border:1px solid var(--line); }
.room-price-card > img { width:100%; height:240px; object-fit:cover; }
.room-price-card > div { display:grid; gap:13px; padding:27px; }
.room-price-card h3 { margin:0; color:var(--ocean-dark); font-size:1.75rem; line-height:1.15; }
.room-price-card p { margin:0; font-size:.78rem; color:var(--muted); }
.room-price-card strong { color:var(--ocean); font-family:var(--display); font-size:1.5rem; }
.room-price-card small { font-size:.72rem; color:var(--muted); }
.room-price-card .text-link { justify-self:start; margin-top:12px; font-size:.65rem; }
.related-packages { background:var(--paper); }
.related-intro { margin:0 0 38px; }
.related-packages .weekly-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.related-packages .weekly-copy { padding:25px 22px; }
.related-packages .weekly-photo { height:230px; }
.related-packages .weekly-chip { font-size:.6rem; }
.related-packages .weekly-copy h3 { font-size:1.75rem; }
.related-packages .weekly-price { align-items:start; flex-direction:column; gap:20px; }
.related-packages .weekly-description { min-height:155px; }
.lesson-price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.lesson-price-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--paper); }
.lesson-card-top { display:flex; justify-content:space-between; align-items:start; gap:15px; margin-bottom:28px; }
.lesson-price-icon { width:39px; color:var(--terracotta-deep); flex:0 0 39px; }
.lesson-price { text-align:right; font-family:var(--display); font-size:1.55rem; color:var(--ocean-dark); }
.confirmed-price .lesson-price { font-size:2.2rem; }
.lesson-price small { display:block; margin-top:7px; font-family:var(--body); font-size:.64rem; color:var(--muted); }
.lesson-price-card h3 { margin-bottom:12px; font-size:1.65rem; color:var(--ocean-dark); line-height:1.18; }
.lesson-price-card p { margin-bottom:25px; font-size:.8rem; line-height:1.8; color:var(--muted); }
.lesson-price-card .text-link { align-self:flex-start; margin-top:auto; font-size:.68rem; }
.lesson-price-card.confirmed-price { border-top:4px solid var(--ocean); }
.booking-form label > span { display:block; margin-bottom:9px; font-size:.67rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.booking-form label > span small { font-size:.57rem; text-transform:none; letter-spacing:0; font-weight:500; }
.booking-form input:not([type="checkbox"]),.booking-form select,.booking-form textarea { width:100%; min-width:0; }
.booking-form input:user-invalid,.booking-form textarea:user-invalid,.booking-form select:user-invalid { border-color:#b33625; box-shadow:0 0 0 1px #b33625; }
.booking-form input[type="date"] { min-height:52px; }
.booking-form button:disabled { cursor:wait; opacity:.65; }
.form-result { margin-top:20px; padding:17px; border-radius:13px; color:var(--ocean-dark); background:rgba(0,138,170,.08); font-size:.79rem; }
.form-result a { font-weight:700; text-decoration:underline; }
.booking-contact strong { overflow-wrap:anywhere; }
.faq-all-link { margin-top:30px; }
.faq-group + .faq-group { margin-top:35px; }
.faq-group > h3 { margin:0 0 19px; color:var(--ocean-dark); font-size:1.4rem; }
.stay-detail { background:var(--paper); }
.stay-detail.alternate { background:var(--cream); }
.stay-detail.alternate .detail-image { grid-column:2; grid-row:1; }
.stay-detail.alternate .detail-image + div { grid-column:1; grid-row:1; }
.location-map { position:relative; min-height:410px; overflow:hidden; border:1px solid var(--line); border-radius:25px; background:var(--sand); }
.location-map iframe { width:100%; height:410px; border:0; }
.location-map > span { position:absolute; right:20px; bottom:20px; padding:10px 15px; border-radius:999px; background:var(--paper); color:var(--ocean-dark); font-size:.65rem; font-weight:700; letter-spacing:.08em; }
.activity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.activity-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); }
.activity-art { position:relative; display:grid; place-items:center; height:260px; background:var(--sand); }
.activity-illustration { width:65%; max-width:260px; height:210px; }
.activity-art > small { position:absolute; bottom:14px; right:19px; font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.activity-copy { padding:30px; }
.activity-copy .eyebrow { font-size:.62rem; }
.activity-copy h2 { font-size:2.45rem; line-height:1.05; }
.activity-copy > p { min-height:140px; font-size:.83rem; line-height:1.8; color:var(--muted); }
.activity-bottom { display:grid; gap:20px; padding-top:19px; border-top:1px solid var(--line); }
.activity-bottom strong { color:var(--ocean); font-family:var(--display); font-size:1.3rem; }
.activity-bottom strong small { font-family:var(--body); font-size:.63rem; }
.activity-bottom .text-link { justify-self:start; font-size:.68rem; }
.contact-options .info-card { transition:transform .2s ease; }
.contact-options .info-card:hover { transform:translateY(-5px); }
.contact-options h2 { font-size:2rem; margin:22px 0 18px; }
.contact-options p { overflow-wrap:anywhere; }
.contact-options .text-link { margin-top:27px; }
.contact-icon { display:grid; place-items:center; width:57px; height:57px; color:white; background:var(--ocean); border-radius:50%; font-family:var(--display); font-size:1.9rem; }
.contact-icon svg { width:34px; height:34px; }
.price-callout { color:var(--ocean) !important; font-family:var(--display); font-size:2.8rem; }
.price-callout small { font-size:.83rem; }
.surfskate-art { display:grid; place-items:center; min-height:410px; border-radius:28px; background:var(--sand); }
.surfskate-art .activity-illustration { width:80%; max-width:360px; height:330px; }
.surfskate-art small { margin-bottom:25px; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.gallery-instagram { margin-top:0; margin-bottom:70px; }
.photo-dialog { width:calc(100vw - 40px); max-width:1180px; max-height:95svh; padding:45px 60px 20px; border:0; border-radius:22px; color:white; background:#102c35; }
.photo-dialog::backdrop { background:rgba(0,20,28,.86); backdrop-filter:blur(6px); }
.photo-dialog figure { margin:0; text-align:center; }
.photo-dialog figure img { max-height:76svh; margin:auto; width:auto; max-width:100%; object-fit:contain; }
.photo-dialog figcaption { margin-top:14px; font-size:.76rem; }
.photo-dialog > button { position:absolute; border:0; color:white; background:rgba(255,255,255,.13); border-radius:50%; cursor:pointer; }
.photo-close { top:9px; right:12px; width:35px; height:35px; font-size:1.8rem; }
.photo-prev,.photo-next { top:50%; width:42px; height:42px; font-size:1.4rem; transform:translateY(-50%); }
.photo-prev { left:10px; }.photo-next { right:10px; }
@media(max-width:1160px) {
  .desktop-nav { gap:12px; }
  .desktop-nav > a,.nav-dropdown > button { font-size:.61rem; }
  .nav-actions .button { display:none; }
  .detail-split { gap:40px; }
  .weekly-price { align-items:start; flex-direction:column; gap:18px; }
  .related-packages .weekly-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .page-hero { min-height:560px; }
  .page-hero-copy { padding-top:145px; }
  .page-hero h1 { font-size:clamp(3.25rem,8.3vw,5rem); }
  .detail-split { grid-template-columns:1fr; gap:40px; }
  .detail-image { min-height:0; }
  .detail-image > img { min-height:0; max-height:580px; }
  .weekly-photo { height:265px; }
  .weekly-copy { padding:26px 23px; }
  .weekly-copy h3 { font-size:1.8rem; }
  .weekly-description { min-height:150px; }
  .inclusions-grid,.info-grid,.room-price-grid,.lesson-price-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .room-price-grid .room-price-card:last-child { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
  .room-price-grid .room-price-card:last-child > img { height:100%; min-height:280px; }
  .stay-detail.alternate .detail-image,.stay-detail.alternate .detail-image + div { grid-column:auto; grid-row:auto; }
  .activity-copy > p { min-height:205px; }
  .contact-options .info-grid { grid-template-columns:1fr; }
  .contact-options .info-card { padding:28px; }
  .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .info-grid > .info-card:last-child { grid-column:1/-1; }
}
@media(max-width:640px) {
  section[id] { scroll-margin-top:88px; }
  .mobile-nav > a,.mobile-submenu-toggle { min-height:57px; font-size:.83rem; }
  .mobile-menu { width:min(94vw,440px); padding-inline:22px; }
  .mobile-menu-head .brand img { width:57px; height:57px; }
  .mobile-menu-head .brand-copy strong { font-size:1rem; }
  .mobile-utility { font-size:.73rem; margin-top:17px; }
  .mobile-languages { margin:20px 0; }
  .mobile-languages a { min-height:68px; font-size:.68rem; }
  .mobile-languages a .flag { font-size:1.4rem; }
  .mobile-menu .button { font-size:.8rem; min-height:58px; }
  .page-hero { min-height:580px; }
  .page-hero-copy { padding:136px 8px 65px; }
  .page-hero h1 { font-size:clamp(2.9rem,13vw,4.5rem); }
  .page-hero-copy > p:not(.hero-kicker) { font-size:.84rem; line-height:1.8; }
  .page-hero .hero-kicker { font-size:.62rem; }
  .page-hero .hero-actions { flex-direction:column; }
  .page-jump-links { padding:19px 0; gap:12px 20px; font-size:.62rem; }
  .detail-split h2 { font-size:2.65rem; }
  .detail-split { gap:35px; }
  .weekly-grid,.related-packages .weekly-grid { grid-template-columns:1fr; gap:25px; }
  .weekly-photo { height:280px; }
  .weekly-chip { font-size:.63rem; }
  .weekly-copy { padding:26px 23px 28px; }
  .weekly-copy h3 { font-size:2.15rem; }
  .weekly-description,.related-packages .weekly-description { min-height:0; }
  .weekly-price { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .weekly-price strong { font-size:1.25rem; }
  .weekly-price .button { padding-inline:15px; min-height:45px; font-size:.61rem; }
  .on-blue-note { font-size:.76rem; }
  .teaser-prices,.inclusions-grid,.info-grid,.room-price-grid,.lesson-price-grid,.activity-grid { grid-template-columns:1fr; }
  .teaser-prices { gap:12px; }
  .teaser-prices > div { padding:23px; }
  .teaser-prices p { font-size:.78rem; }
  .info-grid > .info-card:last-child { grid-column:auto; }
  .room-price-grid .room-price-card:last-child { grid-column:auto; display:block; }
  .room-price-grid .room-price-card:last-child > img { height:240px; min-height:0; }
  .photo-grid { gap:10px; }
  .gallery-photo { border-radius:14px; }
  .photo-dialog { width:calc(100vw - 20px); padding:47px 15px 20px; }
  .photo-dialog figure img { max-height:72svh; }
  .photo-prev,.photo-next { top:auto; bottom:6px; width:34px; height:34px; transform:none; }
  .photo-dialog figcaption { padding-inline:30px; }
  .inclusion-card { padding:25px; }
  .activity-art { height:230px; }
  .activity-copy { padding:27px 23px; }
  .activity-copy > p { min-height:0; }
  .activity-copy h2 { font-size:2.4rem; }
  .location-map,.location-map iframe { min-height:340px; height:340px; }
  .form-grid { gap:20px; }
  .booking-layout { gap:35px; }
  .booking-form { padding:26px 20px; }
  .booking-form label > span { font-size:.64rem; }
  .image-stamp { right:0; width:100px; height:100px; font-size:.89rem; }
}
@media(prefers-reduced-motion:reduce) { .reveal.in-view { animation:none; } }

/* Booking and inclusion updates within the existing colour and type system. */
.flag { display:inline-flex; align-items:center; flex:0 0 auto; }
.language-flag { display:block; width:25px; height:17px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.1); overflow:hidden; }
.mobile-languages .language-flag { width:30px; height:20px; }
.weekly-copy .inclusion-list { gap:11px; }
.weekly-copy .inclusion-list li { font-size:.8rem; }
.weekly-copy .inclusion-icon { flex-basis:21px; width:21px; height:21px; }
.inclusion-card h3 { font-size:1.13rem; line-height:1.5; }
.teaser-prices .inclusion-list { margin:16px 0 20px; gap:10px; }
.teaser-prices .inclusion-list span { font-size:.73rem; font-weight:500; line-height:1.65; }
.teaser-prices .teaser-discount { padding-top:12px; border-top:1px solid var(--line); color:var(--ocean-dark); font-weight:700; }
.discount-note { display:flex; gap:9px; align-items:flex-start; padding:12px; margin:0 0 8px; border-radius:12px; color:var(--ocean-dark); background:rgba(0,138,170,.08); font-size:.71rem; line-height:1.6; }
.discount-note > svg { flex:0 0 18px; width:18px; height:18px; margin-top:2px; }
.discount-note strong { display:block; margin-top:5px; font-size:.82rem; }
.lesson-price-card .inclusion-list { margin-bottom:20px; gap:11px; }
.lesson-price-card .inclusion-list li { font-size:.76rem; }
.lesson-book-links { display:grid; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.lesson-book-links .text-link { margin:0; line-height:1.7; }
.lesson-estimate { margin:22px 0 0; padding:15px 17px; border:1px solid rgba(0,138,170,.25); border-radius:13px; background:rgba(0,138,170,.06); color:var(--ocean-dark); font-size:.78rem; }
.lesson-estimate strong { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.lesson-estimate p { margin:7px 0 0; font-weight:600; line-height:1.7; }
.booking-form .form-consent { display:flex; align-items:flex-start; gap:12px; margin:24px 0; padding:14px; border:1px solid var(--line); border-radius:13px; background:var(--white); cursor:pointer; }
.booking-form .form-consent input { flex:0 0 20px; width:20px; max-width:20px; height:20px; min-height:20px; margin:2px 0 0; padding:0; border-radius:4px; accent-color:var(--ocean); cursor:pointer; }
.booking-form .form-consent > span { display:block; margin:0; font-size:.75rem; line-height:1.7; font-weight:500; text-transform:none; letter-spacing:0; }
.form-consent a { color:var(--ocean-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.form-consent:has(input:checked) { border-color:var(--ocean); background:rgba(0,138,170,.035); }
.form-consent:has(input:user-invalid) { border-color:#b33625; }
.form-actions { display:grid; gap:12px; }
.form-actions .button { width:100%; min-height:54px; padding:15px 18px; gap:11px; font-size:.75rem; letter-spacing:.03em; }
.form-actions .button > svg { width:21px; height:21px; flex:0 0 21px; }
.button-whatsapp,.whatsapp-float { background:#25d366; color:#073b21; border-color:rgba(7,59,33,.15); box-shadow:0 10px 25px rgba(37,211,102,.2); }
.button-whatsapp:hover,.whatsapp-float:hover { background:#20bd5a; color:#073b21; }
.booking-form input[type="date"] { cursor:pointer; color-scheme:light; }
.booking-form input[type="date"]::-webkit-calendar-picker-indicator { width:22px; height:22px; padding:4px; margin-right:-4px; cursor:pointer; opacity:.85; }
@supports selector(input::-webkit-calendar-picker-indicator) {
  .booking-form input[type="date"] { position:relative; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c343b' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M7 3v4m10-4v4M3 10h18'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:21px 21px; background-position:right 14px center; }
  .booking-form input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; }
}
.result-links { display:grid; gap:9px; margin-top:12px; }
.form-result p { margin:0; line-height:1.8; }
.form-result.email-success { border:1px solid rgba(0,138,170,.25); }
.field-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.footer-legal { display:flex; flex-wrap:wrap; gap:10px 18px; }
.legal-page { padding-top:155px; background:var(--paper); }
.legal-content { max-width:860px; }
.legal-content h1 { font-family:var(--display); font-size:clamp(2.7rem,5vw,4.5rem); line-height:1.1; color:var(--ocean-dark); margin:0 0 24px; }
.legal-content .legal-intro { font-size:1rem; line-height:1.9; }
.legal-content > section { margin:35px 0; }
.legal-content h2 { margin:0 0 13px; font-size:1.75rem; }
.legal-content section p { color:var(--muted); font-size:.91rem; line-height:1.9; }
@media(max-width:640px) {
  .weekly-copy .inclusion-list li { font-size:.8rem; }
  .form-actions .button { font-size:.71rem; }
  .booking-form .form-consent { padding:12px; gap:10px; }
  .booking-form .form-consent > span { font-size:.73rem; }
  .legal-page { padding-top:125px; }
}

/* Weekly prices, distinct booking flows and clear home photo captions. */
.collage { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:30px; margin-top:70px; padding-bottom:25px; }
.collage .collage-card { position:relative; inset:auto; width:auto; height:auto; padding:12px 12px 17px; }
.collage .collage-one { transform:rotate(-2deg); margin-top:22px; }
.collage .collage-two { transform:rotate(1deg); }
.collage .collage-three { transform:rotate(2deg); margin-top:25px; }
.collage .collage-card img { height:auto; aspect-ratio:4/5; object-fit:cover; }
.collage .collage-card figcaption { min-height:3.4em; display:grid; place-items:center; padding:13px 5px 0; color:var(--ocean-dark); font-size:clamp(.85rem,1.05vw,1rem); line-height:1.5; overflow-wrap:anywhere; }
.collage .sun-stamp { top:-37px; right:-16px; left:auto; bottom:auto; width:82px; height:82px; font-size:.72rem; }
.collage-wave { display:none; }
.home-room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.home-room-card { overflow:hidden; border-radius:var(--radius-lg); background:var(--paper); color:var(--ink); box-shadow:0 15px 35px rgba(0,41,53,.13); }
.home-room-photo { display:block; overflow:hidden; }
.home-room-photo img { width:100%; height:310px; object-fit:cover; transition:transform .5s ease; }
.home-room-photo:hover img { transform:scale(1.04); }
.home-room-copy { padding:25px; }
.home-room-copy h3 { margin:0 0 10px; color:var(--ocean-dark); font-size:1.65rem; line-height:1.1; }
.home-room-copy > p { min-height:3.5em; margin:0 0 20px; color:var(--muted); font-size:.85rem; line-height:1.7; }
.home-room-price { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:18px; }
.home-room-price > div { display:grid; gap:4px; }
.home-room-price small { font-size:.68rem; color:var(--muted); }
.home-room-price strong { color:var(--ocean-dark); font-family:var(--display); font-size:2rem; line-height:1.1; }
.home-room-price span { font-size:.63rem; color:var(--muted); }
.home-room-price > a { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--ocean-dark); background:var(--terracotta); font-size:1.3rem; }
.home-stay-footer { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-top:32px; }
.home-stay-footer p { max-width:790px; font-size:.8rem; line-height:1.75; margin:0; }
.home-stay-footer .button { flex-shrink:0; }
.instagram-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
.instagram-grid a { aspect-ratio:1; }
.package-inclusion-panel { margin-top:32px; padding:34px; border-radius:var(--radius-lg); background:var(--paper); box-shadow:0 14px 36px rgba(0,41,53,.05); }
.package-inclusion-panel .inclusion-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 42px; }
.package-inclusion-panel li { padding:0; border:0; font-size:.92rem; line-height:1.7; }
.package-inclusion-panel li:first-child { grid-column:1/-1; }
.package-inclusion-panel .inclusion-icon { flex:0 0 25px; width:25px; height:25px; margin-top:2px; }
.booking-picker { min-width:0; }
.booking-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 16px; }
.booking-tabs a { min-height:58px; padding:13px 17px; display:grid; place-items:center; text-align:center; color:var(--white); border:1px solid rgba(255,255,255,.5); border-radius:13px; font-weight:700; font-size:.8rem; line-height:1.45; }
.booking-tabs a[aria-selected="true"] { background:var(--terracotta); color:#173b45; border-color:var(--terracotta); }
.booking-form .form-heading { margin-bottom:25px; }
.booking-form .form-heading h3 { font-size:1.7rem; line-height:1.12; color:var(--ocean-dark); margin-bottom:12px; }
.booking-form .form-heading p { font-size:.81rem; line-height:1.8; color:var(--muted); margin:0; }
.weekly-date-note { color:var(--ocean-dark); font-size:.73rem; line-height:1.7; margin:18px 0; }
.booking-form input[readonly] { background-color:#eff6f7; color:var(--ocean-dark); cursor:default; }
.booking-form input[type="date"][readonly]::-webkit-calendar-picker-indicator { display:none; }
.message-field { display:block; margin-top:22px; }
.activity-options { min-width:0; padding:20px 0 0; margin:24px 0; border:0; border-top:1px solid var(--line); }
.activity-options legend { padding:0 10px 0 0; color:var(--ocean-dark); font-family:var(--display); font-size:1.23rem; }
.activity-options > p { color:var(--muted); font-size:.76rem; line-height:1.8; margin:8px 0 16px; }
.activity-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.booking-form .activity-check { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.booking-form .activity-check:has(input:checked) { background:#e8f6f8; border-color:var(--ocean); }
.booking-form .activity-check input { flex:0 0 18px; width:18px; height:18px; min-height:18px; margin:2px 0 0; padding:0; accent-color:var(--ocean); cursor:pointer; }
.booking-form .activity-check > span { text-transform:none; font-size:.75rem; letter-spacing:0; font-weight:600; line-height:1.5; margin:0; }
.lesson-estimate small { display:block; margin-top:9px; color:var(--muted); font-size:.7rem; line-height:1.7; }
.activity-photo { position:relative; aspect-ratio:10/7; overflow:hidden; }
.activity-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.activity-card:hover .activity-photo img { transform:scale(1.035); }
.activity-photo small,.activity-detail-photo > small { position:absolute; left:15px; bottom:13px; padding:5px 9px; color:var(--ocean-dark); background:rgba(255,255,255,.92); font-size:.57rem; border-radius:5px; }
@media(max-width:1100px) {
  .instagram-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .home-room-photo img { height:260px; }
  .home-room-copy { padding:21px; }
  .home-room-copy h3 { font-size:1.4rem; }
}
@media(max-width:760px) {
  .collage { grid-template-columns:1fr; gap:24px; margin-top:42px; }
  .collage .collage-card { max-width:520px; width:100%; margin:0 auto; transform:none; }
  .collage .collage-card img { aspect-ratio:5/4; }
  .collage .collage-card figcaption { min-height:0; font-size:.96rem; padding-top:15px; }
  .collage .sun-stamp { display:none; }
  .home-room-grid { grid-template-columns:1fr; gap:23px; }
  .home-room-photo img { height:auto; aspect-ratio:5/4; }
  .home-room-copy > p { min-height:0; }
  .home-stay-footer { flex-direction:column; align-items:flex-start; }
  .home-room-copy h3 { font-size:1.8rem; }
  .instagram-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .package-inclusion-panel { padding:25px 21px; }
  .package-inclusion-panel .inclusion-list { grid-template-columns:1fr; gap:19px; }
  .package-inclusion-panel li:first-child { grid-column:auto; }
  .booking-tabs a { padding:12px 8px; font-size:.72rem; }
  .activity-check-grid { grid-template-columns:1fr; }
}

/* ==========================================================================
   Design polish · October 2026
   Keeps the teal / terracotta identity, tightens hierarchy, contrast and
   mobile rhythm. Loaded last, so it refines the rules above.
   ========================================================================== */
:root {
  --muted: #4f5f63;
  --button-orange: #bb6232;
  --button-orange-hover: #a5542a;
  --button-blue: #007f9d;
  --soft-shadow: 0 1px 2px rgba(6,50,62,.06), 0 12px 32px rgba(6,50,62,.09);
}

/* Type & readability */
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.section-intro, .weekly-description, .why-grid p, .included-item p, .review-card p { font-weight: 500; }

/* Buttons: same shapes, stronger contrast for white labels */
.button-orange { background: var(--button-orange); box-shadow: 0 12px 28px rgba(187,98,50,.28); }
.button-orange:hover { background: var(--button-orange-hover); }
.button-blue { background: var(--button-blue); }
.button-blue:hover { background: var(--ocean-dark); }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffb27d; outline-offset: 3px; }

/* --- Package cards --------------------------------------------------- */
.weekly-card { display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,41,53,.16); transition: transform .3s ease, box-shadow .3s ease; }
.weekly-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,41,53,.22); }
.weekly-copy { display: flex; flex: 1; flex-direction: column; }
.weekly-description { min-height: 0; color: var(--muted); font-size: .9rem; }
.weekly-copy h4 { margin-top: 4px; color: var(--terracotta-deep); }
.focus-list { gap: 10px; }
.focus-list li { font-size: .9rem; font-weight: 500; }
.focus-list svg { flex-basis: 20px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: var(--white); background: var(--ocean); stroke-width: 2.6; }
.weekly-summary { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 22px 0 0; padding: 8px 14px 8px 10px; border-radius: 999px; color: var(--ocean-dark); background: rgba(0,138,170,.09); font-size: .75rem; font-weight: 700; }
.weekly-summary svg { width: 17px; height: 17px; stroke-width: 2.4; color: var(--ocean); }
.weekly-price { margin-top: auto; padding-top: 24px; border-top: 0; }
.weekly-summary { margin-bottom: 26px; }
.weekly-copy > .weekly-summary + .weekly-price { margin-top: auto; border-top: 1px solid var(--line); }
.related-packages .weekly-description { min-height: 0; }
.weekly-price strong { font-size: 2.35rem; line-height: 1; color: var(--ocean-dark); }
.weekly-price .button { min-height: 50px; padding-inline: 22px; font-size: .7rem; }
.weekly-chip { box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* Shared "every week includes" band */
.week-includes { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: start; margin-top: 34px; padding: 40px 44px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); color: var(--white); background: rgba(255,255,255,.08); }
.week-includes-head .eyebrow { margin-bottom: 14px; }
.week-includes-head p:last-child { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.25; letter-spacing: -.01em; }
.week-includes .inclusion-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; }
.week-includes .inclusion-list li { align-items: center; font-size: .86rem; font-weight: 500; line-height: 1.45; }
.week-includes .inclusion-list li:first-child { grid-column: 1 / -1; }
.week-includes .inclusion-icon { flex: 0 0 38px; width: 38px; height: 38px; margin: 0; padding: 8px; border-radius: 50%; color: var(--white); background: rgba(255,255,255,.14); }
.on-blue-note { max-width: none; margin-top: 22px; text-align: center; font-size: .8rem; opacity: .85; }

/* --- Surf school teaser ---------------------------------------------- */
.teaser-prices > div { background: var(--white); box-shadow: var(--soft-shadow); border-color: transparent; }
.teaser-prices > div > span { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.teaser-prices strong { color: var(--ocean-dark); font-size: 2.6rem; }
.teaser-discount { margin-top: 4px !important; padding: 8px 10px; border-radius: 10px; color: var(--terracotta-deep); background: rgba(229,142,84,.12); font-weight: 700; }

/* --- "Everything you need" features ----------------------------------- */
.line-icon { width: 58px; height: 58px; border: 0; background: rgba(0,138,170,.1); }
.line-icon svg { width: 28px; height: 28px; color: var(--ocean); stroke-width: 1.8; }
.included-item { transition: background .25s ease; }
.included-item:hover { background: var(--cream); }
.included-item p { color: var(--muted); }

/* --- Why panel -------------------------------------------------------- */
.why-grid article { transition: background .25s ease; }
.why-grid article:hover { background: rgba(0,138,170,.05); }
.why-grid article > span { font-size: 1rem; font-weight: 600; }
.why-grid p { font-size: .88rem; }

/* --- Guest experience -------------------------------------------------- */
.review-card { min-height: 0; padding: 36px 34px; background: var(--paper); box-shadow: var(--soft-shadow); border-color: transparent; }
.review-stars { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; border-radius: 50%; color: var(--terracotta-deep); background: rgba(229,142,84,.14); letter-spacing: 0; }
.review-stars svg { width: 28px; height: 28px; stroke-width: 2; }
.review-card:nth-child(2) .review-stars { color: var(--white); background: rgba(255,255,255,.16); }
.review-card p { margin-bottom: 0; font-size: .95rem; opacity: 1; }
.review-card:nth-child(2) p { color: rgba(255,255,255,.92); }

/* --- Rooms ------------------------------------------------------------- */
.home-room-card { transition: transform .3s ease, box-shadow .3s ease; }
.home-room-card:hover { transform: translateY(-6px); }

/* --- Booking ----------------------------------------------------------- */
.booking-copy > p:not(.eyebrow) { opacity: .92; font-weight: 500; }
.booking-contact a { grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 15px 18px; transition: background .2s ease, border-color .2s ease; }
.booking-contact a:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
.booking-contact-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ocean-dark); background: var(--white); }
.booking-contact-icon svg { width: 22px; height: 22px; }
.booking-contact small { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.booking-contact strong { margin-top: 0; font-size: .95rem; overflow-wrap: anywhere; }
.booking .booking-copy .fine-print { color: rgba(255,255,255,.82); }
.booking-tabs { padding: 6px; border-radius: 18px; background: rgba(0,0,0,.14); }
.booking-tabs a { min-height: 52px; border: 0; border-radius: 13px; transition: background .2s ease, color .2s ease; }
.booking-tabs a:hover { background: rgba(255,255,255,.12); }
.booking-tabs a[aria-selected="true"] { color: var(--ocean-dark); background: var(--white); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.booking-form { box-shadow: 0 30px 80px rgba(0,40,52,.3); }
.booking-form .form-heading h3 { font-size: 1.9rem; }
.booking-form input:not([type="checkbox"]), .booking-form select, .booking-form textarea { border-color: rgba(21,51,59,.2); background: #fff; }
.booking-form input:hover, .booking-form select:hover, .booking-form textarea:hover { border-color: rgba(0,138,170,.55); }
.activity-check { transition: border-color .2s ease, background .2s ease; }
.activity-check:has(input:checked) { border-color: var(--ocean); background: rgba(0,138,170,.07); }
.form-actions .button[disabled] { opacity: .55; filter: saturate(.7); }

/* --- FAQ ------------------------------------------------------------- */
.faq-list details { transition: background .2s ease; }

/* --- Footer ---------------------------------------------------------- */
.site-footer a { transition: color .2s ease; }

/* --- Tablet ---------------------------------------------------------- */
@media (max-width: 900px) {
  .week-includes { grid-template-columns: 1fr; gap: 26px; padding: 32px 30px; }
}

/* --- Mobile ---------------------------------------------------------- */
@media (max-width: 640px) {
  .section-pad { padding: 76px 0; }
  h2 { font-size: clamp(2.3rem, 10vw, 2.9rem); }

  /* Welcome collage → swipeable strip */
  .collage { display: flex; gap: 14px; width: 100%; margin: 34px 0 0; padding: 6px 24px 22px; scroll-padding-inline: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .collage::-webkit-scrollbar { display: none; }
  .collage .collage-card { flex: 0 0 76%; max-width: none; margin: 0; scroll-snap-align: start; }
  .collage .collage-card img { aspect-ratio: 4/5; }
  .collage .collage-card figcaption { font-size: .88rem; }

  /* Package cards */
  .weekly-grid { gap: 20px; }
  .weekly-photo { height: 210px; }
  .weekly-copy { padding: 24px 22px 26px; }
  .weekly-copy h3 { font-size: 1.85rem; }
  .weekly-description { font-size: .88rem; }
  .weekly-price { flex-direction: row; align-items: flex-end; }
  .weekly-price strong { font-size: 2rem; }
  .week-includes { padding: 26px 20px; border-radius: 22px; }
  .week-includes-head p:last-child { font-size: 1.2rem; }
  .week-includes .inclusion-list { grid-template-columns: 1fr; gap: 12px; }
  .week-includes .inclusion-list li { font-size: .84rem; }
  .week-includes .inclusion-icon { flex-basis: 34px; width: 34px; height: 34px; padding: 7px; }

  /* Features: compact two-column tiles */
  .included-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .included-item { min-height: 0; padding: 22px 16px; background: var(--paper); }
  .included-item h3 { font-size: 1.02rem; }
  .included-item p { font-size: .8rem; line-height: 1.55; }
  .line-icon { width: 46px; height: 46px; margin-bottom: 16px; }
  .line-icon svg { width: 23px; height: 23px; }

  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-grid article { min-height: 0; padding: 20px 16px; }
  .why-grid article > span { margin-bottom: 12px; }
  .why-grid h3 { font-size: 1.05rem; }
  .why-grid p { font-size: .8rem; }

  .review-grid { gap: 14px; }
  .review-card, .review-card:nth-child(2) { padding: 28px 24px; transform: none; }
  .review-card:nth-child(2):hover { transform: none; }

  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .instagram-grid a { aspect-ratio: 1; }

  .teaser-prices { grid-template-columns: 1fr; }

  .booking-contact a { padding: 13px 14px; }
  .booking-tabs a { min-height: 48px; font-size: .74rem; }
}

/* ==========================================================================
   Round 2 · 4-column packages, clearer type, new footer
   ========================================================================== */
:root {
  --ink: #10303a;
  --muted: #3a4b50;
}

/* Clearer, darker body copy everywhere */
body { color: var(--ink); }
p, li { font-weight: 500; }
.section-intro, .reviews-heading > p:last-child, .included-heading > p:last-child,
.faq-heading > p, .section-heading-row > p, .detail-split p, .info-card p,
.weekly-description, .fine-print, .welcome-copy .section-intro { color: var(--muted); }
.packages .section-heading-row > p, .stay .section-heading-row > p, .on-blue-note, .booking-copy > p:not(.eyebrow) { color: rgba(255,255,255,.94); opacity: 1; }
.page-hero-copy > p:not(.hero-kicker), .hero p { color: rgba(255,255,255,.95); }
.check-list li, .inclusion-list li { color: var(--ink); }
.week-includes .inclusion-list li { color: var(--white); }
.eyebrow { color: #b85c2c; }
.eyebrow-light, .packages .eyebrow, .stay .eyebrow, .booking .eyebrow { color: #ffd9bf; }
/* Coastline band: deeper orange so white text stays readable */
.coast { background: var(--button-orange); }
.coast-heading p { color: rgba(255,255,255,.95); font-weight: 500; }

/* --- Packages: four columns on wide screens ---------------------------- */
.packages .section-wrap { width: min(1280px, calc(100vw - 48px)); }
@media (min-width: 1181px) {
  .packages .weekly-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
  .packages .weekly-photo { height: 190px; }
  .packages .weekly-chip { top: 14px; left: 14px; padding: 7px 11px; font-size: .62rem; }
  .packages .weekly-photo-arrow { width: 36px; height: 36px; right: 14px; bottom: 14px; }
  .packages .weekly-copy { padding: 22px 20px 24px; }
  .packages .weekly-copy .eyebrow { font-size: .58rem; letter-spacing: .12em; }
  .packages .weekly-copy h3 { font-size: 1.45rem; margin-bottom: 12px; }
  .packages .weekly-description { font-size: .82rem; line-height: 1.65; margin-bottom: 16px; }
  .packages .focus-list li { font-size: .82rem; }
  .packages .weekly-summary { padding: 7px 11px 7px 8px; font-size: .66rem; }
  .packages .weekly-price { flex-direction: column; align-items: stretch; gap: 14px; }
  .packages .weekly-price strong { font-size: 2rem; }
  .packages .weekly-price .button { width: 100%; }
}

/* --- Footer ------------------------------------------------------------ */
.site-footer { position: relative; color: rgba(255,255,255,.86); background: #06343f; }
.footer-cta { display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center; transform: translateY(-50%); margin-bottom: -40px; padding: 46px 52px; border-radius: var(--radius-xl); color: var(--white); background: linear-gradient(120deg, var(--ocean-dark), var(--ocean)); box-shadow: 0 30px 70px rgba(0,40,52,.28); }
.site-footer { margin-top: 110px; }
.footer-cta h2 { margin-bottom: 10px; color: var(--white); font-size: clamp(2rem, 3.4vw, 3rem); }
.footer-cta p:not(.eyebrow) { max-width: 520px; margin: 0; color: rgba(255,255,255,.92); }
.footer-cta .eyebrow { margin-bottom: 12px; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-cta-actions .button svg { width: 20px; height: 20px; }
.footer-top { padding: 40px 0 56px; }
.footer-brand .brand img { padding: 6px; border-radius: 50%; background: var(--white); }
.footer-brand .brand-copy strong { color: var(--white); }
.footer-brand .brand-copy small { color: #ffb27d; }
.footer-brand p { color: rgba(255,255,255,.8); font-size: .9rem; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--white); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.footer-social a:hover { background: var(--button-orange); border-color: var(--button-orange); transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; }
.footer-column h3 { margin-bottom: 14px; color: var(--white); font-size: 1.08rem; }
.footer-column a, .footer-column p { color: rgba(255,255,255,.78); font-size: .88rem; line-height: 1.7; }
.footer-column a:hover, .footer-bottom a:hover { color: #ffb27d; }
.footer-bottom { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); font-size: .76rem; }
.footer-bottom a { color: var(--white); }

@media (max-width: 900px) {
  .footer-cta { grid-template-columns: 1fr; gap: 24px; padding: 36px 30px; }
}
@media (max-width: 640px) {
  .site-footer { margin-top: 150px; }
  .footer-cta { width: calc(100vw - 32px); padding: 30px 22px; transform: translateY(-40%); margin-bottom: -20px; border-radius: 26px; }
  .footer-cta-actions { flex-direction: column; }
  .footer-cta-actions .button { width: 100%; }
  .footer-top { padding-top: 24px; }
}
.packages .weekly-copy .eyebrow, .stay .home-room-copy .eyebrow { color: #b85c2c; }
.footer-cta { margin-bottom: -60px; }
/* CTA sits inside the footer (no overlap with the blue booking section above) */
.site-footer, .site-footer { margin-top: 0; padding-top: 72px; }
.footer-cta { transform: none; margin-bottom: 0; }
@media (max-width: 640px) {
  .site-footer { margin-top: 0; padding-top: 48px; }
  .footer-cta { transform: none; margin: 0 auto; }
}

/* ==========================================================================
   Round 3 · Package cards, surf house polaroids, Google reviews, booking CTA
   ========================================================================== */
:root { --script: "Caveat", "Segoe Script", cursive; --navy: #0b4a5a; }
.script-eyebrow { position: relative; display: inline-block; margin: 0 0 6px; color: #b85c2c; font-family: var(--script); font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.1; }
.script-eyebrow::after { content: ""; display: block; height: 7px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M1 5c10-4 20 4 30 0s20-4 30 0 20 4 30 0 20-4 28 0' fill='none' stroke='%23e58e54' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.script-light { color: #ffd2b3; }

/* --- Package section ----------------------------------------------------- */
.pkg-section { position: relative; background-color: #007893; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20c15-10 30 10 45 0s30-10 45 0 30 10 30 0' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(180deg, #00869f, #006a82); background-size: 120px 40px, 100% 100%; }
.pkg-heading { max-width: 860px; margin-bottom: 56px; text-align: center; }
.pkg-heading .script-eyebrow { color: #ffd2b3; }
.pkg-heading h2 { margin-bottom: 18px; color: var(--white); font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.pkg-heading > p:last-child { max-width: 680px; margin: 0 auto; color: rgba(255,255,255,.92); font-size: 1rem; }
.pkg-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; align-items: start; }
.weekly-card.pkg-card { display: flex; flex-direction: column; height: 100%; padding: 14px; overflow: visible; border-radius: 30px; color: var(--ink); background: #f3fbfd; box-shadow: 0 24px 50px rgba(0,30,40,.28); transition: transform .35s ease, box-shadow .35s ease; }
.pkg-card:nth-child(4n+1) { transform: rotate(-1.6deg); }
.pkg-card:nth-child(4n+2) { transform: rotate(1.2deg) translateY(14px); }
.pkg-card:nth-child(4n+3) { transform: rotate(-1deg); }
.pkg-card:nth-child(4n+4) { transform: rotate(1.6deg) translateY(14px); }
.weekly-card.pkg-card:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 34px 70px rgba(0,30,40,.36); }
.pkg-photo { position: relative; display: block; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: 22px; box-shadow: 0 10px 24px rgba(0,40,52,.18); }
.pkg-photo img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; transition: transform .6s ease; }
.pkg-photo:hover img { transform: scale(1.05); }
.pkg-badge { position: absolute; top: 12px; right: 12px; display: grid; justify-items: center; padding: 6px 12px 7px; border-radius: 14px; color: #10303a; background: linear-gradient(160deg, #ffd27a, #f6a95c); box-shadow: 0 6px 16px rgba(0,0,0,.2); line-height: 1; }
.pkg-badge small { margin-bottom: 3px; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pkg-badge b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.pkg-level { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 11px; border-radius: 999px; color: var(--white); background: rgba(6,52,63,.72); backdrop-filter: blur(6px); font-size: .66rem; font-weight: 700; }
.pkg-body { display: flex; flex: 1; flex-direction: column; padding: 18px 10px 8px; }
.pkg-num { color: var(--ocean); font-family: var(--script); font-size: 2rem; font-weight: 700; line-height: 1; }
.pkg-body h3 { margin: 2px 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,110,137,.18); color: var(--navy); font-size: 1.45rem; line-height: 1.1; }
.pkg-desc { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px dashed rgba(0,110,137,.28); color: var(--muted); font-size: .86rem; line-height: 1.65; }
.pkg-script { margin: 0 0 10px; color: var(--ocean); font-family: var(--script); font-size: 1.35rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pkg-list { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.pkg-list li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .82rem; font-weight: 500; line-height: 1.35; }
.pkg-list svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--ocean); stroke-width: 2; }
.pkg-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.pkg-price { display: grid; line-height: 1.05; }
.pkg-price small { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pkg-price strong { color: var(--navy); font-family: var(--display); font-size: 1.85rem; }
.pkg-price span { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.pkg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-radius: 999px; color: var(--white); background: var(--navy); box-shadow: 0 6px 0 #06343f, 0 10px 20px rgba(0,40,52,.25); font-size: .76rem; font-weight: 700; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.pkg-btn span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #10303a; background: #ffc56b; font-size: .8rem; }
.pkg-btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 #06343f, 0 6px 14px rgba(0,40,52,.25); }
.pkg-section .on-blue-note { margin-top: 46px; }
/* related packages on detail pages: three columns on a light background */
.related-packages .pkg-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.related-packages .weekly-card.pkg-card { box-shadow: 0 18px 40px rgba(0,41,53,.14); }
@media (max-width: 1180px) {
  .pkg-grid, .related-packages .pkg-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 26px; }
}
@media (max-width: 640px) {
  .pkg-grid, .related-packages .pkg-grid { grid-template-columns: 1fr; gap: 26px; }
  .pkg-card:nth-child(n) { transform: rotate(0); }
  .pkg-heading { margin-bottom: 36px; }
  .pkg-body h3 { font-size: 1.6rem; }
}

/* --- Surf house (home) ------------------------------------------------- */
.stay-home { background: #e9f6f9; }
.stay-home-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.stay-home-copy h2 { margin-bottom: 26px; color: var(--navy); font-size: clamp(2.4rem, 4.2vw, 3.8rem); }
.stay-home-copy > p:not(.script-eyebrow) { max-width: 470px; margin-bottom: 16px; color: var(--muted); font-size: .98rem; line-height: 1.75; }
.stay-home-prices { margin: 26px 0 30px; }
.stay-home-prices small { display: block; margin-bottom: 10px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stay-home-prices ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stay-home-prices li { display: grid; padding: 10px 14px; border-radius: 14px; background: var(--white); box-shadow: var(--soft-shadow); line-height: 1.2; }
.stay-home-prices li span { color: var(--muted); font-size: .72rem; font-weight: 600; }
.stay-home-prices li strong { color: var(--navy); font-family: var(--display); font-size: 1.3rem; }
.stay-home-copy .button-blue { box-shadow: 0 6px 0 var(--navy), 0 14px 26px rgba(0,110,137,.25); }
.stay-polaroids { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 16px; align-items: start; }
.stay-polaroid { display: block; padding: 8px 8px 16px; border-radius: 6px; background: var(--white); box-shadow: 0 14px 30px rgba(0,40,52,.16); transition: transform .3s ease, box-shadow .3s ease; }
.stay-polaroid img { width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 3px; object-fit: cover; }
.stay-polaroid:nth-child(n+4) img { aspect-ratio: 4 / 5; }
.stay-polaroid:nth-child(1) { transform: rotate(-3deg); }
.stay-polaroid:nth-child(2) { transform: rotate(2deg) translateY(8px); }
.stay-polaroid:nth-child(3) { transform: rotate(-1.5deg); }
.stay-polaroid:nth-child(4) { transform: rotate(2deg); }
.stay-polaroid:nth-child(5) { transform: rotate(-2deg) translateY(10px); }
.stay-polaroid:nth-child(6) { transform: rotate(1.5deg); }
.stay-polaroid:hover { z-index: 2; transform: rotate(0) scale(1.04); box-shadow: 0 22px 44px rgba(0,40,52,.24); }
@media (max-width: 1000px) { .stay-home-grid { grid-template-columns: 1fr; gap: 46px; } }
@media (max-width: 640px) {
  .stay-polaroids { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 12px; }
  .stay-polaroid { padding: 6px 6px 12px; }
}

/* --- Google reviews ---------------------------------------------------- */
.g-reviews { background: #fbf7f1; }
.g-reviews-head { position: relative; display: grid; justify-items: center; text-align: center; }
.g-reviews-head h2 { margin: 0; color: var(--navy); font-size: clamp(2.2rem, 4vw, 3.6rem); }
.g-score { position: absolute; left: 0; top: 50%; display: flex; align-items: center; gap: 12px; transform: translateY(-50%); }
.g-score > strong { color: var(--ocean); font-family: var(--display); font-size: 3.4rem; line-height: 1; }
.g-score > span { display: grid; gap: 4px; }
.g-score em { padding: 3px 10px; border-radius: 999px; background: var(--ocean); font-style: normal; }
.g-score em .g-stars { color: #ffd27a; font-size: .8rem; letter-spacing: .08em; }
.g-score small { color: var(--ocean-deep); font-size: .82rem; font-weight: 700; }
.g-intro { max-width: 760px; margin: 18px auto 46px; color: var(--muted); text-align: center; }
.g-reviews-body { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 28px; align-items: center; }
.g-summary { display: grid; justify-items: center; gap: 6px; text-align: center; }
.g-summary > strong { color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.g-summary .g-stars { color: #fbbc05; font-size: 2rem; letter-spacing: .02em; line-height: 1; }
.g-summary > span { color: var(--ink); font-size: .9rem; font-weight: 600; }
.g-wordmark { font-family: "Product Sans", Arial, sans-serif; font-size: 2.1rem; font-weight: 500; letter-spacing: -.03em; }
.g-wordmark i { font-style: normal; }
.g-track-wrap { position: relative; min-width: 0; }
.g-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; padding: 6px 2px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.g-track::-webkit-scrollbar { display: none; }
.g-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid #e3e3e3; border-radius: 14px; background: var(--white); scroll-snap-align: start; }
.g-card header { display: grid; grid-template-columns: 40px 1fr 20px; gap: 10px; align-items: center; margin-bottom: 10px; }
.g-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--white); font-weight: 700; object-fit: cover; }
.g-card header strong { display: block; overflow: hidden; color: #111; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.g-card header small { color: #70757a; font-size: .76rem; }
.g-logo { width: 20px; height: 20px; }
.g-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.g-rating .g-stars { color: #fbbc05; font-size: 1.05rem; letter-spacing: .04em; }
.g-verified { width: 15px; height: 15px; }
.g-text { display: -webkit-box; margin: 0; overflow: hidden; color: #222; font-size: .88rem; line-height: 1.5; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.g-text.is-open { display: block; }
.g-more { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; color: #70757a; background: none; font-size: .8rem; cursor: pointer; }
.g-more:hover { color: var(--ocean); }
.g-next { position: absolute; right: -14px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ddd; border-radius: 50%; color: #333; background: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,.12); font-size: 1.3rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
@media (max-width: 1180px) { .g-track { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 900px) {
  .g-score { position: static; transform: none; margin-bottom: 18px; }
  .g-reviews-body { grid-template-columns: 1fr; }
  .g-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .g-next { right: -6px; }
}
@media (max-width: 640px) { .g-track { grid-auto-columns: 84%; } }

/* --- Home booking CTA -------------------------------------------------- */
.booking-cta { text-align: center; }
.booking-cta-inner { position: relative; max-width: 820px; }
.booking-cta h2 { margin-bottom: 18px; color: var(--white); font-size: clamp(2.6rem, 5vw, 4.4rem); }
.booking-cta-inner > p:not(.script-eyebrow):not(.booking-cta-meta) { max-width: 620px; margin: 0 auto 34px; color: rgba(255,255,255,.94); font-size: 1.02rem; }
.booking-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.booking-cta-actions .button { min-width: 230px; }
.booking-cta-actions .button-whatsapp { color: #0b3b2a; background: #25d366; box-shadow: 0 12px 28px rgba(37,211,102,.3); }
.booking-cta-actions .button-whatsapp:hover { background: #1ebe5b; }
.booking-cta-actions .button svg { width: 22px; height: 22px; }
.booking-cta-meta { margin: 26px 0 0; color: rgba(255,255,255,.75); font-size: .74rem; font-weight: 700; letter-spacing: .12em; }
.site-footer.no-cta { padding-top: 24px; }
@media (max-width: 640px) { .booking-cta-actions .button { width: 100%; min-width: 0; } }

/* --- Home: extra activities -------------------------------------------- */
.home-activities { background: var(--paper); }
.home-activities-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 56px; align-items: center; }
.home-activities-photo { position: relative; margin: 0; padding: 10px 10px 18px; border-radius: 8px; background: var(--white); box-shadow: 0 20px 44px rgba(0,40,52,.16); transform: rotate(-2deg); }
.home-activities-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 4px; object-fit: cover; }
.home-activities-photo figcaption { padding: 12px 4px 0; color: var(--navy); font-family: var(--script); font-size: 1.35rem; font-weight: 700; text-align: center; }
.home-activities-head h2 { margin-bottom: 14px; color: var(--navy); font-size: clamp(2.3rem, 4vw, 3.6rem); }
.home-activities-head > p:last-child { max-width: 600px; margin-bottom: 28px; color: var(--muted); }
.home-activity-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 30px; }
.home-activity { position: relative; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 1 / 1.05; box-shadow: 0 12px 26px rgba(0,40,52,.14); }
.home-activity img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.home-activity::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,32,40,0) 35%, rgba(4,32,40,.86)); }
.home-activity:hover img { transform: scale(1.06); }
.home-activity-copy { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; color: var(--white); }
.home-activity-copy small { color: #ffd2b3; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.home-activity-copy strong { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; }
.home-activity-copy em { font-size: .74rem; font-style: normal; opacity: .9; }
.home-activities .button-blue { box-shadow: 0 6px 0 var(--navy), 0 14px 26px rgba(0,110,137,.25); }
@media (max-width: 1000px) {
  .home-activities-grid { grid-template-columns: 1fr; gap: 40px; }
  .home-activities-photo { order: 2; max-width: 420px; margin: 0 auto; }
  .home-activities-photo img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) { .home-activity-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .home-activity-copy strong { font-size: 1rem; } }
.photo-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; }

/* ==========================================================================
   Round 4 · Homepage design system applied to every page
   ========================================================================== */
/* Section labels: handwritten script with a small wave, like the homepage */
.eyebrow { margin-bottom: 8px; color: #b85c2c; font-family: var(--script); font-size: clamp(1.55rem, 2.3vw, 2rem); font-weight: 700; letter-spacing: 0; line-height: 1.1; text-transform: none; }
.eyebrow::before { display: none; }
.eyebrow::after { content: ""; display: block; width: 110px; height: 7px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M1 5c10-4 20 4 30 0s20-4 30 0 20 4 30 0 20-4 28 0' fill='none' stroke='%23e58e54' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left/100% 100% no-repeat; }
[style*="text-align:center"] .eyebrow::after, .reviews-heading .eyebrow::after, .why-top .eyebrow::after, .coast-heading .eyebrow::after, .welcome-copy .eyebrow::after { margin-inline: auto; }
.eyebrow-light, .packages .eyebrow, .booking .eyebrow, .coast .eyebrow { color: #ffd2b3; }
.weekly-copy .eyebrow, .activity-copy .eyebrow { font-size: 1.2rem; }
.weekly-copy .eyebrow::after, .activity-copy .eyebrow::after { display: none; }
h2 { color: var(--navy); }

/* Section rhythm: alternate the homepage's light blue, paper and sand */
.levels-section, .package-inclusions, .rooms-section, .contact-options, .booking-steps { background: #e9f6f9; }
.school-why, .room-prices, .lesson-prices, .detail-gallery { background: #fbf7f1; }

/* Cards: white, rounded, soft shadow, lift on hover (same as homepage cards) */
.info-card, .room-price-card, .lesson-price-card, .activity-card, .package-inclusion-panel { border: 0; background: var(--white); box-shadow: 0 1px 2px rgba(6,50,62,.06), 0 14px 34px rgba(6,50,62,.1); transition: transform .3s ease, box-shadow .3s ease; }
.info-card:hover, .room-price-card:hover, .lesson-price-card:hover, .activity-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(6,50,62,.06), 0 24px 48px rgba(6,50,62,.16); }
.info-card h3, .room-price-card h3, .lesson-price-card h3, .activity-card h2 { color: var(--navy); }
.step-number { color: var(--ocean); font-family: var(--script); font-size: 2rem; font-weight: 700; background: none; }
.room-price-card { border-radius: 26px; }
.room-price-card > img { height: 230px; margin: 10px 10px 0; width: calc(100% - 20px); border-radius: 18px; }
.room-price-card strong { color: var(--navy); font-size: 1.9rem; }
.text-link { color: var(--navy); }

/* Feature photos beside text: polaroid frame with a slight tilt */
.detail-image { min-height: 0; padding: 10px 10px 18px; border-radius: 8px; background: var(--white); box-shadow: 0 18px 40px rgba(0,40,52,.16); transform: rotate(-1.5deg); }
.stay-detail.alternate .detail-image, .detail-split > div + .detail-image { transform: rotate(1.5deg); }
.detail-image > img { min-height: 0; max-height: 520px; aspect-ratio: 4 / 3.2; border-radius: 4px; }
.about-page-portrait > img { aspect-ratio: 4 / 5; }
.detail-image .image-stamp { z-index: 2; }

/* Photo galleries: polaroid grid like "Your surf house" */
.photo-grid { gap: 20px 16px; }
.gallery-photo { padding: 8px 8px 16px; overflow: visible; border-radius: 6px; background: var(--white); box-shadow: 0 14px 30px rgba(0,40,52,.16); transition: transform .3s ease, box-shadow .3s ease; }
.gallery-photo img { height: auto; aspect-ratio: 4 / 4.6; border-radius: 3px; }
.gallery-photo:nth-child(4n+1) { transform: rotate(-2.2deg); }
.gallery-photo:nth-child(4n+2) { transform: rotate(1.6deg) translateY(8px); }
.gallery-photo:nth-child(4n+3) { transform: rotate(-1.2deg); }
.gallery-photo:nth-child(4n+4) { transform: rotate(2deg) translateY(8px); }
.gallery-photo:hover { z-index: 2; transform: rotate(0) scale(1.04); box-shadow: 0 22px 44px rgba(0,40,52,.24); }
.gallery-photo:hover img { transform: none; }
.gallery-photo > span { right: 18px; bottom: 26px; }

/* Jump links under page heroes: pill chips */
.page-jump-links { gap: 10px; padding: 22px 0; border-bottom: 0; }
.page-jump-links a { padding: 9px 16px; border-radius: 999px; color: var(--navy); background: var(--white); box-shadow: 0 4px 14px rgba(6,50,62,.08); transition: background .2s ease, color .2s ease; }
.page-jump-links a:hover { color: var(--white); background: var(--ocean); }

/* Buttons: homepage "pressed" style for primary blue buttons */
.button-blue { box-shadow: 0 6px 0 var(--navy), 0 14px 26px rgba(0,110,137,.22); }
.button-blue:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--navy), 0 8px 18px rgba(0,110,137,.22); }

/* Booking areas on every page: surf photo behind a teal overlay */
.booking { background: linear-gradient(180deg, rgba(0,96,118,.9), rgba(0,66,82,.94)), url("/public/icon-gallery/beach-warmup.webp") center 60% / cover no-repeat; }
.booking.booking-cta { padding: 150px 0; background: linear-gradient(180deg, rgba(0,58,72,.62) 0%, rgba(0,74,92,.72) 55%, rgba(0,58,72,.85) 100%), url("/public/icon-gallery/beach-warmup.webp") center 62% / cover no-repeat; }
.booking.booking-cta::before { opacity: .06; }
.booking-cta h2 { text-shadow: 0 4px 24px rgba(0,0,0,.25); }
.booking-cta-inner > p:not(.script-eyebrow):not(.booking-cta-meta) { text-shadow: 0 2px 12px rgba(0,0,0,.3); }
@media (max-width: 640px) { .booking.booking-cta { padding: 96px 0; } }

/* Mobile: calmer tilts */
@media (max-width: 640px) {
  .detail-image, .stay-detail.alternate .detail-image, .detail-split > div + .detail-image { transform: none; }
  .gallery-photo:nth-child(n) { transform: none; }
}
main .eyebrow { color: #b85c2c; }
main .eyebrow-light, main .packages .eyebrow, main .booking .eyebrow, main .coast .eyebrow { color: #ffd2b3; }

/* ==========================================================================
   Round 5 · Tighter spacing, richer section backgrounds, 3-col activities,
   refined header wordmark
   ========================================================================== */
:root {
  --bg-paper: #fffdf9;
  --bg-sand: #f6efe6;
  --bg-sky: #e8f5f8;
  --wave-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='48' viewBox='0 0 160 48'%3E%3Cpath d='M0 24c20-12 40 12 60 0s40-12 60 0 30 10 40 0' fill='none' stroke='%23008aaa' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");
  --sand-pattern: radial-gradient(rgba(184,92,44,.07) 1px, transparent 1.2px);
}

/* --- Spacing: less empty space everywhere ------------------------------ */
.section-pad { padding: 92px 0; }
.section-heading-row { margin-bottom: 40px; }
.why { min-height: 0; padding: 110px 0; }
.why-panel { margin-top: 0; padding: 56px; }
.why-top { margin-bottom: 40px; }
.page-hero { min-height: 470px; }
.page-hero-copy { padding: 140px 0 64px; }
.page-hero h1 { margin-bottom: 18px; font-size: clamp(3rem, 6vw, 5.2rem); }
.booking.booking-cta { padding: 120px 0; }
.pkg-heading { margin-bottom: 44px; }
.pkg-section .on-blue-note { margin-top: 36px; }
.g-intro { margin-bottom: 36px; }
.instagram { padding-top: 80px; }
.welcome .collage { margin-top: 48px; }
.page-jump-links { padding: 18px 0 0; }
.stay-home-grid, .home-activities-grid { gap: 52px; }
.faq-layout { gap: 60px; }
h2 { margin-bottom: 18px; }
@media (max-width: 900px) {
  .section-pad { padding: 72px 0; }
  .why { padding: 80px 0; }
  .why-panel { padding: 40px 28px; }
  .page-hero { min-height: 400px; }
  .page-hero-copy { padding: 128px 0 52px; }
}
@media (max-width: 640px) {
  .section-pad { padding: 56px 0; }
  .section-heading-row { margin-bottom: 28px; }
  .page-hero { min-height: 360px; }
  .page-hero-copy { padding: 116px 0 44px; }
  .page-hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .booking.booking-cta { padding: 80px 0; }
  .instagram { padding-top: 56px; }
}

/* --- Section backgrounds: clear alternation with soft texture ---------- */
.welcome, .about, .g-reviews, .school-why, .room-prices, .lesson-prices, .detail-gallery, .stay-detail.alternate { background-color: var(--bg-sand); background-image: var(--sand-pattern); background-size: 18px 18px; }
.stay-home, .faq, .levels-section, .package-inclusions, .rooms-section, .contact-options, .booking-steps, .location-section, .activities-section { background-color: var(--bg-sky); background-image: var(--wave-pattern); background-size: 160px 48px; }
.school-teaser, .home-activities, .instagram, .included, .stay-detail, .related-packages, .legal-page { background-color: var(--bg-paper); background-image: none; }
/* soft fade between textured and plain sections */
.stay-home, .faq, .levels-section, .rooms-section, .contact-options, .booking-steps, .activities-section { box-shadow: inset 0 24px 40px -36px rgba(0,60,75,.25); }

/* --- Activities page: three columns on desktop ------------------------- */
.activity-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.activity-card { display: flex; flex-direction: column; border-radius: 24px; }
.activity-photo { aspect-ratio: 4 / 3; margin: 10px 10px 0; border-radius: 18px; }
.activity-copy { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.activity-copy h2 { margin-bottom: 10px; font-size: 1.6rem; }
.activity-copy > p { min-height: 0; margin-bottom: 16px; font-size: .86rem; line-height: 1.7; }
.activity-bottom { margin-top: auto; }
@media (max-width: 1100px) { .activity-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .activity-grid { grid-template-columns: 1fr; } .activity-copy h2 { font-size: 1.6rem; } }

/* --- Header wordmark ----------------------------------------------------- */
.header-brand { gap: 12px; }
.header-brand img { width: 54px; height: 54px; padding: 2px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 2px rgba(0,138,170,.14); }
.header-brand .brand-copy { position: relative; display: grid; gap: 3px; padding-left: 12px; }
.header-brand .brand-copy::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--ocean), var(--terracotta)); }
.header-brand .brand-copy strong { color: var(--navy); font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.header-brand .brand-copy small { display: flex; align-items: center; gap: 6px; color: #b85c2c; font-size: .6rem; font-weight: 800; letter-spacing: .34em; line-height: 1; }
.mobile-menu-head .brand-copy strong { color: var(--navy); font-weight: 700; }
@media (max-width: 1180px) { .header-brand .brand-copy strong { font-size: 1.32rem; } }
@media (max-width: 640px) { .header-brand img { width: 46px; height: 46px; } .header-brand .brand-copy strong { font-size: 1.22rem; } .header-brand .brand-copy small { font-size: .54rem; letter-spacing: .28em; } }

/* ==========================================================================
   Round 6 · Surf lessons prices, surf house rooms & life, surfskate gallery
   ========================================================================== */
.lp-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.lp-head h2 { margin-bottom: 12px; }
.lp-head > p:last-child { margin: 0 auto; color: var(--muted); }
.lp-head .script-eyebrow::after { margin-inline: auto; }

/* Lesson prices: two featured cards + four compact formats */
.lp-featured { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; max-width: 980px; margin: 0 auto; }
.lp-card { padding: 0; overflow: hidden; border-radius: 28px; }
.lp-card.is-popular { box-shadow: 0 0 0 3px var(--ocean), 0 24px 50px rgba(0,80,100,.2); }
.lp-photo { position: relative; aspect-ratio: 16 / 8; margin: 10px 10px 0; overflow: hidden; border-radius: 20px; }
.lp-photo img { width: 100%; height: 100%; object-fit: cover; }
.lp-popular { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px; color: #10303a; background: linear-gradient(160deg, #ffd27a, #f6a95c); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lp-body { display: flex; flex: 1; flex-direction: column; padding: 22px 26px 28px; }
.lp-body h3 { margin: 0 0 6px; font-size: 1.7rem; }
.lp-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.lp-price strong { color: var(--navy); font-family: var(--display); font-size: 3.4rem; line-height: 1; }
.lp-price span { color: var(--muted); font-size: .9rem; font-weight: 600; }
.lp-group { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: 14px; color: var(--navy); background: #e8f5f8; font-size: .84rem; }
.lp-group svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--ocean); }
.lp-group b { font-size: 1rem; }
.lp-body h4 { margin: 4px 0 12px; }
.lp-body .inclusion-list { margin-bottom: 22px; }
.lp-btn { align-self: stretch; margin-top: auto; }
.lp-btn span { margin-left: 4px; }
.lp-sub { margin: 56px 0 22px; color: var(--navy); font-size: 1.5rem; text-align: center; }
.lp-others { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.lp-mini { padding: 22px; border-radius: 22px; }
.lp-mini h3 { margin-bottom: 8px; font-size: 1.22rem; }
.lp-mini > p { margin-bottom: 14px; font-size: .82rem; line-height: 1.6; }
.lp-mini-prices { display: flex; gap: 10px; margin-bottom: 12px; }
.lp-mini-prices span { display: grid; flex: 1; padding: 10px 12px; border-radius: 14px; background: #f6efe6; line-height: 1.15; }
.lp-mini-prices small { color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lp-mini-prices b { color: var(--navy); font-family: var(--display); font-size: 1.45rem; }
.lp-mini-prices .lp-request { place-items: center; }
.lp-mini-prices .lp-request b { font-size: 1.1rem; }
.lp-note { display: flex; gap: 8px; margin: 0 0 14px !important; color: var(--navy) !important; font-size: .76rem !important; font-weight: 600; }
.lp-note svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ocean); }
.lp-mini .lesson-book-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; }
@media (max-width: 1100px) { .lp-others { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .lp-featured, .lp-others { grid-template-columns: 1fr; } .lp-price strong { font-size: 2.8rem; } }

/* Surf house rooms with real prices */
.room-price-card > div { gap: 10px; padding: 20px 24px 26px; }
.room-rate { display: grid; gap: 2px; margin-top: 4px; padding: 14px 16px; border-radius: 16px; background: #e8f5f8; line-height: 1.15; }
.room-rate small { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.room-rate strong { color: var(--navy); font-family: var(--display); font-size: 2.3rem; }
.room-rate span { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.room-yoga { margin: 0 !important; color: var(--navy) !important; font-size: .82rem !important; font-weight: 600; }
.room-btn { margin-top: 6px; }
.stay-includes { margin-top: 34px; padding: 28px 32px; border-radius: 24px; background: var(--white); box-shadow: 0 14px 34px rgba(6,50,62,.1); }
.stay-includes h3 { margin-bottom: 16px; color: var(--navy); font-size: 1.35rem; }
.stay-includes .inclusion-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 24px; }
.stay-includes .inclusion-list li { align-items: center; font-size: .86rem; }
.stay-includes .inclusion-icon { flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: var(--ocean); background: #e8f5f8; }
.stay-only { margin-top: 18px; text-align: center; }
.stay-only .text-link { margin-left: 8px; }
@media (max-width: 900px) { .stay-includes .inclusion-list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .stay-includes { padding: 22px 18px; } .stay-includes .inclusion-list { grid-template-columns: 1fr; } }

/* Life at the surf house: 2×2 photo cards instead of four long sections */
.stay-life { background-color: var(--bg-paper); }
.stay-life-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.stay-life-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; overflow: hidden; border-radius: 24px; background: var(--white); box-shadow: 0 14px 34px rgba(6,50,62,.1); scroll-margin-top: 120px; }
.stay-life-photo { padding: 10px 0 10px 10px; }
.stay-life-photo img { width: 100%; height: 100%; min-height: 210px; border-radius: 18px; object-fit: cover; }
.stay-life-copy { padding: 22px 24px; }
.stay-life-copy h3 { margin-bottom: 8px; color: var(--navy); font-size: 1.4rem; }
.stay-life-copy p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.stay-life .center-action { margin-top: 34px; }
@media (max-width: 1000px) { .stay-life-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stay-life-card { grid-template-columns: 1fr; } .stay-life-photo { padding: 10px 10px 0; } .stay-life-photo img { min-height: 0; aspect-ratio: 16 / 10; } }

/* Three-photo galleries */
.photo-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 980px; }
@media (max-width: 640px) { .photo-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ==========================================================================
   Round 7 · Package dropdown, package page inclusions & wide gallery
   ========================================================================== */
/* Dropdown with photo, name and starting price */
.package-nav-panel { width: 400px; padding: 10px; }
.package-nav-panel .nav-all-packages { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding: 10px 12px; border-radius: 12px; color: var(--white); background: var(--ocean); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.package-nav-panel .nav-all-packages:hover { background: var(--navy); }
.pack-link { display: grid !important; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px !important; padding: 8px !important; border-radius: 14px !important; }
.pack-link img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.pack-link-copy { display: grid; gap: 3px; min-width: 0; }
.pack-link-copy strong { color: var(--navy); font-family: var(--display); font-size: .98rem; font-weight: 600; line-height: 1.15; }
.pack-link-copy small { color: var(--muted); font-size: .66rem; font-weight: 600; opacity: 1; }
.pack-link-price { display: grid; justify-items: end; padding: 5px 9px; border-radius: 10px; background: linear-gradient(160deg, #ffd27a, #f6a95c); color: #10303a; line-height: 1; }
.pack-link-price small { font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: 1; }
.pack-link-price b { margin-top: 2px; font-family: var(--display); font-size: 1rem; }
.dropdown-panel .pack-link:hover { color: inherit; background: #e8f5f8; }
.dropdown-panel .pack-link:hover strong { color: var(--ocean); }
.mobile-submenu .pack-link { grid-template-columns: 48px 1fr auto; padding: 8px 4px !important; }
.mobile-submenu .pack-link img { width: 48px; height: 48px; }
.mobile-submenu .pack-link-copy strong { font-size: .9rem; }

/* Package page: "What's included" as icon cards */
.package-inclusion-panel.incl-cards { margin-top: 0; padding: 0; background: none; box-shadow: none; }
.incl-cards .inclusion-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.incl-cards li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px !important; border-radius: 20px; background: var(--white); box-shadow: 0 10px 26px rgba(6,50,62,.08); font-size: .9rem !important; font-weight: 600; line-height: 1.45 !important; transition: transform .25s ease; }
.incl-cards li:hover { transform: translateY(-4px); }
.incl-cards li:first-child { grid-column: span 2; color: var(--white); background: linear-gradient(135deg, var(--ocean), var(--navy)); }
.incl-cards .inclusion-icon { flex: 0 0 auto !important; width: 46px !important; height: 46px !important; margin: 0 !important; padding: 10px; border-radius: 14px; color: var(--ocean); background: #e8f5f8; }
.incl-cards li:first-child .inclusion-icon { color: var(--white); background: rgba(255,255,255,.18); }
.incl-cards li[data-inclusion="yoga"] { color: var(--navy); background: #fff4e6; }
.incl-price-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; padding: 18px 22px; border-radius: 22px; background: var(--white); box-shadow: 0 10px 26px rgba(6,50,62,.08); }
.incl-price-bar > div { display: grid; margin-right: auto; line-height: 1.1; }
.incl-price-bar small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.incl-price-bar strong { color: var(--navy); font-family: var(--display); font-size: 2.2rem; }
.incl-price-bar span { color: var(--muted); font-size: .76rem; }
@media (max-width: 900px) { .incl-cards .inclusion-list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .incl-cards .inclusion-list { grid-template-columns: 1fr; }
  .incl-cards li:first-child { grid-column: auto; }
  .incl-price-bar .button { width: 100%; }
}

/* Package page gallery: wide photos shown in full, no cropping or tilt */
.gallery-wide .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; max-width: none; align-items: start; }
.gallery-wide .gallery-photo, .gallery-wide .gallery-photo:nth-child(n) { padding: 10px; border-radius: 22px; transform: none; }
.gallery-wide .gallery-photo img { aspect-ratio: auto; height: auto; max-height: 560px; border-radius: 14px; object-fit: contain; background: #f6efe6; }
.gallery-wide .gallery-photo > span { right: 22px; bottom: 22px; }
.gallery-wide .gallery-photo:hover { transform: translateY(-4px); }
@media (max-width: 640px) { .gallery-wide .photo-grid { grid-template-columns: 1fr; } }
.incl-cards li:first-child { grid-column: auto; }
.incl-cards li:first-child:nth-last-child(10) { grid-column: 1 / -1; }
.gallery-wide .gallery-photo { aspect-ratio: auto; height: auto; }
.gallery-wide .gallery-photo img { display: block; width: 100%; }
@media (max-width: 900px) { .incl-cards li:first-child:nth-last-child(10) { grid-column: auto; } }