/* ==========================================================================
   The Saints Sutor — site.css
   No framework, no build step. Rules are documented in docs/design-system.md.

   1. Fonts
   2. Tokens (mobile first → tablet ≥768 → desktop ≥1200)
   3. Base
   4. Layout primitives
   5. Typography classes
   6. Components
   7. Sections
   8. Motion
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/NotoSerifDisplay-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/NotoSerifDisplay-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/Manrope-normal-latin.woff2') format('woff2'); }

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* Colour — Sutor sand & gold, Lux-style deep green for dark bands */
  --c-night: #12201b;          /* dark bands, header solid, footer */
  --c-night-2: #1a2b25;        /* raised surface on dark */
  --c-ink: #1d1a16;            /* text on light */
  --c-paper: #f5f2ec;          /* default page background */
  --c-sand: #ebe7de;           /* Sutor sand — alternate light band */
  --c-stone: #d6d1ca;          /* Sutor stone — split sections, borders */
  --c-gold: #735a22;           /* Sutor gold, darkened for AA: 5.85 paper / 5.29 sand / 4.30 stone */
  --c-gold-light: #c9a95f;     /* gold on dark */
  --band-scrim: 1;            /* strength of the dark overlay on video bands (1 = default) */
  --c-gold-deep: #66501e;      /* gold on stone (5.06:1) — --c-gold only reaches 4.30 there */
  --c-rose: #c77d73;           /* interior accent — tiny details only */
  --c-on-dark: #f3efe6;
  --c-muted: rgb(29 26 22 / .68);
  --c-muted-dark: rgb(243 239 230 / .72);
  --c-line: rgb(29 26 22 / .16);
  --c-line-dark: rgb(243 239 230 / .18);

  /* Type families */
  --f-serif: 'Noto Serif Display', 'Times New Roman', serif;
  --f-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — MOBILE (<768) */
  --fs-display: 4rem;      /* 64 footer wordmark */
  --fs-h1: 3rem;           /* 48 */
  --fs-h2: 2.5rem;         /* 40 */
  --fs-h3: 1.75rem;        /* 28 */
  --fs-h4: 1.375rem;       /* 22 */
  --fs-lede: 1.25rem;      /* 20 serif intro */
  --fs-body: 1rem;         /* 16 */
  --fs-small: .875rem;     /* 14 */
  --fs-label: .6875rem;    /* 11 uppercase */

  --lh-display: .82;
  --lh-heading: .95;
  --lh-tight: 1.1;
  --lh-body: 1.65;
  --ls-heading: -.035em;
  --ls-label: .16em;

  /* Spacing scale (4px base) — fixed, never use values outside it.
     Components never reset margin on their root: spacing between siblings belongs to .stack / .stack-lg. */
  --s-1: .25rem;  /* 4 */
  --s-2: .5rem;   /* 8 */
  --s-3: .75rem;  /* 12 */
  --s-4: 1rem;    /* 16 */
  --s-5: 1.5rem;  /* 24 */
  --s-6: 2rem;    /* 32 */
  --s-7: 3rem;    /* 48 */
  --s-8: 4rem;    /* 64 */
  --s-9: 6rem;    /* 96 */
  --s-10: 8rem;   /* 128 */

  /* Layout tokens — MOBILE */
  --gutter: 1.25rem;       /* 20 side padding */
  --section-y: 5rem;       /* 80 vertical section padding */
  --stack: 2rem;           /* 32 heading → content gap */
  --grid-gap: 1rem;        /* 16 */
  --header-h: 4.5rem;      /* 72 */
  --page-max: 100rem;      /* 1600 hard cap for huge screens */
  --measure: 34rem;        /* body text max width */
  --hero-h: 88svh;

  --radius: 0;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .4s;
}

@media (min-width: 768px) { /* TABLET */
  :root {
    --fs-display: 7.5rem;  /* 120 */
    --fs-h1: 4.5rem;       /* 72 */
    --fs-h2: 3.5rem;       /* 56 */
    --fs-h3: 2rem;         /* 32 */
    --fs-h4: 1.5rem;       /* 24 */
    --fs-lede: 1.375rem;   /* 22 */
    --gutter: 2.5rem;      /* 40 */
    --section-y: 6.5rem;   /* 104 */
    --stack: 3rem;         /* 48 */
    --grid-gap: 1.5rem;    /* 24 */
    --header-h: 5.5rem;    /* 88 */
    --hero-h: 80svh;
  }
}

@media (min-width: 1200px) { /* DESKTOP */
  :root {
    --fs-display: 11.5rem; /* 184 */
    --fs-h1: 6rem;         /* 96 */
    --fs-h2: 4.5rem;       /* 72 */
    --fs-h3: 2.25rem;      /* 36 */
    --fs-h4: 1.625rem;     /* 26 */
    --fs-lede: 1.5rem;     /* 24 */
    --fs-body: 1.0625rem;  /* 17 */
    --fs-label: .75rem;    /* 12 */
    --gutter: 4rem;        /* 64 */
    --section-y: 8rem;     /* 128 */
    --stack: 4rem;         /* 64 */
    --grid-gap: 2rem;      /* 32 */
    --header-h: 6.5rem;    /* 104 */
    --hero-h: 100svh;
  }
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-paper); color: var(--c-ink);
  font: 400 var(--fs-body) / var(--lh-body) var(--f-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[role=list] { list-style: none; padding: 0; }
::selection { background: var(--c-gold-light); color: var(--c-night); }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.on-dark :focus-visible, .site-header :focus-visible, .hero :focus-visible, .cta-band :focus-visible { outline-color: var(--c-gold-light); }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--c-ink); color: var(--c-on-dark); padding: var(--s-3) var(--s-4); }
.skip-link:focus { top: var(--s-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4. Layout primitives ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section + .section--flush-top, .section--flush-top { padding-top: 0; }
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--stack); }

/* Colour bands: every section declares exactly one */
.band-paper { background: var(--c-paper); }
.band-sand { background: var(--c-sand); }
.band-stone { background: var(--c-stone); }
.band-night, .on-dark { background: var(--c-night); color: var(--c-on-dark); }
.on-dark .muted, .band-night .muted, .hero .muted, .cta-band .muted { color: var(--c-muted-dark); }

.grid { display: grid; gap: var(--grid-gap); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Section head: heading left, intro + link right (stacks on mobile) */
.section-head { display: grid; gap: var(--s-5); margin-bottom: var(--stack); }
.section-head.section-head--link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; }
@media (min-width: 1200px) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: var(--s-8); }
}

/* Utilities */
.text-link { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; transition: text-decoration-color var(--dur) var(--ease); }
.text-link:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.section--under-header { padding-top: calc(var(--header-h) + var(--section-y)); }
.measure-narrow { max-width: 34ch; }
.measure-title { max-width: 16ch; }
.gap-lg { gap: var(--s-8); }
.row-gap-lg { row-gap: var(--s-8); }

/* 5. Typography ------------------------------------------------------------ */
.display, .h1, .h2, .h3, .h4, .lede, .quote {
  font-family: var(--f-serif); font-weight: 300; letter-spacing: var(--ls-heading); text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.05em; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: -.02em; font-weight: 400; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); letter-spacing: -.015em; font-weight: 400; }
.lede { font-size: var(--fs-lede); line-height: 1.35; letter-spacing: -.01em; font-weight: 300; text-wrap: pretty; }
.h1 em, .h2 em, .display em, .lede em { font-style: italic; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); text-wrap: pretty; }
.body p + p { margin-top: var(--s-4); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.muted { color: var(--c-muted); }
.label {
  font: 600 var(--fs-label) / 1.2 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.label--gold { color: var(--c-gold); }
.band-stone .label--gold { color: var(--c-gold-deep); }
.on-dark .label--gold, .band-night .label--gold { color: var(--c-gold-light); }
.hero .label--gold, .cta-band .label--gold { color: var(--c-on-dark); }
.numeral { font-family: var(--f-serif); font-size: var(--fs-h4); color: var(--c-gold); font-weight: 300; }
.on-dark .numeral { color: var(--c-gold-light); }
.rule { border: 0; border-top: 1px solid var(--c-line); margin-inline: 0; margin-bottom: 0; }
.on-dark .rule, .band-night .rule { border-color: var(--c-line-dark); }

/* 6. Components ------------------------------------------------------------ */

/* Buttons: one shape (pill), three variants. Min target 44px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: 0 var(--s-6); border-radius: 999px; border: 1px solid transparent;
  font: 600 var(--fs-label) / 1 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--c-gold); color: #fff; }
.btn--primary:hover { background: var(--c-ink); }
.on-dark .btn--primary, .hero .btn--primary { background: var(--c-gold-light); color: var(--c-night); }
.on-dark .btn--primary:hover, .hero .btn--primary:hover { background: var(--c-on-dark); }
.btn--outline { border-color: currentColor; background: transparent; }
.btn--outline:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.on-dark .btn--outline:hover, .hero .btn--outline:hover, .site-header .btn--outline:hover { background: var(--c-on-dark); color: var(--c-night); border-color: var(--c-on-dark); }
.btn--small { min-height: 2.75rem; padding: 0 var(--s-5); }       /* 44px tap target on touch */
@media (min-width: 768px) { .btn--small { min-height: 2.5rem; } }

/* Text link with arrow: underline draws in on hover */
.link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: 600 var(--fs-label) / 1.2 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase;
  padding-block: var(--s-2);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.link::after { content: '→'; font-size: 1.2em; letter-spacing: 0; transition: transform var(--dur) var(--ease); }
.link:hover { background-size: 100% 1px; }
.link:hover::after { transform: translateX(4px); }
.link { min-height: 2.75rem; }                                   /* 44px tap target on touch */
@media (min-width: 768px) { .link { min-height: 0; } }

/* Responsive image wrapper: fixed aspect, cover */
.media { position: relative; overflow: hidden; background: var(--c-stone); }
.media picture { display: contents; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--1x1 { aspect-ratio: 1; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--zoom img { transition: transform 1.2s var(--ease); }
a:hover .media--zoom img, .media--zoom:hover img { transform: scale(1.04); }

/* Header ------------------------------------------------------------------- */
.site-header {
  position: absolute; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  color: var(--c-on-dark);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page--light-top .site-header { color: var(--c-ink); }
.header-grid { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-5); }
.header-left { display: flex; align-items: center; gap: var(--s-6); }
.brand { display: block; color: inherit; }
.brand svg { display: block; height: 3.625rem; width: auto; }   /* 58 mobile */
.nav { display: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-4); }
.lang { display: none; }
.nav-toggle {
  position: relative; width: 2.75rem; height: 2.75rem; margin-left: -.625rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.nav-toggle span:not(.sr-only), .nav-toggle span:not(.sr-only)::before {
  position: absolute; left: .625rem; width: 1.5rem; height: 1.5px; background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle span:not(.sr-only) { top: calc(50% - 4px); }
.nav-toggle span:not(.sr-only)::before { content: ''; left: 0; top: 7px; }
.nav-open .nav-toggle span:not(.sr-only) { top: calc(50% - .75px); transform: rotate(45deg); }
.nav-open .nav-toggle span:not(.sr-only)::before { top: 0; transform: rotate(-90deg); }


@media (min-width: 768px) {
  .brand svg { height: 4.375rem; }    /* 70 tablet */
}
@media (min-width: 1200px) {
  .brand svg { height: 5.2rem; }      /* 83 desktop */
}
@media (min-width: 1024px) {
  .nav { display: flex; gap: var(--s-6); }
  .nav--right { margin-right: var(--s-3); }
  .nav a { position: relative; font: 500 var(--fs-small) / 1 var(--f-sans); padding-block: var(--s-2); opacity: .85; transition: opacity var(--dur) var(--ease); }
  .nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--dur) var(--ease); }
  .nav a:hover, .nav a[aria-current=page] { opacity: 1; }
  .nav a:hover::after, .nav a[aria-current=page]::after { right: 0; }
  .lang { display: flex; gap: var(--s-2); font: 600 var(--fs-label) / 1 var(--f-sans); letter-spacing: var(--ls-label); }
  .lang a { opacity: .7; } .lang a[aria-current=true] { opacity: 1; }
  .nav-toggle { display: none; }
}

/* Mobile menu */
.mobile-nav {
  position: fixed; inset: 0; z-index: 40; background: var(--c-night); color: var(--c-on-dark);
  padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6);
  opacity: 0; visibility: hidden; transform: translateY(-1rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-open { overflow: hidden; }
.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-open .site-header { position: fixed; color: var(--c-on-dark); }
.mobile-nav ol { list-style: none; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--c-line-dark); }
.mobile-nav li a { display: flex; justify-content: space-between; align-items: baseline; padding-block: var(--s-4); font: 300 var(--fs-h2) / 1 var(--f-serif); letter-spacing: -.03em; }
.mobile-nav li small { font: 600 var(--fs-label) / 1 var(--f-sans); letter-spacing: var(--ls-label); color: var(--c-gold-light); }
.mobile-nav__foot { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* Hero ---------------------------------------------------------------------- */
.hero { position: relative; z-index: 2; min-height: var(--hero-h); display: flex; align-items: flex-end; color: var(--c-on-dark); background: var(--c-night); isolation: isolate; }
.hero--sub { --hero-h: 72svh; }
@media (min-width: 1200px) { .hero--sub { --hero-h: 80svh; } }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero::before { /* scrim: bottom + left weighted, keeps text AA on any photo */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgb(10 18 15 / .82) 0%, rgb(10 18 15 / .25) 45%, rgb(10 18 15 / .15) 70%, rgb(10 18 15 / .45) 100%),
    linear-gradient(90deg, rgb(10 18 15 / .45) 0%, transparent 60%);
}
.hero__content { width: 100%; padding-block: calc(var(--header-h) + var(--s-7)) var(--s-7); display: grid; gap: var(--s-5); }
.hero__title { max-width: 14ch; }
.hero__lede { max-width: 26rem; color: var(--c-muted-dark); }
.hero__foot { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 1200px) {
  .hero__content { padding-bottom: var(--s-8); }
  .hero__foot { grid-template-columns: 1fr auto; }
}

/* Booking bar — light bar over the hero; one row on tablet+, stacked on mobile.
   Native date inputs are invisible overlays; the visible value is formatted by JS. */
.booking-bar {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 58rem;
  background: var(--c-paper); color: var(--c-ink);
}
.booking-bar__field {
  position: relative; min-width: 0; display: grid; gap: var(--s-1); align-content: center;
  padding: var(--s-4) var(--s-5); cursor: pointer; transition: background-color var(--dur) var(--ease);
}
.booking-bar__field + .booking-bar__field { border-left: 1px solid var(--c-line); }
.booking-bar__field:hover, .booking-bar__field:focus-within { background: var(--c-sand); }
.booking-bar__label { font: 600 var(--fs-label) / 1.2 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold); }
.booking-bar__value { font: 400 var(--fs-body) / 1.5 var(--f-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-bar__value.is-empty { color: var(--c-muted); }
.booking-bar__field--date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.booking-bar__field--date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.booking-bar__field--select select {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0 var(--s-5) 0 0; margin: 0; width: 100%;
  font: 400 var(--fs-body) / 1.5 var(--f-serif); color: inherit; cursor: pointer; min-width: 0;
}
.booking-bar__field--select::after {
  content: ''; position: absolute; right: var(--s-5); bottom: calc(var(--s-4) + .55em); width: .45rem; height: .45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none;
}
.booking-bar { position: relative; grid-template-columns: minmax(0, 1fr) !important; }
.booking-bar__field--date { grid-column: 1 / -1; text-align: left; border: 0; font: inherit; color: inherit; background: transparent; padding-right: calc(var(--s-5) * 2 + 1.25rem); }
.booking-bar__field.is-active { background: var(--c-sand); }
.booking-bar__icon { position: absolute; right: var(--s-5); bottom: calc(var(--s-4) + .2em); width: 1.25rem; height: 1.25rem; color: var(--c-gold); }
.booking-bar__field--select { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--c-line); }
.booking-bar__submit { grid-column: 1 / -1; display: flex; padding: 0 var(--s-3) var(--s-3); }
.booking-bar__submit .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; padding-block: var(--s-3); }
.booking-bar .btn--primary { background: var(--c-gold); color: #fff; }
.booking-bar .btn--primary:hover { background: var(--c-ink); color: #fff; }
/* Mobile: the hero booking bar is dark see-through glass with light text, so the hero video stays clearly visible */
@media (max-width: 767px) {
  .hero .booking-bar { background: rgb(0 0 0 / .22); color: var(--c-on-dark); border: 1px solid rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .hero .booking-bar__label, .hero .booking-bar__icon { color: var(--c-gold-light); }
  .hero .booking-bar__value.is-empty { color: rgb(255 255 255 / .8); }
  .hero .booking-bar__field--select { border-top-color: rgb(255 255 255 / .22); }
  .hero .booking-bar select { color: var(--c-on-dark); }
  .hero .booking-bar select option { color: var(--c-ink); }
  .hero .booking-bar__field:hover, .hero .booking-bar__field:focus-within, .hero .booking-bar__field.is-active { background: rgb(255 255 255 / .1); }
  .hero .booking-bar .btn--primary { background: var(--c-gold-light); color: var(--c-night); }
}
.booking-bar__note { margin-top: var(--s-3); color: var(--c-muted-dark); }
/* Funnel feedback: loading state while Mews opens, and a nudge on the CTA once dates are chosen */
.booking-bar .is-loading, [data-book].is-loading { cursor: progress; opacity: .85; }
.booking-bar .is-loading::after, [data-book].is-loading::after {
  content: ''; width: .9em; height: .9em; border: 1.5px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: book-spin .7s linear infinite;
}
@keyframes book-spin { to { transform: rotate(360deg); } }
.booking-bar .btn.is-ready { animation: book-ready .9s var(--ease) 1; }
@keyframes book-ready { 0%, 100% { box-shadow: 0 0 0 0 rgb(138 109 44 / 0); } 40% { box-shadow: 0 0 0 6px rgb(138 109 44 / .28); } }
@media (prefers-reduced-motion: reduce) { .booking-bar .is-loading::after, [data-book].is-loading::after, .booking-bar .btn.is-ready { animation: none; } }
.booking-bar__title { font: 300 var(--fs-h4) / 1.1 var(--f-serif); letter-spacing: -.015em; }
.booking-bar__trust { list-style: none; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); }
.booking-bar__trust li { display: flex; align-items: center; gap: var(--s-3); }
.booking-bar__trust .icon { flex: none; color: var(--c-gold); }
.booking-bar__trust a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--c-line); }
@media (min-width: 768px) {
  .booking-bar { grid-template-columns: minmax(0, 1.6fr) minmax(max-content, 1fr) auto !important; align-items: stretch; } /* guests never truncate ("6 gasten") */
  .booking-bar__field--date { grid-column: auto; }
  .booking-bar__field--select { grid-column: auto; border-top: 0; border-left: 1px solid var(--c-line) !important; }
  .booking-bar__submit { grid-column: auto; padding: var(--s-3); align-items: center; }
  .booking-bar__submit .btn { width: auto; min-height: 3.25rem; }
}

/* Date range picker ------------------------------------------------------- */
.datepicker {
  position: absolute; z-index: 60; top: calc(100% + var(--s-2)); left: 0; width: min(44rem, calc(100vw - 2 * var(--gutter)));
  background: var(--c-paper); color: var(--c-ink); padding: var(--s-6); box-shadow: 0 24px 60px rgb(10 18 15 / .28);
  opacity: 0; transform: translateY(-.5rem); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.datepicker.is-open { opacity: 1; transform: none; }
.datepicker__head { position: absolute; inset: var(--s-6) var(--s-6) auto; display: flex; justify-content: space-between; pointer-events: none; }
.datepicker__nav {
  pointer-events: auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; background: none;
  font-size: 1.125rem; color: var(--c-ink); cursor: pointer; transition: color var(--dur) var(--ease);
}
.datepicker__nav:hover { color: var(--c-gold); }
.datepicker__nav:disabled { opacity: .25; cursor: default; }
.datepicker__months { display: grid; gap: var(--s-7); }
.datepicker__title { padding-inline: var(--s-7); text-align: center; font: 400 var(--fs-h4) / 2.5rem var(--f-serif); letter-spacing: -.01em; margin-bottom: var(--s-4); text-transform: capitalize; }
.datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.datepicker__wd { text-align: center; padding-bottom: var(--s-3); font: 600 var(--fs-label) / 1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.datepicker__day {
  position: relative; aspect-ratio: 1; min-height: 2.75rem; border: 0; padding: 0; background: none; cursor: pointer;
  font: 500 var(--fs-small) / 1 var(--f-sans); color: var(--c-ink); font-variant-numeric: tabular-nums;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.datepicker__day:hover:not(:disabled) { background: var(--c-sand); }
.datepicker__day.is-today::after { content: ''; position: absolute; left: 50%; bottom: 22%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c-gold); }
.datepicker__day.is-past { color: rgb(29 26 22 / .25); cursor: default; }
.datepicker__day.is-range { background: var(--c-sand); }
.datepicker__day.is-range.is-preview { background: rgb(235 231 222 / .7); }
.datepicker__day.is-start, .datepicker__day.is-end { background: var(--c-night) !important; color: var(--c-on-dark); }
.datepicker__day.is-end.is-preview { background: var(--c-gold) !important; color: #fff; }
.datepicker__day.is-start::after, .datepicker__day.is-end::after { background: var(--c-gold-light); }
.datepicker__day:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -2px; }
.datepicker__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.datepicker__summary { font-size: var(--fs-small); color: var(--c-muted); }
.datepicker__summary strong { font: 400 var(--fs-body) / 1 var(--f-serif); color: var(--c-ink); }
.datepicker__actions { display: flex; align-items: center; gap: var(--s-5); }
.datepicker__done:disabled { background: var(--c-stone); color: var(--c-muted); cursor: default; }
@media (min-width: 768px) { .datepicker__months { grid-template-columns: 1fr 1fr; } }

/* Mobile: bottom sheet */
.datepicker.is-sheet {
  position: fixed; z-index: 70; inset: auto 0 0; top: auto; width: 100%; padding: var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
  max-height: 88svh; overflow: auto; transform: translateY(100%); transition: transform .35s var(--ease), opacity .2s;
}
.datepicker.is-sheet.is-open { transform: none; }
.datepicker.is-sheet::before { content: ''; display: block; width: 2.5rem; height: 3px; margin: 0 auto var(--s-4); background: var(--c-line); border-radius: 2px; }
.datepicker.is-sheet .datepicker__head { inset: calc(var(--s-5) + 1.25rem) var(--gutter) auto; }
.datepicker.is-sheet .datepicker__done { flex: 1; }
.datepicker-backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(10 18 15 / .5); }
.datepicker-open { overflow: hidden; }

/* Booking card (room detail): light, stacked, sticky on desktop */
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lede' 'book' 'details'; gap: var(--s-7); align-items: start; }
.room-layout__lede { grid-area: lede; }
.room-layout__book { grid-area: book; }
.room-layout__details { grid-area: details; }
.book-card { position: relative; z-index: 5; background: var(--c-sand); padding: var(--s-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.book-card__specs { display: grid; gap: 0; }
.book-card__specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.book-card__specs dt { flex: none; }
.book-card__specs dd { min-width: 0; overflow-wrap: anywhere;  margin: 0; text-align: right; font: 400 var(--fs-body) / 1.4 var(--f-serif); }
.booking-bar--card { grid-template-columns: minmax(0, 1fr) !important; max-width: none; border: 1px solid var(--c-line); }
.booking-bar--card .booking-bar__field--date { grid-column: 1 / -1 !important; }
.booking-bar--card .booking-bar__field--select { grid-column: 1 / -1 !important; border-left: 0 !important; border-top: 1px solid var(--c-line); }
.booking-bar--card .booking-bar__submit { grid-column: 1 / -1 !important; padding: 0 var(--s-3) var(--s-3); }
.booking-bar--card .booking-bar__submit .btn { width: 100%; }
.book-card .booking-bar__note { color: var(--c-muted); }
@media (min-width: 1200px) {
  .room-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-areas: 'lede book' 'details book'; gap: var(--s-7) var(--s-9); }
  .room-layout__book { align-self: start; }
  .book-card { position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: var(--s-6); }
}

/* Sticky mobile booking button */
.mobile-book {
  position: fixed; inset: auto var(--s-4) var(--s-4); z-index: 45; display: flex;
  transform: translateY(calc(100% + var(--s-6))); transition: transform var(--dur) var(--ease);
}
.mobile-book .btn { width: 100%; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.show-mobile-book:not(.footer-in-view):not(.form-in-view) .mobile-book { transform: none; }
@media (min-width: 768px) { .mobile-book { display: none; } }

/* Statement: label, big serif sentence, rule, two columns */
.statement { display: grid; gap: var(--stack); }
.statement__text { max-width: 22ch; }
.statement__text.h3 { max-width: 30ch; }
.statement__art { margin: 0; max-width: 34rem; }
.statement__art img { width: 100%; height: auto; mix-blend-mode: multiply; }
@media (min-width: 768px) { .statement__art { max-width: 24rem; justify-self: end; } } /* tablet: smaller, offset right */
@media (min-width: 1200px) {
  /* label + statement left, sketch right; rule and columns span the full width */
  .statement--art { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); }
  .statement--art > .label, .statement--art > .statement__text { grid-column: 1; }
  .statement--art > .statement__art { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: 100%; max-width: 34rem; }
  .statement--art > .statement__cols { grid-column: 1 / -1; }
  /* split: serif sentence left, ruled body copy bottom-right */
  .statement--split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--s-8); align-items: end; }
}
.statement__cols { display: grid; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.on-dark .statement__cols, .band-night .statement__cols { border-color: var(--c-line-dark); }
@media (min-width: 768px) { .statement__cols { grid-template-columns: 1fr auto; align-items: end; } }

/* Room cards ---------------------------------------------------------------- */
.room-card { display: grid; gap: var(--s-4); align-content: start; }
/* Card crops sit slightly above centre: keeps views (e.g. the church tower) and headboards in frame */
.room-card .media img { object-position: 50% 28%; }
/* Focal point for cropped images (x-img focus="top|bottom") — no inline styles under CSP */
.media--focus-top img { object-position: 50% 15%; }
.media--focus-bottom img { object-position: 50% 62%; }
@media (min-width: 768px) { .media--focus-bottom img { object-position: 50% 85%; } }
.room-card__meta { display: grid; gap: var(--s-2); }
.room-card__specs { color: var(--c-muted); }
.rooms-feature { display: grid; gap: var(--s-7) var(--grid-gap); }
/* < 1200: big card, then the other suites as compact ruled rows (thumbnail + text) — 9 full cards would be a 3,500px scroll */
@media (max-width: 1199px) {
  .rooms-feature { row-gap: 0; }
  .rooms-feature > :first-child { margin-bottom: var(--s-6); }
  .rooms-feature > :not(:first-child) {
    grid-template-columns: clamp(5.5rem, 27vw, 7rem) minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; gap: var(--s-2) var(--s-4);
    padding-block: var(--s-4); border-top: 1px solid var(--c-line);
  }
  .rooms-feature > :not(:first-child) .media { grid-row: 1 / -1; aspect-ratio: 1; align-self: start; }
  .rooms-feature > :not(:first-child) .room-card__meta { gap: var(--s-1); }
  .rooms-feature > :last-child { border-bottom: 1px solid var(--c-line); }
}
/* Room detail "other suites" on mobile: the same compact rows instead of three full cards */
@media (max-width: 767px) {
  .rooms-others { row-gap: 0; }
  .rooms-others > .room-card {
    grid-template-columns: clamp(5.5rem, 27vw, 7rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--s-2) var(--s-4);
    padding-block: var(--s-4); border-top: 1px solid var(--c-line);
  }
  .rooms-others > .room-card .media { grid-row: 1 / -1; aspect-ratio: 1; }
  .rooms-others > .room-card .room-card__meta { gap: var(--s-1); }
  .rooms-others > .room-card:last-child { border-bottom: 1px solid var(--c-line); }
}
@media (min-width: 768px) {
  .rooms-feature { grid-template-columns: 1fr 1fr; }
  .rooms-feature > :first-child { grid-column: 1 / -1; }
  .rooms-feature > :first-child .media { aspect-ratio: 16 / 9; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .rooms-feature { column-gap: var(--s-6); }
  .rooms-feature > :first-child .media { aspect-ratio: 2 / 1; }
  .rooms-feature > :not(:first-child) { grid-template-columns: 9rem minmax(0, 1fr); }
  .rooms-feature > :nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--c-line); } /* close both columns */
}
@media (min-width: 1200px) {
  /* big card left (2×2), the other four types as a 2×2 grid on the right */
  /* Rows (subgrid): image · title+specs · tagline · spacer · image · title+specs · tagline.
     The big card's image fills rows 1–5, so its text lines up with the second row of small cards. */
  .rooms-feature { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto var(--s-6) auto auto auto; gap: 0 var(--grid-gap); }
  .rooms-feature > .room-card { grid-template-rows: subgrid; row-gap: 0; grid-row: span 3; }
  .rooms-feature > .room-card .room-card__meta { padding-top: var(--s-4); align-content: start; }
  .rooms-feature > .room-card > .small { padding-top: var(--s-3); }
  .rooms-feature > :first-child { grid-column: 1 / 3; grid-row: 1 / -1; }
  .rooms-feature > :first-child .media { grid-row: 1 / 6; aspect-ratio: auto; height: 100%; }
  .rooms-feature > :nth-child(2), .rooms-feature > :nth-child(3) { grid-row: 1 / 4; }
  .rooms-feature > :nth-child(4), .rooms-feature > :nth-child(5) { grid-row: 5 / 8; }
  /* 6th suite onwards: a quartet row under the feature block, columns continue the 2×2 grid lines.
     Own flow (no subgrid), so a two-line title never opens gaps in its neighbours. */
  .rooms-feature > :nth-child(n+6) { grid-row: 8; grid-template-rows: none; align-content: start; margin-top: var(--s-7); }
  .rooms-feature > :nth-child(n+10) { grid-row: auto; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .grid-3 > :nth-child(3):last-child { display: none; }
}

/* Rooms overview: with an odd count the first room becomes a wide feature card */
@media (min-width: 768px) {
  .rooms-list--odd > :first-child { grid-column: 1 / -1; }
  .rooms-list--odd > :first-child .media { aspect-ratio: 21 / 9; }
}
/* Desktop: a count divisible by 3 (e.g. 9 suites) becomes a calm 3×3 — no lone feature card, a third less scroll */
@media (min-width: 1200px) {
  .rooms-list--three { grid-template-columns: repeat(3, 1fr); }
  .rooms-list--three > :first-child { grid-column: auto; }
  .rooms-list--three > :first-child .media { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) { .rooms-list.row-gap-lg { row-gap: var(--s-7); } }

/* Room list (index list): numbered ruled rows */
.index-list { list-style: none; padding: 0; border-top: 1px solid var(--c-line); }
.index-list li { border-bottom: 1px solid var(--c-line); }
.index-list a, .index-list .row {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-2) var(--s-4); align-items: baseline; padding-block: var(--s-5);
  transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.index-list .meta { grid-column: 2; }
.index-list__main > * + * { margin-top: var(--s-2); }
.index-list__main .small { max-width: 40rem; display: block; }
.index-list a:hover { padding-inline: var(--s-3); background: rgb(29 26 22 / .03); }
@media (min-width: 768px) {
  .index-list a, .index-list .row { grid-template-columns: 4rem 1fr auto; }
  .index-list .meta { grid-column: auto; text-align: right; }
}
.on-dark .index-list, .on-dark .index-list li { border-color: var(--c-line-dark); }

/* Split: image + text, 58/42 on desktop */
.split { display: grid; }
.split__media { min-height: 22rem; }
@media (max-width: 1199px) {
  .split__media { min-height: 0; }
  .split__media .media { aspect-ratio: 3 / 2; height: auto; }
}
@media (min-width: 768px) and (max-width: 1199px) { .split__media .media { aspect-ratio: 16 / 9; } } /* tablet: calmer image height */
.split__media .media { height: 100%; }
.split__text { padding: var(--section-y) var(--gutter); display: grid; gap: var(--s-5); align-content: center; }
@media (min-width: 1200px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 0; height: clamp(26rem, 38vw, 34rem); } /* subtle: a quiet pause, not a second hero */
  .split--reverse { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .split__text { padding: var(--s-7) var(--s-8); max-width: 34rem; }
}

/* Pillars / USPs */
.pillars { display: grid; gap: var(--s-6) var(--grid-gap); }
.pillar__icon { color: var(--c-gold); }
.pillar__icon .icon { width: 2.5rem; height: 2.5rem; stroke-width: 1; }
.pillar { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--c-line); align-content: start; }
.on-dark .pillar { border-color: var(--c-line-dark); }
/* mobile: icon beside title + text, so four USPs stay compact */
.pillars .pillar:has(> .pillar__icon) { grid-template-columns: auto 1fr; column-gap: var(--s-4); row-gap: var(--s-2); padding-top: var(--s-4); }
.pillars .pillar > .pillar__icon { grid-row: span 2; }
.pillars { row-gap: var(--s-5); }
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-6); }
  .pillars .pillar:has(> .pillar__icon) { grid-template-columns: none; row-gap: var(--s-3); padding-top: var(--s-5); }
  .pillars .pillar > .pillar__icon { grid-row: auto; }
}
@media (min-width: 1200px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

/* Personal host note */
.host { display: grid; gap: var(--s-6); align-items: center; }
.host .lede { max-width: var(--measure); }
.host__sign { font: italic 300 var(--fs-h3) / 1 var(--f-serif); color: var(--c-gold); }
@media (min-width: 768px) { .host { grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: start; } }
@media (min-width: 1200px) { .host { grid-template-columns: 5fr 6fr; gap: var(--s-9); align-items: center; } }

/* Reviews */
.score { display: flex; align-items: baseline; gap: var(--s-4); }
.score { flex-wrap: wrap; row-gap: var(--s-2); }
.score__value { font: 300 var(--fs-h1) / 1 var(--f-serif); letter-spacing: -.04em; }
.score__label { display: grid; gap: var(--s-1); }
.reviews { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--c-paper); align-content: space-between; }
.band-paper .review { background: var(--c-sand); }
.quote { font-size: var(--fs-h4); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; }

/* Review scores (real Booking.com category scores, no invented quotes) */
.scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.scores__item { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--c-sand); }
.scores__icon { color: var(--c-gold); margin-bottom: var(--s-2); }
.scores__icon .icon { width: 2.25rem; height: 2.25rem; stroke-width: 1; }
.scores__value { font: 300 var(--fs-h2) / 1 var(--f-serif); letter-spacing: -.03em; }
.scores__item:first-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .scores { grid-template-columns: repeat(5, 1fr); } .scores__item:first-child { grid-column: auto; } }

/* Room detail: the tall sticky booking card must not stretch the lede row — amenities follow the lede directly */
@media (min-width: 1200px) { .room-layout { grid-template-rows: auto 1fr; } .room-layout__details { align-self: start; } }

/* Gallery (masonry-ish via grid spans) */
.gallery { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, 1fr); }
.gallery a { display: block; cursor: zoom-in; }
.gallery a:first-child { grid-column: span 2; }
/* 3 items: both small tiles go wide (desktop); 4 items: last tile goes wide — no empty cells */
@media (min-width: 1200px) {
  .gallery a:nth-child(2):nth-last-child(2), .gallery a:nth-child(3):last-child { grid-column: span 2; }
  .gallery a:nth-child(2):nth-last-child(2) .media, .gallery a:nth-child(3):last-child .media { aspect-ratio: 2 / 1; }
}
.gallery a:nth-child(4):last-child { grid-column: span 2; }
.gallery a:nth-child(4):last-child .media { aspect-ratio: 2 / 1; }
@media (min-width: 1200px) {
  .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
  .gallery a:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery a:first-child .media { height: 100%; aspect-ratio: auto; }
}
/* 1 item: one wide image. 2 items: an even pair — never a lone tile beside an empty cell */
.gallery a:only-child { grid-column: 1 / -1; grid-row: auto; }
.gallery a:only-child .media { aspect-ratio: 16 / 9; height: auto; }
.gallery a:first-child:nth-last-child(2), .gallery a:nth-child(2):last-child { grid-column: span 1; grid-row: auto; }
.gallery a:first-child:nth-last-child(2) .media, .gallery a:nth-child(2):last-child .media { aspect-ratio: 4 / 5; height: auto; }
@media (min-width: 1200px) {
  .gallery:has(> a:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .gallery a:first-child:nth-last-child(2) .media, .gallery a:nth-child(2):last-child .media { aspect-ratio: 1; }
}

/* Image duo: two offset images with captions */
.duo { display: grid; gap: var(--s-7) var(--grid-gap); }
.duo__item { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 768px) {
  .duo { grid-template-columns: 5fr 4fr; align-items: start; }
  .duo__item:nth-child(2) { margin-top: var(--s-10); }
}

/* Amenities list */
.amenities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-5); }
.amenities li { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--fs-small); }
.amenities li::before { content: ''; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--c-gold); transform: translateY(-.1em); }
@media (min-width: 1200px) { .amenities { grid-template-columns: repeat(3, 1fr); } }

/* Notice (e.g. no lift) */
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); background: var(--c-sand); font-size: var(--fs-small); }
.notice .icon { color: var(--c-gold); margin-top: .1em; }

/* Spec row (room detail) */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.specs > div { background: var(--c-paper); padding: var(--s-4); display: grid; gap: var(--s-1); }
.specs dd { font: 300 var(--fs-h4) / 1.1 var(--f-serif); }
@media (min-width: 768px) { .specs { grid-template-columns: repeat(4, 1fr); } }

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--c-line); }
.accordion details { border-bottom: 1px solid var(--c-line); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-5); align-items: baseline;
  padding-block: var(--s-5); font: 400 var(--fs-h4) / 1.25 var(--f-serif); letter-spacing: -.01em;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font: 300 1.5rem / 1 var(--f-sans); color: var(--c-gold); transition: transform var(--dur) var(--ease); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .body { padding-bottom: var(--s-5); max-width: 44rem; }
.accordion summary { padding-block: var(--s-4); }                 /* mobile: tighter rows for long lists */
@media (min-width: 768px) { .accordion summary { padding-block: var(--s-5); } }

/* Image band with CTA (pre-footer) */
.cta-band { position: relative; min-height: 70svh; display: grid; place-items: center; text-align: center; color: var(--c-on-dark); isolation: isolate; overflow: hidden; }
.cta-band .hero__media { inset: -10% 0; }
.cta-band .band-text { max-width: 34rem; margin-top: var(--s-4); color: var(--c-on-dark); }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(10 18 15 / calc(.55 * var(--band-scrim))); }
.cta-band--left { min-height: 80svh; place-items: end start; text-align: left; }
.cta-band--left::before { background: linear-gradient(90deg, rgb(10 18 15 / calc(.7 * var(--band-scrim))) 0%, rgb(10 18 15 / calc(.35 * var(--band-scrim))) 45%, transparent 70%), linear-gradient(0deg, rgb(10 18 15 / calc(.85 * var(--band-scrim))) 0%, rgb(10 18 15 / calc(.35 * var(--band-scrim))) 55%, rgb(10 18 15 / calc(.2 * var(--band-scrim))) 100%); } /* text side (left) gets extra contrast */
.cta-band--left .wrap { padding-block: var(--s-8); }
.cta-band__inner { display: grid; gap: var(--s-5); justify-items: center; padding: var(--section-y) var(--gutter); max-width: 56rem; }

/* Booking teaser: compact closing CTA — image + card with benefits and booking bar */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-paper); }
.teaser__media { min-height: 16rem; }
@media (max-width: 1199px) {
  .teaser__media { min-height: 0; }
  .teaser__media .media { aspect-ratio: 16 / 9; height: auto; }
}
.teaser__media .media { height: 100%; }
.teaser__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: center; padding: var(--s-7) var(--s-5); }
.teaser__perks { list-style: none; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-small); }
.teaser__perks li { display: flex; align-items: center; gap: var(--s-3); }
.teaser__perks .icon { color: var(--c-gold); }
.teaser .booking-bar { max-width: none; border: 1px solid var(--c-line); }
@media (min-width: 768px) { /* narrow teaser column: dates + guests side by side, button on its own full-width row */
  .teaser .booking-bar { grid-template-columns: minmax(0, 1fr) minmax(max-content, auto) !important; }
  .teaser .booking-bar__submit { grid-column: 1 / -1; padding: 0 var(--s-3) var(--s-3); }
  .teaser .booking-bar__submit .btn { width: 100%; }
}
@media (min-width: 768px) { .teaser__body { padding: var(--s-8); } }
@media (min-width: 1200px) {
  .teaser { grid-template-columns: 5fr 7fr; min-height: 30rem; }
  .teaser__media { min-height: 0; }
}

/* Long-form intro (SEO copy) in two columns on desktop */
.seo-intro { display: grid; gap: var(--s-5); }
.seo-intro__text { display: grid; gap: var(--s-5); color: var(--c-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.seo-intro__text p { max-width: var(--measure); }
.seo-intro__text strong, .body strong { color: var(--c-ink); font-weight: 600; }
@media (min-width: 768px) { .seo-intro__text { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-8); } }
@media (min-width: 1200px) { .seo-intro { grid-template-columns: 3fr 9fr; } }

/* Contact & forms */
.contact-list { display: grid; gap: var(--s-5); }
.contact-list dt { margin-bottom: var(--s-1); }
@media (min-width: 768px) { .contact-list { grid-template-columns: auto auto; justify-content: start; gap: var(--s-5) var(--s-8); } }
.map-card { position: relative; margin: 0; overflow: hidden; background: var(--c-stone); }
.map-card__link { display: block; position: relative; aspect-ratio: 4 / 3; }
.map-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.map-card__link:hover img { transform: scale(1.03); }
.map-card__pin { position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; margin: -2.75rem 0 0 -1.375rem; display: grid; place-items: center;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-night); color: var(--c-gold-light); box-shadow: 0 0 0 6px rgb(18 32 27 / .15); }
.map-card__pin .icon { transform: rotate(45deg); width: 1.25rem; height: 1.25rem; }
.map-card__label { position: absolute; left: 50%; top: calc(50% + var(--s-3)); transform: translateX(-50%); white-space: nowrap; padding: var(--s-2) var(--s-3); background: var(--c-paper); color: var(--c-ink); font-size: var(--fs-small); }
.map-card__label strong { font-weight: 600; margin-right: var(--s-1); }
.map-card__cta { position: absolute; right: var(--s-4); bottom: var(--s-4); }
.map-card__credit { position: absolute; left: var(--s-2); bottom: var(--s-2); font-size: var(--fs-label); color: var(--c-muted); background: rgb(245 242 236 / .8); padding: 0 var(--s-1); }
.map-card__credit a { position: relative; }
.map-card__credit a::after { content: ''; position: absolute; inset: -.875rem -.25rem; } /* 44px hit area for the tiny credit link */
@media (min-width: 768px) { .map-card__link { aspect-ratio: 16 / 9; } }

/* Contact: details + map side by side on desktop only (a 2-col tablet split squeezes the serif intro) */
.contact-grid, .route { display: grid; gap: var(--stack); }
.route__info { display: grid; gap: var(--s-6) var(--grid-gap); }
@media (min-width: 768px) { .route__info { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .route { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
  .route__info { grid-template-columns: none; align-content: center; }
  /* the map fills the full row height next to the text */
  :is(.contact-grid, .route) > .map-card { align-self: stretch; }
  :is(.contact-grid, .route) > .map-card .map-card__link { height: 100%; min-height: 24rem; aspect-ratio: auto; }
}

/* Legal pages: one calm, centred reading column */
.legal { max-width: calc(46rem + 2 * var(--gutter)); }
.legal .body { max-width: none; }
.legal__head { display: grid; gap: var(--s-3); padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--c-line); }

/* Prose (privacy etc.) */
.prose { max-width: none; }
.prose h2 { font: 400 var(--fs-h4) / 1.2 var(--f-serif); margin: var(--s-7) 0 var(--s-3); color: var(--c-ink); }
.prose h2:first-child { margin-top: 0; }
.prose, .legal__head { overflow-wrap: break-word; hyphens: auto; } /* long Dutch compounds (Gegevensoverdraagbaarheid) at 320px */
.prose p, .prose li { color: var(--c-muted); }
.prose ul { padding-left: 1.25em; display: grid; gap: var(--s-2); }
.prose li::marker { color: var(--c-gold); }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose .prose-max { max-width: none; }
.prose a { color: var(--c-ink); }
.prose p, .prose ul { margin-bottom: var(--s-4); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Footer -------------------------------------------------------------------- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.site-footer { position: relative; background: var(--c-night); color: var(--c-on-dark); overflow: hidden; isolation: isolate; }
.footer-ornament { position: absolute; z-index: -1; top: var(--s-7); right: var(--gutter); width: 14rem; display: none; color: rgb(201 169 95 / .55); pointer-events: none; }
.footer-ornament svg { width: 100%; height: auto; display: block; }

.footer-brand { position: relative; display: grid; justify-items: center; gap: var(--s-5); text-align: center; padding-block: var(--section-y) var(--s-8); }
.footer-logo { color: var(--c-on-dark); }
.footer-logo svg { display: block; width: auto; height: 6.5rem; }            /* 104 mobile */
.footer-tagline { font: 300 var(--fs-h4) / 1.2 var(--f-serif); color: var(--c-muted-dark); }

.footer-usps { list-style: none; padding: var(--s-7) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4);
  border-block: 1px solid var(--c-line-dark); font-size: var(--fs-small); }
.footer-usps li { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.footer-usps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.footer-usps__icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-gold-light); color: var(--c-night); }
.footer-usps__icon .icon { width: 1.5rem; height: 1.5rem; }

.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); padding-block: var(--s-8); }
.footer-cols__title { font: 400 var(--fs-h4) / 1.2 var(--f-serif); margin-bottom: var(--s-4); }
.footer-cols ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer-cols a { color: var(--c-muted-dark); transition: color var(--dur) var(--ease); }
.footer-cols a:hover { color: var(--c-gold-light); }
.footer-contact { grid-column: 1 / -1; display: grid; gap: var(--s-3); align-content: start; }
.footer-contact .footer-cols__title { margin-bottom: var(--s-1); }
.footer-contact__meta { font-size: var(--fs-small); color: var(--c-muted-dark); }
a.footer-contact__line { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--c-gold-light); width: fit-content; }
a.footer-contact__line:hover { color: var(--c-on-dark); }
.footer-contact__address { font-style: normal; color: var(--c-muted-dark); margin-top: var(--s-3); line-height: 1.7; }
.footer-contact__address strong { color: var(--c-on-dark); font-weight: 600; }

/* mobile: every footer link is a 44px tap target; rows sit flush instead of using gaps */
.footer-cols ul { gap: 0; }
.footer-cols li a, a.footer-contact__line, .footer-legal nav a, .to-top { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-contact { gap: var(--s-1); }
@media (min-width: 768px) {
  .footer-cols ul { gap: var(--s-3); }
  .footer-cols li a, a.footer-contact__line, .footer-legal nav a, .to-top { min-height: 0; }
  .footer-contact { gap: var(--s-3); }
}

.footer-sisters { display: grid; gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--c-line-dark); }
.footer-sisters .footer-cols__title { margin: 0; }
.footer-sisters ul { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.footer-sisters a { display: grid; gap: var(--s-1); min-height: 2.75rem; }
.footer-sisters__name { font-family: var(--f-serif); font-size: var(--fs-h3); line-height: 1.1; }
.footer-sisters__name::after { content: ' →'; font-family: var(--f-sans); font-size: .6em; color: var(--c-gold-light); transition: margin-left var(--dur) var(--ease); }
.footer-sisters a:hover .footer-sisters__name::after { margin-left: var(--s-2); }
.footer-sisters__meta { font-size: var(--fs-small); color: var(--c-muted-dark); }
@media (min-width: 768px) { .footer-sisters { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-8); } }
.footer-legal { background: rgb(0 0 0 / .22); font-size: var(--fs-small); color: var(--c-muted-dark); }
.footer-legal__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.footer-legal a:hover, .footer-legal a[aria-current] { color: var(--c-on-dark); }
.to-top { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-label) / 1 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-dark); }
.to-top .icon { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.to-top:hover .icon { transform: translateY(-3px); }

@media (min-width: 768px) {
  .footer-logo svg { height: 7.5rem; }                                       /* 120 tablet */
  .footer-usps { grid-template-columns: repeat(4, 1fr); }
  .footer-usps li:last-child:nth-child(odd) { grid-column: auto; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }               /* tablet: balanced 2×2 */
  .footer-contact { grid-column: auto; }
}
@media (min-width: 1200px) {
  .footer-logo svg { height: 8.5rem; }                                       /* 136 desktop */
  .footer-cols { grid-template-columns: repeat(3, 1fr) 1.3fr; gap: var(--s-8); }
  .footer-contact { grid-column: auto; }
  .footer-ornament { display: block; }
}

/* Lightbox */
.lightbox { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 18 15 / .96); color: var(--c-on-dark); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100svh - 8rem); object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 1px solid var(--c-line-dark); color: inherit; width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer; font-size: 1.25rem; }
.lightbox__close { top: var(--s-4); right: var(--s-4); }
.lightbox__prev { left: var(--s-4); top: 50%; }
.lightbox__next { right: var(--s-4); top: 50%; }
.lightbox__count { position: absolute; bottom: var(--s-5); left: 50%; transform: translateX(-50%); }

/* Breakfast walk (partials/breakfast-walk): short text + hand-drawn map on night */
.breakfast { display: grid; gap: var(--s-7) var(--grid-gap); align-items: center; }
.breakfast__walk { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-4); border-block: 1px solid var(--c-line-dark); }
.breakfast__walk .icon { width: 1.5rem; height: 1.5rem; color: var(--c-gold-light); flex: none; }
.breakfast__walk strong { font-family: var(--f-serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1; margin-right: var(--s-1); }
.breakfast__map { margin: 0; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 55%, transparent 100%); } /* edges fade into the night band */
@media (max-width: 767px) { .breakfast__map { margin-inline: calc(var(--gutter) * -1); } } /* full-bleed: labels stay legible */
@media (min-width: 768px) { .breakfast { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); } }
.walk-map { display: block; width: 100%; height: auto; }
.walk-map .wm-blocks path { fill: rgb(243 239 230 / .03); stroke: var(--c-on-dark); stroke-width: .3; stroke-opacity: .28; }
.walk-map .wm-saints path { fill: var(--c-gold-light); fill-opacity: .45; stroke: var(--c-gold-light); stroke-width: .6; }
.walk-map .wm-church { fill: url(#wm-hatch); stroke: var(--c-on-dark); stroke-width: .5; stroke-opacity: .7; }
.walk-map .wm-hatch { stroke: var(--c-gold-light); stroke-width: .4; stroke-opacity: .6; }
.walk-map .wm-route { fill: none; stroke: var(--c-gold-light); stroke-width: 2.2; stroke-dasharray: .1 4.2; stroke-linecap: round; }
.walk-map text { paint-order: stroke; stroke: var(--c-night); stroke-linejoin: round; }
.walk-map .wm-street { font: italic 5.5px var(--f-serif); fill: var(--c-on-dark); fill-opacity: .6; stroke-width: 1.5px; }
.walk-map .wm-place { font: italic 7.5px var(--f-serif); fill: var(--c-on-dark); stroke-width: 2px; }
.walk-map .wm-brand { font: 600 4.2px var(--f-sans); letter-spacing: .14em; fill: var(--c-gold-light); stroke-width: 2px; }
.walk-map .wm-name { font: 9px var(--f-serif); fill: var(--c-on-dark); stroke-width: 2.5px; }
.walk-map .wm-ring { fill: var(--c-night); stroke: var(--c-gold-light); stroke-width: .7; }
.walk-map .wm-dot { fill: var(--c-gold-light); }
.walk-map .wm-scale path, .walk-map .wm-north path { fill: none; stroke: var(--c-on-dark); stroke-width: .6; stroke-opacity: .7; }
.walk-map .wm-scale text, .walk-map .wm-north text { font: 600 4px var(--f-sans); fill: var(--c-on-dark); stroke-width: 0; }
@media (max-width: 767px) { .walk-map .wm-brand { font-size: 4.8px; } .walk-map .wm-street { font-size: 6.5px; } }

/* Meetings page (optional, pages/meetings) */
.spaces { display: grid; gap: var(--s-7) var(--grid-gap); }
.space { display: grid; gap: var(--s-4); align-content: start; }
.space__body { display: grid; gap: var(--s-2); }
.space__cap { display: inline-flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-label) / 1.2 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold); }
.space__cap .icon { width: 1.1rem; height: 1.1rem; }
@media (min-width: 768px) { .spaces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.meet-cta { display: grid; gap: var(--s-6); align-items: end; }
.meet-cta__actions { display: grid; gap: var(--s-4); justify-items: start; }
@media (min-width: 1024px) { .meet-cta { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .meet-cta__actions { justify-items: end; } }

/* Packages: equal cards (head / items / foot rows line up via subgrid), "op maat" full width on dark */
.packages { display: grid; gap: var(--grid-gap); }
.package { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-5); padding: var(--s-6) var(--s-5); background: var(--c-sand); }
.package__head { display: grid; gap: var(--s-2); align-content: start; }
.package__head .label { margin-bottom: var(--s-1); }
.package__items { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.package__items li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--s-3); align-items: start; }
.package__items .icon { width: 1rem; height: 1rem; margin-top: .2em; color: var(--c-gold); }
.package__foot { display: grid; gap: var(--s-4); align-content: end; padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.package__price { font: 600 var(--fs-label) / 1.2 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.package__foot .btn { width: 100%; }
.package--custom { background: var(--c-night); }
.package--custom .package__items, .package--custom .package__foot { border-color: var(--c-line-dark); }
.package--custom .package__items .icon, .package--custom .space__cap { color: var(--c-gold-light); }
.package--custom .package__price { color: var(--c-muted-dark); }
@media (min-width: 768px) {
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package { padding: var(--s-6); }
  .package:not(.package--custom) { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s-5); }
  .package--custom { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; column-gap: var(--s-7); padding: var(--s-7) var(--s-6); }
  .package--custom .package__items { padding-top: 0; border-top: 0; }
  .package--custom .package__foot { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; column-gap: var(--s-6); }
  .package--custom .package__foot .btn { width: auto; justify-self: end; }
}
@media (min-width: 1200px) {
  .packages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .package--custom { grid-template-columns: 4fr 5fr 3fr; column-gap: var(--s-8); padding: var(--s-8); align-items: start; }
  .package--custom .package__foot { grid-column: auto; grid-template-columns: none; align-content: start; align-self: stretch; padding: 0 0 0 var(--s-6); border-top: 0; border-left: 1px solid var(--c-line-dark); }
  .package--custom .package__foot .btn { width: 100%; justify-self: stretch; }
}

/* Modal request form (partials/inquiry-modal) */
.modal { width: min(44rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 2 * var(--s-5)); padding: 0; border: 0; background: var(--c-paper); color: var(--c-ink); box-shadow: 0 30px 80px rgb(0 0 0 / .35); overflow: auto; }
.modal::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }
.modal__inner { position: relative; padding: var(--s-7) var(--s-6) var(--s-6); }
.modal__state { display: grid; gap: var(--s-4); }
.modal__state[hidden] { display: none; }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 2.75rem; height: 2.75rem; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--c-ink); cursor: pointer; }
.inquiry { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.inquiry__grid { display: grid; gap: var(--s-3) var(--s-4); }
@media (min-width: 640px) { .inquiry__grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field { display: grid; gap: var(--s-1); }
.field > span { font: 600 var(--fs-label) / 1.2 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold); }
.field input, .field select, .field textarea { width: 100%; min-height: 2.9rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); background: #fff; font: inherit; color: inherit; border-radius: 0; }
.field textarea { resize: vertical; }
.field :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.field .is-invalid, .field input.is-invalid, .field textarea.is-invalid { border-color: #b3261e; }
.inquiry__error { color: #b3261e; }
.inquiry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 639px) { .modal { width: 100vw; max-width: 100vw; max-height: 100svh; height: 100svh; margin: 0; } .modal__inner { padding: var(--s-7) var(--gutter) var(--s-6); } }

/* 8. Motion ----------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="2"] { transition-delay: .1s; }
.js [data-reveal="3"] { transition-delay: .2s; }
[data-parallax] { will-change: transform; transform: scale(1.12); }
.hero__media img, .hero__media video { animation: hero-in 2.4s var(--ease) both; }
@keyframes hero-in { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-parallax] { transform: none !important; }
}
.datepicker__clear { border: 0; background: none; padding: var(--s-2) 0; cursor: pointer; font: 600 var(--fs-label) / 1 var(--f-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); text-decoration: underline; text-underline-offset: 4px; }
.datepicker__clear:hover { color: var(--c-ink); }