/* =====================================================================
   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;
  gap: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  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: column;
  text-decoration: none;
  line-height: 1;
}
.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.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
  opacity: 0.65;
  margin-top: 0.2rem;
}

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

.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
--------------------------------------------------------------- */
.hero {
  background: var(--off-white);
  padding-block: var(--section-pad);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.hero-inner {
  display: block;
  position: relative;
  z-index: 1;
}
.hero-copy {
  max-width: 780px;
  margin-inline: auto;
}

/* Decorative motion-line + spark accents that live in the wide side
   margins left empty on large screens now that the hero illustration
   is gone. Hidden by default and only shown once there's actually
   room for them, so mobile and tablet layouts are untouched. */
.side-accent {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  pointer-events: none;
  z-index: 0;
}
.side-accent svg { width: 100%; height: auto; opacity: 0.5; }
.side-accent--left { left: clamp(0.5rem, 3vw, 2.5rem); }
.side-accent--right { right: clamp(0.5rem, 3vw, 2.5rem); }
.side-accent--right svg { transform: scaleX(-1); }
@media (min-width: 1080px) {
  .side-accent { display: block; }
}
@media (min-width: 1320px) {
  .side-accent { width: 200px; }
}
.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 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  max-width: 46ch;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}
.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 {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  opacity: 0.85;
}
.hero-contact a {
  color: var(--black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-underline-offset: 2px;
}
.hero-contact a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------
   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; }

/* ---------------------------------------------------------------
   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-copy p { margin-bottom: 1rem; max-width: 50ch; }
.brand-promise {
  margin-top: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.4rem;
  background: var(--lime);
  display: inline-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; }

/* ---------------------------------------------------------------
   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(4, 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: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); }
.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; }

/* 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;
}

.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 {
  border-top: 2px solid var(--black);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.picker-summary-text {
  font-weight: 600;
  margin-bottom: 1rem;
}
.picker-confirm-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.picker-confirm-buttons .btn { font-size: 0.9rem; padding: 0.75rem 1.25rem; min-height: 44px; }
.picker-note {
  font-size: 0.82rem;
  opacity: 0.65;
  max-width: 48ch;
}

.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 { text-decoration: none; opacity: 0.85; }
.footer-social a:hover { text-decoration: underline; text-decoration-color: var(--lime); opacity: 1; }
.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(2rem, 5vw, 3rem);
}
.guides-hero .wrap { max-width: 820px; }

/* --- 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); }

/* --- 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); }

/* --- Article body typography --- */
.article-section {
  padding-block: var(--section-pad);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.article-body { max-width: 68ch; margin-inline: auto; }
.article-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}
.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); }
.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); }
.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; }

  .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-card--free { transform: rotate(0deg); }
  .price-card--free:hover { transform: translate(-2px, -2px); }

  .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: 1.25rem; margin-bottom: 1.5rem; }

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