/* ==========================================================================
   FINE ART PRODUCTION — Core Stylesheet
   Design system, layout & components.
   Brand palette derived from the original fineartproduction.com
   (antique gold #bc9b5d, ivory #faf7f2, deep maroon #7a1420, warm ink)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand ramp */
  --gold-100: #f6efe1;
  --gold-200: #e9dbc1;
  --gold-300: #d9bd85;
  --gold-400: #c9a86b;
  --gold-500: #bc9b5d; /* brand gold */
  --gold-600: #9f8054;
  --gold-700: #7d6440;
  --maroon-400: #a3202f;
  --maroon-500: #7a1420; /* brand maroon */
  --maroon-600: #5c0f18;

  /* Neutrals (warm) */
  --ink-900: #17130f;
  --ink-800: #201a15;
  --ink-700: #2a231b;
  --ink-600: #2a241c;
  --ivory-50: #fdfbf8;
  --ivory-100: #f8f4ed;
  --ivory-200: #f2ece1;

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(3rem, 9vw, 8.5rem);
  --fs-display: clamp(2.4rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.4rem, 2.4vw, 2.1rem);
  --fs-h4: clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body: clamp(1rem, 1.05vw, 1.075rem);
  --fs-lead: clamp(1.075rem, 1.5vw, 1.3rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: clamp(4.5rem, 11vw, 10rem);

  /* Layout */
  --wrap: 1360px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --header-h: 84px;
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.25s;
  --dur: 0.55s;
  --dur-slow: 0.9s;

  --z-cursor: 9999;
  --z-loader: 9000;
  --z-modal: 800;
  --z-header: 600;
}

/* ---- Light theme (default) ---- */
:root {
  --bg: var(--ivory-50);
  --bg-alt: var(--ivory-100);
  --bg-deep: var(--ivory-200);
  --surface: #ffffff;
  --surface-2: #fbf9f5;
  --text: #1a1512;
  --text-soft: #4a4139;
  --text-muted: #7a6f63;
  --border: rgba(20, 16, 12, 0.085);
  --border-strong: rgba(20, 16, 12, 0.16);
  --accent: var(--gold-600);
  --accent-soft: var(--gold-500);
  --accent-contrast: #ffffff;
  --secondary: var(--maroon-500);
  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.05), 0 4px 14px rgba(20, 16, 12, 0.05);
  --shadow: 0 12px 40px rgba(20, 16, 12, 0.075);
  --shadow-lg: 0 26px 70px rgba(20, 16, 12, 0.12);
  --invert-bg: var(--ink-900);
  --invert-text: var(--ivory-100);
  /* accent that reads against the INVERTED background, not the page one */
  --invert-accent: var(--gold-300);
  --grain-opacity: 0.022;
  --scrim: linear-gradient(to top, rgba(23, 19, 15, 0.82) 0%, rgba(23, 19, 15, 0.32) 45%, rgba(23, 19, 15, 0) 100%);
  color-scheme: light;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  --bg: var(--ink-900);
  --bg-alt: var(--ink-800);
  --bg-deep: #070605;
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --text: #f4efe6;
  --text-soft: #cfc5b6;
  --text-muted: #9b9184;
  --border: rgba(244, 239, 230, 0.13);
  --border-strong: rgba(244, 239, 230, 0.26);
  --accent: var(--gold-300);
  --accent-soft: var(--gold-400);
  --accent-contrast: #14110d;
  --secondary: #d4636f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.65);
  --invert-bg: var(--ivory-50);
  --invert-text: var(--ink-900);
  --invert-accent: var(--gold-600);
  --grain-opacity: 0.05;
  --scrim: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 100%);
  color-scheme: dark;
}

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



* { margin: 0; padding: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

body.is-locked { overflow: hidden; }

/* The scroll-reveal variants translate elements sideways (translateX +/-46px)
   before they animate in, which pushes them past the right edge and gives the
   page a horizontal scroll on narrow screens.
   `clip` is the right tool here rather than `hidden`: it stops the scrolling
   without creating a scroll container, so `position: sticky` descendants keep
   working. The body-only `hidden` above stays as the fallback for browsers
   that predate it. */
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Every photograph is served as WebP with a JPEG fallback, so each one is
   wrapped in <picture>. The wrapper must not generate a box of its own or it
   breaks any layout that sizes the <img> directly - a percentage height would
   resolve against the wrapper's auto height instead of the real container.
   display:contents removes it from the box tree entirely, so the <img> lays
   out exactly as it did before it was wrapped.

   This has to sit after the reset above: the reset used to name `picture` and
   was quietly setting it back to display:block. */
picture { display: contents; }

/* The one exception is the homepage hero slideshow, where the class that
   positions and cross-fades each slide sits on the <picture> itself. */
picture.hero-slide { display: block; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--accent-contrast); }

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

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: var(--gold-600);
  border-radius: 20px;
  border: 3px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

p { text-wrap: pretty; }

em, .italic { font-style: italic; color: var(--accent); }

strong { font-weight: 500; color: var(--text); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-soft);
  font-weight: 300;
}

.muted { color: var(--text-muted); }

.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.txt-center { text-align: center; }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 1620px; }

.section { padding-block: clamp(2.5rem, 5.5vh, 4.5rem); position: relative; }
.section--tight { padding-block: clamp(1.75rem, 3.5vh, 3rem); }
.section--alt { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); }

.section--invert { background: var(--invert-bg); color: var(--invert-text); }
.section--invert h1, .section--invert h2, .section--invert h3 { color: var(--invert-text); }
.section--invert .lead { color: color-mix(in srgb, var(--invert-text) 78%, transparent); }
.section--invert .eyebrow { color: var(--invert-accent); }
.section--invert .checklist li { color: color-mix(in srgb, var(--invert-text) 80%, transparent); }
.section--invert .checklist li::before { background: var(--invert-accent); }
.section--invert strong { color: var(--invert-text); }
.section--invert .pullquote { color: var(--invert-text); }
.section--invert .marquee--badges .marquee__track { color: color-mix(in srgb, var(--invert-text) 62%, transparent); }
.section--invert .marquee--badges i { background: var(--invert-accent); }
/* Body copy inside an inverted band — follows the band, not the page */
.invert-copy { color: color-mix(in srgb, var(--invert-text) 72%, transparent); }

.section-head { max-width: 720px; margin-bottom: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flow > * + * { margin-top: 1.1em; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  border: 0;
  margin-block: var(--space-lg);
}

/* Ornamental divider with diamond */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--accent);
  margin-block: var(--space-md);
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: min(120px, 18vw);
  background: linear-gradient(90deg, transparent, currentColor);
}
.ornament::after { background: linear-gradient(90deg, currentColor, transparent); }
.ornament span {
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 2.3em;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
  z-index: -1;
}

.btn:hover { color: var(--bg); box-shadow: var(--shadow); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: scale(0.97); }

.btn svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border: 1px solid var(--border-strong);
}
.btn--ghost::before { background: var(--accent); }
.btn--ghost:hover { color: var(--accent-contrast); border-color: var(--accent); }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.btn--light::before { background: #fff; }
.btn--light:hover { color: var(--ink-900); border-color: #fff; }

.btn--sm { padding: 0.8em 1.7em; font-size: 0.7rem; }
.btn--lg { padding: 1.25em 2.9em; font-size: 0.82rem; }

/* Text link with animated underline */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.35em;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.link:hover::after { transform: scaleX(0); }
.link svg { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease-out); }
.link:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Transparent over hero */
.site-header[data-transparent="true"]:not(.is-stuck) {
  --nav-fg: #ffffff;
  background: transparent;
}
.site-header[data-transparent="true"]:not(.is-stuck)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  z-index: -1;
  pointer-events: none;
}

.site-header.is-stuck {
  --nav-fg: var(--text);
  height: 68px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header:not([data-transparent="true"]) {
  --nav-fg: var(--text);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--border);
}

.nav {
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--nav-fg, var(--text));
}

/* Brand */
.brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.brand__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
  transition: transform 0.6s var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-12deg) scale(1.08); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__tag {
  font-size: 0.53rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0.68;
  margin-top: 4px;
}

/* Desktop menu */
.nav__menu { display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 1.6rem); }

.nav__link {
  position: relative;
  padding: 0.5rem 0.15rem;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--gold-400); opacity: 1; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown */
.nav__item { position: relative; }
.nav__item--has-sub > .nav__link::before {
  content: "";
  position: absolute;
  right: -0.75rem;
  top: 50%;
  width: 4px;
  height: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.6;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__item--has-sub { padding-right: 0.75rem; }
.nav__item--has-sub:hover > .nav__link::before { transform: translateY(-30%) rotate(225deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  min-width: 250px;
  padding: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast);
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__sub a {
  display: block;
  padding: 0.62rem 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast);
}
.nav__sub a:hover { background: var(--bg-alt); color: var(--accent); padding-left: 1.25rem; }

/* Nav actions */
.nav__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

/* Theme toggle */
.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  opacity: 0.85;
  transition: opacity var(--dur-fast), transform 0.5s var(--ease-spring), background var(--dur-fast);
  overflow: hidden;
}
.theme-toggle:hover { opacity: 1; transform: rotate(25deg) scale(1.06); }
.theme-toggle svg {
  position: absolute;
  width: 17px;
  height: 17px;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }

/* Burger */
.burger {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
}
.burger__box { position: relative; width: 17px; height: 12px; }
.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease-out), width 0.4s var(--ease-out);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 5.25px; width: 70%; }
.burger__box span:nth-child(3) { bottom: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav__menu { display: none; }
  .burger { display: grid; }
  .nav__cta { display: none; }
}

/* Keep the brand and the two controls comfortably inside a narrow screen */
@media (max-width: 520px) {
  .nav { gap: 0.75rem; }
  .brand { gap: 0.55rem; min-width: 0; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 1.05rem; letter-spacing: 0.04em; }
  .brand__tag { font-size: 0.48rem; letter-spacing: 0.28em; }
  .nav__actions { gap: 0.45rem; }
  .theme-toggle, .burger { width: 40px; height: 40px; }
  .theme-toggle svg { width: 16px; height: 16px; }
}

/* Mobile drawer — sits below the header so the brand and the close button
   stay visible and reachable while the menu is open */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 550;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  clip-path: circle(0% at calc(100% - 3.5rem) 3rem);
  visibility: hidden;
  transition: clip-path 0.75s var(--ease-in-out), visibility 0.75s;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 3.5rem) 3rem); visibility: visible; }

/* While the menu is open the header sits on the drawer's own background, so
   it drops its scrim and inherits normal text colour instead of hero white. */
body.nav-open .site-header {
  --nav-fg: var(--text);
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.nav-open .site-header::after { display: none; }

.drawer__list { display: flex; flex-direction: column; }
.drawer__list > li {
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(18px);
}
.drawer.is-open .drawer__list > li {
  animation: drawerItem 0.6s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 200ms);
}
@keyframes drawerItem { to { opacity: 1; transform: none; } }

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}
.drawer__link:hover { color: var(--accent); padding-left: 0.6rem; }
.drawer__link[aria-current="page"] { color: var(--accent); }
.drawer__num {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  opacity: 0.7;
}

.drawer__foot {
  margin-top: auto;
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* :not(.btn) so this never overrides the button's own colours */
.drawer__foot a:not(.btn) { font-size: 0.95rem; color: var(--text-soft); }
.drawer__foot a:not(.btn):hover { color: var(--accent); }

/* Scroll progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--maroon-400));
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink-900);
  color: #fff;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
.hero__media video { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero__media video.is-ready { opacity: 1; }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The headline sits left, so that side gets its own wash — otherwise a busy
     bright frame swallows the type. */
  background: var(--scrim), radial-gradient(120% 90% at 50% 100%, rgba(23, 19, 15, 0.7), transparent 65%);
}

/* The headline sits left on wide screens, so that side gets its own wash —
   otherwise a busy bright frame swallows the type. Narrow screens skip it:
   there the bottom gradient already does the work and this would just mud
   the whole picture. */
@media (min-width: 701px) {
  .hero__media::after {
    background:
      linear-gradient(to right, rgba(23, 19, 15, 0.72) 0%, rgba(23, 19, 15, 0.42) 40%, rgba(23, 19, 15, 0.06) 72%),
      var(--scrim),
      radial-gradient(120% 90% at 50% 100%, rgba(23, 19, 15, 0.7), transparent 65%);
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(3.5rem, 8vh, 7rem);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 15ch;
}
.hero__title .script { color: var(--gold-300); }

.hero__sub {
  max-width: 52ch;
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--space-lg); }

.hero__eyebrow { color: var(--gold-300); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero__meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__meta b {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-300);
}
/* Direct child only — the number lives in a <span> inside <b> and must keep
   the display size, not the label styling. */
.hero__meta div > span {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 8vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
  animation: scrollCue 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollCue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 800px) { .scroll-cue { display: none; } }

/* ---- Hero on phones ----------------------------------------------------
   The old block filled the screen with type and left none of the photograph
   visible, which is a poor look for a photography studio. This keeps the top
   of the frame clear and packs the copy into the bottom third. */
@media (max-width: 700px) {
  .hero__media::after {
    /* dark where the words are, near-clear where the picture is */
    background: linear-gradient(
      to top,
      rgba(23, 19, 15, 0.95) 0%,
      rgba(23, 19, 15, 0.88) 26%,
      rgba(23, 19, 15, 0.55) 48%,
      rgba(23, 19, 15, 0.18) 72%,
      rgba(23, 19, 15, 0.05) 100%
    );
  }

  .hero__inner {
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 5.5rem; /* clears the floating enquiry pill */
  }

  .hero__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    margin-bottom: 0.85rem;
  }
  .hero__eyebrow::before { width: 1.6rem; }

  .hero__title {
    max-width: 100%;
    font-size: clamp(2.7rem, 12.5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .hero__sub {
    margin-top: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    margin-top: 1.6rem;
  }
  .hero__actions .btn { width: 100%; }

  /* One solid call to action; the second reads better as a quiet link than as
     a second slab competing with it. */
  .hero__actions .btn--light {
    width: auto;
    padding: 0.2rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: #fff;
  }
  .hero__actions .btn--light::before { display: none; }
  .hero__actions .btn--light::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
  }
  .hero__actions .btn--light:hover { color: var(--gold-300); }

  /* The four figures repeat further down the page, so dropping them here costs
     nothing and buys back ~150px — which is what lets the copy sit low enough
     to be legible and gives the photograph the top half of the screen. */
  .hero__meta { display: none; }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  min-height: clamp(48vh, 62vh, 70vh);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ink-900);
  color: #fff;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Keep faces in frame when a portrait photo is cropped into a wide banner */
.page-hero__media img.obj-top { object-position: center 22%; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(23, 19, 15, 0.78), rgba(23, 19, 15, 0.3));
}
.page-hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: calc(var(--header-h) + 4rem) var(--gutter) 3.5rem;
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: rgba(255, 255, 255, 0.8); max-width: 58ch; margin-top: 1.25rem; }
.page-hero .eyebrow { color: var(--gold-300); }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-md);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.crumbs a:hover { color: var(--gold-300); }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: 0.55rem; opacity: 0.5; }

/* --------------------------------------------------------------------------
   8. CARDS & MEDIA
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 0.7s var(--ease-out);
}
.media--ratio-1 { aspect-ratio: 1; }
.media--ratio-43 { aspect-ratio: 4 / 3; }
.media--ratio-34 { aspect-ratio: 3 / 4; }
.media--ratio-169 { aspect-ratio: 16 / 9; }
.media--ratio-23 { aspect-ratio: 2 / 3; }
.media--ratio-32 { aspect-ratio: 3 / 2; }

.media:hover img { transform: scale(1.06); }

/* Service card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
  will-change: transform;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.07); }
.card__body {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}
.card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.15; }
.card__text { font-size: 0.94rem; color: var(--text-muted); line-height: 1.65; flex: 1; }
.card__link { margin-top: 0.4rem; }

/* Overlay tile */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  background: var(--ink-800);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.8s var(--ease-out);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
  transition: opacity 0.5s var(--ease-out);
}
.tile:hover img { transform: scale(1.08); }
.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  color: #fff;
}
.tile__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
}
.tile__meta {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 0.5rem;
  display: block;
}
.tile__text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.78);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-out), opacity 0.4s var(--ease-out), margin-top 0.5s var(--ease-out);
}
.tile:hover .tile__text { max-height: 8rem; opacity: 1; margin-top: 0.55rem; }

/* Stats */
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border);
}
.stat b {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
/* Direct child only — see the note on .hero__meta above. */
.stat > span {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--invert .stat { border-top-color: color-mix(in srgb, var(--invert-text) 20%, transparent); }
.section--invert .stat b { color: var(--invert-accent); }
.section--invert .stat > span { color: color-mix(in srgb, var(--invert-text) 62%, transparent); }

/* Feature list.
   The marker is absolutely positioned rather than a flex sibling — as a flex
   item it would split "<strong>Label</strong> — description" into two columns
   and wrap them independently. */
.checklist { display: flex; flex-direction: column; gap: 0.95rem; }
.checklist li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.98rem;
  color: var(--text-soft);
  line-height: 1.7;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}
.checklist strong { display: inline; }

/* Editorial service list — a title line and a description line per row, which
   reads far better than "Label — description" crammed onto one line. */
.service-list { border-top: 1px solid var(--border); }
.service-list li {
  position: relative;
  padding: 1.15rem 0 1.15rem 2.1rem;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.45s var(--ease-out), background 0.35s var(--ease-out);
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 1.72rem;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  transition: transform 0.45s var(--ease-spring);
}
.service-list li:hover { padding-left: 2.5rem; }
.service-list li:hover::before { transform: rotate(135deg) scale(1.25); }

.service-list h4 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.42rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
}
.service-list p {
  margin-top: 0.3rem;
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
}

.section--invert .service-list { border-top-color: color-mix(in srgb, var(--invert-text) 18%, transparent); }
.section--invert .service-list li { border-bottom-color: color-mix(in srgb, var(--invert-text) 18%, transparent); }
.section--invert .service-list li::before { background: var(--invert-accent); }
.section--invert .service-list h4 { color: var(--invert-text); }
.section--invert .service-list p { color: color-mix(in srgb, var(--invert-text) 68%, transparent); }

/* Team feature photo + bios (about page) */
.team-feature {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
  box-shadow: var(--shadow-lg);
}
.team-feature img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 32%;
  transition: transform 1.4s var(--ease-out);
}
.team-feature:hover img { transform: scale(1.03); }
@media (max-width: 700px) { .team-feature img { aspect-ratio: 4 / 3; } }

.bio__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   9. GALLERY & LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
}

.filter-btn {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
    transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* Gold sweep fills in from the left on hover and stays for the active tab */
.filter-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.filter-btn:hover {
  color: var(--accent-contrast);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.filter-btn:hover::before { transform: scaleX(1); transform-origin: left; }

.filter-btn.is-active {
  color: var(--accent-contrast);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.filter-btn.is-active::before { transform: scaleX(1); }

.filter-btn__count {
  font-size: 0.62em;
  letter-spacing: 0.06em;
  opacity: 0.65;
  transform: translateY(-0.55em);
}

.masonry { column-count: 3; column-gap: clamp(0.6rem, 1.2vw, 1.1rem); }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 520px) { .masonry { column-count: 1; } }

.masonry__item {
  break-inside: avoid;
  margin-bottom: clamp(0.6rem, 1.2vw, 1.1rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  background: var(--bg-alt);
  display: block;
  width: 100%;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.masonry__item img { width: 100%; transition: transform 1.1s var(--ease-out), filter 0.6s var(--ease-out); }
.masonry__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 19, 15, 0.6), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.masonry__item:hover img { transform: scale(1.05); }
.masonry__item:hover::after { opacity: 1; }
.masonry__item.is-hidden { display: none; }

.masonry__cap {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
.masonry__item:hover .masonry__cap { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 5, 4, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.lightbox.is-open .lightbox__img { transform: none; opacity: 1; }
.lightbox__cap {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; transform: scale(1.08); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__prev { left: clamp(0.75rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.75rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }
@media (max-width: 640px) {
  .lightbox__prev { left: 0.6rem; }
  .lightbox__next { right: 0.6rem; }
  .lightbox__btn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   10. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  --gap: clamp(2rem, 5vw, 5rem);
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  user-select: none;
  padding-block: var(--space-md);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

.marquee--display .marquee__track {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--text);
}
.marquee--display .marquee__track span { display: inline-flex; align-items: center; gap: var(--gap); }
.marquee--display .marquee__track i {
  font-style: normal;
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.marquee--badges .marquee__track {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee--badges .marquee__track span { display: inline-flex; align-items: center; gap: var(--gap); }
.marquee--badges i {
  font-style: normal;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  height: 100%;
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.quote__stars { display: flex; gap: 3px; color: var(--gold-500); }
.quote__stars svg { width: 15px; height: 15px; }
.quote__text {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-soft);
  flex: 1;
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
}
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.quote__name { font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em; }
.quote__where { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11b. 3D TESTIMONIAL CAROUSEL
   Cards sit on a perspective stage; the active one faces the viewer while its
   neighbours rotate away into depth. Drag, swipe, arrows and keyboard all move
   it. Falls back to a plain scrolling row when JS is unavailable.
   -------------------------------------------------------------------------- */
.carousel3d {
  position: relative;
  perspective: 1700px;
  perspective-origin: 50% 45%;
  padding-block: 1rem;
}

.carousel3d__stage {
  position: relative;
  height: 430px;
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: grab;
}
.carousel3d__stage.is-dragging { cursor: grabbing; }

.carousel3d__card {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(270px, 74vw, 480px);
  height: 100%;
  margin-left: calc(clamp(270px, 74vw, 480px) / -2);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform 0.85s var(--ease-out), opacity 0.7s var(--ease-out),
    filter 0.7s var(--ease-out);
}

/* The quote card itself fills the 3D slot */
.carousel3d__card .quote {
  height: 100%;
  box-shadow: var(--shadow-lg);
  transition: box-shadow 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
.carousel3d__card[data-active="false"] .quote { box-shadow: var(--shadow); }
.carousel3d__card[data-active="true"] .quote {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Reflection-ish floor glow under the active card */
.carousel3d::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: min(60%, 520px);
  height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

/* Controls */
.carousel3d__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: var(--space-lg);
}

.carousel3d__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-out);
}
.carousel3d__btn:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  transform: scale(1.08);
}
.carousel3d__btn svg { width: 19px; height: 19px; }

.carousel3d__dots { display: flex; align-items: center; gap: 0.55rem; }
/* The dot a finger can find: a 24px target around an 8px mark. */
.carousel3d__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  transition: width 0.45s var(--ease-out);
}
.carousel3d__dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 100px;
  background: var(--border-strong);
  transition: background 0.35s var(--ease-out);
}
.carousel3d__dot[aria-selected="true"] { width: 42px; }
.carousel3d__dot[aria-selected="true"]::before { background: var(--accent); }

/* Inverted band variant */
.section--invert .carousel3d__btn { color: var(--invert-text); border-color: color-mix(in srgb, var(--invert-text) 30%, transparent); }
.section--invert .carousel3d__dot { background: color-mix(in srgb, var(--invert-text) 28%, transparent); }
.section--invert .carousel3d__dot[aria-selected="true"] { background: var(--invert-accent); }

.carousel3d__hint {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .carousel3d { perspective: 1100px; }
  .carousel3d__stage { height: 545px; }
  .carousel3d__controls { gap: 0.9rem; margin-top: var(--space-md); }
  .carousel3d__btn { width: 44px; height: 44px; }
}

/* Without JS the stage never initialises, so show the cards as a simple
   horizontal scroller rather than a stack of absolutely-positioned cards. */
html:not(.js) .carousel3d__stage {
  height: auto;
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: 1rem;
}
html:not(.js) .carousel3d__card {
  position: relative;
  left: auto;
  margin-left: 0;
  height: auto;
  flex: 0 0 min(420px, 85vw);
}
html:not(.js) .carousel3d__controls { display: none; }

/* Big pull quote */
.pullquote {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-sm); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { position: relative; display: flex; flex-direction: column; gap: 0.45rem; }
.field label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field select { cursor: pointer; }
.field select option { background: var(--surface); color: var(--text); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 0.55; }

.form__note { font-size: 0.8rem; color: var(--text-muted); }
.form__status {
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: none;
}
.form__status.is-visible { display: block; }

/* --------------------------------------------------------------------------
   13. ACCORDION / FAQ
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  transition: color var(--dur-fast);
}
.acc-trigger:hover { color: var(--accent); }
.acc-icon {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform 0.4s var(--ease-out);
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  transform: rotate(180deg);
}
.acc-trigger[aria-expanded="true"] .acc-icon::after { opacity: 0; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding-bottom: 1.6rem; max-width: 74ch; color: var(--text-muted); line-height: 1.75; }

/* --------------------------------------------------------------------------
   14. SPLIT / EDITORIAL SECTIONS
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .split--reverse > *:first-child { order: 0; }
}

/* Offset image pair.
   Sized from the CONTAINER, not the viewport — the previous vw-based grid rows
   made this block grow far taller than the text beside it and spill out. */
.stack-images {
  position: relative;
  padding-bottom: 14%;
}
.stack-images__a {
  width: 74%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.stack-images__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 6px solid var(--bg);
  box-shadow: var(--shadow-lg);
}
.stack-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
.stack-images figure:hover img,
.stack-images .media:hover img { transform: scale(1.05); }

/* Gold roundel that sits over the pair */
.stack-images__badge {
  position: absolute;
  left: 0;
  bottom: 6%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(78px, 8vw, 104px);
  height: clamp(78px, 8vw, 104px);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  text-align: center;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
}
.stack-images__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .stack-images { padding-bottom: 12%; }
  .stack-images__badge { width: 68px; height: 68px; font-size: 0.46rem; }
  .stack-images__badge b { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: #fff;
  isolation: isolate;
  text-align: center;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.cta-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 100% at 50% 50%, rgba(23, 19, 15, 0.5), rgba(23, 19, 15, 0.92));
}
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255, 255, 255, 0.78); margin-inline: auto; max-width: 58ch; }
.cta-band .eyebrow { color: var(--gold-300); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: var(--space-lg); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  /* Was the 2xl step: a hand's width of empty background before the first
     word of the footer. */
  padding-top: clamp(2.5rem, 5vh, 4rem);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vh, 3.25rem);
}
@media (max-width: 1000px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__brand .brand__mark { width: 54px; height: 54px; }
.footer__blurb { font-size: 0.94rem; color: var(--text-muted); max-width: 38ch; line-height: 1.7; }

.footer__title {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.68rem; }
.footer__col a, .footer__col li {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.footer__col a:hover { color: var(--accent); transform: translateX(4px); }

.footer__contact { display: flex; flex-direction: column; gap: 1rem; }
.footer__contact-item { display: flex; flex-direction: column; gap: 0.2rem; }
.footer__contact-item span {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}
.footer__contact-item a, .footer__contact-item p {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 400;
  color: var(--text);
  transition: color var(--dur-fast);
}
.footer__contact-item a:hover { color: var(--accent); }

.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast),
    transform 0.4s var(--ease-spring);
}
.socials a:hover {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-4px);
}
.socials svg { width: 16px; height: 16px; }

.footer__marquee { border-block: 1px solid var(--border); overflow: hidden; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.footer__bottom a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   16b. FLOATING ACTIONS — persistent enquiry CTA + back to top
   -------------------------------------------------------------------------- */
.float-actions {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Persistent enquiry button — a compact pill with an icon badge */
.float-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1.35rem 0.4rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--ink-900);
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}
.float-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32); }

.float-cta__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold-300);
  color: var(--ink-900);
  transition: transform 0.55s var(--ease-spring);
}
.float-cta:hover .float-cta__icon { transform: rotate(-10deg) scale(1.07); }
.float-cta__icon svg { width: 17px; height: 17px; }

/* Invert on dark so the pill stays legible against a dark page */
:root[data-theme="dark"] .float-cta { background: var(--ivory-50); color: var(--ink-900); }
:root[data-theme="dark"] .float-cta__icon { background: var(--gold-600); color: #fff; }

/* Back to top — collapsed out of the row until there is something to go up to,
   so the enquiry pill always sits flush to the edge */
.to-top {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-out);
}
.to-top.is-visible { display: grid; animation: popIn 0.45s var(--ease-spring) both; }
.to-top:hover { transform: translateY(-3px); background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.to-top svg { width: 18px; height: 18px; }

@keyframes popIn {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .float-actions { bottom: 1rem; gap: 0.5rem; }
  .float-cta {
    padding: 0.35rem 1.1rem 0.35rem 0.35rem;
    font-size: 0.67rem;
    letter-spacing: 0.15em;
    gap: 0.55rem;
  }
  .float-cta__icon { width: 32px; height: 32px; }
  .float-cta__icon svg { width: 15px; height: 15px; }
  .to-top { width: 42px; height: 42px; }
}

/* Keep the floating bar from covering the last line of the footer */
.site-footer { padding-bottom: 5.5rem; }
@media (min-width: 561px) { .site-footer { padding-bottom: 2rem; } }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  padding: 0.9rem 1.5rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Film grain overlay */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 400;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(10) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

@media (max-width: 700px) { .hide-mobile { display: none !important; } }

/* ===========================================================================
   STAY — the in-page sheet
   The studio's rule is that a visitor should never be handed to a competitor's
   marketplace by a single click. Review platforms and venue sites all block
   framing, so their pages cannot be shown inside ours; what this does instead
   is keep the reading here and make leaving deliberate. The sheet rises from
   the bottom of the screen and the site's own name sits at the top of it, so
   it is always obvious you are still on Fine Art Production.
   ======================================================================== */
/* Pinned rather than merely hidden: the offset is set from JS so the page
   behind the sheet stays exactly where the reader left it. */
body.stay-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.ed-stay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Without this the sheet keeps its display:flex while hidden -- an author
   declaration outranks the [hidden] default -- so a full-screen transparent
   layer stayed over the page after the first close and swallowed every click. */
.ed-stay[hidden] { display: none !important; }

.ed-stay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.ed-stay.is-open .ed-stay__scrim { opacity: 1; }

.ed-stay__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  max-height: min(88vh, 900px);
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -24px 70px rgba(12, 10, 8, 0.42);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}
.ed-stay.is-open .ed-stay__sheet { transform: translateY(0); }

.ed-stay__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid var(--ed-rule);
}
.ed-stay__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ed-stay__brand img { width: 26px; height: 26px; }

.ed-stay__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
}

.ed-stay__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ed-stay__close svg { width: 1.05rem; height: 1.05rem; }
.ed-stay__close:hover { background: var(--text); color: var(--bg); }

.ed-stay__body {
  padding: clamp(1.75rem, 4vh, 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ed-stay__body:focus { outline: none; }

/* The outbound card: says where it goes before anything opens. */
.ed-stay__leave { max-width: 58ch; margin-inline: auto; text-align: center; }
.ed-stay__lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}
.ed-stay__lead b { font-weight: 500; }
.ed-stay__host {
  margin: 1.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--gold-600);
  word-break: break-all;
}
.ed-stay__note {
  margin: 1rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}
.ed-stay__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
}
.ed-stay__back {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.ed-stay__back:hover { color: var(--text); }

/* Reading a platform's reviews without leaving. */
.ed-stay__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.75rem;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
  border-bottom: 1px solid var(--ed-rule);
}
.ed-stay__score {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
}
.ed-stay__of {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-stay__verify {
  width: 100%;
  margin: 1.5rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}
.ed-stay__verify a { color: var(--gold-600); }

.ed-stay__rev { max-width: 66ch; margin-inline: auto; }
.ed-stay__rev figure { margin: 0; }
.ed-stay__rev figure + figure {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--ed-rule);
}
.ed-stay__rev blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.62;
  color: var(--text);
}
.ed-stay__rev figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-stay__rev figcaption b { display: block; color: var(--text); letter-spacing: 0.2em; }
.ed-stay__stars { color: var(--gold-500); letter-spacing: 0.2em; font-size: 0.8rem; }

@media (max-width: 700px) {
  .ed-stay__sheet { max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
  .ed-stay__bar { grid-template-columns: 1fr auto; padding-block: 0.9rem; }
  .ed-stay__brand { display: none; }
  .ed-stay__title { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-stay__sheet, .ed-stay__scrim { transition: none; }
  .ed-stay__sheet { transform: none; }
}

/* The sheet as a window onto another site. Framed content wants the whole
   sheet, so the body padding goes and the frame takes the height. */
.ed-stay.has-frame .ed-stay__sheet { max-height: 94vh; height: 94vh; }
.ed-stay.has-frame .ed-stay__body {
  /* Has to claim the sheet's spare height itself, or the iframe inside falls
     back to its 150px default and the sheet renders as a grey strip. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.ed-stay__frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg-alt);
}
.ed-stay__foot {
  flex: none;
  margin: 0;
  padding: 0.85rem var(--gutter);
  border-top: 1px solid var(--ed-rule, rgba(0,0,0,.1));
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
.ed-stay__foot a { color: var(--gold-600); }

/* Homepage: the floating Check Your Date waits until the hero has scrolled
   away, so no more than two are ever on screen at once. */
.float-cta {
  transition: opacity 0.45s var(--ease-out), visibility 0.45s,
              transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.float-cta.is-held {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

/* Homepage review carousel: WeddingWire reviews. The couple's own headline
   leads, then a verbatim lead of the review; a monogram replaces the stock
   photographs that used to stand in as avatars. */
.quote__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.carousel3d .quote__text {
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quote__mono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold-700);
}
:root[data-theme="dark"] .quote__mono { background: rgba(217, 189, 133, 0.12); color: var(--gold-300); }

/* ===========================================================================
   Homepage review carousel -- full WeddingWire reviews
   The cards are light even inside the dark Proof section, and that section
   passes its light text colour down: the reviewer's name inherited it and all
   but disappeared against the card. Every text colour in the card is now set
   on the card itself. Full reviews run long, so each review scrolls inside
   its card, with a fade only while there is more below.
   ======================================================================== */
.section--invert .quote { color: var(--text); }
.quote__name { color: var(--text); }
.quote__where { color: var(--text-muted); }

.carousel3d__stage { height: 595px; }
@media (max-width: 720px) {
  .carousel3d__stage { height: 900px; }
}

.carousel3d .quote { height: 100%; min-height: 0; }
.carousel3d .quote__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.carousel3d .quote__text {
  display: block;
  -webkit-line-clamp: unset;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.72;
  color: var(--text-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-300) transparent;
}
.carousel3d .quote__text p + p { margin-top: 0.8em; }
.carousel3d .quote__text::-webkit-scrollbar { width: 4px; }
.carousel3d .quote__text::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 4px; }
.carousel3d .quote__text:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }
.carousel3d .quote__text.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
}

/* Each card carries its way out to the whole review, and the carousel can be
   stopped: a moving panel of text has to be stoppable to be readable. */
.quote__source {
  align-self: start;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  border-bottom: 1px solid var(--gold-300);
  padding-bottom: 3px;
}
.quote__source:hover { color: var(--text); }
.carousel3d__btn--play svg { width: 40%; height: 40%; }

/* An outbound link carries a small mark, unless it already carries an arrow
   of its own. */
.is-external:not(:has(svg))::after {
  content: "↗";
  margin-left: 0.35em;
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.65;
}

/* A visitor who asks their system for less motion gets it: the location strip
   and the review carousel stop where they are. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .carousel3d__card { transition: none !important; }
}

/* The footer names every place we work once, on one line that wraps. */
.footer__places {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem clamp(1.1rem, 2.6vw, 2.2rem);
  padding: clamp(1.1rem, 2.4vh, 1.5rem) var(--gutter);
  border-block: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.footer__places a {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__places a:hover { color: var(--accent); }
.footer__places a + a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Footer text reads at AA contrast on the deep ground, in both themes. */
.footer__title { color: var(--gold-700); }
.footer__blurb, .footer__col a, .footer__col li, .footer__places a, .footer__bottom, .footer__bottom a { color: #635a50; }
:root[data-theme="dark"] .footer__title { color: var(--gold-300); }
:root[data-theme="dark"] .footer__blurb, :root[data-theme="dark"] .footer__col a, :root[data-theme="dark"] .footer__col li,
:root[data-theme="dark"] .footer__places a, :root[data-theme="dark"] .footer__bottom, :root[data-theme="dark"] .footer__bottom a { color: var(--text-muted); }
.footer__col a:hover, .footer__places a:hover { color: var(--accent); }
.footer__contact-item span { color: #635a50; opacity: 1; }
:root[data-theme="dark"] .footer__contact-item span { color: var(--text-muted); }

/* Form states the contact script asks for. */
.form__status.is-error { color: var(--secondary); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--secondary); }
.field__hint {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: -0.15rem;
}
.form[hidden],
.form__done[hidden] { display: none; }
.form__done {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--ed-gold, var(--gold-400));
  background: var(--surface);
}
.form__done h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
}
.form__done p { max-width: 52ch; line-height: 1.8; color: var(--text-soft); }
.form__done:focus { outline: none; }

/* New-client form: the Google Form's choice questions as chips. */
.chips { border: 0; margin: 0; padding: 0; min-width: 0; gap: 0.9rem; }
.chips legend {
  padding: 0;
  margin-bottom: 0.9rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chips__set { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips .chip { position: relative; letter-spacing: 0.04em; text-transform: none; font-size: inherit; font-weight: inherit; }
.chips .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.chips .chip span {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--text);
  border: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chips .chip:hover span { border-color: var(--ed-gold, var(--gold-400)); }
.chips .chip input:checked + span { background: var(--ed-gold, var(--gold-400)); border-color: var(--ed-gold, var(--gold-400)); color: #fff; }
.chips .chip input:focus-visible + span { outline: 2px solid var(--ed-gold, var(--gold-400)); outline-offset: 3px; }
.chips[aria-invalid="true"] .chip span { border-color: var(--secondary); }
.chips .field__hint { margin: -0.4rem 0 0.2rem; }
.chips__other[hidden] { display: none; }
.chips__other { margin-top: 0.4rem; max-width: 26rem; }

/* Event dates: a calendar to pick from, each chosen date kept as a tag. */
.dates__pick { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.dates__pick input[type="date"] { flex: 1 1 12rem; width: auto; min-width: 0; cursor: pointer; }
.dates__pick input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; }
:root[data-theme="dark"] .dates__pick input[type="date"] { color-scheme: dark; }
.dates__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.dates__list:empty { display: none; }
.dates__list li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.45rem 0.45rem 0.85rem;
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 300;
  color: var(--text); border: 1px solid var(--ed-gold, var(--gold-400));
}
.dates__list button {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
  font-size: 1rem; line-height: 1; color: var(--text-muted); cursor: pointer;
  background: none; border: 0; border-radius: 50%;
}
.dates__list button:hover, .dates__list button:focus-visible { color: var(--text); background: rgba(128, 128, 128, 0.14); }
.dates[aria-invalid="true"] input[type="date"] { border-bottom-color: var(--secondary); }

/* Tighter chips and a date field that matches its neighbours. */
.chips { gap: 0.6rem; }
.chips legend { margin-bottom: 0.6rem; }
.chips__set { gap: 0.45rem; }
.chips .chip span { padding: 0.5rem 0.9rem; font-size: 0.8rem; letter-spacing: 0.02em; }
.dates__pick input[type="date"] { font: inherit; font-size: 1rem; font-weight: 300; }
.dates__list li { padding: 0.3rem 0.35rem 0.3rem 0.7rem; font-size: 0.78rem; }
.dates__list button { width: 1.4rem; height: 1.4rem; }

/* The New Client form, compact: label, then the line; no hint rows. */
.nc-compact.form { gap: 1.15rem; }
.nc-compact .form__row { gap: 1.15rem 1.5rem; }
.nc-compact .field { gap: 0.2rem; }
.nc-compact .field input,
.nc-compact .field select { padding: 0.55rem 0; font-size: 0.95rem; }
.nc-compact .field select { appearance: none; -webkit-appearance: none; padding-right: 1.6rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a08a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.1rem center / 16px; }
.nc-compact .field select:invalid { color: var(--text-muted); }
.nc-compact .field input::placeholder { opacity: 0.7; }
.nc-compact .nc-note { max-width: 62ch; }
.nc-compact .btn { margin-top: 0.35rem; }

/* Services dropdown: checkboxes in a panel under a field-like button. */
.multi { position: relative; }
.multi__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; padding: 0.55rem 0; font: inherit; font-size: 0.95rem; font-weight: 300; text-align: left;
  color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--border-strong);
  border-radius: 0; cursor: pointer;
}
.multi__btn:focus-visible { outline: none; border-bottom-color: var(--accent); }
.multi__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.multi__value.is-empty { color: var(--text-muted); }
.multi__btn svg { flex: none; width: 16px; height: 16px; color: #a08a6a; transition: transform 0.2s ease; }
.multi__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.multi__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  display: grid; padding: 0.35rem; max-height: 19rem; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.5);
}
.multi__panel[hidden] { display: none; }
.field .multi__opt {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; cursor: pointer;
  font-size: 0.9rem; font-weight: 300; letter-spacing: 0.01em; text-transform: none; color: var(--text);
}
.field .multi__opt:hover { background: rgba(160, 138, 106, 0.12); }
.field .multi__opt input {
  -webkit-appearance: none; appearance: none; flex: none; width: 16px; height: 16px; margin: 0; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 2px; background: transparent; cursor: pointer;
}
.field .multi__opt input:checked { background: var(--ed-gold, var(--gold-400)); border-color: var(--ed-gold, var(--gold-400));
  box-shadow: inset 0 0 0 3px var(--surface); }
.field .multi__opt input:focus-visible { outline: 2px solid var(--ed-gold, var(--gold-400)); outline-offset: 2px; }
.multi[aria-invalid="true"] .multi__btn,
.nc-compact select[aria-invalid="true"] { border-bottom-color: var(--secondary); }
.nc-compact .dates__list { margin-top: 0.45rem; }
/* Sections stack in page order; the one with an open dropdown comes forward
   so the next section cannot cover the list. */
section:has(.multi__panel:not([hidden])) { position: relative; z-index: 50; }

/* Dropdown lists: compact, and opening upwards when there is no room below. */
.multi__panel { max-height: 15.5rem; padding: 0.25rem; }
.field .multi__opt { padding: 0.45rem 0.55rem; font-size: 0.86rem; gap: 0.6rem; }
.multi.is-up .multi__panel { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.5); }
.field .multi__opt input[type="radio"] { border-radius: 50%; }

/* Place suggestions under the Event locations line. */
.places__box { position: relative; }
.places__list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 0.25rem; list-style: none; max-height: 16rem; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.5);
}
.places__list[hidden] { display: none; }
.places__list li { display: grid; gap: 0.1rem; padding: 0.5rem 0.6rem; cursor: pointer; line-height: 1.3; }
.places__list li strong { font-weight: 400; font-size: 0.88rem; color: var(--text); }
.places__list li span { font-size: 0.74rem; color: var(--text-muted); }
.places__list li:hover, .places__list li.is-active { background: rgba(160, 138, 106, 0.14); }
section:has(.places__list:not([hidden])) { position: relative; z-index: 50; }