/*
  JBS Engineering Technical Services, Inc.
  Site stylesheet — fluid, responsive, accessible.
  Palette derived from the company's original brand CSS (gold #d2aa3f / tan #9a895c),
  adjusted for WCAG AA contrast.
*/

/* ---------- Design tokens ---------- */
:root {
  --color-ink: #23231f;
  --color-ink-soft: #2f2e28;
  --color-gold: #d2aa3f;
  --color-gold-dark: #b48e2a;
  --color-link: #8a6a1e;
  --color-tan: #9a895c;
  --color-text: #3a382f;
  --color-muted: #6b6558;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f5ef;
  --color-border: #e7e2d4;
  --color-white: #ffffff;
  --color-invert: #f5f2ea;
  --color-success: #2f6f4e;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --container-max: 1200px;
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(35, 35, 31, 0.12);
  --shadow-md: 0 6px 20px rgba(35, 35, 31, 0.16);
  --shadow-lg: 0 18px 40px rgba(35, 35, 31, 0.22);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --transition: 200ms ease;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

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

img {
  background-color: var(--color-bg-alt);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-gold-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }

p { margin: 0 0 var(--space-2); }

ul, ol {
  padding-left: 1.25rem;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 1000;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0.5rem;
  color: var(--color-white);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-ink);
}

.btn-primary:hover {
  background: var(--color-gold-dark);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--color-invert);
  border-color: currentColor;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-invert);
}

.btn-dark {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn-dark:hover {
  background: var(--color-ink-soft);
  color: var(--color-white);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* ---------- Skip / layout helpers ---------- */
.section {
  padding-block: var(--space-5);
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-dark {
  background: var(--color-ink);
  color: var(--color-invert);
}

.section-dark h2,
.section-dark h3 {
  color: var(--color-white);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-4);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-1);
}

.section-dark .eyebrow {
  color: var(--color-gold);
}

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
  gap: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-ink);
}

.brand img {
  height: 46px;
  width: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-ink);
}

.brand-text span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.nav-toggle svg { width: 22px; height: 22px; }

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.primary-nav a {
  display: block;
  padding: 0.7rem 0.85rem;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  background: var(--color-bg-alt);
  color: var(--color-gold-dark);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-panel {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: none;
  z-index: 50;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  display: block;
}

.nav-dropdown-panel a {
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .primary-nav.is-open {
    display: block;
  }

  .primary-nav > ul {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
  }

  .nav-dropdown-panel {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
  }

  .nav-dropdown.is-open .nav-dropdown-panel {
    display: block;
  }
}

/* ---------- Hero / Carousel ---------- */
.carousel {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-white);
}

.carousel-track {
  display: flex;
  transition: transform 600ms ease;
  will-change: transform;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(400px, 46vw, 480px);
  overflow: hidden;
}

/* Layered with position:absolute, not CSS Grid stacking (grid-area:1/1).
   A grid item's percentage height resolves to "auto" against the indefinite
   grid row here, so a square source image sizes itself from its own
   intrinsic ratio -- on a 1440px-wide viewport a 1000x1000 image would
   render 1440px tall and balloon the whole slide to a perfect square.
   Absolute positioning against the slide's own min-height sidesteps that. */
.carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 19, 15, 0.88) 0%, rgba(20, 19, 15, 0.35) 55%, rgba(20, 19, 15, 0.15) 100%);
}

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-3) var(--space-3) var(--space-4);
  max-width: 760px;
}

.carousel-caption .eyebrow {
  color: var(--color-gold);
}

.carousel-caption h2,
.carousel-caption p {
  color: var(--color-white);
}

.carousel-caption h2 {
  margin-bottom: 0.6rem;
}

.carousel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin: 0.8rem 0 1.2rem;
  font-size: 0.92rem;
  color: var(--color-invert);
}

.carousel-meta strong {
  color: var(--color-gold);
}

.carousel-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  /* Arrows sit near the top of the image, not vertically centered across the
     whole slide -- the caption block is bottom-aligned and can run tall
     (title + stats + description + button), so centering here would put
     the arrows on top of the text. */
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-3) var(--space-2) 0;
  pointer-events: none;
}

.carousel-arrow {
  pointer-events: auto;
  background: rgba(20, 19, 15, 0.55);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}

.carousel-arrow:hover {
  background: var(--color-gold);
  color: var(--color-ink);
  border-color: var(--color-gold);
}

.carousel-arrow svg { width: 22px; height: 22px; }

@media (max-width: 700px) {
  /* On narrow screens the caption (title + stats + description + button)
     fills most of the shorter slide height, leaving no clear band for
     the arrows. Swipe gestures and the dot indicators already provide
     full navigation on touch devices, so just hide the arrow buttons. */
  .carousel-arrow {
    display: none;
  }

  /* The stat pills are also shown on the linked project page itself --
     dropping them here on small screens keeps the caption block short
     enough to fit without clipping the title against the slide's
     min-height, especially on the content-heaviest (first) slide. */
  .carousel-meta {
    display: none;
  }

  .carousel-caption {
    padding-block: var(--space-2) var(--space-3);
  }

  .carousel-caption p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.carousel-dots {
  position: absolute;
  z-index: 3;
  bottom: var(--space-2);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.carousel-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.carousel-dots button[aria-selected="true"] {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

.carousel-playtoggle {
  position: absolute;
  z-index: 3;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(20, 19, 15, 0.55);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Compact carousel variant -- embedded inline in page content (not a
   full-bleed viewport hero). Used for the aerial-progression carousel on
   the turnpike-sr50-minneola project page. Fixed aspect-ratio instead of
   viewport-relative min-height, boxed with rounded corners since it sits
   inside .container rather than spanning the full page width. */
.carousel--compact {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.carousel--compact .carousel-slide {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.carousel--compact .carousel-caption {
  max-width: none;
}

/* Simple page hero (interior pages)
   NOTE: layered with position:absolute, not CSS Grid stacking (grid-area:1/1).
   A grid item's percentage height resolves to "auto" against the indefinite
   grid row here, so a square source image would size itself from its own
   intrinsic ratio and balloon the whole hero to (viewport width)px tall.
   Absolute positioning against min-height sidesteps that entirely. */
.page-hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  min-height: 320px;
}

.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,19,15,0.92) 0%, rgba(20,19,15,0.55) 60%, rgba(20,19,15,0.35) 100%);
}

.page-hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-block: var(--space-4);
}

.page-hero-inner .eyebrow { color: var(--color-gold); }
.page-hero-inner h1 { color: var(--color-white); margin-bottom: 0.4rem; }

.breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0;
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: var(--color-tan);
}

.breadcrumbs a {
  color: var(--color-invert);
  opacity: 0.85;
}

.page-hero .breadcrumbs a { color: var(--color-white); }
.breadcrumbs [aria-current="page"] { color: var(--color-gold); font-weight: 600; }

/* ---------- Cards / Grids ---------- */
.grid {
  display: grid;
  gap: var(--space-3);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.card-body h3 {
  margin-bottom: 0.1rem;
}

.card-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  background: var(--color-gold-dark);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  width: fit-content;
}

.card-tag.status-complete {
  background: var(--color-success);
}

.card-stats {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.card-cta {
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  text-align: center;
}

.stats-strip .stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.4rem);
  color: var(--color-gold);
  display: block;
}

.stats-strip .stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-tan);
}

/* ---------- Two column layout ---------- */
.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .split.reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .split.reverse > :first-child {
    order: 2;
  }
}

.split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* ---------- Team ---------- */
.team-card {
  text-align: center;
}

.team-photo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  width: 160px;
  margin: 0 auto var(--space-2);
  border: 4px solid var(--color-bg-alt);
  box-shadow: var(--shadow-sm);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-role {
  color: var(--color-gold-dark);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

/* ---------- Tables (awards) ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

table.awards {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

table.awards caption {
  text-align: left;
  padding: var(--space-2);
  font-weight: 700;
  background: var(--color-bg-alt);
}

table.awards th,
table.awards td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

table.awards thead th {
  background: var(--color-ink);
  color: var(--color-white);
  position: sticky;
  top: 0;
}

table.awards tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

/* ---------- Logo strip ---------- */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  align-items: center;
}

.logo-strip .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  height: 96px;
}

.logo-strip img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* ---------- Accordion (services prequalifications) ---------- */
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.accordion-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1rem 1.2rem;
  background: var(--color-bg-alt);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.accordion-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-gold-dark);
  line-height: 1;
}

.accordion-item[open] summary::after {
  content: "\2212";
}

.accordion-item .accordion-body {
  padding: 1rem 1.2rem 1.3rem;
}

/* ---------- Video embed ---------- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-ink);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Callout / CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--color-ink) 0%, #3a3627 100%);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.cta-band h2 { color: var(--color-white); margin-bottom: 0.3rem; }
.cta-band p { color: var(--color-invert); margin: 0; }

/* ---------- Contact blocks ---------- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.contact-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.contact-list svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--color-gold-dark);
}

/* ---------- Lightbox (project gallery photo viewer) ---------- */
.lightbox-trigger {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  background: none;
}

.lightbox-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.lightbox-trigger:hover img,
.lightbox-trigger:focus-visible img {
  transform: scale(1.04);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 10, 8, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-figure {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
}

.lightbox-figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--color-ink);
}

.lightbox-caption {
  color: var(--color-invert);
  text-align: center;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(20, 19, 15, 0.65);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 20px;
  height: 20px;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--color-gold);
  color: var(--color-ink);
  border-color: var(--color-gold);
}

.lightbox-close {
  top: -3.25rem;
  right: 0;
}

.lightbox-prev {
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
  }
  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 0.5rem;
    transform: none;
  }
  .lightbox-prev {
    left: 0.5rem;
  }
  .lightbox-next {
    right: 0.5rem;
  }
}

/* ---------- 404 ---------- */
.error-hero {
  text-align: center;
  padding-block: var(--space-5);
}

.error-code {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 3rem + 3vw, 6rem);
  color: var(--color-gold);
  margin: 0;
  line-height: 1;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-invert);
}

.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-block: var(--space-5);
}

.footer-grid h2,
.footer-grid h3 {
  color: var(--color-white);
  font-size: 1.05rem;
}

.footer-brand img {
  height: 44px;
  margin-bottom: 0.8rem;
}

.footer-grid a {
  color: var(--color-invert);
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-row a:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}

.social-row svg { width: 18px; height: 18px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: var(--space-2);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.footer-bottom a { color: var(--color-invert); }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.flow > * + * { margin-top: var(--space-2); }

@media print {
  .site-header, .site-footer, .carousel-controls, .carousel-dots, .carousel-playtoggle {
    display: none;
  }
}