/* ==================== */
/* TK Media — Design tokens */
/* ==================== */
:root {
  /* Brand palette — source of truth for all color values */
  --color-forest: #1C2B21;
  --color-forest-rgb: 28, 43, 33;
  --color-linen: #F4F1EA;
  --color-linen-rgb: 244, 241, 234;
  --color-sage: #7FA37A;
  --color-sage-rgb: 127, 163, 122;
  --color-sage-dim: #4F6B4A;
  --color-sage-light: #9BC496;

  --bg: var(--color-forest);
  --bg-alt: #213228;
  --bg-card: #283D2E;
  --border: #34483A;
  --text: var(--color-linen);
  --text-dim: #A3AC9C;
  --accent: var(--color-sage);
  --accent-dim: var(--color-sage-dim);
  --accent-hover: var(--color-sage-light);
  --accent-contrast: var(--color-forest);
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container-width: 1180px;
  --radius: 10px;
}

/* ==================== */
/* Reset */
/* ==================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Visually hidden but still readable by screen readers / present in the
   DOM for document structure (e.g. a page's real <h1> when the visible
   design doesn't call for a big on-page title). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================== */
/* Typography helpers */
/* ==================== */
.eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.2em;
  color: var(--accent);
  font-size: 0.95rem;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 20px;
}

.section-lead {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 620px;
  margin-bottom: 40px;
}

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

/* ==================== */
/* Buttons */
/* ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

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

.btn-outline {
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-small { padding: 12px 22px; font-size: 0.95rem; }
.btn-full { width: 100%; }

/* ==================== */
/* Header */
/* ==================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(var(--color-forest-rgb), 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  background: rgba(var(--color-forest-rgb), 0.92);
  border-bottom-color: var(--border);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 84px;
  gap: 20px;
  padding-inline: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  grid-column: 1;
  justify-self: start;
}
.brand-logo {
  height: 44px;
  width: auto;
}
.site-header .brand-logo {
  height: 50px;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

.main-nav {
  grid-column: 2;
  justify-self: center;
}
.main-nav ul {
  display: flex;
  gap: 32px;
}
.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.2s ease;
  position: relative;
}
.main-nav a:hover { color: var(--text); }

.header-cta {
  grid-column: 3;
  justify-self: end;
}

.nav-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  margin: 0;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==================== */
/* Hero */
/* ==================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 80px;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 9.5vw, 5rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-bottom: 24px;
}

.hero-subtitle {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 560px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid var(--border);
  border-radius: 999px;
  z-index: 2;
}
.scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 20px; }
}

/* ==================== */
/* Sections shared */
/* ==================== */
section {
  padding: 110px 0;
  position: relative;
}
.about { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* work.html has no hero above it, so this section sits directly under the
   fixed header — give it enough top padding to clear it at every breakpoint. */
.work-page { padding-top: 130px; }

/* Video/Photo toggle — page-level nav between work.html and
   photography.html (separate from the header nav). Active state is
   hardcoded per page in the HTML, not JS-driven. */
.page-toggle {
  display: flex;
  width: fit-content;
  gap: 6px;
  margin: 0 auto 56px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}
.page-toggle-option {
  padding: 14px 40px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: background 0.2s ease, color 0.2s ease;
}
.page-toggle-option:hover { color: var(--text); }
.page-toggle-option.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ==================== */
/* About */
/* ==================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.stat-label {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 20px;
}
.section-header-row .eyebrow,
.section-header-row .section-title {
  margin-bottom: 0;
}
.section-header-row .eyebrow {
  margin-bottom: 8px;
}
.section-header-cta {
  flex-shrink: 0;
  padding: 18px 36px;
  font-size: 1.1rem;
  position: relative;
  left: -10px;
  top: 8px;
}

/* ==================== */
/* Portfolio */
/* ==================== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.portfolio-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.portfolio-item:hover { transform: translateY(-6px); border-color: var(--accent-dim); }
.portfolio-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.portfolio-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #24352A 0%, #182219 60%),
    repeating-linear-gradient(45deg, rgba(var(--color-linen-rgb), 0.03) 0 2px, transparent 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-linen-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.play-icon::after {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent rgba(var(--color-linen-rgb), 0.7);
  margin-left: 4px;
}
.portfolio-item:hover .play-icon {
  border-color: var(--accent);
  background: rgba(var(--color-sage-rgb), 0.12);
}
.portfolio-item:hover .play-icon::after { border-left-color: var(--accent); }

.portfolio-caption {
  height: 120px;
  padding: 18px 20px 22px;
  overflow: hidden;
}
.portfolio-caption h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #000;
}
.portfolio-caption p {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 4px;
}

/* ==================== */
/* Video modal (YouTube playback) */
/* ==================== */
body.modal-open {
  overflow: hidden;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.video-modal-content {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(var(--color-linen-rgb), 0.3);
  border-radius: 50%;
  color: var(--color-linen);
  font-size: 1.5rem;
  line-height: 1;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.video-modal-close:hover { background: rgba(0, 0, 0, 0.8); border-color: var(--accent); color: var(--accent); }
.video-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.video-modal-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
}

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

/* Photo gallery modal (photography.html) — reuses .video-modal/-backdrop/
   -content/-close above for identical open/close chrome and interaction;
   this is the only piece specific to photos, since a gallery widget sizes
   itself rather than needing a fixed 16:9 box like the video iframe does. */
.photo-modal-frame-wrap {
  width: 100%;
  min-height: 460px;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ==================== */
/* Category tabs (work.html) */
/* ==================== */
.category-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.category-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 12px 26px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.category-tab:hover { border-color: var(--accent-dim); color: var(--text); }
.category-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.category-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.category-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 64px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.category-empty-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.category-empty-text {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 360px;
}

/* ==================== */
/* Photography (photography.html) */
/* ==================== */

/* photography.html has no hero above it, same as work.html. Bottom padding
   is trimmed since this section is just the toggle — the first
   .photography-section right after it supplies its own spacing/border. */
.photography-page { padding-top: 130px; padding-bottom: 40px; }

/* One .photography-section per photoSections entry (see photos.js) —
   rendered by initPhotographyPage() in script.js. The border gives each
   tag's section a clear separation from the one before it, and scales to
   however many entries the config ends up with. */
.photography-section {
  border-top: 1px solid var(--border);
}

/* The section heading is a real <button> (built in initPhotographyPage())
   so the whole header cluster — heading + "View Full Gallery" cta — is one
   click target that opens that section's photo modal (see #photo-modal). */
.photography-section-header {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.photography-section-header:hover .section-title,
.photography-section-header:focus-visible .section-title,
.photography-section-header:hover .photography-section-cta,
.photography-section-header:focus-visible .photography-section-cta {
  color: var(--accent);
}
.photography-section-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.photography-section-cta {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s ease;
}
/* Base (mobile-inclusive) header spacing — heading-to-cta stays tight
   since they read as one cluster, then a clear gap before the gallery
   widget below. Desktop overrides the exact values further down. */
.photography-section .section-title {
  margin-bottom: 8px;
}
.photography-section-header {
  margin-bottom: 24px;
}

/* The Gallery Widget renders its own internal look, themed via the
   themeProps passed to cloudinary.galleryWidget() in script.js (not
   reachable from this stylesheet) — this just styles the outer wrapper so
   it doesn't look like a bare, unstyled box before/while each widget
   instance mounts. */
.photo-gallery {
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}

/* Desktop only (mobile keeps the full-width stacked layout above,
   untouched): lay sections out 2-per-row, wrapping to further rows of 2
   automatically as more entries are added to photos.js. Each section's
   width is fixed at exactly half the row (minus its share of the gap) via
   flex-basis, with grow AND shrink both off — so a section is always sized
   as if it had a neighbor next to it. A lone section on an unfilled final
   row stays that same fixed size and leaves the rest of the row empty,
   rather than stretching to fill it. Each card's own .container
   padding/max-width is neutralized since the flex gap + the flex parent's
   own gutters now do that job. */
@media (min-width: 768px) {
  #photography-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 56px 40px;
    max-width: var(--container-width);
    margin-inline: auto;
    padding: 70px 24px 110px;
  }
  .photography-section {
    flex: 0 0 calc(50% - 20px); /* 20px = half the 40px column gap */
    padding: 28px 0 0;
  }
  .photography-section .container {
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
  }
  .photography-section .section-title {
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    margin-bottom: 10px;
  }
  .photography-section-header {
    margin-bottom: 22px;
  }
  .photo-gallery {
    min-height: 440px;
  }
}

/* ==================== */
/* Services */
/* ==================== */
.services { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.service-card:hover { border-color: var(--accent-dim); transform: translateY(-4px); }

.service-icon {
  width: 52px;
  height: 52px;
  color: var(--accent);
  margin-bottom: 20px;
}
.service-icon svg { width: 100%; height: 100%; }

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.service-card p { color: var(--text-dim); font-size: 0.94rem; }

.services-carousel {
  position: relative;
}

/* Dot indicators: hidden on desktop (plain grid, no carousel behavior).
   Shown only inside the mobile breakpoint below, where .services-grid
   becomes a horizontally-snapping single-card track. One dot per card is
   generated in JS, so this only styles whatever count actually exists. */
.services-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
}
.services-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
}
.services-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.services-dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s ease, transform 0.2s ease;
}
.services-dot:hover .services-dot-inner { background: var(--accent-dim); }
.services-dot.is-active .services-dot-inner {
  background: var(--accent);
  transform: scale(1.35);
}

/* ==================== */
/* Contact */
/* ==================== */
.contact-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}
.contact-details li { display: flex; flex-direction: column; gap: 2px; }
.contact-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-details a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.contact-details a:hover { color: var(--accent); }

.social-links {
  display: flex;
  gap: 12px;
}
.social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row label {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.form-row input,
.form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--text);
  resize: vertical;
  transition: border-color 0.2s ease;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-status {
  font-size: 0.9rem;
  color: var(--accent);
  min-height: 1.2em;
}
.form-status.is-error {
  color: #D97066;
}

.contact-success {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.1rem;
}

/* ==================== */
/* Footer */
/* ==================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 50px;
  background: var(--bg-alt);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 36px;
}
.footer-nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--text-dim);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-block: 22px;
}
.footer-bottom p {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

/* ==================== */
/* Reveal-on-scroll */
/* ==================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
  .video-modal { transition: none; }
}

/* ==================== */
/* Responsive */
/* ==================== */
@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .main-nav.open {
    display: block;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: rgba(var(--color-forest-rgb), 0.98);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px 26px;
  }
  .main-nav.open ul {
    flex-direction: column;
    gap: 4px;
  }
  .main-nav.open a {
    display: block;
    padding: 14px 4px;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border);
  }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  /* The video still shows its full frame as a 16:9 normal-flow band (so it
     isn't cropped). Only the headline/subtitle overlay it: .hero-text is
     taken out of .hero-content's normal flow (position:absolute) and pulled
     up by exactly the video's own rendered height, landing on top of it —
     same "negative offset matching the video's height" math as the overlay
     scrim below. .hero-actions is deliberately NOT part of that overlay —
     with .hero-text removed from the flow, .hero-actions is .hero-content's
     only normal-flow child, so it renders immediately after the video in
     ordinary page flow, completely unaffected by however tall the overlaid
     text turns out to be — never on top of the footage. */
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 40px;
  }

  .hero-video {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: contain;
    background: var(--bg);
    margin-top: 84px;
  }

  .hero-overlay {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-top: calc(-100vw * 9 / 16);
    z-index: 1;
    pointer-events: none;
  }

  .scroll-cue {
    /* A full-viewport-height affordance that doesn't apply once the hero is
       a compact video band + text/button block. */
    display: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    padding-top: 24px; /* space between the video's bottom edge and the buttons below it */
  }

  .hero-text {
    position: absolute;
    left: 24px;
    right: 24px;
    top: calc(-100vw * 9 / 16); /* video's top edge */
    height: calc(100vw * 9 / 16); /* matches the video's own rendered height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centers the title+subtitle block vertically within the video */
    padding: 24px 0; /* keeps a minimum inset from the video's top/bottom edges if the text block ever grows tall */
    box-sizing: border-box;
  }

  .hero-title { margin-bottom: 10px; }
  .hero-subtitle { margin-bottom: 0; }

  /* Selected Work teaser: always 3 columns / 2 rows on mobile (6 videos),
     overriding the narrower breakpoints' column collapse below. Scoped to
     the homepage teaser grid specifically (by id) so work.html's category
     grids are unaffected. Slight negative margin lets the grid bleed a
     little wider than the section's usual side padding so each thumbnail
     gets a bit more room. */
  #teaser-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-inline: -8px;
    width: calc(100% + 16px);
  }
  /* Source YouTube thumbnails range from tight close-ups to wide establishing
     shots, so cropping to the video's native 16:9 barely trims anything and
     the framing reads as inconsistent card-to-card. Cropping to a tighter
     4:3 box with a fixed center object-position zooms every thumbnail in
     toward its middle by the same amount, so the grid reads as one
     consistent set rather than each card looking framed differently. */
  #teaser-grid .portfolio-media {
    aspect-ratio: 4 / 3;
  }
  #teaser-grid .portfolio-thumb {
    object-fit: cover;
    object-position: 50% 50%;
  }
  #teaser-grid .portfolio-caption {
    height: auto;
    padding: 12px 10px 14px;
  }
  #teaser-grid .portfolio-caption h3 {
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #teaser-grid .portfolio-caption p {
    font-size: 0.72rem;
    line-height: 1.4;
    margin-top: 4px;
  }
}

@media (max-width: 620px) {
  section { padding: 80px 0; }
  .stats-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }

  /* Services carousel: swap the grid for a horizontally snapping single-card
     track, navigable by swipe or by tapping a dot below. Desktop keeps its
     plain grid — see .services-grid/.service-card/.services-dots base rules
     near the Services section, which this only overrides at this breakpoint. */
  .services-carousel { position: relative; }
  .services-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: none;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .service-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .services-dots { display: flex; }
}