:root {
    /* ═══ COLOUR — Provence Morning Light ═══ */
    --bg:         #F2EBE0;
    --travertine: #E7DED2;
    --limestone:  #D9D0C4;
    --cream:      #EFEADD;
    --white:      #FBF7EC;

    --ink:        #251F1C;
    --ink-70:     rgba(37,31,28,0.70);
    --ink-55:     rgba(37,31,28,0.55);
    --ink-40:     rgba(37,31,28,0.40);
    --ink-25:     rgba(37,31,28,0.25);
    --ink-15:     rgba(37,31,28,0.15);
    --ink-08:     rgba(37,31,28,0.08);

    --sage:       #8B8E70;
    --sage-dk:    #5F6249;
    --sage-lt:    #A6A788;
    --sage-05:    rgba(139,142,112,0.05);
    --sage-10:    rgba(139,142,112,0.10);
    --sage-20:    rgba(139,142,112,0.20);

    --avail:      #7A8C7E;
    --busy:       #A6685C;

    --border:     rgba(37,31,28,0.14);
    --border-lt:  rgba(37,31,28,0.08);
    --border-md:  rgba(37,31,28,0.22);

    /* ═══ TYPOGRAPHY ═══ */
    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --w-light: 300;
    --w-book:  400;
    --w-med:   500;
    --w-semi:  600;
    --w-bold:  700;

    --fs-display:   clamp(2.25rem, 5.5vw, 3.5rem);
    --fs-hero:      clamp(1.75rem, 4.2vw, 2.75rem);
    --fs-h1:        clamp(1.5rem, 3.4vw, 2.25rem);
    --fs-h2:        clamp(1.25rem, 2.6vw, 1.75rem);
    --fs-h3:        clamp(1.0625rem, 1.8vw, 1.25rem);
    --fs-body-lg:   clamp(1rem, 1.2vw, 1.0625rem);
    --fs-body:      0.9375rem;
    --fs-body-tight:0.875rem;
    --fs-caption:   0.8125rem;
    --fs-micro:     0.6875rem;
    --fs-nano:      0.625rem;

    --lh-tight:   1.05;
    --lh-snug:    1.15;
    --lh-heading: 1.2;
    --lh-h3:      1.3;
    --lh-body:    1.75;
    --lh-tight-body: 1.55;
    --lh-micro:   1.4;

    --ls-tighter: -0.02em;
    --ls-tight:   -0.015em;
    --ls-normal:  0;
    --ls-wide:    0.015em;
    --ls-kicker:  0.2em;
    --ls-nano:    0.25em;

    /* ═══ SPACING ═══ */
    --s0: 4px;
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 40px;
    --s5: 64px;
    --s6: 96px;
    --s7: 128px;
    --s8: 160px;

    --section:    clamp(96px, 12vw, 160px);
    --section-sm: clamp(64px, 9vw, 128px);
    --gutter:     clamp(16px, 5vw, 80px);

    /* ═══ RADII ═══ */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    /* ═══ SHADOWS (used sparingly) ═══ */
    --sh-modal:   0 20px 60px rgba(37,31,28,0.12);
    --sh-lg:      0 12px 32px rgba(37,31,28,0.08);
    --sh-cookie:  0 -4px 24px rgba(37,31,28,0.06);

    /* ═══ MOTION ═══ */
    --t-fast:  160ms;
    --t-base:  240ms;
    --t-slow:  400ms;
    --t-xslow: 800ms;
    --ez:      cubic-bezier(0.16, 1, 0.3, 1);
    --ez-alt:  cubic-bezier(0.4, 0, 0.2, 1);

    /* ═══ Z-INDEX ═══ */
    --z-base:            0;
    --z-raised:         10;
    --z-sticky:        100;
    --z-drawer:        900;
    --z-modal-back:   1000;
    --z-modal:        1010;
    --z-gallery:     10000;

    /* ═══ CONTAINERS ═══ */
    --container:     1280px;
    --container-w:    920px;
    --container-ed:   620px;
  }

  /* ══════════════════════════════════════════════════════════
     RESET
     ══════════════════════════════════════════════════════════ */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    scroll-padding-top: 80px;
  }
  body {
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: var(--w-light);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
    overflow-x: hidden;
    min-height: 100vh;
  }
  img, picture, video, svg { display: block; max-width: 100%; height: auto; }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; transition: color var(--t-base) var(--ez); }
  input, textarea, select { font: inherit; color: inherit; }
  ::selection { background: var(--sage-20); color: var(--ink); }
  ::-moz-selection { background: var(--sage-20); color: var(--ink); }

  /* Focus visible only for keyboard */
  *:focus { outline: none; }
  *:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
  }

  /* ══════════════════════════════════════════════════════════
     TYPOGRAPHY (semantic defaults)
     ══════════════════════════════════════════════════════════ */
  h1, h2, h3, h4 {
    font-family: var(--font);
    color: var(--ink);
    font-weight: var(--w-light);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
  }
  p { color: var(--ink-70); }
  p + p { margin-top: var(--s2); }

  .kicker {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    line-height: var(--lh-micro);
    position: relative;
  }
  .kicker::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--sage);
    opacity: 0.7;
    vertical-align: middle;
    margin-right: 12px;
    margin-bottom: 2px;
  }
  .sec-head.center .kicker::before {
    margin-right: 12px;
  }

  /* ══════════════════════════════════════════════════════════
     LAYOUT — Container & Section
     ══════════════════════════════════════════════════════════ */
  .container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .container-w {
    max-width: var(--container-w);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .container-ed {
    max-width: calc(var(--container-ed) + 2 * var(--gutter));
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  section {
    padding-top: var(--section);
    padding-bottom: var(--section);
    position: relative;
  }
  @media (max-width: 767px) {
    section {
      padding-top: var(--section-sm);
      padding-bottom: var(--section-sm);
    }
  }

  /* Alternating section grounds */
  .sec-linen      { background: var(--bg); }
  .sec-travertine { background: var(--travertine); }
  .sec-cream      { background: var(--cream); }

  /* Reveal on scroll — reversible; see the IntersectionObserver near the
     other scroll-behaviour scripts. Values match the content pages'
     shared .sr treatment in design-system.css. Set directly rather than
     via --t-xslow/--ez (shared with the unrelated accommodation-card
     image hover-zoom) so tuning this stays scoped to reveals only.
     Opacity-only, no translateY: several reveal targets are large
     multi-child containers (.stay-grid, .rg, .faq-list,
     .journal-grid, .atelier-split), and animating their transform while
     the user is still actively scrolling read as competing motion against
     the finger-driven scroll on real devices — a real iPhone recording
     showed the scroll becoming visually unstable exactly when one of
     these large containers began translating. A pure opacity fade keeps
     the premium reveal feel without introducing that competing movement. */
  .reveal {
    opacity: 0;
    transform: none;
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
  /* Elements GSAP has taken over (see Phase 5B interaction layer): GSAP's
     own tween drives opacity/transform, so this CSS transition must not
     also animate the same properties in parallel — the two fighting over
     the same properties every frame was causing mobile scroll jank. */
  .reveal.reveal-gsap {
    transition: none;
  }

  /* ══════════════════════════════════════════════════════════
     BUTTONS — one primary, one text link
     ══════════════════════════════════════════════════════════ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 14px 32px;
    font-family: var(--font);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    background: var(--sage-dk);
    color: var(--white);
    border: 1px solid var(--sage-dk);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-base) var(--ez-alt),
                border-color var(--t-base) var(--ez-alt),
                transform var(--t-fast) var(--ez-alt);
    white-space: nowrap;
    text-decoration: none;
  }
  .btn:hover {
    background: var(--sage-dk);
    border-color: var(--sage-dk);
    transform: translateY(-1px);
  }
  .btn:active {
    transform: translateY(0);
  }
  .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    background: var(--sage);
  }

  .btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink-25);
  }
  .btn-outline:hover {
    background: var(--sage-10);
    border-color: var(--sage);
    color: var(--sage-dk);
  }

  /* Text link — secondary "button" */
  .txt-link {
    display: inline-block;
    font-family: var(--font);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink-25);
    transition: color var(--t-base) var(--ez-alt),
                border-color var(--t-base) var(--ez-alt);
  }
  .txt-link:hover {
    color: var(--sage-dk);
    border-color: var(--sage);
  }

  /* Inline article link */
  .prose a {
    color: var(--ink);
    border-bottom: 1px solid var(--ink-25);
    transition: color var(--t-base), border-color var(--t-base);
  }
  .prose a:hover {
    color: var(--sage-dk);
    border-color: var(--sage);
  }

  /* ══════════════════════════════════════════════════════════
     NAVIGATION
     ══════════════════════════════════════════════════════════ */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
    padding: 20px 0;
    transition: background var(--t-slow) var(--ez),
                backdrop-filter var(--t-slow) var(--ez),
                border-color var(--t-slow) var(--ez),
                padding var(--t-slow) var(--ez);
    border-bottom: 1px solid transparent;
  }
  .nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
  }
  .nav-logo {
    display: inline-flex;
    align-items: center;
    color: var(--white);
    font-size: var(--fs-caption);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: color var(--t-slow), text-shadow var(--t-slow);
    line-height: 1.2;
  }
  /* SVG logotype — the only logo on the site.
     The SVG paths are filled cream on transparent background, which reads
     correctly against the dark hero. When the nav switches to its light
     scrolled state, we invert the SVG via CSS filter so the logo appears
     as dark ink on the light background — no second asset required. */
  .nav-logo-img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 160px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
    transition: filter var(--t-slow) var(--ez);
  }
  /* When nav becomes light, invert the cream to dark ink.
     invert(1) flips cream (near-white) to near-black; brightness(0.15) then
     darkens it toward ink; the result matches the site's dark ink token
     visually and looks like a proper dark logotype, not a filter artefact. */
  .nav.scrolled .nav-logo-img {
    filter: invert(1) brightness(0.15) drop-shadow(none);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--s3);
    list-style: none;
  }
  .nav-links a {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: color var(--t-base), text-shadow var(--t-slow);
    padding: 8px 0;
  }
  .nav-links a:hover { color: var(--sage-lt); }
  .nav-links a { white-space: nowrap; }
  @media (max-width: 1100px) {
    .nav-links { gap: var(--s2); }
    .nav-links a { letter-spacing: 0.14em; }
  }

  .nav-right {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }

  .lang-btn {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--white);
    padding: 8px 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--t-base);
    min-height: 44px;
  }
  .lang-btn:hover { color: var(--sage-lt); }

  /* ── Nav SCROLLED state — subtle glass ──
     Restrained opacity (72% vs previous 94%) with a stronger blur so the
     compositor produces genuine translucent glass, not a solid tinted bar.
     No hard border — the content behind provides its own edge. */
  .nav.scrolled {
    background: rgba(242,235,224,0.72);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom-color: rgba(20,22,20,0.04);
    padding: 14px 0;
  }
  .nav.scrolled .nav-logo,
  .nav.scrolled .nav-links a,
  .nav.scrolled .lang-btn {
    color: var(--ink);
    text-shadow: none;
  }
  .nav.scrolled .nav-links a:hover,
  .nav.scrolled .lang-btn:hover { color: var(--sage-dk); }
  @media (max-width: 899px) {

    .nav-links, .lang-btn { display: none; }

}
  @media (max-width: 480px) {
    .nav-inner { gap: 12px; }
    .nav-logo-img { height: 28px; max-width: 130px; }
  }
  @media (max-width: 359px) {
    .nav-logo-img { height: 24px; max-width: 110px; }
  }
  /* iOS-safe scroll lock (body.drawer-locked): moved to the shared
     assets/drawer.css so every page using the shared drawer component
     gets it, not just this one. See that file for the rule. */

  /* ══════════════════════════════════════════════════════════
     HERO — the single most important viewport
     ══════════════════════════════════════════════════════════ */
  .hero {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    background: var(--ink);
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: flex-end;
  }
  /* Mobile: the hero fills the visible screen at the start, immersively.
     It is sized with svh (the small viewport: the screen with the browser's toolbars showing), NOT with dvh. dvh follows the toolbars while the
     visitor scrolls, so the hero (and with it the whole page below it) grew and shrank by the height of a toolbar every time Chrome or Safari
     showed or hid it: the page jumped under the finger (reported 19 Oct, recording in Chrome on iPhone). svh stays the same during a scroll;
     100vh is the fallback for browsers without svh. Desktop layout is preserved by the baseline above. */
  @media (max-width: 767px) {
    .hero {
      min-height: 100vh;         /* fallback */
      min-height: 100svh;
      height: 100vh;
      height: 100svh;
    }
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .hero-media picture { display: block; width: 100%; height: 100%; }
  .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: saturate(0.98) brightness(0.98);
  }
  .hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg,
        rgba(37,31,28,0.35) 0%,
        rgba(37,31,28,0.15) 30%,
        rgba(37,31,28,0.10) 55%,
        rgba(37,31,28,0.55) 100%);
  }
  .hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(56px, 8vh, 96px);
    width: 100%;
  }
  .hero-copy {
    max-width: 620px;
  }
  .hero-kicker {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.85;
    margin-bottom: var(--s3);
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }
  .hero-kicker::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--white);
    opacity: 0.7;
    vertical-align: middle;
    margin-right: 14px;
    margin-bottom: 3px;
  }
  .hero-h1 {
    font-family: var(--font);
    font-size: var(--fs-display);
    font-weight: var(--w-light);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--white);
    margin-bottom: var(--s3);
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    max-width: 14ch;
  }
  .hero-sub {
    font-family: var(--font);
    font-size: var(--fs-body-lg);
    font-weight: var(--w-light);
    line-height: var(--lh-body);
    color: var(--white);
    opacity: 0.92;
    max-width: 40ch;
    margin-bottom: var(--s4);
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  }
  .hero-actions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  /* the hero's quick actions are the glass dock (assets/glass.css + glass.js). will-change: opacity would make this wrapper a
     "backdrop root" and the dock's frosted blur would then see nothing behind it, so the wrapper drops it once it is shown */
  .hero .hero-actions { will-change: auto; }

  /* Hero initial state — GSAP drives the reveal.
     If JS fails, .no-js class (added below) restores visibility. */
  .hero-kicker,
  .hero-h1,
  .hero-sub,
  .hero-actions {
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
  }
  .no-js .hero-kicker,
  .no-js .hero-h1,
  .no-js .hero-sub,
  .no-js .hero-actions,
  html.reduced-motion .hero-kicker,
  html.reduced-motion .hero-h1,
  html.reduced-motion .hero-sub,
  html.reduced-motion .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  /* Split hero H1 into per-line spans (SplitType creates these) */
  .hero-h1 .split-line {
    display: block;
    opacity: 0;
    transform: translateY(14px);
    will-change: opacity, transform;
  }
  html.reduced-motion .hero-h1 .split-line {
    opacity: 1;
    transform: none;
  }
  /* Reveal targets — hidden until GSAP triggers them */
  .reveal-target {
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
  }
  html.reduced-motion .reveal-target {
    opacity: 1;
    transform: none;
  }

  /* ══════════════════════════════════════════════════════════
     SECTION HEADER (kicker + heading + optional sub)
     ══════════════════════════════════════════════════════════ */
  .sec-head {
    margin-bottom: var(--s5);
  }
  .sec-head.center {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--s5);
  }
  .sec-head .kicker { margin-bottom: var(--s2); }
  .sec-head h2 {
    font-size: var(--fs-h1);
    max-width: 22ch;
    line-height: var(--lh-heading);
    color: var(--ink);
    margin: var(--s2) auto 0;
  }
  .sec-head.center h2 { max-width: 22ch; }
  /* Prose h2 (in editorial column) */
  .prose h2 {
    font-size: var(--fs-h1);
    font-weight: var(--w-light);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
    color: var(--ink);
    max-width: 18ch;
    margin: var(--s2) 0 var(--s4);
  }
  /* Split h2 (in side-by-side layouts) */
  .split-text h2 {
    font-size: var(--fs-h2);
    font-weight: var(--w-light);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
    margin-bottom: var(--s3);
  }
  /* Booking h2 (centred single-column) */
  .book-inner h2 {
    font-size: var(--fs-h1);
    font-weight: var(--w-light);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
    margin: var(--s2) 0 var(--s3);
  }
  /* Atelier h2 (side text) */
  .atelier-split h2 {
    font-size: var(--fs-h2);
    font-weight: var(--w-light);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
    margin: var(--s2) 0 var(--s3);
  }
  .sec-head .sec-sub {
    margin-top: var(--s3);
    max-width: 55ch;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--ink-70);
  }
  .sec-head.center .sec-sub {
    margin-left: auto;
    margin-right: auto;
  }

  /* Editorial prose column */
  .prose {
    max-width: var(--container-ed);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-70);
  }
  .prose p + p { margin-top: var(--s2); }

  /* ══════════════════════════════════════════════════════════
     SPLIT LAYOUT — photograph + text
     ══════════════════════════════════════════════════════════ */
  .split {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    align-items: center;
  }
  .split.reverse .split-media { order: 2; }
  .split-media {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--travertine);
  }
  .split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ez);
  }
  .split-text .kicker  { margin-bottom: var(--s2); }
  .split-text h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--s3);
    line-height: var(--lh-heading);
  }
  .split-text p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-70);
    margin-bottom: var(--s2);
  }
  .split-text .txt-link { margin-top: var(--s3); }
  @media (max-width: 899px) {
    .split {
      grid-template-columns: 1fr;
      gap: var(--s4);
      max-width: 560px;
    }
    .split.reverse .split-media { order: 0; }
    .split-media { aspect-ratio: 3/4; }
  }

  /* ══════════════════════════════════════════════════════════
     ACCOMMODATION CARDS
     ══════════════════════════════════════════════════════════ */
  .stay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
    /* Cards size to their own content rather than stretching to match a
       sibling that has its details open — an opened card should never
       leave dead whitespace at the bottom of its still-closed neighbours. */
    align-items: start;
  }
  @media (max-width: 899px) {
    .stay-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s3);
      max-width: 720px;
      margin: 0 auto;
    }
  }
  @media (max-width: 599px) {
    .stay-grid {
      grid-template-columns: 1fr;
      gap: var(--s4);
      max-width: 440px;
    }
  }
  .stay-card {
    display: flex;
    flex-direction: column;
    background: var(--travertine);
    border: 1px solid var(--border-lt);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-slow) var(--ez), transform var(--t-slow) var(--ez),
                box-shadow var(--t-slow) var(--ez);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .stay-card:hover {
    border-color: var(--border-lt);
    transform: translateY(-3px);
    box-shadow: var(--sh-lg);
  }
  .stay-card:hover .stay-media img { transform: scale(1.02); }
  .stay-media {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--cream);
  }
  .stay-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-xslow) var(--ez);
  }
  .stay-body {
    padding: var(--s3) var(--s3) var(--s4);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .stay-kicker {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    margin-bottom: var(--s1);
  }
  .stay-name {
    font-family: var(--font);
    font-size: var(--fs-h3);
    font-weight: var(--w-book);
    color: var(--ink);
    line-height: var(--lh-h3);
    margin-bottom: var(--s1);
    letter-spacing: 0;
  }
  .stay-meta {
    font-size: var(--fs-caption);
    color: var(--ink-70);
    line-height: var(--lh-tight-body);
    margin-bottom: var(--s2);
  }
  .stay-link {
    align-self: flex-start;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ink-25);
    transition: color var(--t-base), border-color var(--t-base);
  }
  .stay-card:hover .stay-link {
    color: var(--sage-dk);
    border-bottom-color: var(--sage);
  }
  .stay-book {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-top: 10px;
    padding: 8px 16px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    background: var(--sage-05);
    border: 1px solid var(--sage-20);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background var(--t-base) var(--ez-alt),
                border-color var(--t-base) var(--ez-alt),
                color var(--t-base) var(--ez-alt);
  }
  .stay-book::before {
    content: '→';
    display: inline-block;
    transition: transform var(--t-base) var(--ez-alt);
  }
  .stay-book:hover {
    background: var(--sage-dk);
    border-color: var(--sage-dk);
    color: var(--white);
  }
  .stay-book:hover::before {
    transform: translateX(3px);
  }
  /* WhatsApp enquiry link under the availability button: opens a chat with a ready-made message */
  .stay-wa {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 6px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink-70);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-25);
    padding-bottom: 2px;
    transition: color var(--t-base), border-color var(--t-base);
  }
  .stay-wa svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .stay-wa:hover { color: var(--sage-dk); border-bottom-color: var(--sage); }
  .book-wa {
    margin: 10px 0 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-tight-body);
    color: var(--ink-70);
  }
  .book-wa a {
    color: var(--sage-dk);
    text-decoration: none;
    border-bottom: 1px solid var(--sage-20);
    white-space: nowrap;
  }
  .book-wa a:hover { border-bottom-color: var(--sage); }

  /* the dates of the visitor's day plan, shown beside the calendar (assets/plan-to-book.js) */
  .book-planned {
    margin: var(--s2) 0 0;
    padding: var(--s2);
    background: var(--sage-05);
    border: 1px solid var(--border-lt);
    border-radius: var(--r-sm);
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--ink);
  }
  .book-planned[hidden] { display: none; }
  .book-planned a { color: var(--sage-dk); text-decoration: none; border-bottom: 1px solid var(--sage-20); white-space: nowrap; }
  .book-planned a:hover { border-bottom-color: var(--sage); }

  /* Accommodation card details — collapsed by default, expanded on
     click. Same mechanism as the footer's "Explore the region": the
     <details> element itself stays open (for layout/no-JS robustness),
     JS toggles .is-open, and CSS animates max-height + opacity. The
     chevron is keyed on .is-open rather than [open] (which JS keeps
     permanently true) so it actually reflects the visible state. */
  .stay-details {
    border-top: 1px solid var(--border-lt);
    margin-top: var(--s2);
  }
  .stay-details-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    transition: color var(--t-base);
  }
  .stay-details-summary::-webkit-details-marker { display: none; }
  .stay-details-summary:hover { color: var(--sage); }
  .stay-details-chev {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    transition: transform var(--t-base) var(--ez-alt);
  }
  .stay-details.is-open .stay-details-chev {
    transform: rotate(180deg);
  }
  .stay-details-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--t-slow) var(--ez), opacity var(--t-base) var(--ez-alt);
  }
  .stay-details.is-open .stay-details-body {
    /* Measured content (description + 9 facts) reaches ~990px at its
       tallest across all six languages and card widths — this leaves
       comfortable headroom so nothing is ever clipped. */
    max-height: 1200px;
    opacity: 1;
  }
  .stay-details-desc {
    font-size: var(--fs-body);
    color: var(--ink-70);
    line-height: var(--lh-body);
    padding-bottom: var(--s3);
  }
  .stay-details-facts {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--s3);
  }
  .stay-details-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    padding: 8px 0;
    border-top: 1px solid var(--border-lt);
  }
  .stay-details-row:first-child { border-top: none; }
  .stay-details-row dt {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    flex-shrink: 0;
  }
  .stay-details-row dd {
    font-size: var(--fs-body);
    color: var(--ink-70);
    text-align: right;
  }
  @media (prefers-reduced-motion: reduce) {
    .stay-details-body { transition: none; }
    .stay-details-chev { transition: none; }
  }

  /* ══════════════════════════════════════════════════════════
     STICKY BOOKING BUTTON
     CSS-driven visibility; a small IntersectionObserver (see the JS
     near the existing #book IntersectionObserver) hides it once the
     real booking section is in view, so it never sits on top of the
     Lodgify widget itself. Pure anchor to #book, no analytics event,
     since no existing click_reserve `source` value describes this
     element and the brief explicitly prefers an untracked anchor over
     inventing one.
     A small round icon button stacked directly below the round Ask La
     Valette button (assets/ask-la-valette.css), both bottom-right on
     every viewport; the shared --floating-action-* tokens live there
     (fallbacks below apply until that stylesheet has loaded).
     ══════════════════════════════════════════════════════════ */
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: var(--floating-action-bottom, max(env(safe-area-inset-bottom), 22px));
    right: var(--floating-action-right, max(env(safe-area-inset-right), 22px));
    z-index: 500;
    will-change: transform, opacity;   /* own compositing layer: steady while the phone's toolbars show and hide */
    transition: opacity var(--t-base) var(--ez), transform var(--t-base) var(--ez);
  }
  .sticky-cta.is-hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  /* Round, icon-only. The link text ("Reserve", translated by the existing
     data-i="nav_cta") stays in the DOM as the accessible name and is simply not
     drawn; the calendar icon is a CSS background. Same size, radius and shadow
     language as the Ask button above it. */
  .sticky-cta-link {
    display: block;
    box-sizing: border-box;
    width: var(--floating-action-size, 46px);
    height: var(--floating-action-size, 46px);
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    color: transparent;
    background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
    border: 1px solid var(--sage);
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(20,22,20,0.12), 0 1px 3px rgba(20,22,20,0.06);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--t-base) var(--ez-alt), border-color var(--t-base) var(--ez-alt),
                box-shadow var(--t-base) var(--ez-alt), transform var(--t-base) var(--ez-alt);
  }
  .sticky-cta-link:hover {
    box-shadow: 0 6px 18px rgba(20,22,20,0.16), 0 2px 4px rgba(20,22,20,0.08);
    transform: translateY(-2px);
  }
  .sticky-cta-link:active {
    background-color: var(--sage-dk);
    border-color: var(--sage-dk);
    box-shadow: 0 2px 8px rgba(20,22,20,0.12);
    transform: translateY(0);
  }
  .sticky-cta-link:focus-visible {
    outline: 2px solid var(--sage-dk);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    .sticky-cta-link { transition: none; }
    .sticky-cta-link:hover { transform: none; }
  }

  /* ══════════════════════════════════════════════════════════
     BOOKING (Lodgify + direct-book incentive)
     ══════════════════════════════════════════════════════════ */
  .book-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
  }
  .book-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: var(--s4) 0 var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .book-tab {
    padding: 14px 12px;
    font-family: var(--font);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink-70);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--t-base) var(--ez-alt),
                color var(--t-base) var(--ez-alt);
    min-height: 48px;
  }
  .book-tab:last-child { border-right: none; }
  .book-tab:hover { color: var(--ink); background: var(--sage-05); }
  .book-tab.on {
    color: var(--white);
    background: var(--sage-dk);
  }
  @media (max-width: 360px) {
    .book-tab { font-size: .6rem; letter-spacing: .1em; padding: 12px 6px; }
  }

  /* "From" nightly rate: mirrors the rate the booking widget shows (set in Lodgify, dynamic), see the script near bkReload.
     Closed until a rate has been read, so a page without a rate has no gap. */
  .book-from {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--t-slow) var(--ez),
                opacity var(--t-slow) var(--ez-alt),
                visibility 0s linear var(--t-slow);
  }
  .book-from[data-state="on"], .book-from[data-state="load"] {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .book-from-wrap { min-height: 0; overflow: hidden; }
  .book-from-in {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 2px 14px;
    margin: 0;
    padding: var(--s3) 0 var(--s0);
    transition: opacity var(--t-base) var(--ez-alt);
  }
  .book-from[data-state="load"] .book-from-in { opacity: 0.35; }
  .book-from-k, .book-from-u {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .book-from-n {
    font-size: var(--fs-h1);
    font-weight: var(--w-light);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .book-from-note {
    margin: 0;
    padding: 0 0 var(--s2);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-wide);
    color: var(--ink-70);
  }
  @media (prefers-reduced-motion: reduce) {
    .book-from, .book-from-in { transition: none; }
  }

  .book-incentive {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    padding: 14px var(--s3);
    background: var(--sage-05);
    border: 1px solid var(--sage-20);
    border-radius: var(--r-sm);
    margin: var(--s3) 0;
  }
  @media (max-width: 599px) {
    .book-incentive {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      padding: 18px var(--s3);
    }
    .book-incentive-item {
      width: 100%;
    }
  }
  .book-incentive-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-wide);
    color: var(--ink-70);
    line-height: 1.2;
  }
  .book-incentive-item::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sage);
    flex-shrink: 0;
  }
  .book-terms-note {
    text-align: center;
    font-size: var(--fs-micro);
    color: var(--ink-70);
    margin: var(--s2) 0 0;
  }
  .book-terms-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .book-terms-note a:hover {
    color: var(--ink-70);
  }

  .book-context {
    margin: var(--s3) 0 var(--s4);
    color: var(--ink-70);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: 55ch;
    margin-left: auto;
    margin-right: auto;
  }
  .book-promise {
    text-align: center;
    font-size: var(--fs-body);
    color: var(--ink-70);
    max-width: 55ch;
    margin: 0 auto var(--s4);
    line-height: var(--lh-body);
  }

  .book-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 55ch;
    margin: 0 auto var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--border-lt);
  }
  .book-trust-stars {
    display: flex;
    gap: 3px;
  }
  .book-trust-star {
    width: 14px;
    height: 14px;
    fill: var(--sage);
  }
  .book-trust-txt {
    font-size: var(--fs-body-tight);
    color: var(--ink-70);
    line-height: var(--lh-body);
    margin: 0;
  }
  .book-trust-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 0;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ink-25);
    transition: color var(--t-base), border-color var(--t-base);
  }
  .book-trust-link:hover {
    color: var(--sage-dk);
    border-bottom-color: var(--sage);
  }
  .book-trust-link:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 4px;
    border-radius: 2px;
  }

  .book-widget-note {
    text-align: center;
    font-size: var(--fs-micro);
    color: var(--ink-70);
    margin: var(--s3) 0 0;
  }

  .book-widget-wrap {
    margin-top: var(--s4);
    background: var(--white);
    border: 1px solid var(--border-lt);
    border-radius: var(--r-md);
    padding: var(--s3);
    transition: opacity var(--t-slow);
  }

  /* Booking section, "one view": the stay and the plan dates in one card above the calendar, the calendar without a second card around it,
     the reassurance below it, and on a phone a fixed bar with the rate and "Check availability" that leads to the calendar. */
  .book-sum {
    margin-top: var(--s4);
    padding: var(--s3);
    background: var(--white);
    border: 1px solid var(--border-lt);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    text-align: left;
  }
  .book-sum-k {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
  }
  .book-sum-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
  .book-sum-change { font-size: var(--fs-caption); font-weight: var(--w-reg, 400); color: var(--sage-dk); border-bottom: 1px solid var(--sage-20); text-decoration: none; white-space: nowrap; }
  .book-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s1); }
  .book-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 56px;
    padding: 10px 12px; text-align: left;
    background: #fff; border: 1px solid var(--border-md); border-radius: var(--r-sm);
    -webkit-tap-highlight-color: transparent;
  }
  .book-tile:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }
  .book-tile-k { font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--ink-70); }
  .book-tile-v { font-size: var(--fs-body); font-weight: var(--w-med); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
  .book-tile-v.is-empty { font-weight: var(--w-light); color: var(--ink-70); }
  .book-cal-k { display: block; margin-top: var(--s3); font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--ink-70); text-align: left; }
  #lodgify-book-now-box [data-lv-fill^="cta"] { background: var(--sage-dk); color: var(--white); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
  #lodgify-book-now-box [data-lv-fill="cta"]::before {
    content: var(--lv-cta, "Check availability");
    font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--white);
  }
  #lodgify-book-now-box [data-lv-fill="cta"]::after { content: "\2192"; font-size: var(--fs-body); color: var(--white); }
  #lodgify-book-now-box [data-lv-fill="cta-t"], #lodgify-book-now-box [data-lv-fill="cta-t"] * { color: var(--white) !important; }
  .book-sum-name { font-size: 17px; font-weight: var(--w-light); line-height: var(--lh-tight); color: var(--ink); }
  .book-sum .book-context { margin: 0; }
  .book-sum .book-planned { margin: var(--s1) 0 0; }
  .book-sum-hint { margin: var(--s1) 0 0; font-weight: var(--w-reg, 400); font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink-70); }
  .book-sum .book-planned:not([hidden]) ~ .book-sum-hint { display: none; }
  #bk-widget-wrap { background: transparent; border: 0; padding: 0; scroll-margin-top: 88px; }
  .bk-bar { display: none; }
  @media (max-width: 820px) {
    /* sticky, not fixed: it sits as the last line of the booking content and holds the bottom edge of the screen while that content is in view. Scroll-synced by the browser, so it does not chase the phone's toolbars the way a fixed bar does (21 Oct: a fixed bar jittered by up to 12 px; measured on a recording, the sticky bar stands still). Its opacity follows the scroll position itself (script "BOOKING BAR": no timed transition, so it is just as smooth with the phone's Reduce Motion on, where timed fades are skipped): it fades in over the first 200 px of the booking content and out over the last 220 px, so it never rides up the screen with the content. Full-bleed through negative side margins; the bottom margin lets its own space overlap the section's bottom padding. */
    .bk-bar {
      display: flex;
      align-items: center;
      gap: var(--s2);
      position: sticky;
      bottom: 0;
      z-index: 40;
      margin: var(--s2) calc(50% - 50vw) -40px;
      box-sizing: border-box;
      padding: 12px max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 14px) max(env(safe-area-inset-left), 16px);
      background: var(--white);
      border-top: 1px solid var(--border);
      box-shadow: 0 -8px 24px rgba(37,31,28,0.08);
      text-align: left;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .bk-bar-price { margin: 0; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .bk-bar-k, .bk-bar-u { font-size: var(--fs-nano); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--ink-70); }
    .bk-bar-n { font-size: var(--fs-h3); font-weight: var(--w-light); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
    .bk-bar-btn {
      flex: 1 1 auto;
      min-height: 48px;
      display: flex; align-items: center; justify-content: center;
      padding: 0 var(--s2);
      font-size: var(--fs-micro);
      font-weight: var(--w-med);
      letter-spacing: var(--ls-kicker);
      text-transform: uppercase;
      text-decoration: none;
      color: var(--white);
      background: var(--sage-dk);
      border-radius: var(--r-sm);
      -webkit-tap-highlight-color: transparent;
    }
    .bk-bar-btn:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 3px; }
    /* the round Ask button stays reachable: it rises to sit just above the bar (same `translate` mechanism as assets/ask-la-valette.css) */
    body.bkbar-on.bkbar-on .ask-fab.ready { --ask-drop: calc(var(--floating-action-bottom, 22px) + var(--floating-action-size, 46px) + var(--floating-action-gap, 10px) - 88px); }
  }


  /* Lodgify's Book Now Box arrives without the words "Check-in", "Check-out" and on its button (the date field shows only an arrow, the button is an empty bar);
     the widget has no such text in the page (checked with /guests/bk-diagnose), so the site writes it in the page language, only while the widget has none
     (script "BOOKING WIDGET WORDS" near the booking bar). The button takes the site's sage and a readable price colour. */
  #lodgify-book-now-box p.styled-override { color: var(--ink-70); }
  /* the nightly rate is shown once, in the "From" block above; the widget's own line is hidden while it only repeats that rate (a total for chosen dates stays) */
  #lodgify-book-now-box p.styled-override[data-lv-rate] { display: none; }
  #lodgify-book-now-box button[data-lv-fill] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; font-family: var(--font); }
  #lodgify-book-now-box button[data-lv-fill="dates"]::before { content: var(--lv-ci, "Check-in"); }
  #lodgify-book-now-box button[data-lv-fill="dates"]::after { content: var(--lv-co, "Check-out"); }
  #lodgify-book-now-box button[data-lv-fill="dates"]::before, #lodgify-book-now-box button[data-lv-fill="dates"]::after { font-size: var(--fs-body-tight); font-weight: var(--w-reg, 400); color: var(--ink-70); }
  /* Lodgify styling — try to feel native */
  .book-widget-wrap iframe {
    width: 100%;
    border: none;
    background: transparent;
  }

  /* ══════════════════════════════════════════════════════════
     ATELIER split
     ══════════════════════════════════════════════════════════ */
  .atelier-split {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s6);
    align-items: center;
  }
  .atelier-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
  }
  .atelier-img {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--travertine);
  }
  .atelier-img img { width: 100%; height: 100%; object-fit: cover; }
  .atelier-img:nth-child(2) { margin-top: 40px; }
  .atelier-cta-wrap { margin-top: var(--s3); }
  .atelier-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ink-25);
    transition: color var(--t-base), border-color var(--t-base);
  }
  .atelier-cta:hover {
    color: var(--sage-dk);
    border-bottom-color: var(--sage);
  }
  .atelier-cta:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 4px;
    border-radius: 2px;
  }
  @media (max-width: 767px) {
    .atelier-split { grid-template-columns: 1fr; gap: var(--s4); }
    .atelier-images { max-width: 420px; margin: 0 auto; }
  }

  /* ══════════════════════════════════════════════════════════
     REGION / LOCATION
     ══════════════════════════════════════════════════════════ */
  /* One object: a switch between two scales of the same map (the region as the drive-time compass, the house as a satellite view), a row of the main drive times that
     light up their town on the compass, and the arrival facts as the foot. The satellite is not loaded until someone asks for the house. */
  .rg { max-width: 600px; margin: 0 auto; }
  .rg-seg {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
    max-width: 300px; margin: 0 auto var(--s3);
    border: 1px solid var(--border-md); border-radius: 26px; background: rgba(251,247,236,0.7);
  }
  .rg-seg button {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 var(--s2); border: 0; border-radius: 22px; background: none; cursor: pointer;
    font-family: var(--font); font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-70); transition: color var(--t-base) var(--ez-alt);
  }
  .rg-seg button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .rg-seg button[aria-pressed="true"] { color: var(--white); }
  .rg-seg i {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 22px; background: var(--sage-dk);
    transition: transform 360ms var(--ez);
  }
  .rg-seg[data-on="1"] i { transform: translateX(calc(100% + 4px)); }
  .rg-seg button:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }

  /* the main drive times, one tap each: the town lights up on the compass (assets/time-map.js draws them from the same data as the compass) */
  .rg-rail { display: flex; gap: var(--s1); overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px var(--s1); margin: 0 0 var(--s2); scrollbar-width: none; }
  .rg-rail::-webkit-scrollbar { display: none; }
  @media (min-width: 640px) { .rg-rail { justify-content: center; flex-wrap: wrap; overflow: visible; } }
  .rg-chip {
    flex: none; scroll-snap-align: start; display: grid; justify-items: start; gap: 2px; min-width: 104px; padding: 12px 14px;
    border: 1px solid var(--border-md); border-radius: 14px; background: rgba(251,247,236,0.6); color: var(--ink);
    font-family: var(--font); text-align: left; cursor: pointer;
    transition: background var(--t-base) var(--ez-alt), border-color var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt);
  }
  .rg-chip--sea { cursor: default; background: none; border-style: dashed; }
  .rg-chip-n { font-size: 28px; font-weight: var(--w-light); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .rg-chip-n sub { margin-left: 4px; font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-70); vertical-align: baseline; }
  .rg-chip-w { margin-top: 4px; font-size: var(--fs-caption); font-weight: 400; }
  .rg-chip[aria-pressed="true"] { background: var(--sage-dk); border-color: var(--sage-dk); color: var(--white); }
  .rg-chip[aria-pressed="true"] .rg-chip-n sub { color: rgba(251,247,236,0.8); }
  .rg-chip:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }

  /* the two scales share one cell: the stage is as tall as the compass, the satellite fills it */
  .rg-stage { position: relative; display: grid; }
  .rg-stage > * { grid-area: 1 / 1; min-width: 0; }
  .rg .tm { margin-top: 0; }
  .rg-region, .rg-house { transition: opacity 320ms var(--ez-alt), transform 420ms var(--ez), visibility 0s linear 0s; }
  .rg-stage[data-on="0"] .rg-house { opacity: 0; transform: scale(0.97); visibility: hidden; pointer-events: none; }
  .rg-stage[data-on="1"] .rg-region { opacity: 0; transform: scale(1.03); visibility: hidden; pointer-events: none; position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: hidden; }
  .rg-stage[data-on="0"] .rg-house { position: absolute; left: 0; top: 0; width: 100%; }
  .rg-house { position: relative; height: clamp(380px, 64vh, 540px); border-radius: var(--r-md); overflow: hidden; background: #5b6046; }
  .rg-sat { position: absolute; inset: 0; display: block; }
  .rg-sat iframe { width: 100%; height: 100%; border: 0; display: block; }
  /* the bar sits on the bottom edge of the map and covers its lower strip (map-type button, Google mark), full width */
  .rg-glass {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    padding: 12px 12px 12px 16px;
    background: rgba(251,247,236,0.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid rgba(251,247,236,0.7); box-shadow: 0 -6px 24px rgba(37,31,28,0.12);
  }
  .rg-addr { display: grid; gap: 2px; min-width: 0; }
  .rg-addr b { font-size: var(--fs-caption); font-weight: var(--w-med); color: var(--ink); }
  .rg-addr span { font-size: var(--fs-caption); font-weight: 400; color: var(--ink-70); }
  .rg-route {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px;
    background: var(--sage-dk); color: var(--white); text-decoration: none; white-space: nowrap;
    font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: 0.14em; text-transform: uppercase; transition: background var(--t-base) var(--ez-alt);
  }
  .rg-route svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .rg-route:hover { background: var(--ink); }
  .rg-route:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }
  @media (max-width: 380px) { .rg-glass { flex-direction: column; align-items: stretch; } .rg-route { justify-content: center; } }

  /* the arrival facts, the foot of the object */
  .rg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s3) 0 0; padding: var(--s2) 0 0; list-style: none; border-top: 1px solid var(--border-lt); }
  .rg-facts li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 6px; text-align: center; min-width: 0; }
  .rg-facts li + li { border-left: 1px solid var(--border-lt); }
  .rg-facts svg { width: 20px; height: 20px; fill: none; stroke: var(--sage-dk); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .rg-facts small { font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); overflow-wrap: anywhere; }
  .rg-facts b { font-size: var(--fs-caption); font-weight: 400; color: var(--ink); line-height: 1.4; text-wrap: balance; overflow-wrap: anywhere; }
  @media (scripting: none) { .rg-seg { display: none; } }
  @media (prefers-reduced-motion: reduce) { .rg-seg i, .rg-region, .rg-house, .rg-chip { transition: none; } }

  /* ══════════════════════════════════════════════════════════
     EVENTS
     ══════════════════════════════════════════════════════════ */
  .events-list {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .event-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: var(--s3);
    align-items: center;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--border-lt);
  }
  .event-row:last-child { border-bottom: none; }
  .event-date {
    text-align: right;
  }
  .event-day {
    font-family: var(--font);
    font-size: var(--fs-h2);
    font-weight: var(--w-light);
    color: var(--ink);
    line-height: 1;
    letter-spacing: var(--ls-tight);
  }
  .event-month {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    margin-top: 4px;
  }
  .event-title {
    font-family: var(--font);
    font-size: var(--fs-body-lg);
    font-weight: var(--w-book);
    color: var(--ink);
    line-height: var(--lh-h3);
    margin-bottom: 4px;
  }
  .event-meta {
    font-size: var(--fs-caption);
    color: var(--ink-70);
    line-height: 1.5;
  }
  .event-badge {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-wide);
    color: var(--sage-dk);
    padding: 5px 10px;
    border: 1px solid var(--sage-20);
    border-radius: var(--r-sm);
    background: var(--sage-05);
    white-space: nowrap;
  }
  @media (max-width: 599px) {
    .event-row {
      grid-template-columns: 56px 1fr;
      gap: var(--s2);
      padding: var(--s3) 0;
    }
    .event-badge {
      grid-column: 2;
      justify-self: start;
      margin-top: 10px;
    }
    .event-day { font-size: var(--fs-h3); }
    .event-title { font-size: var(--fs-body); }
    .event-month { font-size: 10px; letter-spacing: 0.24em; }
  }
  .events-more {
    margin-top: var(--s4);
    text-align: center;
  }
  .events-viewall {
    margin-top: var(--s5);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
  }
  .events-viewall a {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    padding: 4px 0;
    border-bottom: 1px solid var(--sage);
    transition: color var(--t-base) var(--ez-alt), border-color var(--t-base);
  }
  .events-viewall a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }
  /* Individual event card — date on left, title + location on right */
  .ev-card-new {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--s3);
    align-items: baseline;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--border-lt);
  }
  .ev-card-new:last-child { border-bottom: none; }
  .ev-date-new {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .ev-day {
    font-family: var(--font);
    font-size: var(--fs-h2);
    font-weight: var(--w-light);
    color: var(--ink);
    line-height: 1;
    letter-spacing: var(--ls-tight);
  }
  .ev-month {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
  }
  .ev-date-recurring .ev-schedule {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    padding: 6px 10px;
    background: var(--sage-05);
    border: 1px solid var(--sage-20);
    border-radius: var(--r-sm);
    white-space: nowrap;
  }
  .ev-title-new {
    font-family: var(--font);
    font-size: var(--fs-body-lg);
    font-weight: var(--w-book);
    color: var(--ink);
    line-height: var(--lh-h3);
    margin: 0 0 4px;
    letter-spacing: 0;
  }
  .ev-meta-new {
    font-size: var(--fs-caption);
    color: var(--ink-70);
    line-height: 1.5;
    margin: 0;
  }
  .ev-expected { display: inline-block; margin-left: 4px; padding: 1px 8px; font-size: var(--fs-micro); letter-spacing: .04em; color: var(--sage-dk); background: var(--sage-05); border: 1px solid var(--sage-20); border-radius: var(--r-sm); white-space: nowrap; }
  @media (max-width: 599px) {
    .ev-card-new { grid-template-columns: 60px 1fr; gap: var(--s2); }
    .ev-day { font-size: var(--fs-h3); }
    .ev-title-new { font-size: var(--fs-body); }
    .ev-month { font-size: 10px; letter-spacing: 0.24em; }
    .ev-date-recurring .ev-schedule {
      font-size: 10px;
      padding: 4px 8px;
    }
  }
  /* The list shows what is on today and next; all of it is there, the later events fade out until the list is opened */
  .events-card { max-width: var(--container-w); margin: 0 auto; }
  .ev-clip { position: relative; overflow: hidden; transition: max-height 760ms var(--ez); }
  .ev-clip::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 72%;
    background: linear-gradient(to bottom, transparent 0%, var(--travertine) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 560ms var(--ez-alt);
  }
  .events-card.is-collapsed { cursor: pointer; }
  .events-card.is-collapsed .ev-clip { max-height: 560px; }
  .events-card.is-collapsed .ev-clip::after { opacity: 0.93; }
  .ev-reveal-row {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: grid-template-rows 560ms var(--ez), opacity 300ms var(--ez-alt), visibility 0s linear 560ms;
  }
  .events-card.is-collapsed .ev-reveal-row { grid-template-rows: 1fr; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .ev-reveal-in { min-height: 0; overflow: hidden; display: flex; justify-content: center; }
  .ev-reveal {
    display: inline-flex; align-items: center; gap: 10px;
    padding: var(--s2) 0 0;
    background: none; border: none; cursor: pointer;
    font-family: var(--font); font-size: var(--fs-micro); font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker); text-transform: uppercase;
    color: var(--sage-dk);
    transition: color var(--t-base) var(--ez-alt);
  }
  .ev-reveal svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform var(--t-base) var(--ez-alt); }
  .events-card.is-collapsed:hover .ev-reveal { color: var(--ink); }
  .events-card.is-collapsed:hover .ev-reveal svg { transform: translateY(2px); }
  .ev-reveal:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: var(--r-sm); }
  .ev-date-recurring .ev-schedule.is-today { background: var(--sage-dk); border-color: var(--sage-dk); color: var(--white); }
  .events-empty {
    text-align: center;
    color: var(--ink-70);
    padding: var(--s5) var(--gutter);
    font-style: italic;
  }

  /* ══════════════════════════════════════════════════════════
     FAQ
     ══════════════════════════════════════════════════════════ */
  .faq-list {
    max-width: var(--container-ed);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .faq-item {
    border-bottom: 1px solid var(--border-lt);
  }
  .faq-item:last-child { border-bottom: none; }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
    padding: var(--s3) 0;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--fs-h3);
    font-weight: var(--w-book);
    color: var(--ink);
    line-height: var(--lh-h3);
    transition: color var(--t-base);
    min-height: 56px;
  }
  .faq-q:hover { color: var(--sage-dk); }
  .faq-chev {
    width: 22px; height: 22px;
    flex-shrink: 0;
    transition: transform var(--t-base) var(--ez-alt), stroke var(--t-base);
    stroke: var(--ink-55);
    stroke-width: 1.5;
    fill: none;
  }
  .faq-item.open .faq-chev { transform: rotate(180deg); stroke: var(--sage-dk); }
  .faq-list-inner {
    background: var(--white);
    border: 1px solid var(--border-lt);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(20,22,20,0.02);
    padding: 0 var(--s4);
  }
  @media (max-width: 599px) { .faq-list-inner { padding: 0 var(--s3); } }
  .faq-more {
    max-width: 620px;
    margin: var(--s4) auto 0;
    text-align: center;
    font-size: var(--fs-body-tight);
    color: var(--ink-70);
    line-height: 1.6;
  }
  .faq-more-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    font: inherit;
    font-weight: var(--w-med);
    color: var(--sage-dk);
    border-bottom: 1px solid var(--sage);
    cursor: pointer;
    transition: color var(--t-base) var(--ez-alt);
  }
  .faq-more-link:hover { color: var(--ink); }
  .faq-a {
    height: 0;
    overflow: hidden;
    transition: height var(--t-slow) var(--ez);
    will-change: height;
  }
  .faq-a-inner {
    padding: 0 0 var(--s3);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-70);
  }

  /* FAQ: one list with all questions; a few show clearly and the rest fades out until the list is opened */
  .faq-clip { position: relative; overflow: hidden; transition: max-height 760ms var(--ez); }
  .faq-clip::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 72%;
    background: linear-gradient(to bottom, transparent 0%, var(--white) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 560ms var(--ez-alt);
  }
  .faq-list-inner.is-collapsed { cursor: pointer; }
  .faq-list-inner.is-collapsed .faq-clip { max-height: 520px; }
  .faq-list-inner.is-collapsed .faq-clip::after { opacity: 0.93; }
  .faq-list-inner.is-collapsed .faq-q:hover { color: var(--ink); }
  .faq-reveal-row {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: grid-template-rows 560ms var(--ez), opacity 300ms var(--ez-alt), visibility 0s linear 560ms;
  }
  .faq-list-inner.is-collapsed .faq-reveal-row {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .faq-reveal-in { min-height: 0; overflow: hidden; display: flex; justify-content: center; }
  .faq-reveal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--s2) 0 var(--s3);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    transition: color var(--t-base) var(--ez-alt);
  }
  .faq-reveal svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform var(--t-base) var(--ez-alt); }
  .faq-list-inner.is-collapsed:hover .faq-reveal { color: var(--ink); }
  .faq-list-inner.is-collapsed:hover .faq-reveal svg { transform: translateY(2px); }
  .faq-reveal:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: var(--r-sm); }

  /* FADE for long text (The setting, The hosts): on phones and small tablets the first lines show clearly, the rest fades
     into the section ground until the visitor asks for it. Same idea as the FAQ list. Wide screens and no-script show it all.
     --fade-h is the open height measured by the script; the section ground comes from --fade-bg. */
  .fadebox-more { display: none; }
  .fadebox-clip { position: relative; }
  @media (max-width: 899px) {
    .fadebox { --fade-bg: var(--bg); }
    .sec-travertine .fadebox { --fade-bg: var(--travertine); }
    .fadebox-clip { transition: max-height 760ms var(--ez); }
    .fadebox-clip::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: 0;
      height: min(150px, 80%);
      background: linear-gradient(to bottom, transparent 0%, var(--fade-bg) 100%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 560ms var(--ez-alt);
    }
    .fadebox.is-collapsed .fadebox-clip,
    .fadebox.is-anim .fadebox-clip { overflow: hidden; max-height: var(--fade-h, none); }
    .fadebox.is-collapsed .fadebox-clip { cursor: pointer; }
    .fadebox.is-collapsed .fadebox-clip::after { opacity: 0.96; }
    .fadebox.is-collapsed .fadebox-more { display: flex; }
    .fadebox.is-short .fadebox-more { display: none; }
    .fadebox.is-short .fadebox-clip::after { opacity: 0; }
    .fadebox.is-short .fadebox-clip { cursor: auto; }
  }
  .fadebox-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: var(--s1) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    transition: color var(--t-base) var(--ez-alt);
  }
  .fadebox-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform var(--t-base) var(--ez-alt); }
  .fadebox-btn:hover { color: var(--ink); }
  .fadebox-btn:hover svg { transform: translateY(2px); }
  .fadebox-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: var(--r-sm); }

  /* ══════════════════════════════════════════════════════════
     PLAN BAND: "Plan your days", one quiet row under the hero that opens into a small planner
     ══════════════════════════════════════════════════════════ */
  .plan-band { padding: var(--s3) 0 0; background: var(--bg); }
  /* the anchor sits above the card so that menu and hero links land with the card clear of the fixed header */
  .plan-anchor { position: absolute; top: -32px; left: 0; width: 1px; height: 1px; pointer-events: none; }
  .plan-wrap { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
  .plan-card {
    background: var(--white);
    border: 1px solid var(--border-lt);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(20,22,20,0.02);
    transition: border-color var(--t-base) var(--ez-alt), box-shadow var(--t-slow) var(--ez-alt);
  }
  .plan-card:hover { border-color: var(--border); }
  .plan-card.open { border-color: var(--border); box-shadow: var(--sh-lg); }
  .plan-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s2);
    width: 100%;
    min-height: 80px;
    padding: 18px var(--s3);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font);
    color: var(--ink);
  }
  .plan-head:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: var(--r-md); }
  .plan-ico {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--sage-20);
    border-radius: 50%;
    background: var(--sage-05);
    color: var(--sage-dk);
    transition: background var(--t-base) var(--ez-alt), border-color var(--t-base) var(--ez-alt);
  }
  .plan-ico svg { width: 20px; height: 20px; }
  .plan-head:hover .plan-ico, .plan-card.open .plan-ico { background: var(--sage-10); border-color: var(--sage); }
  .plan-kicker {
    display: block;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    line-height: var(--lh-micro);
  }
  .plan-title {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-body-lg);
    font-weight: var(--w-book);
    line-height: var(--lh-tight-body);
    color: var(--ink);
  }
  .plan-chev { width: 22px; height: 22px; stroke: var(--ink-55); stroke-width: 1.5; fill: none; transition: transform var(--t-base) var(--ez-alt), stroke var(--t-base); }
  .plan-head:hover .plan-chev { stroke: var(--sage-dk); }
  .plan-card.open .plan-chev { transform: rotate(180deg); stroke: var(--sage-dk); }
  .plan-body {
    height: 0;
    overflow: hidden;
    transition: height var(--t-slow) var(--ez);
    will-change: height;
  }
  .plan-body-in {
    margin: 0 var(--s3);
    padding: var(--s3) 0 var(--s4);
    border-top: 1px solid var(--border-lt);
    opacity: 0;
    transition: opacity 160ms var(--ez-alt);
  }
  .plan-card.open .plan-body-in { opacity: 1; transition: opacity 360ms var(--ez-alt) 100ms; }
  .plan-field + .plan-field { margin-top: var(--s3); }
  .plan-lab {
    margin-bottom: 10px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .plan-hint { margin-left: 8px; font-weight: var(--w-book); letter-spacing: 0.02em; text-transform: none; color: var(--ink-70); }
  .plan-segs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .plan-seg, .plan-chip { position: relative; display: block; cursor: pointer; }
  .plan-seg input, .plan-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .plan-seg span {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    font-size: var(--fs-body-tight);
    font-weight: var(--w-med);
    font-variant-numeric: tabular-nums;
    color: var(--ink-70);
    border-right: 1px solid var(--border);
    transition: background var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt);
  }
  .plan-seg:last-child span { border-right: none; }
  .plan-seg:hover span { background: var(--sage-05); color: var(--ink); }
  .plan-seg input:checked + span { background: var(--sage-dk); color: var(--white); }
  .plan-seg input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: -3px; }
  .plan-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .plan-chip span {
    display: inline-flex; align-items: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: var(--fs-caption);
    color: var(--ink-70);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: background var(--t-base) var(--ez-alt), border-color var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt);
  }
  .plan-chip:hover span { border-color: var(--sage); color: var(--ink); }
  .plan-chip input:checked + span { background: var(--sage-10); border-color: var(--sage); color: var(--sage-dk); }
  .plan-chip input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
  .plan-prev { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border-lt); }
  .plan-prev[hidden] { display: none; }
  .plan-days { list-style: none; overflow: hidden; transition: height var(--t-slow) var(--ez); }
  .plan-day, .plan-skel { padding: 14px 0; border-bottom: 1px solid var(--border-lt); }
  .plan-skel { min-height: 61px; }
  .plan-day {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--s2);
    animation: planIn 460ms var(--ez) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .plan-day:last-child, .plan-skel:last-child { border-bottom: none; }
  .plan-d {
    padding-top: 3px;
    white-space: nowrap;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage-dk);
  }
  .plan-p1 { display: block; font-size: var(--fs-body); line-height: var(--lh-tight-body); color: var(--ink); }
  .plan-p2 { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: var(--lh-tight-body); color: var(--ink-70); }
  .plan-more { padding: 14px 0 0; font-size: var(--fs-caption); color: var(--ink-70); }
  @keyframes planIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
  .plan-note { margin-top: var(--s2); font-size: var(--fs-caption); line-height: var(--lh-tight-body); color: var(--ink-70); }
  @media (max-width: 599px) {
    .plan-head { grid-template-columns: auto 1fr auto; padding: 16px 18px; min-height: 76px; gap: 14px; }
    .plan-ico { width: 40px; height: 40px; }
    .plan-body-in { margin: 0 18px; }
    .plan-seg span { min-height: 46px; }
    .plan-actions { flex-direction: column; align-items: stretch; text-align: center; }
    .plan-actions .txt-link { align-self: center; }
    .plan-day { grid-template-columns: 76px 1fr; gap: 12px; }
  }
  .book-plan { margin: 6px 0 0; }
  .book-guide { margin: 6px 0 0; }

  /* ══════════════════════════════════════════════════════════
     JOURNAL cards
     ══════════════════════════════════════════════════════════ */
  #journal .sec-head { margin-bottom: var(--s3); }
  .journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
  }
  @media (max-width: 899px) { .journal-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
  @media (max-width: 599px) { .journal-grid { grid-template-columns: 1fr; gap: var(--s4); } }
  .journal-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--t-slow) var(--ez);
  }
  .journal-card:hover .journal-media img { transform: scale(1.03); }
  .journal-card:hover .journal-title { color: var(--sage-dk); }
  .journal-media {
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--travertine);
    margin-bottom: var(--s2);
  }
  .journal-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ez);
  }
  .journal-kicker {
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    margin-bottom: var(--s1);
  }
  .journal-title {
    font-family: var(--font);
    font-size: var(--fs-h3);
    font-weight: var(--w-book);
    color: var(--ink);
    line-height: var(--lh-h3);
    letter-spacing: 0;
    transition: color var(--t-base);
    margin-bottom: var(--s1);
  }
  .journal-excerpt {
    font-size: var(--fs-body);
    color: var(--ink-70);
    line-height: var(--lh-body);
  }

  /* ══════════════════════════════════════════════════════════
     FOOTER
     ══════════════════════════════════════════════════════════ */
  footer {
    background: var(--travertine);
    color: var(--ink-70);
    padding: var(--s5) 0 var(--s3);
    border-top: 1px solid var(--border-lt);
  }
  .foot-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s3);
  }
  .foot-brand-name {
    font-family: var(--font);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    font-weight: var(--w-book);
    color: var(--ink);
    letter-spacing: 0;
    margin: 0;
  }
  .foot-brand-tag {
    font-size: var(--fs-body-tight);
    line-height: 1.35;
    color: var(--ink-70);
    margin: 4px 0 0;
    font-style: italic;
  }
  /* Primary guest row — the four things a guest actually reaches for */
  .foot-primary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s2) var(--s5);
    padding: 0;
  }
  .foot-primary a {
    font-size: 0.8125rem;
    font-weight: var(--w-med);
    color: var(--ink);
    letter-spacing: 0.02em;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color var(--t-base) var(--ez-alt), border-color var(--t-base);
  }
  .foot-primary a:hover {
    color: var(--sage-dk);
    border-bottom-color: var(--sage);
  }
  /* Collapsible "Explore the region" — preserves SEO without dominating */
  .foot-explore {
    width: 100%;
    max-width: 720px;
    border-top: 1px solid var(--border-lt);
    border-bottom: 1px solid var(--border-lt);
    padding: 0;
  }
  .foot-explore summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--sage-dk);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: color var(--t-base);
  }
  .foot-explore summary::-webkit-details-marker { display: none; }
  .foot-explore summary::after {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t-base) var(--ez-alt);
  }
  .foot-explore[open] summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .foot-explore summary:hover { color: var(--sage-dk); }
  .foot-explore-links {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px var(--s4);
    padding: 0 0 var(--s3);
    text-align: left;
  }
  @media (max-width: 599px) {
    .foot-explore-links { grid-template-columns: 1fr; text-align: center; }
  }
  .foot-explore-links a {
    font-size: var(--fs-body-tight);
    color: var(--ink-70);
    transition: color var(--t-base);
    padding: 4px 0;
    display: block;
  }
  .foot-explore-links a:hover { color: var(--sage-dk); }
  /* Address + contact block — one tight typographic group (each line was
     a plain <p>, so the browser's default paragraph margin was reading as
     three separate blocks rather than one compact group). */
  .foot-meta {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-70);
    font-style: italic;
  }
  .foot-meta p { margin: 0; }
  .foot-meta a { color: var(--ink); transition: color var(--t-base); }
  .foot-meta a:hover { color: var(--sage-dk); }
  .foot-bottom {
    max-width: var(--container);
    margin: var(--s3) auto 0;
    padding: var(--s2) var(--gutter) 0;
    border-top: 1px solid var(--border-lt);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  @media (max-width: 599px) {
    .foot-bottom { justify-content: center; }
  }
  .foot-nano {
    font-size: var(--fs-nano);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-nano);
    text-transform: uppercase;
    color: var(--ink-70);
  }
  .foot-legal {
    display: flex;
    gap: var(--s3);
  }
  .foot-legal a {
    font-size: var(--fs-nano);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-nano);
    text-transform: uppercase;
    color: var(--ink-70);
    transition: color var(--t-base);
  }
  .foot-legal a:hover { color: var(--sage-dk); }

  /* Mobile-only footer compaction — desktop layout above is untouched.
     Reduces vertical rhythm (padding/gaps) and tightens each row so the
     footer no longer occupies most of the viewport on small screens. */
  @media (max-width: 599px) {
    footer { padding: 48px 0 28px; }
    .foot-inner { gap: 22px; }
    .foot-brand-tag { margin-top: 4px; }
    .foot-primary { gap: 8px 20px; padding: 0; }
    .foot-primary a { font-size: 0.8125rem; padding: 2px 0; }
    .foot-meta { font-size: 0.8125rem; line-height: 1.5; }
    .foot-explore { max-width: 100%; }
    .foot-explore summary { padding: 14px 0; }
    .foot-explore-links { padding-bottom: 20px; gap: 8px 20px; }
    .foot-bottom { margin-top: 22px; padding-top: 14px; gap: 8px 16px; }
  }

  /* ══════════════════════════════════════════════════════════
     PROMO modal (Autumn Escape): centred, dismissible, shown once.
     The image carries the design; two transparent hotspots sit over its
     "AUTUMN10" box (copy) and its "BOOK YOUR STAY" line (go to #book).
     Hotspot positions are percentages of the image, so they stay aligned
     at any size.
     ══════════════════════════════════════════════════════════ */
  .promo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ez), visibility 0s linear .35s;
  }
  .promo-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .promo-modal-backdrop { position: absolute; inset: 0; background: rgba(20,22,20,0.48); }
  .promo-modal-card {
    position: relative;
    width: min(640px, 100%, calc((100vh - 140px) * 1.5));
    background: var(--white);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(20,22,20,0.30), 0 4px 12px rgba(20,22,20,0.10);
    transform: translateY(10px) scale(0.985);
    transition: transform .35s var(--ez);
    outline: none;
  }
  .promo-modal.is-open .promo-modal-card { transform: none; }
  .promo-pop-fig { position: relative; line-height: 0; }
  .promo-pop-fig img { display: block; width: 100%; height: auto; }
  .promo-pop-copy,
  .promo-pop-link {
    position: absolute;
    border-radius: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* over the AUTUMN10 box (x 100-472, y 451-536 of 1536x1024) */
  .promo-pop-copy {
    left: 5.6%; top: 42.6%; width: 26.2%; height: 10.8%;
    padding: 0; border: 0; background: transparent;
  }
  /* over the BOOK YOUR STAY line (x 100-527, y 620-650, underline y 672) */
  .promo-pop-link { left: 5.6%; top: 57%; width: 31%; height: 12.5%; }
  /* phones: the image is ~240px tall, so stretch the hotspots to 44px+ touch
     targets while still covering the AUTUMN10 box and the BOOK YOUR STAY line */
  @media (max-width: 767px) {
    .promo-pop-copy { top: 38%; height: 19%; }
    .promo-pop-link { top: 57%; height: 19%; }
    .promo-pop-copied { inset: 29% 4% 25% 3.5%; }
  }
  .promo-pop-copy:hover,
  .promo-pop-link:hover { background: rgba(255,255,255,0.09); }
  .promo-pop-copied {
    position: absolute;
    inset: 13% 4% 10% 3.5%; /* just the AUTUMN10 box, not the whole hotspot */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40,24,20,0.86);
    color: #fff;
    font-family: var(--font);
    font-size: clamp(10px, 2.1vw, 14px);
    font-weight: var(--w-med);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0;
    transition: opacity .2s var(--ez);
    pointer-events: none;
  }
  .promo-pop-copy.is-copied .promo-pop-copied { opacity: 1; }
  .promo-pop-hint {
    margin: 0;
    padding: 10px 16px 12px;
    text-align: center;
    font-family: var(--font);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    color: var(--ink-70);
    line-height: 1.4;
  }
  .promo-pop-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20,22,20,0.5);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .promo-pop-close:hover { background: rgba(20,22,20,0.7); }
  .promo-pop-close:focus-visible,
  .promo-pop-copy:focus-visible,
  .promo-pop-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(20,22,20,0.55); }
  @media (prefers-reduced-motion: reduce) {
    .promo-modal, .promo-modal-card, .promo-pop-copied { transition: none; }
    .promo-modal-card { transform: none; }
  }

  /* ══════════════════════════════════════════════════════════
     COOKIE bar (bottom-anchored strip, not modal)
     ══════════════════════════════════════════════════════════ */
  .cookie {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--s3);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-cookie);
    z-index: 200;
    display: none;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  .cookie.show { display: flex; }
  .cookie p {
    font-size: var(--fs-body-tight);
    color: var(--ink);
    line-height: var(--lh-tight-body);
    margin: 0;
    flex: 1;
    min-width: 200px;
  }
  .cookie-actions {
    display: flex;
    gap: var(--s1);
  }
  .cookie button {
    padding: 10px 18px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base);
    min-height: 40px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
  }
  .cookie button.primary {
    background: var(--sage-dk);
    color: var(--white);
    border-color: var(--sage-dk);
  }
  .cookie button.primary:hover { background: var(--sage-dk); border-color: var(--sage-dk); }
  .cookie button:hover { border-color: var(--ink-40); }

  /* ══════════════════════════════════════════════════════════
     GALLERY (dynamic — retained from working impl)
     ══════════════════════════════════════════════════════════ */
  /* Styled dynamically via JS in galOpen; no static CSS needed */

  /* ══════════════════════════════════════════════════════════
     UTILITIES
     ══════════════════════════════════════════════════════════ */
  .center { text-align: center; }
  .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 */
  .skip-link {
    position: absolute;
    top: -100px; left: 20px;
    z-index: 10000;
    background: var(--ink);
    color: var(--white);
    padding: 10px 20px;
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    border-radius: var(--r-sm);
    transition: top var(--t-fast);
  }
  .skip-link:focus { top: 20px; }


  /* ══════════════════════════════════════════════════════════
     LEGAL OVERLAY — restored from pre-Phase-5A index.html (commit b6c32ee).
     The Phase 5A rebuild dropped this implementation and left the footer
     pointing at /privacy and /terms, which are not files and 404.
     Contract: openLegal() adds .on, closeLegal() removes it.
     ══════════════════════════════════════════════════════════ */
  .legal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-gallery);
    background: rgba(37,31,28,0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px;
    overflow-y: auto;
  }
  .legal-overlay.on { display: flex; }
  @keyframes legalIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .legal-box { animation: none !important; } }
  .legal-box {
    background: var(--white);
    max-width: 720px;
    width: 100%;
    border: 1px solid var(--border-lt);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    position: relative;
    animation: legalIn var(--t-slow) var(--ez);
  }
  .legal-head {
    padding: 28px 36px 22px;
    border-bottom: 1px solid var(--border-lt);
    background: var(--cream);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    position: relative;
  }
  .legal-head h2 {
    font-family: var(--font);
    font-weight: var(--w-light);
    font-size: var(--fs-h1);
    color: var(--ink);
    letter-spacing: var(--ls-tight);
  }
  .legal-close {
    position: absolute;
    top: 22px; right: 24px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--ink-70);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-base) var(--ez-alt),
                color var(--t-base) var(--ez-alt),
                border-color var(--t-base) var(--ez-alt);
  }
  .legal-close:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .legal-body {
    padding: 28px 36px 36px;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-70);
  }
  .legal-body h3 {
    font-family: var(--font);
    font-weight: var(--w-med);
    font-size: var(--fs-h3);
    color: var(--ink);
    margin: 20px 0 8px;
  }
  .legal-body h3:first-child { margin-top: 0; }
  .legal-body p { margin: 0 0 12px; }
  .legal-body strong { color: var(--ink); font-weight: var(--w-med); }
  .legal-body em {
    color: var(--ink-70);
    font-size: var(--fs-caption);
    display: block;
    margin-top: 24px;
    text-align: center;
  }
  
/* ── Logo contrast per header-state ──────────────────────────────
   logo.svg wordt cream geleverd voor de donkere hero. Onder .scrolled is
   de balk beige en moet het logo ink worden.

   BELANGRIJK: CSS interpoleert `filter` alleen als BEIDE toestanden
   dezelfde functies in dezelfde volgorde hebben. Van `drop-shadow(...)`
   naar `invert() brightness()` kan de browser niet tussenin rekenen - dat
   gaf een harde klik. Daarom dragen beide toestanden nu dezelfde lijst
   (invert, brightness, drop-shadow) en verschillen alleen de waarden. */
nav .nav-logo-img,
nav .logo img {
  filter: invert(0) brightness(1) drop-shadow(rgba(0,0,0,.35) 0 1px 3px);
  height: 88px;
  width: auto;
  max-width: none;
  transition: filter .5s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 768px) {
  nav .nav-logo-img, nav .logo img { height: 70px; }
}
nav.scrolled .nav-logo-img,
nav#nav.scrolled .nav-logo-img,
nav.scrolled .logo img,
nav#nav.scrolled .logo img {
  filter: invert(1) brightness(0.15) drop-shadow(rgba(0,0,0,0) 0 1px 3px);
  opacity: 1;
}


/* ── Verticale ritmiek ──────────────────────────────────────────
   Secties stonden op 153px padding boven en onder: 306px leegte bij elke
   overgang. Naar 100px (200px tussen secties). Alleen verticaal. */
section.sec-linen, section.sec-travertine, section.sec {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 768px) {
  section.sec-linen, section.sec-travertine, section.sec {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
section.hero { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ── Hero: zachte overgang naar de pagina ───────────────────────
   Zelfde principe als de bio-pagina: de foto vervaagt onderaan naar de
   paginakleur #F2EBE0 zodat de harde scheidslijn verdwijnt. Zwaarder naar
   onderen gewogen dan op de bio, omdat hier koptekst en knoppen in de
   hero staan die niet mogen vervagen. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, rgba(242,235,224,.06) 40%, rgba(242,235,224,.38) 68%,
    rgba(242,235,224,.78) 88%, #F2EBE0 100%);
}
.hero-inner, .hero-copy { position: relative; z-index: 2; }

/* ── FAQ-vragen ingetogener ─────────────────────────────────────
   .faq-q stond op 20px desktop / 17px mobiel, terwijl de bodytekst
   eromheen 15px is. Daardoor domineerden de drie vragen het blok.
   Terug naar 17/15px: nog steeds duidelijk een vraag, maar in verhouding
   tot de rest. Alleen lettergrootte - gewicht, kleur, ruimte en het
   accordeon-gedrag blijven ongewijzigd. */
.faq-q { font-size: 15px; }
@media (max-width: 768px) { .faq-q { font-size: 15px; } }

  /* ── "Explore the region" soepele open/dicht-animatie ───────────
     <details> toggelt display instant. We houden het element altijd
     'open' voor de layout en animeren de link-lijst met max-height +
     opacity. Simpel en betrouwbaar op alle browsers. Werkt zonder JS
     (dan staat het gewoon open); respecteert reduced-motion. */
  .foot-explore-links {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height var(--t-slow) var(--ez),
                opacity var(--t-base) var(--ez-alt),
                padding var(--t-slow) var(--ez);
  }
  .foot-explore.is-open .foot-explore-links {
    max-height: 700px;
    opacity: 1;
    padding-bottom: 20px !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .foot-explore-links { transition: none; }
  }

  /* AUDIT 11 OCT: footer links and the legal line are real tap targets and no smaller than the micro type */
  .foot-primary a, .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-nano, .foot-legal a { font-size: var(--fs-micro); }

/* the one-line mention of the studio workshop in the atelier section, with its Book button */
#atelier .atelier-book { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 28px; background: var(--sage-dk); color: var(--white); border: 1px solid var(--sage-dk); border-radius: var(--r-sm); font-size: var(--fs-micro); font-weight: var(--w-med); letter-spacing: var(--ls-kicker); text-transform: uppercase; text-decoration: none; transition: background var(--t-base), border-color var(--t-base); }
#atelier .atelier-book:hover { background: var(--ink); border-color: var(--ink); }
#atelier .atelier-book:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
#atelier p + .atelier-cta-wrap { margin-top: var(--s2); }