:root { --accent: #E2B8B8; --ink: #1C1B1B; --header-h: 66px; --nav-h: 74px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #E9E3DE; color: var(--ink); font-family: 'Outfit', system-ui, sans-serif; }
a { color: #1C1B1B; } a:hover { color: #7A3F45; }
img { max-width: 100%; }
button { font: inherit; }
.page { position: relative; width: 100%; max-width: 480px; margin: 0 auto; background: #F7F5F2; display: flex; flex-direction: column; overflow-x: clip; box-shadow: 0 0 60px rgba(28,27,27,0.12); min-height: 100vh; }
main { display: flex; flex-direction: column; }
.site-header { position: sticky; top: 0; z-index: 60; }
section[id], article { scroll-margin-top: calc(var(--header-h) + 8px); }
.menu-overlay { position: fixed; top: var(--header-h); left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: 0; z-index: 55; background: rgba(22,21,21,0.55); }
/* booking options pop-up */
.book-overlay { position: fixed; top: var(--header-h); left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: 0; z-index: 56; background: rgba(22,21,21,0.35); }
.book-pop { position: absolute; top: 8px; right: 12px; }
.book-pop a:hover { filter: brightness(0.96); }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 50; padding-bottom: max(20px, env(safe-area-inset-bottom)) !important; }
.hero-slide { opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.is-on { opacity: 1; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
a:focus-visible, button:focus-visible { outline: 2px solid #7A3F45; outline-offset: 2px; }
[style*="overflow-x: auto"]::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-slide, .mb-slide { transition: none !important; } }

/* ================= Laptop & desktop layout (960px and wider) ================= */
@media (min-width: 960px) {
  :root { --wrap: 1160px; --read: 760px; --gut: max(40px, calc((100% - var(--wrap)) / 2)); --gut-read: max(40px, calc((100% - var(--read)) / 2)); }
  body { background: #F7F5F2; }
  .page { max-width: none; box-shadow: none; }

  /* header: full width, content aligned to the page grid */
  .site-header { padding: 18px var(--gut) !important; }
  .site-header > div:first-child { font-size: 26px !important; letter-spacing: 6px !important; }

  /* menu + booking pop-ups anchor to the right edge of the content */
  .menu-overlay, .book-overlay { max-width: none; }
  .menu-overlay nav { width: 400px; margin-left: auto; margin-right: max(24px, calc((100vw - var(--wrap)) / 2)); border-radius: 0 0 20px 20px; }
  .book-pop { right: max(24px, calc((100vw - var(--wrap)) / 2)) !important; width: 340px !important; }

  /* every section: content held to a centred column */
  main > section { padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
  main > section h2 { font-size: 36px !important; }

  /* HERO: taller, card sits bottom-left */
  .hero { height: 680px !important; padding-top: 32px !important; padding-bottom: 40px !important; }
  .hero > div[style*="margin-top: auto"] { align-self: center; max-width: 560px; padding: 32px 32px 28px !important; gap: 14px !important; }
  .hero > div[style*="margin-top: auto"] h1 { font-size: 32px !important; }
  .hero > div[style*="margin-top: auto"] p { font-size: 15px !important; }
  .hero div[style*="font-family: 'Cinzel'"][style*="font-size: 15px"] { font-size: 20px !important; }

  /* AS SEEN ON: bigger cards, more visible at once */
  .press { padding-top: 40px !important; padding-bottom: 40px !important; }
  .press [style*="scroll-snap-align"] { flex-basis: 210px !important; }
  .press [style*="scroll-snap-align"] img { height: 160px !important; }

  /* GALLERY: 4-column photo grid, wide photos span 2 */
  #tour { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  #tour > div:first-child, #tour > button, #tour [data-if] > div > div:not([style*="grid-template-columns"]) { grid-column: 1 / -1; }
  #tour > button { justify-self: center; margin-top: 12px !important; }
  #tour > div[style*="grid-template-columns"], #tour [data-if] > div, #tour [data-if] > div > div[style*="grid-template-columns"] { display: contents !important; }
  #tour img { width: 100% !important; height: 300px !important; }
  #tour > img, #tour [data-if] > div > img { grid-column: span 2; }

  /* WHY FURAPY: intro centred, 4 feature cards in a 2x2 grid */
  #why > div:first-child { max-width: var(--read); margin: 0 auto 20px; }
  #why > div:nth-child(2) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
  #why > div:nth-child(3) { padding: 32px 36px !important; }

  /* SESSIONS & PRICING: three cards side by side */
  #sessions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px !important; }
  #sessions > div:first-child { grid-column: 1 / -1; }
  #sessions article img { height: 240px !important; }

  /* reading-width sections */
  .flow, #faq, #concierge, #book { padding-left: var(--gut-read) !important; padding-right: var(--gut-read) !important; }

  /* PRIVATE STUDIO: wider dark card with a 2-column inside */
  #private > article { padding: 40px !important; }
  #private > article > div[style*="flex-direction: column; gap: 8px"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
  #private > article > div[style*="flex-direction: column; gap: 8px"] > div[style*="height: 190px"] { height: 300px !important; }
  #private > article > div[style*="flex-direction: column; gap: 8px"] > div[style*="grid-template-columns"] img { height: 300px !important; }
  #private > article > div[style*="flex-direction: column; gap: 8px"] > div[style*="grid-template-columns"] { display: grid; }
  #private div[style*="grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px"] > div[style*="height: 60px"] { height: 68px !important; }
  #private div[style*="grid-template-columns"]:has(> div[style*="height: 60px"]) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #private > article > .enquire { align-self: center; width: 100%; max-width: 520px; }

  /* VISIT: map larger */
  #concierge a[style*="height: 180px"] { height: 280px !important; }

  /* CTA + footer */
  .cta { padding-top: 72px !important; padding-bottom: 72px !important; }
  footer { padding-left: var(--gut) !important; padding-right: var(--gut) !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; column-gap: 32px !important; }
  footer > div:first-child { flex-basis: 100%; }
  footer .socials { order: 5; flex-basis: 100%; }
  footer > p:last-child { order: 6; }
}

@media (min-width: 1280px) {
  #tour img { height: 320px !important; }
}