:root {
  --white: #FFFFFF;
  --salt: #FAF7F0;
  --aegean: #0E3550;
  --ink: #16232D;
  --saffron: #EFA92B;
  --saffron-hover: #F3B948;
  --orion-blue: #1580C4;
  --seafoam: #C7DCE4;
  /* Darkened from #6E8494 (3.6:1 on salt — below AA) to meet WCAG AA 4.5:1 for
     text; the detector flagged the old value on ~9 label/body uses. Keeps the
     blue-grey hue, now 5.3:1 on salt / 5.6:1 on white. */
  --slate: #566A79;

  /* Cormorant Garamond over EB Garamond: higher stroke contrast and finer
     terminals, which reads as quiet luxury at display sizes. It runs ~8%
     smaller per em, so display sizes below are scaled up to compensate.
     Jost is a geometric sans in the Futura lineage — it carries uppercase
     letterspaced labels far better than a humanist grotesque. */
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: Jost, 'Helvetica Neue', Helvetica, sans-serif;

  --gutter: clamp(20px, 5vw, 88px);
  --shell: min(1880px, 93vw);
  --ease: cubic-bezier(.22, .61, .24, 1);
  --radius-pill: 999px;

  /* Fixed header height, so anchor targets can clear it. */
  --header-h: clamp(64px, 8vw, 96px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor links used to land underneath the fixed header. */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Jost has a shorter x-height than Manrope, so body copy moves up a step to
   hold the same apparent size (17px -> 18px throughout). */

h1, h2, h3, p, figure, figcaption { margin: 0; }

a { color: var(--orion-blue); text-decoration: none; }
a:hover { color: var(--aegean); }

button { font: inherit; }

img { max-width: 100%; }

::selection { background: var(--saffron); color: var(--ink); }

/* A visible 2px focus ring (WCAG 2.4.7 / focus-states rule wants 2–4px). Orion
   blue on light surfaces; switched to salt over the dark hero, header and
   footer, and inside the mobile nav, where blue-on-dark is too faint. */
:focus-visible { outline: 2px solid var(--orion-blue); outline-offset: 3px; }
.hero :focus-visible,
.site-header:not(.is-past) .nav-link:focus-visible,
.site-footer :focus-visible,
.nav-mobile :focus-visible { outline-color: var(--salt); }

.shell { max-width: var(--shell); margin: 0 auto; }

/* ── Shared type ──────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
}

.eyebrow--on-dark { color: rgba(255, 255, 255, .82); }

/* ── Shared controls ──────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  background: var(--saffron);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .4s ease, transform .35s var(--ease);
}
.btn-primary:hover { background: var(--saffron-hover); color: var(--ink); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--seafoam);
  color: var(--aegean);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .4s ease, background .4s ease, transform .35s var(--ease);
}
.btn-ghost:hover { border-color: var(--aegean); background: rgba(199, 220, 228, .35); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }

/* Text link with a rule that retracts on hover. */
.link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  color: var(--aegean);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 68%;
  transition: background-size .5s var(--ease);
}
.link-underline:hover { background-size: 0% 1px; }
.link-underline--on-dark { color: var(--white); }
.link-underline--on-dark:hover { color: var(--white); }

/* Text link with a rule that draws in on hover. */
.link-underline-in {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 76%;
  transition: background-size .5s var(--ease);
}
.link-underline-in:hover { background-size: 100% 1px; }

/* Sized picture frame: children fill it, overflow is cropped. */
.frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--salt);
  color: var(--aegean);
}
.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame--wide { height: clamp(44vh, 62vh, 80vh); }
.frame--tall { height: clamp(52vh, 78vh, 96vh); }

/* Slow image scale on hover, shared by every editorial frame. */
.zoom { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.zoom:hover { transform: scale(1.03); }
.zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zoom-img { transition: transform 1.4s var(--ease); }
.zoom-img:hover { transform: scale(1.03); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 90;
  transform: translateY(-160%);
  background: var(--white);
  color: var(--aegean);
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--seafoam);
  border-radius: var(--radius-pill);
  transition: transform .25s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ── Header ───────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: var(--white);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .55s ease, color .55s ease, border-color .55s ease;
}

/* Scrim behind the transparent header: the white nav sat over bright sky at the
   top of the hero with no protection, so legibility depended on the photo. A
   soft top-down darkening guarantees contrast; it fades out once the header goes
   solid on scroll. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 53, 80, .40), rgba(14, 53, 80, 0));
  pointer-events: none;
  opacity: 1;
  transition: opacity .55s ease;
}
.site-header.is-past::before { opacity: 0; }
.site-header__inner { position: relative; }

.site-header.is-past {
  background: var(--white);
  color: var(--aegean);
  border-bottom-color: var(--seafoam);
}

.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(10px, 1.3vw, 18px) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: block;
  position: relative;
  width: clamp(64px, 6.4vw, 84px);
  line-height: 0;
  color: inherit;
}
.logo img { display: block; width: 100%; height: auto; transition: opacity .55s ease; }
.logo__dark { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.is-past .logo__light { opacity: 0; }
.site-header.is-past .logo__dark { opacity: 1; }

.header-right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}

.nav-link {
  color: inherit;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.nav-link:hover { color: inherit; background-size: 100% 1px; }
/* Which section you are actually in, marked by a persistent rule. */
.nav-link[aria-current="true"] { background-size: 100% 1px; }

.nav-menu-cta {
  color: inherit;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 13px 22px;
  line-height: 1;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.nav-menu-cta:hover { background: var(--saffron); border-color: var(--saffron); color: var(--ink); }

.nav-toggle {
  display: none;
  width: 52px;
  height: 52px;
  margin-right: -14px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { display: block; height: 1px; background: currentColor; }
.nav-toggle span:first-child { width: 26px; }
.nav-toggle span:last-child { width: 18px; }

/* ── Mobile navigation ────────────────────────────────────────── */

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.2vw, 28px) var(--gutter) 40px;
}
.nav-mobile[hidden] { display: none; }

.nav-mobile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-mobile__top img { display: block; width: 72px; height: auto; }

.nav-mobile__close {
  width: 52px;
  height: 52px;
  margin-right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--aegean);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-mobile__nav {
  margin-top: clamp(40px, 9vh, 80px);
  display: flex;
  flex-direction: column;
}
.nav-mobile__nav a:not(.btn-primary) {
  color: var(--aegean);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 10.4vw, 50px);
  line-height: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--seafoam);
}
.nav-mobile__nav .btn-primary {
  margin-top: 36px;
  align-self: flex-start;
  min-height: 54px;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  /* Full viewport height, no pixel cap: a 1020px ceiling left a 2K screen with
     only 71% of its height filled. svh (not vh) so mobile browser chrome
     showing or hiding does not resize the hero mid-scroll. */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--aegean);
}

.hero__media { position: absolute; inset: 0; color: var(--salt); }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__media video.is-visible { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 53, 80, .42) 0%, rgba(14, 53, 80, .24) 42%, rgba(14, 53, 80, .62) 100%);
  pointer-events: none;
}

/* Pause/play toggle, bottom-right of the hero, deliberately quiet. */
.hero__motion {
  position: absolute;
  right: clamp(16px, 2vw, 30px);
  bottom: clamp(16px, 2vw, 30px);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 247, 240, .5);
  border-radius: 50%;
  background: rgba(14, 53, 80, .32);
  color: var(--salt);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: .7;
  transition: opacity .35s ease, background .35s ease, transform .35s var(--ease);
}
.hero__motion:hover { opacity: 1; transform: translateY(-2px); }
.hero__motion svg { width: 18px; height: 18px; display: block; }
.hero__motion .hero__motion-play { display: none; }
.hero__motion.is-paused .hero__motion-pause { display: none; }
.hero__motion.is-paused .hero__motion-play { display: block; }

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(52px, 9vh, 104px);
  color: var(--white);
}

.hero .eyebrow { margin-bottom: clamp(22px, 3.4vh, 38px); }

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(50px, 8.6vw, 116px);
  line-height: 1.05;
  letter-spacing: -.015em;
  max-width: 900px;
  text-wrap: pretty;
}

.hero__lede {
  margin-top: clamp(24px, 3.4vh, 36px);
  max-width: 440px;
  font-size: 19px;
  line-height: 1.66;
  color: rgba(255, 255, 255, .88);
}

.hero__actions {
  margin-top: clamp(32px, 4.6vh, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}

/* ── Alternating image/text rows ("chess") ────────────────────── */

/* Media is sized in viewport height, not pixels, so the picture grows with the
   screen instead of stalling at a fixed max-width. That was the reason the
   images looked small on a 2560px display. */
.rows {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 12vh, 190px);
  padding: clamp(64px, 10vh, 150px) var(--gutter) clamp(96px, 16vh, 200px);
}

.row {
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: clamp(32px, 5vw, 104px);
  align-items: center;
  /* The picture always takes the wider column, whichever side it is on. */
  grid-template-columns: 1.15fr 1fr;
}
.row--flip { grid-template-columns: 1fr 1.15fr; }

/* The text comes first in the DOM. On desktop the picture is pulled to the left
   on odd rows to build the chess; flipped rows keep the natural order, so the
   picture sits on the right. */
.row:not(.row--flip) .row__media { order: -1; }

.row__media {
  position: relative;
  height: clamp(46vh, 66vh, 82vh);
  overflow: hidden;
  background: var(--salt);
}
.row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The sunset photograph is a 3:4 portrait in a landscape box, so a third of its
   height is cropped. Centred, the crop ate the pink dusk sky — the one thing the
   row is about. Bias it upward to keep the sky and the sea, at the cost of the
   nearest plates. */
.row__media--high img { object-position: 50% 15%; }

.row__text { max-width: 52ch; }

.row__title {
  margin-top: clamp(18px, 2.2vw, 30px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--aegean);
  text-wrap: balance;
}

.row__copy {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink);
}

@media (max-width: 880px) {
  .row,
  .row--flip {
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 40px);
  }
  /* Stacked: DOM order already gives text then picture on every row, so the
     desktop pull-left is cancelled and the rhythm stays uniform down the page. */
  .row:not(.row--flip) .row__media { order: 0; }
  .row__media { height: clamp(42vh, 54vh, 62vh); }
  .row__text { max-width: none; }
}

/* ── Gallery carousel ─────────────────────────────────────────── */

/* Filmstrip in the manner of a hotel gallery: every slide is the same WIDTH and
   takes its height from the photograph's own proportions, all sitting centred on
   one horizontal axis. Nothing is cropped, and portrait and landscape shots
   alternate in height, which is what gives the strip its rhythm.
   Native scroll-snap, so touch swiping and keyboard scrolling come for free and
   it degrades to a plain scrollable strip if the script never runs. */
.carousel {
  position: relative;
  padding: clamp(8px, 2vh, 24px) 0;
  --carousel-gap: clamp(16px, 2.6vw, 52px);
  /* 2.5 slides in view: two full gaps sit between them. */
  --carousel-slide: calc((100% - 2 * var(--carousel-gap)) / 2.5);
}

.carousel__head {
  max-width: var(--shell);
  margin: 0 auto clamp(18px, 2.4vh, 30px);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* A proper section heading, at the same scale as the chess rows' titles, rather
   than the small eyebrow this used to be. */
.carousel__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 76px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--aegean);
}

.carousel__nav { display: flex; align-items: center; gap: 10px; }
.carousel__count {
  margin-right: 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}

.carousel__track {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--carousel-gap);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* The page's smooth scroll-behaviour would fight programmatic scrollBy. */
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--orion-blue); outline-offset: 8px; }

.carousel__slide {
  flex: 0 0 var(--carousel-slide);
  /* "start", not "center": slideLeft() below aligns a slide to the track's left
     content edge, and centre snapping would land somewhere else, leaving the
     script's idea of the index out of step with what is on screen. */
  scroll-snap-align: start;
  height: auto;
}
.carousel__slide img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--salt);
}

/* The logo itself: saffron disc, blue chevron. Solid discs rather than the bare
   chevrons this started as — those read as decoration and were being missed.
   The chevron is Deep Aegean, not the lighter Orion blue: that pairing only
   reaches 2.1:1 against saffron, where this one is 6.3:1. */
.carousel__btn {
  flex: 0 0 auto;   /* never let the counter squeeze the discs on narrow screens */
  width: clamp(52px, 4vw, 62px);
  height: clamp(52px, 4vw, 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--saffron);
  color: var(--aegean);
  cursor: pointer;
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}
.carousel__btn svg { width: 42%; height: 42%; display: block; }
.carousel__btn:hover { background: var(--saffron-hover); transform: translateY(-2px); }
/* At either end: still legible as a button, plainly not available. */
.carousel__btn[disabled] {
  background: var(--seafoam);
  color: var(--slate);
  cursor: default;
  transform: none;
}
/* One photograph per screen on a phone, still uncropped. */
@media (max-width: 880px) {
  .carousel { --carousel-slide: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* ── 07 Visit ─────────────────────────────────────────────────── */

.visit {
  background: var(--salt);
  padding: clamp(88px, 15vh, 170px) var(--gutter);
}

.visit__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(44px, 6vw, 120px);
  /* Centre the shorter info column against the taller map so it doesn't leave a
     large void at the bottom on wide screens. */
  align-items: center;
}

.visit__info { flex: 1 1 min(100%, 380px); max-width: 520px; }

.visit__title {
  margin-top: clamp(20px, 2.6vw, 32px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(43px, 6vw, 82px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--aegean);
}

.visit__lede {
  margin-top: clamp(22px, 2.6vw, 32px);
  max-width: 48ch;
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink);
}

.visit__details {
  margin: clamp(36px, 5vw, 64px) 0 0;
  display: flex;
  flex-direction: column;
}

.visit__row {
  padding: 20px 0;
  border-top: 1px solid var(--seafoam);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
}
.visit__row:last-child { border-bottom: 1px solid var(--seafoam); }

.visit__row dt {
  flex: 0 0 120px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 5px;
}

.visit__row dd {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

.visit__tel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 19px;
  color: var(--ink);
}
.visit__tel:hover { color: var(--ink); }

.visit__actions {
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

/* Open/closed chip, filled by script.js. Green-ish and amber tuned to sit in the
   brand world rather than stock traffic-light colours. */
.visit__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 22px);
  padding: 7px 15px 7px 13px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
}
.visit__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.visit__status[data-state="open"] { background: rgba(31, 122, 74, .12); color: #1F7A4A; }
.visit__status[data-state="closed"] { background: rgba(14, 53, 80, .08); color: var(--aegean); }

.visit__note {
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}

.visit__map { flex: 1.15 1 min(100%, 400px); }

.visit__map-frame {
  position: relative;
  width: 100%;
  height: clamp(52vh, 74vh, 88vh);
  overflow: hidden;
  background: #DCE9EE;
}

/* Sits behind the iframe; the loaded map covers it, a blank/blocked map does not. */
.visit__map-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--aegean);
  background: #DCE9EE;
}
.visit__map-pin {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(14, 53, 80, .16);
}
.visit__map-pin img { display: block; width: 44px; height: auto; }
.visit__map-addr {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.7;
}
.visit__map-addr strong {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.visit__map-fallback:hover .visit__map-addr strong { text-decoration: underline; }

.visit__map-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── 08 Footer ────────────────────────────────────────────────── */

.site-footer {
  background: var(--aegean);
  color: var(--salt);
  padding: clamp(64px, 11vh, 132px) var(--gutter) clamp(32px, 5vh, 56px);
}

.site-footer__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-footer__logo { display: block; width: clamp(84px, 9vw, 124px); line-height: 0; }
.site-footer__logo img { display: block; width: 100%; height: auto; }

.site-footer__tagline {
  margin-top: clamp(22px, 3vh, 34px);
  max-width: 30ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4;
  color: rgba(250, 247, 240, .82);
}

.site-footer__nav {
  margin-top: clamp(32px, 5vh, 52px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px clamp(24px, 3.2vw, 44px);
}
.site-footer__nav a {
  color: inherit;
  opacity: .66;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .4s ease;
}
.site-footer__nav a:hover { color: inherit; opacity: 1; }

/* Circular icon buttons, in the same round language as the page's controls. */
.site-footer__social {
  margin-top: clamp(26px, 3.4vh, 38px);
  display: flex;
  justify-content: center;
  gap: 12px;
}
.social {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 247, 240, .26);
  border-radius: 50%;
  color: inherit;
  opacity: .74;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), opacity .4s ease, transform .4s var(--ease);
}
.social svg { width: 19px; height: 19px; display: block; }
.social--fb svg { width: 17px; height: 17px; }
.social:hover,
.social:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: var(--saffron);
  border-color: var(--saffron);
  transform: translateY(-2px);
}

/* Group affiliation: the label is a quiet eyebrow, the name carries the serif so
   it reads as a name rather than another nav item. */
.site-footer__member {
  margin-top: clamp(34px, 5vh, 54px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.3;
  letter-spacing: .01em;
}
.site-footer__member span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .5;
}

.site-footer__rule {
  width: 100%;
  height: 1px;
  margin-top: clamp(40px, 6vh, 68px);
  background: currentColor;
  opacity: .16;
}

.site-footer__base {
  width: 100%;
  margin-top: clamp(22px, 3vh, 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px clamp(16px, 2.4vw, 28px);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .06em;
}
/* .5 was 4.17:1 on Aegean — just under AA for this small credit text; .62 is 5.5:1. */
.site-footer__base p { opacity: .62; }
.site-footer__base a {
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.site-footer__base a:hover { color: inherit; background-size: 100% 1px; }

/* ── Scroll reveal ────────────────────────────────────────────── */

/* Text blocks: rise and fade. */
[data-reveal].reveal { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
[data-reveal].reveal:not(.is-shown) { opacity: 0; transform: translateY(26px); }

/* Image blocks: wipe up from the lower edge while the picture settles back from
   a slight overscale. Reads as a camera coming to rest rather than a fade. */
/* Clip only — no scale. A scaled full-width block spills 1.5% past each edge
   and produced real horizontal overflow on phones and tablets. */
[data-reveal].reveal-clip {
  transition: clip-path 1.5s var(--ease), opacity 1.2s var(--ease);
}
[data-reveal].reveal-clip:not(.is-shown) {
  clip-path: inset(0 0 82% 0);
  opacity: 0;
}
[data-reveal].reveal-clip.is-shown { clip-path: inset(0 0 0 0); }

/* ── Hero entrance ────────────────────────────────────────────── */

/* Runs once the preloader lifts, so the curtain hands off to the headline
   instead of both competing for attention. */
.hero-in .hero__content > * {
  animation: hero-rise 1.25s var(--ease) both;
}
.hero-in .hero__content > :nth-child(1) { animation-delay: .05s; }
.hero-in .hero__content > :nth-child(2) { animation-delay: .18s; }
.hero-in .hero__content > :nth-child(3) { animation-delay: .34s; }
.hero-in .hero__content > :nth-child(4) { animation-delay: .48s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* The still frame drifts almost imperceptibly while the video loads. */
.hero__media img { animation: hero-drift 30s ease-out both; }
@keyframes hero-drift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* ── Preloader ────────────────────────────────────────────────── */

/* Covers the page while the hero image decodes, then fades out. script.js
   removes it on load, and unconditionally after 2.5s so a slow or failed
   asset can never leave the site behind a curtain. Content sits in the DOM
   underneath the whole time, so crawlers are unaffected. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vh, 44px);
  background: var(--aegean);
  transition: opacity .9s var(--ease), visibility .9s var(--ease);
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__logo {
  width: clamp(74px, 8vw, 104px);
  opacity: 0;
  animation: pre-logo 1.1s var(--ease) forwards;
}
.preloader__logo img { display: block; width: 100%; height: auto; }

.preloader__word {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--salt);
  text-align: center;
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.14;
  letter-spacing: .06em;
}

/* Each line rises and settles its letterspacing — the "premium lettering"
   effect, done with two properties rather than per-letter spans. */
.preloader__line {
  display: block;
  opacity: 0;
  animation: pre-line 1.3s var(--ease) forwards;
}
.preloader__line--1 { animation-delay: .25s; }
.preloader__line--2 { animation-delay: .45s; }

.preloader__rule {
  width: clamp(90px, 12vw, 160px);
  height: 1px;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  animation: pre-rule 1.2s var(--ease) .8s forwards;
}

@keyframes pre-logo {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pre-line {
  from { opacity: 0; transform: translateY(18px); letter-spacing: .3em; }
  to { opacity: 1; transform: none; letter-spacing: .06em; }
}
@keyframes pre-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── Scroll progress ──────────────────────────────────────────── */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--saffron);
  pointer-events: none;
}

/* ── 404 ──────────────────────────────────────────────────────── */

.notfound {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 12vh, 120px) var(--gutter);
}

.notfound__logo { display: block; width: clamp(84px, 9vw, 116px); line-height: 0; margin-bottom: clamp(40px, 7vh, 72px); }
.notfound__logo img { display: block; width: 100%; height: auto; }

.notfound__title {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(43px, 6.5vw, 82px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--aegean);
}

.notfound__text {
  margin-top: clamp(20px, 2.6vw, 28px);
  max-width: 440px;
  font-size: 19px;
  line-height: 1.66;
  color: var(--ink);
}

.notfound__actions {
  margin-top: clamp(32px, 4.6vh, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
}

/* ── Consent ──────────────────────────────────────────────────── */

/* Bottom right, in the logo's own palette: Deep Aegean type on white, the
   Saffron of the mark for the primary action and for a switch that is on. */
.consent {
  position: fixed;
  z-index: 80;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  width: min(400px, calc(100vw - 28px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: clamp(20px, 2vw, 26px);
  background: var(--white);
  border: 1px solid var(--seafoam);
  border-radius: 20px;
  /* The only shadow on the site. It is overlay chrome, not page content, and
     without it the card detaches from nothing on a white section. */
  box-shadow: 0 18px 50px rgba(14, 53, 80, .14);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }

.consent__head { display: flex; align-items: center; gap: 10px; }
.consent__mark { width: 34px; height: auto; display: block; }
.consent__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aegean);
}

.consent__intro {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* The categories are revealed by the Customise button on a phone; on a wide
   screen the panel opens with them already showing. */
.consent__rows { display: none; }
.consent.is-open .consent__rows {
  display: block;
  margin-top: 16px;
  border-top: 1px solid var(--seafoam);
}

.consent__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--seafoam);
}

.consent__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--aegean);
}
.consent__label em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
}
.consent__desc { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--slate); }

/* Switch */
.consent__switch {
  flex: 0 0 auto;
  position: relative;
  width: 38px;
  height: 22px;
  margin-top: 1px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--seafoam);
  cursor: pointer;
  transition: background .3s ease;
}
.consent__switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .3s var(--ease);
}
.consent__switch[aria-checked="true"] { background: var(--saffron); }
.consent__switch[aria-checked="true"] span { transform: translateX(16px); }
/* Locked on: reads as settled rather than interactive. */
.consent__switch[disabled] { background: var(--aegean); cursor: default; opacity: .45; }

/* Allow all across the top, then the two ways of saying no side by side. A grid
   rather than a wrapping flex row, so Decline can never end up orphaned on a
   line of its own — and it stays as easy to reach as accepting, which is the
   point of the thing. */
.consent__actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.consent__btn--all { grid-column: 1 / -1; }

.consent__btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.consent__btn--all {
  border: 0;
  background: var(--saffron);
  color: var(--ink);
}
.consent__btn--all:hover { background: var(--saffron-hover); }

.consent__btn--some,
.consent__btn--more {
  border: 1px solid var(--seafoam);
  background: none;
  color: var(--aegean);
}
.consent__btn--some:hover,
.consent__btn--more:hover { border-color: var(--aegean); }

/* Only one of the pair is ever offered: Customise while the categories are
   hidden, Allow selection once they are on screen and there is a selection to
   allow. Above 640px the panel is always expanded, so Customise never shows. */
.consent:not(.is-open) .consent__btn--some,
.consent.is-open .consent__btn--more { display: none; }
@media (min-width: 641px) { .consent__btn--more { display: none; } }

.consent__btn--deny {
  border: 1px solid var(--seafoam);
  background: none;
  color: var(--slate);
}
.consent__btn--deny:hover { color: var(--aegean); border-color: var(--aegean); }

/* Reopen control in the footer. */
.site-footer__cookies {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  opacity: .66;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .4s ease;
}
.site-footer__cookies:hover { opacity: 1; }

@media (max-width: 640px) {
  .consent {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
    padding: 18px;
    border-radius: 18px;
  }

  /* Compact on a phone: the four categories become columns with the switch
     under the label. The stacked list ran to 56% of the screen height, which
     buried the hero's primary CTA no matter how much room the hero reserved. */
  .consent.is-open .consent__rows {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--seafoam);
  }
  .consent__row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 2px;
    border-bottom: 0;
    text-align: center;
  }
  .consent__desc { display: none; }
  .consent__label { font-size: 11px; line-height: 1.25; }
  .consent__label em { display: none; }
  .consent__switch { margin-top: 0; }

  /* Cap the panel so it cannot swallow the screen; it scrolls inside if the
     text ever grows. */
  .consent { max-height: 58vh; }
  .consent__intro { font-size: 13.5px; }
  .consent__actions { margin-top: 14px; gap: 8px 6px; }
  .consent__btn { min-height: 40px; padding: 0 14px; }

  /* Keep the hero's primary CTA clear of the panel. Padding-bottom alone does
     not do it: once the content is taller than 100svh the hero grows to fit,
     and the content's bottom edge then sits at padding-top + content height,
     independent of padding-bottom. So the top padding has to come in too. */
  .has-consent .hero__content {
    padding-top: clamp(64px, 9vh, 104px);
    padding-bottom: calc(var(--consent-h, 0px) + 24px);
    transition: padding-top .5s var(--ease), padding-bottom .5s var(--ease);
  }
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 880px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
}

/* A min-height on an aspect-ratio box also implies a MINIMUM WIDTH
   (min-height 420px at 4/5 needs 336px), which overflowed the content column on
   320px screens. Below 480px let aspect-ratio govern on its own — there is no
   collapse to guard against once every block is full-width. */
@media (max-width: 480px) {
  .frame--wide,
  .frame--tall,
  .row__media,
  .visit__map-frame { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  /* Animations are collapsed to ~0s above, so the preloader's opening state
     would stick at opacity 0. Force the resting state instead. */
  .preloader__logo,
  .preloader__line { opacity: 1; transform: none; letter-spacing: .06em; }
  .preloader__rule { transform: scaleX(1); }
  .btn-primary:hover,
  .btn-ghost:hover { transform: none; }
}