/* ==========================================================================
   Mega Events — Mumbai
   Everything is scoped under .me-site so this can be dropped into a
   WordPress page later without colliding with a theme.
   Tokens: §4 of the brief. Signature device: "The Threshold".
   ========================================================================== */

/* ---------------------------------------------------------------- FONTS */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-italic-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('assets/fonts/inter-tight-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- TOKENS */
.me-site {
  --ink:       #16101C;
  --ink-soft:  #241A2E;
  --ivory:     #F5F1E9;
  --ivory-dim: #C9C0B6;
  --gold:      #C6A15B;
  --gold-lite: #E4CE9B;
  --rose:      #C2417A;

  --hair:      rgba(198, 161, 91, .28);
  --hair-soft: rgba(198, 161, 91, .16);
  --maxw:      1320px;
  --gutter:    clamp(20px, 5vw, 72px);
  --sec:       clamp(96px, 12vw, 180px);
  --bar-h:     62px;
  --ease:      cubic-bezier(.16, 1, .3, 1);

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (min-width: 900px) { .me-site { --bar-h: 56px; } }

/* ----------------------------------------------------------- BASE/RESET */
.me-site *,
.me-site *::before,
.me-site *::after { box-sizing: border-box; }

.me-site {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* nothing may ever hide behind the sticky action bar */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.me-site.is-locked { overflow: hidden; }

.me-site h1, .me-site h2, .me-site h3, .me-site h4,
.me-site p, .me-site figure, .me-site blockquote, .me-site ul, .me-site ol { margin: 0; }
.me-site ul, .me-site ol { padding: 0; list-style: none; }
.me-site img { display: block; max-width: 100%; height: auto; }
.me-site a { color: inherit; text-decoration: none; }
.me-site button, .me-site input, .me-site select, .me-site textarea {
  font: inherit; color: inherit; background: none; border: 0;
}

.me-site :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.me-site .sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------ TYPOGRAPHY */
.me-site h1, .me-site h2, .me-site h3, .me-site .figure {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -.02em;
}
.me-site h1 {
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  line-height: .96;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
}
.me-site h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
}
.me-site h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.015em;
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
}
.me-site em { font-style: italic; }

.me-site .eyebrow {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.me-site .lede { max-width: 62ch; }
.me-site .dim { color: var(--ivory-dim); }

/* --------------------------------------------------------------- LAYOUT */
.me-site .wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.me-site .section { padding-block: var(--sec); }
.me-site .section--ivory { background: var(--ivory); color: var(--ink); }
.me-site .section--ivory .dim { color: #5B5057; }

.me-site .rule {
  width: 64px; height: 1px; border: 0; margin: 0;
  background: var(--gold);
  opacity: .55;
}

/* ------------------------------------------- SIGNATURE DEVICE: THRESHOLD
   Two 1px gold hairlines angling inward ~2.2°, stopping short of the
   heading so the heading itself sits at the vanishing point. */
.me-site .threshold {
  position: relative;
  width: min(680px, 78%);
  height: 34px;
  margin: 0 auto 26px;
  pointer-events: none;
}
.me-site .threshold i {
  position: absolute; top: 0;
  display: block; width: 46%; height: 1px;
}
.me-site .threshold i:first-child {
  left: 0;
  transform-origin: left center;
  transform: rotate(2.2deg);
  background: linear-gradient(90deg, transparent, var(--gold));
}
.me-site .threshold i:last-child {
  right: 0;
  transform-origin: right center;
  transform: rotate(-2.2deg);
  background: linear-gradient(270deg, transparent, var(--gold));
}
.me-site .threshold--dim i:first-child { background: linear-gradient(90deg, transparent, rgba(198,161,91,.6)); }
.me-site .threshold--dim i:last-child  { background: linear-gradient(270deg, transparent, rgba(198,161,91,.6)); }

.me-site .head { text-align: center; }
.me-site .head .eyebrow { display: block; margin-bottom: 18px; }
.me-site .head h2 { margin-inline: auto; max-width: 16ch; }

/* --------------------------------------------------------- IMAGE / LQIP */
.me-site .ph {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-soft);
  background-size: cover;
  background-position: center;
}
.me-site .ph > img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.me-site .ph > img.is-in, .me-site.no-js .ph > img { opacity: 1; }

/* ============================================================ 6.1  HERO */
.me-site .hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0D0912;
}
.me-site .hero__media { position: absolute; inset: 0; }
.me-site .hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: kenburns 24s linear forwards;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* (a) directional grade  (b) vignette  (c) 3% film grain */
.me-site .hero__grade,
.me-site .hero__vig,
.me-site .hero__grain { position: absolute; inset: 0; pointer-events: none; }
.me-site .hero__grade {
  background: linear-gradient(180deg,
    rgba(22,16,28,.55) 0%, rgba(22,16,28,.12) 26%,
    rgba(22,16,28,.34) 46%, rgba(22,16,28,.66) 66%, rgba(22,16,28,.9) 100%);
}
.me-site .hero__vig {
  /* corner scrim under the type block, then the vignette. The type sits on the
     brightest part of the photograph — the floral bank — so it needs its own
     shadow rather than a heavier grade across the whole frame. */
  background:
    radial-gradient(115% 78% at 0% 100%,
      rgba(13,9,18,.86) 0%, rgba(13,9,18,.55) 34%, rgba(13,9,18,.16) 58%, rgba(13,9,18,0) 76%),
    radial-gradient(120% 85% at 50% 40%,
      rgba(22,16,28,0) 38%, rgba(22,16,28,.42) 78%, rgba(13,9,18,.72) 100%);
}
.me-site .hero__grain {
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.me-site .hero__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vw, 34px) var(--gutter) 0;
}
.me-site .brand { display: flex; align-items: center; gap: 12px; }
.me-site .brand img { width: 40px; height: 22px; object-fit: contain; }
.me-site .brand span {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .14em;
  font-variation-settings: 'opsz' 20;
}
.me-site .nav { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.me-site .nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(245,241,233,.8);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.me-site .nav a:hover { color: var(--ivory); border-color: var(--gold); }
@media (max-width: 719px) { .me-site .nav { display: none; } }

.me-site .hero__type {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 var(--gutter) clamp(84px, 14svh, 132px);
  max-width: 900px;
}
.me-site .hero__type .eyebrow {
  display: block;
  margin-bottom: clamp(18px, 2.4vh, 28px);
  color: var(--gold-lite);
}
.me-site .hero h1 { margin-bottom: clamp(20px, 2.6vh, 30px); }
.me-site .hero h1 em { font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; }
.me-site .hero__line {
  font-size: 17px;
  line-height: 1.6;
  max-width: 44ch;
  color: var(--ivory-dim);
}

.me-site .hero__rule {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--bar-h) + 26px);
  width: 1px; height: 56px;
  transform: translateX(-50%);
  background: rgba(198,161,91,.3);
  overflow: hidden;
}
.me-site .hero__rule::after {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 1px; height: 24px;
  background: linear-gradient(180deg, transparent, var(--gold) 60%, var(--rose));
  animation: wipe 2.4s var(--ease) infinite;
}
@media (max-width: 719px) {
  /* the phone hero is tighter: keep the rule clear of the standfirst */
  .me-site .hero__rule { bottom: calc(var(--bar-h) + 14px); height: 40px; }
}
@keyframes wipe {
  0%   { transform: translateY(-26px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

/* ======================================================= 6.2  STATEMENT */
.me-site .statement { text-align: center; }
.me-site .statement__col { max-width: 720px; margin-inline: auto; }
.me-site .statement .eyebrow { display: block; margin-bottom: clamp(28px, 4vw, 44px); }
.me-site .statement p:first-of-type {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.015em;
  font-variation-settings: 'opsz' 48;
  margin-bottom: 1.6em;
}
.me-site .statement p:last-of-type { margin-inline: auto; max-width: 56ch; }
.me-site .statement .rule { margin: clamp(44px, 6vw, 68px) auto 0; }

/* ========================================================= 6.3  NUMBERS */
.me-site .numbers { padding-block: clamp(64px, 8vw, 104px); }
.me-site .numbers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.me-site .numbers__cell {
  padding: clamp(30px, 4vw, 46px) clamp(10px, 2vw, 28px);
  text-align: center;
}
.me-site .numbers__cell:not(:first-child) { border-left: 1px solid var(--hair); }
.me-site .numbers .figure {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1;
  font-variation-settings: 'opsz' 72;
  margin-bottom: 14px;
}
.me-site .numbers .eyebrow { font-size: .75rem; }
.me-site .numbers a.figure { transition: color .3s ease; }
.me-site .numbers a.figure:hover { color: var(--gold-lite); }
.me-site .star { fill: var(--gold); vertical-align: -.06em; }

/* ======================================================== 6.4  SERVICES */
.me-site .services .head { margin-bottom: clamp(52px, 7vw, 84px); }
.me-site .svc-list { border-top: 1px solid rgba(22,16,28,.16); }
.me-site .svc { border-bottom: 1px solid rgba(22,16,28,.16); }
.me-site .svc > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: baseline;
  gap: 16px;
  padding: clamp(22px, 2.6vw, 30px) 0;
  cursor: pointer;
  list-style: none;
  transition: color .4s ease;
}
.me-site .svc > summary::-webkit-details-marker { display: none; }
.me-site .svc > summary:hover { color: #3B2E42; }
/* explicit placement: without it the one-line description auto-flows into the
   22px "+" column on narrow screens */
.me-site .svc > summary h3   { grid-column: 1; grid-row: 1; }
.me-site .svc__line          { grid-column: 1; grid-row: 2; }
.me-site .svc__plus          { grid-column: 2; grid-row: 1 / 3; }
@media (min-width: 900px) {
  .me-site .svc > summary {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 22px;
    align-items: baseline;
    gap: 32px;
  }
  .me-site .svc__line { grid-column: 2; grid-row: 1; }
  .me-site .svc__plus { grid-column: 3; grid-row: 1; }
}
.me-site .svc h3 { transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .me-site .svc > summary:hover h3 { transform: translateX(10px); }
}
.me-site .svc__line {
  display: block;
  font-size: .9375rem;
  line-height: 1.6;
  color: #5B5057;
  margin-top: 8px;
}
@media (min-width: 900px) { .me-site .svc__line { margin-top: 0; } }
.me-site .svc__plus {
  position: relative;
  width: 15px; height: 15px;
  justify-self: end;
  align-self: center;
  flex: none;
}
.me-site .svc__plus::before,
.me-site .svc__plus::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: var(--gold);
  transition: transform .5s var(--ease), opacity .3s ease;
}
.me-site .svc__plus::before { width: 15px; height: 1px; transform: translate(-50%, -50%); }
.me-site .svc__plus::after  { width: 1px; height: 15px; transform: translate(-50%, -50%); }
.me-site .svc[open] .svc__plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.me-site .svc__more {
  display: grid;
  gap: 20px;
  padding: 0 0 clamp(26px, 3vw, 34px);
  max-width: 60ch;
}
.me-site .svc__more p { font-size: .9375rem; line-height: 1.7; color: #5B5057; }
.me-site .svc__thumb { display: none; }
@media (hover: none), (pointer: coarse) {
  .me-site .svc__thumb {
    display: block;
    width: min(100%, 320px);
    aspect-ratio: 3 / 2;
  }
}

/* desktop cursor-follow thumbnail */
.me-site .follower {
  position: fixed;
  z-index: 60;
  top: 0; left: 0;
  width: 240px; height: 160px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: var(--ink-soft);
  border: 1px solid var(--hair);
  transition: opacity .35s ease;
  will-change: transform;
}
.me-site .follower img { width: 100%; height: 100%; object-fit: cover; }
.me-site .follower.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .me-site .follower { display: none; } }

/* ================================================= 6.5  SIGNATURE BREAK */
.me-site .break {
  position: relative;
  min-height: 78svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0D0912;
}
.me-site .break__media { position: absolute; inset: -6% 0; will-change: transform; }
.me-site .break__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.me-site .break::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,16,28,.42), rgba(22,16,28,.2) 42%, rgba(22,16,28,.55)),
    radial-gradient(85% 68% at 50% 52%, rgba(13,9,18,.52) 0%, rgba(22,16,28,.12) 46%, rgba(22,16,28,.5) 100%);
}
.me-site .break blockquote {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  font-variation-settings: 'opsz' 96;
  max-width: 20ch;
  text-align: center;
  padding-inline: var(--gutter);
  color: var(--ivory);
  text-wrap: balance;
}

/* =================================================== 6.6  SELECTED WORK */
.me-site .work .head { margin-bottom: clamp(52px, 7vw, 90px); }
.me-site .work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: clamp(16px, 2.2vw, 30px);
}
.me-site .tile {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
  padding: 0;
  grid-column: 1 / -1;
}
.me-site .tile .ph { width: 100%; height: 100%; }
.me-site .tile figcaption {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(13,9,18,.86), rgba(13,9,18,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s var(--ease);
}
.me-site .tile:hover figcaption,
.me-site .tile:focus-visible figcaption { opacity: 1; transform: none; }
.me-site .tile .ph > img { transition: opacity .6s ease, transform 1.2s var(--ease); }
.me-site .tile:hover .ph > img.is-in { transform: scale(1.03); }

/* tablets: two columns with a little unevenness, rather than six full-width
   photographs stacked in a line */
@media (min-width: 600px) and (max-width: 859px) {
  .me-site .tile--a { grid-column: 1 / 13; }
  .me-site .tile--b { grid-column: 1 / 7;  }
  .me-site .tile--c { grid-column: 7 / 13; margin-top: 52px; }
  .me-site .tile--d { grid-column: 1 / 10; }
  .me-site .tile--e { grid-column: 3 / 8;  }
  .me-site .tile--f { grid-column: 8 / 13; margin-top: 52px; }
}
@media (min-width: 860px) {
  .me-site .tile--a { grid-column: 1 / 8;  }
  .me-site .tile--b { grid-column: 9 / 13; }
  .me-site .tile--c { grid-column: 1 / 6;  }
  .me-site .tile--d { grid-column: 7 / 13; margin-top: 80px; }
  .me-site .tile--e { grid-column: 3 / 7;  margin-top: 80px; }
  .me-site .tile--f { grid-column: 8 / 12; }
}
.me-site .tile--a .ph { aspect-ratio: 16 / 10; }
.me-site .tile--b .ph { aspect-ratio: 3 / 4; }
.me-site .tile--c .ph { aspect-ratio: 4 / 3; }
.me-site .tile--d .ph { aspect-ratio: 16 / 9; }
.me-site .tile--e .ph { aspect-ratio: 3 / 4; }
.me-site .tile--f .ph { aspect-ratio: 4 / 3; }

.me-site .work__more {
  margin-top: clamp(60px, 8vw, 108px);
  text-align: center;
}
.me-site .link-rule {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gold);
  transition: color .3s ease, border-color .3s ease;
}
.me-site .link-rule:hover { color: var(--gold-lite); border-color: var(--gold-lite); }

/* ==================================================== 6.7  EXHIBITIONS */
.me-site .exhibit__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (min-width: 860px) {
  .me-site .exhibit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.me-site .exhibit .ph { aspect-ratio: 4 / 3; }
.me-site .exhibit .eyebrow { display: block; margin-bottom: 18px; }
.me-site .exhibit h2 { margin-bottom: 26px; }
.me-site .exhibit p { margin-bottom: 1.1em; max-width: 46ch; }
.me-site .exhibit .link-ink {
  display: inline-block;
  margin-top: 14px;
  font-size: .9375rem;
  font-weight: 500;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(22,16,28,.35);
  transition: border-color .3s ease;
}
.me-site .exhibit .link-ink:hover { border-color: var(--rose); }

/* ======================================================== 6.8  REVIEWS */
.me-site .reviews .head { margin-bottom: clamp(52px, 7vw, 84px); }
.me-site .reviews__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 340px);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 22px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* without this the first card snaps past the padding on load */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--hair) transparent;
}
.me-site .review {
  scroll-snap-align: start;
  border-top: 1px solid var(--hair);
  padding-top: 22px;
}
.me-site .review__stars { display: flex; gap: 3px; margin-bottom: 20px; }
.me-site .review p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.42;
  letter-spacing: -.015em;
  font-variation-settings: 'opsz' 48;
  margin-bottom: 22px;
}
.me-site .review cite { font-style: normal; display: block; }
.me-site .review cite b { font-weight: 500; font-size: .9375rem; display: block; }
.me-site .review cite span { font-size: .6875rem; letter-spacing: .18em; }
.me-site .reviews__foot {
  margin-top: clamp(44px, 6vw, 72px);
  text-align: center;
}

@media (min-width: 860px) {
  .me-site .reviews__rail {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
    gap: clamp(40px, 5vw, 76px) clamp(40px, 6vw, 96px);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .me-site .review:nth-child(even) { margin-top: 88px; }
  .me-site .review:nth-child(5) { grid-column: 1 / 2; margin-top: -40px; }
}

/* ================================================== 6.9  HOW WE WORK */
.me-site .process .head { margin-bottom: clamp(56px, 7vw, 92px); }
.me-site .process__grid {
  position: relative;
  display: grid;
  gap: clamp(34px, 4vw, 40px);
}
@media (min-width: 780px) {
  .me-site .process__grid { grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); }
  /* the spine the converging rules feed into */
  .me-site .process__grid::before {
    content: '';
    position: absolute;
    top: 5px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(22,16,28,.28) 12%, rgba(22,16,28,.28) 88%, transparent);
  }
}
.me-site .step { position: relative; padding-top: 34px; }
.me-site .step::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 1px; height: 22px;
  background: var(--gold);
}
.me-site .step .num {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 12px;
}
.me-site .step h3 { margin-bottom: 12px; }
.me-site .step p { font-size: .9375rem; line-height: 1.65; color: #5B5057; max-width: 34ch; }

/* ======================================================== 6.10 ENQUIRY */
.me-site .enquiry__grid { display: grid; gap: clamp(56px, 7vw, 96px); }
@media (min-width: 900px) {
  .me-site .enquiry__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 110px); }
}
.me-site .enquiry .eyebrow { display: block; margin-bottom: 18px; }
.me-site .enquiry h2 { margin-bottom: clamp(34px, 4vw, 48px); }

.me-site .field { position: relative; margin-bottom: 34px; }
.me-site .field input,
.me-site .field select,
.me-site .field textarea {
  width: 100%;
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--ivory-dim);
  border-radius: 0;
  font-size: 1rem;
  color: var(--ivory);
  transition: border-color .35s ease;
  -webkit-appearance: none;
  appearance: none;
}
.me-site .field textarea { resize: vertical; min-height: 86px; }
.me-site .field select { cursor: pointer; }
.me-site .field select option { background: var(--ink); color: var(--ivory); }
.me-site .field label {
  position: absolute;
  left: 0; top: 11px;
  font-size: 1rem;
  color: var(--ivory-dim);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .35s var(--ease), color .35s ease;
}
.me-site .field input:focus,
.me-site .field select:focus,
.me-site .field textarea:focus { outline: none; border-color: var(--gold); }
.me-site .field input:focus + label,
.me-site .field textarea:focus + label,
.me-site .field input:not(:placeholder-shown) + label,
.me-site .field textarea:not(:placeholder-shown) + label,
.me-site .field select + label,
.me-site .field input[type='date'] + label,
.me-site .field.is-filled label {
  transform: translateY(-26px) scale(.75);
  color: var(--gold);
}
.me-site .field select:focus + label { color: var(--gold); }
.me-site .field select { margin-top: 4px; }
.me-site .field--select { padding-top: 8px; }
.me-site .field::after {
  content: '';
  position: absolute; right: 2px; bottom: 16px;
  pointer-events: none;
}
.me-site .field--select::after {
  width: 7px; height: 7px;
  border-right: 1px solid var(--ivory-dim);
  border-bottom: 1px solid var(--ivory-dim);
  transform: rotate(45deg);
}
.me-site .err {
  display: block;
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--gold-lite);
  min-height: 0;
}
.me-site .field.is-bad input,
.me-site .field.is-bad textarea,
.me-site .field.is-bad select { border-color: var(--rose); }

.me-site .submit {
  margin-top: 8px;
  padding: 15px 34px;
  background: var(--ivory);
  color: var(--ink);
  border-radius: 2px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, transform .3s var(--ease);
}
.me-site .submit:hover { background: var(--gold-lite); }
.me-site .form__note { margin-top: 18px; font-size: .8125rem; color: var(--ivory-dim); }

.me-site .contact dl { display: grid; gap: 28px; margin: 0; }
.me-site .contact dt {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.me-site .contact dd { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--ivory-dim); max-width: 34ch; }
.me-site .contact dd a { border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: border-color .3s ease, color .3s ease; }
.me-site .contact dd a:hover { color: var(--ivory); border-color: var(--gold); }
.me-site .map {
  margin-top: 40px;
  border: 1px solid var(--hair);
  aspect-ratio: 3 / 2;
  background: var(--ink-soft);
}
.me-site .map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) hue-rotate(180deg) contrast(.86); }

/* ========================================================= 6.11 FOOTER */
.me-site .foot { border-top: 1px solid var(--hair); padding-block: clamp(46px, 6vw, 70px) clamp(40px, 5vw, 56px); }
.me-site .foot__grid {
  display: grid;
  gap: 30px;
  align-items: center;
}
@media (min-width: 780px) {
  .me-site .foot__grid { grid-template-columns: auto 1fr auto; gap: 44px; }
}
.me-site .foot img { width: 46px; height: 26px; object-fit: contain; }
.me-site .foot__line { font-size: .875rem; color: var(--ivory-dim); }
.me-site .foot__links { display: flex; gap: 26px; }
.me-site .foot__links a {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  transition: color .3s ease;
}
.me-site .foot__links a:hover { color: var(--gold); }
.me-site .foot__copy { margin-top: 34px; font-size: .75rem; color: rgba(201,192,182,.6); }

/* ==================================================== STICKY ACTION BAR */
.me-site .bar {
  position: fixed;
  z-index: 50;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(22, 16, 28, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  transition: opacity .3s ease, transform .3s ease;
}
.me-site .bar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  color: var(--ivory);
  transition: color .3s ease;
}
.me-site .bar__cell + .bar__cell { border-left: 1px solid rgba(198,161,91,.22); }
.me-site .bar__cell:hover { color: var(--gold-lite); }
.me-site .bar__cell svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.me-site .bar__cell span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .me-site .bar {
    left: 50%; right: auto; bottom: 20px;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 48px));
    height: var(--bar-h);
    border: 1px solid var(--hair);
    border-radius: 2px;
  }
}
.me-site.is-locked .bar { opacity: 0; pointer-events: none; transform: translateY(12px); }
@media (min-width: 900px) { .me-site.is-locked .bar { transform: translateX(-50%) translateY(12px); } }

/* ============================================================= LIGHTBOX */
.me-site .lb {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  background: rgba(22, 16, 28, .97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.me-site .lb.is-open { display: grid; grid-template-rows: 1fr auto; }
.me-site .lb__stage { position: relative; display: grid; place-items: center; padding: 56px 16px 24px; min-height: 0; }
.me-site .lb__img {
  max-width: min(100%, 1280px);
  max-height: 86svh;
  width: auto; height: auto;
  object-fit: contain;
}
/* "The Threshold": curtains parting */
.me-site .lb__img.is-entering {
  animation: threshold .48s var(--ease) both;
}
@keyframes threshold {
  from { clip-path: inset(0 48% 0 48%); opacity: .2; }
  to   { clip-path: inset(0 0 0 0);     opacity: 1; }
}

.me-site .lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  cursor: pointer;
  color: var(--ivory);
  transition: color .3s ease;
}
.me-site .lb__btn:hover { color: var(--gold); }
.me-site .lb__btn svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.me-site .lb__prev { left: clamp(4px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.me-site .lb__next { right: clamp(4px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.me-site .lb__close { right: clamp(8px, 2vw, 22px); top: 14px; }
.me-site .lb__close svg { width: 24px; height: 24px; }

.me-site .lb__foot { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.me-site .lb__count {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--gold);
}
.me-site .lb__cap { display: block; margin-top: 8px; font-size: .8125rem; color: var(--ivory-dim); }
.me-site .lb__rail { display: none; }
@media (min-width: 900px) {
  .me-site .lb__rail {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 4px;
  }
  .me-site .lb__rail button {
    width: 54px; height: 34px;
    padding: 0;
    cursor: pointer;
    opacity: .38;
    border: 1px solid transparent;
    transition: opacity .3s ease, border-color .3s ease;
  }
  .me-site .lb__rail button img { width: 100%; height: 100%; object-fit: cover; }
  .me-site .lb__rail button:hover { opacity: .75; }
  .me-site .lb__rail button[aria-current='true'] { opacity: 1; border-color: var(--rose); }
}


.me-site .field input[type='date'] { color-scheme: dark; }
.me-site .field input[type='date']::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
.me-site .review cite .eyebrow { display: block; margin-top: 7px; }
.me-site .lb[hidden] { display: none; }

/* ============================================================== MOTION */
.me-site [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.me-site [data-reveal].is-in { opacity: 1; transform: none; }
.me-site.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .me-site *, .me-site *::before, .me-site *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .me-site [data-reveal] { opacity: 1; transform: none; }
  .me-site .ph > img { opacity: 1; }
}

/* ------------------------------------------------------- print sanity */
@media print {
  .me-site .bar, .me-site .lb, .me-site .follower { display: none !important; }
}

/* --------------------------------------------------- LQIP PLACEHOLDERS
   20px blurred previews, inlined so they arrive with the stylesheet. */
.me-site .ph--stage { background-image: url(data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAADwAwCdASoUAAsAPulgqE0pJaQiMAgBIB0JagCdMoACqEIe3N2LHtgAAP7sW3Gw0aW3upLotqjzmhPNoaP8Unc+BBFeZzkve3q5pnfv9CX+ikHT2sxCPbA7k9wymf/ZySYf//s5I4AFDlwXZPkgONAA); }
.me-site .ph--tunnel { background-image: url(data:image/webp;base64,UklGRmoAAABXRUJQVlA4IF4AAADQAwCdASoUAA8APuleqE0pJSQiMAgBIB0JYwC/OBEVFUTcE/ZF4AAA2xpxatllTP5Sguvz5+zh2fAo/uThDNFA/AEUQb8TQdT+TNHhbetKNDU3/aMI7j1aurJ6AAAA); }
.me-site .ph--corridor { background-image: url(data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAADwAwCdASoUAA0APulgqU2pJaQiMAgBIB0JbACdMoR3ABOfwg14wSQAAM4XmQ1P8EBFV4KXLAVgv1UJ8HKn2axGypF8q422FX12q8jtxct5KQafOSUEwhPqwL/Z0UywajCRS89DfAA=); }
.me-site .ph--passage { background-image: url(data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAABwBACdASoUAAsAPulgqE0pJaOiMAgBIB0JbACdMoRwAB0Nl8za7yt7diBpAAD8Ln0/bCnNgggEEXFpOTL5uJxjdwUsBxqS/pn8MWmm9nnMRPPIYFBV/NHqVnqKfn0zxSVFgCn4CuVOqA+503uuAAAA); }
.me-site .ph--banquet { background-image: url(data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAADQAwCdASoUAA8APuleqE0pJSOiMAgBIB0JQBOgAodd1F2HHb1qO0AA/uzba5+KxTMnAaM24L52G8Y9MpNiuqXT9UQMZt4rg/bWvgvLksRPf3LP0yZpijbCee6b9thTtCAtfyuhGYZvXPTTNWn0owJ7QAA=); }
.me-site .ph--mainstage { background-image: url(data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAAAQBQCdASoUAA8APuleqE0pJSQiMAgBIB0JaACdMoR3Ir/S/4DyJsh28L7+kJidbZAAAP7pl5vyQUwmLmK0Kvh3ORVithD8CqCm9kmCTDqK26sB0v2nIlnjht62JeQjOxu8AhoNTkP4UIzVRvMW5klzDBM/HctZveoLPEyk/ksAAA==); }
.me-site .ph--carnival { background-image: url(data:image/webp;base64,UklGRm4AAABXRUJQVlA4IGIAAADwAwCdASoUAAsAPulgqE2pJaOiMAgBIB0JaACdMoADUpcdXmO5Vel2APfa5/r6yOzn3VHtzhdfgv2J/d76ODjJ7Q16Nn5dOUmhr8u5HX67Fto4JNt/10QbLnUbeWgD8oAAAA==); }
.me-site .ph--rockstar { background-image: url(data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAABQBACdASoUAAsAPuleqE0pJSOiMAgBIB0JbACdMoRgC3AA9B8ahLpUbNgAAMonMhusftccbke8u7GbGpUWxozvoByJyUgIZQrMn5JZe2F7edOERwekYdKqPq/vR1PyjXA2IVsIj6S8xgZZ7QQjSkI8ufX0AAAA); }
.me-site .ph--lights-camera { background-image: url(data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAADwAwCdASoUAAsAPulgp00pJaOiMAgBIB0JbACdLwABYgW3jW4SO5EMAP35t7XZucuz2rUrKLs2aFWQYUxYaJTjGHHuA0DOK/drmm2aIYufBmlqWXTsc5HLdJ+rw6KhwQzyocpNyueK4CgsLIPF3Lr8O1hAAAAA); }
.me-site .ph--carriage { background-image: url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAABQBQCdASoUABsAPulqrVGpJaQiqAgBIB0JZACdL3+Al0QWmyhp4Rp8jtXAvTFSteN6UgAA1MSi+mmf0UGNtW/zAgocy8ag0rmcoY7SjVyG6SGFH1J78yw1zZVHRSOUdEMZbZBVju83HFTsRo+QUyQKwg2w8s1DFj990kTEsG2yvWdfCoyUfOQAWAsc92Np+dvuDUpB/O90oq/9cVNjXKAA); }
.me-site .ph--exhibition { background-image: url(data:image/webp;base64,UklGRsIAAABXRUJQVlA4ILYAAAAwBQCdASoUABsAPuloq1ApJaOiqAqpIB0JYgCxHw6J4uK2r6YO07mxe6rQa53sN7f6AAD7Dfn1iICk8dMgbH/t2TEiRroK0oZzWvfQ9jo+qfaYesirECd48aduOkFWGT4qSe0B4sXfJfi/BZLd+SjNra+Hkz6aR1LI5FxP2kCUDVQwxs8lPQRiJ7Zilaq4NEsqkAoUk4ynAc7De5jJfmDXEtSadXyhqhBzDQg+STJr8UvFQAAAAA==); }
.me-site .ph--school { background-image: url(data:image/webp;base64,UklGRoQAAABXRUJQVlA4IHgAAAAwBACdASoUAA8APulep00pJSOiMAgBIB0JZgCdMoADMeuITdrMarpnUsAAyx+hXNdTnZwcgcnKaqFzA6mxx8yteQ3pU0uIPI5Mt5MVn8ybFqrBZR3bqqSl/HhUzoo3Oc7qthUcj54vELrm+ZDMwWcVkWJPzsy7YAA=); }
.me-site .ph--dolphin { background-image: url(data:image/webp;base64,UklGRnoAAABXRUJQVlA4IG4AAADQAwCdASoUAA8APuleqE0pJSQiMAgBIB0JQBOkBsgurJOQDOCTyYAAzP54xYUxtM1b+4MOD2e09Yu7dGohRAzAFClf0JltYTDUItdXf01Wuptsagg+SHPr1SMlJ/xMphLzxHc8WEt3bruRTdHgAA==); }
.me-site .ph--felicitation { background-image: url(data:image/webp;base64,UklGRuwAAABXRUJQVlA4IOAAAACwBgCdASoUACQAPulssVGpJaSipWmZIB0JYgCsM2J73EVoOdzl2t3WVt33g6jpWgOnK9L4hMIcB0AutiJLVAD+y/emojZsgYB7EFD7t9KZvEAezlVt30I7BraKBzzjS1rQpoU+EJJ9B4QDWKFX75q3gKB4FrlVhhK2NiyVE+j9RWIloA2zFIPBE55f8cMrHdSLbld/mOaJFUwfEUyo/Z/Aiwv0dshrWCJGbg99CwlkE3acIu5BeJ03XlqdiP/VlNj0Q6yWY6+PobKF6ZHuJd5FcRmeml9cfaWjbQ/cmAAAAA==); }
.me-site .ph--mandap { background-image: url(data:image/webp;base64,UklGRmoAAABXRUJQVlA4IF4AAACwAwCdASoUAA0APuleqE0pJSQiMAgBIB0JZACw7CEpL4HCPvdY0AD+2tJNfZA5NBm+ve2EkkuFFZ41Wu0LJ1NUvObmXJ6L7Ga3S5trcjEqQ2evMKibpq59qXX5nBIA); }
.me-site .ph--exhibition-warm { background-image: url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAADwAwCdASoUABAAPuleqE0pJSQiMAgBIB0JYgCdACIF8gsIa8H+BKEAAPWdpYiPcc3mdWOgleOZTXab/6Dv4FqshvcyyViwvPNoOFHEhZ1Mg2yPhc3H/ccUyRBYjObAX3sJNOv5FiQSJUnq5KWgROUdtfwshrp4dVb4zzsTAnl/rQAA); }