/* =====================================================================
   JUST SKATE BANGKOK — STYLESHEET
   -----------------------------------------------------------------
   This file is organized top to bottom to match index.html:
     1. Variables & resets
     2. Typography helpers
     3. Buttons & shared components (doodles, cards, shadows)
     4. Header / navigation
     5. Hero
     6. Reassurance
     7. Who it's for
     8. Pricing
     9. What to expect
     10. About
     11. Locations
     12. How it works
     13. Booking
     14. FAQ
     15. Final CTA
     16. Footer
     17. Sticky mobile booking bar
     18. Responsive breakpoints
   Search for the section number/name in comments to jump around.
   See README.md for plain-English editing instructions.
===================================================================== */

/* ---------------------------------------------------------------
   1. VARIABLES & RESET
--------------------------------------------------------------- */
:root {
  --black: #111111;
  --lime: #d7f238;
  --white: #ffffff;
  --off-white: #f7f6ee;

  --font-sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Permanent Marker', cursive;

  --max-width: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --border: 3px solid var(--black);

  --section-pad: clamp(3.5rem, 8vw, 6.5rem);

  /* Reusable "sticker" shadow — gives buttons/cards a hand-placed,
     slightly playful feel without needing a new color. */
  --shadow-sm: 3px 3px 0 var(--black);
  --shadow-md: 5px 5px 0 var(--black);
  --shadow-lg: 7px 7px 0 var(--black);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
  font-size: 17px;
}

img, svg { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.sr-only {
  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;
  left: 1rem; top: -100px;
  background: var(--lime);
  color: var(--black);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Focus visibility everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sections with a black background need a lime focus outline instead
   of the default black one (black-on-black would be invisible when
   tabbing through with a keyboard). Scoped precisely — the booking
   section has a white embed card floating inside a black section, so
   that card is deliberately excluded and keeps the default outline. */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.booking-secondary a:focus-visible {
  outline-color: var(--lime);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   1b. SUBTLE GRAIN TEXTURE
   A very light noise overlay adds tactile depth to a handful of
   sections (both dark and the light hero) without hurting text
   contrast or adding an image request — it's a tiny inline SVG,
   not a downloaded file.
--------------------------------------------------------------- */
.reassurance-section,
.expect-section,
.booking-section,
.site-footer {
  position: relative;
  isolation: isolate;
}
.hero::before,
.reassurance-section::before,
.expect-section::before,
.booking-section::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------------------------------------------------------------
   2. TYPOGRAPHY
--------------------------------------------------------------- */
h1, h2, h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

h1 { font-size: clamp(2.75rem, 7vw, 5rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }


.handwritten {
  font-family: var(--font-hand);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 46ch;
}

.reassurance-proof {
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  max-width: 44ch;
  margin-top: 1rem;
  margin-inline: auto;
  font-weight: 600;
  opacity: 0.95;
}
.proof-number {
  color: var(--lime);
  font-weight: 700;
}

.just-skate {
  font-family: var(--font-hand);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  color: var(--lime);
  margin-top: 1.5rem;
  transform: rotate(-2deg);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------
   3. BUTTONS, DOODLES & CARDS
--------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border-radius: 999px;
  padding: 0.95rem 1.75rem;
  min-height: 48px;
  border: var(--border);
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--black); }

.btn-primary {
  background: var(--lime);
  color: var(--black);
}
.btn-primary:hover { background: var(--black); color: var(--lime); border-color: var(--black); }

/* Secondary confirm action — same shape/shadow as .btn-primary but
   visually a step down, for channels that can't pre-fill a message. */
.btn-outline {
  background: var(--white);
  color: var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.btn-lg { font-size: 1.05rem; padding: 1.1rem 2.1rem; }

.nav-cta { min-height: 44px; }

/* Buttons that sit directly on a black background need a lime
   shadow instead of black (a black shadow would vanish). */
.footer-contact .btn-primary {
  box-shadow: 5px 5px 0 var(--lime);
}
.footer-contact .btn-primary:hover { box-shadow: 7px 7px 0 var(--lime); }

/* The sticky mobile bar is a thin fixed strip — a hard shadow there
   reads as clutter rather than depth, so it's kept flat. */
.sticky-mobile-cta .btn,
.sticky-mobile-cta .btn:hover {
  box-shadow: none;
  transform: none;
}

/* Hand-drawn doodle strokes reused across illustrations */
.doodle-stroke {
  fill: none;
  stroke: var(--black);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doodle-stroke-lime {
  fill: none;
  stroke: var(--lime);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.doodle-fill { fill: var(--black); }
.doodle-fill-lime { fill: var(--lime); }
.doodle-circle { stroke-dasharray: 6 5; opacity: 0.6; }

.board-deck { fill: var(--black); }
.board-wheel { fill: var(--lime); stroke: var(--black); stroke-width: 2.5; }
.board-truck { stroke: var(--black); stroke-width: 4; stroke-linecap: round; }

.doodle-underline {
  display: block;
  width: 140px;
  margin-bottom: 1rem;
}
.doodle-underline svg { width: 100%; }
.doodle-underline path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------
   4. HEADER / NAVIGATION
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.85rem;
  gap: 1rem;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  text-decoration: none;
  line-height: 1;
}
.logo-mark {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: block;
  margin-top: 0.1rem;
}
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-text {
  display: flex;
  flex-direction: column;
}
.logo-line {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.logo-line--accent { color: var(--black); -webkit-text-stroke: 0; }
.logo-descriptor {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.6;
  margin-top: 0.3rem;
  line-height: 1.4;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.primary-nav ul {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.primary-nav a { text-decoration: none; }
.primary-nav a:hover,
.primary-nav a:focus-visible { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }

/* Language switcher — links to the same page in the other language,
   not just the other site's homepage, so a visitor reading a guide
   stays on that same guide when they switch. */
.lang-switch {
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.lang-switch:hover { background: var(--black); color: var(--white); text-decoration: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bar {
  width: 24px;
  height: 3px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------------
   5. HERO
   Asymmetric two-column composition on desktop: text content reads
   top-to-bottom on the left (headline, benefits, CTA, contact)
   while a staggered, overlapping collage of real lesson videos runs
   alongside as its own column — impossible to miss without ever
   competing with the CTA for attention. On mobile the same content
   blocks are reordered via named grid-areas (no duplicated markup)
   so the headline, CTA, and first videos all land in the first
   screen, with supporting copy following after.
--------------------------------------------------------------- */
.hero {
  background: var(--off-white);
  padding-block: clamp(1.75rem, 4vw, var(--section-pad));
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.hero-inner {
  display: block;
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "headline"
    "body"
    "cta"
    "video"
    "contact";
  row-gap: 1.1rem;
}
.hero-block--headline { grid-area: headline; }
.hero-block--body { grid-area: body; }
.hero-block--cta { grid-area: cta; }
.hero-block--video { grid-area: video; }
.hero-block--contact { grid-area: contact; }

@media (min-width: 901px) {
  .hero-grid {
    grid-template-columns: 1fr 1.1fr;
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    row-gap: 1.5rem;
    align-items: start;
  }
  .hero-grid {
    grid-template-areas:
      "headline video"
      "body     video"
      "cta      video"
      "contact  video";
  }
  .hero-block--video {
    align-self: center;
    padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
  }
}

/* Headline sizing: scales smoothly from mobile to desktop and wraps
   naturally across lines rather than forcing a single line, so longer
   headlines never overflow into the neighbouring video column. */
.hero-block--headline h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1.05;
}

.hero-subheadline {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--black);
  margin-top: 0.25rem;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.hero-body {
  font-size: 1.1rem;
  max-width: 46ch;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}
.hero-facts li {
  border: var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  background: var(--white);
}
.fact-num { color: var(--black); }
.hero-facts li.fact-highlight {
  background: var(--lime);
}

.reassurance {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.hero-contact {
  font-size: 0.9rem;
}
.hero-contact-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-bottom: 0.6rem;
}
.hero-contact-question { opacity: 0.85; }
/* On mobile, split the line so "We're happy to help." always
   starts its own line under "Questions before booking? Email" —
   on desktop there's room for it to stay inline, so this only
   kicks in below the single-column breakpoint. */
@media (max-width: 900px) {
  .hero-contact-question-2 { flex-basis: 100%; }
}
.hero-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}
.hero-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-underline-offset: 2px;
}
.hero-contact-link:hover { text-decoration-thickness: 2px; }
.hero-contact-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.hero-contact-icon svg { width: 100%; height: 100%; }

/* --- Hero video collage ------------------------------------------------
   A staggered 2x2 "premium collage" rather than a plain grid: each
   card is nudged vertically, rotated a couple of degrees, and the
   bottom pair sits just slightly under the top pair for a subtle
   overlap. Mobile keeps the same 2x2 idea (2 rows of 2, in-flow,
   no horizontal scrolling) so the first two clips are visible right
   under the CTA with minimal scrolling. A slow, tiny floating
   animation adds life without being distracting. --- */
.hero-video-collage {
  position: static;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 18px;
}
.hero-video-card {
  position: static;
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius) * 0.6);
  border: 2px solid var(--black);
  /* Signature hard offset shadow (brand) plus a soft, low-opacity
     ambient shadow layered underneath for a touch of real depth —
     keeps the flat/bold look but stops the cards feeling pasted on. */
  box-shadow: var(--shadow-md), 0 16px 28px rgba(17, 17, 17, 0.16);
  overflow: hidden;
  background: var(--white);
}
.hero-video-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes heroFloat1 { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-7px); } }
@keyframes heroFloat2 { 0%, 100% { transform: rotate(1deg)  translateY(0); } 50% { transform: rotate(1deg)  translateY(6px); } }
@keyframes heroFloat3 { 0%, 100% { transform: rotate(2deg)  translateY(0); } 50% { transform: rotate(2deg)  translateY(-6px); } }
@keyframes heroFloat4 { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(7px); } }
.hvc-1 { margin-top: 0;     z-index: 4; animation: heroFloat1 6.5s ease-in-out infinite; }
.hvc-2 { margin-top: 18px;  z-index: 3; animation: heroFloat2 7s   ease-in-out infinite 0.4s; }
.hvc-3 { margin-top: -18px; z-index: 2; animation: heroFloat3 6.8s ease-in-out infinite 0.8s; }
.hvc-4 { margin-top: -12px; z-index: 1; animation: heroFloat4 7.2s ease-in-out infinite 1.2s; }

/* A bit of dedicated breathing room before the contact block —
   the collage sits close behind it otherwise. */
@media (max-width: 900px) {
  .hero-block--contact { margin-top: 0.75rem; }
}

/* Small credit line under the collage. */
.hero-video-caption {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.6rem;
  text-align: center;
  max-width: 320px;
  margin-inline: auto;
}
.hero-video-caption a { color: inherit; }

@media (min-width: 901px) {
  .hero-video-collage {
    position: relative;
    max-width: 380px;
    height: 616px;
    display: block;
    transform: translateX(60px);
  }
  .hero-video-card { position: absolute; width: 43%; }
  /* Deliberately organic: each card's left offset is slightly
     different from its vertical neighbor (not a clean 2-column
     grid), and the bottom pair tucks 14-18px under the top pair. */
  .hvc-1 { margin: 0; top: 10px;  left: 0%; }
  .hvc-2 { margin: 0; top: 28px;  left: 53%; }
  .hvc-3 { margin: 0; top: 282px; left: 5%; }
  .hvc-4 { margin: 0; top: 304px; left: 50%; }
  .hero-video-caption { max-width: 380px; transform: translateX(60px); }
}

/* Tablet / small desktop: same collage, tighter footprint. */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-video-collage { max-width: 330px; height: 540px; transform: translateX(46px); }
  .hvc-1 { top: 8px; }
  .hvc-2 { top: 24px; }
  .hvc-3 { top: 246px; }
  .hvc-4 { top: 270px; }
  .hero-video-caption { max-width: 330px; transform: translateX(46px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-card { animation: none; }
}

/* ---------------------------------------------------------------
   6. REASSURANCE
--------------------------------------------------------------- */
.reassurance-section {
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-pad);
  text-align: center;
}
.reassurance-section .doodle-underline { margin-inline: auto; }
.reassurance-section h2 { margin-bottom: 1.5rem; }
.reassurance-section .lead {
  margin-inline: auto;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   7. WHO IT'S FOR
--------------------------------------------------------------- */
.who-section { padding-block: var(--section-pad); }
.who-section h2 { text-align: center; margin-bottom: 2.5rem; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.card {
  border: var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.card:nth-child(2):hover { transform: translate(-3px, -3px) rotate(1deg); }
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  margin-bottom: 1.25rem;
}
.card h3 { margin-bottom: 0.75rem; }

/* ---------------------------------------------------------------
   8. PRICING
--------------------------------------------------------------- */
.pricing-section {
  background: var(--off-white);
  padding-block: var(--section-pad);
  text-align: center;
}
.pricing-section h2 { margin-bottom: 1rem; }
.pricing-section .lead { margin-inline: auto; margin-bottom: 2.5rem; }

.price-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.price-card {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--white);
  padding: 2rem 1.75rem;
  min-width: 220px;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); }
.price-card--free {
  background: var(--lime);
  transform: rotate(-2deg);
}
.price-card--free:hover { transform: rotate(0deg) translate(-3px, -3px); }
.price-card-label {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.price-card-value {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  margin-block: 0.35rem;
}
.price-card-detail { font-weight: 600; }
.price-card-note {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 0.4rem;
}
.price-arrow { width: 60px; }
.price-arrow path { stroke-width: 3.5; }
.price-options {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pricing-note {
  max-width: 560px;
  margin: 0 auto 2rem;
  opacity: 0.85;
}

/* ---------------------------------------------------------------
   8A2. PACKAGES
--------------------------------------------------------------- */
.packages-section {
  padding-block: var(--section-pad);
  text-align: center;
}
.packages-section h2 { margin-bottom: 1rem; }
.packages-section .lead { max-width: 620px; margin-inline: auto; margin-bottom: 2.25rem; }

.packages-toggle {
  display: inline-flex;
  border: var(--border);
  border-radius: var(--radius);
  padding: 0.3rem;
  background: var(--off-white);
  margin-bottom: 2.5rem;
  gap: 0.3rem;
}
.packages-toggle-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 1.4rem;
  border-radius: calc(var(--radius) - 0.3rem);
  border: none;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: background 0.15s ease;
}
.packages-toggle-btn.is-active { background: var(--lime); }

.packages-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
  text-align: left;
}
.packages-grid[hidden] { display: none; }
.package-card {
  position: relative;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.package-badge {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}
.package-card--popular {
  border-color: var(--lime);
  border-width: 3px;
  box-shadow: var(--shadow-lg);
}
.package-card--popular .package-badge { background: var(--lime); color: var(--black); }
.package-card--best-value {
  background: var(--black);
  color: var(--white);
}
.package-card--best-value .package-validity,
.package-card--best-value .package-per-lesson { opacity: 0.75; }
.package-name {
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}
.package-classes { opacity: 0.7; font-size: 0.9rem; margin-bottom: 0.5rem; }
.package-price { font-weight: 700; font-size: 1.9rem; line-height: 1; margin-bottom: 0.3rem; }
.package-per-lesson { font-size: 0.85rem; opacity: 0.75; }
.package-savings { font-size: 0.85rem; font-weight: 700; color: var(--black); margin-top: 0.4rem; }
.package-card--best-value .package-savings { color: var(--lime); }
.package-validity { font-size: 0.8rem; opacity: 0.6; margin-top: 0.4rem; }

.packages-note {
  max-width: 560px;
  margin: 0 auto 1.5rem;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .packages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .packages-grid { grid-template-columns: 1fr; }
  .package-card--popular { order: -1; }
}

/* ---------------------------------------------------------------
   8B. KIDS PROGRAM
--------------------------------------------------------------- */
.kids-section {
  padding-block: var(--section-pad);
  text-align: center;
}
.kids-section .lead { margin-inline: auto; margin-bottom: 0.25rem; }
.kids-facts { justify-content: center; }
.kids-pricing-note {
  max-width: 560px;
  margin: 0 auto 2rem;
  opacity: 0.85;
}
.kids-pricing-note a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--lime);
}

/* ---------------------------------------------------------------
   9. WHAT TO EXPECT
--------------------------------------------------------------- */
.expect-section {
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-pad);
}
.expect-section h2 { text-align: center; margin-bottom: 2.75rem; }
.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.expect-icon {
  width: 60px;
  height: 60px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(215, 242, 56, 0.1);
  border: 2px solid var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.expect-item h3 { margin-bottom: 0.6rem; }
.expect-item p { opacity: 0.85; max-width: 32ch; margin-inline: auto; }

/* ---------------------------------------------------------------
   10. ABOUT
--------------------------------------------------------------- */
.about-section { padding-block: var(--section-pad); }
.about-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-section h2 { margin-bottom: 1.5rem; }
.about-copy p { margin-bottom: 1.15rem; max-width: 50ch; }
.about-instagram-link { margin-top: 1.75rem; }
.about-lead { max-width: 68ch; margin-bottom: 2.5rem; }
.coach-grid {
  margin-bottom: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.coach-card h3 { margin-bottom: 0.35rem; }
.coach-role {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 1rem;
}
.coach-bio { margin-bottom: 1.25rem; }
.coach-card .btn { margin-top: 0.1rem; }
.coach-video-wrap {
  max-width: 220px;
  margin: 0 auto 1.25rem auto;
}
.coach-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--black);
}
.brand-promise {
  margin-top: 1.75rem;
  margin-inline: auto;
  width: fit-content;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.4rem;
  background: var(--lime);
  display: block;
  padding: 1rem 1.25rem;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  line-height: 1.35;
  box-shadow: var(--shadow-md);
  transform: rotate(-1deg);
}
.brand-promise-accent {
  font-size: 1.7rem;
  text-transform: none;
  display: inline-block;
  margin-top: 0.25rem;
}
.about-art { text-align: center; }

.about-instagram-feed { margin-top: 3.5rem; }
.about-instagram-feed-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 1rem;
  text-align: center;
}
.instagram-embed-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
/* Instagram's embed.js renders each blockquote into its own iframe
   and applies its own inline sizing, but respects a max-width set
   here before that happens. flex-basis lets 2–4 sit per row on
   wide screens and stack to one column on mobile. */
.instagram-embed-grid > blockquote.instagram-media {
  flex: 1 1 300px;
  max-width: 340px !important;
  min-width: 300px !important;
}
/* Self-hosted GrindLab.bkk collab clips in the Kids section. Native
   video tags so they always play inline, no dependency on Instagram/
   TikTok's own embed backends. */
.kids-video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.kids-video {
  flex: 1 1 240px;
  max-width: 300px;
}
.kids-video video {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: #000;
}
.kids-video-caption {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 0.75rem;
  margin-bottom: 2.25rem;
}
/* ---------------------------------------------------------------
   11. LOCATIONS
--------------------------------------------------------------- */
.locations-section {
  background: var(--off-white);
  padding-block: var(--section-pad);
  text-align: center;
}
.locations-lead { margin-inline: auto; margin-bottom: 2.5rem; }

.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
}
.location-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.25rem;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--black);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.location-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-md);
}
.location-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.location-card-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1.3;
}
.location-card-link {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.location-card-more {
  cursor: default;
  border-style: dashed;
  opacity: 0.75;
}
.location-card-more:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.location-card:hover .location-card-link {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--lime);
}

/* ---------------------------------------------------------------
   12. HOW IT WORKS
--------------------------------------------------------------- */
.how-section { padding-block: var(--section-pad); }

.reviews-section {
  background: var(--off-white);
  padding-block: var(--section-pad);
  text-align: center;
}
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 2rem;
  align-items: start;
}
.review-block { min-width: 0; }
.moments-heading {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-top: 1rem;
  margin-bottom: 2rem;
  opacity: 0.85;
}
.moment-caption {
  max-width: 320px;
  margin: 1rem auto 0;
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
  text-align: left;
}
.moments-grid .review-block:only-child {
  grid-column: 1 / -1;
  max-width: 320px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .reviews-grid { grid-template-columns: 1fr; gap: 3rem; }
}
.review-card {
  max-width: 62ch;
  margin: 2rem auto 1.5rem;
  padding: 2rem;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.review-stars {
  color: var(--black);
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}
.review-text {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.review-author {
  font-weight: 700;
  opacity: 0.75;
  font-size: 0.9rem;
}
.review-video-label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.review-video-wrap {
  max-width: 320px;
  margin: 0 auto 2rem auto;
}
.review-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--black);
}
.review-cta-link {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--black);
  opacity: 0.7;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}
.review-cta-link:hover,
.review-cta-link:focus-visible {
  opacity: 1;
  text-decoration-color: var(--lime);
}
.how-section h2 { text-align: center; margin-bottom: 3rem; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.step {
  border-left: var(--border);
  padding-left: 1.5rem;
}
.step-num {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--black);
  background: var(--lime);
  border: 2px solid var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
}
.step h3 { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------
   13. BOOKING
--------------------------------------------------------------- */
.booking-section {
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-pad);
  text-align: center;
}
.booking-section .lead { margin-inline: auto; margin-bottom: 2.5rem; opacity: 0.9; }
.booking-reassurance {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  margin: 0.75rem 0 1.5rem;
  transform: rotate(-1deg);
  display: inline-block;
}
.hero-consent-note {
  margin-top: 0.5rem;
}
.pricing-consent-note {
  max-width: 48ch;
  margin: 0 auto 1.5rem;
}

/* Preference picker — a white card floating in the black section,
   matching the old placeholder's "dashed lime border" treatment. */
.booking-picker {
  background: var(--white);
  color: var(--black);
  border: 3px dashed var(--lime);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
}

.booking-mode-toggle {
  display: flex;
  border: var(--border);
  border-radius: var(--radius);
  padding: 0.35rem;
  background: var(--off-white);
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}
.booking-mode-btn {
  flex: 1;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border-radius: calc(var(--radius) - 0.35rem);
  border: none;
  background: transparent;
  color: var(--black);
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.booking-mode-btn:hover { opacity: 0.85; }
.booking-mode-btn.is-active {
  background: var(--lime);
  opacity: 1;
  box-shadow: var(--shadow-sm);
}

#durationStep { margin-bottom: 1.5rem; }
.picker-durations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.picker-duration {
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  padding: 0.6rem 1.15rem;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
}
.picker-duration-price {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.1rem;
}
.picker-duration.is-selected {
  background: var(--lime);
  box-shadow: var(--shadow-sm);
}

.picker-packages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.picker-packages[hidden] { display: none; }
.picker-package {
  min-height: 44px;
  min-width: 118px;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-weight: 700;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
}
.picker-package-name { font-size: 0.85rem; }
.picker-package-detail {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}
.picker-package-price {
  font-size: 0.95rem;
  margin-top: 0.25rem;
}
.picker-package-save {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}
.picker-package.is-selected {
  background: var(--lime);
  box-shadow: var(--shadow-sm);
}
#packageStep { margin-bottom: 0.5rem; }
#packageStep .packages-toggle { margin-bottom: 1.5rem; }

.picker-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 0.6rem;
}
.picker-label:not(:first-child) { margin-top: 1.5rem; }

.picker-days {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin: 0 -0.25rem;
  padding-inline: 0.25rem;
}
.picker-day {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem 0.4rem;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: var(--off-white);
  cursor: pointer;
}
.picker-day-dow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.65;
}
.picker-day-num { font-size: 1.15rem; font-weight: 700; }
.picker-day.is-selected {
  background: var(--lime);
  box-shadow: var(--shadow-sm);
}

.picker-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.picker-time {
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--white);
  cursor: pointer;
}
.picker-time.is-selected {
  background: var(--lime);
  box-shadow: var(--shadow-sm);
}

.picker-summary-text {
  font-weight: 600;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--black);
}

.picker-sublabel {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.picker-sublabel:not(:first-child) { margin-top: 1.1rem; }
.picker-optional {
  text-transform: none;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: normal;
}

/* Collapsed by default — the "who's skating / experience" questions are
   optional context, not a required step, so they shouldn't cost any
   scroll or visual weight for a visitor who just wants to pick a time
   and go. Native <details>/<summary> needs no JS and no animation for
   the open/close itself, which keeps this cheap and dependency-free. */
.picker-about {
  margin-top: 1.5rem;
  border: 2px dashed var(--black);
  border-radius: var(--radius);
  background: var(--off-white);
}
.picker-about[open] { border-style: solid; }
.picker-about-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}
.picker-about-toggle::-webkit-details-marker { display: none; }
.picker-about-toggle::marker { content: ''; }
.picker-about-toggle-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--black);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.picker-about-toggle-icon::before { content: '+'; }
.picker-about[open] .picker-about-toggle-icon::before { content: '\2212'; }
.picker-about[open] .picker-about-toggle { border-bottom: 2px solid var(--black); }
.picker-about-body { padding: 1.1rem; }

.picker-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
#pickerBookingType { margin-bottom: 1.5rem; }
.picker-choice {
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--off-white);
  cursor: pointer;
}
.picker-choice.is-selected {
  background: var(--lime);
  box-shadow: var(--shadow-sm);
}

.picker-cta-block { margin-top: 1.75rem; }
.picker-primary-cta {
  display: flex;
  width: 100%;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  min-height: 56px;
  margin-bottom: 0.85rem;
}
.picker-secondary-confirm {
  margin-top: 1.25rem;
  font-size: 0.85rem;
}
.picker-secondary-label {
  opacity: 0.65;
  margin-right: 0.4rem;
}
.picker-secondary-link {
  font-weight: 700;
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
.picker-secondary-link:hover,
.picker-secondary-link:focus-visible { text-decoration-color: var(--lime); }
.picker-note {
  font-size: 0.82rem;
  opacity: 0.65;
  max-width: 48ch;
}
/* Scoped to the booking widget specifically (picker-note is reused
   elsewhere on the page with different spacing needs). Centers the
   fine print and gives every note its own top margin, so notes sitting
   directly under a pill row or stacked against another note both get
   proper breathing room instead of crowding whatever's above them. */
.booking-picker .picker-note {
  text-align: center;
  margin-top: 0.85rem;
  margin-inline: auto;
}
.booking-picker .picker-secondary-confirm { text-align: center; }

.booking-secondary {
  margin-top: 3rem;
}
.booking-secondary-label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 0.5rem;
}
.booking-phone a {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  text-decoration: none;
}
.booking-phone a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.booking-secondary-hint { margin-top: 0.5rem; }
.booking-secondary-hint a { color: var(--lime); }

/* ---------------------------------------------------------------
   14. FAQ
--------------------------------------------------------------- */
.faq-section { padding-block: var(--section-pad); }
.faq-section h2 { text-align: center; margin-bottom: 2.5rem; }
.faq-list {
  max-width: 760px;
  margin-inline: auto;
}
.faq-item {
  border-top: 2px solid var(--black);
}
.faq-item:last-child { border-bottom: 2px solid var(--black); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.25rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.15rem);
  min-height: 44px;
  transition: background-color 0.15s ease;
}
.faq-question:hover,
.faq-question:focus-visible { background: var(--off-white); }
.faq-icon {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--black);
  border-radius: 2px;
}
.faq-icon::before { width: 20px; height: 3px; top: 8.5px; left: 0; }
.faq-icon::after { width: 3px; height: 20px; top: 0; left: 8.5px; transition: transform 0.2s ease; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: rotate(90deg); opacity: 0; }

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.faq-answer p { padding: 0 0.75rem 1.25rem; max-width: 60ch; opacity: 0.85; }

/* ---------------------------------------------------------------
   15. FINAL CTA
--------------------------------------------------------------- */
.final-cta-section {
  background: var(--lime);
  padding-block: var(--section-pad);
  text-align: center;
}
.final-cta-section h2 { margin-bottom: 0.75rem; max-width: 18ch; margin-inline: auto; }
.final-cta-handwritten {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  margin-bottom: 2rem;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.final-cta-section .btn-primary {
  background: var(--black);
  color: var(--lime);
}
.final-cta-section .btn-primary:hover { background: var(--white); color: var(--black); border-color: var(--black); }

/* ---------------------------------------------------------------
   16. FOOTER
--------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 1.5rem;
  border-top: 4px solid var(--lime);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.footer-logo {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3rem;
}
.footer-tagline { opacity: 0.75; margin-top: 0.4rem; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-weight: 600;
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.footer-contact a:first-child { text-decoration: none; font-weight: 600; }
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.9rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  opacity: 0.85;
}
.footer-social a:hover { text-decoration: underline; text-decoration-color: var(--lime); opacity: 1; }
.footer-social-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.footer-social-icon svg { width: 100%; height: 100%; }
.footer-copyright {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.6;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.5rem;
  margin-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
   17. STICKY MOBILE BOOKING BAR
   Hidden on desktop. Shown on phones/small tablets once the hero's
   own CTA scrolls out of view, and hidden again once the real
   Booking section is reached (see script.js).
--------------------------------------------------------------- */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--white);
  border-top: var(--border);
  padding: 0.6rem var(--gutter);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.sticky-mobile-cta .btn {
  width: 100%;
  justify-content: center;
}
.sticky-mobile-cta.is-hidden {
  transform: translateY(120%);
}

@media (max-width: 900px) {
  .sticky-mobile-cta { display: block; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------
   18. BLOG / GUIDES
   Shared components for the Guides index page and every individual
   guide article. Reuses the same buttons/cards/doodle language as
   the rest of the site rather than introducing a new visual system.
--------------------------------------------------------------- */

/* --- Shared page header for guides/index.html and article pages --- */
.guides-hero {
  background: var(--off-white);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 1.5rem);
}
/* 62ch matches .article-body below intentionally — the hero boxes
   (Summarise/Key Takeaways/On This Guide) and the running article text
   now share one consistent reading-width column instead of two
   different widths stacked on top of each other. */
.guides-hero .wrap { max-width: 62ch; }
.guides-hero h1 { margin-bottom: 0.75rem; }
.guides-hero .lead { margin-bottom: 2.25rem; }

/* --- Article banner: purely decorative, never carries text ---
   Keeping text completely off this graphic (the real H1, breadcrumb,
   and meta line all render afterward on the plain background) means
   there's no risk of a diagonal color block or dot pattern ever
   competing with or hiding behind readable text. */
.article-banner {
  height: 200px;
  border-radius: var(--radius);
  border: var(--border);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.article-banner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li:not(:last-child)::after {
  content: "›";
  opacity: 0.4;
}
.breadcrumbs a {
  color: var(--black);
  opacity: 0.65;
  text-decoration: none;
}
.breadcrumbs a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--lime); }
.breadcrumbs [aria-current="page"] { font-weight: 700; opacity: 1; }

/* --- Article header meta (author, dates, reading time) --- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.9rem;
  opacity: 0.75;
  margin-top: 0.75rem;
  margin-bottom: 1.75rem;
}
.article-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 0.9rem;
  opacity: 0.6;
}

/* --- "Summarise this guide" AI buttons --- */
.ask-ai-section {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.ask-ai-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.ask-ai-note {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 1rem;
  max-width: 60ch;
}
.ask-ai-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ask-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--black);
  background: var(--off-white);
  border: 2px solid var(--black);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.ask-ai-btn:hover { background: var(--lime); transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); }
.ask-ai-btn:active { transform: translate(1px, 1px); }
.ask-ai-btn[data-copied="true"] { background: var(--lime); }
.ask-ai-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Key takeaways --- */
.key-takeaways {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}
.key-takeaways h2 {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--lime);
  margin-bottom: 1rem;
}
.key-takeaways ul { list-style: none; }
.key-takeaways li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
  line-height: 1.55;
}
.key-takeaways li:last-child { margin-bottom: 0; }
.key-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  background: var(--lime);
  border-radius: 50%;
}

/* --- Table of contents --- */
.article-toc {
  border: var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
  background: var(--off-white);
}
.article-toc-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
}
.article-toc ol {
  list-style: decimal;
  padding-left: 1.25rem;
  columns: 1;
}
.article-toc li { margin-bottom: 0.5rem; }
.article-toc a {
  color: var(--black);
  text-decoration: none;
}
.article-toc a:hover { text-decoration: underline; text-decoration-color: var(--lime); }

/* Decorative side-flourish doodles in article-section. Only shown on very
   wide screens where there's real margin outside the wrap to sit in, so
   they never compete with or push down the article content. */
.side-accent { display: none; }
@media (min-width: 1500px) {
  .side-accent {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    pointer-events: none;
    z-index: 0;
  }
  .side-accent svg { display: block; width: 100%; height: auto; }
  .side-accent--left { left: 24px; }
  .side-accent--right { right: 24px; }
}

/* --- Article body typography --- */
.article-section {
  padding-block: var(--section-pad);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.article-body { max-width: 62ch; margin-inline: auto; }
.article-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.article-body p { margin-bottom: 1.1rem; line-height: 1.7; }
.article-body ul,
.article-body ol {
  margin-bottom: 1.1rem;
  padding-left: 1.4rem;
}
.article-body li { margin-bottom: 0.5rem; line-height: 1.6; }
.article-body ul { list-style: disc; }
.article-body a { color: var(--black); text-decoration-color: var(--lime); }
.article-body strong { font-weight: 700; }

/* --- Inline "subtle" CTA embedded partway through an article --- */
.inline-cta {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--off-white);
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
  box-shadow: var(--shadow-sm);
}
.inline-cta p { max-width: 55ch; margin-bottom: 1rem; }
.inline-cta p:last-of-type { margin-bottom: 0; }

/* --- Related guides --- */
.related-guides {
  border-top: 2px solid var(--black);
  padding-top: 2rem;
  margin-top: 3rem;
}
.related-guides h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  margin-bottom: 1.25rem;
}
.related-guides ul { list-style: none; }
.related-guides li { margin-bottom: 0.75rem; }
.related-guides a {
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
}
.related-guides a:hover { text-decoration: underline; text-decoration-color: var(--lime); }

/* --- Guides index: article card grid --- */
.guides-index-section { padding-block: var(--section-pad); }
.related-guides-section {
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-pad);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--black);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }

/* Small abstract topic icon on a lime-and-black block, bled out to
   the card's edges (negative margin cancels the card's own padding).
   Purely decorative, never carries text, so it can't create a
   contrast or legibility problem. */
.guide-card-visual {
  margin: -1.5rem -1.5rem 0;
  height: 96px;
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
  border-bottom: 3px solid var(--black);
  overflow: hidden;
  position: relative;
}
.guide-card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.guide-card-category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  opacity: 0.6;
}
.guide-card h3 { font-size: 1.1rem; line-height: 1.3; }
.guide-card-excerpt { font-size: 0.92rem; opacity: 0.8; line-height: 1.55; flex-grow: 1; }
.guide-card-meta {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.guide-card:hover .guide-card-meta { opacity: 1; text-decoration: underline; text-decoration-color: var(--lime); }

.guides-coming-soon {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 2px dashed var(--black);
  border-radius: var(--radius);
  opacity: 0.7;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   19. RESPONSIVE
--------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem var(--gutter) 2rem;
    display: none;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav ul {
    flex-direction: column;
    gap: 1.1rem;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }
  .nav-cta {
    justify-content: center;
    width: 100%;
    padding-inline: 1.1rem;
    font-size: 0.92rem;
    letter-spacing: 0;
  }
  .lang-switch { justify-content: center; margin-bottom: 0.5rem; }

  .card-grid { grid-template-columns: 1fr; }

  .expect-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .about-inner { grid-template-columns: 1fr; }
  .about-art { max-width: 240px; margin-inline: auto; }

  .location-grid { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: 1fr; gap: 2.25rem; }

  .footer-inner { flex-direction: column; }

  .guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .price-flow { flex-direction: column; }
  .price-arrow { transform: rotate(90deg); width: 40px; }
  .price-card { width: 100%; max-width: 320px; }
  .price-options { flex-direction: column; width: 100%; align-items: center; }
  .price-card--free { transform: rotate(0deg); }
  .price-card--free:hover { transform: translate(-2px, -2px); }

  .picker-duration { flex: 1 1 100%; text-align: center; }
  .picker-choice { flex: 1 1 100%; text-align: center; }

  /* -------------------------------------------------------------
     BOOKING WIDGET — MOBILE (majority of visitors are on a phone)
     Goals: big uniform tap targets, generous spacing between
     buttons so nothing gets mis-tapped, and an unmistakable
     selected state.
     ------------------------------------------------------------- */

  /* Day picker: horizontal scroll strip, same pattern as desktop.
     A wrapping grid was used here previously when the picker only
     showed 7 days, but that breaks down at 14 (2 weeks) — a fixed
     column count produces an awkward half-empty last row and
     pushes the time picker further down the page. A scroll strip
     stays a fixed height and works cleanly regardless of how many
     days are shown, so it doesn't need revisiting if this changes
     again later. */
  .picker-day {
    min-width: 62px;
    min-height: 62px;
  }
  .picker-day-num { font-size: 1.3rem; }

  /* Time picker: a uniform 2-up grid instead of variable-width
     wrapped pills — every button is the same large size regardless
     of how long its label is. */
  .picker-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }
  .picker-time {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    font-size: 1rem;
  }

  .picker-choice-group { gap: 0.7rem; }
  .picker-choice { min-height: 54px; }
  .picker-about-toggle { min-height: 54px; font-size: 0.92rem; }

  /* An extra-thick border on top of the lime fill makes "selected"
     unmistakable at a glance, which matters more on a small screen
     you're scanning quickly than on a spacious desktop layout. */
  .picker-day.is-selected,
  .picker-time.is-selected,
  .picker-choice.is-selected,
  .picker-duration.is-selected,
  .picker-package.is-selected {
    border-width: 3px;
  }

  /* Same "make selected unmistakable on mobile" goal as above, but for
     the container+borderless-button toggle pattern (booking mode,
     packages), where the individual buttons don't have their own
     border to widen, so a border is added specifically to the active
     one instead. */
  .booking-mode-btn.is-active,
  .packages-toggle-btn.is-active {
    border: 2px solid var(--black);
  }

  /* Fine print was a touch small/low-contrast for comfortable phone
     reading — nudge both up slightly without changing desktop density. */
  .picker-note { font-size: 0.85rem; opacity: 0.72; }
  .booking-mode-btn { font-size: 0.95rem; padding: 0.9rem 0.5rem; }

  .hero-facts { justify-content: flex-start; }
}

/* Small phones (375–430px range): tighten the hero so the CTA sits
   closer to the top, keep long button labels from overflowing their
   pill by wrapping them full-width instead, and shrink illustrations
   further since they're decorative and not part of the 5-second scan. */
@media (max-width: 480px) {
  .btn-lg,
  .footer-contact .btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero { padding-block: 2rem 2.5rem; }
  .hero-body { margin-top: 1rem; }
  .hero-facts { margin-top: 1rem; margin-bottom: 0; }

  .about-art { max-width: 190px; }
  .location-grid { grid-template-columns: 1fr; }

  .guide-grid { grid-template-columns: 1fr; }
  .ask-ai-btn { flex: 1 1 auto; justify-content: center; }
}