/* ============================================================
   Societa Fortezza — Hotsite Styles
   ============================================================ */

@font-face {
  font-family: 'Anastasia Script';
  src: url('fonts/AnastasiaScript%20Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============ COLOUR TOKENS ============ */
  --obsidian: #07070a;
  --basalt: #0f0f12;
  --graphite: #1c1c20;
  --carbon: #0a0a0b;       /* slightly warmer black, used for vinyl/disc fills */

  --ivory: #f4ecd8;
  --ivory-muted: #c8b89b;
  --ivory-faint: #6b6354;

  --gold-deep: #8a6a3c;    /* dark bronze — for gradient anchors */
  --gold: #b8935a;         /* primary brand gold */
  --gold-light: #d4b27a;   /* polished gold — for highlights */
  --groove: #3a2a18;       /* vinyl groove brown */

  /* ============ COMPOSED TOKENS ============ */
  /* The signature gold-leaf gradient — used on all script titles.
     Hex values used directly (not var() references) because nested var()
     calls inside linear-gradient + -webkit-background-clip: text can
     render inconsistently across browsers. */
  --gold-gradient:
    linear-gradient(
      120deg,
      #8a6a3c 0%,
      #b8935a 18%,
      #d4b27a 32%,
      #f4ecd8 48%,
      #d4b27a 64%,
      #b8935a 82%,
      #8a6a3c 100%
    );

  /* Sharper variant — same colour stops but the bright peak is compressed
     into a ~8% band (was ~32%) so the sheen reads as a tighter reflection
     when it sweeps across. Used by the section titles only; the nav, mobile
     menu, music menu, and hero keep the wider --gold-gradient. */
  --gold-gradient-sharp:
    linear-gradient(
      120deg,
      #8a6a3c 0%,
      #a47e48 22%,
      #b8935a 38%,
      #d4b27a 46%,
      #f4ecd8 50%,
      #d4b27a 54%,
      #b8935a 62%,
      #a47e48 78%,
      #8a6a3c 100%
    );

  /* The signature glow stack — drop-shadows used on gold elements */
  --gold-glow-strong:
    drop-shadow(0 0 1px rgba(244, 236, 216, 0.3))
    drop-shadow(0 2px 20px rgba(184, 147, 90, 0.25))
    drop-shadow(0 8px 60px rgba(184, 147, 90, 0.15));
  --gold-glow-medium:
    drop-shadow(0 0 1px rgba(244, 236, 216, 0.3))
    drop-shadow(0 2px 16px rgba(184, 147, 90, 0.3))
    drop-shadow(0 6px 36px rgba(184, 147, 90, 0.18));
  --gold-glow-soft:
    drop-shadow(0 0 1px rgba(244, 236, 216, 0.3))
    drop-shadow(0 2px 16px rgba(184, 147, 90, 0.2))
    drop-shadow(0 6px 40px rgba(184, 147, 90, 0.12));

  /* ============ MOTION TOKENS ============ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   BRAND LOGO — per Società Fortezza Brand Identity Specification.
   Stacked Pinyon Script "Società" over Cinzel "FORTEZZA", filled
   with the brand 5-stop gold gradient. Size variants on the same
   .societa / .fortezza children — never use transform: scale().
   ============================================================ */
.gold-text {
  background: linear-gradient(180deg,
    #f6e7b2 0%,
    #e2c787 25%,
    #d4af6e 50%,
    #b89058 75%,
    #8a6a3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.logo-area {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
}

/* Default = hero scale — matches spec section 9 minimum viable exactly so
   the render stays light (no compression from negative letter-spacing or
   parent padding). Explicit weight/style block any browser synthesis attempt
   that could thicken the strokes. */
.logo-area .societa {
  display: block;
  font-family: 'Pinyon Script', cursive;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  font-size: 220px;
  /* Pinyon's ascenders + grave accent on à extend well above the cap height.
     line-height: 1 (per spec) is too tight in real layouts — using 1.25 here
     extends the line-box so the à's accent and the S's swash render fully
     without being clipped by any ancestor with overflow: hidden. */
  line-height: 1.25;
  padding: 0.18em 0.12em 0.06em;
  margin: -0.18em -0.12em -0.06em;
  overflow: visible;
}
.logo-area .fortezza {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.55em;
  /* Negative pull-up — compensates for the empty descender space added by
     .societa's line-height: 1.25 (needed for the à accent at hero size).
     Reads as one lockup instead of two stacked lines. */
  margin-top: -32px;
  margin-left: 100px;
  padding-left: 0.55em;
}

/* Mid — site header / cards / mobile-menu lockup.
   Smaller, more elegant Società while keeping FORTEZZA near its readability
   floor (~16px Cinzel). Tight line-height + negative margin-top so the two
   lines read as one lockup. */
.logo-mid .societa {
  font-size: 76px;
  line-height: 1.1;
}
.logo-mid .fortezza {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.48em;
  margin-top: -4px;
  margin-left: 32px;
  padding-left: 0.48em;
}

/* Small — primary nav placement.
   Tighter line-height than the hero default (accent-clip risk is minimal at
   this size) so FORTEZZA tucks closely under Società instead of floating. */
.logo-small .societa {
  font-size: 54px;
  line-height: 1.05;
}
.logo-small .fortezza {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.38em;
  margin-top: -2px;
  margin-left: 22px;
  padding-left: 0.38em;
}

/* Tiny — footers, meta */
.logo-tiny .societa { font-size: 32px; }
.logo-tiny .fortezza {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  margin-top: 4px;
  margin-left: 12px;
  padding-left: 0.28em;
}

/* Hero medium breakpoint — typical desktop laptops (1440px etc.) where the
   half-column isn't wide enough for 220px Pinyon. Cinzel gains weight + loses
   tracking per spec section 5. */
@media (max-width: 1500px) and (min-width: 781px) {
  .hero-mark.logo-area .societa { font-size: 160px; }
  .hero-mark.logo-area .fortezza {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.45em;
    margin-top: -22px;     /* scaled pull-up for 160px Società */
    margin-left: 72px;
    padding-left: 0.45em;
  }
}

/* Hero mobile breakpoint — Cinzel gains weight + loses tracking at small size */
@media (max-width: 780px) {
  .hero-mark.logo-area .societa { font-size: clamp(84px, 27vw, 104px); }
  .hero-mark.logo-area .fortezza {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.4em;
    margin-top: -14px;     /* scaled pull-up for 104px Società */
    margin-left: 40px;
    padding-left: 0.4em;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Suppress the default blue/grey flash on tap (iOS Safari + Chrome Android). */
  -webkit-tap-highlight-color: transparent;
}

html {
  /* Smooth animated scroll for in-page anchor links (#editions, #process, …)
     and for scrollIntoView() calls without an explicit behaviour. */
  scroll-behavior: smooth;
  /* Stops the anchor target from tucking under the fixed top nav. */
  scroll-padding-top: 80px;
}

/* Each linked section has 160-220px of internal top padding for visual
   breathing. Without compensation, clicking a nav link lands the section's
   outer top edge just below the nav and the *content* lands 200px lower —
   that's the black gap the user sees. The negative scroll-margin-top below
   pulls the anchor landing point 100px inside the section, so the section
   header appears closer to the top of the viewport after a click. Natural
   scrolling through the page is unaffected; this only changes where anchor
   links snap. */
.editions,
.process,
.philosophy,
.studio,
.invitation {
  scroll-margin-top: -100px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body {
  background: var(--obsidian);
  color: var(--ivory);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Firefox — thin scrollbar, dim gold thumb at rest on the dark track. */
  scrollbar-width: thin;
  scrollbar-color: rgba(138, 106, 60, 0.5) transparent;
}
/* Firefox — brighter gold while actively scrolling. */
body.is-scrolling {
  scrollbar-color: var(--gold-light) transparent;
}

/* ============ MAIN SCROLLBAR (desktop WebKit — Chrome/Edge/Safari) ============
   At rest the thumb is near-black so it almost disappears into the track. While
   the page is actively scrolling, JS adds body.is-scrolling and the thumb turns
   gold; after a short idle the class is removed and it fades back to black.
   Mobile uses auto-hiding overlay scrollbars and is unaffected. */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  /* Slim, refined gold pill. Dim/muted at rest so it's present but quiet, then
     warms to full gold while scrolling or on hover. */
  background: rgba(138, 106, 60, 0.45);   /* dim gold-deep at rest */
  border-radius: 4px;
  transition: background-color 450ms var(--ease);
}
body.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--gold-light);          /* bright gold while scrolling */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}
::-webkit-scrollbar-corner {
  background: var(--obsidian);
}

/* ============ ATMOSPHERE LAYERS ============ */
/* Film grain across everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Subtle vignette across edges */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
}

/* ============ TYPE UTILITIES ============ */
.sans {
  font-family: 'Inter Tight', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 400;
}
.wordmark {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-weight: 400;
}

/* ============ FRAME ============ */
.frame {
  position: fixed;
  inset: 28px;
  /* Top + sides only. The bottom edge floated a gold line 28px above the
     viewport bottom that tracked the scroll across all content — drop it. */
  border: 1px solid rgba(184, 147, 90, 0.18);
  border-bottom: none;
  pointer-events: none;
  z-index: 50;
}

/* Edge typography — bottom corners only.
   Top corners are reserved for the nav so they never collide. */
.edge-bl, .edge-br {
  position: fixed;
  z-index: 60;
  color: var(--ivory-muted);
  font-size: 8px;
  letter-spacing: 0.3em;
  font-family: 'Inter Tight', sans-serif;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 700ms var(--ease) 200ms forwards;
  /* Both bottom corners set vertically for symmetry */
  writing-mode: vertical-rl;
}
.edge-bl {
  /* Vertical "WEBSITE BY FORTEZZA GROUP" credit on the left edge (desktop),
     mirroring .edge-br on the right. On mobile this is hidden and the footer’s
     .footer-credit shows the same text instead, so it never appears twice. */
  top: 50%;
  left: 48px;
  /* Centre vertically on the left edge (mirrors the back-to-top on the right),
     then rotate so the text reads bottom-to-top. */
  transform: translateY(-50%) rotate(180deg);
  /* Same gold as the back-to-top / vinyl, not the dimmer ivory-muted. */
  color: var(--gold-light);
}
.edge-br {
  bottom: 56px;
  right: 48px;
}

@keyframes fadeIn { to { opacity: 1; } }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  padding: 22px 80px;
  /* Three-column grid:
       col 1 (1fr)   — flex spacer on the left so the cluster floats to centre
       col 2 (auto)  — the logo + links cluster, sized to its content
       col 3 (1fr)   — holds the right group (social + external) right-aligned
     The 1fr spacers are equal, so the cluster is horizontally centred; the
     right group sits at the extreme right edge of the bar. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 48px;
  align-items: center;
  background: transparent;
  /* Initial fade-in. The dark backdrop bar lives on ::before so we can mask
     its bottom edge — see below. */
  transition: opacity 600ms var(--ease);
  opacity: 0;
  animation: fadeIn 600ms var(--ease) 400ms forwards;
}

/* Logo + nav-links cluster — sits in grid column 2 (centre) with both
   children flowing horizontally and a comfortable gap. */
.nav-cluster {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 56px;
}

/* Right group — social icons followed by the external Fortezza Group link.
   Pinned to the extreme right of the bar via justify-self: end on grid col 3. */
.nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Hamburger trigger occupies the right column on mobile (where the right
   group is hidden). Stays display: none on desktop. */
.nav-toggle { grid-column: 3; justify-self: end; }

/* Backdrop bar — always-on dark + blur layer. Sits behind the nav's children
   (z-index: -1) and fades to transparent at the bottom via a multi-stop mask
   gradient (S-curve feel, no hard line). The nav text/wordmark stays fully
   sharp because it lives above the pseudo, not on it. The pseudo also extends
   slightly below the nav's box so the fade has more room to taper. */
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -28px; /* extend the fade past the nav's padding box */
  z-index: -1;
  pointer-events: none;
  background: rgba(7, 7, 10, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 55%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0) 100%);
}
/* Nav wordmark — legacy inline-flex left here in case .nav-mark is used by
   anything else; the brand lockup now uses .nav-mark.logo-area which overrides
   below to the stacked Pinyon + Cinzel composition. */
.nav-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  line-height: 1;
}
.nav-mark.logo-area {
  display: inline-block;       /* stacked, not inline-flex */
  align-items: initial;
  gap: 0;
}
/* In the header we show only "Società" (no FORTEZZA) at a small scale —
   keeps the nav airy, lockup-proper remains on the hero / mobile menu. */
.nav-mark.logo-area .fortezza {
  display: none;
}
.nav-mark.logo-area .societa {
  font-size: 36px;
  line-height: 1;
}
.nav-mark-primary {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: 32px;
  line-height: 1;
  color: var(--ivory);
  letter-spacing: 0.005em;
  padding: 0.02em 0.04em 0.08em 0;
  /* Subtle warm halo so the ivory shares temperature with the gold Fortezza */
  text-shadow:
    0 0 1px rgba(244, 236, 216, 0.4),
    0 1px 8px rgba(184, 147, 90, 0.18);
}
.nav-mark-divider {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold) 15%,
    var(--gold-light) 50%,
    var(--gold) 85%,
    transparent 100%
  );
  /* Lift the rule to sit at script x-height level */
  transform: translateY(-9px);
  margin: 0 6px;
  /* Soft gold glow on the rule itself — matches the hero divider */
  box-shadow: 0 0 8px rgba(184, 147, 90, 0.45);
  /* Hide any original character content */
  font-size: 0;
  color: transparent;
}
.nav-mark-secondary {
  /* Same script family as Fortezza — premium parity */
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 0.04em 0.08em 0.12em 0;
  /* Lift slightly so the baseline aligns with Fortezza visually */
  transform: translateY(-1px);
  /* THE GOLD LEAF TREATMENT — same gradient family as the hero */
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Two-layer glow — tighter than hero (smaller scale) */
  filter:
    drop-shadow(0 0 1px rgba(244, 236, 216, 0.4))
    drop-shadow(0 1px 10px rgba(184, 147, 90, 0.4));
  /* The slow shimmer — same 8s cycle as the rest */
  animation: goldSheen 8s ease-in-out infinite;
}
.nav-links {
  /* Inline desktop links. Hidden below 1024px (see media query) where the
     hamburger trigger + mobile-menu overlay take over. */
  display: flex;
  align-items: center;
  gap: 48px;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--ivory-muted);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 400ms;
  position: relative;
  padding-bottom: 8px;
}
.nav-links a::before {
  content: '·';
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  opacity: 0;
  transition: opacity 400ms;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-light) 18%,
    var(--gold) 58%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(212, 178, 122, 0.3);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a:hover::before { opacity: 0; }
.nav-links a:hover::after {
  opacity: 1;
  animation: navUnderlineDrip 1.8s var(--ease) infinite;
}
.nav-links a.is-active {
  color: var(--gold-light);
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(184, 147, 90, 0.35);
}
/* Active section uses the same gold-gradient underline as hover, but locked
   to its full width (no drip animation — that motion is reserved for hover). */
.nav-links a.is-active::before { opacity: 0; }
.nav-links a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
  animation: none;
}

@keyframes navUnderlineDrip {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.nav-right {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.nav-social {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.nav-social-link {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  letter-spacing: 0;
  text-shadow: none;
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.nav-social-link::before {
  display: none;
}
.nav-social-link:hover,
.nav-social-link:focus-visible {
  color: var(--gold-light);
  transform: translateY(-1px);
  outline: none;
}
.nav-social-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-social-link[data-social-link="linkedin"] svg {
  width: 21px;
  height: 21px;
  transform: translateY(-1.5px);
}

/* Contact uses the .nav-cta class purely as a layout hook for the mobile-hide
   rule (it lives in the hamburger menu on phones). All visual styling — colour,
   hover, underline, is-active — is inherited from .nav-links a above so it
   matches the other links exactly. */

/* Right-side external link — "Fortezza Group ↗". Quiet wayfinding cue back to
   the parent brand site. Now hidden in the inline nav (lives in the overlay
   menu instead) but the typographic styling stays here in case it returns. */
.nav-external {
  display: inline-flex;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--ivory-muted);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 8px;
  transition: color 400ms var(--ease);
}
.nav-external::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold-light) 18%,
    var(--gold) 58%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(212, 178, 122, 0.3);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.nav-external-arrow {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 400ms var(--ease), color 400ms var(--ease);
}
.nav-external:hover { color: var(--gold-light); }
.nav-external:hover::after {
  opacity: 1;
  animation: navUnderlineDrip 1.8s var(--ease) infinite;
}
.nav-external:hover .nav-external-arrow {
  color: var(--gold-light);
  transform: translate(2px, -3px);
}

/* ============ MOBILE MENU TRIGGER ============ */
/* Hidden on desktop, visible on mobile. Two thin gold lines stacked —
   restrained editorial hamburger. Second line slightly shorter for asymmetric refinement.
   When the menu opens, this trigger fades out; the menu has its own dedicated close (X). */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 44px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 220;
  position: relative;
  transition: opacity 300ms var(--ease);
}

.nav-toggle-line {
  display: block;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold) 18%,
    var(--gold-light) 50%,
    var(--gold) 82%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(184, 147, 90, 0.35);
  transition: width 300ms var(--ease), box-shadow 300ms var(--ease);
}

.nav-toggle-line-1 {
  width: 32px;
}
.nav-toggle-line-2 {
  width: 22px;  /* shorter for editorial asymmetry */
}

.nav-toggle:hover .nav-toggle-line-1 {
  width: 38px;
  box-shadow: 0 0 12px rgba(184, 147, 90, 0.55);
}
.nav-toggle:hover .nav-toggle-line-2 {
  width: 28px;
  box-shadow: 0 0 12px rgba(184, 147, 90, 0.55);
}

/* When menu is open, hide the trigger entirely (menu has its own X) */
.nav-toggle.open {
  opacity: 0;
  pointer-events: none;
}

/* ============ MOBILE MENU OVERLAY ============ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(7, 7, 10, 0.96);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  /* Backdrop fade slowed from 400→650ms and given a tail on the blur transition
     so the page below dims softly rather than blinking off. */
  transition: opacity 650ms var(--ease), visibility 650ms,
              backdrop-filter 650ms var(--ease), -webkit-backdrop-filter 650ms var(--ease);
  display: flex;
  /* flex-start (not center): in a scrollable flex container, centering a child
     taller than the viewport crops its top with no way to scroll up. The inner
     self-centres via its own min-height + justify-content, so on tall content it
     simply grows downward and scrolls instead of clipping the logo off-screen. */
  align-items: flex-start;
  justify-content: center;
  padding: 80px 32px 60px;
  overflow-y: auto;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

/* The inner stack lifts up and scales in subtly while the backdrop fades.
   The per-element staggers (logo, links, player) layer on top — each item
   then translates the last 16-20px on its own with its own delay, creating
   a cascading reveal rather than a single flat fade. */
.mobile-menu-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 56px;
  transform: translateY(28px) scale(0.985);
  transition: transform 800ms var(--ease);
}
.mobile-menu.open .mobile-menu-inner {
  transform: translateY(0) scale(1);
}

/* Close button — bare X, no circle. Rotates 90° on hover for the close motion. */
.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--gold-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms var(--ease), transform 400ms var(--ease), opacity 400ms var(--ease);
  z-index: 5;
  opacity: 0;
  transform: rotate(-45deg);
}
.mobile-menu.open .mobile-menu-close {
  opacity: 1;
  transform: rotate(0);
  transition: opacity 400ms var(--ease) 150ms, transform 500ms var(--ease) 150ms, color 300ms var(--ease);
}
.mobile-menu-close:hover,
.mobile-menu-close:active {
  color: var(--ivory);
  transform: rotate(90deg);
}

/* Logo lockup at the top of the mobile menu — appears first in the stagger. */
.mobile-menu-logo {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease) 100ms, transform 500ms var(--ease) 100ms;
}
.mobile-menu.open .mobile-menu-logo {
  opacity: 1;
  transform: translateY(0);
}

/* The main link stack — same typography as the desktop navigation */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: 100%;
}
.mobile-menu-links a {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1;
  color: var(--ivory-muted);
  text-decoration: none;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease),
    color 300ms var(--ease);
}
.mobile-menu.open .mobile-menu-links a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: 280ms; }
.mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: 360ms; }
.mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: 440ms; }
.mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: 520ms; }
.mobile-menu.open .mobile-menu-links a:nth-child(5) { transition-delay: 600ms; }

.mobile-menu-links a:hover,
.mobile-menu-links a:active,
.mobile-menu-links a.is-active {
  color: var(--gold-light);
}
.mobile-menu-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: all 400ms var(--ease);
  transform: translateX(-50%);
}
.mobile-menu-links a:hover::after,
.mobile-menu-links a:active::after,
.mobile-menu-links a.is-active::after {
  width: 48px;
}

.mobile-menu-footer {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 600ms var(--ease) 700ms;
}
.mobile-menu.open .mobile-menu-footer {
  opacity: 1;
}

/* ============ HAMBURGER MENU EVERYWHERE ============
   The full-screen overlay menu (with darker + blurred backdrop) is now the
   single way to access nav links on all viewports. The inline nav-links and
   nav-external are hidden universally; the hamburger triggers the overlay.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-cta {
    /* Hide the desktop "Apply" button on mobile — it's in the menu now */
    display: none;
  }
  .nav-toggle {
    /* Reveal the hamburger trigger below the desktop breakpoint */
    display: flex;
  }
}

/* (Stale ≤640px overrides removed — the responsive gap/padding clamps in the
   base rules now handle spacing consistently across phone sizes.) */

/* Premium mobile menu refinement */
.mobile-menu {
  background:
    linear-gradient(180deg, rgba(184, 147, 90, 0.08) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 0%, rgba(244, 236, 216, 0.055), transparent 54%),
    rgba(7, 7, 10, 0.97);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  /* Column scroll container, content horizontally centred. Vertical centring is
     done by auto margins on the inner (below), NOT justify-content: center —
     centering an overflowing flex child crops its top with no way to scroll up,
     which was cutting the logo off. Auto margins centre when there's room and
     collapse cleanly when content is taller, leaving the top reachable. */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 36px 28px 34px;
  /* Normally the content fits and there's no scroll. On extremely short screens
     it can scroll as a fallback — but the auto-margin centring below means it
     only scrolls when it genuinely overflows, never cropping the top. */
  overflow-y: auto;
}
.mobile-menu-inner {
  width: 100%;
  max-width: 420px;
  /* Auto vertical margins centre the stack when there's spare height, and
     collapse to align it to the top (scrollable, never cropped) when content is
     taller than the screen. This is why we DON'T use justify-content: center on
     the parent — that variant crops the top of an overflowing child. */
  margin: auto 0;
  align-items: stretch;
  text-align: center;
  /* Tighter gaps so the whole stack fits within the viewport (no scroll) on
     normal phones — the previous 5vh added up past the screen height. */
  gap: clamp(18px, 3vh, 40px);
  /* Clear the fixed footer line. */
  padding-bottom: 48px;
}
.mobile-menu-close {
  width: 44px;
  height: 44px;
}
.mobile-menu-close:hover,
.mobile-menu-close:active {
  transform: rotate(90deg);
}
.mobile-menu.open .mobile-menu-close:hover,
.mobile-menu.open .mobile-menu-close:active {
  transform: rotate(90deg);
}
.mobile-menu-logo {
  align-self: center;
  margin-bottom: 16px;
}
.mobile-menu-logo.logo-mid .societa {
  font-size: clamp(42px, 13vw, 58px);
  line-height: 1.05;
  /* Same animated sheen as the hero wordmark — a bright highlight slides
     across the gold gradient on a slow loop. */
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 244, 200, 0.55) 44%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 244, 200, 0.55) 56%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #f6e7b2 0%,
      #e2c787 25%,
      #d4af6e 50%,
      #b89058 75%,
      #8a6a3a 100%
    );
  background-size: 250% 100%, 100% 100%;
  background-position: 0% center, center center;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: societaGlare 5s ease-in-out infinite;
}
.mobile-menu-logo.logo-mid .fortezza {
  font-size: 13px;
  letter-spacing: 0.38em;
  margin-top: -2px;
  margin-left: 22px;
  padding-left: 0.38em;
}
.mobile-menu-links {
  gap: 0;
  align-items: stretch;
  /* Top hairline — concentrated gold point fading sharply to dark on both
     sides, reads as a thin filament of light rather than a flat rule. */
  border-top: none;
  background-image: linear-gradient(
    90deg,
    transparent 38%,
    rgba(232, 201, 135, 0.75) 50%,
    transparent 62%
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 1px;
}
.mobile-menu-links a {
  /* Tenor Sans — elegant wide-tracked uppercase, matches the brand spec for
     UI labels. */
  font-family: 'Tenor Sans', sans-serif;
  font-size: clamp(14px, 3.4vw, 16px);
  font-weight: 400;
  opacity: 0.88;
  letter-spacing: 0.28em;
  /* Viewport-relative vertical padding so the link rhythm scales with screen
     height. Kept modest so the 5 links + logo + social all fit on one screen
     without scrolling on normal phones. */
  padding: clamp(16px, 2.6vh, 30px) 0;
  /* Bottom hairline — concentrated gold point fading sharply to dark on
     both sides; reads as a thin filament of light. */
  border-bottom: none;
  background-image: linear-gradient(
    90deg,
    transparent 38%,
    rgba(232, 201, 135, 0.75) 50%,
    transparent 62%
  );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 1px;
}
.mobile-menu-links a::after {
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
}
.mobile-menu-links a:hover::after,
.mobile-menu-links a:active::after,
.mobile-menu-links a.is-active::after {
  width: 72px;
}
.mobile-menu-player {
  /* Pinned to the viewport bottom (just above the fixed footer) so the player
     sits at the very bottom of the menu and the in-flow content above gets
     room to breathe. */
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: calc(100% - 56px);
  max-width: 420px;
  z-index: 220;
  margin-top: 0;
  padding: 22px 0 0;
  color: var(--ivory-muted);
  /* Fade with the menu open/close — only visible when .mobile-menu.open */
  opacity: 0;
  transition: opacity 500ms var(--ease) 200ms;
  pointer-events: none;
}
.mobile-menu.open .mobile-menu-player {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-player::before {
  /* Decorative hairline above the player removed — keeps the menu cleaner. */
  display: none;
}
.mobile-menu-player-kicker {
  font-family: 'Inter Tight', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(212, 178, 122, 0.76);
  margin-bottom: 14px;
}
.mobile-menu-player-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(34px, 9vw, 48px);
  line-height: 1.1;
  font-weight: 300;
  margin-bottom: 6px;
  padding: 0.04em 0.12em 0.08em;
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: var(--gold-glow-soft);
}
.mobile-menu-player-artist {
  font-family: 'Inter Tight', sans-serif;
  font-size: 7.65px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 178, 122, 0.76);
  min-height: 1em;
}
.mobile-menu-player-progress {
  position: relative;
  height: 3px;
  background: rgba(244, 236, 216, 0.22);
  margin: 24px auto 18px;
  max-width: 240px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Invisible hit-area extender — 14 px above and below the visible 3 px track,
   giving a 31 px tall pointer target while keeping the bar a hairline. */
.mobile-menu-player-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  bottom: -14px;
}
.mobile-menu-player-progress-fill {
  width: 0%;
  height: 100%;
  background: var(--gold-gradient);
  background-size: 220% 100%;
  box-shadow: 0 0 8px rgba(184, 147, 90, 0.45);
  transition: width 100ms linear;
  pointer-events: none;
}
.mobile-menu-player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.mobile-menu-player-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ivory-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 300ms var(--ease), transform 200ms var(--ease);
}
.mobile-menu-player-btn:hover,
.mobile-menu-player-btn:active {
  color: var(--gold-light);
}
.mobile-menu-player-btn:active {
  transform: scale(0.96);
}
.mobile-menu-player-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-menu-player-play {
  color: var(--gold-light);
}
.mobile-menu-player-play svg {
  width: 23px;
  height: 23px;
}
.mobile-menu-player-play .play-icon {
  margin-left: 2px;
  fill: currentColor;
  stroke: none;
}
.mobile-menu-player-play .pause-icon {
  display: none;
  fill: currentColor;
  stroke: none;
}
.mobile-menu-player.playing .play-icon {
  display: none;
}
.mobile-menu-player.playing .pause-icon {
  display: block;
}
.mobile-menu-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
  padding-top: 0;
  opacity: 1;
  width: 100%;
}

/* External link inside the mobile menu — mirrors the desktop .nav-external
   wordmark+arrow. The link box is sized to the text only (width: max-content)
   and centered with auto margins, so its position is the alignment anchor.
   The arrow lives outside that box (position: absolute, left: 100%) so it's
   visible without participating in the centering. */
.mobile-menu-external {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 28px auto 0;
  position: relative;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(212, 178, 122, 0.7);
  text-decoration: none;
  transition: color 300ms var(--ease);
}
.mobile-menu-external:hover,
.mobile-menu-external:active {
  color: var(--gold-light);
}
.mobile-menu-external-text {
  display: inline-block;
}
.mobile-menu-external-arrow {
  position: absolute;
  left: 100%;
  margin-left: 8px;
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  color: var(--gold);
  font-size: 12px;
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu-external:hover .mobile-menu-external-arrow {
  color: var(--gold-light);
  transform: translate(2px, calc(-50% - 3px));
}
.mobile-menu-social a {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  border: none;
  border-radius: 0;
  text-decoration: none;
  transition: color 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu-social a:hover,
.mobile-menu-social a:active {
  color: var(--gold-light);
  background: transparent;
  transform: translateY(-2px);
}
.mobile-menu-social svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobile-menu-social [data-social-link="linkedin"] svg,
.mobile-menu-social [data-social-link="instagram"] svg {
  width: 30px;
  height: 30px;
}
.mobile-menu-social [data-social-link="linkedin"] svg {
  width: 33px;
  height: 33px;
  transform: translateY(-1.5px);
}
.mobile-menu-footer {
  position: fixed;
  left: 50%;
  bottom: 14px;
  width: calc(100% - 48px);
  text-align: center;
  color: var(--gold-light);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.34em;
  margin-top: 0;
  padding-top: 0;
  transform: translateX(-50%);
  transition-delay: 620ms;
  text-shadow: 0 1px 12px rgba(184, 147, 90, 0.22);
}

@media (max-width: 640px) {
  .mobile-menu {
    padding: 28px 24px 30px;
  }
  .mobile-menu-inner {
    /* flex:1 + justify-content:center from the base rule centres the stack. */
    padding-bottom: 56px;
  }
  .mobile-menu-links a {
    font-size: clamp(13px, 3.6vw, 15px);
    /* padding stays the viewport-relative clamp from the base rule */
  }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* Horizontal padding scales with viewport — gives wide monitors real
     editorial breathing room without crushing smaller laptops. */
  padding: 80px clamp(80px, 8vw, 200px);
  gap: clamp(60px, 6vw, 120px);
  /* Cap the layout width on ultra-wide displays so the two columns stay
     readable instead of sprawling across 30+ inches. */
  max-width: 1800px;
  margin: 0 auto;
  overflow: visible;
}

/* LEFT: editorial type column */
.hero-left {
  position: relative;
  z-index: 10;
  padding-left: 40px;
}
/* Hero eyebrow strip — per brand spec section 7.
   Dash + Tenor Sans uppercase label + smaller trailing dash. */
.hero-prelude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeIn 600ms var(--ease) 100ms forwards;
}
.hero-prelude .line,
.hero-prelude .line-after {
  width: 60px;
  height: 0.5px;
  background: var(--gold);
  margin: 0;
}
.hero-prelude .label {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* The wordmark — Società + Fortezza lockup. Layout-only container; the
   .societa / .fortezza children carry all type styling per brand spec.
   Old padding/inheritance was clipping Pinyon's tall ascenders and accent. */
.hero-mark {
  position: relative;
  margin-bottom: 56px;
  overflow: visible;
  opacity: 0;
  animation: markRise 800ms var(--ease) 200ms forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes markRise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero "Società" — two-layer polished-gold treatment.
   Layer 1 (top) is a diagonal sheen band — transparent → near-white → transparent.
     Most of the layer is transparent so the base shows through; the bright band
     sits at ~50% of the layer's image and is parked off-screen at rest.
     The position animation sweeps it across the glyphs.
   Layer 2 (bottom) is the static warm-gold base — vertical falloff from light
     gold at the top through saturated mid-gold to a deep amber at the bottom.
     This is the tone the word reads as when no sheen is passing.
   Both layers are clipped to the text. The strong sheen-vs-base contrast makes
   the animation read clearly without the base ever turning dark or muddy.
   Scoped to .hero-mark so the smaller nav / mobile-menu lockups stay quiet. */
.hero-mark.logo-area .societa {
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 244, 200, 0.55) 44%,
      rgba(255, 255, 255, 0.92) 50%,
      rgba(255, 244, 200, 0.55) 56%,
      transparent 62%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #f6e7b2 0%,
      #e2c787 25%,
      #d4af6e 50%,
      #b89058 75%,
      #8a6a3a 100%
    );
  background-size: 250% 100%, 100% 100%;
  background-position: 0% center, center center;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: societaGlare 5s ease-in-out infinite;
}

/* Centre the Fortezza line under Società. The base .logo-area .fortezza rule
   (and its responsive variants) push Fortezza right with margin-left for the
   asymmetric nested lockup used in the nav and mobile-menu marks. The hero
   wordmark instead wants both lines geometrically centred. */
.hero-mark.logo-area .fortezza {
  margin-left: 0;
  /* The PNG wordmark has its own padded canvas — the Pinyon-tuned margin-top
     of -32/-22/-14 px (from base + responsive rules) over-pulled Fortezza into
     the PNG. Positive gap to let Società breathe above Fortezza. */
  margin-top: 18px;
  /* Two background layers, both clipped to text:
       1) Diagonal sheen band — bright cream peak that sweeps across.
       2) Static vertical base gradient — light yellow at the top fading to
          deep amber at the bottom, the same colour stops as .gold-text.
     Result: default vertical gold gradient on FORTEZZA at rest, with a slow
     lighting sweep matching Società above. background-image longhand so the
     `background-clip: text` inherited from .gold-text is preserved. */
  background-image:
    linear-gradient(
      105deg,
      transparent 22%,
      rgba(255, 235, 195, 0.5) 40%,
      rgba(255, 252, 230, 1) 50%,
      rgba(255, 235, 195, 0.5) 60%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      #f6e7b2 0%,
      #e2c787 25%,
      #d4af6e 50%,
      #b89058 75%,
      #8a6a3a 100%
    );
  background-size: 220% 100%, 100% 100%;
  background-position: 0% center, center center;
  background-repeat: no-repeat, no-repeat;
  animation: societaGlare 8s ease-in-out infinite;
}

/* Hero "Società" PNG wordmark.
   Replaces the Pinyon-script text render with the hand-tooled gold PNG so the
   logo's textures stay crisp. The animated sheen still rides over the letters:
   a pseudo-element with the moving highlight gradient is masked to the same
   PNG shape, so the bright streak only appears within the letterforms, and
   mix-blend-mode: screen brightens the underlying gold instead of overwriting
   the texture. */
/* Base wrap — applies everywhere the PNG logo is used. Size is set per-context. */
.societa-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.societa-img-wrap > .societa-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Animated sheen — masked to the PNG shape so the bright streak only appears
   within the letterforms. Warm cream + overlay blend so it brightens the gold
   rather than overwriting the textured baked-in shading. */
.societa-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Bright sweep matched to FORTEZZA's animation below. Alphas raised ~15%
     for more visible highlight as the band passes; timing slowed to 8s so
     both Società (PNG) and FORTEZZA (text) sweep together — the lighting
     reads as a single light source crossing the whole lockup. */
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 215, 160, 0.52) 38%,
    rgba(255, 235, 195, 0.98) 47%,
    rgba(255, 252, 230, 1) 50%,
    rgba(255, 235, 195, 0.98) 53%,
    rgba(255, 215, 160, 0.52) 62%,
    transparent 80%
  );
  background-size: 250% 100%;
  background-position: 0% center;
  background-repeat: no-repeat;
  -webkit-mask-image: url('images/logo/societa_log_lr.png');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('images/logo/societa_log_lr.png');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: societaImgSheen 8s ease-in-out infinite;
}
@keyframes societaImgSheen {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .societa-img-wrap::after {
    animation: none;
    background-position: 50% center;
  }
}

/* Hero-only: a more pronounced light sweep. Brighter peak + wider bright band,
   and a slow hold at mid-sweep so the highlight crossing the logo is easier to
   notice. Scoped to .hero-mark so nav / mobile-menu logos stay subtle. */
.hero-mark .societa-img-wrap::after {
  background: linear-gradient(
    105deg,
    transparent 14%,
    rgba(255, 215, 160, 0.7) 34%,
    rgba(255, 240, 205, 1) 46%,
    rgba(255, 255, 245, 1) 50%,
    rgba(255, 240, 205, 1) 54%,
    rgba(255, 215, 160, 0.7) 66%,
    transparent 86%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: societaImgSheenHero 7s ease-in-out infinite;
}
@keyframes societaImgSheenHero {
  0%       { background-position: 0% center; }
  45%, 55% { background-position: 100% center; }
  100%     { background-position: 0% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark .societa-img-wrap::after { animation: none; background-position: 50% center; }
}

/* Context size variants — width drives height via the PNG's aspect ratio. */
.hero-mark.logo-area .societa-img-wrap        { width: clamp(180px, 27vw, 450px); }

/* Nav size + a small upward nudge so the visible "Società" script sits
   on the same optical line as the nav links (the PNG has whitespace
   above the glyphs, which makes the image read as too low otherwise). */
.nav-mark.logo-area .societa-img-wrap         { width: 77px; transform: translateY(-4px); }
.mobile-menu-logo.logo-area .societa-img-wrap { width: 110px; }
/* The base .logo-mid .fortezza rule pulls Fortezza up by 2px to overlap the
   Pinyon descender — with the PNG that descender doesn't exist, so override
   to a positive gap that breathes between the wordmark and FORTEZZA. */
.mobile-menu-logo.logo-area .fortezza { margin-top: 6px; }
.music-title .societa-img-wrap                { width: clamp(130px, 12vw, 180px); display: block; margin: 0 0 6px; }

/* Desktop nav reads "too large" at the desktop scale because the inline-row
   layout already feels dense; the mobile header is the opposite — only the
   logo and hamburger show, so a slightly larger mark balances the bar. */
@media (max-width: 1024px) {
  /* 25% smaller than the previous 110px so the header logo isn't oversized. */
  .nav-mark.logo-area .societa-img-wrap { width: 82.5px; }
}

/* On phones the music menu flips to a centred single-column layout, so the
   PNG block needs auto horizontal margins to centre under the parent that
   has text-align: center. */
@media (max-width: 640px) {
  .music-title .societa-img-wrap { margin-left: auto; margin-right: auto; }
}

@keyframes societaGlare {
  /* Two values per keyframe: the sheen layer slides 0% ↔ 100%;
     the static base stays centred so the gold tone never moves. */
  0%, 100% { background-position: 0% center, center center; }
  50%      { background-position: 100% center, center center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark.logo-area .societa {
    animation: none;
    background-position: 50% center, center center;
  }
}

/* Primary — "Societa" in Anastasia, gold-leaf treatment, dominant.
   Sits as the visual anchor of the wordmark lockup. */
.hero-mark .word-primary {
  display: block;
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-weight: 400;
  /* Larger range — this is the brand mark, it carries the weight */
  font-size: clamp(88px, 13vw, 200px);
  line-height: 1;
  letter-spacing: 0.005em;
  /* Generous padding to prevent the filter from clipping descenders + the accent on à */
  padding-top: 0.1em;
  padding-right: 0.1em;
  padding-bottom: 0.05em;
  overflow: visible;
  position: relative;
  /* THE GOLD LEAF TREATMENT — same as section titles */
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Three-layer glow: tight halo + warm spread + deep ambient */
  filter:
    drop-shadow(0 0 1px rgba(244, 236, 216, 0.4))
    drop-shadow(0 2px 20px rgba(184, 147, 90, 0.4))
    drop-shadow(0 8px 60px rgba(184, 147, 90, 0.2));
  /* The slow shimmer */
  animation: goldSheen 8s ease-in-out infinite;
}

/* The typographic period on Societa — sits tight after the accented à.
   It's a small gold dot that punctuates the brand mark. */
.hero-mark .word-primary .period {
  /* Use Anastasia for visual consistency — but force it to be a regular dot character.
     Anastasia's period glyph renders cleanly. Fallback to serif if Anastasia lacks one. */
  font-family: 'Cormorant Garamond', 'Anastasia Script', serif;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  /* Sit just under the baseline, level with where a typographic period would */
  transform: translateY(-0.25em);
  margin-left: -0.05em;
  /* Solid gold — not a clipped gradient (which can disappear at small sizes) */
  -webkit-text-fill-color: var(--gold-light);
  color: var(--gold-light);
  background: none;
  font-size: 0.45em;
  text-shadow: 0 0 8px rgba(212, 178, 122, 0.6);
}

/* Secondary — "Fortezza" in Anastasia, ivory, smaller.
   Sits tucked under Societa to read as one tight logo lockup.
   Indented further right + pulled up to nest visually under the body of Societa. */
.hero-mark .word-secondary {
  display: block;
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  /* Smaller range — Fortezza is the descriptor, not the anchor */
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1;
  color: var(--ivory);
  letter-spacing: 0.005em;
  /* Indent further — Fortezza nests under the body of Societa rather than aligning with the S.
     Pull up substantially so the two read as overlapping/connected, not stacked. */
  margin-left: 1.4em;
  margin-top: -0.45em;
  /* Subtle warmth — a hint of gold glow on the ivory */
  text-shadow:
    0 0 1px rgba(244, 236, 216, 0.4),
    0 2px 24px rgba(184, 147, 90, 0.15),
    0 4px 40px rgba(0, 0, 0, 0.4);
  overflow: visible;
  padding-bottom: 0.05em;
  position: relative;
}

/* No rule between them — the visual nesting itself connects them as one lockup.
   The earlier gold rule fought the composition; without it, Societa and Fortezza
   read as one mark, like Cartier's or Dior's two-word lockups. */
.hero-mark .word-secondary::before {
  display: none;
}

@keyframes hairlineGrow {
  from { opacity: 0; width: 0; }
  to { opacity: 1; width: 0.9em; }
}

/* The crescent moon mark — small, indented to align with Fortezza */
.hero-mark .word-mark {
  display: block;
  margin-left: 0.6em;
  margin-top: -4px;
  width: 28px;
  height: 28px;
  /* Soft gold glow */
  filter: drop-shadow(0 0 8px rgba(184, 147, 90, 0.4));
  /* Gentle breath animation */
  animation: moonGlow 4s ease-in-out infinite;
}

.hero-mark .word-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes moonGlow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(184, 147, 90, 0.35));
    transform: rotate(-8deg);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(184, 147, 90, 0.55));
    transform: rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark .word-mark {
    animation: none;
    transform: rotate(-6deg);
  }
}

/* Hero quote block — per brand spec section 7. */
.hero-quote {
  margin-top: 24px;
  margin-inline: auto;
  max-width: 640px;
  opacity: 0;
  animation: fadeIn 600ms var(--ease) 500ms forwards;
}
.hero-quote .mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 54px;
  color: var(--gold);
  line-height: 0.5;
  display: block;
  margin-bottom: 8px;
}
/* Eyebrow strip relocated from above the wordmark into the quote — sits where
   the opening " mark used to. Tighter bottom margin so it reads as part of
   the quote intro, and animation removed so it fades with the parent quote. */
.hero-quote .hero-prelude {
  margin-bottom: 22px;
  animation: none;
  opacity: 1;
}
.hero-quote .text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ivory);
  font-weight: 300;
  margin-bottom: 20px;
  text-align: center;
}
.hero-quote .attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
}
.hero-quote .attribution .dash {
  width: 24px;
  height: 0.5px;
  background: var(--gold);
  flex-shrink: 0;
}

/* RIGHT: image as portal */
.hero-right {
  position: relative;
  height: calc(100vh - 160px);
  min-height: 600px;
}
.hero-image {
  position: absolute;
  inset: 0;
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) brightness(0.78) contrast(1.05);
  opacity: 0;
  animation: imageReveal 900ms var(--ease) 100ms forwards;
  /* Soft fade on all four edges. Using a mask (not a gradient overlay) means
     the edges go truly transparent — the body background shows through directly,
     so there's no colour-match seam even with the brightness filter applied. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 55%, transparent 100%);
}

/* Hero video — same treatment as hero-image, just renders <video> instead of div */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.85) brightness(0.78) contrast(1.05);
  opacity: 0;
  animation: imageReveal 900ms var(--ease) 100ms forwards;
  /* Prevent video controls or selection */
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 55%, transparent 100%);
}

@keyframes imageReveal {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
.hero-image::after,
.hero-video + .image-label::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Left-edge darken so type from the left column reads clearly. */
    linear-gradient(90deg, rgba(7,7,10,0.6) 0%, transparent 30%),
    /* Soft vignette around the focal subject. */
    radial-gradient(ellipse at 70% 50%, transparent 30%, rgba(7,7,10,0.5) 90%);
  pointer-events: none;
}

.image-label {
  position: absolute;
  bottom: 56px;
  right: 56px;
  z-index: 5;
  text-align: right;
  opacity: 0;
  animation: fadeIn 600ms var(--ease) 600ms forwards;
}
.image-label .roman {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  color: var(--gold-light);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.image-label .name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 6px;
}
.image-label .place {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  color: var(--ivory-muted);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ============ SCROLL CUE ============ */
.scroll-cue {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: fadeIn 600ms var(--ease) 700ms forwards;
}
.scroll-cue .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--ivory-muted);
  text-transform: uppercase;
}
.scroll-cue .line {
  width: 1px;
  height: 64px;
  /* Polished gold drip — bright at the top, fading into the dark below. */
  background: linear-gradient(180deg,
    var(--gold-light) 0%,
    var(--gold) 55%,
    transparent 100%);
  box-shadow: 0 0 8px rgba(212, 178, 122, 0.4);
  animation: drip 3.2s var(--ease) infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============ CHAPTER MARK ============ */
.chapter-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 700ms var(--ease) 600ms forwards;
}
.chapter-mark .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 320px;
  line-height: 1;
  color: rgba(184, 147, 90, 0.04);
  user-select: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  /* ============ MOBILE HERO — TYPE OVER ATMOSPHERE ============
     Image returns as a heavily darkened full-bleed background behind the
     type so the section isn't purely repetitive with the menu logo, but the
     wordmark + quote stay the visual lead. */
  .hero {
    grid-template-columns: 1fr;
    padding: 200px 32px 80px;
    gap: 0;
    position: relative;
  }
  .hero-left {
    padding-left: 0;
    position: relative;
    z-index: 5;
  }
  /* Mobile eyebrow — the label is too wide for a phone column when paired
     with full-length flanking lines. Allow wrap, shorten the lines, and
     give the label real line-height so any wrapped row breathes. */
  .hero-prelude {
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 12px;
    padding-inline: 12px;
  }
  .hero-prelude .line,
  .hero-prelude .line-after {
    width: 36px;
  }
  .hero-prelude .label {
    text-align: center;
    line-height: 1.7;
    font-size: 10px;
    letter-spacing: 0.3em;
    flex: 0 1 auto;
    max-width: 100%;
    /* Avoid an orphan word on the last line — nudges the natural wrap
       earlier so "Landmark Venues" stay together instead of "Venues"
       sitting alone. No hardcoded break point. */
    text-wrap: pretty;
  }
  .hero-right {
    display: block;
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    z-index: 1;
    pointer-events: none;
  }
  /* Heavier filter than desktop so the image reads as atmosphere, not subject. */
  .hero-image,
  .hero-video {
    /* Soft desaturation, dim brightness — visible as atmosphere, not subject. */
    filter: saturate(0.6) brightness(0.7) contrast(1);
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Vertical darken overlay — heavy at top/bottom to protect type legibility,
     lighter in the middle so the photograph still shows through. */
  .hero-image::after,
  .hero-video + .image-label::before {
    background:
      linear-gradient(180deg,
        rgba(7, 7, 10, 0.7) 0%,
        rgba(7, 7, 10, 0.25) 35%,
        rgba(7, 7, 10, 0.45) 70%,
        rgba(7, 7, 10, 0.88) 100%);
  }
  /* Edition caption belongs to the desktop foreground-image presentation. */
  .image-label { display: none; }
  .frame { inset: 16px; }
  .nav {
    padding: 24px 32px;
    /* Below the desktop breakpoint the cluster collapses to logo-only and
       the right group is hidden; revert to a flex layout so the logo sits on
       the left and the hamburger sits on the right. */
    display: flex;
    justify-content: space-between;
  }
  .nav-cluster { gap: 0; }
  .nav-links { display: none; }
  .nav-social { display: none; }
  .nav-right { display: none; }
  .edge-bl, .edge-br { display: none; }
  .chapter-mark .num { font-size: 200px; }
  /* Scroll cue stays hidden on touch — natural scrolling, no affordance needed. */
  .scroll-cue { display: none; }
}

@media (max-width: 640px) {
  /* Hide the inset gold border on phones — it reads as stray vertical/horizontal
     hairlines near the screen edges, not as editorial framing. */
  .frame { display: none; }
  .hero {
    padding: 120px 20px 60px;
    gap: 40px;
  }
  .hero-right { height: 50vh; }
  .nav { padding: 18px 20px; }
  .nav-cta {
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  /* Compact wordmark for tiny screens */
  .nav-mark-primary { font-size: 24px; }
  .nav-mark-secondary { font-size: 20px; }
  .nav-mark-divider {
    width: 18px;
    margin: 0 4px;
    transform: translateY(-7px);
  }
  .chapter-mark .num { font-size: 140px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-image, .hero-mark, .hero-quote, .hero-prelude,
  .image-label, .scroll-cue, .chapter-mark, .nav,
  .edge-bl, .edge-br {
    opacity: 1 !important;
    transform: none !important;
  }
  /* .edge-bl's transform is layout (centring + text rotation), not an entrance
     animation — restore it after the blanket reset above. */
  .edge-bl {
    transform: translateY(-50%) rotate(180deg) !important;
  }
}

/* ============================================================
   Societa Fortezza — Editions Section
   Appended to styles.css
   ============================================================ */

/* ============ EDITIONS WRAPPER ============ */
.editions {
  position: relative;
  padding: 200px 80px 240px;
  background: var(--obsidian);
  min-height: 100vh;
  overflow: hidden;
}

/* Chapter mark for this section — Roman numeral II */
.editions::before {
  content: 'II';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 320px;
  line-height: 1;
  color: rgba(184, 147, 90, 0.04);
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* ============ SECTION HEADER ============ */
.editions-header {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto 96px;
  text-align: center;
}

.editions-prelude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}
.editions-prelude .line {
  width: 48px;
  height: 1px;
  background: var(--gold);
}
.editions-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ============ GOLD SCRIPT TITLE ============
   Canonical Pinyon Script title — same scale as .philosophy-title and
   .invitation-title so every section reads in one consistent voice.
   Used for "Selected Concepts", "One Studio. One Hand.", etc. */
.editions-title,
.process-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.15;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.08em;
  padding-right: 0.15em;
  margin-bottom: 10px;
  letter-spacing: 0.025em;
  /* Compressed-highlight variant — tighter band so the sheen reads sharper */
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Three-layer glow: tight halo + warm spread + deep ambient */
  filter:
    var(--gold-glow-strong);
  /* Slow shimmering sheen moves across the gold */
  animation: goldSheen 8s ease-in-out infinite;
  /* Prevent the title from being a click target that breaks scrolling */
  pointer-events: none;
  user-select: text;
  display: inline-block;
}

@keyframes goldSheen {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
  .editions-title,
  .process-title,
  .engagement-title,
  .movement-title,
  .philosophy-title,
  .invitation-title,
  .studio-title,
  .studio-name,
  .hero-mark.logo-area .fortezza {
    animation: none;
    background-position: 30% center;
  }
}

.editions-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 25px);
  color: var(--ivory-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Mobile rule — same scale as .philosophy-title at small viewports, so
   "One Studio. One Hand." doesn't wrap one word per line on phones. */
@media (max-width: 1024px) {
  .editions-title,
  .process-title {
    font-size: clamp(44px, 8vw, 68px);
  }
}

/* ============ FILTER BAR ============ */
.editions-filters {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 0 auto 80px;
  padding: 24px 0;
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--graphite);
  max-width: 1100px;
  flex-wrap: wrap;
}

.filter-label {
  /* Canonical small-label style — see .hero-quote .attribution. */
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  color: var(--gold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.filter-button {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  color: var(--ivory-muted);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
  transition: color 400ms var(--ease);
}

/* Underline that grows from center on hover and stays on active */
.filter-button::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 400ms var(--ease), left 400ms var(--ease);
}
.filter-button:hover {
  color: var(--ivory);
}
.filter-button:hover::after,
.filter-button.active::after {
  width: 100%;
  left: 0;
}
.filter-button.active {
  color: var(--gold-light);
}

/* ============ GRID ============ */
.editions-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px 32px;
  max-width: 1480px;
  margin: 0 auto;
}

/* ============ PROJECT CARD ============ */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

/* Filter hide state */
.project-card.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  display: none;
}

/* ============ CAROUSEL ============ */
.carousel {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--basalt);
  margin-bottom: 28px;
  cursor: pointer;
  /* Let vertical page scroll pass through, but reserve horizontal gestures for
     the JS drag-to-slide handler so the track can follow the finger 1:1. */
  touch-action: pan-y;
}
/* When the script renders cards without data-href (case-page navigation
   disabled) the carousel isn't a link → revert the affordance. */
.carousel:not([data-href]) { cursor: default; }
/* While actively dragging, JS adds this class; the grab cursor signals it on
   desktop, and .carousel-track.dragging drops its transition for 1:1 tracking. */
.carousel.dragging { cursor: grabbing; }

.carousel-track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 800ms var(--ease);
  will-change: transform;
}
/* During a drag the track must follow the pointer with no easing; the snap on
   release re-enables the transition for a smooth settle. */
.carousel-track.dragging {
  transition: none;
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  /* Dark brand fallback so any not-yet-painted frame reads as basalt, never a
     bright gray flash, while the image decodes. */
  background-color: var(--basalt);
  background-size: cover;
  background-position: center;
  filter: saturate(0.88) brightness(0.92);
  transition: filter 400ms var(--ease);
  overflow: hidden;
}

/* Video inside a carousel slide — fills the slide identically to the
   background-image approach. Use a <video> element with class carousel-slide-video
   inside <div class="carousel-slide"> for video slides.

   Example:
   <div class="carousel-slide">
     <video class="carousel-slide-video" autoplay loop muted playsinline preload="metadata" poster="poster.jpg">
       <source src="clip.webm" type="video/webm">
       <source src="clip.mp4" type="video/mp4">
     </video>
   </div>
*/
.carousel-slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.carousel:hover .carousel-slide {
  filter: saturate(1) brightness(1);
}

/* Subtle vignette on each slide */
.carousel-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,7,10,0.7) 100%);
  pointer-events: none;
}

/* ============ CAROUSEL CONTROLS ============ */
/* Left/right arrows that appear on hover */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  background: rgba(7, 7, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 236, 216, 0.15);
  color: var(--ivory);
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms var(--ease), background 400ms, border-color 400ms;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 300;
  padding: 0;
  user-select: none;
}
.carousel-arrow:hover {
  background: rgba(184, 147, 90, 0.2);
  border-color: var(--gold);
  color: var(--gold-light);
}
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel:hover .carousel-arrow {
  opacity: 1;
}
.carousel-arrow:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* SVG arrow inside button */
.carousel-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}

/* ============ CAROUSEL DOTS / COUNTER ============ */
.carousel-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.carousel:hover .carousel-indicator {
  opacity: 1;
}

.carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(244, 236, 216, 0.35);
  transition: background 400ms, width 400ms;
  border: none;
  padding: 0;
  cursor: pointer;
}
.carousel-dot.active {
  background: var(--gold);
  width: 18px;
  border-radius: 3px;
}

/* Number counter (1/4) in top-right of card */
.carousel-counter {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 4;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ivory);
  text-transform: uppercase;
  background: rgba(7, 7, 10, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

/* When a card has only one image, hide carousel chrome — it's just a hero image */
.carousel.single-slide .carousel-arrow,
.carousel.single-slide .carousel-counter,
.carousel.single-slide .carousel-indicator {
  display: none;
}
.carousel:hover .carousel-counter {
  opacity: 1;
}

/* ============ CARD META ============ */
.project-meta {
  padding: 0 4px;
}

.project-edition {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  color: var(--gold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.project-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 1.8vw, 28px);
  color: var(--ivory);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: color 400ms var(--ease);
}
/* Span variant (DISABLE_CASE_NAVIGATION) — no href, so no link affordance. */
span.project-title { cursor: default; }
span.project-title::after { display: none; }
/* Subtle hairline underline grows on hover */
.project-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 500ms var(--ease);
}
.project-title:hover {
  color: var(--gold-light);
}
.project-title:hover::after {
  width: 100%;
}

.project-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ivory-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.project-category {
  /* Canonical small-label style — see .hero-quote .attribution. */
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  color: var(--gold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.project-category::before {
  content: '— ';
  color: var(--gold);
}

/* ============ EDITIONS FOOTER ============ */
.editions-footer {
  position: relative;
  z-index: 5;
  margin-top: 120px;
  text-align: center;
}

.editions-footer-text {
  /* Canonical small-label style — see .hero-quote .attribution. */
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============ RESPONSIVE ============ */
/* 4 columns by default. Step down to 3 at large tablets, 2 at small tablets, 1 at mobile. */
@media (max-width: 1280px) {
  .editions {
    padding: 160px 48px 200px;
  }
  .editions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 56px 28px;
  }
}

@media (max-width: 1024px) {
  .editions {
    padding: 120px 32px 140px;
  }
  .editions::before {
    font-size: 200px;
  }
  .editions-header {
    margin-bottom: 64px;
  }
  .editions-filters {
    gap: 20px 28px;
    padding: 20px 16px;
    margin-bottom: 56px;
  }
  .editions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
  /* On mobile, carousel arrows are always visible */
  .carousel-arrow {
    opacity: 0.85;
    width: 38px;
    height: 38px;
  }
  .carousel-indicator,
  .carousel-counter {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .editions {
    padding: 100px 20px 120px;
  }
  .editions-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .filter-label {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
  .editions-filters {
    gap: 18px;
  }
  .project-title {
    font-size: 28px;
  }
}

/* ============================================================
   Societa Fortezza — Process Section
   Vertical timeline with gold thread
   Appended to styles.css
   ============================================================ */

/* ============ PROCESS WRAPPER ============ */
.process {
  position: relative;
  padding: 200px 80px 240px;
  background: var(--basalt);
  overflow: hidden;
}

/* Chapter mark for this section — Roman numeral III */
.process::before {
  content: 'III';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 360px;
  line-height: 1;
  color: rgba(184, 147, 90, 0.035);
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

/* ============ HEADER ============ */
.process-header {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto 140px;
  text-align: center;
}

.process-prelude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}
.process-prelude .line {
  width: 48px;
  height: 1px;
  background: var(--gold);
}
.process-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.process-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 25px);
  color: var(--ivory-muted);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ============ TIMELINE ============ */
.process-timeline {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
}

/* The gold thread running down the center */
.process-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(184, 147, 90, 0.4) 6%,
    rgba(184, 147, 90, 0.4) 94%,
    transparent 100%
  );
  transform: translateX(-50%);
  z-index: 1;
}

/* ============ MOVEMENT ============ */
.movement-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
  margin-bottom: 160px;
  z-index: 2;
}
.movement-row:last-child {
  margin-bottom: 0;
}

/* Alternating left/right */
.movement-row.right .movement-text-col {
  order: 2;
  padding-left: 80px;
}
.movement-row.right .movement-image-col {
  order: 1;
  padding-right: 80px;
}
.movement-row.left .movement-text-col {
  order: 1;
  padding-right: 80px;
  text-align: right;
}
.movement-row.left .movement-image-col {
  order: 2;
  padding-left: 80px;
}

/* The numeral marker that sits on the gold thread */
.movement-marker {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--basalt);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--gold-light);
  letter-spacing: 0.02em;
}

/* The thin gold line connecting the marker to the text column */
.movement-row.right .movement-marker::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
}
.movement-row.left .movement-marker::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
}

/* ============ TEXT COLUMN ============ */
.movement-text-col {
  position: relative;
}

.movement-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.movement-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(56px, 6.4vw, 88px);
  font-weight: 300;
  /* Pinyon Script's descenders (g, p, y) curl well below the baseline; the old
     1.05 line-height + 0.08em bottom padding clipped them, especially on
     "Design" and "Opening". The drop-shadow filter also needs render room
     beyond the glyph silhouette. Bump line-height + bottom padding generously
     and counter the extra visual gap with a small negative margin so the
     title-to-italic spacing stays balanced. */
  line-height: 1.28;
  letter-spacing: 0;
  margin-bottom: -4px;
  padding: 0.04em 0.12em 0.2em;
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: var(--gold-glow-soft);
  overflow: visible;
  /* Matches the goldSheen used on editions/process/philosophy titles */
  animation: goldSheen 8s ease-in-out infinite;
}

.movement-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--gold-light);
  line-height: 1.5;
  margin-bottom: 32px;
  letter-spacing: 0.005em;
}

.movement-body {
  /* Sans-serif body for readability. Italic <em> inside falls back to the
     global em rule (Cormorant italic gold-light). */
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  font-size: 16.5px;
  color: rgba(244, 236, 216, 0.84);
  line-height: 1.55;
  letter-spacing: 0.002em;
  margin-bottom: 36px;
  max-width: 480px;
}

.movement-row.left .movement-body {
  margin-left: auto;
}

/* Sub-services — presented as a 2-column grid. Each .service-term is one
   grid cell so terms align vertically. Dots and <wbr>'s from the inline-
   separator era are hidden — the grid structure replaces them. */
.movement-services {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px;
  color: var(--ivory-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  padding-top: 28px;
  border-top: 1px solid var(--graphite);
  max-width: 520px;
  font-weight: 400;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 12px;
}
.movement-row.left .movement-services {
  margin-left: auto;
}
.movement-services .service-term {
  /* text-wrap: pretty balances any wrap (only the longest 4-word terms
     wrap at the column width); 2-word terms always fit on one line. */
  text-wrap: pretty;
}
.movement-services .dot,
.movement-services wbr {
  display: none;
}

/* ============ IMAGE COLUMN ============ */
.movement-image-col {
  position: relative;
}

.movement-image {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--obsidian);
}

.movement-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.85);
  transition: transform 1800ms var(--ease), filter 500ms var(--ease);
}
.movement-image:hover img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}
.movement-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(7,7,10,0.4) 100%);
  pointer-events: none;
}

/* ============ SCROLL REVEAL ============ */
.movement-row {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.movement-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ PROCESS FOOTER ============ */
.process-footer {
  position: relative;
  z-index: 5;
  margin-top: 180px;
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.process-footer-line {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  margin: 0 auto 56px;
}

.process-footer-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ivory);
  line-height: 1.5;
  margin-bottom: 48px;
  font-weight: 300;
}

.process-footer-meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  color: var(--ivory-faint);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .process {
    padding: 120px 32px 140px;
  }
  .process::before {
    font-size: 200px;
  }
  .process-header {
    margin-bottom: 80px;
  }

  /* On mobile, timeline thread shifts to the left */
  .process-timeline::before {
    left: 28px;
    transform: none;
  }

  /* All rows become single column, text-only on left */
  .movement-row {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 100px;
    padding-left: 64px;
  }
  .movement-row.right .movement-text-col,
  .movement-row.left .movement-text-col {
    order: 1;
    padding: 0;
    text-align: left;
  }
  .movement-row.right .movement-image-col,
  .movement-row.left .movement-image-col {
    order: 2;
    padding: 0;
  }
  .movement-row.left .movement-body,
  .movement-row.left .movement-services {
    margin-left: 0;
  }

  /* Marker on the left thread, smaller */
  .movement-marker {
    left: 28px;
    top: 0;
    transform: translate(-50%, 0);
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .movement-row.right .movement-marker::after,
  .movement-row.left .movement-marker::after {
    left: 100%;
    right: auto;
    width: 20px;
  }

  .movement-image {
    aspect-ratio: 4/5;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .process {
    padding: 100px 20px 120px;
  }
  .movement-row {
    padding-left: 44px;
    margin-bottom: 80px;
  }
  .process-timeline::before {
    left: 20px;
  }
  .movement-marker {
    left: 20px;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .movement-title {
    font-size: 52px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .movement-row {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Engagement Block — sits below the Process arc
   Four cards: Dev Management / PM / JV / Advisory
   ============================================================ */

.engagement {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 200px auto 0;
  padding-top: 120px;
  border-top: 1px solid var(--graphite);
}

.engagement-header {
  text-align: center;
  margin-bottom: 96px;
}

.engagement-prelude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 36px;
}
.engagement-prelude .line {
  width: 56px;
  height: 1px;
  background: var(--gold);
}
.engagement-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.engagement-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(52px, 5.6vw, 80px);
  font-weight: 300;
  /* Pinyon Script's descenders (g, y) curl well below the baseline. Mirrors the
     proven .movement-title recipe: roomy line-height + bottom padding so the
     background-clip: text box contains the descenders, overflow: visible so the
     glow filter has render room, and a small negative margin to keep spacing
     tight. */
  line-height: 1.28;
  letter-spacing: 0;
  margin-bottom: -4px;
  padding: 0.04em 0.12em 0.2em;
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: var(--gold-glow-soft);
  overflow: visible;
  /* Matches the goldSheen used on editions/process/philosophy titles */
  animation: goldSheen 8s ease-in-out infinite;
}

.engagement-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 25px);
  color: var(--ivory-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

.engagement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--graphite);
}

.engagement-card {
  padding: 56px 36px 48px;
  position: relative;
  border-right: 1px solid var(--graphite);
  transition: background 600ms var(--ease);
}
.engagement-card:last-child {
  border-right: none;
}
.engagement-card:hover {
  background: rgba(184, 147, 90, 0.025);
}

/* Heraldic gold-line icon at the top of each engagement card.
   Thin 1.2px strokes, soft gold glow, lifts on hover. */
.engagement-icon {
  display: block;
  width: 44px;
  height: 44px;
  color: var(--gold-light);
  margin-bottom: 32px;
  filter: drop-shadow(0 0 12px rgba(184, 147, 90, 0.22));
  transition:
    color 600ms var(--ease),
    transform 600ms var(--ease),
    filter 600ms var(--ease);
}
.engagement-card:hover .engagement-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 18px rgba(212, 178, 122, 0.45));
}

.engagement-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 2.2vw, 30px);
  color: var(--gold-light);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: 20px;
  /* Reserve two lines of title height so the description below starts at the
     same vertical position across all four cards. Single-line titles like
     "Advisory" are centred vertically within that reserved space, while the
     description below them still lines up across the whole row. */
  min-height: calc(1.15em * 2);
  display: flex;
  align-items: center;
}

.engagement-desc {
  /* Sans-serif body for readability — matches .movement-body / .philosophy-body. */
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  color: rgba(244, 236, 216, 0.84);
  line-height: 1.55;
  letter-spacing: 0.002em;
}

/* ============ ENGAGEMENT RESPONSIVE ============ */
@media (max-width: 1024px) {
  .engagement {
    margin-top: 140px;
    padding-top: 80px;
  }
  .engagement-header {
    margin-bottom: 64px;
  }
  .engagement-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .engagement-card {
    padding: 44px 28px 40px;
    border-bottom: 1px solid var(--graphite);
  }
  .engagement-card:nth-child(2n) {
    border-right: none;
  }
  .engagement-card:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .engagement {
    margin-top: 100px;
    padding-top: 60px;
  }
  .engagement-grid {
    grid-template-columns: 1fr;
  }
  .engagement-card {
    border-right: none;
    padding: 40px 24px;
  }
  .engagement-card:not(:last-child) {
    border-bottom: 1px solid var(--graphite);
  }
}

@media (max-width: 640px) {
  .movement-services {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    column-gap: 18px;
    row-gap: 10px;
  }
}

/* ============================================================
   Music Player — Corner Vinyl Icon + Full-Screen Music Menu
   Real HTML5 audio playback when audio files are available
   ============================================================ */

/* ============ CORNER VINYL ICON ============ */
.vinyl-icon {
  position: fixed;
  bottom: 48px;
  right: 48px;
  z-index: 80;
  width: 72px;
  height: 72px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 600ms var(--ease);
}
.vinyl-icon::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(184, 147, 90, 0.28) 0%,
    rgba(184, 147, 90, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 600ms var(--ease);
  opacity: 0.7;
  animation: vinylPulse 3s ease-in-out infinite;
}
.vinyl-icon:hover::before { opacity: 1; }
.vinyl-icon.playing::before {
  opacity: 1;
  animation: none;
  background: radial-gradient(
    circle at center,
    rgba(184, 147, 90, 0.42) 0%,
    rgba(184, 147, 90, 0.18) 40%,
    transparent 70%
  );
}
@keyframes vinylPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 0.95; }
}
.vinyl-icon:hover { transform: scale(1.08); }

.vinyl-disc {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
  /* Same animation in both states — only `animation-play-state` toggles
     so the rotation resumes from exactly where it stopped (no restart). */
  animation: vinylSpin 2.6s linear infinite;
  animation-play-state: paused;
  filter:
    drop-shadow(0 0 14px rgba(184, 147, 90, 0.55))
    drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
}
.vinyl-icon.playing .vinyl-disc {
  animation-play-state: running;
  filter:
    drop-shadow(0 0 20px rgba(184, 147, 90, 0.8))
    drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
}
@keyframes vinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vinyl-toggle {
  position: fixed;
  right: calc(48px + 72px + 16px); /* sits 16px left of the disc */
  bottom: 48px;
  height: 72px;                    /* match disc — flex centers the text */
  z-index: 80;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 500ms var(--ease), color 500ms var(--ease),
              transform 600ms var(--ease);
  text-shadow: 0 1px 8px rgba(184, 147, 90, 0.25);
}
.vinyl-toggle:hover,
.vinyl-toggle:focus-visible {
  opacity: 1;
  color: var(--ivory);
  outline: none;
}

/* Icon-only music toggle */
.vinyl-toggle {
  right: calc(48px + 72px + 4px);
  bottom: 57px;
  width: 54px;
  height: 54px;
  justify-content: center;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0;
  letter-spacing: 0;
  color: var(--gold-light);
  opacity: 0.9;
  transition:
    opacity 500ms var(--ease),
    color 500ms var(--ease),
    border-color 500ms var(--ease),
    background 500ms var(--ease),
    transform 300ms var(--ease);
  filter: drop-shadow(0 2px 12px rgba(184, 147, 90, 0.18));
}
.vinyl-toggle:hover,
.vinyl-toggle:focus-visible {
  color: var(--gold-light);
  background: transparent;
  transform: translateY(-1px);
}
.vinyl-toggle svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}
.vinyl-toggle-play {
  margin-left: 1px;
}
.vinyl-toggle-pause {
  display: none;
}
.vinyl-toggle.is-playing .vinyl-toggle-play {
  display: none;
}
.vinyl-toggle.is-playing .vinyl-toggle-pause {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .vinyl-icon::before, .vinyl-disc { animation: none !important; }
}

/* ============ FOOTER ============ */
/* Centred stack: contact line → legal links → credit. Black bar with a thin
   gold hairline separating it from the content above. */
.site-footer {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 32px;
  background: var(--obsidian);
  border-top: 1px solid rgba(184, 147, 90, 0.25);
  /* No top margin — a transparent margin would reveal the body's darker
     obsidian as a band above the gold line. */
  margin-top: 0;
}
.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-contact-item {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ivory-muted);
  text-decoration: none;
  transition: color 300ms var(--ease);
}
a.footer-contact-item:hover {
  color: var(--gold-light);
}
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-link {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  text-decoration: none;
  transition: color 300ms var(--ease);
}
.footer-link:hover {
  color: var(--gold-light);
}
.footer-sep {
  color: var(--gold);
  font-size: 9px;
}
.footer-credit {
  font-family: 'Inter Tight', sans-serif;
  font-size: 8.8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  /* Desktop shows the credit as the vertical .edge-bl on the left edge, so the
     footer copy is hidden there and revealed only at the mobile breakpoint. */
  display: none;
}
@media (max-width: 1024px) {
  .site-footer {
    gap: 16px;
    padding: 40px 24px;
  }
  .footer-credit { display: block; }
}

/* ============ LEGAL LIGHTBOX ============ */
/* In-page modal for the footer legal links — keeps the music playing (no nav). */
.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 400ms;
}
.legal-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.legal-modal {
  position: fixed;
  z-index: 301;
  top: 50%;
  left: 50%;
  width: calc(100% - 48px);
  max-width: 720px;
  max-height: 84vh;
  transform: translate(-50%, -48%);
  background: rgba(15, 15, 18, 0.96);
  border: 1px solid rgba(184, 147, 90, 0.3);
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 400ms;
  display: flex;
  flex-direction: column;
}
.legal-modal.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}
.legal-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--gold-light);
  cursor: pointer;
  transition: color 300ms var(--ease), transform 400ms var(--ease);
}
.legal-modal-close:hover {
  color: var(--ivory);
  transform: rotate(90deg);
}
.legal-modal-scroll {
  overflow-y: auto;
  padding: 56px 48px 48px;
  scrollbar-width: thin;
  scrollbar-color: var(--graphite) transparent;
  /* Stop scroll-chaining: when the modal hits its top/bottom, don't pass the
     scroll onto the page behind it. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.legal-modal-scroll::-webkit-scrollbar { width: 5px; }
.legal-modal-scroll::-webkit-scrollbar-thumb {
  background: var(--graphite);
  border-radius: 3px;
}
.legal-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: 0.02em;
  color: var(--ivory);
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--graphite);
}
/* Body copy styling (mirrors legal.css so the standalone pages and the modal
   render identically). */
.legal-modal-body {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244, 236, 216, 0.84);
}
.legal-modal-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--gold-light);
  margin: 36px 0 14px;
}
.legal-modal-body h2:first-child { margin-top: 0; }
.legal-modal-body h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  margin: 26px 0 10px;
}
.legal-modal-body p { margin: 0 0 18px; }
.legal-modal-body ul,
.legal-modal-body ol { margin: 0 0 18px; padding-left: 22px; }
.legal-modal-body li { margin-bottom: 8px; }
.legal-modal-body a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 300ms var(--ease);
}
.legal-modal-body a:hover { color: var(--ivory); }
.legal-modal-body strong { color: var(--ivory); font-weight: 500; }

@media (max-width: 640px) {
  .legal-modal-scroll { padding: 52px 24px 36px; }
  .legal-modal-body { font-size: 14px; }
}

/* ============ STUDIO FEATURE — HOSPITALITY PEDIGREE ============ */
/* Prominent band after the studio grid spotlighting Roberto’s hospitality
   track record. Mirrors the philosophy two-column rhythm; the media column
   reuses the editions .carousel component (initCarousels() wires it). */
.studio-feature {
  position: relative;
  padding: 40px 80px 200px;
  background: var(--obsidian);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  overflow: hidden;
}
.studio-feature-media {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}
.studio-feature-media .carousel {
  width: 100%;
  max-width: 540px;
  margin-bottom: 0;
}
/* Thin gold hairline frame, matching the philosophy image treatment. */
.studio-feature-media .carousel::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(184, 147, 90, 0.2);
  pointer-events: none;
  z-index: 5;
}
.studio-feature-text {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.studio-feature-prelude {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.studio-feature-prelude .line {
  width: 48px;
  height: 1px;
  background: var(--gold);
}
.studio-feature-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.studio-feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: 18px;
}
.studio-feature-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 28px;
}
.studio-feature-body {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17.5px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(244, 236, 216, 0.84);
  letter-spacing: 0.002em;
}
.studio-feature-body em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.22em;
  color: var(--gold-light);
}
.studio-feature-venues {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--graphite);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.studio-feature-venues .dot { color: var(--gold); }

@media (max-width: 1024px) {
  .studio-feature {
    grid-template-columns: 1fr;
    padding: 0 32px 140px;
    gap: 64px;
  }
  .studio-feature-media { justify-content: center; }
  .studio-feature-media .carousel { max-width: 460px; }
}
@media (max-width: 640px) {
  .studio-feature { padding: 0 20px 100px; gap: 44px; }
}

/* ============ BACK TO TOP ============ */
/* Pinned to the right edge, vertically centred — its own quiet spot, clear of
   the vinyl player (bottom-right) and the "Website by Fortezza Group" credit
   (bottom-left, .edge-bl). Bare arrow, no chrome. .visible toggled by script.js. */
.to-top {
  position: fixed;
  top: 50%;
  right: 40px;
  transform: translateY(-50%) translateX(12px);   /* centre + eased-in offset */
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gold-light);
  cursor: pointer;
  /* hidden + nudged right until shown, so it eases in from the edge */
  opacity: 0;
  visibility: hidden;
  transition: opacity 2000ms var(--ease), transform 2000ms var(--ease),
              visibility 2000ms, color 300ms var(--ease);
}
.to-top.visible {
  /* Full opacity so it reads as solid gold, matching the vinyl disc. */
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.to-top:hover {
  opacity: 1;
  color: var(--ivory);
  transform: translateY(-50%) translateX(-3px);
}
/* Small vertical label below the arrow, matching the site's edge credits. */
.to-top-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: inherit;
}
@media (max-width: 640px) {
  /* Mobile: sit just above the vinyl disc (bottom:32 + 64px tall + gap),
     centred over it, instead of mid-screen on the right edge. Override the
     desktop translateY(-50%) centring with a bottom-anchored slide-up. */
  .to-top {
    /* Upper area of the screen, well below the nav, anchored to the top.
       Horizontally aligned with the hamburger: at ≤640px the nav padding is
       20px and the 48px toggle centres its lines, so the hamburger centre is
       20 + 24 = 44px from the edge; arrow is 20px wide, so right = 44 - 10 = 34px. */
    top: 120px;
    bottom: auto;
    right: 34px;
    transform: translateY(-8px);   /* eased-in offset, slides down when visible */
  }
  .to-top.visible {
    transform: translateY(0);
  }
  .to-top:hover {
    transform: translateY(3px);
  }
  /* Arrow 10% larger on mobile (18px → 20px). */
  .to-top svg {
    width: 20px;
    height: 20px;
  }
  /* Label is desktop-only — keep just the arrow on phones. */
  .to-top-label {
    display: none;
  }
}

/* ============ FULL-SCREEN MUSIC MENU ============ */
.music-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Keep scrolling sealed inside the menu — no chaining to the page beneath. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(7, 7, 10, 0.7);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease), visibility 600ms;
  overflow-y: auto;
}
.music-menu.open {
  opacity: 1;
  visibility: visible;
}

.music-menu-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  min-height: 100vh;
  align-items: start;
}

/* Close button — fixed to viewport, prominent gold ring */
.music-close {
  position: fixed;
  /* Bigger hit box (was 48px) so a click *near* the X still closes the menu;
     re-centred so the icon stays in the same corner spot. */
  top: 20px;
  right: 20px;
  width: 72px;
  height: 72px;
  background: transparent;
  border: none;
  padding: 0;
  /* colour + scale ease in as the cursor approaches (--close-color /
     --close-scale, set by JS); rotate stays the hover flourish (--close-rot). */
  color: var(--close-color, var(--gold-light));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Scale only — grow inward from the top-right corner so the box never pokes
     past the viewport edges. A centred scale poked ~22px past the top and
     right, which briefly flashed the page scrollbars on hover. */
  transform: scale(var(--close-scale, 1));
  transform-origin: top right;
  transition: color 250ms var(--ease), transform 200ms var(--ease);
  z-index: 210;
}
/* Rotate lives on the icon (centred) so the hover flourish spins in place
   rather than swinging around the corner the box scales from. */
.music-close svg {
  transform: rotate(var(--close-rot, 0deg));
  transition: transform 400ms var(--ease);
}
.music-close:hover {
  color: var(--ivory);
  --close-rot: 90deg;
}

/* ============ LEFT COLUMN: NOW PLAYING ============ */
.music-now-playing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.music-prelude {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.music-prelude .line {
  width: 42px;
  height: 0.5px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}
.music-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold-light);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.music-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(64px, 7vw, 104px);
  font-weight: 400;
  line-height: 1.08;
  padding: 0.12em 0.14em 0.18em 0.06em;
  margin: 0 0 4px;
  letter-spacing: 0.025em;
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 1px rgba(244, 236, 216, 0.3))
    drop-shadow(0 2px 16px rgba(184, 147, 90, 0.25));
  animation: goldSheen 8s ease-in-out infinite;
}

.music-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ivory);
  opacity: 0.92;
  line-height: 1.45;
  margin: 0 0 32px;
  max-width: 440px;
}

/* Large vinyl visual */
.music-vinyl-visual {
  width: 228px;
  height: 228px;
  margin-bottom: 28px;
  position: relative;
}
.music-vinyl-disc {
  width: 100%;
  height: 100%;
  display: block;
  /* Same animation in both states — only `animation-play-state` toggles
     so the rotation resumes from exactly where it stopped (no restart). */
  animation: vinylSpin 2.6s linear infinite;
  animation-play-state: paused;
  filter:
    drop-shadow(0 0 30px rgba(184, 147, 90, 0.5))
    drop-shadow(0 12px 36px rgba(0, 0, 0, 0.7));
}
.music-menu.playing .music-vinyl-disc {
  animation-play-state: running;
  filter:
    drop-shadow(0 0 40px rgba(184, 147, 90, 0.7))
    drop-shadow(0 12px 36px rgba(0, 0, 0, 0.7));
}

/* Current track display */
.music-current {
  margin-top: 18px;
  margin-bottom: 24px;
}
.music-current-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 12px;
}
.music-current-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 2px;
  padding: 0.04em 0.12em 0.08em;
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: var(--gold-glow-soft);
}
/* Artist line — match the typography used in the tracklist below
   (Inter Tight, uppercase, wide letter-spacing) for visual consistency. */
.music-current-mood {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.35px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}

/* Progress bar */
.music-progress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin-bottom: 24px;
}
.music-time {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ivory-muted);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
.music-progress {
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.music-progress-track {
  width: 100%;
  height: 2px;
  background: var(--graphite);
  position: relative;
  overflow: hidden;
  transition: height 200ms var(--ease);
}
.music-progress:hover .music-progress-track {
  height: 3px;
}
.music-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  box-shadow: 0 0 6px rgba(184, 147, 90, 0.5);
  transition: width 100ms linear;
}

/* Controls — prev / play / next, centred under the progress bar */
.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center; /* override parent's align-items: flex-start */
  gap: 32px;
  margin-bottom: 32px;
}
.music-ctrl {
  background: transparent;
  border: none;
  color: var(--ivory-muted);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms var(--ease), transform 200ms var(--ease);
}
.music-ctrl:hover {
  color: var(--gold-light);
  transform: scale(1.1);
}
.music-ctrl:active {
  transform: scale(0.96);
}
.music-ctrl-play {
  width: 56px;
  height: 56px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
}
.music-ctrl-play:hover {
  background: rgba(184, 147, 90, 0.15);
  border-color: var(--gold-light);
  transform: scale(1.05);
}
.music-ctrl-play .pause-icon { display: none; }
.music-menu.playing .music-ctrl-play .play-icon { display: none; }
.music-menu.playing .music-ctrl-play .pause-icon { display: block; }
.music-ctrl-play .play-icon { margin-left: 2px; }

/* Volume */
.music-volume-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.music-volume-btn {
  background: transparent;
  border: none;
  color: var(--ivory-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms var(--ease);
}
.music-volume-btn:hover { color: var(--gold-light); }
.music-volume-btn .vol-off { display: none; }
.music-menu.muted .music-volume-btn .vol-on { display: none; }
.music-menu.muted .music-volume-btn .vol-off { display: block; }

.music-volume-slider {
  width: 100px;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.music-volume-track {
  width: 100%;
  height: 2px;
  background: var(--graphite);
  position: relative;
}
.music-volume-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  background: var(--gold);
  box-shadow: 0 0 4px rgba(184, 147, 90, 0.4);
  transition: width 100ms linear;
}

/* ============ RIGHT COLUMN: TRACKLIST ============ */
.music-tracklist-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 160px);
}

.music-tracklist-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--graphite);
  margin-bottom: 8px;
}
.music-tracklist-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.music-tracklist-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ivory-muted);
}

.music-tracklist {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--graphite) transparent;
}
.music-tracklist::-webkit-scrollbar { width: 4px; }
.music-tracklist::-webkit-scrollbar-track { background: transparent; }
.music-tracklist::-webkit-scrollbar-thumb {
  background: var(--graphite);
  border-radius: 2px;
}

.track {
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid rgba(28, 28, 32, 0.5);
  transition: padding-left 400ms var(--ease);
}
.track:hover {
  padding-left: 12px;
}
.track.active {
  padding-left: 14px;
}
.track.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--gold);
}
.track-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--ivory-faint);
}
.track.active .track-num { color: var(--gold); }
.track-info { min-width: 0; }
.track-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21.85px;
  font-weight: 300;
  color: var(--ivory);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track.active .track-title {
  color: var(--gold-light);
  font-style: italic;
}
.track-meta {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.35px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-dot { color: var(--gold); margin: 0 4px; }

.track-play-btn {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--graphite);
  border-radius: 50%;
  color: var(--ivory-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms var(--ease);
  padding: 0;
}
.track:hover .track-play-btn {
  border-color: var(--gold);
  color: var(--gold);
}
.track.active .track-play-btn {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 147, 90, 0.15);
}
.track-play-btn .track-pause-icon { display: none; }
.track.playing .track-play-icon { display: none; }
.track.playing .track-pause-icon { display: block; }
.track-play-icon { margin-left: 1px; }

.music-tracklist-footer {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ivory-muted);
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--graphite);
  margin-top: 16px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .music-menu-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px 32px;
  }
  .music-close {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
  .music-vinyl-visual {
    width: 160px;
    height: 160px;
  }
  .music-tracklist-col {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .vinyl-icon {
    bottom: 32px;
    right: 32px;
    width: 64px;
    height: 64px;
  }
  .vinyl-toggle {
    bottom: 32px;
    right: calc(32px + 64px + 2px);
    width: 50px;
    height: 50px;
  }
  /* When the footer scrolls into view, lift the disc + toggle above it so they
     don't float over the legal links. The lift tracks the scroll 1:1, so the
     disc simply rides on the footer's top line — no slide animation. JS sets
     --footer-lift and toggles body.footer-visible. */
  body.footer-visible .vinyl-icon,
  body.footer-visible .vinyl-toggle {
    transform: translateY(calc(-1 * var(--footer-lift, 0px)));
    transition: none;
  }
  .music-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  .music-menu-inner {
    padding: 64px 20px 32px;
    gap: 20px;
  }
  /* Hide non-essential ornamentation on phones so the tracklist lands above
     the fold. The corner vinyl icon still spins, so the big rotating disc here
     is redundant. System volume buttons replace the volume slider. */
  .music-prelude { display: none; }
  .music-vinyl-visual { display: none; }
  .music-volume-row { display: none; }
  .music-now-playing {
    align-items: center;
    text-align: center;
  }
  .music-title {
    font-size: 44px;
    line-height: 1.05;
    margin-bottom: 8px;
    text-align: center;
  }
  .music-subtitle {
    margin: 0 auto 16px;
    text-align: center;
    max-width: 340px;
  }
  .music-current {
    margin-bottom: 16px;
    text-align: center;
  }
  .music-current-label,
  .music-current-title,
  .music-current-mood {
    text-align: center;
  }
  .music-progress-row {
    max-width: 100%;
    margin-bottom: 16px;
  }
  .music-controls { gap: 20px; margin-bottom: 8px; }
  .track {
    grid-template-columns: 28px 1fr 34px;
    gap: 12px;
    padding: 12px 4px;
  }
  .track-title { font-size: 18.975px; }
  .track-play-btn { width: 34px; height: 34px; }
}

/* ============================================================
   Philosophy Section — Grit and Grace
   Image left, text right
   ============================================================ */

.philosophy {
  position: relative;
  padding: 220px 80px 240px;
  background: var(--obsidian);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: center;
  overflow: hidden;
}

/* Subtle Roman numeral IV behind everything */
.philosophy::before {
  content: 'IV';
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 360px;
  line-height: 1;
  color: rgba(184, 147, 90, 0.025);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* ============ IMAGE COLUMN ============ */
.philosophy-image-col {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.philosophy-image {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.philosophy-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.9) contrast(1.05);
  transition: transform 2000ms var(--ease), filter 500ms var(--ease);
}
.philosophy-image:hover img {
  transform: scale(1.04);
  filter: saturate(1.05) brightness(1) contrast(1.05);
}

/* Subtle gradient overlay */
.philosophy-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(7, 7, 10, 0.5) 100%),
    radial-gradient(ellipse at top right, transparent 50%, rgba(7, 7, 10, 0.3) 100%);
  pointer-events: none;
}

/* A thin gold hairline frame inset from the image edges */
.philosophy-image::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(184, 147, 90, 0.2);
  pointer-events: none;
  z-index: 3;
}

.philosophy-image-caption {
  position: absolute;
  bottom: 32px;
  left: 32px;
  z-index: 4;
}

.philosophy-image-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(7, 7, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
}

/* ============ TEXT COLUMN ============ */
.philosophy-text-col {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.philosophy-prelude {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.philosophy-prelude .line {
  width: 48px;
  height: 1px;
  background: var(--gold);
}
.philosophy-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Reuse the gold sheen treatment from editions/process titles */
.philosophy-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.15;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.08em;
  padding-right: 0.15em;
  margin-bottom: 10px;
  letter-spacing: 0.025em;
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    var(--gold-glow-strong);
  animation: goldSheen 8s ease-in-out infinite;
  display: inline-block;
}

.philosophy-lead {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px);
  color: var(--gold-light);
  line-height: 1.55;
  margin-bottom: 36px;
  letter-spacing: 0.005em;
  /* A subtle gold accent left border */
  padding-left: 24px;
  border-left: 1px solid var(--gold);
}

.philosophy-body {
  /* Sans-serif body for readability.
     To revert to the original Cormorant body, swap this rule with:
       font-family: 'Cormorant Garamond', serif;
     and reset the .philosophy-body p block below to font-size: 20.5px,
     line-height: 1.4, font-weight: 400. */
  font-family: 'Inter Tight', sans-serif;
}

.philosophy-body p {
  font-size: 17.5px;
  line-height: 1.55;
  /* rgba (not opacity) — so child <em> can render at its own full opacity. */
  color: rgba(244, 236, 216, 0.84);
  margin-bottom: 20px;
  font-weight: 300;
  letter-spacing: 0.002em;
}

/* Italic emphasis stays in Cormorant — editorial accent against the sans body.
   Full-opacity gold-light so it matches the colour of the italic lead quote
   above (parent uses rgba, not opacity, so this isn't dimmed). */
.philosophy-body p em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.28em;
  color: var(--gold-light);
}

/* Closing line — held in Cormorant italic for the same reason: it's a
   typographic flourish, and italic Inter Tight isn't available. */
.philosophy-closing {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 400;
  color: var(--ivory) !important;
  opacity: 1 !important;
  font-size: 22px !important;
  line-height: 1.4;
  letter-spacing: 0;
  padding-top: 12px;
  margin-top: 8px !important;
}

/* The trinity line — three short anchors */
.philosophy-trinity {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--graphite);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.philosophy-trinity .dot {
  color: var(--gold);
}

/* ============ PHILOSOPHY RESPONSIVE ============ */
@media (max-width: 1024px) {
  .philosophy {
    grid-template-columns: 1fr;
    padding: 140px 32px 160px;
    gap: 80px;
  }
  .philosophy::before {
    font-size: 220px;
    right: 4%;
  }
  .philosophy-image-col {
    justify-content: center;
  }
  .philosophy-image {
    max-width: 480px;
  }
  .philosophy-title {
    font-size: clamp(44px, 8vw, 68px);
  }
}

@media (max-width: 640px) {
  .philosophy {
    padding: 100px 20px 120px;
    gap: 64px;
  }
  .philosophy-trinity {
    font-size: 9.5px;
    gap: 10px;
  }
}


/* ============================================================
   Studio Section — Six members of the group
   Desktop: 2×3 grid. Mobile: horizontal snap-scroll carousel.
   ============================================================ */

.studio {
  position: relative;
  padding: 200px 80px 220px;
  background: var(--obsidian);
  overflow: hidden;
}

/* Subtle Roman numeral V behind everything — matches the editions/process/
   philosophy/invitation chapter-mark treatment. */
.studio-chapter {
  position: absolute;
  right: 8%;
  top: 100px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 360px;
  color: rgba(184, 147, 90, 0.045);
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

.studio-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 120px;
  position: relative;
  z-index: 2;
}

.studio-prelude {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.studio-prelude .line {
  width: 56px;
  height: 0.5px;
  background: var(--gold);
}
.studio-prelude .label {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.studio-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.15;
  padding: 0.1em 0.15em 0.1em 0.08em;
  margin-bottom: 24px;
  letter-spacing: 0.025em;
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: var(--gold-glow-strong);
  animation: goldSheen 8s ease-in-out infinite;
  display: inline-block;
}

.studio-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 25px);
  color: var(--ivory-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Sans-serif body paragraph beneath the italic subtitle — matches the Grit
   & Grace body voice. Adds the explanatory "what the studio actually does"
   note: small team, deep practice, single signature on every venue. */
.studio-lead {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(244, 236, 216, 0.78);
  font-weight: 300;
  letter-spacing: 0.002em;
  max-width: 620px;
  margin: 24px auto 0;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px 48px;
  /* Narrower container — cards (and therefore portraits) come down to a
     comfortable editorial scale, while text continues to align with each
     image's left edge. */
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.studio-card {
  display: flex;
  flex-direction: column;
}

/* Portrait fills the card width so its left edge lines up with the role,
   name, and bio below. Aspect ratio matches the members-only card files
   (505 × 800) so the full card art is shown. `contain` is used as a
   safety net so any future photo with a slightly different ratio still
   shows in full instead of being cropped. */
.studio-portrait {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  background: var(--basalt);
  margin-bottom: 32px;
  position: relative;
  transition: transform 600ms var(--ease);
}
.studio-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop toward the top so heads sit consistently within the
     frame instead of being trimmed when source compositions vary. */
  object-position: center 25%;
}
/* Slight gold wash over each portrait to tie them to the brand palette.
   Plain (normal blend mode) overlay at low opacity — just a hint, not a duotone. */
.studio-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Gold wash that keeps the blacks black: multiply means black areas stay
     black (black × gold = black) while the mid/high tones pick up the warm
     gold tint. Higher opacity is fine here because multiply only darkens. */
  background: var(--gold);
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Hover lifts the whole card a few pixels — a quiet acknowledgement
   without any zoom or filter shift. */
.studio-card:hover .studio-portrait {
  transform: translateY(-6px);
}

/* Role label — sits between the name and the bio. Tightened tracking + a
   slightly smaller size so the longest title in the set ("Managing Director ·
   Senior Project Director") fits within two lines at the ~225px card width
   rather than wrapping to three. min-height locks the reserved space so the
   bios below align across all six cards regardless of role length. */
.studio-role {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.55;
  min-height: 3.1em;
  margin-bottom: 14px;
}

/* Name + LinkedIn row — name flush with the photo's left edge (the negative
   margin on .studio-name is preserved inside the flex item), LinkedIn icon
   pushed to the right edge of the card so it sits cleanly above the role. */
.studio-namebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Gold LinkedIn icon — same minimal line style as the nav social links so
   the brand voice stays consistent. Slightly larger than nav (20px glyph in
   a 32px tap target) so it reads as a clear, clickable credential. */
.studio-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--gold);
  flex-shrink: 0;
  text-decoration: none;
  transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.studio-linkedin svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-linkedin:hover {
  color: var(--gold-light);
  transform: translateY(-1px);
}
.studio-linkedin:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* Team member names — Anastasia Script with the same gold gradient + sheen
   animation used on the section titles. Brought down to a more proportional
   scale (was 28-38px → 22-28px) so the script doesn't dominate the card.
   Generous padding-left keeps the J's top-left swash inside the box;
   min-height locks the inline-block vertical extent so all six names sit
   on the same baseline regardless of which characters they happen to use. */
.studio-name {
  font-family: 'Anastasia Script', 'Anastasia Script Personal Use', 'Pinyon Script', cursive;
  font-size: clamp(28px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0 0 0 -0.3em;
  white-space: nowrap;
  /* Padding-left holds room INSIDE the element's box for the J's top-left
     swash on Jon / Jemma — the filter:drop-shadow on this element clips its
     own paint to the bounding box, so the swash needs to live inside.
     The matching negative margin-left shifts the entire box back so the
     visible character body still sits flush with the photo's left edge —
     non-J names align cleanly, J swashes occupy the otherwise-empty
     padding-left region. */
  padding: 0.12em 0.15em 0.04em 0.3em;
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: var(--gold-glow-soft);
  animation: goldSheen 8s ease-in-out infinite;
  display: inline-block;
  overflow: visible;
}

/* Matches the Grit & Grace body — same Inter Tight sans, same colour and
   weight — just a step smaller for the card scale. */
.studio-bio {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(244, 236, 216, 0.84);
  font-weight: 300;
  letter-spacing: 0.002em;
  max-width: 460px;
}

/* Mobile — flip the grid to a horizontal snap-scroll carousel so the six
   portraits stay tall and legible. Hides the scrollbar visually but keeps
   the native swipe / drag affordance. */
@media (max-width: 1024px) {
  .studio {
    padding: 140px 0 160px;
    overflow: visible;
  }
  .studio-chapter { font-size: 220px; top: 80px; right: 4%; }
  .studio-header {
    padding: 0 32px;
    margin-bottom: 80px;
  }
  .studio-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    /* Cards settle centred. `mandatory` arrests momentum so a flick lands on
       the next card instead of flinging far/fast; now that the per-frame paint
       cost is gone (sheen/glow disabled below) it's smooth, not jittery. */
    scroll-snap-type: x mandatory;
    gap: 32px;
    padding: 0 32px 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .studio-grid::-webkit-scrollbar { display: none; }
  .studio-card {
    flex: 0 0 80%;
    scroll-snap-align: center;
    min-width: 0;
  }
  .studio-portrait { margin-bottom: 22px; }
  .studio-bio { max-width: none; }
  /* Kill the continuously-repainting gold-sheen animation + glow filter on the
     staff names while in the mobile carousel — re-rendering text-clipped
     gradients + drop-shadow every frame is what made the swipe stutter. The
     static gold gradient still shows; it just stops animating. */
  .studio-name {
    animation: none;
    filter: none;
  }
}

@media (max-width: 640px) {
  .studio-card { flex: 0 0 82%; }
  .studio-grid {
    gap: 24px;
    padding: 0 24px 24px;
  }
  .studio-chapter { font-size: 160px; }
}


/* ============================================================
   Invitation Section — Apply for Consideration
   Centered editorial composition with gated CTA
   ============================================================ */

.invitation {
  position: relative;
  padding: 240px 80px 260px;
  background: var(--basalt);
  text-align: center;
  overflow: hidden;
}

.invitation-chapter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 380px;
  line-height: 1;
  color: rgba(184, 147, 90, 0.03);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.invitation-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.invitation-prelude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 48px;
}
.invitation-prelude .line {
  width: 64px;
  height: 1px;
  background: var(--gold);
}
.invitation-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

/* The title — Pinyon Script with the gold sheen */
.invitation-title {
  font-family: 'Pinyon Script', 'Anastasia Script', cursive;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.15;
  padding-top: 0.1em;
  padding-bottom: 0.25em;
  padding-left: 0.08em;
  padding-right: 0.15em;
  margin-bottom: 32px;
  letter-spacing: 0.025em;
  background-image: var(--gold-gradient-sharp);
  background-size: 220% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    var(--gold-glow-strong);
  animation: goldSheen 8s ease-in-out infinite;
  display: inline-block;
}

.invitation-body {
  margin-bottom: 72px;
}

.invitation-body p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.7;
  color: var(--ivory);
  margin-bottom: 24px;
  letter-spacing: 0.005em;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.invitation-body p:last-child {
  margin-bottom: 0;
  color: var(--ivory-muted);
}

/* ============ THE CTA BUTTON ============
   This is the hero element of the section.
   Treatment: thin gold border, generous padding, animated underline, sheen on hover */
.invitation-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gold);
  padding: 26px 64px;
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 32px;
  overflow: hidden;
  transition: color 600ms var(--ease), border-color 600ms var(--ease);
}

/* The hover-fill — a gold sheen sweeps left to right behind the text */
.invitation-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 147, 90, 0.15) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}

.invitation-cta:hover::before {
  transform: translateX(100%);
}

.invitation-cta:hover {
  color: var(--ivory);
  border-color: var(--gold-light);
}

.invitation-cta .cta-label {
  position: relative;
  z-index: 2;
}

.invitation-footnote {
  /* Canonical small-label style — see .hero-quote .attribution. */
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============ INVITATION RESPONSIVE ============ */
@media (max-width: 1024px) {
  .invitation {
    padding: 160px 32px 180px;
  }
  .invitation-chapter {
    font-size: 240px;
  }
  .invitation-cta {
    padding: 22px 48px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .invitation {
    padding: 120px 20px 140px;
  }
  .invitation-chapter {
    font-size: 180px;
  }
  .invitation-cta {
    padding: 20px 36px;
    font-size: 10.5px;
    width: 100%;
    max-width: 320px;
  }
}


/* ============================================================
   Application Modal — full-screen overlay
   Triggered by the invitation CTA
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Solid darker tint instead of a backdrop-blur — blur forces a fullscreen
     re-rasterise on every paint, which made the native <select> picker take
     ~1s to appear on click. The deeper alpha gives similar visual separation. */
  background: rgba(0, 0, 0, 0.82);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease), visibility 500ms;
}
.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: 92%;
  max-width: 620px;
  max-height: 90vh;
  /* Premium card: warmer base + a subtle gold sheen falling from the top edge,
     gold-tinted border, soft top-inner highlight, generous outer drop shadow. */
  background:
    linear-gradient(180deg, rgba(184, 147, 90, 0.08) 0%, transparent 38%),
    linear-gradient(180deg, #100e0b 0%, var(--obsidian) 100%);
  border: 1px solid rgba(184, 147, 90, 0.32);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 8px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(212, 178, 122, 0.28);
  z-index: 310;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease), transform 700ms var(--ease), visibility 600ms;
  overflow-y: auto;
  padding: 72px 60px 56px;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--gold-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 300ms var(--ease), transform 400ms var(--ease);
  z-index: 5;
}
.modal-close:hover {
  color: var(--ivory);
  transform: rotate(90deg);
}

.modal-prelude {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.modal-prelude .line {
  width: 32px;
  height: 1px;
  background: var(--gold);
}
.modal-prelude .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px;
  color: var(--gold-light);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  color: var(--ivory);
  font-weight: 400;
  margin-bottom: 18px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.modal-subtitle {
  /* Sans-serif body — matches .philosophy-body / .movement-body / .engagement-desc. */
  font-family: 'Inter Tight', sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  color: rgba(244, 236, 216, 0.84);
  line-height: 1.55;
  letter-spacing: 0.002em;
  margin-bottom: 44px;
  max-width: 460px;
}

/* ============ FORM FIELDS ============ */
/* The modal itself is now the card — the form sits inside it directly,
   no nested border. Cleaner, less convoluted. */
.modal-form {
  padding: 0;
  background: transparent;
  border: none;
}

.field {
  margin-bottom: 32px;
}
.field label {
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 12px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(184, 147, 90, 0.35);
  padding: 12px 0;
  color: var(--ivory);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  outline: none;
  /* Snappy focus feedback — 500ms felt like the dropdown itself was slow. */
  transition: border-color 180ms var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--gold-light);
}
.field input::placeholder,
.field textarea::placeholder {
  /* Readable cream instead of muddy gold */
  color: var(--ivory-muted);
  opacity: 0.6;
}
.field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: 'Cormorant Garamond', serif;
}

.select-wrap {
  position: relative;
}
.select-wrap::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  /* Gold arrow to match the field treatment, was ivory-muted */
  border-right: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  padding-right: 24px;
}
.field select option {
  background: var(--obsidian);
  color: var(--ivory);
}

/* ============ SUBMIT BUTTON ============ */
.modal-submit {
  width: 100%;
  background: transparent;
  border: 1px solid var(--gold);
  padding: 22px 0;
  color: var(--gold-light);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  transition: color 500ms var(--ease), border-color 500ms var(--ease);
}
.modal-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 147, 90, 0.15) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}
.modal-submit:hover::before {
  transform: translateX(100%);
}
.modal-submit:hover {
  color: var(--ivory);
  border-color: var(--gold-light);
}
.modal-submit span {
  position: relative;
  z-index: 2;
}

.modal-error {
  margin-top: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ivory-muted);
  text-align: center;
}
.modal-error a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ CONFIRMATION STATE ============ */
.modal-confirm-state {
  text-align: center;
  padding: 24px 0;
}
.modal-confirm-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}
.modal-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 32px;
  color: var(--ivory);
  font-weight: 300;
  margin-bottom: 20px;
}
.modal-confirm-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--ivory-muted);
  line-height: 1.65;
  font-style: italic;
}

/* ============ MODAL RESPONSIVE ============ */
@media (max-width: 640px) {
  .modal {
    padding: 56px 28px 40px;
    max-height: 92vh;
  }
  .modal-title {
    font-size: 30px;
  }
  .modal-subtitle {
    font-size: 16px;
    margin-bottom: 32px;
  }
  .field input,
  .field textarea,
  .field select {
    font-size: 17px;
  }
}