/* ============================================
   Moonlighting - Main Stylesheet
   ============================================

   COLOR GUIDE (edit these to match your branding):
   --primary: Brass / gold (lounge lighting)
   --secondary: Deep red / burgundy (the rose)
   --accent: Cool moonlight blue (the "80s heart")
   --dark: Near-black background
   --light: Warm ivory text
   ============================================ */

:root {
  --primary: #c9a24b;
  --primary-dark: #a3813a;
  --secondary: #8b1e3f;
  --secondary-light: #b23a5c;
  --accent: #8fb9c9;
  --dark: #0a0a0c;
  --dark-mid: #16161c;
  --dark-light: #201f26;
  --light: #f2ede3;
  --light-dim: #b8b2a6;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-script: 'Playfair Display', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1200px;
  --nav-height: 76px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--dark);
  color: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary);
}

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

ul {
  list-style: none;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}

p {
  margin-bottom: 1rem;
  color: var(--light-dim);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--light-dim);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* ---- Utility ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

/* A restrained solid accent color reads more considered than a gradient
   fill - gradient text is a strong "generated template" signal, so it's
   avoided everywhere in favor of a single confident gold. */
.text-gradient {
  color: var(--primary);
}

.text-script {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--primary);
  font-weight: 500;
}

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

/* ---- Buttons ----
   Solid gold or a thin outline, never a gradient fill - a gradient
   button is one of the fastest ways to make a page read as a generic
   template. Square corners throughout (no rounded pills) for a more
   tailored, editorial feel. */
.btn {
  display: inline-block;
  padding: 0.9rem 2.25rem;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
  text-align: center;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
}

.btn-primary:hover {
  background: transparent;
  color: var(--primary);
}

.btn-outline {
  background: transparent;
  color: var(--light);
  border: 1px solid rgba(242, 237, 227, 0.4);
}

.btn-outline:hover {
  border-color: var(--light);
  color: var(--light);
  background: rgba(242, 237, 227, 0.06);
}

.btn-small {
  padding: 0.625rem 1.5rem;
  font-size: 0.8rem;
}

/* ---- Navigation ---- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(10, 10, 12, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  border-bottom: 1px solid rgba(201, 162, 75, 0.12);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo img {
  height: 56px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  color: var(--light-dim);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--light);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links .btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: #ffffff;
  font-weight: 700;
}

.nav-links .btn::after {
  content: none;
}

/* Hamburger Menu */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--light);
  transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---- Hero Section ----
   A genuine split layout - the photo lives in its own panel and never has
   type stacked on top of it. This guarantees the subjects are never
   obscured, at any viewport size, and reads as a deliberate editorial
   layout rather than a text-on-photo template. */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-media {
  position: relative;
  overflow: hidden;
  min-height: 40vh;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: calc(var(--nav-height) + 3rem) 4rem 3rem;
  background: var(--dark);
}

.hero-tagline {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--primary);
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.hero h1 {
  margin-bottom: 1.25rem;
  color: var(--light);
}

.hero-subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--light-dim);
  font-weight: 400;
  margin-bottom: 2rem;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--light-dim);
  margin-bottom: 2.5rem;
  max-width: 460px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-media {
    height: 42vh;
    min-height: 42vh;
  }

  .hero-media img {
    object-position: center -5%;
  }

  .hero-content {
    padding: 3rem 1.75rem 3.5rem;
    align-items: flex-start;
  }
}

/* ---- Sections ---- */
.section {
  padding: 5rem 0;
}

.section-dark {
  background: var(--dark-mid);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.section-header h2 {
  margin-bottom: 0.75rem;
}

.section-header::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--primary);
  margin: 1rem auto 0;
}

/* ---- About Section (Home Page) ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 993px) {
  .about-image {
    order: 2;
  }

  .about-text {
    order: 1;
  }
}

.about-image {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--dark-light);
  border: 1px solid rgba(201, 162, 75, 0.15);
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-text h2 {
  text-align: left;
}

.about-text p {
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

/* ---- Venue Ticker ---- */
.venue-ticker {
  padding: 2.5rem 0;
  background: var(--dark-mid);
  border-top: 1px solid rgba(201, 162, 75, 0.12);
  border-bottom: 1px solid rgba(201, 162, 75, 0.12);
  overflow: hidden;
}

.venue-ticker-label {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--light-dim);
  margin-bottom: 1.25rem;
}

.venue-ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}

.venue-ticker:hover .venue-ticker-track {
  animation-play-state: paused;
}

.venue-ticker-track span {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--light);
  white-space: nowrap;
  padding: 0 1.5rem;
  border-right: 1px solid rgba(201, 162, 75, 0.3);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Video Section ---- */
/* Moonlighting's performance clips are filmed vertically (9:16) */
.video-wrapper {
  position: relative;
  padding-bottom: 177.78%;
  height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--dark-light);
  border: 1px solid rgba(201, 162, 75, 0.15);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.video-grid .video-card h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--light-dim);
  margin-top: 0.75rem;
  text-align: center;
  font-weight: 500;
}

/* ---- Listen / One-Sheet CTA row ---- */
.cta-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ---- CTA Banner ----
   A quiet, confident panel rather than a loud gradient block - a thin
   gold rule top and bottom stands in for the "banner" treatment. */
.cta-banner {
  padding: 5rem 0;
  background: var(--dark-mid);
  border-top: 1px solid rgba(201, 162, 75, 0.25);
  border-bottom: 1px solid rgba(201, 162, 75, 0.25);
  text-align: center;
}

.cta-banner h2 {
  color: var(--light);
  margin-bottom: 1rem;
}

.cta-banner p {
  color: var(--light-dim);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-banner .btn {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
}

.cta-banner .btn:hover {
  background: transparent;
  color: var(--primary);
}

/* ---- Shows Page ---- */
.shows-widget-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--dark-light);
  border-radius: 4px;
  padding: 2rem;
  border: 1px solid rgba(201, 162, 75, 0.15);
  min-height: 300px;
}

.shows-placeholder {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--light-dim);
}

.shows-placeholder h3 {
  margin-bottom: 1rem;
  color: var(--light);
}

.shows-placeholder .social-link {
  margin: 0 0.4rem;
}

.shows-placeholder code {
  display: block;
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 4px;
  margin: 1.5rem auto;
  max-width: 500px;
  font-size: 0.85rem;
  color: var(--accent);
  word-break: break-all;
}

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.testimonial-card {
  background: var(--dark-light);
  border: 1px solid rgba(201, 162, 75, 0.15);
  border-radius: 4px;
  padding: 2rem;
}

.testimonial-card blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--light);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-author img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(201, 162, 75, 0.3);
}

.testimonial-author-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--light);
}

.testimonial-author-title {
  font-size: 0.8rem;
  color: var(--light-dim);
}

/* ---- Client Logos ---- */
.client-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1rem;
}

/* White card behind every logo - several source files (Peachtree Center,
   Le Meridien, Summer Stroll) are opaque with light-colored logos, so a
   grayscale/brightness filter directly on a dark background washes them
   out to invisible. A consistent white card keeps every logo legible
   regardless of its own background or contrast. object-fit: contain +
   a generous fixed height (rather than max-height/width:auto) keeps
   square logos like Peachtree Center from being squeezed down to an
   illegible sliver next to wide rectangular ones, and gives the whole
   row real visual weight instead of reading as a cramped strip. */
.client-logos img {
  width: 100%;
  height: 110px;
  object-fit: contain;
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-logos img:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---- Occasions Grid ---- */
.occasions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}

.occasion-card {
  background: var(--dark-light);
  border: 1px solid rgba(201, 162, 75, 0.15);
  border-radius: 4px;
  padding: 1.75rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.occasion-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}

.occasion-card h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

.occasion-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* ---- Resources / Blog ---- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.resource-card {
  background: var(--dark-light);
  border: 1px solid rgba(201, 162, 75, 0.15);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
}

/* Blog thumbnails are portrait-oriented photos */
.resource-card-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--dark-mid);
}

.resource-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.resource-card-body {
  padding: 1.5rem;
}

.resource-card-body h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.resource-card-body h3 a {
  color: var(--light);
}

.resource-card-body h3 a:hover {
  color: var(--primary);
}

.resource-card-body p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.resource-read-more {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--primary);
}

/* Article page */
.article-hero {
  padding: calc(var(--nav-height) + 3rem) 0 0;
}

/* Blog hero photos are portrait-oriented, so keep the frame narrow rather than a wide banner crop */
.article-hero-image {
  aspect-ratio: 3/4;
  max-width: 420px;
  overflow: hidden;
  border-radius: 4px;
  margin: 2rem auto 0;
  border: 1px solid rgba(201, 162, 75, 0.15);
}

.article-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
}

.article-body h2 {
  font-size: 1.5rem;
  margin-top: 2.25rem;
  color: var(--primary);
}

.article-body p {
  font-size: 1.05rem;
  line-height: 1.8;
}

.article-cta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 162, 75, 0.15);
}

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 720px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 162, 75, 0.15);
}

.article-nav a {
  font-size: 0.85rem;
  color: var(--light-dim);
}

.article-nav a span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--light);
  margin-top: 0.25rem;
}

.article-nav a:hover span {
  color: var(--primary);
}

.article-nav .article-nav-next {
  text-align: right;
  margin-left: auto;
}

/* ---- EPK / Press Kit Page ---- */
.epk-hero {
  padding: calc(var(--nav-height) + 3rem) 0 3rem;
  text-align: center;
}

/* EPK Bio */
.epk-bio {
  max-width: 800px;
  margin: 0 auto;
}

.epk-bio p {
  font-size: 1.1rem;
  line-height: 1.8;
}

/* EPK Simple Layout */
.epk-simple-section {
  max-width: 900px;
  margin: 0 auto;
}

.epk-simple-section h2 {
  margin-bottom: 0.5rem;
}

.epk-section-intro {
  color: var(--light-dim);
  margin-bottom: 2rem;
}

/* EPK Photo Grid */
.epk-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.epk-photo-item {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.epk-photo-item:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
}

.epk-photo-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.epk-photo-label {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--light-dim);
  background: var(--dark-mid);
}

/* EPK Document List */
.epk-doc-list {
  list-style: none;
  max-width: 600px;
}

.epk-doc-list li {
  border-bottom: 1px solid rgba(201, 162, 75, 0.15);
}

.epk-doc-list li:first-child {
  border-top: 1px solid rgba(201, 162, 75, 0.15);
}

.epk-doc-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem;
  color: var(--light);
  transition: color 0.2s ease;
}

.epk-doc-list a:hover {
  color: var(--primary);
}

.epk-doc-list a .fa-solid:first-child {
  color: var(--accent);
  width: 20px;
  text-align: center;
}

.epk-doc-list a .fa-download {
  margin-left: auto;
  color: var(--light-dim);
  font-size: 0.85rem;
}

.epk-doc-list span {
  flex: 1;
}

.epk-doc-list em {
  font-style: normal;
  color: var(--light-dim);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

/* ---- Contact Page ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info h3 {
  margin-bottom: 1rem;
}

.contact-info p {
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-detail-item span {
  font-size: 0.95rem;
  color: var(--light-dim);
}

.contact-social {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-dim);
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(201, 162, 75, 0.15);
}

.social-link:hover {
  background: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}

/* FAQ Accordion */
.faq-list {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.faq-item {
  border-bottom: 1px solid rgba(201, 162, 75, 0.15);
}

.faq-item summary {
  padding: 1.25rem 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--light);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 1.25rem;
  font-size: 0.95rem;
}

/* Contact Form */
.contact-form {
  background: var(--dark-light);
  border-radius: 4px;
  padding: 2.5rem;
  border: 1px solid rgba(201, 162, 75, 0.15);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}

.form-group.form-checkbox label {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--light-dim);
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--light);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(201, 162, 75, 0.2);
  border-radius: 4px;
  color: var(--light);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-submit {
  margin-top: 0.5rem;
}

.form-submit .btn {
  width: 100%;
}

.form-submit .btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.form-status {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
  display: none;
  font-size: 0.9rem;
}

.form-status.success {
  display: block;
  background: rgba(143, 185, 201, 0.12);
  border: 1px solid rgba(143, 185, 201, 0.3);
  color: var(--accent);
}

.form-status.error {
  display: block;
  background: rgba(139, 30, 63, 0.15);
  border: 1px solid rgba(139, 30, 63, 0.4);
  color: var(--secondary-light);
}

/* ---- Footer ---- */
.footer {
  background: var(--dark-mid);
  border-top: 1px solid rgba(201, 162, 75, 0.12);
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

.footer-brand h3 {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.footer-brand p {
  font-size: 0.9rem;
  max-width: 300px;
}

.footer-nav h4,
.footer-social h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light);
  margin-bottom: 1rem;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav a {
  color: var(--light-dim);
  font-size: 0.9rem;
}

.footer-nav a:hover {
  color: var(--light);
}

.footer-social-links {
  display: flex;
  gap: 0.75rem;
}

.footer-bottom {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 162, 75, 0.12);
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--light-dim);
  margin-bottom: 0;
}

/* ---- Page Header (inner pages) ---- */
.page-header {
  padding: calc(var(--nav-height) + 3rem) 0 3rem;
  text-align: center;
  background: var(--dark-mid);
  border-bottom: 1px solid rgba(201, 162, 75, 0.12);
}

.page-header h1 {
  margin-bottom: 0.75rem;
}

.page-header p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ---- Split Page Header ----
   Same language as the home hero: photo in its own full-height panel
   (never cropped down to a thin strip) and text in its own panel, so
   there's real presence on both sides instead of a shallow image band. */
.split-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 65vh;
}

.split-header-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.split-header-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.split-header-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: calc(var(--nav-height) + 3rem) 4rem 3rem;
  background: var(--dark-mid);
  border-bottom: 1px solid rgba(201, 162, 75, 0.12);
}

.split-header-content .split-header-eyebrow-word {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--primary);
  margin-bottom: 1rem;
}

.split-header-content h1 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  text-transform: none;
  color: var(--light);
  margin-bottom: 1.25rem;
  max-width: 420px;
}

.split-header-content p {
  font-size: 1.05rem;
  color: var(--light-dim);
  max-width: 420px;
}

@media (max-width: 900px) {
  .split-header {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .split-header-media {
    min-height: 50vh;
  }

  .split-header-content {
    padding: 3rem 1.75rem 3.5rem;
  }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-text h2 {
    text-align: center;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(10, 10, 12, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(201, 162, 75, 0.12);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section {
    padding: 3.5rem 0;
  }

  .article-nav {
    flex-direction: column;
  }

  .article-nav .article-nav-next {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .hero-buttons,
  .cta-links {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn,
  .cta-links .btn {
    width: 100%;
    max-width: 280px;
  }
}