/* Society of Sounds — site styles (2026 refresh)
   Light-to-dark page: the hero, wedding and private-event sections sit on
   white, a halftone band fades to black, and everything from Nightlife down
   is dark. One teal accent is used everywhere (buttons, icons, headline
   highlights) via --accent. */

:root {
  --accent: #37c0bd;
  --accent-glow: rgba(55, 192, 189, 0.55);
  /* The darkest teal the white-to-teal fade is allowed to reach (a pale tint of --accent). */
  --accent-fade-max: #b6e8e7;
  --ink: #0b0b0b;
  --text: #2a2a2a;
  --muted: #5f5f5f;
  --paper: #f4f4f2;
  --line: rgba(11, 11, 11, 0.15);
  --line-dark: #1f1f1f;

  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --gutter: 56px;
  --header-h: 72px;
  --radius-btn: 10px;
  --radius-card: 10px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #ffffff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

section[id],
[id='top'] {
  scroll-margin-top: var(--header-h);
  padding-top: 50px;
}

.container {
  width: 100%;
  max-width: 1328px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Reveal-on-scroll (reveal.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Shared type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.on-dark .eyebrow {
  color: #ffffff;
}

.on-dark .eyebrow::before {
  display: none;
}

.on-dark .eyebrow::after {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
}

.h-xl {
  font-size: clamp(64px, 7.8vw, 112px);
}

.h-lg {
  font-size: clamp(48px, 6.1vw, 88px);
}

.h-md {
  font-size: clamp(36px, 3.9vw, 56px);
}

.lede {
  margin: 0;
  max-width: 620px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
}

.on-dark .lede {
  color: #e4e4e4;
}

/* ---------- Buttons ----------
   Same language as the original site's buttons: moderately rounded
   rectangle, bold uppercase label, wide tracking. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent);
  color: #000000;
}

.btn-primary:hover {
  background: #4fd4d1;
}

.btn-outline {
  background: none;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: #000000;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: #ffffff;
  border-bottom: 1px solid rgba(11, 11, 11, 0.08);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  padding: 0 var(--gutter);
}

.site-header__logo img {
  height: 44px;
  width: auto;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.site-nav a {
  padding: 6px 0;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  border-color: var(--accent);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.login-links {
  display: none;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.login-links a {
  text-decoration: none;
  color: var(--ink);
}

.login-links a:hover {
  color: #1b8a87;
}

.login-links__sep {
  width: 1px;
  height: 18px;
  background: rgba(11, 11, 11, 0.25);
}

.site-header .btn {
  padding: 8px 18px;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
}

@media (min-width: 1240px) {
  .site-nav,
  .login-links {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
}

/* Mobile menu: drops down from under the header bar. It sits below the
   header in z-order, so it slides out from behind it. */
.nav-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 24px;
  background: #ffffff;
  border-bottom: 1px solid rgba(11, 11, 11, 0.08);
  box-shadow: 0 18px 30px rgba(11, 11, 11, 0.14);
  font-size: 18px;
  font-weight: 600;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 260ms ease, visibility 0s linear 260ms;
}

.nav-menu[data-open='true'] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 260ms ease, visibility 0s;
}

.nav-menu > a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.nav-menu a {
  text-decoration: none;
  color: var(--ink);
}

.nav-menu a:hover {
  color: #1b8a87;
}

.nav-menu__logins {
  display: flex;
  gap: 20px;
  padding-top: 18px;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* The hamburger itself closes the menu now (it turns into an X). */
.nav-close {
  display: none;
}

.nav-toggle span {
  transition: transform 220ms ease, opacity 160ms ease;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 1240px) {
  .nav-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-menu[data-open='true'],
  .nav-toggle span {
    transition: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 680px;
  padding: 0 var(--gutter);
  background: #ffffff;
  /* How much white washes over the photo where it's clearest (0 = full
     contrast, 1 = invisible). Used by both the wide and narrow layouts. */
  --hero-veil: 0.35;
  /* How far the halftone dots sit left of the photo's right edge, as a share
     of the hero width (0% = original spot, bigger = further left). */
  --hero-dots-shift: 24%;
}

.hero__slideshow {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.15);
  opacity: 0;
  z-index: 1;
}

.hero__slide.is-current {
  opacity: 1;
}

.hero__slide.is-entering {
  z-index: 2;
  transition: opacity 3.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-entering {
    transition: opacity 1.2s ease-in-out;
  }
}

.hero__fade-x {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 100%;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 18%, rgba(255, 255, 255, var(--hero-veil)) 55%, rgba(255, 255, 255, var(--hero-veil)) 100%);
}

.hero__fade-y {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.hero__dots {
  position: absolute;
  top: 0;
  right: var(--hero-dots-shift);
  width: 64%;
  height: 100%;
  /* Larger ink dots and a tighter grid give the photo a printed comic-book
     halftone. The layered masks fade the texture into the headline and footer. */
  background-image: radial-gradient(circle, rgba(20, 20, 20, 0.72) 1.7px, transparent 2px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 48%, transparent 78%), linear-gradient(0deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 48%, transparent 78%), linear-gradient(0deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}

.hero__content {
  position: relative;
  max-width: 640px;
}

.hero__headline {
  margin-bottom: 36px;
  color: var(--ink);
  line-height: 0.9;
}

.hero__headline .accent {
  color: var(--accent);
}

/* Morse-code "SOS" under a heading's last line (hero, Weddings, Private
   Events, Nightlife). The inline-block shrink-wraps to that line, and the
   image (width 0 + min-width 100%, so it adds nothing to the wrap width)
   stretches to exactly that width at any headline size. The artwork is
   near-black, so it's flipped to white on dark sections. */
.morse-line {
  display: inline-block;
}

.morse-line__img {
  display: block;
  width: 0;
  min-width: 100%;
  height: auto;
  margin-top: 0.16em;
  padding-top: 4px;
}

.on-dark .morse-line__img {
  filter: invert(1);
}

@media (max-width: 900px) {
  .hero {
    min-height: 560px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero__slideshow,
  .hero__fade-x,
  .hero__dots {
    width: 100%;
  }
  .hero__fade-x {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, var(--hero-veil)) 100%);
  }
  .hero__dots {
    right: 8%;
    background-size: 7px 7px;
    background-image: radial-gradient(circle, rgba(20, 20, 20, 0.56) 1.4px, transparent 1.8px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 74%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 15%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 74%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 15%, #000 88%, transparent 100%);
  }
}

/* ---------- Icon strip ---------- */

.icon-strip {
  padding: 32px 0 40px;
}

.icon-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  text-align: center;
}

.icon-strip__item {
  padding: 6px 12px;
  border-left: 1px solid var(--line);
}

.icon-strip__item:first-child {
  border-left: none;
}

.icon-strip__item svg {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-strip__item span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .icon-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 20px;
  }
  .icon-strip__item:nth-child(4) {
    border-left: none;
  }
}

@media (max-width: 560px) {
  .icon-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .icon-strip__item:nth-child(3),
  .icon-strip__item:nth-child(5) {
    border-left: none;
  }
  .icon-strip__item:nth-child(4) {
    border-left: 1px solid var(--line);
  }
}

/* ---------- Instagram row under the icon strip (index.html, assets/instagram-feed.js) ---------- */

.ig-strip {
  margin-top: -12px;
  padding: 0 0 40px;
}

.ig-strip__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 160ms ease;
}

.ig-strip__label::before,
.ig-strip__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.ig-strip__label svg {
  width: 14px;
  height: 14px;
  margin-right: -6px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
}

.ig-strip__label:hover {
  color: var(--accent);
}

.ig-strip .ig__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.ig-strip .ig__post {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 6px;
  background: var(--paper);
}

.ig-strip .ig__post img {
  filter: saturate(0.85);
  transition: transform 500ms ease, filter 300ms ease;
}

.ig-strip .ig__post:hover img {
  filter: none;
}

@media (max-width: 600px) {
  .ig-strip {
    padding-bottom: 32px;
  }
  .ig-strip .ig__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .ig-strip .ig__post:nth-child(n + 4) {
    display: none;
  }
}

/* ---------- Split sections (Weddings / Private Events) ---------- */

.split {
  padding: 80px 0 88px;
}

/* Weddings + Private Events sit on one shared background: white at the top of
   Weddings, fading steadily to the pale teal --accent-fade-max about
   two-thirds of the way down Private Events (the last third holds that color).
   It's a single gradient across both sections, so there's no seam between
   them. --teal-from is the share of the combined height where that color is
   reached. The halftone .fade below carries it on into the black Nightlife
   section. */
.blend-zone {
  --teal-from: 87%;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-fade-max) var(--teal-from), var(--accent-fade-max) 100%);
}

.split--teal {
  padding: 44px 0;
}

.split--teal .accent {
  color: var(--accent);
}

/* The default accent-colored/grey bits are too faint on a teal background. */
.split--teal .eyebrow,
.split--teal .split__note,
.testimonials .eyebrow {
  color: var(--ink);
}

.split--teal .occasion-list p {
  border-bottom-color: rgba(11, 11, 11, 0.35);
}

.split--teal .btn-primary {
  background: var(--ink);
  color: #ffffff;
}

.split--teal .btn-primary:hover {
  background: #262626;
}

.split__grid {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.split__grid--reverse {
  grid-template-columns: 560px minmax(0, 1fr);
  align-items: center;
}

.split__photo {
  width: 100%;
  height: 640px;
  object-fit: cover;
  object-position: 40% 30%;
  border-radius: var(--radius-card);
  filter: grayscale(1) contrast(1.08);
}

.split h2 {
  margin-bottom: 22px;
  margin-top: 110px;
}

.split .lede {
  margin-bottom: 36px;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 40px;
  margin-bottom: 40px;
}

/* Weddings "Every Detail, Covered.": one blurb about the optional
   enhancements, beside a pile of photos in the same
   tilted white-frame style as the .img-stack at the top of the page. */
.addons {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 40px;
}

/* Photos on the left on wide screens; on phones the copy stays first.
   The tilted cards leave empty space at the bottom of the pile box, so
   pull that in to line the copy up with the middle of the photos. */
.addons .addon-pile {
  order: -1;
  margin-bottom: -6%;
}

/* Private Events: photos on the right, mirroring the hero's pile on the left. */
.addons--flip .addon-pile {
  order: 0;
}

/* Drop the 110px headline top margin from .split h2 so the copy is truly
   centered against the photo pile. */
.addons h2 {
  margin-top: 0;
}

.addons__copy .lede {
  margin-bottom: 30px;
}

.addons__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.addons__label::after {
  content: '';
  flex: 0 0 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

.addons__list {
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
  color: #2f2f2f;
}

.addons__list li {
  cursor: default;
  margin-bottom: 8px;
}

.addons__list li:last-child {
  margin-bottom: 0;
}

.addons__list strong {
  color: var(--ink);
  font-weight: 700;
}

/* Private Events: a slightly bigger enhancements list. */
.addons--flip .addons__label {
  font-size: 18px;
}

.addons--flip .addons__list {
  font-size: 18px;
}

.addons--flip .addons__list li {
  margin-bottom: 10px;
}

.addon-pile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.95;
}

.addon-pile__card {
  position: absolute;
  width: 32%;
  margin: 0;
  padding: 12px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(11, 11, 11, 0.18), 0 2px 6px rgba(11, 11, 11, 0.1);
  transition: transform 400ms ease, box-shadow 400ms ease;
}

.addon-pile__card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}

.addon-pile__card--1 { left: 2%;  top: 2%;  transform: rotate(-6deg); }
.addon-pile__card--2 { left: 34%; top: 0;   transform: rotate(4deg); }
.addon-pile__card--3 { left: 66%; top: 3%;  transform: rotate(-3deg); }
.addon-pile__card--4 { left: 4%;  top: 47%; transform: rotate(5deg); }
.addon-pile__card--5 { left: 35%; top: 50%; transform: rotate(-4deg); }
.addon-pile__card--6 { left: 65%; top: 46%; transform: rotate(6deg); }

/* Four-photo pile (Private Events): a 2x2 grid of slightly larger cards. */
.addon-pile--four { aspect-ratio: 1 / 1.05; }
.addon-pile--four .addon-pile__card { width: 38%; }
.addon-pile--four .addon-pile__card--1 { left: 10%; top: 1%;  transform: rotate(-5deg); }
.addon-pile--four .addon-pile__card--2 { left: 52%; top: 0;   transform: rotate(4deg); }
.addon-pile--four .addon-pile__card--3 { left: 11%; top: 51%; transform: rotate(4deg); }
.addon-pile--four .addon-pile__card--4 { left: 51%; top: 50%; transform: rotate(-5deg); }

/* Hovering a photo, or its name in the list, brings it forward. */
.addon-pile__card:hover,
.addons:has([data-pic="1"]:hover) .addon-pile__card--1,
.addons:has([data-pic="2"]:hover) .addon-pile__card--2,
.addons:has([data-pic="3"]:hover) .addon-pile__card--3,
.addons:has([data-pic="4"]:hover) .addon-pile__card--4,
.addons:has([data-pic="5"]:hover) .addon-pile__card--5,
.addons:has([data-pic="6"]:hover) .addon-pile__card--6 {
  z-index: 2;
  transform: rotate(0) scale(1.06);
  box-shadow: 0 20px 40px rgba(11, 11, 11, 0.22), 0 0 0 2px var(--accent), 0 0 28px var(--accent-glow);
}

@media (max-width: 1100px) {
  .addons {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .addons .addon-pile {
    order: 0;
    margin-bottom: 0;
  }
  .addon-pile {
    max-width: 560px;
  }
}

@media (max-width: 600px) {
  .addons__list {
    font-size: 15px;
  }
  .addon-pile__card {
    padding: 8px;
    border-radius: 16px;
  }
  .addon-pile__card img {
    border-radius: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .addon-pile__card {
    transition: none;
  }
}

.service-list h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.service-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #3d3d3d;
}

.occasion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 40px;
  max-width: 620px;
  margin-bottom: 40px;
}

.occasion-list p {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(11, 11, 11, 0.2);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.split__note {
  max-width: 620px;
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.6;
  color: #3d3d3d;
}

.photo-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* private-events.jpg is two photos stacked in one file; each panel shows one half */
.photo-stack__panel {
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-card);
  background-image: url('images/private-events.jpg');
  background-size: 100% 200%;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.08);
}

.photo-stack__panel--top {
  background-position: center top;
}

.photo-stack__panel--bottom {
  background-position: center bottom;
}

/* Weddings image stack: four square photos in white rounded frames, fanned
   out and overlapping inside a square box. Rotation lives on the cards (not
   the box) so the box's reveal-on-scroll transform doesn't clash with it. */
.img-stack {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

.img-stack__card {
  position: absolute;
  width: 56%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 12px;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(11, 11, 11, 0.18), 0 2px 6px rgba(11, 11, 11, 0.1);
}

.img-stack__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.img-stack__card--1 {
  top: 0;
  left: 4%;
  transform: rotate(-7deg);
}

.img-stack__card--2 {
  top: 4%;
  right: 0;
  transform: rotate(6deg);
}

.img-stack__card--3 {
  bottom: 2%;
  left: 0;
  transform: rotate(5deg);
}

.img-stack__card--4 {
  bottom: 0;
  right: 4%;
  transform: rotate(-4deg);
}

/* Nudge the crops toward the subjects */
.img-stack__card--1 img { object-position: 45% 50%; }
.img-stack__card--2 img { object-position: 72% 40%; }
.img-stack__card--3 img { object-position: 55% 50%; }
.img-stack__card--4 img { object-position: 45% 40%; }

@media (max-width: 1100px) {
  .split__grid,
  .split__grid--reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split__photo {
    height: 460px;
  }
  .img-stack {
    max-width: 520px;
  }
  /* Weddings only: show the photo tiles above the "Your Day" copy once the
     layout drops to one column, instead of them falling to the bottom. */
  #weddings .img-stack {
    order: -1;
  }
}

@media (max-width: 600px) {
  .service-list,
  .occasion-list {
    grid-template-columns: 1fr;
  }
  .split__photo {
    height: 340px;
  }
  .lede {
    font-size: 18px;
  }
  .img-stack__card {
    padding: 8px;
    border-radius: 16px;
  }
  .img-stack__card img {
    border-radius: 9px;
  }
}

/* Homepage Weddings headline: keep "Our Soundtrack." on one line. On desktop
   the text column grows to fit the headline (the paragraph is kept from
   widening it); in the one-column layout the type shrinks just enough to fit
   narrow phones. */
#weddings h2 .morse-line {
  white-space: nowrap;
}

@media (min-width: 1101px) {
  #weddings .split__grid {
    grid-template-columns: minmax(520px, max-content) minmax(0, 1fr);
    /* Center the text block vertically against the photo stack. */
    align-items: center;
  }
  #weddings .lede {
    width: 0;
    min-width: 100%;
  }
}

@media (max-width: 1100px) {
  #weddings h2 {
    font-size: min(clamp(48px, 6.1vw, 88px), calc((100vw - 2 * var(--gutter)) / 7.6));
  }
}

/* Homepage Private Events: drop the 110px headline top margin from .split h2
   so the text block (headline, blurb, button) is truly centered against the
   photo stack (the grid already uses align-items: center). */
#private-events h2 {
  margin-top: 0;
}

/* Homepage, mobile only: tighter spacing around the Weddings / Private Events
   blocks (the ids exist only on index.html). */
@media (max-width: 700px) {
  #weddings {
    padding-bottom: 32px;
  }
  #private-events {
    padding: 32px 0 40px;
  }
  #private-events .split__grid {
    gap: 20px;
  }
}

/* ---------- Testimonials ---------- */

.testimonials {
  margin-top: 88px;
}

.testimonials h3 {
  margin-bottom: 32px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.testimonial-card {
  padding: 28px 28px 30px;
  background: var(--paper);
  border-radius: 14px;
}

.testimonial-card__mark {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 0.8;
  color: var(--accent);
}

.testimonial-card p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.testimonial-card cite {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
  .testimonials {
    margin-top: 64px;
  }
}

/* ---------- Halftone fade: pale teal to black ---------- */

.fade {
  position: relative;
  height: 360px;
  background: linear-gradient(180deg, var(--accent-fade-max) 0%, var(--ink) 100%);
}

.fade i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 72px;
  background-size: 10px 10px;
}

.fade i:nth-child(1) {
  top: 0;
  background-image: radial-gradient(var(--ink) 0.8px, transparent 1.3px);
}

.fade i:nth-child(2) {
  top: 72px;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.9px);
}

.fade i:nth-child(3) {
  top: 144px;
  background-image: radial-gradient(var(--ink) 2.1px, transparent 2.6px);
}

.fade i:nth-child(4) {
  top: 216px;
  background-image: radial-gradient(var(--ink) 3px, transparent 3.5px);
}

/* Home page: the same fade at half the length. */
.fade--short {
  height: 144px;
}

.fade--short i {
  height: 36px;
}

.fade--short i:nth-child(2) {
  top: 36px;
}

.fade--short i:nth-child(3) {
  top: 72px;
}

.fade--short i:nth-child(4) {
  top: 108px;
}

@media (max-width: 700px) {
  .hero__dots {
    display: none;
  }
  /* !important beats the inline height the live editor wrote on .fade, so the
     three remaining 72px dot bands fill the strip exactly on mobile. */
  .fade {
    height: 216px !important;
  }
  .fade i:nth-child(4) {
    display: none;
  }
  /* With the 4th band hidden, pin the remaining bands to the bottom so the
     dots end at the top of the Nightlife photo whatever the .fade height is. */
  .fade i:nth-child(1) {
    top: auto;
    bottom: 144px;
  }
  .fade i:nth-child(2) {
    top: auto;
    bottom: 72px;
  }
  .fade i:nth-child(3) {
    top: auto;
    bottom: 0;
  }
  .fade--short {
    height: 108px !important;
  }
  .fade--short i:nth-child(1) {
    bottom: 72px;
  }
  .fade--short i:nth-child(2) {
    bottom: 36px;
  }
}

/* ---------- Dark sections ---------- */

.on-dark {
  background: var(--ink);
  color: #ffffff;
}

/* ---------- Nightlife ---------- */

.night__hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  padding: 0 var(--gutter);
}

.night__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 66%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(0.9);
}

.night__tint,
.night__fade-x,
.night__fade-y {
  position: absolute;
  top: 0;
  right: 0;
  width: 66%;
  height: 100%;
}

.night__tint {
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.8;
}

.night__fade-x {
  background: linear-gradient(90deg, var(--ink) 0%, rgba(11, 11, 11, 0) 60%);
}

.night__fade-y {
  background: linear-gradient(0deg, var(--ink) 0%, rgba(11, 11, 11, 0) 28%);
}

.night__content {
  position: relative;
  max-width: 640px;
  padding: 80px 0 72px;
}

.night__headline {
  margin-bottom: 26px;
  font-size: clamp(64px, 7.8vw, 112px);
}

.night__headline .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  text-shadow: 0 0 28px var(--accent-glow);
}

.night__kicker {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 500;
}

.night__blurb {
  max-width: 520px;
  margin: 0 0 34px;
  font-size: 17px;
  line-height: 1.6;
  color: #d8d8d8;
}

.night__mgmt {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 48px var(--gutter) 72px;
  border-top: 1px solid var(--line-dark);
}

.night__mgmt h3 {
  font-size: 44px;
}

.night__mgmt p {
  max-width: 720px;
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
  color: #e4e4e4;
}

@media (max-width: 1000px) {
  .night__photo,
  .night__tint,
  .night__fade-x,
  .night__fade-y {
    width: 100%;
  }
  .night__fade-x {
    background: linear-gradient(90deg, rgba(11, 11, 11, 0.92) 0%, rgba(11, 11, 11, 0.7) 60%, rgba(11, 11, 11, 0.4) 100%);
  }
  .night__mgmt {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .night__hero {
    min-height: 0;
  }
  .night__content {
    padding: 56px 0;
  }
  .night__mgmt p {
    font-size: 18px;
  }
}

/* ---------- Our DJs ---------- */

.djs {
  padding: 72px 0 40px;
  border-top: 1px solid var(--line-dark);
}

.djs h2 {
  margin-bottom: 18px;
}

.djs .lede {
  margin-bottom: 40px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.photo-card {
  position: relative;
  display: block;
  height: 230px;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid #2a2a2a;
  text-decoration: none;
  color: #ffffff;
}

.photo-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transition: transform 500ms ease;
}

.photo-card:hover .photo-card__img {
  transform: scale(1.05);
}

.photo-card__img--bottom-half {
  height: 200%;
  object-position: center bottom;
  top: auto;
  bottom: 0;
  object-fit: cover;
}

.photo-card__tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.photo-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 62%);
}

.photo-card__body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.photo-card__body h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.photo-card__body p {
  margin: 0;
  font-size: 13px;
  color: #f0f0f0;
}

.photo-card__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  font-size: 15px;
}

@media (max-width: 1000px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Nightlife page (nightlife.html): part 1 "Nightlife", part 2 "Nightlife Management" ---------- */

.nlife {
  position: relative;
  padding-bottom: 48px;
}

/* DJ-deck photo across the top of the page, fading into the black below. */
.nlife::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3 / 1;
  background:
    linear-gradient(180deg, rgba(11, 11, 11, 0.4) 0%, rgba(11, 11, 11, 0.6) 55%, var(--ink) 100%),
    linear-gradient(90deg, rgba(11, 11, 11, 0.6) 0%, rgba(11, 11, 11, 0) 45%),
    url('images/nightlife-bg.webp') center / cover no-repeat;
}

.nlife > .container {
  position: relative;
}

.nlife__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: 48px;
  align-items: center;
}

.nlife__head .lede {
  margin-top: 28px;
}

/* Instagram flyers in the right column of the Nightlife hero: three across. */
.nlife__ig .ig__head {
  margin-bottom: 16px;
}

.nlife__ig h2 {
  font-size: clamp(28px, 2.6vw, 38px);
}

/* The flyer heading and button sit right-aligned over the flyers. */
.nlife__ig .ig__head {
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.nlife__ig .ig__head .btn {
  flex: none;
}

.nlife__ig .ig__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.nlife__ig .ig__fallback {
  background: rgba(11, 11, 11, 0.6);
}

/* Management part: four full-width rows, each led by a big word
   (Reliable / Consistent / Vetted / Managed), then the buttons. */
.rely {
  padding-bottom: 56px;
  border-top: 1px solid var(--line-dark);
}

.rely__accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  text-shadow: 0 0 28px var(--accent-glow);
}

.rely__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.rely__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rely__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid #2a2a2a;
}

.rely__row:first-child {
  padding-top: 0;
}

.rely__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  color: #ffffff;
}

.rely__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.rely__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #cfcfcf;
}

@media (max-width: 1000px) {
  .nlife__head {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .rely__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .nlife {
    padding-bottom: 32px;
  }
  .nlife::before {
    aspect-ratio: auto;
    height: 560px;
    background:
      linear-gradient(180deg, rgba(11, 11, 11, 0.6) 0%, rgba(11, 11, 11, 0.75) 60%, var(--ink) 100%),
      url('images/nightlife-bg.webp') 78% center / cover no-repeat;
  }
  .rely {
    padding-bottom: 40px;
  }
  .rely__row {
    padding: 20px 0;
  }
  .rely__body h3 {
    font-size: 20px;
  }
  .rely__body p {
    font-size: 15px;
  }
  .rely__cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Partner scroller (nightlife.html): two copies of the list slide left forever;
   pauses on hover, and sits still as a wrapped list for reduced motion. */
.partners {
  margin-top: 40px;
}

.partners__label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #bdbdbd;
}

.partners__track {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners__list {
  display: flex;
  flex: none;
  align-items: center;
  gap: 48px;
  margin: 0;
  padding: 0 48px 0 0;
  list-style: none;
  animation: partners-scroll 90s linear infinite;
}

.partners__track:hover .partners__list {
  animation-play-state: paused;
}

.partners__list li {
  flex: none;
  display: flex;
}

/* Logos are white PNGs; their width/height attributes balance wide wordmarks
   against square marks. Dimmed until hovered, like the old text names. */
.partners__list img {
  display: block;
  width: auto;
  height: calc(var(--h) * 1px);
  max-width: none;
  opacity: 0.6;
  transition: opacity 160ms ease;
}

.partners__list li:hover img {
  opacity: 1;
}

@keyframes partners-scroll {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .partners__list {
    flex-wrap: wrap;
    flex: 1;
    gap: 12px 32px;
    animation: none;
  }
  .partners__list[aria-hidden='true'] {
    display: none;
  }
}

@media (max-width: 600px) {
  .partners {
    margin-top: 32px;
  }
  .partners__list {
    gap: 32px;
    padding-right: 32px;
  }
  .partners__list img {
    height: calc(var(--h) * 0.75px);
  }
}

/* ---------- Instagram flyers (nightlife.html, assets/instagram-feed.js) ---------- */

.ig {
  padding: 48px 0 40px;
  border-top: 1px solid var(--line-dark);
}

.ig__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.ig__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ig__post {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  border-radius: var(--radius-card);
  background: #141414;
}

.ig__post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.ig__post:hover img {
  transform: scale(1.04);
}

.ig__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed #2a2a2a;
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  transition: border-color 160ms ease, color 160ms ease;
}

.ig__fallback:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ig__fallback svg {
  flex: none;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
}

@media (max-width: 600px) {
  .ig {
    padding: 40px 0 32px;
  }
  .ig__head .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .ig__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ig__post:nth-child(n + 5) {
    display: none;
  }
  .nlife__ig .ig__grid {
    gap: 6px;
  }
  .ig__fallback {
    min-height: 160px;
    font-size: 20px;
  }
}

/* ---------- Stats ---------- */

.stats {
  padding: 32px 0 56px;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.stats__item {
  padding: 8px 12px;
  border-left: 1px solid #2a2a2a;
}

.stats__item:first-child {
  border-left: none;
}

.stats__number {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
}

.stats__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #bdbdbd;
}

.stats__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 36px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.stats__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
}

.stats__perks .stats__perks-break {
  display: none;
}

.stats__perks li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

@media (max-width: 700px) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
  .stats__item {
    padding: 8px 6px;
  }
  .stats__item:nth-child(3) {
    border-left: none;
  }
  .stats__perks {
    gap: 6px 16px;
    margin-top: 28px;
  }
  .stats__perks li {
    gap: 8px;
    font-size: 11px;
    letter-spacing: 1px;
  }
  .stats__perks .stats__perks-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
  .stats__perks .stats__perks-break::before {
    content: none;
  }
  .stats__number {
    font-size: 40px;
  }
  .stats__label {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}

/* ---------- Contact / Book ---------- */

.contact {
  padding: 80px 0 88px;
  border-top: 1px solid var(--line-dark);
}

/* Straight after the halftone fade, the divider line just reads as a seam. */
.fade + .contact {
  border-top: 0;
}

.contact__grid {
  display: grid;
  /* The headline column is as wide as "Unforgettable." so the period never
     slides under the form; the form takes what's left, up to 620px. */
  grid-template-columns: max-content minmax(0, 620px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}

.contact__grid > * {
  min-width: 0;
}

.contact h2 {
  margin-bottom: 28px;
  font-size: clamp(40px, 6.7vw, 96px);
}

.contact__blurb {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.6;
  color: #d8d8d8;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  font-size: 18px;
  font-weight: 500;
}

.contact__details p {
  margin: 0;
}

.contact__details a {
  text-decoration: none;
}

.contact__email {
  color: var(--accent);
}

.contact__social {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- Forms (Contact section, contact.html, book.html) ---------- */

.form-card {
  padding: 32px;
  background: #34c5ca;
  border-radius: 14px;
  color: #16130f;
}

/* Requested DJ, only on a QR-code visit (book.html?dj=Name). */
.form-dj {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.form-dj[hidden] {
  display: none;
}

.form-event[hidden] {
  display: none;
}

/* QR visit: the contact rows end the form, so Submit gets the same 22px gap
   it has after the notes box on the full form (12px row margin + 10px). */
.form-card--qr button[type="submit"] {
  margin-top: 10px;
}

.form-dj__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.form-dj__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-dj__name {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
}

/* The card is teal, so the teal primary button disappeared into it. Same
   treatment as buttons on the teal sections (.split--teal). */
.form-card .btn-primary {
  background: var(--ink);
  color: #ffffff;
}

.form-card .btn-primary:hover {
  background: #262626;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 16px;
  font-weight: 600;
  color: #16130f;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 14px;
  color: #16130f;
  background: #ffffff;
  border: 1px solid #d8cdb9;
  border-radius: 8px;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337c0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field--wide {
  margin-bottom: 18px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #16130f;
}

.section-heading {
  margin: 28px 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #16130f;
}

.section-heading:first-child {
  margin-top: 0;
}

.form-status {
  margin: 16px 0 0;
  font-size: 14px;
}

.form-status[data-state='ok'] {
  color: #1b6a4a;
}

.form-status[data-state='error'] {
  color: #b1302a;
}

.form-page {
  padding: 64px 0 96px;
  min-height: 70vh;
}

.form-page h1 {
  margin-bottom: 32px;
  font-size: clamp(48px, 6vw, 80px);
}

.form-page .form-card {
  max-width: 720px;
}

@media (max-width: 600px) {
  .form-row,
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 24px;
  }
}

/* ---------- Weddings page (dedicated) ---------- */

.wedding-page__intro {
  --teal-from: 62%;
}

.wedding-page__testimonials {
  padding-top: 40px;
}

.wedding-page__gallery {
  padding: 88px 0 40px;
  border-top: 1px solid var(--line-dark);
}

.wedding-page__gallery h2 {
  margin: 0 0 32px;
}

.wedding-page__cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  text-align: center;
}

.wedding-page__cta-inner .contact__blurb {
  max-width: none;
}

.wedding-page__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 600px) {
  .wedding-page__gallery {
    padding-top: 56px;
  }
  /* Tighten the gap between the photo stack and "Beyond the Music." */
  .wedding-page__intro > .split:first-child {
    padding-bottom: 32px;
  }
  .wedding-page__intro > .split + .split--teal {
    padding-top: 32px;
  }
  /* ...and pull the testimonials up closer under the enhancements photos. */
  .wedding-page__intro > .split--teal:has(.addons):not(:last-child) {
    padding-bottom: 0;
  }
  .wedding-page__intro > .split--teal:has(.addons):last-child {
    padding-bottom: 32px;
  }
  .wedding-page__testimonials .testimonials {
    margin-top: 0;
  }
}

/* ---------- Footer ---------- */

/* One row the same height as the header: logo, links, then phone/email
   stacked just left of the social icons. Wraps onto extra lines on narrow
   screens. */
.site-footer {
  border-top: 1px solid var(--line-dark);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  min-height: var(--header-h);
}

.site-footer__logo img {
  height: 44px;
  width: auto;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.site-footer__nav a {
  text-decoration: none;
}

.site-footer__end {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-footer__contact {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: #bdbdbd;
}

.site-footer__contact a {
  text-decoration: none;
  color: var(--accent);
}

.site-footer__social {
  display: flex;
  gap: 16px;
}

.site-footer__social svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .site-footer__top {
    padding: 16px 0;
  }
  .site-footer__nav {
    gap: 10px 22px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 24px;
  }
  .site-header__logo img {
    height: 44px;
  }
  .site-header .btn {
    padding: 9px 14px;
    font-size: 12px;
  }
}

/* ---------- Book page background ---------- */

/* Black-and-white photo grid fixed behind book.html, like the client portal
   login but under a much heavier black veil. assets/book-bg.js picks the grid
   (one photo on phones). The page and footer sit above it; main is see-through
   so the photos show around the form. */
.book-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--ink);
}

.book-bg__tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.book-bg__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.book-bg__slide.is-current {
  opacity: 1;
}

.book-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

.contact.book-page {
  position: relative;
  z-index: 1;
  background: transparent;
}

.book-page ~ .site-footer {
  position: relative;
  z-index: 1;
}

/* ---------- Weddings FAQ ---------- */

.wedding-page__faq {
  padding-top: 0;
}

.faq {
  max-width: 860px;
}

.faq h2 {
  margin: 0 0 32px;
}

.faq__list {
  display: grid;
  gap: 12px;
}

.faq__item {
  background: var(--paper);
  border-radius: 14px;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--accent);
}

.faq__item[open] summary::after {
  content: '\2013';
}

.faq__item p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.faq__item a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .faq__item summary {
    padding: 16px 18px;
    font-size: 16px;
  }
  .faq__item p {
    padding: 0 18px 18px;
  }
}