/* ==========================================================================
   Immersed In — event hire website
   Design language
   --------------------------------------------------------------------------
   Colour   ink #0E0E0E (primary)  ·  cream #F6F4F0 (alt band)
            brass #B99A5E (accent) ·  brass-dark #8A6A2F (link hover)
   Type     Libre Baskerville  — headings
            Archivo            — body / UI
            IBM Plex Mono      — eyebrows, labels, meta
   Shape    square corners, 1px hairline grids, no floating cards
   Motion   0.3s fade + 10px rise on scroll into view
   ========================================================================== */

:root {
  --ink: #0e0e0e;
  --ink-2: #171717;
  --ink-line: #232323;
  --cream: #f6f4f0;
  --cream-line: #e6e2da;
  --brass: #b99a5e;
  --brass-dark: #8a6a2f;
  --grey-100: #f2f2f0;
  --grey-200: #e2e2e2;
  --grey-400: #a9a9a9;
  --grey-500: #6d6d6d;
  --grey-700: #3d3d3d;
  --white: #fff;

  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: Archivo, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --wrap: 1240px;
  --gut: 24px;
  --sec-y: clamp(48px, 5.5vw, 80px);
  --nav-h: 62px; /* measured and rewritten by script.js */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* NOT hidden — hidden makes body a scroll container and kills the sticky hero */
}
body.is-loading { overflow: hidden; }

/* --- ADON cloth-wipe loader ------------------------------------------- */
.loader-wrap {
  position: fixed;
  z-index: 99999;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  /* Transparent so the path wipe reveals the homepage (not a coloured panel) */
  background: transparent;
  pointer-events: none;
}
.loader-wrap.is-done {
  display: none !important;
  z-index: -1;
  visibility: hidden;
}
.loader-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 110vh;
  fill: #000;
  display: block;
}
.loader-wrap-heading {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.load-logo {
  width: min(72vw, 420px);
  height: auto;
  animation: loading 1s infinite alternate;
  will-change: opacity, transform;
}
@keyframes loading {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .load-logo { animation: none; opacity: 1; }
}

img, video { display: block; max-width: 100%; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brass-dark); }

input, textarea, button, select { font-family: inherit; }
::placeholder { color: #8d8d8d; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); }
.mb-lg { margin-bottom: 28px; }

/* --- reveal ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- placeholders (replace with real media) ----------------------------- */
.media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* re-crop shared photography so repeats read as different frames */
.media--pos-top { object-position: 50% 12%; }
.media--pos-bottom { object-position: 50% 88%; }
.media--pos-right { object-position: 82% 50%; }
.media--dark {
  background-color: #161616;
  background-image: repeating-linear-gradient(135deg, #1d1d1d 0 10px, #141414 10px 20px);
}
.media-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5c5c5c;
  text-align: center;
}
.media-label--light { color: #96958f; }
.logo-slot {
  width: 76px;
  height: 26px;
  border: 1px dashed #c9c4b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8f8a7e;
  flex: 0 0 auto;
}
.logo-slot--sm { width: 56px; height: 22px; font-size: 8px; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 14px 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.btn--gold { background: var(--brass); color: var(--ink); }
.btn--gold:hover { background: var(--white); color: var(--ink); }
.btn--ghost { border-color: #4a4a4a; color: var(--white); background: none; }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn--black { background: var(--ink); color: var(--white); }
.btn--black:hover { background: var(--brass-dark); color: var(--white); }

.link-gold { color: var(--brass-dark); border-bottom: 1px solid currentColor; }
.link-underline { border-bottom: 1px solid #c9c9c9; }

/* --- top bar ------------------------------------------------------------ */
.topbar {
  display: none;
  background: var(--ink);
  color: #cfcfcf;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  padding-bottom: 9px;
}
.topbar a { color: #cfcfcf; }
.topbar a:hover { color: var(--brass); }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 22px; }

/* --- header / nav ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-stuck {
  box-shadow: 0 1px 14px rgba(0, 0, 0, .35);
  border-bottom-color: var(--brass);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  flex: 0 0 auto;
}
.logo:hover { opacity: .88; color: var(--white); }
.logo__img {
  display: block;
  width: auto;
  height: 34px;
  max-width: min(48vw, 200px);
}
.logo__img--dark { height: 42px; margin-left: -10px;}
.logo--dark { color: var(--ink); }

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex: 1 1 auto;
  font-size: 14px;
}
.nav__link { color: var(--white); white-space: nowrap; }
.nav__link:hover { color: var(--brass); }
.nav__link.is-current { border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.nav__social { display: flex; gap: 8px; }
.nav__social a {
  width: 30px;
  height: 30px;
  border: 1px solid #3a3a3a;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
}
.nav__social a:hover { border-color: var(--brass); color: var(--brass); }
.nav__social a svg { width: 20px; height: 20px; }
.nav__cta { padding: 12px 22px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid #3a3a3a;
  padding: 12px 10px;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--white); }

/* --- hero -------------------------------------------------------------- */
/* Sticky reveal: the hero pins directly beneath the nav and the sections that
   follow scroll up over it. Everything after .hero therefore needs an opaque
   background and a higher z-index, or the video shows through. */
.hero { position: relative; z-index: 0; background: var(--ink); overflow: hidden; }
/* Two pinned modes, chosen by script.js from a real measurement:
   .is-pinned  — the content fits one viewport, so the hero holds at the top;
   .is-tall    — it does not, so the hero scrolls until its bottom edge meets
                 the viewport bottom and pins there. Either way the next
                 section slides up over a held hero, never a scrolling one. */
.hero.is-pinned {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
}
.hero.is-tall {
  position: sticky;
  bottom: 0;
  min-height: calc(100svh - var(--nav-h));
}
.hero:not(.is-pinned) .hero__inner {
  height: auto;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.trustbar,
.section,
.cta,
.footer { position: relative; z-index: 1; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #151515;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, .92) 0%, rgba(8, 8, 8, .78) 50%, rgba(8, 8, 8, .58) 100%);
}
.hero__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.hero__copy { color: var(--white); }
.hero__copy p { color: #d2d2d2; }
.hero__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.hero__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero__links .btn { padding: 13px 22px; font-weight: 600; letter-spacing: .08em; }

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-dark);
}
.eyebrow--gold { color: var(--brass); }

/* --- enquiry form ------------------------------------------------------ */
.enquiry {
  background: rgba(14, 14, 14, .7);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: clamp(20px, 2.4vw, 30px);
}
.enquiry__title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--white);
}
.enquiry__sub { margin: 0 0 18px; font-size: 13px; color: var(--grey-400); }
.enquiry__form { display: grid; gap: 13px; }
.enquiry__form .btn { justify-self: start; margin-top: 2px; }
.enquiry__note { margin: 14px 0 0; font-size: 12px; color: #8f8f8f; }
.enquiry__note.is-success { color: var(--brass); }

.field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #e4e4e4;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 13px;
  background: var(--grey-100);
  border: 1px solid var(--grey-100);
  border-radius: 2px;
  font-size: 15px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* --- trust bar --------------------------------------------------------- */
.trustbar { background: var(--cream); border-bottom: 1px solid var(--cream-line); }
.trustbar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 16px;
  align-items: start;
  justify-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.trustbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: #4d4d4d;
  text-align: center;
}
.trustbar__count { margin-top: 2px; }
.trustbar__wordmark {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
}
.trustbar__wordmark--google { display: block; gap: 0; font-family: Arial, "Helvetica Neue", sans-serif; letter-spacing: 0; }
.trustbar__wordmark--yelp { font-family: Arial, "Helvetica Neue", sans-serif; color: #d32323; font-style: italic; font-weight: 800; font-size: 26px; }
.trustbar__wordmark--trustpilot { font-family: Arial, "Helvetica Neue", sans-serif; color: #191919; font-size: 24px; }
.trustbar__wordmark--checkatrade { font-family: Arial, "Helvetica Neue", sans-serif; color: #1a1a1a; font-size: 20px; }
.trustbar__stars { color: #191919; letter-spacing: 1px; font-size: 17px; line-height: 1; }
.trustbar__stars--google { color: #FBBC05; }
.trustbar__stars--yelp { color: #d32323; }
.trustbar__stars--trustpilot { color: #00b67a; }
.trustbar__stars--checkatrade { color: #e2001a; }
@media (max-width: 640px) {
  .trustbar__inner { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
}

/* --- sections ---------------------------------------------------------- */
.section { padding: var(--sec-y) 0; background: var(--white); }
.section--dark { background: var(--ink); color: var(--white); }
.section--cream { background: var(--cream); }
.section--tight {
  padding: clamp(40px, 4.5vw, 68px) 0;
  border-bottom: 1px solid #e8e8e8;
}
.section--cream.section--tight { border-top: 1px solid var(--cream-line); border-bottom: 0; }
.section__head { text-align: center; margin-bottom: clamp(24px, 3vw, 42px); }
.section__head--left { text-align: left; }
.section__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
}
.section__title--center { text-align: center; margin-bottom: clamp(24px, 3vw, 38px); }
.section__lead {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 15px;
  color: var(--grey-500);
  line-height: 1.55;
}
.section__lead--center { text-align: center; margin-bottom: clamp(24px, 3vw, 38px); }
.section__lead--on-dark { color: #9a9a9a; }
.section__foot { margin: 24px 0 0; text-align: center; font-size: 17px; color: #9d9d9d; }
.section__foot--dark { color: #5a5a5a; }
.rule { display: block; width: 74px; height: 2px; background: var(--ink); margin-top: 16px; }
.rule--center { margin-left: auto; margin-right: auto; background: var(--brass); }
.h2 { margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
.h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 22px; font-weight: 700; }

/* --- brandhead ("Welcome to / Immersed In") ---------------------------- */
.brandhead { margin-bottom: clamp(26px, 3vw, 44px); }
.brandhead__kicker {
  margin: 0;
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--grey-400);
}
.brandhead__name {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* hand-drawn flourish, sized off the wordmark it sits under */
.brandhead__flourish {
  display: block;
  width: clamp(150px, 22vw, 250px);
  height: auto;
  margin-top: 6px;
  color: var(--brass);
}

/* --- about ------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(26px, 4vw, 52px);
  align-items: stretch;
}
.about__copy { display: flex; flex-direction: column; }
.about p { color: var(--grey-700); }
.about__image {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid #e2ded6;
  background-color: #ededea;
  background-image: repeating-linear-gradient(135deg, #e6e4df 0 10px, #f1efeb 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.about__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* no scrub / no context menu grab — it reads as artwork */
}
.about__video::-webkit-media-controls { display: none !important; }
.about__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%);
  pointer-events: none;
}
.about__image-tag {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 14px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* --- brands (overlapping orbs) ---------------------------------------- */
.section--brands { border-bottom: 1px solid var(--cream-line); }
.brand-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 8px 0 4px;
}
.brand-orb {
  width: 108px;
  height: 108px;
  margin-left: -14px;
  border-radius: 50%;
  border: 1px solid #d8d2c8;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .04em;
  color: #4a4a4a;
  text-align: center;
  padding: 10px;
  box-shadow: 0 0 0 6px var(--cream);
}
.brand-orb:first-child { margin-left: 0; }
@media (max-width: 700px) {
  .brand-orb { width: 86px; height: 86px; font-size: 11px; margin-left: -10px; }
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--grey-200);
  border: 1px solid var(--grey-200);
  margin-top: auto;
}
.stat { background: var(--white); padding: 18px 16px; }
.stat__num { margin: 0; font-family: var(--serif); font-size: 26px; }
.stat__label {
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-500);
}
@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:last-child { grid-column: 1 / -1; }
}

/* --- services -----------------------------------------------------------
   6 tracks so each card spans 2 = three per row, and the final pair can be
   nudged in by one track to sit centred under the rows above. */
.section--pull { padding-top: clamp(20px, 2.2vw, 34px); }
.section--pull .section__head { margin-bottom: clamp(18px, 2vw, 30px); }
.eyebrow--ruled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.eyebrow--ruled::before,
.eyebrow--ruled::after {
  content: "";
  width: clamp(26px, 5vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, rgba(185, 154, 94, 0), rgba(185, 154, 94, .5));
}
.eyebrow--ruled::after { background: linear-gradient(90deg, rgba(185, 154, 94, .5), rgba(185, 154, 94, 0)); }
.section__flourish {
  display: block;
  width: clamp(120px, 13vw, 156px);
  height: auto;
  margin: 4px auto 0;
  color: var(--brass);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
}
.service-card { grid-column: span 2; }
.service-card:nth-child(7) { grid-column: 2 / span 2; }
.service-card:nth-child(8) { grid-column: 4 / span 2; }
.service-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  background: #141414;
  color: var(--white);
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-card .media { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, .55); }
.service-card:hover .media,
.service-card:focus-visible .media { transform: scale(1.18); }
.service-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.service-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .86) 100%);
}
.service-card__text { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.service-card__name { display: block; font-family: var(--serif); font-size: 16px; font-weight: 700; }
.service-card__blurb { display: block; margin-top: 3px; font-size: 11.5px; color: #c4c4c4; line-height: 1.45; }
.service-card__play {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.service-card:hover .service-card__play { border-color: var(--brass); color: var(--brass); }

@media (max-width: 700px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
  .service-card:nth-child(7) { grid-column: span 2; }
  .service-card:nth-child(8) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .section__flourish { width: 116px; }
  .eyebrow--ruled::before,
  .eyebrow--ruled::after { width: 20px; }
}
@media (max-width: 420px) {
  .service-card__blurb { display: none; }
}

/* --- clients ----------------------------------------------------------- */
/* --- clients: two-row logo reel ---------------------------------------- */
.logo-reel {
  display: grid;
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(22px, 2.6vw, 34px);
  /* the rows run off both edges rather than stopping at a hard line */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.logo-reel__row { overflow: hidden; }
.logo-reel__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-run 46s linear infinite;
}
/* second row travels the other way, so the two never read as one block */
.logo-reel__row--b .logo-reel__track { animation-direction: reverse; animation-duration: 54s; }
.logo-reel:hover .logo-reel__track { animation-play-state: paused; }
@keyframes logo-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-reel__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(52px, 5vw, 72px);
  margin: 0 clamp(16px, 2.2vw, 34px);
}
.logo-reel__item img {
  max-height: 100%;
  width: auto;
  max-width: clamp(120px, 13vw, 170px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.logo-reel__item:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.logo-reel__note {
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: 13px;
  color: var(--grey-500);
}
@media (prefers-reduced-motion: reduce) {
  .logo-reel__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .logo-reel { -webkit-mask-image: none; mask-image: none; }
  .logo-reel__item--dup { display: none; }
}
@media (max-width: 700px) {
  .logo-reel__item { height: 46px; margin: 0 14px; }
  .logo-reel__item img { max-width: 118px; }
}

/* --- reviews (masonry wall: printed cards + photo tiles) ---------------- */
.review-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--grey-500);
}
.review-score__num { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--brass-dark); }
.review-score__stars { color: #f2b40b; font-size: 15px; letter-spacing: .06em; }

/* CSS columns give the staggered wall — cards keep their natural height */
.review-grid {
  column-count: 3;
  column-gap: 20px;
}
.review {
  position: relative;
  overflow: hidden; /* the corner sprig bleeds past the edge by design */
  break-inside: avoid;
  margin: 0 0 20px;
  background: var(--white);
  border: 1px solid #ebe8e0;
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.review:hover {
  transform: translateY(-4px);
  border-color: rgba(185, 154, 94, .4);
  box-shadow: 0 16px 30px rgba(20, 18, 12, .1);
}
/* oversized opening quote, the way a printed testimonial page sets it */
.review__mark {
  font-family: var(--serif);
  font-size: 54px;
  line-height: .7;
  height: 26px;
  color: var(--brass);
  opacity: .85;
}
/* faint floral watermark on the text-only cards */
.review__sprig {
  position: absolute;
  right: -10px;
  bottom: -12px;
  width: 92px;
  height: auto;
  color: var(--brass-dark);
  opacity: .09;
  pointer-events: none;
}
.review__quote {
  margin: 0;
  font-size: 14.5px;
  color: var(--grey-700);
  line-height: 1.65;
}
/* a print pinned to the card — the object this business actually hands out */
.review__strip {
  display: block;
  align-self: flex-start;
  padding: 7px 7px 20px;
  background: var(--white);
  border: 1px solid #e7e2d8;
  border-radius: 3px;
  transform: rotate(-1.6deg);
  transition: transform .3s ease;
}
.review:hover .review__strip { transform: rotate(1.2deg); }
.review__strip img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
.review__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid rgba(185, 154, 94, .3);
  color: var(--brass-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  flex: 0 0 auto;
}
.review__who { flex: 1; min-width: 0; }
.review__name { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.review__verified { flex: 0 0 auto; }
.review__meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #7a7a7a; }
.review__gicon { flex: 0 0 auto; }
.review__stars { margin: 0; font-size: 15px; letter-spacing: .06em; color: #f2b40b; }

/* photo tiles: the shot carries the card, text sits over a scrim */
.review--photo {
  min-height: 340px;
  border-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(10, 8, 8, .3) 0%, rgba(10, 8, 8, .82) 72%),
    var(--shot);
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.review--photo .review__quote { color: #f0eae8; }
.review--photo .review__mark { color: var(--white); opacity: .9; }
.review--photo .review__name { color: var(--white); }
.review--photo .review__meta { color: #c9c0bd; }
.review--photo .review__avatar {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  color: var(--white);
}
.review--photo:hover { border-color: rgba(255, 255, 255, .35); }

@media (max-width: 1040px) {
  .review-grid { column-count: 2; }
}

.review-carousel { position: relative; }
.review-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: rgba(20, 18, 12, .55);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.review-nav--prev { left: -4px; }
.review-nav--next { right: -4px; }
.review-dots { display: none; justify-content: center; gap: 7px; margin-top: 16px; }
.review-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8d4c9;
}
.review-dots span.is-active { background: var(--brass-dark); width: 8px; height: 8px; }

@media (max-width: 760px) {
  .review-nav { display: flex; }
  .review-dots { display: flex; }
  .review-grid {
    column-count: initial;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .review-grid::-webkit-scrollbar { display: none; }
  .review-grid .review {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
  }
  .review-grid .review + .review { margin-left: 16px; }
  .review--photo { min-height: 300px; }
}

/* --- areas ------------------------------------------------------------- */
.area-grid {
  display: grid;
  /* fixed 3 across so six cards land as a tidy 3 + 3, not a ragged 4 + 2 */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* --- areas: one-row expanding accordion (desktop) ----------------------- */
/* All six cities live on a single row as narrow panels; the one under the
   cursor opens up and the rest give way. No JS — flex-grow does the work. */
@media (min-width: 761px) {
  .area-grid {
    display: flex;
    gap: 10px;
    height: clamp(340px, 40vw, 470px);
  }
  .area-card {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 12px;
    transition: flex-grow .8s cubic-bezier(.33, 1, .68, 1) 70ms;
    will-change: flex-grow;
  }
  .area-card .media { transition: transform 1.2s cubic-bezier(.33, 1, .68, 1) 70ms; }
  .area-card__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .78) 100%);
    transition: background .7s ease 70ms;
  }
  /* the first panel stands open until something else is hovered */
  .area-grid:not(:hover) .area-card:first-child,
  .area-card:hover,
  .area-card:focus-within { flex-grow: 3.4; }
  .area-card:hover .media,
  .area-grid:not(:hover) .area-card:first-child .media { transform: scale(1.05); }

  /* collapsed: the city name runs up the panel like a spine label */
  .area-card__name {
    left: auto;
    right: 16px;
    bottom: 18px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left;
    font-size: 17px;
    letter-spacing: .01em;
    transition: opacity .45s ease;
  }
  .area-card__rule { display: none; }

  /* expanded: the spine label gives way to a full caption */
  .area-card__meta {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease .22s, transform .5s cubic-bezier(.33, 1, .68, 1) .22s;
  }
  .area-card__title {
    font-family: var(--serif);
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
  }
  .area-card__cta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
  }
  .area-grid:not(:hover) .area-card:first-child .area-card__name,
  .area-card:hover .area-card__name,
  .area-card:focus-within .area-card__name { opacity: 0; }
  .area-grid:not(:hover) .area-card:first-child .area-card__meta,
  .area-card:hover .area-card__meta,
  .area-card:focus-within .area-card__meta { opacity: 1; transform: none; }
  .area-card:hover .area-card__scrim,
  .area-grid:not(:hover) .area-card:first-child .area-card__scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, .12) 25%, rgba(20, 14, 4, .55) 100%);
  }
}
/* the caption belongs to the accordion only — the mobile deck keeps its
   centred name */
.area-card__meta { display: none; }
@media (min-width: 761px) { .area-card__meta { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .area-card, .area-card .media, .area-card__meta, .area-card__name { transition: none; }
}
/* On mobile the six cards become a swipeable deck — drag the front card off to
   either side and the next one steps forward. Arrows and dots drive the same
   deck, so nothing depends on the gesture. */
@media (max-width: 760px) {
  .area-grid.is-stack {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 26px;
    /* vertical scrolling still belongs to the page */
    touch-action: pan-y;
  }
  .area-grid.is-stack .area-card {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(20, 18, 12, .22);
    /* each card behind sits a little lower and a little smaller */
    transform: translateY(calc(var(--pos, 0) * 12px)) scale(calc(1 - var(--pos, 0) * .05));
    z-index: calc(10 - var(--pos, 0));
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s ease;
    will-change: transform;
  }
  /* only three deep — the rest wait out of sight */
  .area-grid.is-stack .area-card:not(.is-top) { pointer-events: none; }
  .area-grid.is-stack .area-card.is-behind { opacity: 0; }
  .area-grid.is-stack .area-card.is-top { cursor: grab; }
  .area-grid.is-stack .area-card.is-dragging {
    transition: none;
    cursor: grabbing;
  }
  .area-grid.is-stack .area-card.is-flying { transition: transform .24s ease-in, opacity .24s ease-in; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .area-grid.is-stack .area-card { transition: none; }
}
/* the deck fills the full column, so its arrows tuck inside the card edges */
@media (max-width: 760px) {
  /* dark chips vanished against the photography — these read on any card */
  .area-carousel .review-nav {
    /* the stacked cards climb to z-index 10, so the controls must clear them */
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    border: 1px solid var(--cream-line);
  }
  .area-carousel .review-nav--prev { left: 8px; }
  .area-carousel .review-nav--next { right: 8px; }
  .area-hint {
    margin: 10px 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grey-400);
  }
}
.area-hint { display: none; }
@media (max-width: 760px) { .area-hint { display: block; } }
.area-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #dcdcdc;
}
.area-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .68));
}
.area-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  color: var(--white);
  font-family: var(--serif);
  font-size: 19px;
}
.area-card__rule {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, .7);
  transform: translateX(-50%);
}

/* --- instagram grid ---------------------------------------------------- */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.gallery-cell {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #e0ddd5;
  background-color: #e9e7e2;
}
.gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}
.gallery-cell:hover img { transform: scale(1.06); }
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* --- closing cta ------------------------------------------------------- */
.cta { background: var(--ink); color: var(--white); }
.cta__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: center;
  padding-top: clamp(40px, 4.5vw, 68px);
  padding-bottom: clamp(40px, 4.5vw, 68px);
}
.cta__title { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; }
.cta__text { color: #b7b7b7; max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta__actions .btn { padding: 15px 30px; font-size: 13px; }

/* --- footer ------------------------------------------------------------ */
.footer { background: var(--grey-100); border-top: 1px solid #e0e0dc; color: #2c2c2c; }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 34px;
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(40px, 4.5vw, 64px);
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .footer__grid > .footer__brand { grid-column: 1 / -1; margin-top: 30px;}
}
.footer__title {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 13.5px; }
.footer__list a { color: #4a4a4a; }
.footer__list a:hover { color: var(--brass-dark); }
.footer__brand { display: grid; gap: 18px; align-content: start; }
.footer__line { margin: 0 0 6px; font-size: 13.5px; color: #4a4a4a; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 34px;
  height: 34px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
}
.footer__social a:hover { border-color: var(--ink); }
.footer__social a svg { width: 22px; height: 22px; }
.footer__legal { border-top: 1px solid #e0e0dc; }
.footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 12px;
  color: var(--grey-500);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal-links a { color: var(--grey-500); }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 8px;
  }
  .nav.is-open { display: flex; }
  .nav__link {
    padding: 13px 2px;
    border-bottom: 1px solid var(--ink-line);
  }
  .nav__link.is-current { border-bottom-color: var(--brass); padding-bottom: 13px; }
  .nav__social { padding: 14px 0; }
  .nav__cta { margin-bottom: 6px; }
  .site-header__inner { flex-wrap: wrap; }
  .cta__actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .topbar { font-size: 10px; }
  .topbar__inner { justify-content: center; text-align: center; }
  .hero__links .btn { width: 100%; }
}

@media (max-width: 420px) {
  :root { --gut: 18px; }
}

/* The sticky 100vh reveal only holds while the form and the copy sit side by
   side. Once they stack (or the screen is short) the pair is too tall, so
   pinning it to one viewport would clip the booking form — flow it instead. */
@media (max-width: 900px), (max-height: 660px) {
  .hero, .hero.is-pinned, .hero.is-tall { position: relative; top: auto; bottom: auto; height: auto; }
  .hero__inner {
    height: auto;
    padding-top: clamp(34px, 6vw, 60px);
    padding-bottom: clamp(34px, 6vw, 60px);
  }
}

/* --- print ------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .hero__video { position: static; }
  .reveal { opacity: 1; transform: none; }
}

/* --- contact page: photo + get in touch -------------------------------- */
/* One section, nothing else: the room on the left, the details and the form
   on the right. The form keeps the hero's smoked panel. */
.gettouch { padding: clamp(30px, 3.6vw, 60px) 0 clamp(44px, 5vw, 80px); background: var(--white); }
.gettouch__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3.4vw, 58px);
  align-items: start;
}
.gettouch__photo {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: var(--grey-100);
}
.gettouch__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gettouch__title {
  margin: 0 0 22px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.gettouch__details { margin-bottom: clamp(22px, 2.6vw, 34px); font-size: 14.5px; line-height: 1.7; color: var(--grey-700); }
.gettouch__details p { margin: 0 0 6px; }
.gettouch__details strong { color: var(--ink); }
.gettouch__details a { color: var(--grey-700); }
.gettouch__details a:hover { color: var(--brass-dark); text-decoration: underline; }
.gettouch__hours { margin-top: 14px !important; font-size: 13px; color: var(--grey-500); }

/* no panel: the fields sit straight on the page, so the labels and chips
   flip to their light-background colours */
.cform { display: block; }
.gettouch .field { color: var(--grey-700); }
.gettouch .field__label,
.gettouch legend { color: var(--grey-700); }
.gettouch .times__cap { color: var(--grey-500); }
.gettouch .chips__chip {
  border-color: var(--grey-200);
  background: var(--grey-100);
  color: var(--grey-700);
}
.gettouch .chips__chip:hover { border-color: var(--brass); color: var(--brass-dark); }
.gettouch .chips__input:checked + .chips__chip {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
  color: var(--white);
}
.gettouch .enquiry__note { color: var(--grey-500); }
.gettouch .enquiry__note.is-error { color: #b3261e; }
.gettouch .enquiry__note.is-success { color: var(--brass-dark); }
.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.cform .field--wide { grid-column: 1 / -1; }
.cform .field { margin: 0; }
.cform fieldset { border: 0; margin: 0; padding: 0; }
.cform legend { padding: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-700); }
.cform textarea { margin-top: 10px; }
.cform__submit { margin-top: 18px; }
.field__label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-700); }

/* calendar / clock buttons sitting inside the field */
.field--pick, .times__slot { position: relative; }
.field--pick input[type="date"],
.times__slot input[type="time"] { padding-right: 38px; }
.field input::-webkit-calendar-picker-indicator { display: none; }
.field__pick {
  position: absolute;
  right: 6px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--grey-500);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.field__pick:hover { color: var(--brass-dark); background: rgba(0, 0, 0, .06); }

.times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 5px; }
.times__slot { display: block; }
.times__cap { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--grey-400); }

/* service chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 0; padding: 0; list-style: none; }
.chips__input { position: absolute; opacity: 0; pointer-events: none; }
.chips__chip {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #ddd7d2;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.chips__chip:hover { border-color: var(--brass); color: var(--white); }
.chips__input:checked + .chips__chip { background: var(--brass-dark); border-color: var(--brass-dark); color: var(--white); }
.chips__input:focus-visible + .chips__chip { outline: 2px solid var(--brass); outline-offset: 2px; }
.chips.has-error .chips__chip { border-color: rgba(179, 38, 30, .7); }

.field.has-error input,
.field.has-error textarea { border-color: var(--brass); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .gettouch__inner { grid-template-columns: 1fr; }
  .gettouch__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .cform__grid { grid-template-columns: 1fr; }
  .times { grid-template-columns: 1fr; }
  .cform__submit { width: 100%; }
}