/* ==========================================================================
   Grace Villa — foundation: tokens, reset, type, layout, nav, buttons, footer
   ========================================================================== */

:root {
  /* surface */
  --ink:        #06060A;
  --ink-2:      #0B0B11;
  --ink-3:      #11111A;
  --ink-4:      #181823;
  --line:       rgba(198, 161, 91, .17);
  --line-soft:  rgba(242, 237, 227, .09);

  /* brand */
  --gold:       #C6A15B;
  --gold-lt:    #E9D2A0;
  --gold-hi:    #F6E7C4;
  --gold-dk:    #8A6E35;
  --ivory:      #F2EDE3;
  --mist:       rgba(242, 237, 227, .60);
  --mist-dim:   rgba(242, 237, 227, .38);
  --rose:       #C77A6A;
  --jade:       #6FA88C;

  /* type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --pad:      clamp(20px, 5vw, 76px);
  --section:  clamp(84px, 11vw, 168px);
  --maxw:     1380px;
  --radius:   2px;

  /* motion */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.65, 0, .35, 1);
  --slow:      1.1s;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .012em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; height: 100vh; }

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* A browser's own stylesheet gives <figure> `margin: 1em 40px`. Every figure
   here is a grid or flex item — the occasion clips, the testimonials, the
   rail cards — so that margin was quietly insetting them 40px on each side
   and pulling them out of line with the headings above them. */
figure { margin: 0; }

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

/* thin gold scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-dk), var(--gold));
  border-radius: 9px;
}

/* --------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.012em;
  margin: 0;
}

.h-xl { font-size: clamp(3rem, 9.5vw, 8.4rem); }
.h-lg { font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.h-md { font-size: clamp(1.8rem, 3.2vw, 2.9rem); }
.h-sm { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }

.italic { font-style: italic; color: var(--gold-lt); }

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  animation: lineBreathe 3.4s var(--ease) infinite;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  animation: lineBreathe 3.4s var(--ease) infinite .4s;
}

@keyframes lineBreathe {
  0%, 100% { transform: scaleX(1);   opacity: .55; }
  50%      { transform: scaleX(1.5); opacity: 1;   }
}

.lede {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  color: var(--mist);
  max-width: 58ch;
  line-height: 1.85;
}

.muted { color: var(--mist-dim); }

/* gold gradient text with a slow travelling sheen */
.gold-text {
  background: linear-gradient(100deg, var(--gold-dk) 0%, var(--gold-hi) 28%, var(--gold) 52%, var(--gold-hi) 74%, var(--gold-dk) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldFlow 9s linear infinite;
}
@keyframes goldFlow {
  to { background-position: -260% 0; }
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section); position: relative; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.g-2  { grid-template-columns: repeat(2, 1fr); }
.g-3  { grid-template-columns: repeat(3, 1fr); }
.g-4  { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}

.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.row      { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.row-end  { display: flex; align-items: center; gap: 16px; justify-content: flex-end; flex-wrap: wrap; }
.center   { text-align: center; }
/* A lede is a 58ch box, so centring its text is not enough — the box itself
   has to be centred too, or a short paragraph sits flush left under a
   centred heading. That covers a lede inside something centred, a lede
   marked centred itself, and every confirmation panel. */
.center .lede,
.lede.center,
.confirm .lede { margin-inline: auto; }

/* hairline rule that sweeps a highlight across itself, forever */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: translateX(-100%);
  animation: ruleSweep 6s var(--ease) infinite;
}
@keyframes ruleSweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%);  }
}

/* --------------------------------------------------------------- ambient */

/* fixed film-grain + vignette over the whole document */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* the grain layer is deliberately oversized; clip it so it cannot widen
     the document and introduce a horizontal scrollbar */
  overflow: hidden;
}
.ambient__grain {
  position: absolute;
  inset: -120%;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 700ms steps(4) infinite;
}
@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, -3%, 0); }
  50%  { transform: translate3d(2%, 1%, 0); }
  75%  { transform: translate3d(-1%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.ambient__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0, 0, 0, .56) 100%);
}

/* Drifting gold dust, on every page.

   It used to sit at z-index 0, which put it behind every section background —
   so it was only ever visible through the few transparent ones, which is to
   say almost nowhere. It now floats over the page, under the grain layer and
   well under the navigation, at an opacity low enough to read as air rather
   than as specks on the screen. */
#dust {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: screen;   /* grains add light; they never darken the page */
}

/* slow-drifting aurora blooms */
/* a section that holds an aura must clip it, or the bloom's -10vw offset
   widens the document and the page scrolls sideways on a phone */
.section:has(> .aura) { overflow: hidden; }
.section--aura { overflow: hidden; }

.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .34;
  z-index: 0;
}
.aura--gold { background: radial-gradient(circle, rgba(198, 161, 91, .55), transparent 68%); }
.aura--warm { background: radial-gradient(circle, rgba(199, 122, 106, .38), transparent 68%); }
.aura--a { width: 46vw; height: 46vw; top: -14vw; right: -10vw; animation: drift 24s ease-in-out infinite; }
.aura--b { width: 38vw; height: 38vw; bottom: -12vw; left: -8vw;  animation: drift 30s ease-in-out infinite reverse; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(5vw, 4vh, 0) scale(1.14); }
  66%      { transform: translate3d(-4vw, -3vh, 0) scale(.92); }
}

/* scroll progress bar */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-hi), var(--gold));
  z-index: 90;
  box-shadow: 0 0 16px rgba(198, 161, 91, .65);
}

/* --------------------------------------------------------------- cursor */

.cursor, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 95;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(242, 237, 227, .55);
  border-radius: 50%;
  transition: width .35s var(--ease), height .35s var(--ease),
              margin .35s var(--ease), background .35s var(--ease),
              opacity .3s;
}
.cursor.is-hot {
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  background: rgba(242, 237, 227, .13);
  border-color: transparent;
}
.cursor-dot {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--ivory);
}
@media (hover: none), (max-width: 900px) {
  .cursor, .cursor-dot { display: none; }
}

/* --------------------------------------------------------------- nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--pad);
  transition: padding .5s var(--ease), background .5s var(--ease),
              backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding-block: 15px;
  background: rgba(6, 6, 10, .82);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom-color: var(--line);
}
.nav.is-tucked { transform: translateY(-104%); }
.nav { transition-property: transform, padding, background, backdrop-filter, border-color; }

/* wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  position: relative;
  line-height: 0;
}

/* the lockup: the round Grace Villa emblem on the left, the name beside it */
.brand { gap: clamp(9px, 1vw, 14px); }
.brand__logo {
  width: auto;
  height: clamp(50px, 6vw, 72px);   /* the emblem alone, so a little larger */
  aspect-ratio: 1;
  display: block;
}
.brand__word {
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.5vw, 1.34rem);
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-lt);
  background: linear-gradient(100deg, #9C7C39, #F6E7C4 45%, #C6A15B 75%, #8A6E35);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* phones: the name stacks on two lines so the header buttons still fit */
@media (max-width: 600px) {
  .nav .brand__word {
    white-space: normal;
    width: min-content;
    font-size: .84rem;
    line-height: 1.2;
    letter-spacing: .18em;
  }
}
/* the narrowest phones: a slightly smaller emblem and name, so nothing overlaps */
@media (max-width: 430px) {
  .nav .brand { gap: 8px; flex-shrink: 0; }
  .nav .nav__right { gap: 8px; }
  .nav .brand__logo { height: 48px; }
  .nav .brand__word { font-size: .74rem; letter-spacing: .13em; }
}
/* in the footer the emblem is large enough to read on its own */
.footer .brand__logo { height: clamp(104px, 13vw, 136px); }
@keyframes spin { to { transform: rotate(360deg); } }


.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 40px);
}

.nav__link {
  position: relative;
  white-space: nowrap;      /* six items: a label must never break across two lines */
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mist);
  padding-block: 6px;
  transition: color .4s var(--ease);
  overflow: hidden;
  display: inline-block;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .5s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--gold-lt); }
.nav__link:hover::after, .nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* per-letter lift on hover */
.nav__link span {
  display: inline-block;
  transition: transform .42s var(--ease);
}
.nav__link:hover span { transform: translateY(-2px); }

.nav__right { display: flex; align-items: center; gap: 14px; }

/* avatar chip for signed-in users */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-lt); background: rgba(198, 161, 91, .07); }
.chip__av {
  width: 27px; height: 27px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), var(--gold-dk));
  color: var(--ink);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.chip--admin .chip__av { background: linear-gradient(140deg, var(--jade), #2f6b53); color: #06120d; }

/* burger */
.burger {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.burger i {
  position: absolute;
  left: 12px;
  width: 18px; height: 1px;
  background: var(--gold-lt);
  transition: transform .45s var(--ease), opacity .3s;
}
.burger i:nth-child(1) { top: 16px; }
.burger i:nth-child(2) { top: 21px; }
.burger i:nth-child(3) { top: 26px; }
.burger.is-open i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; }
.burger.is-open i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* mobile sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(6, 6, 10, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  clip-path: circle(0% at 100% 0);
  transition: clip-path .8s var(--ease);
}
.sheet.is-open { clip-path: circle(150% at 100% 0); }
.sheet a {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 3.2rem);
  color: var(--ivory);
  padding: 8px 0;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.sheet.is-open a { opacity: 1; transform: none; }
.sheet.is-open a:nth-child(1) { transition-delay: .16s; }
.sheet.is-open a:nth-child(2) { transition-delay: .23s; }
.sheet.is-open a:nth-child(3) { transition-delay: .30s; }
.sheet.is-open a:nth-child(4) { transition-delay: .37s; }
.sheet.is-open a:nth-child(5) { transition-delay: .44s; }
.sheet.is-open a:nth-child(6) { transition-delay: .51s; }
.sheet a:hover { color: var(--gold); font-style: italic; }

/* --------------------------------------------------------------- buttons */

/*  The button never moves and nothing inside it is clipped.

    Its colour is always in motion instead: a gold gradient travels around the
    1px rim continuously, and a second, slower wash drifts through the interior
    in the opposite direction. Hover does not reposition or reshape anything —
    it simply brings the interior wash up to full and lights the glow.

    (The earlier version rolled the label inside an overflow:hidden box, which
    sheared the tops and bottoms of letters as the pointer crossed. There is no
    overflow clipping here at all.)                                          */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 17px 34px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--gold-lt);
  font-family: var(--sans);
  font-size: .73rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: color .45s var(--ease), box-shadow .5s var(--ease);
}

/* the travelling rim — a gradient masked down to a 1px frame */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg,
    var(--gold-dk)  0%,
    var(--gold)    16%,
    var(--gold-hi) 30%,
    var(--gold)    44%,
    var(--gold-dk) 58%,
    var(--gold)    76%,
    var(--gold-hi) 90%,
    var(--gold-dk) 100%);
  background-size: 300% 100%;
  animation: btnFlow 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* the interior wash, drifting the other way so the two never sync up */
.btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(100deg,
    rgba(198, 161, 91, .05)  0%,
    rgba(246, 231, 196, .20) 30%,
    rgba(198, 161, 91, .05)  55%,
    rgba(246, 231, 196, .16) 80%,
    rgba(198, 161, 91, .05)  100%);
  background-size: 260% 100%;
  animation: btnFlow 9s linear infinite reverse;
  opacity: .55;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after { opacity: 1; }

.btn:hover,
.btn:focus-visible {
  color: var(--gold-hi);
  box-shadow: 0 0 36px -12px rgba(198, 161, 91, .8);
}
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

@keyframes btnFlow {
  to { background-position: 300% 0; }
}

/* a solid button is the same idea with the wash turned all the way up */
.btn--solid { color: var(--ink); }
.btn--solid::after {
  opacity: 1;
  background: linear-gradient(100deg,
    var(--gold-dk)  0%,
    var(--gold)    18%,
    var(--gold-hi) 36%,
    var(--gold)    54%,
    var(--gold-dk) 70%,
    var(--gold-hi) 88%,
    var(--gold)    100%);
  background-size: 280% 100%;
  animation: btnFlow 5.5s linear infinite;
}
.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--ink);
  box-shadow: 0 0 48px -10px rgba(198, 161, 91, 1);
}

/* ghost sits quietly until you approach it */
.btn--ghost { color: var(--mist); }
.btn--ghost::before { opacity: .4; transition: opacity .5s var(--ease); }
.btn--ghost::after  { opacity: .14; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--gold-lt); }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { opacity: 1; }
.btn--ghost:hover::after,  .btn--ghost:focus-visible::after  { opacity: .5; }

.btn--sm { padding: 11px 20px; font-size: .64rem; letter-spacing: .18em; }
.btn--block { width: 100%; }

/* the icon sits still; only its colour follows the label */
.btn svg { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after { animation: none; }
}

/* text link with an underline that wipes in */
.link-u {
  position: relative;
  color: var(--gold-lt);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 3px;
}
.link-u::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .5s var(--ease);
}
.link-u:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* --------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 20px;
  background: linear-gradient(90deg, var(--ink), var(--ink-2), var(--ink));
  position: relative;
  z-index: 1;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 52px;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  letter-spacing: .06em;
  color: var(--mist-dim);
  display: flex;
  align-items: center;
  gap: 52px;
  white-space: nowrap;
}
.marquee__item span { color: var(--gold); font-size: .7em; }
.marquee__item.is-hollow {
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 161, 91, .55);
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------- footer */

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink), #030305);
  padding-block: clamp(56px, 7vw, 92px) 34px;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 60px);
}
.footer h4 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a {
  font-size: .87rem;
  color: var(--mist);
  width: fit-content;
  transition: color .4s var(--ease), transform .4s var(--ease), letter-spacing .4s var(--ease);
}
.footer__links a:hover { color: var(--gold-lt); transform: translateX(7px); letter-spacing: .05em; }

.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--mist-dim);
  letter-spacing: .08em;
}

/* oversized watermark that breathes */
.footer__ghost {
  position: absolute;
  left: 50%;
  bottom: -5%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: clamp(6rem, 21vw, 19rem);
  letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 161, 91, .1);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: ghostBreathe 9s var(--ease) infinite;
}
@keyframes ghostBreathe {
  0%, 100% { opacity: .5;  transform: translateX(-50%) scale(1); }
  50%      { opacity: .95; transform: translateX(-50%) scale(1.035); }
}

/* --------------------------------------------------------------- flashes */

.flashes {
  position: fixed;
  top: 92px; right: var(--pad);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(400px, calc(100vw - 2 * var(--pad)));
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 19px;
  border: 1px solid var(--line);
  border-left-width: 2px;
  background: rgba(11, 11, 17, .95);
  backdrop-filter: blur(16px);
  font-size: .84rem;
  color: var(--ivory);
  animation: flashIn .6s var(--ease) both;
  box-shadow: 0 18px 50px -22px #000;
}
.flash--ok   { border-left-color: var(--jade); }
.flash--warn { border-left-color: var(--gold); }
.flash--err  { border-left-color: var(--rose); }
@keyframes flashIn {
  from { opacity: 0; transform: translateX(34px); }
}

/* --------------------------------------------------------------- reveals */

[data-reveal] {
  opacity: 0;
  transition: opacity 1s var(--ease), transform 1.05s var(--ease),
              filter 1s var(--ease), clip-path 1.15s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="up"]     { transform: translateY(46px); }
[data-reveal="down"]   { transform: translateY(-34px); }
[data-reveal="left"]   { transform: translateX(-56px); }
[data-reveal="right"]  { transform: translateX(56px); }
[data-reveal="scale"]  { transform: scale(.9); }
[data-reveal="blur"]   { filter: blur(14px); transform: translateY(24px); }
[data-reveal="clip"]   { clip-path: inset(0 0 100% 0); transform: translateY(20px); }
[data-reveal="wipe"]   { clip-path: inset(0 100% 0 0); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* children cascade in one after another */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* headline lines that rise out of a mask */
.lines { display: block; }
.lines .line { display: block; overflow: hidden; }
.lines .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s var(--ease);
}
.lines.is-in .line > span { transform: none; }
.lines.is-in .line:nth-child(2) > span { transition-delay: .09s; }
.lines.is-in .line:nth-child(3) > span { transition-delay: .18s; }
.lines.is-in .line:nth-child(4) > span { transition-delay: .27s; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Six menu items no longer fit beside the full-size logo below ~1060px
   (the logo was being squeezed), so the menu folds into the burger here. */
@media (max-width: 1060px) {
  .nav__links { display: none; }
  .burger { display: block; }
}

@media (max-width: 900px) {
  .nav__links, .nav__right .chip span { display: none; }
  .burger { display: block; }
  .split, .g-2, .g-3 { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .flashes { top: 80px; left: var(--pad); right: var(--pad); max-width: none; }
}

@media (max-width: 560px) {
  /* a phone header has room for one button beside the menu: Enquire keeps it,
     and Sign in / Reserve are one tap away in the menu sheet */
  .nav__secondary { display: none; }
  .g-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------------- a11y */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .lines .line > span { transform: none !important; }
}

.skip-to {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--gold);
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.skip-to:focus { left: 8px; top: 8px; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}