/* ============================================================
   0.  CSS CUSTOM PROPERTIES — palette, type, spacing, motion
   ============================================================ */
:root {
  /* ------ palette, sampled from the wordmark ------
     The logo's inks are a rose script (#d09b98), grey-green leaves
     (#6c7f70) and a warm gold rule (#d5a044). The previous palette sat
     several steps lighter than any of them, which read as sweet rather
     than expensive. These are the logo's own hues, with every
     text-bearing tone deepened far enough to pass contrast. */
  --blush:       #ecd9d5;
  --blush-light: #f7f0ed;
  --blush-deep:  #d4a7a2;
  --sage:        #8f9c88;
  --sage-light:  #d3dbcd;
  --sage-muted:  #5d6f61;
  --cream:       #faf7f2;
  --cream-warm:  #f2ede5;
  --charcoal:    #2c3130;
  --charcoal-soft:#55595a;
  --charcoal-faint:#6f736d;
  --white:       #ffffff;
  --rose:        #b8726f;
  --gold:        #8a6a2d;
  --gold-soft:   #d5a044;

  /* functional */
  --bg:          var(--cream);
  --bg-alt:      var(--cream-warm);
  --bg-card:     var(--white);
  --text:        var(--charcoal);
  --text-soft:   var(--charcoal-soft);
  --text-faint:  var(--charcoal-faint);
  --accent:      var(--blush);
  --accent-deep: var(--blush-deep);
  --accent-green:var(--sage);
  --gold-line:   rgba(213, 160, 68, 0.42);

  /* Hero type sits on a photograph under a warm scrim, so it needs its own
     scale — the page tokens are all tuned for cream. Ratios in the comment
     beside .hero-scrim; every one of these clears 4.5:1 there. */
  --hero-text:    #fdfaf6;
  --hero-lead:    rgba(253, 250, 246, 0.90);
  --hero-accent:  #f0c8c4;
  --hero-eyebrow: #f5e6cd;
  --line:        rgba(54, 58, 59, 0.10);
  --line-strong: rgba(54, 58, 59, 0.18);
  --shadow:      rgba(54, 58, 59, 0.08);
  --shadow-strong:rgba(54, 58, 59, 0.14);

  /* ------ typography ------ */
  --display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* body copy */
  --body-size:  17px;
  --body-leading: 1.7;

  /* ------ spacing scale ------ */
  --header-h:   88px;
  --wrap:       1140px;
  --gutter:     clamp(1.25rem, 5vw, 3.5rem);
  --section-gap: clamp(4rem, 8vw, 7rem);
  --radius:     10px;
  --radius-sm:  6px;

  /* ------ motion ------ */
  --motion-fast:   180ms;
  --motion-normal: 350ms;
  --motion-slow:   500ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   1.  RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so without this every anchored jump parks its
     target underneath it. Costs nothing, and it is invisible until it's
     missing. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  line-height: 1.15;
  color: var(--text);
  font-weight: 500;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem);   letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

em, i { font-style: italic; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.2rem;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: top var(--motion-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* Selection */
::selection {
  background: var(--blush);
  color: var(--charcoal);
}

/* ============================================================
   2.  LAYOUT HELPERS
   ============================================================ */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-gap);
}

.section-alt {
  background: var(--bg-alt);
}

.section-title {
  max-width: 20ch;
}
/* Drawn in on entry by the motion system; transform-origin keeps it
   growing from the text edge rather than the centre. */
.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 1.1rem;
  background: var(--gold-line);
  transform-origin: left center;
}
/* Centred titles get the botanical rule instead of the plain hairline. It
   reuses the same pseudo-element, so the scroll-driven draw-in still applies
   and no page needed new markup. */
.section-title.center::after {
  width: 260px;
  height: 54px;
  margin-top: 0.5rem;
  margin-inline: auto;
  background: url('../assets/ornaments/divider.svg') no-repeat center / contain;
  transform-origin: center;
}

.section-title.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--sage);
  display: inline-block;
}
.eyebrow.center {
  justify-content: center;
}
.eyebrow.center::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--sage);
  display: inline-block;
}

.lead {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 56ch;
}
.lead.center {
  margin-inline: auto;
  text-align: center;
}

/* ============================================================
   3.  BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background var(--motion-normal) ease,
    color var(--motion-normal) ease,
    border-color var(--motion-normal) ease;
  line-height: 1.2;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -6px rgba(212, 167, 162, 0.42);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--charcoal);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--charcoal-soft);
  box-shadow: 0 6px 20px -6px rgba(54, 58, 59, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  background: var(--blush-light);
  border-color: var(--blush-deep);
  box-shadow: 0 6px 20px -6px rgba(212, 167, 162, 0.35);
}

.btn-accent {
  background: var(--blush);
  color: var(--charcoal);
}
.btn-accent:hover {
  background: var(--blush-deep);
  box-shadow: 0 6px 20px -6px rgba(212, 167, 162, 0.42);
}

/* ============================================================
   4.  IMAGE PLACEHOLDER STYLES
   ============================================================ */
.img-placeholder {
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  font-weight: 400;
  overflow: hidden;
  position: relative;
}
.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-out);
}

/* ============================================================
   5.  MOTION SYSTEM — scroll-driven animations
   ============================================================ */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reveal on scroll — items fade + slide up as they enter */
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(42px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Stagger siblings */
    .stagger > * {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .stagger > *:nth-child(1) { animation-delay: 0ms; }
    .stagger > *:nth-child(2) { animation-delay: 60ms; }
    .stagger > *:nth-child(3) { animation-delay: 120ms; }
    .stagger > *:nth-child(4) { animation-delay: 180ms; }
    .stagger > *:nth-child(5) { animation-delay: 240ms; }
    .stagger > *:nth-child(6) { animation-delay: 300ms; }
    .stagger > *:nth-child(7) { animation-delay: 360ms; }
    .stagger > *:nth-child(8) { animation-delay: 420ms; }

    /* --- Hero: media pushes back and the copy lifts away as it exits --- */
    .hero-bg {
      animation: hero-recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes hero-recede {
      from { transform: scale(1); }
      to   { transform: scale(1.16) translateY(4%); }
    }

    .hero-inner {
      animation: hero-lift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 70%;
    }
    @keyframes hero-lift {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-60px); }
    }

    .hero-cue {
      animation: cue-fade linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 25%;
    }
    @keyframes cue-fade {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    /* --- Gallery images settle as they enter --- */
    .gallery-item img {
      animation: img-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    /* The independent `scale` property, not `transform: scale()` — a filled
       animation would otherwise pin transform and swallow the hover. These
       two compose instead of fighting. */
    @keyframes img-settle {
      from { scale: 1.12; }
      to   { scale: 1; }
    }

    /* --- A gold rule draws itself under each section title --- */
    .section-title::after {
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    @keyframes rule-draw {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}


/* ============================================================
   5b. AMBIENT MOTION — the page breathing
   ============================================================ */
/*
 * Separate from the scroll-driven system above, and deliberately so: these
 * run whether or not you scroll, which is the whole point. A still page of a
 * still photograph reads as a printed page; a very slow, continuous drift
 * reads as a room with light moving through it.
 *
 * Three rules keep it from becoming a screensaver:
 *
 *   1. Nothing animates anything but transform and opacity, so every one of
 *      these runs on the compositor and none of them costs a frame on the
 *      main thread.
 *   2. The periods are mutually indivisible — 26s, 19s, 31s, 11s. Give two
 *      layers the same period and the eye catches the loop within seconds;
 *      leave them incommensurate and the combination effectively never
 *      repeats, which is what makes it read as breath rather than a machine.
 *   3. Amplitudes are small enough that you notice the room is alive without
 *      noticing the animation. If you can see it move, it is too much.
 *
 * The reduced-motion block below section 6 stops all of it dead.
 */
@media (prefers-reduced-motion: no-preference) {
  /* The deep breath: the photograph itself, held above scale 1 throughout so
     no edge ever creeps into frame. */
  .hero-bg img {
    animation: breathe-photo 26s var(--ease-inout) infinite alternate;
    will-change: transform;
  }
  /* A 5% swing, not 9%. Measurably cheaper to raster and no less visible —
     over 26 seconds the eye reads the drift, not the distance. */
  @keyframes breathe-photo {
    from { transform: scale(1.05) translate3d(-0.5%, 0.3%, 0); }
    to   { transform: scale(1.10) translate3d(0.7%, -0.7%, 0); }
  }

  /* Warm light moving across the frame, on its own slower period. */
  .hero-bloom {
    animation: breathe-light 31s var(--ease-inout) infinite alternate;
    will-change: transform, opacity;
  }
  /* Translated and faded, never scaled: moving a composited layer is free,
     but scaling a gradient re-rasters it every frame. */
  @keyframes breathe-light {
    from { transform: translate3d(-5%, 3%, 0);  opacity: 0.7; }
    to   { transform: translate3d(6%, -4%, 0);  opacity: 1; }
  }

  /* The pills rise and settle out of phase with each other — the detail that
     makes the group feel alive rather than three things bobbing together. */
  .hero-stats .stat-pill {
    animation: breathe-float 11s var(--ease-inout) infinite alternate;
  }
  .hero-stats .stat-pill:nth-child(2) { animation-duration: 13s; animation-delay: -3s; }
  .hero-stats .stat-pill:nth-child(3) { animation-duration: 17s; animation-delay: -7s; }
  @keyframes breathe-float {
    from { transform: translate3d(0, 2.5px, 0); }
    to   { transform: translate3d(0, -2.5px, 0); }
  }

  /* The scroll cue draws itself down, pauses, and does it again. */
  .hero-cue-line {
    animation: cue-draw 2.8s var(--ease-inout) infinite;
    transform-origin: top center;
  }
  @keyframes cue-draw {
    0%        { transform: scaleY(0.15); opacity: 0; }
    28%       { opacity: 1; }
    62%, 100% { transform: scaleY(1);    opacity: 0; }
  }

  /*
   * All of the above is hero furniture, and none of it is worth a frame once
   * the hero is off screen. Measured while scrolling the whole page: the
   * ambient layers cost roughly twelve dropped frames over 3.6 seconds in
   * software rendering, and every one of them was spent animating something
   * nobody could see. An observer on the hero parks them.
   */
  .hero.is-idle .hero-bg img,
  .hero.is-idle .hero-bloom,
  .hero.is-idle .stat-pill,
  .hero.is-idle .hero-cue-line {
    animation-play-state: paused;
  }

  /* Even the border moves, barely. The corners drift on four different
     periods so the frame never pulses as one object. */
  .frame-corner {
    animation: breathe-corner 23s var(--ease-inout) infinite alternate;
  }
  .frame-corner.tr { animation-duration: 29s; animation-delay: -6s; }
  .frame-corner.bl { animation-duration: 37s; animation-delay: -11s; }
  .frame-corner.br { animation-duration: 41s; animation-delay: -17s; }
  @keyframes breathe-corner {
    from { opacity: 0.72; }
    to   { opacity: 1; }
  }
}

/* ============================================================
   6.  PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transform: none !important;
  }
  .btn:hover { transform: none !important; }
  /* The blanket transform reset above is for motion, but the frame corners
     use transform for orientation, not movement — without this all four
     point top-left. */
  .frame-corner.tr { transform: scaleX(-1) !important; }
  .frame-corner.bl { transform: scaleY(-1) !important; }
  .frame-corner.br { transform: scale(-1)  !important; }
}

/* ============================================================
   7.  HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--motion-normal) ease,
              border-color var(--motion-normal) ease;
}
/* Solid only once the hero has passed, so the blur is never composited over
   playing video — see the note on the stat pills. */
.site-header.is-solid {
  background: rgba(250, 247, 242, 0.9);
  border-bottom-color: var(--line);
}
@media (min-width: 821px) {
  .site-header.is-solid {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Over the hero the nav reverses out to white. */
.site-header:not(.is-solid) .brand { color: var(--white); }
.site-header:not(.is-solid) .nav-links a { color: rgba(255, 255, 255, 0.88); }
.site-header:not(.is-solid) .nav-links a:hover { color: var(--white); }
.site-header:not(.is-solid) .nav-links a.btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.site-header:not(.is-solid) .nav-toggle span { background: var(--white); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
  text-decoration: none;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.brand-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line-strong), 0 2px 8px rgba(54, 58, 59, 0.08);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-bottom: 2px;
  position: relative;
  transition: color var(--motion-fast) ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--sage);
  transition: width var(--motion-normal) var(--ease-out);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-links a:hover {
  color: var(--text);
}
/* `.nav-links a` outranks `.btn-primary` on specificity, so without this the
   header's booking button rendered soft grey on charcoal — 1.35:1, on the one
   control the whole site is pointing at. Restated here rather than reordered,
   because the link colour above still has to win for the plain nav items. */
.nav-links a.btn {
  padding: 0.55rem 1.15rem;
  font-weight: 500;
}
.nav-links a.btn-primary { color: var(--white); }
.nav-links a.btn-primary:hover { color: var(--white); }
.nav-links a.btn::after { display: none; }
.nav-links a.btn:hover {
  transform: translateY(-2px);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--charcoal);
  width: 44px;
  height: 44px;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  position: absolute;
  left: 11px;
  transition: transform var(--motion-normal) var(--ease-out), opacity var(--motion-fast) ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    padding: 0.5rem var(--gutter) 1.25rem;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px -12px var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; }

  /* Full-width rows, not inline words. "FAQ" was a 29x26 target — under half
     the 44px touch minimum, on the only navigation a phone gets. */
  .nav-links a,
  .nav-links .lang-toggle {
    display: flex;
    align-items: center;
    min-height: 52px;
    width: 100%;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }
  .nav-links .lang-toggle {
    justify-content: flex-start;
    font-size: 1rem;
  }
  .nav-links a.btn {
    justify-content: center;
    margin-top: 1rem;
    border-bottom: none;
    min-height: 52px;
  }
}

/* ============================================================
   8.  HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Sits under the sticky header rather than starting below it, so the
     photograph runs to the top of the window. */
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  background: var(--charcoal);
}
@supports not (height: 100svh) {
  .hero { min-height: 100vh; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;   /* decorative; nothing here should ever take a tap */
}
.hero-bg picture { display: contents; }
.hero-bg img,
.hero-bg .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Full strength. The scrim below does the work of keeping type legible —
     dimming the photograph to 20% was what made the opening look bland. */
  opacity: 1;
}

.hero-bg .hero-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero-bg.video-playing .hero-video { opacity: 1; }

/*
 * The scrim, and it is load-bearing rather than decorative.
 *
 * Measured off the photograph: the brightest wall in frame sits around sRGB
 * 0.9. Composited under a 0.50 black it leaves white text at 4.76:1, which
 * clears the 4.5 body minimum; at 0.40 it is 3.47:1 and fails. So the
 * gradient stays lighter across the top, where the building is and no type
 * goes, and reaches 0.62 through the middle and lower band where the copy
 * actually sits.
 *
 * Warm charcoal rather than black — over cream block walls, neutral black
 * reads as a grey wash and warm reads as evening.
 */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    /* A band under the header. The nav reverses out to white here, and the
       top of this photograph is its brightest region — sky and a sunlit
       wall. Without this the links sit at about 2:1. */
    linear-gradient(
      to bottom,
      rgba(28, 24, 21, 0.58) 0,
      rgba(28, 24, 21, 0.12) calc(var(--header-h) + 40px),
      rgba(28, 24, 21, 0) calc(var(--header-h) + 90px)
    ),
    linear-gradient(
      to bottom,
      rgba(28, 24, 21, 0.26) 0%,
      rgba(28, 24, 21, 0.44) 32%,
      rgba(28, 24, 21, 0.54) 62%,
      rgba(28, 24, 21, 0.64) 100%
    ),
    /* a little extra weight on the side the copy starts from */
    linear-gradient(
      to right,
      rgba(28, 24, 21, 0.28) 0%,
      rgba(28, 24, 21, 0) 62%
    );
}

/* A slow warm light that drifts across the frame. This is the piece that
   makes the still photograph feel like it is being lit rather than printed. */
.hero-bloom {
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    42% 42% at 34% 38%,
    rgba(255, 226, 189, 0.20) 0%,
    rgba(255, 226, 189, 0) 70%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  padding-block: clamp(3rem, 7vw, 5rem);
  width: 100%;
}
/*
 * A wash behind the copy block itself, rather than more scrim over the whole
 * frame. The eyebrow is 11.5px, so it needs 4.5:1 like any small text, and it
 * sits high in the frame where the photograph is brightest — the sunlit wall.
 * Darkening the entire picture far enough to fix one line would cost the
 * building; darkening only the column the type occupies costs nothing.
 */
.hero-copy {
  position: relative;
  max-width: 44rem;
}
.hero-copy::before {
  content: '';
  position: absolute;
  inset: -12% -18% -14% -20%;
  z-index: -1;
  background: radial-gradient(
    72% 62% at 30% 48%,
    rgba(20, 17, 15, 0.5) 0%,
    rgba(20, 17, 15, 0.28) 55%,
    rgba(20, 17, 15, 0) 78%
  );
}

.hero-eyebrow {
  color: var(--hero-eyebrow);
  margin-bottom: 1.4rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  width: 34px;
  background: rgba(240, 214, 168, 0.55);
}

.hero h1 {
  font-size: clamp(2.6rem, 5.9vw, 4.6rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 1.6rem;
  max-width: 14ch;
  color: var(--hero-text);
  text-wrap: balance;
}
.hero h1 .accent-italic {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  /* The brand rose is #b8726f, which is unreadable on a dark scrim. Same
     hue, inverted value. */
  color: var(--hero-accent);
}

.hero .lead {
  font-size: 1.12rem;
  line-height: 1.75;
  margin-bottom: 2.4rem;
  max-width: 46ch;
  color: var(--hero-lead);
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-cta .btn {
  letter-spacing: 0.03em;
  padding-inline: 2rem;
}
/* Cream on charcoal, not charcoal on cream — the page behind it is dark now. */
.hero-cta .btn-primary {
  background: var(--cream);
  color: var(--charcoal);
}
.hero-cta .btn-primary:hover {
  background: var(--white);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}
.hero-cta .btn-secondary {
  color: var(--hero-text);
  border-color: rgba(240, 214, 168, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.hero-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(240, 214, 168, 0.85);
  box-shadow: none;
}

/* Stat pills */
.hero-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.stat-pill {
  padding: 0.7rem 1.25rem;
  border-radius: 100px;
  /* A translucent fill, never backdrop-filter: these sit over the one
     element on the page that may be playing video, and blurring a backdrop
     that changes every frame is the surest way to drop frames on a phone. */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.86rem;
  letter-spacing: 0.015em;
  color: var(--hero-lead);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stat-pill strong {
  font-weight: 600;
  color: var(--hero-text);
  font-size: 1rem;
}
.stat-pill .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: inline-block;
}

/* A single tapered line under the copy, drawn down. The only invitation to
   scroll the page needs, and it removes itself once you take it. */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-cue-line {
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.75));
}

/* Gentle parallax on hero image */
.parallax-slow {
  animation: parallax-drift linear both;
  animation-timeline: scroll(root block);
}


/*
 * The header reverses out over the hero photograph and takes on a surface
 * once it is past it. is-solid is toggled by an IntersectionObserver on the
 * hero, never a scroll listener.
 */
.site-header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background var(--motion-normal) ease, border-color var(--motion-normal) ease;
}
.site-header.is-solid {
  background: rgba(250, 247, 242, 0.9);
  border-bottom-color: var(--line);
}
@media (min-width: 821px) {
  /* Only once it is over static content — never over playing media. */
  .site-header.is-solid { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.site-header:not(.is-solid) .brand,
.site-header:not(.is-solid) .nav-links a { color: rgba(255, 255, 255, 0.9); }
.site-header:not(.is-solid) .nav-links a:hover { color: #fff; }
.site-header:not(.is-solid) .nav-toggle span { background: #fff; }
.site-header:not(.is-solid) .lang-toggle { color: rgba(255, 255, 255, 0.9); border-color: rgba(255,255,255,0.5); }
/* The open drawer always has its own cream surface behind it. */
.site-header:not(.is-solid) .nav-links.open a,
.site-header:not(.is-solid) .nav-links.open .lang-toggle { color: var(--text); }
.site-header:not(.is-solid) .nav-links.open a.btn-primary { color: var(--white); }

@media (max-width: 820px) {
  .hero-inner { text-align: center; }
  .hero-copy { max-width: 100%; }
  /* Taller and wider than the desktop wash: the copy is centred and stacked,
     so the eyebrow sits at the very top of the block where a tight radial
     never reached it. */
  .hero-copy::before {
    inset: -16% -28% -12%;
    background: radial-gradient(
      98% 78% at 50% 50%,
      rgba(20, 17, 15, 0.52) 0%,
      rgba(20, 17, 15, 0.36) 52%,
      rgba(20, 17, 15, 0) 88%
    );
  }
  .hero h1 { max-width: 100%; margin-inline: auto; }
  .hero .lead { max-width: 100%; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  /* The side weighting is for a left-aligned column; centred copy wants it
     even. Every layer has to be restated — `background` is shorthand, so
     naming one gradient here would silently drop the header band. */
  .hero-scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(28, 24, 21, 0.60) 0,
        rgba(28, 24, 21, 0.14) calc(var(--header-h) + 40px),
        rgba(28, 24, 21, 0) calc(var(--header-h) + 90px)
      ),
      linear-gradient(
        to bottom,
        rgba(28, 24, 21, 0.36) 0%,
        rgba(28, 24, 21, 0.52) 34%,
        rgba(28, 24, 21, 0.56) 66%,
        rgba(28, 24, 21, 0.64) 100%
      );
  }
  .hero-eyebrow { justify-content: center; }
  .hero-eyebrow::after {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--gold-line);
    display: inline-block;
  }
  /* The eyebrow's gold hairlines are for cream; on the scrim they vanish. */
  .hero-eyebrow::after { background: rgba(240, 214, 168, 0.55); }
}

/* ============================================================
   9.  WELCOME SECTION
   ============================================================ */
.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.welcome-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.welcome-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome-text .section-title {
  margin-bottom: 1.25rem;
}
.welcome-text p {
  color: var(--text-soft);
  margin-bottom: 1rem;
  max-width: 50ch;
}
/* `.welcome-text p` outranks `.eyebrow` on specificity — restore it */
.welcome-text .eyebrow {
  color: var(--sage-muted);
}

.welcome-text .pull-line {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gold-line);
  max-width: 32ch;
  font-family: var(--display);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--sage-muted);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

@media (max-width: 780px) {
  .welcome-grid {
    grid-template-columns: 1fr;
  }
  .welcome-image {
    aspect-ratio: 3 / 2;
    order: -1;
  }
  .welcome-text p { max-width: 100%; }
}

/* ============================================================
   10. PERFECT FOR — numbered list
   ============================================================ */
.perfect-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  margin-top: 2.5rem;
  counter-reset: perfect-item;
}
.perfect-item {
  counter-increment: perfect-item;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out);
}
.perfect-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -8px var(--shadow);
}
.perfect-item .num {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--blush-deep);
  line-height: 1;
  min-width: 1.8rem;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}
.perfect-item h4 {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
  font-weight: 500;
}
.perfect-item p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
}

@media (max-width: 700px) {
  .perfect-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   11. THE SPACE — collage + amenities
   ============================================================ */
.space-collage {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1rem;
  margin-bottom: 3rem;
}
.space-collage-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.space-collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.space-collage-item:first-child {
  aspect-ratio: 4 / 3;
  grid-row: span 2;
}
.space-collage-item:nth-child(2),
.space-collage-item:nth-child(3) {
  aspect-ratio: 16 / 10;
}

.amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
}
.amenity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--text-soft);
}
.amenity-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blush-deep);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .space-collage {
    grid-template-columns: 1fr;
  }
  .space-collage-item:first-child {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .amenities-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   12. RATES
   ============================================================ */
.rate-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.rate-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out);
}
.rate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px var(--shadow);
}
.rate-card.featured {
  border-color: var(--gold-line);
  box-shadow: 0 0 0 1px rgba(213, 160, 68, 0.16);
}

.rate-card .days {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-muted);
  margin-bottom: 0.75rem;
}
.rate-card .price {
  font-family: var(--display);
  font-size: 2.8rem;
  line-height: 1;
  font-weight: 500;
  color: var(--text);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
.rate-card .price span {
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text-soft);
}
.rate-card .min-detail {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--text-soft);
}
.rate-card .min-detail strong {
  color: var(--text);
  font-weight: 600;
}
.rate-card .window-detail {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* Deposits note */
.deposits-note {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--blush-light);
  border: 1px solid var(--blush);
  border-radius: var(--radius);
  border-left: 4px solid var(--blush-deep);
}
.deposits-note h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--charcoal);
}
.deposits-note p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
  max-width: 65ch;
}
.deposits-note strong {
  color: var(--charcoal);
}

@media (max-width: 760px) {
  .rate-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   13. AVAILABILITY NOTE — bachata
   ============================================================ */
.availability-note {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 2.5rem;
}
.availability-note h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.availability-note p {
  color: var(--text-soft);
  font-size: 0.95rem;
  max-width: 48ch;
  margin: 0 auto;
}

/* ============================================================
   14. GALLERY
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 2.5rem;
}
/* The ratio lives on .gallery-frame, not on the figure and not on the image:
   a caption inside an aspect-ratio box overflows it, and a ratio on the image
   fights the hover scale. The frame clips, so the image can grow inside it
   without moving anything on the page. */
.gallery-item {
  cursor: pointer;
  position: relative;
}
.gallery-frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-normal) var(--ease-out);
}
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
}
/* One feature tile opens the grid across the full row. It gets its own row,
   so its ratio is free — the tiles below stay a matched 4:3 set. */
.gallery-item.tile-wide {
  grid-column: 1 / -1;
}
.gallery-item.tile-wide .gallery-frame {
  aspect-ratio: 16 / 9;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(54, 58, 59, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--charcoal);
  transition: transform var(--motion-fast) var(--ease-out);
}
.lightbox-close:hover {
  transform: scale(1.1);
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--charcoal);
  transition: transform var(--motion-fast) var(--ease-out);
}
.lightbox-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}
.lightbox-arrow.prev { left: 1.5rem; }
.lightbox-arrow.next { right: 1.5rem; }

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Six 4:3 tiles two-up is three tidy rows, so the pattern survives the
     column drop untouched. The feature tile keeps spanning the full row. */
  .gallery-item.tile-wide .gallery-frame {
    aspect-ratio: 3 / 2;
  }
  .lightbox-arrow { display: none; }
}

/* ============================================================
   15. HOW BOOKING WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  counter-reset: step-counter;
}
.step {
  counter-increment: step-counter;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.step::before {
  content: counter(step-counter);
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 500;
  color: var(--blush);
  line-height: 1;
  display: block;
  margin-bottom: 0.75rem;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}
.step h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.step p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
  max-width: 32ch;
  margin-inline: auto;
}

.step-arrow {
  display: none;
}

@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   16. FAQ ACCORDION
   ============================================================ */
.faq-list {
  max-width: 720px;
  margin: 2.5rem auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: color var(--motion-fast) ease;
}
.faq-question:hover {
  color: var(--sage-muted);
}
.faq-question-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--motion-normal) var(--ease-out);
}
.faq-question-icon::before,
.faq-question-icon::after {
  content: '';
  position: absolute;
  background: var(--charcoal-soft);
  border-radius: 2px;
  transition: transform var(--motion-normal) var(--ease-out);
}
.faq-question-icon::before {
  width: 2px;
  height: 16px;
  top: 2px;
  left: 9px;
}
.faq-question-icon::after {
  width: 16px;
  height: 2px;
  top: 9px;
  left: 2px;
}
.faq-item.open .faq-question-icon {
  transform: rotate(45deg);
}
.faq-item.open .faq-question-icon::before {
  transform: rotate(90deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-normal) var(--ease-out);
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer-inner {
  overflow: hidden;
}
.faq-answer p {
  padding: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--text-soft);
  margin: 0;
  max-width: 60ch;
  line-height: 1.65;
}

/* ============================================================
   17. CONTACT / BOOK A VIEWING
   ============================================================ */
.contact-form-wrap {
  max-width: 600px;
  margin: 2.5rem auto 0;
}

.contact-form {
  display: grid;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* 16px is not a style choice. Safari zooms the page in when a focused field
   is under 16px and never zooms back out, so anything smaller strands a
   phone visitor on a horizontally-scrolled page mid-booking. 48px tall
   clears the 44px touch minimum with room for the border. */
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--sans);
  font-size: 1rem;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(183, 196, 176, 0.2);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #d4a0a0;
}
.form-group .error-msg {
  font-size: 0.85rem;
  color: #b57272;
  display: none;
}
.form-group .error-msg.visible {
  display: block;
}

/* A hint that appears under the date field once a day is chosen: that day's
   rate, its minimum, and any standing hold. Better to learn it here than
   after sending a request for a date that cannot work. */
.field-hint {
  font-size: 0.9rem;
  color: var(--text-soft);
  display: none;
}
.field-hint.visible { display: block; }
.field-hint strong { color: var(--text); font-weight: 600; }

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
}

/* Success state */
.form-success {
  display: none;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-success.visible {
  display: block;
}
.form-success .success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sage-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: var(--sage-muted);
}
.form-success h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.form-success p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   18. AVAILABILITY CALENDAR
   ============================================================ */
.availability {
  max-width: 600px;
  margin: 2.5rem auto 0;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--shadow);
}

.cal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.cal-head h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
}
.cal-status {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 0.15rem;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cal-month {
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 8.5ch;
  text-align: center;
}
.cal-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.cal-arrow:hover:not(:disabled) {
  border-color: var(--sage);
  color: var(--text);
}
.cal-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-weekdays {
  margin-bottom: 6px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cal-day {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--cream-warm);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.cal-day .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.cal-day.is-blank {
  background: none;
  cursor: default;
}
.cal-day.is-past,
.cal-day.is-booked {
  color: var(--text-faint);
  cursor: not-allowed;
}
.cal-day.is-past { background: none; }
.cal-day.is-open .dot    { background: var(--sage-muted); }
.cal-day.is-limited .dot { background: var(--blush-deep); }
.cal-day.is-booked .dot  { background: var(--line-strong); }
.cal-day:not(:disabled):hover { border-color: var(--sage); }
.cal-day.is-selected {
  background: var(--sage-light);
  border-color: var(--sage-muted);
  font-weight: 600;
}
.cal-day:focus-visible {
  outline: 2px solid var(--sage-muted);
  outline-offset: 2px;
}

.cal-legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  list-style: none;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.cal-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cal-legend .swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cal-legend .swatch.open    { background: var(--sage-muted); }
.cal-legend .swatch.limited { background: var(--blush-deep); }
.cal-legend .swatch.booked  { background: var(--line-strong); }

.cal-detail {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.cal-detail-empty {
  color: var(--text-faint);
  font-size: 0.85rem;
}
.cal-detail h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.cal-detail .cal-detail-note {
  color: var(--text-soft);
  font-size: 0.83rem;
  margin-bottom: 0.75rem;
}
.cal-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cal-slot {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.cal-slot:hover {
  border-color: var(--sage);
  background: var(--cream-warm);
}
.cal-slot.is-chosen {
  background: var(--sage-light);
  border-color: var(--sage-muted);
  color: var(--text);
}

/* The way out of the calendar. Once someone has picked a day and an hour
   they have made the decision — the form should be one tap away, already
   filled in, not a scroll back up to a separate section. */
.cal-request {
  display: flex;
  width: 100%;
  margin-top: 1.1rem;
  justify-content: center;
}
.cal-request .btn { width: 100%; }

@media (max-width: 600px) {
  /* Full-bleed on a phone. Inside the page gutter each day cell came out
     41px wide; edge to edge they clear 48px, which is the difference between
     picking a date and picking the date next to it. */
  .availability {
    margin-inline: calc(var(--gutter) * -1);
    padding: 1.1rem 0.5rem;
    border-radius: 0;
    border-inline: none;
    max-width: none;
  }
  .cal-head,
  .cal-legend,
  .cal-detail { padding-inline: 0.6rem; }
  .cal-head { flex-direction: column; }
  .cal-nav { align-self: stretch; justify-content: space-between; }
  .cal-weekdays,
  .cal-grid { gap: 3px; }
  .cal-day { font-size: 0.95rem; min-height: 52px; }
}

/* ============================================================
   17b. FLORAL PAGE FRAME
   ============================================================ */
/*
 * An engraved-invitation border around the content area: a botanical spray in
 * each corner with a gold hairline running between them.
 *
 * Fixed, so it frames the window rather than scrolling away with the page —
 * and inset below the sticky header, because the header is chrome and the
 * frame is around the room, not around the navigation.
 *
 * It only appears where there is margin to hold it. Tried at 390px, the
 * corner sprays landed on top of a paragraph: decoration damaging legibility
 * on the primary device, which is not a trade worth making. So the corner is
 * sized from whatever margin the viewport actually has and the whole frame is
 * gated above the width where that margin is big enough to read. Narrower
 * screens get the botanical rules under the section titles and above the
 * footer — the same vocabulary, at a size that fits.
 */
.page-frame { display: none; }

@media (min-width: 1250px) {
  .page-frame {
    display: block;
    position: fixed;
    top: calc(var(--header-h) + var(--frame-gap));
    right: var(--frame-gap);
    bottom: var(--frame-gap);
    left: var(--frame-gap);
    z-index: 20;
    pointer-events: none;

    --frame-gap: 10px;
    /* Never wider than the empty margin beside the content column, so the
       sprays can't reach into the text no matter how narrow the window. */
    --frame-corner: min(
      140px,
      calc((100vw - var(--wrap)) / 2 + var(--gutter) - var(--frame-gap) - 8px)
    );
    --frame-ink: rgba(184, 147, 78, 0.42);
    /* Both derived from the drawing itself: in corner.svg's 140-unit box the
       bracket sits 6 units in and runs 68 along each edge. Keeping them as
       fractions means changing --frame-corner alone keeps the hairlines
       meeting the brackets exactly, at any size. */
    --frame-inset: calc(var(--frame-corner) * 6 / 140);
    --frame-run: calc(var(--frame-corner) * 68 / 140);

    /* The four connecting hairlines, as backgrounds rather than four more
       elements — one paint, no extra nodes, nothing to keep in sync. */
    background-image:
      linear-gradient(var(--frame-ink), var(--frame-ink)),
      linear-gradient(var(--frame-ink), var(--frame-ink)),
      linear-gradient(var(--frame-ink), var(--frame-ink)),
      linear-gradient(var(--frame-ink), var(--frame-ink));
    background-repeat: no-repeat;
    background-size:
      calc(100% - 2 * var(--frame-run)) 1px,
      calc(100% - 2 * var(--frame-run)) 1px,
      1px calc(100% - 2 * var(--frame-run)),
      1px calc(100% - 2 * var(--frame-run));
    background-position:
      var(--frame-run) var(--frame-inset),
      var(--frame-run) calc(100% - var(--frame-inset)),
      var(--frame-inset) var(--frame-run),
      calc(100% - var(--frame-inset)) var(--frame-run);
  }

  /* One drawing, mirrored into four corners. */
  .frame-corner {
    position: absolute;
    width: var(--frame-corner);
    height: var(--frame-corner);
    background: url('../assets/ornaments/corner.svg') no-repeat center / contain;
  }
  .frame-corner.tl { top: 0; left: 0; }
  .frame-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
  .frame-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
  .frame-corner.br { bottom: 0; right: 0; transform: scale(-1); }
}

@media print {
  .page-frame { display: none; }
}

/* ============================================================
   18a. STICKY BOOKING BAR (phones only)
   ============================================================ */
.book-bar { display: none; }

@media (max-width: 820px) {
  .book-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem var(--gutter);
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 242, 0.97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -12px var(--shadow);
    /* Off-screen rather than display:none so it slides rather than pops, and
       so it costs one transform instead of a relayout. */
    transform: translateY(115%);
    transition: transform var(--motion-normal) var(--ease-out);
  }
  .book-bar.is-visible { transform: none; }
  .book-bar .btn {
    flex: 1;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .book-bar-alt {
    flex: 0 0 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    background: var(--white);
  }
  .book-bar-alt:hover { color: var(--text); border-color: var(--sage); }

  /* Keep the last of the footer clear of the bar. */
  .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .book-bar { transition: none; }
}

/* ============================================================
   18b. DARK BANDS
   ============================================================ */
.section-dark {
  --bg-card:      #23262a;
  --bg-alt:       #23262a;
  --text:         #f4f1ec;
  --text-soft:    rgba(244, 241, 236, 0.78);
  --text-faint:   rgba(244, 241, 236, 0.58);
  --line:         rgba(255, 255, 255, 0.14);
  --line-strong:  rgba(255, 255, 255, 0.26);
  --cream:        #23262a;
  --cream-warm:   #2a2e31;
  --white:        #23262a;      /* "card" surfaces inside the band */
  --shadow:       rgba(0, 0, 0, 0.4);
  --shadow-strong:rgba(0, 0, 0, 0.55);
  background: #1b1e1c;
  color: var(--text);
}
.section-dark .section-title,
.section-dark h3,
.section-dark h4 { color: var(--text); }
.section-dark .eyebrow { color: #b9c7b4; }
.section-dark .eyebrow::before,
.section-dark .eyebrow::after { background: rgba(185, 199, 180, 0.5); }

/* Form controls need real surfaces, not the retinted --white */
.section-dark .form-group input,
.section-dark .form-group select,
.section-dark .form-group textarea {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.22);
}
.section-dark .form-group input::placeholder,
.section-dark .form-group textarea::placeholder { color: rgba(244, 241, 236, 0.45); }
.section-dark .form-group input:focus,
.section-dark .form-group select:focus,
.section-dark .form-group textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(143, 156, 136, 0.28);
}
/* #b57272 drops to 2.6:1 on this surface — lift it to clear 4.5 */
.section-dark .form-group .error-msg { color: #f0a8a8; }
.section-dark .form-group input.error,
.section-dark .form-group select.error,
.section-dark .form-group textarea.error { border-color: #d98d8d; }

.section-dark .btn-primary {
  background: var(--cream-warm);
  color: #f4f1ec;
  border-color: rgba(255, 255, 255, 0.24);
}
.section-dark .btn-primary:hover { background: #343a3d; }

/* Calendar: keep the day grid readable against the darker card */
.section-dark .cal-day { background: rgba(255, 255, 255, 0.06); }
.section-dark .cal-day.is-past { background: none; }
.section-dark .cal-day.is-selected {
  background: rgba(143, 156, 136, 0.32);
  border-color: var(--sage);
}
.section-dark .cal-day.is-open .dot    { background: #9fc0a4; }
.section-dark .cal-day.is-limited .dot { background: var(--gold-soft); }
.section-dark .cal-legend .swatch.open    { background: #9fc0a4; }
.section-dark .cal-legend .swatch.limited { background: var(--gold-soft); }
.section-dark .cal-arrow { background: rgba(255, 255, 255, 0.06); color: var(--text-soft); }
.section-dark .cal-slot { background: rgba(255, 255, 255, 0.06); color: var(--text-soft); }
.section-dark .cal-slot.is-chosen {
  background: rgba(143, 156, 136, 0.32);
  border-color: var(--sage);
  color: var(--text);
}
.section-dark .form-success .success-icon {
  background: rgba(143, 156, 136, 0.28);
  color: #cfe0cb;
}

/* ============================================================
   19. FOOTER
   ============================================================ */
.site-footer {
  background: var(--charcoal);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.footer-flourish {
  width: min(260px, 70vw);
  height: 54px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  background: url('../assets/ornaments/divider.svg') no-repeat center / contain;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-brand {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
  margin-bottom: 0.75rem;
  color: var(--white);
}

.footer-address p {
  font-size: 0.92rem;
  color: rgba(252, 248, 242, 0.7);
  line-height: 1.6;
  margin: 0;
}
.footer-address a {
  color: var(--blush);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.92rem;
}
.footer-address a:hover {
  color: var(--blush-deep);
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(252, 248, 242, 0.5);
  margin-bottom: 1rem;
}

/* Flex with a min-height rather than a block: the footer is where people go
   for the address and the email, and 25px-tall rows are a miss-and-retry on
   a phone. */
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  color: rgba(252, 248, 242, 0.7);
  transition: color var(--motion-fast) ease;
}
.footer-col a:hover {
  color: var(--white);
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(252, 248, 242, 0.1);
  text-align: center;
  font-size: 0.88rem;
  color: rgba(252, 248, 242, 0.5);
}
.footer-bottom .closing {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--blush);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  margin-top: 0.5rem;
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============================================================
   20. STICKY MOBILE BOTTOM BAR
   ============================================================ */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 0.75rem var(--gutter);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(54, 58, 59, 0.08);
}
.mobile-bar .btn {
  width: 100%;
  justify-content: center;
  padding: 0.9rem;
  font-size: 1rem;
}

.mobile-bar.visible {
  display: block;
}

@media (min-width: 861px) {
  .mobile-bar {
    display: none !important;
  }
}

/* ============================================================
   21. RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --body-size: 16px;
  }
  .hero h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .section { --section-gap: clamp(3rem, 10vw, 4rem); }
  .stat-pill { font-size: 0.82rem; padding: 0.5rem 1rem; }
  .rate-card { padding: 1.5rem; }
  .rate-card .price { font-size: 2.2rem; }
}

/* ============================================================
   22. RC COMPONENTS — pages beyond home
   ============================================================ */

/* Screen-reader-only, still focusable when it needs to be */
.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;
}

/* Interior pages have no hero, so they need clearance under the fixed bar */
.page-head {
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem));
  max-width: 46rem;
}
.page-head .section-title { max-width: 18ch; }
.page-head .lead { max-width: 54ch; }

/* Language toggle */
.lang-toggle {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold-line);
  padding: 0.2rem 0.1rem;
  cursor: pointer;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.lang-toggle:hover { color: var(--text); border-color: var(--gold); }
.site-header:not(.is-solid) .lang-toggle {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.5);
}
.site-header:not(.is-solid) .lang-toggle:hover { color: var(--white); }

/* Specification and access lists */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}
.spec {
  padding-top: 1rem;
  border-top: 1px solid var(--gold-line);
}
.spec dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-muted);
  margin-bottom: 0.5rem;
}
.spec dd { color: var(--text-soft); font-size: 0.98rem; }

.amenity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  list-style: none;
}
.amenity-list li {
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  position: relative;
}
.amenity-list li::before {
  content: '';
  position: absolute;
  left: 0.2rem; top: 1.25rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
}

.note {
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--text-faint);
  max-width: 56ch;
}

/* Layout options */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.layout-card {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.layout-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.layout-card p { color: var(--text-soft); font-size: 0.95rem; }

/* Pricing calculator */
.calc {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--shadow);
}
.calc .form-row { grid-template-columns: repeat(3, 1fr); }
.calc-out {
  display: block;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gold-line);
}
.calc-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  padding: 0.35rem 0;
}
.calc-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.1rem;
}
.calc-total strong { font-size: 1.6rem; font-weight: 500; }
.calc-fine {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.83rem;
  color: var(--text-faint);
}
.calc-error {
  font-size: 0.92rem;
  color: var(--text-soft);
  padding: 0.5rem 0.85rem;
  border-left: 2px solid var(--blush-deep);
  background: var(--cream-warm);
  border-radius: var(--radius-sm);
}

/* Deposit notice — always above the form */
.deposit-notice {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: rgba(213, 160, 68, 0.08);
  font-size: 0.95rem;
}

/* ---------- booking flow ---------- */

/* Three steps above the form. The point is to answer "what am I agreeing to
   by pressing send" before the first field, not to decorate. */
.book-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
  list-style: none;
  counter-reset: none;
}
.book-steps li {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding-top: 0.9rem;
  border-top: 2px solid var(--gold-line);
}
.book-steps .step-num {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}
/* The deep gold is tuned for cream; on the dark band it drops to 3.35:1.
   The light gold reads at 7:1 there and would fail on cream — each side
   needs its own. */
.section-dark .book-steps .step-num { color: var(--gold-soft); }
.book-steps strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.book-steps span:not(.step-num) {
  font-size: 0.95rem;
  color: var(--text-soft);
}
.book-steps[hidden] { display: none; }

/* The estimate someone arrived with. Reads as a receipt for a decision
   already made, which is the point — it should feel like progress, not
   another thing to fill in. */
.booking-summary {
  position: relative;
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage-muted);
  border-radius: var(--radius-sm);
}
.booking-summary[hidden] { display: none; }
.summary-title {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.5rem;
}
.summary-when {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.summary-rate {
  font-size: 0.95rem;
  color: var(--text-soft);
}
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--text-soft);
}
.summary-total strong {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--text);
}
.summary-note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-faint);
}
.summary-change {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Success state: what happens next, and a way to reach a human. */
.form-success .success-heading {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.success-steps {
  display: grid;
  gap: 0.65rem;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  padding-left: 1.4rem;
  list-style: decimal;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.success-steps::marker,
.success-steps li::marker { color: var(--text-faint); }

/* A question in small caps reads as shouting. This one stays a sentence. */
.form-success .success-heading.is-sentence {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.success-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.success-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .book-steps {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Staged payment path */
.soon-note {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.soon-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  background: var(--sage-light);
  color: var(--sage-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.soon-note p:not(.soon-badge) {
  color: var(--text-soft);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Preview-build flag on the success panel */
.rc-flag {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-faint);
  font-style: italic;
}

.contact-details {
  margin-top: 2.5rem;
  text-align: center;
  font-style: normal;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.contact-details a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--gold-line);
}

.footer-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-muted);
  margin-bottom: 0.6rem;
}

.gallery-item figcaption {
  padding: 0.7rem 0.2rem 0;
  font-size: 0.85rem;
  color: var(--text-soft);
}

@media (max-width: 700px) {
  .calc .form-row { grid-template-columns: 1fr; }
  .calc { padding: 1.25rem; }
}

/* Layout cards carry a plan drawing. `contain`, not `cover` — a diagram
   must not be cropped, and the SVG already sits on the card's own paper. */
.layout-card { padding: 0; overflow: hidden; }
.layout-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-bottom: 1px solid var(--line);
}
.layout-card h3 { margin: 1.25rem 1.5rem 0.5rem; }
.layout-card p { margin: 0 1.5rem 1.5rem; }

/* Three-up detail strip */
.detail-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.detail-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 700px) {
  .detail-strip { grid-template-columns: 1fr 1fr; }
  .detail-strip img:last-child { display: none; }
}

/* Real venue photographs on The Space and Contact */
.access-photo,
.access-photo img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.access-photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--text-faint);
  text-align: center;
}