/* ===================================================================
   Salt & Stoke — Garden Route surf school
   Design tokens (Salt & Stoke design system) + site styles.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400&display=swap');

:root {
  /* ---- Base palette ---- */
  --ss-sand:        #F2EFE6;
  --ss-navy:        #0E3A4A;
  --ss-teal:        #1C7C8C;
  --ss-aqua:        #3FA9BF;
  --ss-gold:        #E4B363;
  --ss-mist:        #9BB0AE;

  /* ---- Tints & shades ---- */
  --ss-sand-100:    #FAF8F2;
  --ss-sand-200:    #F2EFE6;
  --ss-sand-300:    #E8E3D4;

  --ss-navy-700:    #0E3A4A;
  --ss-navy-600:    #164A5C;
  --ss-navy-500:    #1F5C70;

  --ss-teal-600:    #166877;
  --ss-teal-500:    #1C7C8C;

  --ss-aqua-600:    #2F92A6;
  --ss-aqua-500:    #3FA9BF;
  --ss-aqua-100:    #D9EDF2;

  --ss-gold-600:    #D19E45;
  --ss-gold-700:    #A8781F;   /* gold display text on sand: 3.4:1 (gold-600 was 2.1:1) */
  --ss-gold-500:    #E4B363;
  --ss-gold-100:    #F7EBD3;

  --ss-mist-500:    #9BB0AE;
  --ss-mist-300:    #C4D0CE;
  --ss-mist-700:    #6E8482;
  --ss-mist-800:    #566B69;   /* muted text on sand: 4.9:1 (mist-700 was 3.5:1) */

  --ss-white:       #FFFFFF;

  /* ---- Semantic aliases ---- */
  --surface-page:      var(--ss-sand-200);
  --surface-card:      var(--ss-sand-100);
  --surface-raised:    var(--ss-white);
  --surface-dark:      var(--ss-navy-700);
  --surface-tint:      var(--ss-aqua-100);

  --text-strong:       var(--ss-navy-700);
  --text-body:         #23414C;
  --text-muted:        var(--ss-mist-800);
  --text-accent:       var(--ss-teal-600);   /* teal as TEXT on sand needs the 600 step: 5.6:1 */
  --text-on-dark:      var(--ss-sand-100);
  --text-on-accent:    var(--ss-white);

  --accent:            var(--ss-teal-500);
  --accent-hover:      var(--ss-teal-600);
  --cta:               var(--ss-aqua-500);
  --cta-hover:         var(--ss-aqua-600);
  --highlight:         var(--ss-gold-500);
  --highlight-hover:   var(--ss-gold-600);

  --border:            var(--ss-mist-300);
  --border-strong:     var(--ss-mist-500);
  --divider:           var(--ss-sand-300);

  --focus-ring:        var(--ss-aqua-500);

  --success:           #2E8B72;
  --danger:            #C7563E;

  /* ---- Type ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  /* Five sizes. Ratio 1.5, anchored on 16px: 16 → 24 → 36 → 56, plus 13
     for labels. Nothing else — every font-size in this file is one of
     these five tokens. The three fluid sizes stop growing together at
     ~900px viewport. Body never drops below 16px (iOS zooms form inputs
     under 16px, and there is a booking form). */
  --fs-display: clamp(38px, 3.2vw + 26px, 56px);  /* hero h1, tunnel h2, stat numbers */
  --fs-h2:      clamp(28px, 1.6vw + 22px, 36px);  /* section headings, card price     */
  --fs-h3:      clamp(20px, 0.8vw + 17px, 24px);  /* card/item titles, leads, logo    */
  --fs-body:    16px;                             /* running text, buttons, inputs    */
  --fs-small:   13px;                             /* eyebrows, badges, captions, HUD  */

  --lh-display: 1.05;
  --lh-h2:      1.15;
  --lh-h3:      1.3;
  --lh-body:    1.6;
  --lh-small:   1.4;

  /* em so tracking scales with the clamp instead of breaking at small widths */
  --ls-display: -0.03em;
  --ls-h2:      -0.02em;
  --ls-h3:      -0.01em;
  --ls-body:     0;
  --ls-label:    0.12em;   /* uppercase labels only */

  /* ---- Radius ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Space ---- 8-point scale. Every padding, margin and gap in this
     file is one of these. --space-half is the single sanctioned
     exception: 4px, for pill padding and inline icon gaps only, where a
     full 8px step reads as a different component. Use it nowhere else. */
  --space-half: 4px;
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-9:  72px;
  --space-12: 96px;
  --space-15: 120px;
  --space-16: 128px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(14, 58, 74, 0.06);
  --shadow-sm:  0 2px 8px rgba(14, 58, 74, 0.08);
  --shadow-md:  0 8px 24px rgba(14, 58, 74, 0.10);
  --shadow-lg:  0 18px 48px rgba(14, 58, 74, 0.14);
  --shadow-cta: 0 8px 20px rgba(63, 169, 191, 0.35);

  /* ---- Motion ---- */
  --ease-wave:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-float:   cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     150ms;
  --dur-base:     240ms;
  --dur-slow:     420ms;

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --header-h:       76px;
}

/* ===================================================================
   Reset & base
   =================================================================== */

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

html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); font-weight: 800; margin: 0; }
h1     { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; }
h2     { font-size: var(--fs-h2);      line-height: var(--lh-h2);      letter-spacing: var(--ls-h2);      text-wrap: balance; }
h3, h4 { font-size: var(--fs-h3);      line-height: var(--lh-h3);      letter-spacing: var(--ls-h3); }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--cta); }

button { font: inherit; }

::selection { background: var(--ss-aqua-100); color: var(--ss-navy-700); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
main:focus { outline: none; }

.ss-skip {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10000;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font-weight: 700;
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ss-skip:focus-visible { transform: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-2);
}
.eyebrow--gold { color: var(--ss-gold); }

@keyframes ssFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

/* ===================================================================
   Buttons
   =================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-float), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.985); box-shadow: none; }

.btn--cta {
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-cta);
}
.btn--cta:hover { background: var(--accent-hover); }

.btn--outline {
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: var(--fs-body);
  backdrop-filter: blur(4px);
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.22); }

.btn--nav {
  padding: calc(var(--space-1) + var(--space-half)) var(--space-3);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-cta);
}
.btn--nav:hover { background: var(--accent-hover); }

.btn--sm {
  padding: calc(var(--space-1) + var(--space-half)) var(--space-3);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-body);
  box-shadow: var(--shadow-sm);
}
.btn--sm:hover { background: var(--accent-hover); }

.btn--sm-cta { background: var(--accent); box-shadow: var(--shadow-cta); }
.btn--sm-cta:hover { background: var(--accent-hover); }

.btn--submit {
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-cta);
}
.btn--submit:hover { background: var(--accent-hover); }

.btn svg { width: 20px; height: 20px; }

/* ===================================================================
   Header
   =================================================================== */

.ss-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(242, 239, 230, 0);
  border-bottom: 1px solid transparent;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), backdrop-filter 240ms var(--ease-out);
}
.ss-header.is-scrolled {
  background: rgba(242, 239, 230, 0.86);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.ss-header__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ss-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h2);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 2px;
}
.ss-logo__amp { color: var(--highlight); margin: 0 2px; }

.ss-nav { display: flex; align-items: center; gap: 8px; }

.ss-navlink {
  display: none;
  padding: var(--space-1) var(--space-2);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text-strong);
}
@media (min-width: 760px) {
  .ss-navlink { display: inline-flex; }
}

/* ===================================================================
   Hero
   =================================================================== */

.ss-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 759px) {
  .ss-hero { height: 100svh; }
}

.ss-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ss-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 58, 74, 0.62) 0%, rgba(14, 58, 74, 0.30) 42%, rgba(14, 58, 74, 0.55) 100%);
}

/* Masks the softness of the 720p source when blown up full-bleed on large
   displays — a light grain, no blur. */
.ss-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.ss-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 24px 96px;
}

.ss-hero__inner { max-width: 760px; }

.ss-hero__kicker { margin-bottom: var(--space-3); }
.ss-hero__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ss-gold);
  background: rgba(14, 58, 74, 0.35);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

.ss-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: #fff;
}
.ss-hero__title span { display: block; }
.ss-hero__title .gold { color: var(--ss-gold); }

/* Blinking caret for the typed-in heading (js/hero-typing.js). Uses
   currentColor so it stays white on line one and gold inside .gold. */
.ss-typing-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.85em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.04em;
  animation: ssCaretBlink 1.1s steps(1, end) infinite;
}
@keyframes ssCaretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.ss-hero__lead {
  margin: var(--space-3) 0 0;
  max-width: 520px;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: rgba(250, 248, 242, 0.92);
}

.ss-hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.ss-hero__rating {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(250, 248, 242, 0.92);
}
.ss-hero__stars { display: inline-flex; }
.ss-hero__stars svg { display: block; }
.ss-hero__rating-text { font-size: var(--fs-body); font-weight: 700; }

.ss-hero__cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.8);
  animation: ssFloat 2.6s var(--ease-wave) infinite;
}
.ss-hero__cue span {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.ss-hero__cue svg { width: 22px; height: 22px; }

/* ===================================================================
   Lessons
   =================================================================== */

.ss-section { max-width: var(--container); margin: 0 auto; padding: var(--space-9) var(--space-3); }
@media (min-width: 900px) { .ss-section { padding: var(--space-15) var(--space-3); } }

.ss-section__head { max-width: var(--container-text); margin: 0 auto 56px; text-align: center; }
.ss-section__head p { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-muted); }
.ss-section__head h2 {
  margin: 0 0 16px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.ss-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.ss-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform 240ms var(--ease-wave), box-shadow 240ms var(--ease-wave);
}
.ss-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.ss-card--dark {
  background: var(--surface-dark);
  border-color: var(--ss-navy-500);
  box-shadow: var(--shadow-md);
}

.ss-card__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-half);
  background: var(--ss-aqua-100);
  color: var(--ss-navy-700);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-body);
  padding: var(--space-half) calc(var(--space-1) + var(--space-half));
  border-radius: var(--radius-pill);
}
.ss-card__badge--gold { background: var(--ss-gold); font-weight: 800; }
.ss-card__badge--teal { background: rgba(28, 124, 140, 0.14); color: var(--ss-teal-600); }

.ss-card__icon {
  margin-top: var(--space-3);
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--ss-aqua-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.ss-card__icon svg { width: 28px; height: 28px; }
.ss-card__icon--dark { background: rgba(63, 169, 191, 0.22); color: var(--ss-aqua); }

.ss-card h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-h3); color: var(--text-strong); }
.ss-card--dark h3 { color: #fff; }

.ss-card p { margin: 0 0 var(--space-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.ss-card--dark p { color: rgba(250, 248, 242, 0.88); }

.ss-card__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); }
.ss-card__list li { display: flex; gap: var(--space-1); align-items: center; font-size: var(--fs-body); color: var(--text-body); }
.ss-card--dark .ss-card__list li { color: rgba(250, 248, 242, 0.9); }
.ss-card__list svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.ss-card--dark .ss-card__list svg { color: var(--ss-aqua); }

.ss-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
.ss-card__price { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--text-strong); }
.ss-card--dark .ss-card__price { color: #fff; }
.ss-card__unit { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.ss-card--dark .ss-card__unit { color: rgba(250, 248, 242, 0.7); }

/* ===================================================================
   3D pricing carousel (js/carousel3d.js)
   The markup renders as the original flat grid by default; the JS adds
   .ss-cards--3d only on wide screens without prefers-reduced-motion,
   turning the three cards into an auto-rotating circular ring with
   click-to-flip backs.
   =================================================================== */

/* grid fallback: back faces hidden, wrappers keep cards equal height */
.ss-carousel3d__face--back { display: none; }
.ss-cards:not(.ss-cards--3d) .ss-carousel3d__flip,
.ss-cards:not(.ss-cards--3d) .ss-carousel3d__face--front,
.ss-cards:not(.ss-cards--3d) .ss-carousel3d__face--front .ss-card { height: 100%; }
.ss-carousel3d__hint { display: none; }

.ss-cards--3d {
  display: block;
  position: relative;
  height: calc(var(--c3d-h, 560px) + 64px);
  perspective: 1600px;
}
.ss-cards--3d [data-carousel3d-ring] {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--c3d-w, 340px);
  height: var(--c3d-h, 560px);
  margin-left: calc(var(--c3d-w, 340px) / -2);
  transform-style: preserve-3d;
  will-change: transform;
}
.ss-cards--3d .ss-carousel3d__item {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.ss-cards--3d .ss-carousel3d__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-wave);
  cursor: pointer;
}
.ss-cards--3d .ss-carousel3d__flip.is-flipped { transform: rotateY(180deg); }
.ss-cards--3d .ss-carousel3d__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ss-cards--3d .ss-carousel3d__face--back { display: block; transform: rotateY(180deg); }
.ss-cards--3d .ss-carousel3d__face .ss-card { height: 100%; }
/* the grid-mode hover lift fights the ring placement in 3D */
.ss-cards--3d .ss-card:hover { transform: none; box-shadow: var(--shadow-md); }

.ss-cards--3d .ss-carousel3d__hint {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}

/* ===================================================================
   Why us
   =================================================================== */

.ss-why { position: relative; background: var(--surface-dark); overflow: hidden; }
.ss-why__glow {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background:
    radial-gradient(circle at 20% 20%, var(--ss-aqua) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--ss-gold) 0%, transparent 45%);
}
.ss-why__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-9) var(--space-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 900px) { .ss-why__inner { padding: var(--space-15) var(--space-3); } }
.ss-why__intro { max-width: 640px; }
.ss-why__intro h2 { margin: 0 0 var(--space-2); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: #fff; }
.ss-why__intro p { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); color: rgba(250, 248, 242, 0.9); }

/* Glowing cards (js/glow-cards.js) — vanilla stand-in for lightswind's
   <GlowingCards>: a cursor-tracking radial glow shared across the grid,
   three brand glow colors cycling per card. Config lives in the custom
   props below. */
.ss-why__grid {
  --glow-radius: 25rem;
  --glow-opacity: 0.9;
  --glow-duration: 400ms;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); /* responsive */
  gap: 2rem;
}
.ss-why__item {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ss-navy-500);
  border-radius: 1rem;
  padding: var(--space-4) var(--space-3);
  transition: border-color var(--glow-duration) var(--ease-out),
              box-shadow var(--glow-duration) var(--ease-out);
}
/* the 3 glow color settings, cycling: aqua / gold / teal */
.ss-why__item:nth-child(3n + 1) { --glow-color: var(--cta); }
.ss-why__item:nth-child(3n + 2) { --glow-color: var(--ss-gold); }
.ss-why__item:nth-child(3n)     { --glow-color: var(--accent); }

.ss-why__item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(var(--glow-radius) circle at var(--gx, 50%) var(--gy, 50%),
              color-mix(in srgb, var(--glow-color) 40%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--glow-duration) var(--ease-out);
  pointer-events: none;
}
.ss-why__grid.is-glowing .ss-why__item::before { opacity: var(--glow-opacity); }
.ss-why__item:hover {
  border-color: color-mix(in srgb, var(--glow-color) 65%, var(--ss-navy-500));
  box-shadow: 0 0 34px color-mix(in srgb, var(--glow-color) 28%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .ss-why__item, .ss-why__item::before { transition: none; }
}
.ss-why__item svg { width: 30px; height: 30px; color: var(--ss-aqua); }
.ss-why__item h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-h3); color: #fff; }
.ss-why__item p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(250, 248, 242, 0.82); }

/* ===================================================================
   Stats — rolling-number counters (js/counters.js). These tiles use
   the counter roll-up as their entrance instead of [data-reveal].
   =================================================================== */

.ss-stats {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--space-3);
}
@media (min-width: 900px) { .ss-stats { padding: var(--space-12) var(--space-3); } }

.ss-stats__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  text-align: center;
}
@media (min-width: 760px) {
  .ss-stats__inner { grid-template-columns: repeat(4, 1fr); }
}

.ss-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.ss-stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ss-stat__num--gold { color: var(--ss-gold-700); }

.ss-stat__label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ===================================================================
   Gallery
   =================================================================== */

.ss-gallery { padding: var(--space-9) 0; overflow: hidden; }
@media (min-width: 900px) { .ss-gallery { padding: var(--space-16) 0; } }
.ss-gallery__head { max-width: var(--container-text); margin: 0 auto 48px; padding: 0 24px; text-align: center; }
.ss-gallery__head h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }

.ss-gallery__grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.ss-tile {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 10;
}
.ss-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-wave); }
.ss-tile:hover img { transform: scale(1.06); }

.ss-tile--a { grid-column: span 7; }
.ss-tile--b { grid-column: span 5; }
.ss-tile--b img { object-position: center 30%; }

@media (max-width: 640px) {
  .ss-tile--a, .ss-tile--b { grid-column: span 12; }
}

/* ===================================================================
   Book / contact
   =================================================================== */

.ss-book__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.ss-book__info h2 { margin: 0 0 16px; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.ss-book__info > p { margin: 0 0 var(--space-4); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-muted); max-width: 460px; }

.ss-book__details { display: flex; flex-direction: column; gap: var(--space-3); max-width: 460px; }
.ss-book__detail { display: flex; gap: var(--space-2); align-items: flex-start; }
.ss-book__detail-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--ss-aqua-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.ss-book__detail-icon svg { width: 22px; height: 22px; }
.ss-book__detail-title { font-family: var(--font-display); font-weight: 800; color: var(--text-strong); font-size: var(--fs-body); }
.ss-book__detail-sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }

/* Booking headline: word-by-word rise (js/book-text.js) */
.ss-book__info h2 .bt-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 520ms var(--ease-wave), transform 520ms var(--ease-wave);
  transition-delay: calc(var(--w, 0) * 70ms);
}
.ss-book__info h2.is-in .bt-word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ss-book__info h2 .bt-word { opacity: 1; transform: none; transition: none; }
}

/* Interactive gradient form card (js/interactive-gradient.js) — vanilla
   stand-in for lightswind's <InteractiveGradient>: a brand-color radial
   gradient and glowing border ring that follow the mouse. --ig-intensity
   scales the color strength (1 = the requested 100%). */
.ss-book__form-panel {
  --ig-intensity: 1;
  --igx: 75%;
  --igy: 12%;
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
}
.ss-book__form-panel::before,
.ss-book__form-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--dur-slow) var(--ease-out);
}
/* gradient wash */
.ss-book__form-panel::before {
  background:
    radial-gradient(560px circle at var(--igx) var(--igy),
      color-mix(in srgb, var(--cta) calc(42% * var(--ig-intensity)), transparent) 0%,
      color-mix(in srgb, var(--ss-gold) calc(26% * var(--ig-intensity)), transparent) 38%,
      color-mix(in srgb, var(--accent) calc(20% * var(--ig-intensity)), transparent) 62%,
      transparent 80%);
}
/* glowing border ring that follows the cursor */
.ss-book__form-panel::after {
  background: radial-gradient(320px circle at var(--igx) var(--igy),
    color-mix(in srgb, var(--cta) calc(90% * var(--ig-intensity)), transparent),
    color-mix(in srgb, var(--ss-gold) calc(55% * var(--ig-intensity)), transparent) 55%,
    transparent 75%);
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.ss-book__form-panel.is-tracking::before,
.ss-book__form-panel.is-tracking::after { opacity: 1; }
.ss-book__form-panel > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .ss-book__form-panel::before,
  .ss-book__form-panel::after { transition: none; }
}

@media (min-width: 900px) { .ss-book__form-panel { padding: var(--space-5); } }
.ss-form { display: flex; flex-direction: column; gap: var(--space-2); }
.ss-field { display: flex; flex-direction: column; gap: var(--space-1); }
.ss-field label { font-size: var(--fs-body); font-weight: 700; color: var(--text-strong); }

.ss-field input,
.ss-field select,
.ss-field textarea {
  width: 100%;
  padding: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--surface-raised);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color 150ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.ss-field input:focus,
.ss-field select:focus,
.ss-field textarea:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px rgba(63, 169, 191, 0.16);
}
.ss-field textarea { resize: vertical; line-height: var(--lh-body); }

.ss-select-wrap { position: relative; display: flex; align-items: center; }
.ss-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: var(--space-6); cursor: pointer; }
.ss-select-wrap svg { position: absolute; right: 14px; width: 18px; height: 18px; color: var(--accent); pointer-events: none; }

.ss-book__success { display: none; flex-direction: column; align-items: center; text-align: center; padding: 24px 8px; }
.ss-book__success.is-visible { display: flex; }
.ss-book__success-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: rgba(46, 139, 114, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  margin-bottom: var(--space-2);
}
.ss-book__success-icon svg { width: 34px; height: 34px; }
.ss-book__success h3 { margin: 0 0 8px; font-size: var(--fs-h3); color: var(--text-strong); }
.ss-book__success p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); max-width: 320px; }

/* ===================================================================
   Footer
   =================================================================== */

.ss-footer { background: var(--surface-dark); color: var(--text-on-dark); }
.ss-footer__top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}
.ss-footer__brand { max-width: 320px; }
.ss-footer__logo { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h2); color: #fff; margin-bottom: var(--space-1); }
.ss-footer__logo span { color: var(--ss-gold); margin: 0 2px; }
.ss-footer__brand p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(250, 248, 242, 0.72); }

.ss-footer__social { display: flex; gap: var(--space-2); }
.ss-social {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out);
}
.ss-social:hover { background: rgba(63, 169, 191, 0.28); color: #fff; }
.ss-social svg { width: 20px; height: 20px; }

.ss-footer__bottom { border-top: 1px solid var(--ss-navy-500); }
.ss-footer__bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: space-between;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgba(250, 248, 242, 0.6);
}

/* ===================================================================
   Scroll reveal
   =================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms var(--ease-wave), transform 700ms var(--ease-wave);
  will-change: opacity, transform; /* released by .is-settled once the transition ends */
}
[data-reveal].is-settled { will-change: auto; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ss-hero__cue { animation: none; }
  .ss-hero { height: auto; min-height: 100svh; }
}

/* ===================================================================
   Signature custom cursor
   Only applied once js/cursor.js has confirmed it's safe to run
   (desktop pointer, not low-end hardware) and added this class itself —
   the native cursor is always the default until then.
   =================================================================== */

html.has-custom-cursor, html.has-custom-cursor * { cursor: none; }

.ss-cursor-dot, .ss-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}

.ss-cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.ss-cursor-dot.is-hidden { opacity: 0 !important; }

.ss-cursor-ring {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1.5px solid var(--ss-sand-100);
  border-radius: 50%;
  transition: width var(--dur-base) var(--ease-wave), height var(--dur-base) var(--ease-wave), border-radius var(--dur-base) var(--ease-wave);
}
.ss-cursor-ring.is-hovering { width: 52px; height: 52px; }
.ss-cursor-ring.is-text { width: 2px; height: 26px; border-radius: 1px; }

html.has-custom-cursor--reduced-motion .ss-cursor-ring { transition: none; }

/* ===================================================================
   Word cycler (why-us h2) — moved here from an inline <style> block
   =================================================================== */
.ss-cycler{
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
  color: var(--text-on-dark, currentColor);
  margin: 0;
}
.ss-slot{
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
  min-width: 1ch;
  color: var(--cta, currentColor);
}
.ss-slot .ss-word{ display: inline-block; white-space: nowrap; }

/* blur style (default) */
.ss-slot .ss-word.out{ animation: ssBlOut .40s forwards; }
.ss-slot .ss-word.in { animation: ssBlIn  .55s forwards; }
@keyframes ssBlOut{ to   { filter: blur(12px); opacity:0; transform: scale(1.06); } }
@keyframes ssBlIn { from { filter: blur(12px); opacity:0; transform: scale(.94); }
            to   { filter: blur(0);    opacity:1; transform: none; } }

/* alternates - swap .ss-cycler to .ss-cycler.flip or .ss-cycler.slide to use */
.ss-cycler.flip  .ss-word.out{ animation: ssFlipOut .45s cubic-bezier(.76,0,.24,1) forwards; }
.ss-cycler.flip  .ss-word.in { animation: ssFlipIn  .45s cubic-bezier(.19,1,.22,1) forwards; }
@keyframes ssFlipOut{ to   { transform: translateY(-110%); opacity:0; } }
@keyframes ssFlipIn { from { transform: translateY(110%);  opacity:0; } to { transform:none; opacity:1; } }
.ss-cycler.slide .ss-word.out{ animation: ssSlOut .40s cubic-bezier(.76,0,.24,1) forwards; }
.ss-cycler.slide .ss-word.in { animation: ssSlIn  .50s cubic-bezier(.19,1,.22,1) forwards; }
@keyframes ssSlOut{ to   { transform: translateX(-40%); opacity:0; } }
@keyframes ssSlIn { from { transform: translateX(40%);  opacity:0; } to { transform:none; opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .ss-slot .ss-word,
  .ss-cycler.flip .ss-word,
  .ss-cycler.slide .ss-word{ animation: none !important; }
}

/* ===================================================================
   Gallery tunnel — moved here from an inline <style> block
   =================================================================== */
.ss-tunnel{
  position: relative;
  /* +200px top and bottom so the tunnel holds the viewport longer on scroll-by */
  height: calc(clamp(560px, 90vh, 900px) + 400px);
  overflow: hidden;
  background: var(--surface-dark, #0b0a09);
  color: var(--text-on-dark, #ece8de);
  isolation: isolate;
}
.ss-tunnel__gl{ position:absolute; inset:0; z-index:1; }
.ss-tunnel__gl canvas{ display:block; width:100%; height:100%; }

.ss-tunnel__title{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:3; text-align:center; pointer-events:none; mix-blend-mode:difference;
  width: min(90%, 900px);
}
.ss-tunnel__title h2{
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
  color: var(--text-on-dark, #ece8de); /* the site's global h2 rule would otherwise force navy, which cancels out under difference blending */
}
.ss-tunnel__title h2 em{ font-style: italic; }

.ss-tunnel__hud{
  position:absolute; z-index:3; pointer-events:none; mix-blend-mode:difference;
  font-family: var(--font-body, inherit);
  font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-on-dark, #ece8de); /* under difference blending a light source stays legible on both the dark section and bright frames */
}
.ss-tunnel__hud--tl{ top:26px; left:32px; }
.ss-tunnel__hud--tr{ top:26px; right:32px; text-align:right; font-variant-numeric:tabular-nums; }
.ss-tunnel__hud--bl{ bottom:26px; left:32px; max-width:60%; }
@media (max-width: 640px){
  .ss-tunnel__hud--tl,.ss-tunnel__hud--bl{ left:20px; }
  .ss-tunnel__hud--tr{ right:20px; }
}

.ss-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;
}