/* ============================================================
   Indo Surf Bali · Canggu, Kuta & Medewi
   Palette : paper white + blue-hour ink + dawn rose (straw for script accents only)
   Type    : Fraunces (display, soft/wonk axes) + Nunito Sans (body)
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg:            #FBFAF7;
  --bg-alt:        #F2F0EA;
  --surface:       #F2F0EA;
  --surface-sunk:  #FBFAF7;

  --text:          #17335C;
  --text-soft:     #6E7484;
  --heading:       #17335C;

  --deep:          #17335C;
  --deep-2:        #17335C;
  --on-deep:       #FBFAF7;
  --on-deep-soft:  #D3D8E2;

  --btn-bg:        #17335C;
  --btn-bg-hover:  #0F2545;
  --btn-fg:        #FBFAF7;

  /* rose is decorative only: rules, stickers, hover lines. Never text on white. */
  --accent:        #E3A9A6;
  --accent-soft:   #E3A9A6;
  --accent-wash:   #F7E6E4;
  --on-accent:     #17335C;

  /* sunny gingham yellow: decorative only (patterns, highlighter, stickers, script over photos) */
  --sun:           #E9C46A;
  --sun-wash:      #FBF4DE;
  --gingham-alpha: 45%;
  --cream:         #FBFAF7;

  --map-sea:       #F2F0EA;
  --map-shallow:   #E2DFD7;
  --map-land:      #FBFAF7;
  --map-land-ink:  #6E7484;
  --map-ink:       #17335C;

  --border:        #E2DFD7;
  --border-soft:   #E2DFD7;
  --ring:          #17335C;

  --shadow-sm: 0 1px 2px rgba(23, 51, 92, .05), 0 4px 12px rgba(23, 51, 92, .04);
  --shadow-md: 0 2px 6px rgba(23, 51, 92, .06), 0 16px 40px rgba(23, 51, 92, .08);
  --shadow-lg: 0 4px 10px rgba(23, 51, 92, .07), 0 28px 64px rgba(23, 51, 92, .14);

  --grain: .045;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Nunito Sans", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --script: "Mrs Saint Delafield", "Snell Roundhand", "Brush Script MT", cursive;

  --step--1: clamp(.82rem, .8rem + .1vw, .9rem);
  --step-0:  clamp(1.06rem, 1.01rem + .22vw, 1.19rem);
  --step-1:  clamp(1.28rem, 1.18rem + .4vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + .8vw, 2.1rem);
  --step-3:  clamp(2.05rem, 1.7rem + 1.5vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E1B30;
    --bg-alt:        #13243F;
    --surface:       #13243F;
    --surface-sunk:  #0E1B30;

    --text:          #E9ECF2;
    --text-soft:     #A6AEBF;
    --heading:       #FBFAF7;

    --deep:          #0A1426;
    --deep-2:        #C9D0DC;
    --on-deep:       #FBFAF7;
    --on-deep-soft:  #C9D0DC;

    --btn-bg:        #FBFAF7;
    --btn-bg-hover:  #E9ECF2;
    --btn-fg:        #17335C;

    --accent:        #E3A9A6;
    --accent-soft:   #E3A9A6;
    --accent-wash:   #3A2E3E;
    --on-accent:     #17335C;

    --sun:           #E9C46A;
    --sun-wash:      #16243C;
    --gingham-alpha: 16%;
    --map-sea:       #13243F;
    --map-shallow:   #22375A;
    --map-land:      #1B3053;
    --map-land-ink:  #A6AEBF;
    --map-ink:       #F2F0EA;

    --border:        #263A5C;
    --border-soft:   #22355A;
    --ring:          #E3A9A6;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.4);
    --shadow-lg: 0 4px 10px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.5);

    --grain: .05;
  }
}

:root[data-theme="dark"] {
  --bg:            #0E1B30;
  --bg-alt:        #13243F;
  --surface:       #13243F;
  --surface-sunk:  #0E1B30;
  --text:          #E9ECF2;
  --text-soft:     #A6AEBF;
  --heading:       #FBFAF7;
  --deep:          #0A1426;
  --deep-2:        #C9D0DC;
  --on-deep:       #FBFAF7;
  --on-deep-soft:  #C9D0DC;
  --btn-bg:        #FBFAF7;
  --btn-bg-hover:  #E9ECF2;
  --btn-fg:        #17335C;
  --accent:        #E3A9A6;
  --accent-soft:   #E3A9A6;
  --accent-wash:   #3A2E3E;
  --on-accent:     #17335C;
  --sun:           #E9C46A;
  --sun-wash:      #16243C;
  --gingham-alpha: 16%;
  --map-sea:       #13243F;
  --map-shallow:   #22375A;
  --map-land:      #1B3053;
  --map-land-ink:  #A6AEBF;
  --map-ink:       #F2F0EA;
  --border:        #263A5C;
  --border-soft:   #22355A;
  --ring:          #E3A9A6;
  --grain: .05;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.68;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::after { mix-blend-mode: overlay; }
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--heading);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; font-weight: 650; }

p { margin: 0; }

a { color: inherit; }

::selection { background: var(--accent-soft); color: var(--on-accent); }

:where(a, button, select, input, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 0; }

.wrap {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ---------- shared bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .19em;
  font-weight: 800;
  color: var(--text-soft);
  margin: 0 0 .9rem;
}
.eyebrow::before {
  content: "";
  flex: 0 0 2.4em;
  height: 3px;
  border-radius: 3px;
  background: var(--sun);
}
.eyebrow-light { color: var(--cream); }

.section { padding-block: clamp(72px, 10vw, 132px); }

.section-head { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head-left { margin-inline: 0; text-align: left; }
.section-lede {
  margin-top: 1.1rem;
  color: var(--text-soft);
  font-size: var(--step-1);
  line-height: 1.55;
}

.lead { font-size: var(--step-1); line-height: 1.55; }

/* visible blank for details still to be confirmed */
.tbd {
  display: inline-block;
  font-family: var(--sans);
  font-size: .8em;
  font-weight: 800;
  font-style: normal;
  letter-spacing: .03em;
  line-height: 1.35;
  color: var(--heading);
  background: var(--accent-wash);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: .05em .45em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95em 1.7em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); }

.btn-ghost { border-color: var(--heading); color: var(--heading); background: transparent; }
.btn-ghost:hover { background: var(--heading); color: var(--bg); }

.btn-ghost-light { border-color: rgba(251, 250, 247, .5); color: var(--cream); }
.btn-ghost-light:hover { border-color: var(--accent); background: rgba(251, 250, 247, .08); }

/* sits on the dark photo band, so it is paper on ink in both themes */
.btn-whatsapp { background: var(--cream); color: #17335C; box-shadow: var(--shadow-md); }
.btn-whatsapp:hover { background: #FFFFFF; }
.wa-icon {
  width: 1.25em; height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow .3s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(23, 51, 92, .07); }

.header-inner {
  width: min(1440px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  text-decoration: none;
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
  margin-right: auto;
}
.wordmark-name {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem);
  font-weight: 800;
  line-height: 1;
  color: var(--heading);
  letter-spacing: -.02em;
}
.wordmark-name em {
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.wordmark-sub {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--text-soft);
  font-weight: 700;
  padding-left: .15em;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.6vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--text);
  padding: .35em .1em;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-link:hover {
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.nav-link-strong { font-weight: 900; color: var(--heading); }

.swipe {
  position: absolute;
  z-index: -1;
  left: -9%;
  width: 118%;
  top: 42%;
  height: .95em;
  fill: var(--sun);
  opacity: .75;
}

.header-end { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: .5em 1em;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--heading);
  cursor: pointer;
}
.menu-bars { display: grid; gap: 4px; width: 16px; }
.menu-bars span { height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.menu-toggle[aria-expanded="true"] .menu-bars span:first-child { transform: translateY(3px) rotate(11deg); }
.menu-toggle[aria-expanded="true"] .menu-bars span:last-child  { transform: translateY(-3px) rotate(-11deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 74vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--gutter);
  padding-bottom: clamp(130px, 17vh, 190px);
  padding-top: clamp(56px, 12vh, 120px);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--deep); }
.hero-video,
.hero-media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.95);
  animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 75% 62% at 50% 52%, rgba(12, 24, 44, .55) 0%, rgba(12, 24, 44, .28) 60%, rgba(12, 24, 44, .1) 100%),
    linear-gradient(to top, rgba(12, 24, 44, .45) 0%, rgba(12, 24, 44, 0) 45%);
}

.hero-copy {
  width: min(1100px, 100%);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--cream);
}
.hero-copy h1 {
  display: grid;
  justify-items: center;
  color: var(--cream);
  font-size: clamp(2.2rem, 1.1rem + 4.4vw, 5.2rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.025em;
  text-shadow: 0 3px 34px rgba(20, 12, 6, .42);
}
.h1-main { display: block; max-width: 17ch; }
.h1-script {
  display: block;
  margin-top: -.02em;
  font-family: var(--script);
  font-weight: 400;
  font-size: max(.72em, 2.1rem);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--sun);
  transform: rotate(-4deg);
  text-shadow: 0 1px 2px rgba(20, 12, 6, .55), 0 2px 18px rgba(20, 12, 6, .6);
}
.hero-lede {
  margin-top: 1.5rem;
  max-width: 50ch;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--cream);
  text-shadow:
    0 1px 2px rgba(20, 12, 6, .75),
    0 0 12px rgba(20, 12, 6, .6),
    0 2px 28px rgba(20, 12, 6, .5);
}
.hero-corners {
  position: absolute;
  top: clamp(18px, 3.2vw, 34px);
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(20, 12, 6, .6);
}
@media (max-width: 720px) {
  .hero-corners li:not(:first-child) { display: none; }
}

/* booking card, overlapping the hero's bottom edge */
.booking-wrap {
  position: relative;
  z-index: 5;
  margin-top: clamp(-150px, -9vw, -80px);
  padding-inline: var(--gutter);
}
.booking-card {
  position: relative;
  margin-inline: auto;
  width: min(880px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3vw, 32px);
}
.booking-title {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 1rem;
}
.booking-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.field { display: grid; gap: .4rem; min-width: 0; }
.field label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  color: var(--text-soft);
}
.field select,
.field input {
  font: inherit;
  font-size: var(--step-0);
  color: var(--text);
  background: var(--surface-sunk);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: .8em .95em;
  width: 100%;
  min-width: 0;
  appearance: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2317335C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 11px;
  padding-right: 2.6em;
}
.field select:hover, .field input:hover { border-color: var(--text-soft); }
.booking-btn { white-space: nowrap; padding-block: 1.05em; }
.booking-btn .wa-icon { width: 1.15em; height: 1.15em; }
.booking-note {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* organic transition from hero into the sand */
.wave-top {
  position: relative;
  z-index: 3;
  margin-top: clamp(-92px, -8vw, -56px);
  line-height: 0;
  pointer-events: none;
}
.wave-top svg { width: 100%; height: clamp(56px, 8vw, 92px); fill: var(--bg); display: block; }

/* ---------- instructor ---------- */
.section-instructor { background: var(--bg-alt); }
.instructor-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.instructor-figure { margin: 0; }
.instructor-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 60px;
  box-shadow: var(--shadow-md);
}
.instructor-figure figcaption {
  margin-top: .9rem;
  font-size: var(--step--1);
  color: var(--text-soft);
  font-style: italic;
  padding-left: .4rem;
}
.instructor-copy { display: grid; gap: 1.15rem; }
.instructor-copy h2 { font-size: var(--step-2); }
.instructor-copy p { color: var(--text-soft); }
.instructor-copy .lead { color: var(--text); }

.creds {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.creds li {
  padding: .5em .95em;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.strengths {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.2rem;
}
.strengths li {
  display: grid;
  gap: .4rem;
  align-content: start;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.strengths h3 { font-size: 1.12rem; color: var(--heading); }
.strengths p { font-size: .97rem; line-height: 1.6; }
@media (max-width: 560px) {
  .strengths { grid-template-columns: 1fr; }
}

/* ---------- lessons ---------- */
.section-lessons { padding-top: clamp(64px, 8vw, 110px); }
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
}
.price-card h3 { color: var(--heading); }
.price-sub { font-size: var(--step--1); color: var(--text-soft); }
.price { margin-top: .5rem; display: grid; gap: .1rem; }
.price-main {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 800;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.price-main .tbd { font-size: .55em; vertical-align: middle; }
.price-per { font-size: var(--step--1); color: var(--text-soft); }

.price-meta {
  list-style: none;
  margin: .9rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: .45rem;
  font-size: var(--step--1);
}
.price-meta li { display: flex; gap: .7rem; align-items: baseline; }
.price-meta span {
  flex: 0 0 4.2em;
  text-transform: uppercase;
  font-size: .62rem;
  letter-spacing: .13em;
  font-weight: 800;
  color: var(--text-soft);
}
.price-note {
  margin-top: .9rem;
  margin-bottom: 1.4rem;
  font-size: var(--step--1);
  color: var(--text-soft);
  line-height: 1.6;
}
.price-card > .btn { margin-top: auto; align-self: start; }

.extras {
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem clamp(24px, 4vw, 56px);
}
@media (max-width: 640px) {
  .extras { grid-template-columns: 1fr; }
}
.extras-label { grid-column: 1 / -1; margin: 0; }
.extra { display: grid; gap: .4rem; align-content: start; }
.extra h3 { color: var(--heading); }
.extra p { color: var(--text-soft); max-width: 52ch; }

.price-footnote {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* ---------- how it works ---------- */
/* what's included */
/* yellow gingham behind a paper panel */
.section-included {
  background-color: var(--sun-wash);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--sun) var(--gingham-alpha), transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--sun) var(--gingham-alpha), transparent) 50%, transparent 50%);
  background-size: 34px 34px;
}
.section-included .included-grid {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 64px);
  box-shadow: var(--shadow-md);
}
.included-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.included-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.included-col h3 {
  margin-bottom: .3rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.kit { list-style: none; margin: 0; padding: 0; display: grid; }
.kit li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .85rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 650;
  font-size: var(--step-1);
  color: var(--heading);
}
.kit li span {
  flex-basis: 100%;
  padding-left: calc(28px + .85rem);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
}
.kit-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--text-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.included-col-provided .kit-icon { stroke: var(--heading); }
@media (max-width: 900px) {
  .included-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .included-lists { grid-template-columns: 1fr; }
}

/* full-bleed photo poster, after the film-still references */
.poster-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.94);
}
.poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(380px, 62vh, 620px);
  display: grid;
  place-items: center;
  padding: clamp(64px, 9vw, 110px) var(--gutter);
  text-align: center;
  color: var(--cream);
}
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(12, 24, 44, .45), rgba(12, 24, 44, .12) 75%);
}
.poster-copy { margin: 0; display: grid; justify-items: center; }
.poster-script {
  position: relative;
  z-index: 1;
  margin-bottom: -.28em;
  font-family: var(--script);
  font-size: clamp(2.4rem, 1.2rem + 4vw, 5rem);
  line-height: 1;
  color: var(--sun);
  transform: rotate(-5deg);
  text-shadow: 0 1px 2px rgba(20, 12, 6, .55), 0 2px 18px rgba(20, 12, 6, .6);
}
.poster-title {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 900;
  font-size: clamp(3rem, 1.2rem + 7.4vw, 8.4rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--cream);
  text-shadow: 0 3px 30px rgba(20, 12, 6, .45);
}
.poster-corners,
.poster-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(20, 12, 6, .6);
}
.poster-corners { top: clamp(18px, 3vw, 32px); }
.poster-foot { bottom: clamp(18px, 3vw, 32px); }
@media (max-width: 480px) {
  .poster-corners, .poster-foot { font-size: .6rem; letter-spacing: .16em; }
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 3.4vw, 44px);
  counter-reset: step;
}
.step { position: relative; display: grid; gap: .5rem; align-content: start; padding-top: 1.2rem; }
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
}
.step:first-child::before { background: var(--sun); }
.step-num {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: .95rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: .1em;
}
.step-icon {
  width: 46px; height: 46px;
  margin: .3rem 0 .2rem;
  fill: none;
  stroke: var(--deep-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step h3 { color: var(--heading); }
.step p:last-child { color: var(--text-soft); font-size: .97rem; line-height: 1.62; }

/* ---------- breaks ---------- */
.break-areas { display: grid; gap: clamp(44px, 6vw, 76px); }
.break-areas-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 60px) clamp(24px, 3vw, 40px);
}
.area-head {
  display: grid;
  gap: .3rem;
  margin-bottom: 1.2rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.area-name { font-size: var(--step-2); }
.area-note { color: var(--text-soft); font-size: .97rem; max-width: 60ch; }

/* illustrated spot map */
.spot-map { margin: 0 0 clamp(40px, 6vw, 72px); }
.spot-map svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--map-sea);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.spot-map .sea-wave { fill: none; stroke: var(--map-shallow); stroke-width: 2; stroke-linecap: round; }
.spot-map .shallow-outer { fill: none; stroke: var(--map-shallow); stroke-width: 30; stroke-linejoin: round; opacity: .35; }
.spot-map .shallow { fill: none; stroke: var(--map-shallow); stroke-width: 14; stroke-linejoin: round; }
.spot-map .land { fill: var(--map-land); stroke: var(--map-ink); stroke-width: 1.2; stroke-linejoin: round; }
.spot-map .peak { fill: var(--map-land-ink); }
.spot-map .peak-label { fill: var(--map-land-ink); font: 800 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.spot-map .cluster { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 4; }
.spot-map .spot { fill: var(--accent); stroke: var(--map-ink); stroke-width: 1.5; }
.spot-map .leader { stroke: var(--map-ink); stroke-width: 1.5; opacity: .7; }
.spot-map .area-label {
  fill: var(--map-ink);
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-weight: 800;
  font-size: 34px;
  transition: fill .2s ease;
}
.spot-map .spot-list { fill: var(--map-ink); font: 700 15px var(--sans); letter-spacing: .05em; opacity: .88; }
.spot-map a:hover .area-label,
.spot-map a:focus-visible .area-label { fill: var(--map-land-ink); }
.spot-map .map-title { fill: var(--map-ink); font-family: var(--script); font-size: 52px; }
.spot-map .map-meta,
.spot-map .scale text,
.spot-map .compass text {
  fill: var(--map-ink);
  font: 800 12px var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .8;
}
.spot-map .scale path { fill: none; stroke: var(--map-ink); stroke-width: 2; opacity: .8; }
.spot-map .compass path { fill: var(--map-ink); opacity: .8; }
.spot-map figcaption {
  margin-top: .8rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-soft);
}
@media (max-width: 640px) {
  .spot-map svg { border-radius: var(--r-lg); }
  .spot-map .spot-list,
  .spot-map .peak-label,
  .spot-map .map-meta { display: none; }
  .spot-map .area-label { font-size: 46px; }
}

.breaks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.breaks-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .breaks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .break-areas-pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .breaks-grid, .breaks-grid-2 { grid-template-columns: 1fr; }
}
.break-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-lg);
}
.break-card[data-type="beach"] { border-top-color: var(--sun); }
.break-card[data-type="reef"]  { border-top-color: var(--heading); }
.break-card[data-type="point"] { border-top-color: var(--accent); }
.break-body {
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.break-card h4 {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading);
}
.break-type {
  align-self: flex-start;
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .15em;
  padding: .4em .9em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--border);
}
.break-body > p:not(.break-type) { color: var(--text-soft); font-size: .97rem; }

.break-facts {
  margin: auto 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.break-facts > div {
  display: grid;
  gap: .3rem;
  align-content: start;
  padding-inline: .85rem;
  border-left: 1px solid var(--border-soft);
}
.break-facts > div:first-child { padding-left: 0; border-left: 0; }
.break-facts dt {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 800;
  color: var(--text-soft);
}
.break-facts dd {
  margin: 0;
  font-weight: 700;
  font-size: .92rem;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.breaks-asides {
  margin-top: clamp(26px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}
@media (max-width: 860px) {
  .breaks-asides { grid-template-columns: 1fr; }
}
.season-note {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 42px);
  display: grid;
  gap: .8rem;
}
.secret-note {
  border: 2px dashed var(--accent);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 42px);
  display: grid;
  gap: .8rem;
}
.secret-note h3 { color: var(--heading); }
.secret-note p { color: var(--text-soft); }
.season-note h3 { color: var(--heading); }
.season-note h3::before,
.secret-note h3::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-bottom: .9rem;
  border-radius: 3px;
  background: var(--sun);
}
.season-note p { color: var(--text-soft); }
.season-note strong { color: var(--heading); font-weight: 800; }

/* ---------- reviews ---------- */
/* faint line-drawn tile: palm, board, wave, sun, hibiscus */
.section-reviews {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%2317335C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.1'%3E%3Cpath d='M56 112c3-24 0-48-9-68'/%3E%3Cpath d='M47 44c-11-7-24-7-33 2M47 44c-4-11-13-18-26-18M47 44c7-11 18-15 31-13M47 44c11-2 22 4 26 15M47 44c-2 11-11 20-22 22'/%3E%3Cpath d='M196 22c15 20 17 52 4 78-15-22-17-54-4-78z'/%3E%3Cpath d='M198 38v52'/%3E%3Cpath d='M22 196c11-15 28-17 39-4 6 8 2 17-7 15'/%3E%3Cpath d='M16 212c16 5 33 5 50-2'/%3E%3Ccircle cx='192' cy='186' r='11'/%3E%3Cpath d='M192 164v-7M192 215v-7M170 186h-7M221 186h-7M176 170l-5-5M213 207l-5-5M176 202l-5 5M213 165l-5 5'/%3E%3Ccircle cx='124' cy='140' r='3'/%3E%3Cpath d='M124 137c-4-9 5-13 7-4M127 140c9-3 12 6 3 7M125 143c3 9-6 11-7 2M122 142c-9 2-10-7-1-7'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(30px, 4vw, 58px);
}
.review { margin: 0; display: grid; gap: .9rem; align-content: start; }
.review blockquote { margin: 0; }
.review blockquote p {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem);
  line-height: 1.45;
  color: var(--heading);
  font-weight: 400;
}
.review blockquote p::before { content: "“"; margin-left: -.42em; }
.review blockquote p::after { content: "”"; }
.review-tbd blockquote p::before,
.review-tbd blockquote p::after { content: none; }
.review figcaption {
  font-size: var(--step--1);
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- gallery ---------- */
.section-gallery { background: var(--bg-alt); }
.masonry { columns: 3 260px; column-gap: clamp(12px, 1.6vw, 18px); }
.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  margin-bottom: clamp(12px, 1.6vw, 18px);
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
}
.shot img {
  width: 100%;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.shot:hover img,
.shot:focus-visible img { transform: scale(1.045); }

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(1000px, 92vw);
  max-height: 92vh;
  color: var(--on-deep);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(10, 20, 38, .9); backdrop-filter: blur(3px); }
.lightbox img { border-radius: var(--r-md); max-height: 82vh; width: auto; margin-inline: auto; }
.lightbox-caption {
  margin-top: .9rem;
  text-align: center;
  font-size: var(--step--1);
  color: #E7D9C4;
}
.lightbox-close {
  position: absolute;
  top: -46px; right: -4px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: #F3E7D5;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.12); }

/* ---------- faq ---------- */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.section-faq .section-head { margin-bottom: 0; position: sticky; top: 120px; }
.faq-list { display: grid; }
.faq-item {
  border-top: 1px solid var(--border);
  padding: .3rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.4rem 1.15rem 0;
  position: relative;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: var(--step-1);
  font-weight: 650;
  color: var(--heading);
  line-height: 1.3;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--text-soft); }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%2317335C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-body { padding: 0 2.4rem 1.35rem 0; }
.faq-body p { color: var(--text-soft); max-width: 62ch; }
.faq-item[open] .faq-body { animation: faq-in .3s ease both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---------- cta band ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  background: var(--deep);
  color: var(--on-deep);
  padding-block: clamp(88px, 12vw, 150px);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(12, 24, 44, .58), rgba(12, 24, 44, .72));
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 60ch; text-align: center; }
.cta-band h2 { color: var(--cream); font-size: var(--step-4); font-weight: 900; line-height: .95; }
.cta-lede { margin-top: 1.2rem; color: var(--on-deep-soft); font-size: var(--step-1); line-height: 1.55; }
.cta-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.cta-fine { margin-top: 1.5rem; font-size: var(--step--1); color: var(--on-deep-soft); opacity: .82; }

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  background: var(--bg-alt);
  padding-top: calc(clamp(48px, 6vw, 78px) + 40px);
}
/* dusty-blue wave stripe between the photo band and the footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Crect width='80' height='40' fill='%23DCE6EA'/%3E%3Cpath d='M0 11c10-8 30-8 40 0s30 8 40 0M0 29c10-8 30-8 40 0s30 8 40 0' fill='none' stroke='%239FB6C1' stroke-width='6'/%3E%3C/svg%3E") repeat-x left top / 80px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr 1.1fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.footer-brand .wordmark-name { display: block; margin-bottom: .9rem; }
.footer-blurb { color: var(--text-soft); font-size: .97rem; max-width: 34ch; }
.socials { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.1rem; }
.socials a {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 800;
  text-decoration: none;
  color: var(--heading);
  border-bottom: 1.5px solid var(--accent-soft);
  padding-bottom: 2px;
}
.socials a:hover { border-bottom-color: var(--heading); }

.site-footer h3 {
  font-size: .68rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
  color: var(--text-soft);
  margin-bottom: 1rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-nav a { text-decoration: none; color: var(--text-soft); font-size: .95rem; }
.footer-nav a:hover { color: var(--heading); }

.footer-meet address { font-style: normal; color: var(--text-soft); font-size: .95rem; line-height: 1.6; }
.footer-map-link {
  display: inline-block;
  margin-top: .9rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--heading);
  border-bottom: 1.5px solid var(--accent-soft);
  padding-bottom: 2px;
}
.footer-map-link:hover { border-bottom-color: var(--heading); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid var(--border-soft);
  font-size: var(--step--1);
  color: var(--text-soft);
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--heading); }

/* ---------- floating actions ---------- */
.floaters {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(20px, 4vh, 44px);
  z-index: 55;
  display: grid;
  gap: 12px;
}
.floater {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: var(--shadow-md);
  transition: transform .22s ease;
}
.floater:hover { transform: translateY(-3px) scale(1.05); }
.floater-help { background: var(--sun); color: #17335C; }
.floater-wa { background: var(--btn-bg); color: var(--btn-fg); }
.floater-wa .wa-icon { width: 22px; height: 22px; }

/* ---------- sticky mobile CTA ---------- */
.sticky-wa {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 58;
  display: none;
  text-align: center;
  padding: 1.05em 1.4em;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-lg);
  transform: translateY(160%);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.sticky-wa.is-visible { transform: none; }

/* ---------- reveal (only when JS is on) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }

  .nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    padding: .6rem var(--gutter) 1.4rem;
  }
  .nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open .nav-link {
    display: block;
    padding: .95rem .2rem;
    font-size: .78rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav.is-open .swipe { display: none; }
  .header-inner { position: relative; }

  .instructor-grid { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: start; }

  .faq-wrap { grid-template-columns: 1fr; }
  .section-faq .section-head { position: static; margin-bottom: 1.4rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-meet { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 76px; }
  .header-inner { min-height: 68px; }
  .wordmark-sub { letter-spacing: .28em; font-size: .58rem; }

  .hero {
    min-height: 0;
    padding-bottom: clamp(60px, 9vh, 80px);
    padding-top: clamp(64px, 16vh, 120px);
  }
  .hero-media { height: 100%; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { max-width: 16ch; }

  .booking-wrap { margin-top: -28px; }
  .booking-card { width: min(560px, 100%); }
  .booking-fields { grid-template-columns: 1fr; }
  .booking-btn { width: 100%; margin-top: .3rem; }
  .wave-top { margin-top: -1px; }
  .section-lessons { padding-top: clamp(56px, 9vw, 80px); }
  .instructor-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .instructor-figure { max-width: 160px; }

  .masonry { columns: 2 150px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-meet { grid-column: auto; }

  .floaters { display: none; }
  .sticky-wa { display: block; }
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 76px; }

  .review blockquote p::before { content: none; }
  .review blockquote p::after { content: none; }
}

@media (max-width: 420px) {
  .masonry { columns: 1; }
}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-video { animation: none; }
}

@media print {
  .site-header, .floaters, .sticky-wa, .hero-media, .map { display: none !important; }
  body { background: #fff; color: #000; }
}