/* ==========================================================================
   Olive & Fig — oliveandfig.store
   Dark, photographic theme
   ========================================================================== */

/* ---------- Fonts (self-hosted; SIL Open Font License — see assets/fonts/*-OFL.txt) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* surfaces */
  --bg: #0A0908;
  --bg-2: #100E0C;
  --surface: #161412;
  --surface-2: #1E1B18;
  --surface-3: #27231F;
  --line: rgb(255 240 220 / .09);
  --line-strong: rgb(255 240 220 / .16);

  /* text */
  --text: #F3ECE0;
  --text-soft: #A9A093;
  --text-dim: #7D756B;

  /* brand */
  --gold: #D4AF62;
  --gold-light: #EBCB86;
  --gold-deep: #A9853C;
  --champagne: #F4E3BE;
  --fig: #B85C86;
  --fig-light: #E3A3C0;
  --fig-deep: #6E2A4C;
  --fig-950: #24101A;
  --olive: #A3B05E;
  --olive-deep: #43522A;
  --terracotta: #D9805A;
  --on-gold: #17130C;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 2px 8px rgb(0 0 0 / .4), 0 24px 50px -20px rgb(0 0 0 / .7);
  --shadow-lg: 0 40px 90px -20px rgb(0 0 0 / .85);
  --glow-gold: 0 10px 34px -10px rgb(212 175 98 / .55);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ticker: "Times New Roman", Times, "Liberation Serif", Tinos, serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: calc(182px + var(--wip-h, 0px)); /* 150px logo + header padding (+ "Under Construction" banner) */

  /* Repeating Mediterranean tile motif (used as a mask so it can take any color) */
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M40 8 47 33 72 40 47 47 40 72 33 47 8 40 33 33Z'/%3E%3Cpath d='M40 24 56 40 40 56 24 40Z'/%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3Ccircle cx='0' cy='0' r='13'/%3E%3Ccircle cx='80' cy='0' r='13'/%3E%3Ccircle cx='0' cy='80' r='13'/%3E%3Ccircle cx='80' cy='80' r='13'/%3E%3Cpath d='M0 40h6M74 40h6M40 0v6M40 74v6'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background-image: var(--noise);
  opacity: .035;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
}
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

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

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

.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  padding: .7em 1.2em;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Photos fade up from a soft blur once loaded */
.js img.fade {
  opacity: 0;
  filter: blur(14px);
  transition: opacity 1s var(--ease-out), filter 1.2s var(--ease-out), transform 1.3s var(--ease-out);
}
.js img.fade.is-loaded { opacity: 1; filter: none; }

/* spam honeypot: hidden from people, visible to form-filling bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero__eyebrow::before { display: none; }

.section-title {
  margin-top: .45em;
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  font-variation-settings: "opsz" 144; /* Light Fraunces Display */
  font-weight: 300;
}
.section-title em { font-style: italic; font-weight: 300; }

.text-gradient {
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--champagne) 22%, var(--fig-light) 45%, var(--gold) 70%, var(--gold-light) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
  padding-right: .06em;
}
@keyframes shimmer { to { background-position: 200% 0; } }

.fine-print {
  margin-top: 28px;
  text-align: center;
  font-size: .9rem;
  color: var(--text-dim);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1em 1.65em;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font-weight: 750;
  font-size: .98rem;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s, color .3s, translate .5s var(--ease-out);
}
.btn .ic { transition: transform .45s var(--ease-out); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .8s var(--ease-out);
}
.btn:hover::after { transform: translateX(110%); }

.btn--primary {
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne) -10%, var(--gold-light) 30%, var(--gold) 70%, var(--gold-deep) 120%);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgb(255 255 255 / .4);
}
.btn--primary:hover { box-shadow: 0 16px 44px -10px rgb(212 175 98 / .7), inset 0 1px 0 rgb(255 255 255 / .5); }

.btn--ghost {
  color: var(--text);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 0 0 1.5px rgb(255 240 220 / .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px var(--gold-light); }

.btn--sm { padding: .72em 1.2em; font-size: .9rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 750;
  font-size: .95rem;
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out);
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1.5px; }
.link-arrow .ic { transition: transform .45s var(--ease-out); }
.link-arrow:hover .ic { transform: translateX(5px); }

.text-btn {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .3s, color .3s, transform .45s var(--ease-spring);
}
.icon-btn:hover { background: var(--gold); color: var(--on-gold); }
.drawer__close:hover, .lightbox__close:hover { transform: rotate(90deg); }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  inset: var(--wip-h, 0px) 0 auto 0;
  z-index: 70;
  height: 2px;
  background: linear-gradient(90deg, var(--fig), var(--gold-light), var(--olive));
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 12px rgb(212 175 98 / .6);
}

/* ---------- "Under Construction" ticker banner ----------
   Only active while the .wip-banner element is on the page; removing it
   puts the header and spacing back automatically. Scrolling comes from the
   shared .ticker styles and setupTicker() in script.js. */
:root:has(.wip-banner) { --wip-h: 36px; }
.wip-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 65;
  display: flex;
  align-items: center;
  height: var(--wip-h);
  background: linear-gradient(90deg, #8E1414, #C62828 50%, #8E1414);
  color: #fff;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .14), 0 4px 14px rgb(0 0 0 / .35);
}
.wip-banner.ticker {
  --gap: 1.6rem;
  position: fixed; /* .ticker (later in this file) would make it relative */
  -webkit-mask: none; /* keep the red bar solid edge to edge */
  mask: none;
}
.wip-banner .ticker__item::after { color: rgb(255 255 255 / .75); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: var(--wip-h, 0px) 0 auto 0;
  z-index: 60;
  padding: 16px 0;
  transition: padding .45s var(--ease-out), background-color .45s, box-shadow .45s;
}
.site-header.is-scrolled {
  padding: 9px 0;
  background: rgb(10 9 8 / .72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line);
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 420;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--text);
}
.brand em { font-style: italic; color: var(--gold); }
/* Embossed paper seal (assets/logo, built by scripts/make-logo-assets.php) */
.brand__mark {
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(212 175 98 / .35), 0 6px 16px rgb(0 0 0 / .5);
  transition: transform .7s var(--ease-spring), box-shadow .4s;
}
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.06); box-shadow: 0 0 0 1px rgb(212 175 98 / .7), 0 8px 22px rgb(0 0 0 / .55); }

/* Header name: "THE OLIVE & FIG COMPANY" in embossed capitals in light Fraunces (its narrow display cut,
   as in the hero headline), on one line beside the seal, up to 4.5rem (72px). The size is set from the space left beside the logo, menu and
   "Book a board" button (see the max-width 960px / 560px / 411px rules below).
   Emboss: raised ivory letters (the seal's paper colour) lit from above: a bright top edge, stacked
   darker layers for the raised sides, then a soft cast shadow. Depth scales with the text size. */
.site-header .container { width: min(100% - 2 * var(--gutter), 1440px); } /* a bit wider than the page on big screens */
.site-header .nav { container-type: inline-size; } /* 100cqi = the header row's width */
.site-header .brand { min-width: 0; }
.site-header .brand__word {
  font-family: var(--font-display);
  font-size: max(.625rem, min(4.5rem, (100cqi - 235px) / 11.93)); /* beside the logo and menu button */
  font-weight: 300;
  font-variation-settings: "opsz" 144; /* display cut: finer and narrower */
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: normal; /* only wraps on the narrowest phones (see below) */
  color: #E9E0CF;
  text-shadow:
    0 calc(-1 * max(1px, .015em)) 0 #fff,
    0 max(1px, .015em) 0 #8A7B63,
    0 max(1.5px, .03em) 0 #6E604B,
    0 max(2px, .045em) 0 #54493A,
    0 max(3px, .06em) max(1px, .015em) rgb(0 0 0 / .55),
    0 max(6px, .11em) max(10px, .2em) rgb(0 0 0 / .5);
}
.site-header .brand__word em { /* gold Bodoni ampersand, same emboss. Bodoni 72 ships with Macs and iPhones and
     Bodoni MT with Microsoft Office; other devices get a similar high-contrast face, else the site's serif */
  font-family: "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Libre Bodoni", Didot, var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: normal;
  color: #DDB766;
}
.nav__actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: block;
  position: relative;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.nav-toggle span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .45s var(--ease-out), top .45s var(--ease-out), opacity .25s;
}
/* three bars; when open the outer two cross into an X and the middle one fades away */
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
  background:
    radial-gradient(600px 400px at 100% 0%, rgb(184 92 134 / .22), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgb(212 175 98 / .14), transparent 70%),
    var(--bg);
  clip-path: circle(0% at var(--menu-x, calc(100% - 40px)) var(--menu-y, 50px)); /* grows out of the menu button (position set by script.js) */
  transition: clip-path .7s var(--ease-out);
}
.mobile-nav.is-open { clip-path: circle(150% at var(--menu-x, calc(100% - 40px)) var(--menu-y, 50px)); }
.mobile-nav > * { width: min(100%, var(--container)); margin-inline: auto; } /* line up with the page on wide screens */
.mobile-nav ul { display: grid; }
.mobile-nav li { max-width: 24rem; }
.mobile-nav li + li { border-top: 1px solid rgb(212 175 98 / .25); } /* thin gold line between items */
.mobile-nav a {
  display: block; /* the whole row is clickable */
  padding: .5em 0;
  font-family: var(--font-display); /* Light Fraunces Display */
  font-size: clamp(1.1rem, 5vw, 1.7rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  line-height: 1.15;
  text-decoration: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s, transform .6s var(--ease-out), color .3s;
}
.mobile-nav a:hover { color: var(--gold-light); font-style: italic; }
.mobile-nav.is-open a { opacity: 1; transform: none; }
.mobile-nav.is-open li:nth-child(1) a { transition-delay: .12s; }
.mobile-nav.is-open li:nth-child(2) a { transition-delay: .17s; }
.mobile-nav.is-open li:nth-child(3) a { transition-delay: .22s; }
.mobile-nav.is-open li:nth-child(4) a { transition-delay: .27s; }
.mobile-nav.is-open li:nth-child(5) a { transition-delay: .32s; }
.mobile-nav.is-open li:nth-child(6) a { transition-delay: .37s; }
.mobile-nav__foot { margin-top: 32px; font-weight: 600; color: var(--text-soft); }
.mobile-nav__foot a { display: inline; padding: 0; font-family: var(--font-body); font-size: 1rem; font-weight: inherit; font-variation-settings: normal; opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + 50px) 0 150px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: -3%;
  z-index: -3;
  translate: calc(var(--px, 0) * -24px) calc(var(--py, 0) * -18px);
  transition: translate 1.2s var(--ease-out);
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: kenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16) translate(-1.5%, 1%); }
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(10 9 8 / .75) 0%, transparent 22%, transparent 62%, var(--bg) 100%),
    linear-gradient(90deg, rgb(10 9 8 / .96) 0%, rgb(10 9 8 / .82) 30%, rgb(10 9 8 / .35) 58%, rgb(10 9 8 / .15) 100%);
}
/* warm spotlight that follows the cursor */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--gx, 70%) var(--gy, 40%), rgb(235 203 134 / .16), transparent 60%);
  mix-blend-mode: screen;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.hero__eyebrow {
  padding: .55em 1.1em .55em .9em;
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(212 175 98 / .3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: .14em;
  font-size: .7rem;
  animation: fade-up .9s var(--ease-out) both;
}
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); }
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--olive);
  animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse { to { transform: scale(3.2); opacity: 0; } }

/* Same font and weight as the header name (Light Fraunces Display, upright, normal spacing),
   at half its former size (was clamp(3rem, 6.6vw, 6.2rem)). */
.hero__title {
  margin: .5em 0 .6em;
  font-size: clamp(1.5rem, 3.3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  text-shadow: 0 2px 30px rgb(0 0 0 / .4);
}
.hero__title em { font-style: normal; font-weight: 300; }
.hero__title .w {
  display: inline-block;
  overflow: hidden;
  padding: 0 .06em .1em 0;
  margin-right: -.06em;
  vertical-align: top;
}
.hero__title .w > span {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  animation: rise 1.1s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 80ms + 250ms);
}
@keyframes rise { to { transform: none; } }

.hero__lede {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: rgb(243 236 224 / .8);
  animation: fade-up 1s var(--ease-out) .75s both;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  animation: fade-up 1s var(--ease-out) .9s both;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-soft);
  animation: fade-up 1s var(--ease-out) 1.05s both;
}
.hero__trust li { display: inline-flex; align-items: center; gap: .45em; }
.hero__trust .ic { color: var(--gold); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__aside {
  position: relative;
  align-self: stretch;
  min-height: 460px;
  animation: fade-up 1.2s var(--ease-out) 1.1s both;
}

.parallax {
  translate: calc(var(--px, 0) * var(--depth, 0) * 1px) calc(var(--py, 0) * var(--depth, 0) * 1px);
  transition: translate .9s var(--ease-out);
}

.badge-ring {
  position: absolute;
  top: 2%;
  right: 4%;
  width: clamp(128px, 11.5vw, 156px);
  aspect-ratio: 1;
}
/* The disc, the spinning lettering and the button are stacked layers sharing one centre. */
.badge-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.badge-ring__disc { filter: drop-shadow(0 14px 24px rgb(0 0 0 / .5)); }
.badge-ring__bg { fill: rgb(10 9 8 / .72); stroke: rgb(212 175 98 / .55); stroke-width: 1; }
.badge-ring text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  fill: var(--gold-light);
}
.badge-ring__spin { animation: spin 20s linear infinite; } /* the whole layer turns about its own centre (reliable in Safari too) */
@keyframes spin { to { transform: rotate(360deg); } }
/* "Book a board": a round gold button, in the middle of the spinning hero ring on wide screens
   and in the header on tablets (where the ring is hidden) */
.book-circle {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne) -10%, var(--gold-light) 30%, var(--gold) 70%, var(--gold-deep) 120%);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgb(255 255 255 / .4);
  font-family: var(--font-body);
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), translate .5s var(--ease-out);
}
.book-circle:hover { transform: scale(1.06); box-shadow: 0 16px 44px -10px rgb(212 175 98 / .7), inset 0 1px 0 rgb(255 255 255 / .5); }
.book-circle:active { transform: scale(.97); }
.badge-ring__cta { position: absolute; inset: 20%; font-size: clamp(.74rem, .85vw, .86rem); }
.nav__cta { width: 78px; font-size: .8rem; }
@media (min-width: 961px) {
  .nav__cta { display: none; } /* "Book a board" lives in the hero badge here */
}

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.15rem .5rem .5rem;
  border-radius: 999px;
  background: rgb(18 16 14 / .6);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 240 220 / .14), 0 20px 40px -14px rgb(0 0 0 / .7);
  font-size: .85rem;
  line-height: 1.25;
  white-space: nowrap;
  animation: chip-float 6s ease-in-out infinite alternate;
  transition: box-shadow .4s, background .4s;
}
.chip:hover { background: rgb(18 16 14 / .82); box-shadow: inset 0 0 0 1px rgb(212 175 98 / .5), 0 20px 40px -14px rgb(0 0 0 / .7); }
.chip strong { display: block; font-weight: 750; color: var(--text); }
.chip small { color: var(--text-soft); font-size: .76rem; }
.chip__thumb, .chip__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgb(212 175 98 / .55);
}
.chip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.chip__icon { display: grid; place-items: center; color: var(--on-gold); background: linear-gradient(135deg, var(--champagne), var(--gold)); }
.chip__icon .ic { width: 22px; height: 22px; }

.chip--a { top: 30%; left: 0; animation-delay: -1s; }
.chip--b { top: 52%; right: 0; animation-delay: -3s; animation-duration: 7s; }
.chip--c { bottom: 6%; left: 14%; animation-delay: -2s; animation-duration: 6.5s; }
@keyframes chip-float {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 92px;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgb(255 240 220 / .35);
}
.scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: cue 1.8s var(--ease-out) infinite;
}
@keyframes cue {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------- Tickers ---------- */
.ticker {
  --gap: 2.4rem;
  position: relative;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; width: max-content; }
.ticker.is-ready .ticker__track { animation: marquee var(--dur, 40s) linear infinite; }
.ticker--reverse.is-ready .ticker__track { animation-direction: reverse; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap);
  flex-shrink: 0;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;
}
.ticker__item::after { content: "✦"; font-style: normal; font-size: .6em; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

.ticker-cross {
  position: relative;
  z-index: 2;
  padding: 44px 0;
  margin-top: -70px;
  overflow: hidden; /* the rotated ribbons are wider than the screen */
}
@supports (overflow: clip) {
  .ticker-cross { overflow: visible; overflow-x: clip; }
}
/* chocolate ribbons with metallic gold-foil lettering */
.ticker-cross .ticker {
  -webkit-mask: none;
  mask: none;
  padding: 1.05rem 0;
  font-family: var(--font-ticker);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.62rem);
  line-height: 1.3;
  letter-spacing: .02em;
  background:
    linear-gradient(180deg, rgb(255 222 186 / .1) 0%, rgb(255 222 186 / 0) 45%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .3) 100%),
    linear-gradient(90deg, var(--ribbon));
  box-shadow:
    inset 0 1px 0 rgb(226 190 112 / .75),
    inset 0 -1px 0 rgb(226 190 112 / .6),
    0 20px 50px -10px rgb(0 0 0 / .85);
}
/* inner gold pinstripes */
.ticker-cross .ticker::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  pointer-events: none;
  border-block: 1px solid rgb(212 175 98 / .28);
}
.ticker-cross .ticker__item,
.ticker--xl .ticker__item {
  color: transparent;
  -webkit-text-fill-color: transparent; /* most reliable gradient-text fill in Safari */
  background-image:
    linear-gradient(105deg, transparent 38%, rgb(255 251 235 / .95) 50%, transparent 62%),
    linear-gradient(180deg, #FFF1C6 0%, #F3D07C 28%, #C38F2E 54%, #ECC86F 74%, #A67622 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6));
  animation: foil-glint 6s ease-in-out infinite;
}
.ticker-cross .ticker__item:nth-child(3n + 2),
.ticker--xl .ticker__item:nth-child(3n + 2) { animation-delay: -2s; }
.ticker-cross .ticker__item:nth-child(3n),
.ticker--xl .ticker__item:nth-child(3n) { animation-delay: -4s; }
.ticker-cross .ticker__item::after { color: transparent; }
@keyframes foil-glint {
  0%, 45% { background-position: 150% 0, 0 0; }
  100%    { background-position: -50% 0, 0 0; }
}
.ticker--chocolate {
  --ribbon: #2E180C 0%, #4A2817 28%, #3A1F10 52%, #4F2C19 78%, #2E180C 100%;
  transform: rotate(-2.4deg) scale(1.04);
}
.ticker--chocolate-deep {
  --ribbon: #1E0F07 0%, #33190D 28%, #27140A 52%, #381D10 78%, #1E0F07 100%;
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  transform: rotate(2.4deg) scale(1.04);
}

.ticker--xl {
  padding: clamp(24px, 3vw, 44px) 0;
  font-family: var(--font-ticker);
  font-size: clamp(2.6rem, 7vw, 6.2rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
  --gap: 3rem;
}
.ticker--xl .ticker__item {
  font-style: italic;
  padding: 0 .1em .04em; /* keep italic overhangs inside the gold fill */
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / .65));
  animation-duration: 8s;
}
.ticker--xl .ticker__item.is-alt { font-style: normal; }
.ticker--xl .ticker__item::after {
  content: "❦";
  font-size: .45em;
  font-style: normal;
  color: var(--fig);
  -webkit-text-fill-color: var(--fig);
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(44px, 5.5vw, 76px) 0; } /* about half the former clamp(84px, 11vw, 150px): tighter gaps between sections */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head__aside { max-width: 30rem; color: var(--text-soft); }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  translate: 0 34px;
  transition:
    opacity 1s var(--ease-out),
    translate 1s var(--ease-out),
    transform .55s var(--ease-out),
    box-shadow .5s var(--ease-out),
    filter .45s,
    background-color .4s;
  transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s, 0s, 0s;
}
.js [data-reveal]:not(.is-in) { opacity: 0 !important; }
.js [data-reveal].is-in { translate: 0 0; }

/* ---------- Focus groups: hovering one tile dims its siblings ---------- */
.focus-group > * { transition: opacity .45s, filter .45s, transform .55s var(--ease-out), box-shadow .5s var(--ease-out), translate 1s var(--ease-out); }
.focus-group:has(> :hover) > :not(:hover),
.focus-group:has(:focus-visible) > :not(:has(:focus-visible), :hover) {
  opacity: .42;
  filter: saturate(.3) brightness(.8);
}

/* ---------- Tiles (shared) ---------- */
.tile, .menu-card, .rent-card, .g-tile {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
}
.is-tilting { transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); }

/* cursor spotlight */
.tile::after, .menu-card::after, .rent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgb(255 236 200 / .12), transparent 45%);
  opacity: 0;
  transition: opacity .4s;
}
.tile:hover::after, .menu-card:hover::after, .rent-card:hover::after { opacity: 1; }

/* animated gradient border on hover / focus */
.tile::before, .menu-card::before, .rent-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--angle), var(--gold-light), var(--fig), var(--olive), var(--gold), var(--gold-light));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s;
  animation: spin-angle 5s linear infinite;
}
.tile:hover::before, .menu-card:hover::before, .rent-card:hover::before,
.tile:focus-within::before, .menu-card:focus-within::before, .rent-card:focus-within::before { opacity: 1; }
@keyframes spin-angle { to { --angle: 360deg; } }

/* ---------- Services bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 18px;
  grid-template-areas:
    "a a b b"
    "a a c d"
    "e f g g";
}
.tile {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  overflow: hidden;
}
.tile h3 { font-size: 1.45rem; margin-bottom: .45em; }
.tile p { color: var(--text-soft); font-size: .97rem; }
.tile__eyebrow {
  margin-bottom: 1rem;
  font-size: .74rem !important;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light) !important;
}
.tile__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 16px;
  color: var(--gold-light);
  background: rgb(212 175 98 / .1);
  box-shadow: inset 0 0 0 1px rgb(212 175 98 / .3);
  transition: transform .6s var(--ease-spring), background .4s, color .4s;
}
.tile__icon .ic { width: 24px; height: 24px; }
.tile:hover .tile__icon { transform: rotate(-10deg) scale(1.08); background: var(--gold); color: var(--on-gold); }

/* photo tiles: image + scrim sit behind the copy */
.tile--photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--surface);
  color: var(--text);
}
.tile__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out), filter 1.2s var(--ease-out);
}
.tile--photo:hover .tile__img { transform: scale(1.06); }
.tile--photo .tile__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--scrim);
}
.tile--photo h3 { font-weight: 350; text-shadow: 0 2px 20px rgb(0 0 0 / .5); }
.tile--photo p { color: rgb(243 236 224 / .84); }
.tile--photo .link-arrow { color: var(--gold-light); }

.tile--a {
  grid-area: a;
  min-height: 560px;
  --scrim: linear-gradient(180deg, rgb(10 9 8 / .05) 0%, rgb(10 9 8 / .2) 35%, rgb(10 9 8 / .9) 75%, rgb(10 9 8 / .97) 100%);
}
.tile--a .tile__content { max-width: 28rem; }
.tile--a h3 { font-size: clamp(2rem, 3.2vw, 2.9rem); }

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.pill-list li {
  padding: .4em .9em;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
  background: rgb(255 255 255 / .08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tile--b {
  grid-area: b;
  justify-content: center;
  --scrim: linear-gradient(90deg, rgb(10 9 8 / .94) 0%, rgb(10 9 8 / .78) 45%, rgb(10 9 8 / .15) 100%);
}
.tile--b .tile__content { max-width: 24rem; }
.tile--b h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.tile--b .link-arrow { margin-top: 18px; }

.tile--c { grid-area: c; }
.tile--d { grid-area: d; }
.tile--e { grid-area: e; }
.tile--f { grid-area: f; }

.diet-badges { display: flex; gap: 6px; margin-top: 16px; }
.diet-badges li {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1.5px rgb(212 175 98 / .4);
  transition: transform .5s var(--ease-spring), background .3s, color .3s;
}
.tile--d:hover .diet-badges li { transform: translateY(-4px); }
.tile--d:hover .diet-badges li:nth-child(2) { transition-delay: .05s; }
.tile--d:hover .diet-badges li:nth-child(3) { transition-delay: .1s; }
.tile--d:hover .diet-badges li:nth-child(4) { transition-delay: .15s; }
.diet-badges li:hover { background: var(--gold); color: var(--on-gold); }

.tile--g {
  grid-area: g;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  --scrim: linear-gradient(90deg, rgb(10 9 8 / .92) 0%, rgb(10 9 8 / .7) 50%, rgb(10 9 8 / .25) 100%);
}
.tile--g .tile__content { max-width: 32rem; }
.tile--g h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.22; margin: 0; }
.tile--g .btn { position: relative; z-index: 2; flex-shrink: 0; }

/* ---------- Menu ---------- */
.menu { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }

.filters {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.filters__btn {
  position: relative;
  z-index: 1;
  padding: .6em 1.15em;
  border: 0;
  border-radius: 999px;
  background: none;
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-soft);
  transition: color .35s;
}
.filters__btn[aria-pressed="true"] { color: var(--on-gold); }
.filters__btn:hover:not([aria-pressed="true"]) { color: var(--text); }
.filters__indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: var(--glow-gold);
  transition: transform .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out);
}

.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.menu-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.menu-card.is-leaving { opacity: 0 !important; transform: scale(.94); transition: opacity .25s, transform .25s; }
.menu-card.pop-in { animation: pop-in .6s var(--ease-out) both; animation-delay: calc(var(--stagger, 0) * 70ms); }
@keyframes pop-in {
  from { opacity: 0; scale: .92; translate: 0 20px; }
  to   { opacity: 1; scale: 1; translate: 0 0; }
}

.menu-card__art {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: 6px 6px 0;
  border-radius: calc(var(--radius-lg) - 6px);
  overflow: hidden;
  background: var(--surface-2);
}
.menu-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 9 8 / .35), transparent 28%);
  pointer-events: none;
}
.menu-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.menu-card:hover .menu-card__art img { transform: scale(1.04); }

.menu-card__tag, .menu-card__ribbon {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: .38em .85em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 750;
}
.menu-card__tag {
  left: 12px;
  color: var(--text);
  background: rgb(10 9 8 / .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15);
}
.menu-card__ribbon {
  right: 12px;
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  box-shadow: var(--glow-gold);
}

.menu-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 20px 20px; }
.menu-card__body > p { color: var(--text-soft); font-size: .9rem; line-height: 1.55; flex: 1; }
.menu-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.menu-card h3 { font-size: 1.32rem; white-space: nowrap; }
.price { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; }
.price > span { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-light); }
.price small { font-size: .8rem; color: var(--text-dim); font-family: var(--font-body); }
.menu-card .link-arrow { align-self: flex-start; margin-top: 4px; font-size: .9rem; color: var(--gold-light); }

/* ---------- Rentals ---------- */
.rentals { overflow: hidden; background: var(--bg-2); }
.rentals__tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gold);
  opacity: .06;
  -webkit-mask: var(--tile) 0 0 / 110px 110px repeat, linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask: var(--tile) 0 0 / 110px 110px repeat, linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-composite: intersect;
}
.rentals .container { position: relative; }

.rent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rent-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
  padding: 8px 8px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.rent-card:hover, .rent-card:focus-within { transform: translateY(-5px); }
.rent-card > h3, .rent-card > p, .rent-card__actions { margin-inline: 12px; }
.rent-card h3 { margin-top: 10px; font-size: 1.22rem; }
.rent-card > p { font-size: .9rem; color: var(--text-soft); }
.rent-card > .rent-card__price { font-size: .85rem; color: var(--text-dim); }
.rent-card__price .price { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-light); }

.rent-card__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  background: var(--surface-2);
}
.rent-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.rent-card:hover .rent-card__art img { transform: scale(1.04); }

.rent-card__flag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .3em .7em .3em .5em;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  box-shadow: var(--glow-gold);
  opacity: 0;
  transform: translateY(-8px) scale(.8);
  transition: opacity .35s, transform .5s var(--ease-spring);
}
.rent-card__flag .ic { width: 14px; height: 14px; }
.rent-card.is-in-quote .rent-card__flag { opacity: 1; transform: none; }
.rent-card.is-in-quote { box-shadow: inset 0 0 0 1.5px rgb(212 175 98 / .55), var(--shadow); }

.rent-card__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }

.stepper {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s, background .3s;
}
.stepper:focus-within { box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px rgb(212 175 98 / .18); }
.stepper button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-3);
  transition: transform .3s var(--ease-spring), background .3s, color .3s;
}
.stepper button .ic { width: 14px; height: 14px; }
.stepper button:hover { background: var(--gold); color: var(--on-gold); }
.stepper button:active { transform: scale(.85); }
.stepper input {
  width: 3.2ch;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font: inherit;
  font-weight: 800;
  font-size: .95rem;
  color: var(--text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input:focus { outline: none; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input.bump { animation: bump .35s var(--ease-spring); }
@keyframes bump { 50% { transform: scale(1.35); color: var(--gold-light); } }

.add-btn {
  flex: 1;
  min-width: 0;
  padding: .66em .9em;
  border: 0;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgb(212 175 98 / .55);
  transition: transform .35s var(--ease-spring), box-shadow .3s, background .3s, color .3s;
}
.add-btn:hover { background: var(--gold); color: var(--on-gold); box-shadow: var(--glow-gold); transform: translateY(-2px); }
.add-btn:active { transform: scale(.95); }
.rent-card.is-in-quote .add-btn { color: var(--on-gold); background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: none; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 18vw, 250px);
  grid-auto-flow: dense;
  gap: 14px;
}
.g-tile {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  box-shadow: inset 0 0 0 1px var(--line);
}
.g-tile--tall { grid-row: span 2; }
.g-tile--wide { grid-column: span 2; }
.g-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.g-tile:hover img, .g-tile:focus-visible img { transform: scale(1.08); }
.g-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgb(10 9 8 / .85));
  opacity: 0;
  transition: opacity .5s;
}
.g-tile:hover::after, .g-tile:focus-visible::after { opacity: 1; }
.g-tile__cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  text-align: left;
  color: var(--text);
  opacity: 0;
  translate: 0 12px;
  transition: opacity .5s, translate .6s var(--ease-out);
}
.g-tile__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--on-gold);
  background: var(--gold-light);
  opacity: 0;
  scale: .6;
  transition: opacity .4s, scale .5s var(--ease-spring);
}
.g-tile__zoom .ic { width: 18px; height: 18px; }
.g-tile:hover .g-tile__cap, .g-tile:focus-visible .g-tile__cap { opacity: 1; translate: 0 0; }
.g-tile:hover .g-tile__zoom, .g-tile:focus-visible .g-tile__zoom { opacity: 1; scale: 1; }

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: clamp(16px, 4vw, 60px);
  border: 0;
  color: var(--text);
  background: rgb(6 5 4 / .95);
  overscroll-behavior: contain;
}
.lightbox[open] { display: grid; place-items: center; animation: lb-in .45s var(--ease-out); }
.lightbox::backdrop { background: transparent; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__figure { display: grid; justify-items: center; gap: 14px; margin: 0; max-width: 100%; max-height: 100%; }
.lightbox__figure img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 140px);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}
.lightbox__figure img.is-swapping { animation: lb-img .6s var(--ease-out); }
@keyframes lb-img { from { opacity: 0; scale: .96; } }
.lightbox__figure figcaption { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--text-soft); }
.lightbox__btn { position: fixed; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 20px; top: 50%; translate: 0 -50%; }

/* ---------- Quote pill + drawer ---------- */
.quote-pill {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 65;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .5rem 1.25rem .5rem .5rem;
  border: 0;
  border-radius: 999px;
  text-align: left;
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne), var(--gold-light) 40%, var(--gold));
  box-shadow: var(--shadow-lg), var(--glow-gold), inset 0 1px 0 rgb(255 255 255 / .5);
  opacity: 0;
  transform: translateY(150%) scale(.85);
  transition: transform .7s var(--ease-spring), opacity .4s;
}
.quote-pill.is-visible { opacity: 1; transform: none; }
.nav-open .quote-pill { opacity: 0; pointer-events: none; }
.quote-pill.is-visible:hover { transform: translateY(-3px); }
.quote-pill.bump { animation: pill-bump .5s var(--ease-spring); }
@keyframes pill-bump { 40% { transform: scale(1.08); } }
.quote-pill__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--gold-light);
  background: var(--bg);
}
.quote-pill__icon .ic { width: 22px; height: 22px; }
.quote-pill__count {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  background: var(--fig);
}
.quote-pill__text { display: grid; line-height: 1.2; }
.quote-pill__text small { font-size: .72rem; opacity: .75; font-weight: 700; }
.quote-pill__text strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 520; }

.fly-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--gold) 60%);
  box-shadow: 0 0 0 4px rgb(212 175 98 / .25), 0 0 24px rgb(212 175 98 / .8);
  pointer-events: none;
}

.drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.drawer.is-open { pointer-events: auto; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s;
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100% - 24px));
  border-radius: 28px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  overflow: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform .65s var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { margin-top: .3em; font-size: 1.9rem; }
.drawer__list { flex: 1; overflow-y: auto; padding: 10px 18px; overscroll-behavior: contain; }
.q-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px dashed var(--line);
  animation: fade-up .5s var(--ease-out) both;
}
.q-line__thumb { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.q-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.q-line__info { display: grid; line-height: 1.3; min-width: 0; }
.q-line__info strong { font-size: .95rem; }
.q-line__info span { font-size: .82rem; color: var(--text-soft); }
.q-line__total { font-weight: 800; color: var(--gold-light); }
.q-line__remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-soft);
  transition: background .3s, color .3s;
}
.q-line__remove:hover { background: rgb(184 92 134 / .2); color: var(--fig-light); }
.q-line__remove .ic { width: 16px; height: 16px; }
.drawer__empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 30px;
  text-align: center;
  color: var(--text-soft);
}
.drawer__empty .link-arrow { color: var(--gold-light); }
.drawer__foot { padding: 20px 26px 24px; border-top: 1px solid var(--line); background: var(--bg-2); }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer__total strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 420; color: var(--gold-light); }
.drawer__note { margin: 4px 0 16px; font-size: .85rem; color: var(--text-soft); }
.drawer__clear { display: block; margin: 14px auto 0; font-size: .85rem; color: var(--text-soft); }

/* ---------- Process ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.steps__line {
  position: absolute;
  top: 35px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgb(255 240 220 / .18) 0 6px, transparent 6px 12px);
}
.steps__line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fig), var(--gold-light), var(--olive));
  box-shadow: 0 0 14px rgb(212 175 98 / .6);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform .2s linear;
}
.step { position: relative; text-align: center; padding: 0 6px; }
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--text-soft);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background .6s, color .6s, box-shadow .6s, transform .6s var(--ease-spring);
}
.step__num::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0;
}
.step.is-active .step__num {
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  box-shadow: var(--glow-gold);
  transform: scale(1.06);
}
.step.is-active .step__num::after { animation: ring 2.4s var(--ease-out) infinite; }
@keyframes ring {
  from { opacity: .9; transform: scale(.9); }
  to   { opacity: 0; transform: scale(1.35); }
}
.step h3 { font-size: 1.35rem; margin-bottom: .45em; }
.step p { color: var(--text-soft); font-size: .95rem; max-width: 18rem; margin-inline: auto; }

/* ---------- Stats band ---------- */
.stats {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 5.5vw, 76px) 0;
  color: var(--text);
}
.stats__media { position: absolute; inset: 0; z-index: -3; }
.stats__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgb(10 9 8 / .62) 24%, rgb(10 9 8 / .62) 76%, var(--bg) 100%),
    radial-gradient(900px 400px at 50% 50%, rgb(10 9 8 / .15), rgb(10 9 8 / .65));
}
.stats__tiles {
  position: absolute;
  inset: -96px;
  z-index: -1;
  background: var(--gold-light);
  opacity: .07;
  -webkit-mask: var(--tile) 0 0 / 96px 96px repeat;
  mask: var(--tile) 0 0 / 96px 96px repeat;
  animation: tile-pan 26s linear infinite;
}
@keyframes tile-pan { to { transform: translate(96px, 96px); } }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.stat { position: relative; padding-left: 22px; }
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--gold-light), transparent);
}
.stat__value {
  display: flex;
  align-items: baseline;
  gap: .12em;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__num {
  background: linear-gradient(180deg, #FFF6E0, var(--gold-light) 60%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__suffix { font-size: .4em; font-style: italic; color: var(--gold-light); letter-spacing: 0; }
.stat__label { margin-top: 12px; color: rgb(243 236 224 / .8); max-width: 15rem; }

/* ---------- Booking ---------- */
.book { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.book__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.book__intro { position: sticky; top: calc(var(--header-h) + 30px); display: grid; gap: 30px; }
.book__lede { margin-top: 18px; color: var(--text-soft); max-width: 30rem; }

.estimate {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border-radius: var(--radius);
  color: var(--text);
  background:
    radial-gradient(420px 220px at 100% 0%, rgb(212 175 98 / .28), transparent 70%),
    linear-gradient(150deg, #4A1C33, var(--fig-950));
  box-shadow: inset 0 0 0 1px rgb(212 175 98 / .2), var(--shadow);
}
.estimate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-light);
  opacity: .07;
  -webkit-mask: var(--tile) 0 0 / 60px 60px repeat;
  mask: var(--tile) 0 0 / 60px 60px repeat;
}
.estimate > * { position: relative; }
.estimate__label { font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
.estimate__amount {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 320;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.estimate__lines { display: grid; gap: 6px; margin-top: 14px; }
.estimate__lines:empty { display: none; }
.estimate__lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
  border-top: 1px dashed rgb(243 236 224 / .2);
  font-size: .9rem;
  animation: fade-up .45s var(--ease-out) both;
}
.estimate__lines li span:last-child { font-weight: 700; }
.estimate__note { margin-top: 12px; font-size: .82rem; color: rgb(243 236 224 / .7); }

.book__contact { display: grid; gap: 10px; font-weight: 600; color: var(--text-soft); }
.book__contact li { display: flex; align-items: center; gap: .7em; }
.book__contact .ic { color: var(--gold); }
.book__contact a { text-decoration: none; color: var(--text); background-image: linear-gradient(var(--gold), var(--gold)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }

.book-card {
  position: relative;
  padding: clamp(22px, 3.6vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
}

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.span-2 { grid-column: 1 / -1; }

/* focus mode: the group being edited stays bright, the rest recede */
.fgroup { transition: opacity .4s, filter .4s; }
.book-form:has(.fgroup:focus-within) .fgroup:not(:focus-within) { opacity: .4; filter: saturate(.3); }

.field {
  position: relative;
  border-radius: 16px;
  background: var(--surface-2);
  transition: background .35s, box-shadow .45s var(--ease-out), opacity .4s, filter .4s;
}
.field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--angle), var(--gold-light), var(--fig), var(--olive), var(--champagne), var(--gold-light));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s;
  animation: spin-angle 4s linear infinite;
}
.field:focus-within::before { opacity: 1; }
.field:focus-within {
  background: var(--surface-3);
  box-shadow: 0 0 0 6px rgb(212 175 98 / .08), 0 0 40px -8px rgb(212 175 98 / .35);
}
.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  padding: 1.55rem 1rem .55rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF62' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
}
.field select option { background: var(--surface-2); color: var(--text); }
.field input[type="date"] { min-height: 3.6rem; }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(.6); cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(255 240 220 / .26); }
.field:focus-within input, .field:focus-within select, .field:focus-within textarea { border-color: transparent; }
.field label {
  position: absolute;
  top: 1.05rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
  overflow: hidden;
  font-size: 1rem;
  color: var(--text-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform .35s var(--ease-out), color .3s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field--fixed label {
  transform: translateY(-.62rem) scale(.76);
  font-weight: 700;
  letter-spacing: .02em;
}
.field:focus-within label { color: var(--gold-light); }
.optional { font-weight: 500; opacity: .7; }

.field input:user-invalid,
.was-validated .field input:invalid {
  border-color: var(--terracotta);
  background: rgb(217 128 90 / .06);
  border-radius: 16px;
}
.field:has(input:user-invalid) label,
.was-validated .field:has(input:invalid) label { color: var(--terracotta); }
.field.shake { animation: shake .45s var(--ease-out); }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.range-group {
  padding: 16px 18px 20px;
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background .35s, box-shadow .4s, opacity .4s, filter .4s;
}
.range-group:focus-within { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 6px rgb(212 175 98 / .12); }
.range-group__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.range-group__head label { font-weight: 700; font-size: .9rem; color: var(--text-soft); }
.range-group__head output { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-light); }
.range-wrap { position: relative; }
.range-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: calc(var(--p, .1) * (100% - 26px) + 13px);
  translate: -50% 0;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--on-gold);
  background: var(--gold-light);
  opacity: 0;
  scale: .7;
  transition: opacity .25s, scale .35s var(--ease-spring);
  pointer-events: none;
}
.range-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: var(--gold-light);
}
.range-wrap:hover .range-bubble, .range-wrap:focus-within .range-bubble { opacity: 1; scale: 1; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--fig), var(--gold-light)) 0 0 / var(--fill, 10%) 100% no-repeat,
    rgb(255 255 255 / .1);
  cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 16px rgb(212 175 98 / .5);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 16px rgb(212 175 98 / .5);
}
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 8px rgb(212 175 98 / .15), 0 0 20px rgb(212 175 98 / .6); }

.chips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { float: left; width: 100%; margin-bottom: 10px; font-weight: 700; font-size: .9rem; color: var(--text-soft); }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .62em 1.05em;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background .35s, color .35s, box-shadow .35s, transform .4s var(--ease-spring);
}
.chip-check .ic { width: 0; height: 16px; opacity: 0; transition: width .35s var(--ease-out), opacity .3s; }
.chip-check:hover span { color: var(--text); box-shadow: inset 0 0 0 1.5px rgb(212 175 98 / .5); transform: translateY(-2px); }
.chip-check input:checked + span {
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  box-shadow: var(--glow-gold);
}
.chip-check input:checked + span .ic { width: 16px; opacity: 1; }
.chip-check input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.attached-quote {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgb(163 176 94 / .08);
  box-shadow: inset 0 0 0 1px rgb(163 176 94 / .3);
  animation: fade-up .5s var(--ease-out) both;
}
.attached-quote__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.attached-quote__head strong { font-size: .95rem; }
.attached-quote__head .text-btn { color: var(--gold-light); }
.attached-quote ul { display: grid; gap: 2px; font-size: .9rem; color: var(--text-soft); }
.attached-quote ul:empty { display: none; }
.attached-quote__empty { font-size: .9rem; color: var(--text-soft); }
.attached-quote__empty a { color: var(--gold-light); }
.attached-quote ul:not(:empty) + .attached-quote__empty { display: none; }

.book-form__submit { margin-top: 22px; padding-block: 1.15em; font-size: 1.02rem; }
.book-form__submit.is-loading { pointer-events: none; opacity: .8; }
.book-form__fine { margin-top: 12px; text-align: center; font-size: .82rem; color: var(--text-dim); }

.book-success { display: grid; justify-items: center; gap: 12px; padding: 40px 10px; text-align: center; outline: none; }
.book-success h3 { font-size: 2.2rem; }
.book-success p { max-width: 26rem; color: var(--text-soft); }
.book-success .btn { margin-top: 12px; }
.book-success__check { width: 84px; height: 84px; }
.book-success__check circle { stroke: var(--olive); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .8s var(--ease-out) forwards; }
.book-success__check path { stroke: var(--gold-light); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s var(--ease-out) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 880px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: inherit; letter-spacing: normal; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 6px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: -.01em;
  transition: color .3s, padding .45s var(--ease-out);
}
.faq-q:hover { color: var(--gold-light); padding-left: 14px; }
.faq-q__icon {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background .4s, box-shadow .4s, transform .6s var(--ease-spring), color .4s;
}
.faq-q__icon::before, .faq-q__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.8px;
  margin: -.9px 0 0 -7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--ease-out);
}
.faq-q__icon::after { transform: rotate(90deg); }
.faq-q:hover .faq-q__icon { box-shadow: inset 0 0 0 1.5px var(--gold); }
.faq-q[aria-expanded="true"] .faq-q__icon {
  color: var(--on-gold);
  background: linear-gradient(135deg, var(--champagne), var(--gold));
  box-shadow: var(--glow-gold);
  transform: rotate(180deg);
}
.faq-q[aria-expanded="true"] .faq-q__icon::after { transform: rotate(0deg); }
.js .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.js .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  max-width: 44rem;
  padding: 0 6px 28px;
  color: var(--text-soft);
  transition: opacity .4s, transform .5s var(--ease-out);
}
.js .faq-a p { opacity: 0; transform: translateY(-8px); }
.js .faq-item.is-open .faq-a p { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 5vw, 72px) 0 0;
  color: var(--text-soft);
  background:
    radial-gradient(700px 400px at 100% 0%, rgb(184 92 134 / .12), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgb(212 175 98 / .08), transparent 70%),
    #070605;
  border-top: 1px solid var(--line);
}
.footer__tiles {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-light);
  opacity: .04;
  -webkit-mask: var(--tile) 0 0 / 80px 80px repeat;
  mask: var(--tile) 0 0 / 80px 80px repeat;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer__title { font-size: clamp(3rem, 7vw, 5.6rem); font-weight: 300; line-height: .95; color: var(--text); }
.footer__title em { font-style: italic; color: var(--gold-light); }

.newsletter label { display: block; margin-bottom: 12px; font-weight: 600; color: var(--text); }
.newsletter__row { display: flex; gap: 10px; }
.newsletter__field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background .35s, box-shadow .45s var(--ease-out);
}
.newsletter__field:focus-within {
  background: rgb(255 255 255 / .07);
  box-shadow: inset 0 0 0 1.5px var(--gold-light), 0 0 0 6px rgb(212 175 98 / .1), 0 0 44px -6px rgb(212 175 98 / .45);
}
.newsletter__field .ic { color: var(--gold); }
.newsletter__field input {
  flex: 1;
  min-width: 0;
  padding: 1em 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  outline: none;
}
.newsletter__field input::placeholder { color: var(--text-dim); }

.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; padding: 60px 0; }
.footer__grid h3 {
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer__grid ul { display: grid; gap: 10px; }
.footer__grid a, .footer__grid .text-btn {
  text-decoration: none;
  color: var(--text-soft);
  font-weight: 500;
  transition: color .3s, padding .4s var(--ease-out);
}
.footer__grid .brand { color: var(--text); font-weight: 420; gap: .8rem; }
.footer__grid .brand__mark { width: 84px; height: 84px; }
.footer__grid nav a:hover, .footer__grid .text-btn:hover { color: var(--text); padding-left: 6px; }
.footer__grid .text-btn { font-size: inherit; }
.footer__brand p { margin-top: 16px; max-width: 22rem; }
.footer__contact li { display: flex; align-items: center; gap: .7em; }
.footer__contact .ic { color: var(--gold); }
.footer__contact a:hover { color: var(--text); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}
.footer__bottom a { color: var(--text-soft); }
.to-top { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; font-weight: 700; }
.to-top .ic { transition: transform .45s var(--ease-out); }
.to-top:hover .ic { transform: translateY(-4px); }

.footer__word {
  margin: 0;
  padding: .04em .12em .24em; /* room for the italic overhang and the descender of the g */
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(4.5rem, 21vw, 15rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(212 175 98 / .28);
  background: linear-gradient(90deg, transparent, rgb(235 203 134 / .25), transparent) 0 0 / 50% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sweep 6s ease-in-out infinite;
  user-select: none;
}
@keyframes sweep {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}

/* ---------- Toasts ---------- */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 95;
  display: grid;
  justify-items: center;
  gap: 8px;
  translate: -50% 0;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 32px);
}
.toast {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .8em 1.2em;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--on-gold);
  background: var(--champagne);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(20px) scale(.92);
  transition: opacity .35s, transform .5s var(--ease-spring);
}
.toast.is-in { opacity: 1; transform: none; }
.toast .ic { color: var(--olive-deep); }
.toast--alert .ic { color: #B4482A; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .rent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .bento {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "a a"
      "b b"
      "c d"
      "e f"
      "g g";
  }
  .tile--a { min-height: 520px; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Header name sizing (see .site-header .brand__word above) */
@media (max-width: 960px) { /* the badge is hidden here, so "Book a board" is back in the header */
  .site-header .brand__word { font-size: max(.625rem, min(4.5rem, (100cqi - 323px) / 11.93)); }
}
@media (max-width: 560px) { /* "Book a board" is hidden here, leaving more room */
  .site-header .brand__word { font-size: max(.625rem, min(4.5rem, (100cqi - 235px) / 11.93)); }
}
/* Where one line would be smaller than 16px, use two larger lines instead: THE OLIVE & / FIG COMPANY
   (sized from the width of "FIG COMPANY", the longer line, so the text wraps after the ampersand) */
@media (max-width: 462px) {
  .site-header .brand__word { font-size: max(.625rem, min(4.5rem, (100cqi - 235px) / 6.16)); }
}

@media (max-width: 960px) {
  .hero { min-height: 0; padding: calc(var(--header-h) + 60px) 0 130px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__shade {
    background: linear-gradient(180deg, rgb(10 9 8 / .72) 0%, rgb(10 9 8 / .58) 40%, rgb(10 9 8 / .82) 75%, var(--bg) 100%);
  }
  .hero__aside { display: flex; flex-wrap: wrap; gap: 10px; min-height: 0; }
  .hero__aside .chip { position: static; animation: none; }
  .badge-ring { display: none; }
  .scroll-cue { display: none; }

  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head--center { align-items: center; }

  .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; }
  .steps__line { display: none; }
  .stats__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; }

  .book__inner { grid-template-columns: minmax(0, 1fr); }
  .book__intro { position: static; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .rent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--g { flex-direction: column; align-items: flex-start; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 20px; translate: none; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d" "e" "f" "g"; }
  .tile--b {
    min-height: 400px;
    justify-content: flex-end;
    --scrim: linear-gradient(180deg, rgb(10 9 8 / .1) 0%, rgb(10 9 8 / .92) 65%);
  }
  .tile--g {
    min-height: 440px;
    justify-content: flex-end;
    --scrim: linear-gradient(180deg, rgb(10 9 8 / .1) 0%, rgb(10 9 8 / .92) 55%);
  }
  .filters { width: 100%; justify-content: space-between; }
  .filters__btn { padding: .6em .8em; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer__bottom { flex-direction: column; }
  .newsletter__row { flex-direction: column; }
  .ticker-cross { margin-top: -50px; padding: 30px 0; }
  .ticker--chocolate-deep { top: 30px; }
  .quote-pill__text small { display: none; }
}

@media (max-width: 560px) {
  .rent-grid { grid-template-columns: minmax(0, 1fr); }
  .menu-grid { gap: 12px; }
  .menu-card__body { padding: 14px 14px 16px; }
  .hero__title { font-size: clamp(1.1rem, 5.75vw, 1.7rem); } /* half the former phone size */
  .hero__eyebrow { font-size: .6rem; letter-spacing: .08em; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .chip { font-size: .78rem; }
  .chip small { display: none; }
  .chip__thumb, .chip__icon { width: 36px; height: 36px; }
  .nav__cta { display: none; }
  .stats__grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-auto-rows: 160px; gap: 10px; }
}

@media (max-width: 420px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .filters__btn { padding: .55em .55em; font-size: .82rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-reveal]:not(.is-in) { opacity: 1 !important; translate: none; }
  .ticker.is-ready .ticker__track { animation: none; }
}