/* ==========================================================================
   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 {
  margin-left: -10px;
  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(--bk-solid, 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; }
/* no video — a plain dark ground with a warm bokeh glow sitting low-left,
   the way a single practical light reads in a photograph of the room */
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46vw 46vw at 18% 78%, rgba(217, 164, 90, .34) 0%, rgba(217, 164, 90, .16) 32%, rgba(217, 164, 90, 0) 62%),
    radial-gradient(34vw 34vw at 100% 0%, rgba(217, 164, 90, .16) 0%, rgba(217, 164, 90, 0) 65%);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 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,
.field select {
  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 select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; }
.field select option { background: #fff; color: var(--ink); }
.field input:focus,
.field textarea:focus,
.field select: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__head--left .section__lead { margin-left: 0; margin-right: auto; }
/* centered on desktop, left-aligned once the layout stacks on mobile */
@media (max-width: 760px) {
  .section__head--left-mobile { text-align: left; }
  .section__head--left-mobile .section__lead { margin-left: 0; margin-right: auto; }
}
.section__title em { font-style: italic; font-weight: 400; color: var(--brass); }
.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);
}
/* Seven cards, four per row: all cards share the same width and ratio, and
   the shorter second row (3 cards) centers itself under the first. */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 16px);
}
.service-card { flex: 0 0 calc(25% - clamp(10px, 1.1vw, 16px) * 3 / 4); }
.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: 900px) {
  /* two up, with any odd last card centered */
  .service-card { flex-basis: calc(50% - clamp(10px, 1.1vw, 16px) / 2); aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
  .service-card { aspect-ratio: 3 / 5; }
}
@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 ----------------------------------------------------------- */
/* the same 4-up row as before, but scrollable: swipe or use the arrows to
   slide through anything past the first four */
.review-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  gap: 18px;
}
.review-grid::-webkit-scrollbar { display: none; }
.review-grid .review {
  flex: 0 0 calc((100% - 3 * 18px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .review-grid .review { flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width: 560px) {
  .review-grid .review { flex-basis: 100%; }
}
.review {
  margin: 0;
  background: var(--white);
  border: 1px solid #ebe8e0;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 24px rgba(20, 18, 12, .05);
}
.review__head { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  flex: 0 0 auto;
}
.review__avatar--1 { background: #1a7a5e; }
.review__avatar--2 { background: #2f7ea6; }
.review__avatar--3 { background: #c14e7a; }
.review__avatar--4 { background: #3b8a5a; }
.review__avatar--5 { background: #b4762b; }
.review__avatar--6 { background: #6a5aa8; }
.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; }
.review__quote { margin: 0; font-size: 14px; color: var(--grey-700); line-height: 1.6; }
.review__more { align-self: flex-start; font-size: 13px; font-weight: 600; color: #1a56db; }
.review__more:hover { text-decoration: underline; }

.review-carousel { position: relative; }
.review-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  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(--ink); width: 8px; height: 8px; }

/* the review carousel runs at every width — scoped by id so the area
   carousel (which shares .review-nav / .review-dots) keeps its own,
   mobile-only behaviour untouched */
#reviewPrev, #reviewNext { display: flex; }
#reviewDots { display: flex; }

@media (max-width: 760px) {
  .review-nav { display: flex; }
  .review-dots { display: flex; }
}

/* --- 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%);
}

/* --- occasion / area grid: bordered cells, numbered, centered ------------ */
.occasion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--bk-line, #26262b);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 28px;
}
.occasion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 34px);
  border-right: 1px solid var(--bk-line, #26262b);
  border-bottom: 1px solid var(--bk-line, #26262b);
  transition: background .25s ease;
}
.occasion-card:hover { background: rgba(255, 255, 255, .03); }
.occasion-card:nth-child(3n) { border-right: none; }
.occasion-card:nth-last-child(-n+3) { border-bottom: none; }
.occasion-card__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--brass);
}
.occasion-card__name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.occasion-card__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bk-text-dim);
}
.occasion-grid--left .occasion-card { align-items: flex-start; text-align: left; }
@media (max-width: 760px) {
  .occasion-grid { grid-template-columns: repeat(2, 1fr); }
  .occasion-card:nth-child(3n) { border-right: 1px solid var(--bk-line, #26262b); }
  .occasion-card:nth-child(2n) { border-right: none; }
  .occasion-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--bk-line, #26262b); }
  .occasion-card:nth-last-child(-n+2) { border-bottom: none; }
}

/* --- 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: var(--bk-text); }
.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(--bk-text);
}
.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%; }
}

/* ==========================================================================
   ALL-BLACK TREATMENT
   Every band is black, but no two are the same black. The differences are in
   the pigment itself — tone and colour cast, no texture: pure, carbon,
   espresso, midnight, slate, wine, charcoal, graphite.
   ========================================================================== */
:root {
  --bk-solid:     #000000;  /* pure black                              */
  --bk-graphite:  #26262a;  /* lightest, cool, sits forward            */
  /* two-tone alternation (matches divineshots.co.uk) — the sections from
     #services down to the footer step between these, never a hue change,
     just a hair of lightness so each band reads as its own without
     announcing itself */
  --bk-alt-a:     #131317;
  --bk-alt-b:     #0d0d10;
  --bk-line:      rgba(255, 255, 255, .1);
  --bk-line-soft: rgba(255, 255, 255, .06);
  --bk-text:      #d7d3cf;
  --bk-text-dim:  #948d86;
}

body { background: var(--bk-solid); color: var(--bk-text); }

/* nav: graphite, the coolest and lightest black on the page */
.site-header { background: var(--bk-graphite); border-bottom-color: var(--bk-line); box-shadow: 0 2px 14px rgba(0, 0, 0, .6); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.site-header.is-stuck { border-bottom-color: var(--bk-line); box-shadow: 0 6px 24px rgba(0, 0, 0, .7); }
.logo, .logo:hover { color: var(--white); }
.nav__link { color: var(--bk-text); }
.nav__link:hover { color: var(--brass); }
.nav__link.is-current { color: var(--white); }
.nav__link::after { background: var(--brass); }
.nav__social a { background: rgba(255, 255, 255, .05); border-color: var(--bk-line); }
.nav__social a:hover { background: rgba(255, 255, 255, .1); border-color: var(--brass); }
.nav-toggle { background: rgba(255, 255, 255, .05); border-color: var(--bk-line); }
.nav-toggle span { background: var(--white); }
.topbar { background: var(--bk-solid); border-bottom-color: var(--bk-line-soft); }

/* section-to-section rhythm from here down: alternate the two near-black
   tones so each band separates from its neighbour without a colour shift */
#services { background: var(--bk-alt-a); }
#occasions { background: var(--bk-solid); }
#reviews { background: var(--bk-alt-b); border-color: var(--bk-line-soft); }
#gallery { background: var(--bk-alt-b); border-color: var(--bk-line-soft); }
.cta { background: var(--bk-alt-a); }
.footer { background: var(--bk-alt-b); border-top: 1px solid var(--bk-line); color: var(--bk-text); }
/* contact page: solid black behind the photograph and the form */
.gettouch { background: var(--bk-solid); }

/* --- type ---------------------------------------------------------------- */
.section__title,
.section__title--center,
.h2, .h3, .brandhead__name,
.gallery__head h2, .cta__title { color: var(--white); }
.section__lead, .section__foot, .gallery__lead, .cta__text, .run__foot { color: var(--bk-text-dim); }
.section__lead--on-dark { color: var(--bk-text-dim); }
.eyebrow { color: var(--brass); }
.section__flourish, .brandhead__flourish { color: var(--brass); }
p, li { color: var(--bk-text); }
a { color: var(--bk-text); }
a:hover { color: var(--brass); }

/* --- panels that used to be white ---------------------------------------- */
.review {
  background: rgba(255, 255, 255, .035);
  border-color: var(--bk-line);
  box-shadow: none;
}
.review__name { color: var(--white); }
.review__quote { color: var(--bk-text); }
.review__meta { color: var(--bk-text-dim); }
.review__more { color: var(--brass); }
.review-nav { background: rgba(255, 255, 255, .12); }
.review-dots span { background: rgba(255, 255, 255, .25); }
.review-dots span.is-active { background: var(--brass); }

.stats { background: var(--bk-line); border-color: var(--bk-line); }
.stat { background: rgba(255, 255, 255, .035); }
.stat__num { color: var(--white); }
.stat__label { color: var(--bk-text-dim); }

.brand-orb { background: rgba(255, 255, 255, .05); border-color: var(--bk-line); color: var(--bk-text); box-shadow: 0 0 0 6px rgba(255, 255, 255, .02); }
.trustbar { background: var(--bk-graphite); border-bottom-color: var(--bk-line); }
.trustbar__item { color: var(--bk-text); }
.trustbar__stars { color: #f2b40b; }

/* the print wall keeps its white paper — that is the point of a print */
.polaroid, .strip { box-shadow: 0 16px 40px rgba(0, 0, 0, .7); }
.ig-card { border-color: var(--bk-line); }

/* --- contact page -------------------------------------------------------- */
.gettouch__title { color: var(--white); }
.gettouch__details { color: var(--bk-text); }
.gettouch__details strong { color: var(--white); }
.gettouch__details a { color: var(--bk-text); }
.gettouch__details a:hover { color: var(--brass); }
.gettouch__hours { color: var(--bk-text-dim); }
.gettouch .field,
.gettouch .field__label,
.gettouch legend { color: var(--bk-text); }
.gettouch .times__cap { color: var(--bk-text-dim); }
.gettouch .chips__chip {
  background: rgba(255, 255, 255, .05);
  border-color: var(--bk-line);
  color: var(--bk-text);
}
.gettouch .chips__chip:hover { border-color: var(--brass); color: var(--white); }
.gettouch .chips__input:checked + .chips__chip { background: var(--brass-dark); border-color: var(--brass); color: var(--white); }
.gettouch .enquiry__note { color: var(--bk-text-dim); }
.gettouch .field__pick { color: var(--bk-text-dim); }
.gettouch .field__pick:hover { color: var(--brass); background: rgba(255, 255, 255, .08); }

/* --- footer -------------------------------------------------------------- */
.footer__title { color: var(--white); }
.footer__list a, .footer__legal-links a { color: var(--bk-text); }
.footer__list a:hover, .footer__legal-links a:hover { color: var(--brass); }
.footer__legal { border-top-color: var(--bk-line); color: var(--bk-text-dim); }
.logo__img--dark { filter: invert(1) brightness(1.7); }
.footer__social a { border-color: var(--bk-line); }
.footer__social a svg { fill: var(--bk-text); }

/* --- edges between the bands --------------------------------------------- */
/* a hairline so two adjacent blacks never look like one flat field */
.section + .section,
.cta, .footer { border-top: 1px solid var(--bk-line-soft); }

/* --- Review modal --------------------------------------------------------- */
.rmodal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.rmodal[hidden] { display: none; }
.rmodal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.rmodal__panel {
  position: relative; z-index: 1;
  background: #1a1a1a; color: #e8e8e8;
  border-radius: 12px;
  width: min(640px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.rmodal__close {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #888;
  padding: 4px 8px; border-radius: 4px;
}
.rmodal__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.rmodal__header {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 22px;
}
.rmodal__glogo { flex-shrink: 0; margin-top: 3px; }
.rmodal__platform-title { font-size: 18px; font-weight: 700; margin: 0 0 2px; color: #fff; }
.rmodal__rating-line { font-size: 13px; color: #aaa; margin: 0 0 4px; }
.rmodal__score { font-weight: 700; color: #e8e8e8; }
.rmodal__stars { color: #f5a623; font-size: 18px; letter-spacing: 1px; margin: 0; }

/* individual review entries inside the modal */
.rmodal__entry { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rmodal__entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rmodal__ehead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rmodal__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.rmodal__entry-name { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 5px; }
.rmodal__entry-meta { font-size: 12px; color: #999; display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.rmodal__entry-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; }
.rmodal__entry-text { font-size: 14px; line-height: 1.65; color: #ccc; margin: 0; }
.rmodal__owner-reply {
  background: rgba(255,255,255,.06); border-radius: 6px;
  padding: 12px 14px; margin-top: 14px;
  font-size: 13px; color: #bbb;
}
.rmodal__owner-label { font-weight: 700; font-size: 12px; color: #e8e8e8; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.rmodal__owner-badge { background: rgba(255,255,255,.15); border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #ccc; }

/* ==========================================================================
   Photo booths page (/photo-booths/)
   Reuses .eyebrow--gold / .hero__title / .hero__links / .btn from the home
   hero, .section__title / .section__lead from the shared section head, and
   the --bk-* tokens so the bands alternate the same way #services→#gallery
   do on the home page.
   ========================================================================== */
/* a small bar, not a hero — title + one line of context, nothing else */
.page-hero { position: relative; background: var(--bk-solid); overflow: hidden; padding: clamp(28px, 3.4vw, 40px) 0; }
.page-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(46vw 46vw at 12% 8%, rgba(217, 164, 90, .22) 0%, rgba(217, 164, 90, .08) 35%, rgba(217, 164, 90, 0) 65%);
}
.page-hero__inner { position: relative; }
.page-hero .section__head { margin-bottom: 0; }
.page-hero .section__title { max-width: 20ch; }

/* --- booth section (twin photos + numbered feature list) ------------------
   One block per booth. The bands alternate the two near-blacks so each
   section separates from the one above without a colour shift. */
.booth { padding: clamp(48px, 6vw, 88px) 0; background: var(--bk-alt-b); }
.booth--alt { background: var(--bk-alt-a); }
.booth + .booth { border-top: 1px solid var(--bk-line-soft); }
/* stretch, not centre: the photo column takes its height from the feature
   list beside it, so the two sides always finish level */
.booth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.booth__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.booth__photo {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--bk-line);
}
.booth__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--bk-line);
}
.booth__item:last-child { border-bottom: 1px solid var(--bk-line); }
.booth__num { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--brass); }
.booth__item-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}
.booth__item-text { margin: 0; max-width: 48ch; font-size: 14.5px; line-height: 1.6; color: var(--bk-text-dim); }
.booth__cta { letter-spacing: .14em; }
.booth__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 860px) {
  /* stacked: nothing to match heights with, so the photos carry their own crop */
  .booth__grid { grid-template-columns: 1fr; }
  .booth__photo { aspect-ratio: 3 / 4; }
}
@media (max-width: 420px) {
  .booth__photos { gap: 10px; }
}

/* avatar colours inherit from the shared .review__avatar--N rules above */