/* ==========================================================================
   7 WAVES MEDIA CO. — MAIN STYLESHEET
   ==========================================================================
   This file controls how the whole website looks: colors, fonts, spacing,
   layout, and animations.

   TIP FOR BEGINNERS:
   - Colors are defined once at the top under ":root" and used everywhere.
     Change a color there and it updates across the entire site.
   - The file is organized into labeled sections (search for "==" comments).
   - You do not need to understand all of this to run the site. See
     README.txt for the specific things you'll actually want to edit.
   ========================================================================== */

/* ==========================================================================
   0. CUSTOM FONTS
   ========================================================================== */
/* LP Horizont Caps -- the bold display font used for "7 WAVES" on the logo.
   Applied sitewide to headings/titles (h1-h4, section headings, hero
   titles, card titles, footer/nav brand wordmark). Caps-only font: it has
   no real lowercase, so lowercase letters render as capitals. */
@font-face {
  font-family: "Manche SemiBold Expanded";
  src: url("../fonts/MancheSemiBoldExpanded.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Rebelton -- the font used for "MEDIA CO." on the logo. Applied to short
   UI text: nav links, buttons, and small uppercase labels -- NOT long-form
   body paragraphs, since it's also a caps-only font and would make
   paragraph text read as shouty all-caps. */
@font-face {
  font-family: "Manche Light Expanded";
  src: url("../fonts/MancheLightExpanded.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. COLOR PALETTE & GLOBAL VARIABLES
   ========================================================================== */
:root {
  /* 7 WAVES MEDIA CO. — white / black / gold, mosaic-tile inspired.
     The site's flat canvas (page background, cards, nav, footer, forms)
     uses the --color-paper-* / --color-ink-* tokens below. Full-bleed
     video/photo moments (the homepage hero, video/photo modals, the
     photo lightbox, the mobile menu takeover) intentionally keep the
     original dark --color-black / --color-white tokens so text stays
     legible sitting directly on top of dark-scrimmed media, the same
     way a video player's own controls stay dark regardless of the page
     around it. Both sets are kept so each part of the site references
     the one that actually matches what's behind it. */
  --color-paper: #f6f5f0;          /* primary page background */
  --color-paper-soft: #efeee7;     /* card / section background */
  --color-paper-elevated: #e8e6db; /* slightly raised surfaces (popovers) */
  --color-ink: #141414;            /* primary text on light backgrounds */
  --color-ink-muted: #5c5a54;      /* secondary / muted text on light backgrounds */
  --color-hairline: rgba(20, 20, 20, 0.1); /* subtle border on light backgrounds */

  /* Dark tokens -- reserved for text/UI sitting directly on video, photos,
     or other dark media (see note above). Not used for the page canvas. */
  --color-black: #0a0a0a;
  --color-black-soft: #121212;
  --color-black-elevated: #181818;
  --color-white: #f6f5f1;
  --color-white-muted: #b9b7ae;
  --color-line: rgba(246, 245, 241, 0.1);

  /* Gold accent -- the "special spots" color, used everywhere (light and
     dark contexts alike) */
  --color-gold: #d19102;
  --color-gold-light: #e8a93a;     /* lighter gold for hovers/highlights */
  --color-gold-dim: #a97402;       /* darker gold for borders/dividers */

  /* Typography
     --font-display: titles/headings (h1-h4, section headings, hero
       titles, card titles, brand wordmark) -- matches the logo's "7 WAVES".
     --font-body: long-form paragraph text (bios, descriptions) -- stays
       readable, not a display font.
     --font-label: short UI text (nav links, buttons, small caps labels)
       -- matches the logo's "MEDIA CO." */
  --font-display: "Manche SemiBold Expanded", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Manche Light Expanded", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* Layout */
  --container-max: 1520px;
  --header-height: 88px;

  /* Motion */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 0.6s;
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 450;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

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

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-sm);
  }
}

section {
  position: relative;
}

/* Reusable section padding */
.section {
  padding: var(--space-xl) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-lg) 0;
  }
}

/* Eyebrow / kicker label used above section headings -- plain uppercase
   gold text, no leading dash/rule (removed on purpose to look less like
   the small-line-plus-label kicker treatment other studio sites use). */
.eyebrow {
  /* Removed sitewide per request -- no more small kicker labels above
     section headings, on any page. */
  display: none;
}

.section-heading {
  font-size: clamp(1.32rem, 2.7vw, 2.04rem);
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.section-sub {
  max-width: 600px;
  color: var(--color-ink-muted);
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 450;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Gold gradient text accent */
.text-gold {
  color: var(--color-gold);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all var(--duration-base) var(--ease-cinematic);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-black);
  border: 1px solid var(--color-gold);
}

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

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}

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

.btn-gold-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.btn-gold-outline:hover {
  background: var(--color-gold);
  color: var(--color-black);
}

.btn-arrow {
  transition: transform var(--duration-base) var(--ease-cinematic);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.6rem 0;
  transition: padding var(--duration-base) var(--ease-cinematic),
    box-shadow var(--duration-base) var(--ease-cinematic);
  background-color: rgba(246, 245, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-hairline);
}

.site-header.is-scrolled {
  padding: 1rem 0;
  box-shadow: 0 4px 24px rgba(20, 20, 20, 0.05);
}

/* Homepage-only: floats transparent over the hero video like it used to,
   with light-on-dark text, then becomes a solid dark bar once scrolled
   past the hero -- instead of the light bar every other page uses (those
   pages have no video behind the header, so a light bar reads fine from
   the very first frame). */
.site-header.is-dark {
  background-color: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Once scrolled past the hero, the homepage nav switches to the same
   light bar every other page uses -- off-white background, black text --
   instead of staying dark. Only the un-scrolled, transparent-over-hero
   state (below) keeps the white-on-clear look. */
.site-header.is-dark.is-scrolled {
  background-color: rgba(246, 245, 240, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-hairline);
  box-shadow: 0 4px 24px rgba(20, 20, 20, 0.05);
}

.site-header.is-dark .brand {
  color: var(--color-white);
}

.site-header.is-dark .nav-links a,
.site-header.is-dark .nav-cta,
.site-header.is-dark .nav-dropdown-trigger {
  color: var(--color-white-muted);
}

.site-header.is-dark .nav-links a:hover,
.site-header.is-dark .nav-links a.active,
.site-header.is-dark .nav-cta:hover,
.site-header.is-dark .nav-dropdown-trigger:hover,
.site-header.is-dark .nav-dropdown-trigger.is-current {
  color: var(--color-white);
}

.site-header.is-dark .nav-toggle span {
  background: var(--color-white);
}

/* Scrolled overrides -- swap every white-on-dark color above for the
   normal light-bar ink colors, now that the bar itself is off-white. */
.site-header.is-dark.is-scrolled .brand {
  color: var(--color-ink);
}

.site-header.is-dark.is-scrolled .brand-name-top span {
  color: var(--color-gold);
}

.site-header.is-dark.is-scrolled .brand-name-sub {
  color: var(--color-ink-muted);
}

.site-header.is-dark.is-scrolled .nav-links a,
.site-header.is-dark.is-scrolled .nav-cta,
.site-header.is-dark.is-scrolled .nav-dropdown-trigger {
  color: var(--color-ink-muted);
}

.site-header.is-dark.is-scrolled .nav-links a:hover,
.site-header.is-dark.is-scrolled .nav-links a.active,
.site-header.is-dark.is-scrolled .nav-cta:hover,
.site-header.is-dark.is-scrolled .nav-dropdown-trigger:hover,
.site-header.is-dark.is-scrolled .nav-dropdown-trigger.is-current {
  color: var(--color-ink);
}

.site-header.is-dark.is-scrolled .nav-toggle span {
  background: var(--color-ink);
}

/* When the mobile menu is open, drop the header's backdrop-filter. A
   backdrop-filter (or transform/filter) on an ancestor creates a new
   "containing block" for position:fixed children in modern browsers --
   so with it active, .main-nav's fixed/inset:0 was being measured against
   the small header box instead of the actual viewport, which is why the
   full-screen mobile menu only looked right at the very top of the page
   (before is-scrolled/backdrop-filter kicked in) and broke once scrolled. */
.site-header.nav-open {
  backdrop-filter: none;
}

/* The homepage's scrolled state (.is-dark.is-scrolled) re-declares its own
   backdrop-filter with 3 classes of specificity, which beat the 2-class
   .nav-open rule above and silently brought the blur back once you'd
   scrolled -- breaking the full-screen mobile menu's fixed positioning
   exactly like the comment above describes, just only past the fold on
   the homepage. This 4-class rule wins over both. */
.site-header.is-dark.is-scrolled.nav-open {
  backdrop-filter: none;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  color: var(--color-ink);
}

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

/* Two-line wordmark, matching the logo's own typographic split: "7 Waves"
   as the main line, "Media Co." as a small caps line underneath. */
.brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}

.brand-name-top {
  text-transform: uppercase;
  /* Compensates for the trailing letter-spacing inherited from .brand so
     the visible glyphs -- not the invisible space after the last letter --
     are what gets centered by .brand-name's align-items: center. */
  margin-right: -0.22em;
}

.brand-name-top span {
  color: var(--color-gold);
}

.brand-name-sub {
  font-family: var(--font-label);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 0.25em;
  margin-right: -0.26em;
}

.site-header.is-dark .brand-name-sub {
  color: var(--color-white-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  /* Matches .nav-links' own 2.4rem gap below, so the gap before "Get In
     Touch" reads the same as the gap between Home / Portfolio / About
     instead of jumping to the much wider --space-lg (4rem). */
  gap: 2.4rem;
}

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

.nav-links a {
  position: relative;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: 0.3rem 0;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.35s var(--ease-cinematic);
}

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

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

.nav-cta {
  position: relative;
  display: inline-flex;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: 0.3rem 0;
  transition: color 0.3s ease;
}

.nav-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--color-gold);
  transition: width 0.35s var(--ease-cinematic);
}

.nav-cta:hover {
  color: var(--color-ink);
}

.nav-cta:hover::after {
  width: 100%;
}

/* Hide the redundant "Contact" nav link — "Start a Project" button covers it */
.nav-links > li:last-child {
  display: none;
}

/* Mobile nav toggle button */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 24px;
  z-index: 1100;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-ink);
  transition: all var(--duration-base) var(--ease-cinematic);
}

/* Once the mobile menu is open, its full-screen background stays the
   site's dark takeover treatment (see .main-nav below) -- so the
   hamburger-turned-X needs to switch back to light so it's visible
   sitting on top of that dark panel, instead of the ink color it uses
   the rest of the time against the light header bar. */
.nav-toggle.is-active span {
  background: var(--color-white);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

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

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

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

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--color-black);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Matches .nav-links' own gap below, so the gap before "Get In Touch"
       reads the same as the gap between Home / Portfolio / About instead
       of standing apart as a bigger jump. */
    gap: var(--space-md);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duration-base) var(--ease-cinematic),
      opacity var(--duration-base) var(--ease-cinematic),
      visibility var(--duration-base);
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-links {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  /* The mobile menu is a full-screen dark takeover (background set on
     .main-nav above), not the light header bar -- so its text goes back
     to the site's light-on-dark tokens, same idea as the hero/video
     modal/lightbox elsewhere. */
  .nav-links a {
    font-size: 1.1rem;
    color: var(--color-white-muted);
  }

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

  .nav-cta {
    /* Was inheriting the desktop 0.78rem size, which made it read much
       smaller than Home / Portfolio / About just above it. */
    font-size: 1.1rem;
    color: var(--color-white-muted);
  }

  .nav-cta:hover {
    color: var(--color-white);
  }
}

/* ==========================================================================
   4B. NAV DROPDOWN ("Portfolio" — reveals Video / Photo)
   Desktop: hovering "Portfolio" reveals the submenu. Mobile: tapping it
   expands the submenu in place (accordion-style) instead of navigating
   anywhere, since "Portfolio" itself isn't a link — see js/script.js.
   ========================================================================== */
.nav-item-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: none;
  padding: 0.3rem 0;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: color 0.3s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.is-current {
  color: var(--color-ink);
}

.nav-dropdown-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
  transition: transform 0.3s var(--ease-cinematic);
}

.nav-item-dropdown:hover .nav-dropdown-caret,
.nav-item-dropdown.is-open .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 901px) {
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 150px;
    background: var(--color-paper-elevated);
    border: 1px solid var(--color-hairline);
    box-shadow: 0 14px 30px rgba(20, 20, 20, 0.08);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-cinematic), transform 0.3s var(--ease-cinematic), visibility 0.3s;
    z-index: 20;
  }

  .nav-item-dropdown:hover .nav-dropdown-menu,
  .nav-item-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 1.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    white-space: nowrap;
  }

  .nav-dropdown-menu a:hover {
    color: var(--color-gold);
  }
}

@media (max-width: 900px) {
  .nav-item-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Part of the full-screen dark menu takeover -- goes back to the
     light-on-dark tokens, same as .nav-links a above. */
  .nav-dropdown-trigger {
    font-size: 1.1rem;
    color: var(--color-white-muted);
  }

  .nav-dropdown-trigger:hover,
  .nav-dropdown-trigger.is-current {
    color: var(--color-white);
  }

  .nav-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    text-align: center;
    transition: max-height 0.35s var(--ease-cinematic);
  }

  .nav-item-dropdown.is-open .nav-dropdown-menu {
    max-height: 160px;
    margin-top: var(--space-sm);
  }

  .nav-dropdown-menu a {
    display: block;
    padding: 0.6rem 0;
    font-size: 0.95rem;
    color: var(--color-white-muted);
  }

  .nav-dropdown-menu a:hover {
    color: var(--color-gold);
  }
}

/* ==========================================================================
   5. HERO SECTION
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-black);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.35) 35%, rgba(10, 10, 10, 0.85) 85%, var(--color-black) 100%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0.1) 45%, rgba(10, 10, 10, 0.1) 55%, rgba(10, 10, 10, 0.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--space-xl);
}

.hero-title {
  font-size: clamp(1.32rem, 3.6vw, 3rem);
  color: var(--color-white);
  max-width: 16ch;
  margin-bottom: var(--space-md);
}

.hero-title em {
  font-style: italic;
  color: var(--color-gold);
  /* Always starts its own line, no matter how long/short either half of
     the headline is -- otherwise the two halves just wrap wherever the
     text happens to fit, which looks wrong as soon as either is edited. */
  display: block;
}

.hero-desc {
  max-width: 560px;
  color: var(--color-white-muted);
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   6. REVEAL / SCROLL ANIMATIONS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-cinematic), transform 0.9s var(--ease-cinematic);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }

/* ==========================================================================
   7. INTRO / STATEMENT STRIP
   ========================================================================== */
.statement {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.statement p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--color-ink);
  max-width: 900px;
}

/* ==========================================================================
   8. PORTFOLIO / PROJECT GRIDS
   ========================================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  /*
    On phones, we deliberately KEEP this 2-column grid instead of
    collapsing to 1 column — but only PHOTO cards actually pair up
    two-at-a-time. VIDEO cards always take their own full-width row,
    one per line, so video thumbnails stay large and easy to tap.

    - #video-work covers the homepage's "Featured Films" section
      (those cards don't carry data-category, since that attribute is
      only needed on the Portfolio page's mixed grid).
    - [data-category="video"] covers video cards on the Portfolio page,
      where video and photo cards share one grid.
  */
  #video-work .project-card,
  .project-card[data-category="video"] {
    grid-column: 1 / -1;
  }
}

.project-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-black-soft);
}

.project-card.is-wide {
  aspect-ratio: 8 / 5;
  grid-column: span 2;
}

/*
  Video thumbnails always use a 16:9 (1920x1080) ratio — the standard
  video frame shape — on BOTH desktop and mobile, overriding the
  portrait/wide shapes above. This applies whether or not the card also
  has "is-wide", and on every screen size (no media query here).
*/
#video-work .project-card,
.project-card[data-category="video"] {
  aspect-ratio: 16 / 9;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-cinematic), filter 0.6s ease;
  filter: grayscale(15%) brightness(0.92);
}

.project-card:hover img {
  transform: scale(1.07);
  filter: grayscale(0%) brightness(1);
}

.project-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.92) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-cinematic);
}

.project-card:hover .project-card-overlay {
  opacity: 1;
}

.project-card-tag {
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}

.project-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-white);
}

.play-icon {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(246, 245, 241, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.4s var(--ease-cinematic);
  backdrop-filter: blur(4px);
}

.project-card:hover .play-icon {
  opacity: 1;
  transform: scale(1);
  border-color: var(--color-gold);
}

.play-icon::after {
  content: "";
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--color-white);
  margin-left: 3px;
}

.view-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* Tabs used on the portfolio page to filter Video / Photo */
.filter-tabs {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.8rem 0;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  position: relative;
}

.filter-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0%;
  background: var(--color-gold);
  transition: width 0.35s var(--ease-cinematic);
}

.filter-tab.is-active {
  color: var(--color-gold);
}

.filter-tab.is-active::after {
  width: 100%;
}

/* ==========================================================================
   8B. HOMEPAGE VIDEO & PHOTO TEASERS (cinematic panel -> video.html / photo.html)
   A background video (or photo, with a slow Ken Burns zoom) fills a
   16:9 panel with a centered "View Video/Photo Work" button on top —
   clicking anywhere on the panel jumps to the full video.html /
   photo.html page. Text sits alongside it. The video section shows the
   panel on the left (.media-teaser); the photo section reuses the same
   markup/CSS but with the panel on the right (.media-teaser-reverse,
   set by DOM order in index.html). See README.txt -> "Homepage video
   & photo teasers".
   ========================================================================== */
/* Tighter top/bottom padding than the default .section — these two
   panels sit back-to-back and read better grouped closely together
   instead of each carrying the site's full section spacing. */
.media-teaser-section {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* Mobile-only override for the gap between the Video and Photo panels.
   Adjust these two numbers to make the gap bigger/smaller on phones
   only — desktop spacing above is untouched. Higher number = more
   space; lower number = less space. */
@media (max-width: 900px) {
  .media-teaser-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.media-teaser {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.media-teaser-reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

.media-teaser-visual {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  background: var(--color-black-soft);
}

.media-teaser-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%) brightness(0.78);
  transition: filter 0.5s ease, transform 0.6s var(--ease-cinematic);
}

.media-teaser-visual:hover .media-teaser-media {
  filter: grayscale(0%) brightness(0.85);
}

/* Photo teaser only — slow continuous zoom stands in for video motion */
@keyframes media-teaser-kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.media-teaser-photo {
  animation: media-teaser-kenburns 18s ease-in-out infinite alternate;
}

.media-teaser-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.1) 0%, rgba(6, 6, 6, 0.55) 100%);
  transition: background 0.4s ease;
  pointer-events: none;
}

.media-teaser-visual:hover .media-teaser-scrim {
  background: rgba(6, 6, 6, 0.3);
}

.media-teaser-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.1rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-white);
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid var(--color-line);
  backdrop-filter: blur(4px);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.media-teaser-visual:hover .media-teaser-button {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(10, 10, 10, 0.75);
}

.media-teaser-info {
  max-width: 480px;
}

.media-teaser-reverse .media-teaser-info {
  justify-self: end;
}

.media-teaser-title {
  font-family: var(--font-display);
  font-size: clamp(1.44rem, 3vw, 2.16rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0.4rem 0 0.9rem;
}

.media-teaser-sub {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .media-teaser,
  .media-teaser-reverse {
    grid-template-columns: 1fr;
  }

  .media-teaser-visual {
    order: 2;
  }

  .media-teaser-info {
    order: 1;
    max-width: none;
    text-align: center;
    justify-self: stretch;
  }

  .media-teaser-button {
    padding: 0.85rem 1.7rem;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-teaser-photo {
    animation: none;
  }
}

/* ==========================================================================
   9. SERVICES SECTION
   ========================================================================== */
/* Sits right after the Photo teaser panel above (Section 8B) — a
   smaller top padding keeps the two from feeling too far apart. */
#services {
  padding-top: var(--space-lg);
}

/*
  Services as a stacked editorial list (index number, title, description
  laid out in a row with a hairline divider between each) instead of a
  grid of boxed cards.
*/
.services-list {
  border-top: 1px solid var(--color-hairline);
}

.service-row {
  display: grid;
  grid-template-columns: 64px minmax(220px, 1fr) 1.6fr;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-hairline);
  transition: background-color 0.4s ease;
}

.service-row:hover {
  background: var(--color-paper-soft);
}

@media (max-width: 700px) {
  .service-row {
    grid-template-columns: 32px 1fr;
    grid-template-areas:
      "index title"
      ".     desc";
    row-gap: 0.4rem;
    padding: var(--space-sm) 0;
  }

  .service-index { grid-area: index; }
  .service-title { grid-area: title; }
  .service-desc { grid-area: desc; }
}

.service-index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-gold);
}

.service-title {
  font-size: 1.4rem;
  color: var(--color-ink);
}

.service-desc {
  color: var(--color-ink-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ==========================================================================
   10. LOGO / CLIENT STRIP — auto-scrolling marquee
   ==========================================================================
   Both rows list every logo (client-logo-1.png through -10.png) so the
   full brand list is always represented in each row as it scrolls by.
   js/script.js duplicates the group automatically (as many times as
   needed for the screen width) so each row can loop sideways forever
   with no visible seam. See README.txt for how to add or remove logos.
   ========================================================================== */
/* This section keeps the site's original dark treatment (black to dark
   grey) rather than the light page canvas -- client logos and the states
   map read better against dark, and it continues straight on from the
   reel section's gradient above. See dark-context color notes at the top
   of this file for why this block uses the --color-white/-line tokens
   instead of the --color-ink/-paper ones the rest of the page uses. */
.logo-strip {
  padding: var(--space-lg) 0;
  background: linear-gradient(150deg, #141414 0%, #2b2b2a 100%);
}

.logo-strip-label {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white-muted);
  margin-bottom: var(--space-lg);
}

/* Splits the section into the logo marquee (left) and the states-worked-in
   map (right). min-width: 0 on the left column matters -- without it, the
   marquee's overflow:hidden track can force the grid track wider than
   intended and break the split. */
.logo-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.logo-strip-left {
  min-width: 0;
}

.logo-strip-right {
  text-align: center;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--color-line);
}

.states-map-label {
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white-muted);
  margin: 0 0 0.4rem;
}

.states-map-count {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--color-white);
  margin: 0 0 1.4rem;
}

#glc-states-map {
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}

#glc-states-map svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Thin state-boundary lines drawn underneath the dots -- without these,
   neighboring worked states (e.g. Colorado/Kansas/Missouri) visually melt
   into one blob instead of reading as separate states. fill: transparent
   (not "none") + pointer-events: all is what lets hovering anywhere INSIDE
   a state -- not just on top of an individual dot -- trigger its tooltip;
   see findStateTarget() in the script below. */
.glc-state-outline {
  fill: transparent;
  stroke: rgba(246, 245, 241, 0.55);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: all;
}

.glc-state-outline.is-worked {
  stroke: rgba(209, 145, 2, 0.65);
}

#glc-states-map svg.is-visible .glc-state-outline {
  opacity: 1;
}

/* Each dot starts invisible/shrunk; JS adds .is-visible to the <svg> once
   the section scrolls into view, and each dot's own transition-delay
   (set inline per-dot) creates the left-to-right "wave" pop-in. */
.glc-state-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

#glc-states-map svg.is-visible .glc-state-dot {
  opacity: 1;
  transform: scale(1);
}

.glc-state-dot.is-worked {
  fill: var(--color-gold);
}

.glc-state-dot.is-other {
  fill: rgba(246, 245, 241, 0.18);
}

.glc-state-dot:hover,
.glc-state-dot.is-touched {
  fill: var(--color-white);
}

.glc-state-dot.is-worked:hover,
.glc-state-dot.is-worked.is-touched {
  fill: var(--color-gold-light);
}

.glc-map-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: rgba(20, 20, 20, 0.95);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-line);
  color: var(--color-white);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.15s ease;
}

.glc-map-tooltip.is-visible {
  opacity: 1;
}

.glc-map-tooltip.is-worked {
  color: var(--color-gold);
  border-color: rgba(209, 145, 2, 0.4);
}

@media (max-width: 900px) {
  .logo-strip-grid {
    grid-template-columns: 1fr;
  }
  .logo-strip-right {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding-left: 0;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
  }
}

.logo-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Sped up from 90s -- since the logo strip now sits in a half-width
     column instead of the full viewport, the old duration covered a much
     shorter pixel distance and felt sluggish. */
  animation: logo-marquee-scroll 45s linear infinite;
}

/* Second logo row scrolls the opposite direction */
.logo-track.is-reverse {
  animation-direction: reverse;
}

.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

.logo-track-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-right: clamp(2.5rem, 6vw, 5rem);
}

.logo-track-group img {
  height: 76px;
  width: auto;
  flex-shrink: 0;
  filter: grayscale(100%) brightness(1.6) opacity(0.55);
  transition: filter 0.4s ease, opacity 0.4s ease;
}

.logo-track-group img:hover {
  filter: grayscale(0%) brightness(1) opacity(1);
}

/* Bigger logos on desktop only — mobile keeps the 76px size above */
@media (min-width: 901px) {
  .logo-track-group img {
    height: 96px;
  }
}

/* Faster marquee on mobile only — desktop keeps the 90s speed above */
@media (max-width: 900px) {
  .logo-track {
    animation-duration: 28s;
  }
}

@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Exactly -50% works because js/script.js always leaves the track
       as two identical, equal-width halves — see initLogoMarquee(). */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
  }
}

/* ==========================================================================
   11. ABOUT SECTION
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

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

.about-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  max-width: 350px;
  justify-self: start;
}

@media (max-width: 640px) {
  .about-media {
    max-width: 260px;
    margin: 0 auto;
  }
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
}

.about-media::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: -18px;
  bottom: -18px;
  border: 1px solid var(--color-gold-dim);
  z-index: -1;
}

.about-copy p {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-sm);
  font-size: 1.02rem;
}

.about-stats {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.about-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-gold);
}

.about-stat-label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.bts-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  .bts-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bts-gallery img {
  aspect-ratio: 1;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(30%);
  transition: filter 0.4s ease, transform 0.6s var(--ease-cinematic);
}

.bts-gallery img:hover {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* ==========================================================================
   12. CONTACT SECTION
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.contact-info-item {
  margin-bottom: var(--space-md);
}

.contact-info-label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.5rem;
}

.contact-info-value {
  font-size: 1.3rem;
  color: var(--color-ink);
  font-family: var(--font-display);
}

.contact-info-value a:hover {
  color: var(--color-gold);
}

.social-links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.social-links a:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* Column headings used above the form + call-scheduler in the two-up
   contact grid (form left, schedule-a-call right on desktop). */
.contact-col-heading {
  font-size: 1.7rem;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}

.contact-col-sub {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}

/* Bottom-of-page row for email / location / social -- centered, wraps to
   a stacked column on small screens. */
.contact-links-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2.4rem, 6vw, 5rem);
  text-align: center;
}

.contact-links-row .contact-info-item {
  margin-bottom: 0;
}

.contact-links-row .social-links {
  justify-content: center;
}

@media (max-width: 600px) {
  .contact-links-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

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

.form-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 0.6rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-ink);
  padding: 0.7rem 0;
  transition: border-color 0.3s ease;
}

.form-select option {
  background: var(--color-paper-soft);
}

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

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(20, 20, 20, 0.35);
}

.form-note {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}

/* Swaps in for the whole form after a successful submit (see js/script.js
   Section 6). Hidden by default via the "hidden" attribute in the HTML;
   using :not([hidden]) here instead of a plain "display: flex" so this
   class can never accidentally win a specificity fight against [hidden]
   and show the block when it shouldn't. */
.contact-form-success {
  display: none;
  min-height: 340px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.contact-form-success:not([hidden]) {
  display: flex;
}

.contact-form-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: var(--space-sm);
}

.contact-form-success-title {
  font-size: clamp(1.32rem, 2.4vw, 1.8rem);
  margin-bottom: var(--space-xs);
}

.contact-form-success-text {
  color: var(--color-ink-muted);
  font-size: 1.1rem;
  max-width: 420px;
}

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.cta-band {
  padding: var(--space-xl) 0;
  text-align: center;
  border-top: 1px solid var(--color-hairline);
  background:
    radial-gradient(ellipse at center, rgba(209, 145, 2, 0.08) 0%, rgba(10, 10, 10, 0) 70%);
}

.cta-band h2 {
  font-size: clamp(1.44rem, 3.6vw, 2.64rem);
  margin-bottom: var(--space-md);
}

.cta-band .btn {
  margin-top: var(--space-sm);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-lg) 0 var(--space-md);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

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

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

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* The <p> would otherwise stretch to the full width of its footer
     column, which pushed the centered text toward the middle of that
     column instead of just centering "Media Co." under "7 Waves". This
     keeps the block only as wide as "7 Waves" itself, anchored on the
     left like the rest of the footer. */
  width: fit-content;
  margin-bottom: var(--space-sm);
}

.footer-brand-top {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.22em;
  line-height: 1.15;
  text-transform: uppercase;
  /* Compensates for the trailing letter-spacing so the visible glyphs,
     not the invisible space after the last letter, get centered. */
  margin-right: -0.22em;
}

.footer-brand-top span {
  color: var(--color-gold);
}

.footer-brand-sub {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 0.3em;
  margin-right: -0.26em;
}

.footer-tagline {
  color: var(--color-ink-muted);
  max-width: 320px;
  font-size: 1.02rem;
}

.footer-col-title {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.footer-col a,
.footer-col p {
  display: block;
  color: var(--color-ink-muted);
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: var(--color-ink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

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

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

/* ==========================================================================
   14B. INLINE REEL PLAYER (e.g. homepage "2026 Reel" section)
   ==========================================================================
   This reuses the same .video-player component styled below (section 15),
   just centered and width-capped so it reads as a showcase piece rather
   than a popup.
   ========================================================================== */
.reel-section {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Flat off-white, matching the rest of the site's canvas -- no gradient,
   no dark reveal. */
.reel-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-paper);
}

.reel-section .container {
  position: relative;
  z-index: 1;
}

.reel-intro {
  margin-bottom: var(--space-lg);
}

/* This section now sits on the page's flat off-white canvas, so its
   heading uses the same ink color as every other .section-heading --
   no override needed, left here as a no-op in case that ever changes. */
.reel-section .section-heading {
  color: var(--color-ink);
}

.reel-player-shell {
  max-width: 1040px;
  margin: 0 auto;
}

/* ==========================================================================
   15. CINEMATIC VIDEO POPUP PLAYER
   ==========================================================================
   Used on the home page's Featured Films section and the Portfolio page.
   Clicking a video thumbnail (any card with a "data-video" attribute)
   opens this modal and plays the matching file from /videos.
   The JPG thumbnails themselves are never replaced by this — they stay
   as the clickable cover image; only the popup plays actual video.
   ========================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-cinematic), visibility 0.4s;
}

.video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.93);
  backdrop-filter: blur(8px);
}

.video-modal-inner {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  margin: auto;
  transform: scale(0.94) translateY(18px);
  transition: transform 0.5s var(--ease-cinematic);
}

.video-modal.is-open .video-modal-inner {
  transform: scale(1) translateY(0);
}

.video-modal-title {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-white);
  letter-spacing: 0.01em;
  max-width: 80%;
}

.video-modal-close {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 1rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(10, 10, 10, 0.5);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-cinematic);
}

.video-modal-close:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: rotate(90deg);
}

.video-modal-close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/*
  PRODUCTION DETAILS — shown in full underneath the video as soon as it
  opens, no click required. Whatever plain text is in that project's
  data-video-details attribute is rendered here automatically
  (js/script.js sets the text). It has its own solid background so the
  text stays readable no matter what's behind the popup, and padding on
  every side keeps it from looking cramped against its own edges or the
  bottom of the browser window.
*/
.video-modal-details-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1.6rem;
  background: var(--color-black-soft);
  border: 1px solid var(--color-line);
  padding: 1.8rem var(--space-md) 3rem;
}

.video-modal-details-text {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-white);
  white-space: pre-line;
}

.video-player {
  position: relative;
  background: #000;
  border: 1px solid var(--color-gold-dim);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

.video-player-big-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

.video-player.is-paused .video-player-big-play {
  opacity: 1;
  pointer-events: auto;
}

.video-player-big-play button {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease-cinematic), background 0.3s ease;
}

.video-player-big-play button:hover {
  transform: scale(1.08);
  background: rgba(201, 162, 74, 0.18);
}

.video-player-big-play svg {
  width: 28px;
  height: 28px;
  fill: var(--color-white);
  margin-left: 4px;
}

.video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.95) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.video-player:hover .video-controls,
.video-player.is-paused .video-controls,
.video-player:focus-within .video-controls {
  opacity: 1;
  transform: translateY(0);
}

.vp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-white);
  flex-shrink: 0;
  transition: color 0.25s ease;
}

.vp-btn:hover {
  color: var(--color-gold);
}

.vp-btn svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Play / pause icon swap */
.vp-icon-pause { display: none; }
.video-player.is-paused .vp-icon-play { display: block; }
.video-player.is-paused .vp-icon-pause { display: none; }
.video-player:not(.is-paused) .vp-icon-play { display: none; }
.video-player:not(.is-paused) .vp-icon-pause { display: block; }

/* Mute / unmute icon swap */
.vp-icon-unmuted { display: block; }
.vp-icon-muted { display: none; }
.video-player.is-muted .vp-icon-unmuted { display: none; }
.video-player.is-muted .vp-icon-muted { display: block; }

.vp-time {
  font-size: 0.75rem;
  color: var(--color-white-muted);
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.vp-progress {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgba(246, 245, 241, 0.18);
  cursor: pointer;
}

.vp-progress-buffered,
.vp-progress-played {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
}

.vp-progress-buffered {
  background: rgba(246, 245, 241, 0.32);
}

.vp-progress-played {
  background: var(--color-gold);
}

/*
  Volume control: the mute button plus a slider that stays collapsed
  (width: 0) until the visitor hovers or focuses the group, then expands
  to the side -- the same pattern YouTube/Vimeo use, since the mute
  button alone only toggles on/off and never let people dial in a level.
  Collapses back to just the button on mobile, where hardware volume
  buttons handle this instead.
*/
.vp-volume {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vp-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 3px;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  background: rgba(246, 245, 241, 0.28);
  border-radius: 2px;
  cursor: pointer;
  accent-color: var(--color-gold);
  transition: width 0.25s ease, opacity 0.2s ease, margin-left 0.25s ease;
}

.vp-volume:hover .vp-volume-slider,
.vp-volume:focus-within .vp-volume-slider {
  width: 70px;
  opacity: 1;
  margin-left: 8px;
}

.vp-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
}

.vp-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
}

.vp-volume-slider::-moz-range-track {
  height: 3px;
  background: rgba(246, 245, 241, 0.28);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .vp-volume-slider {
    display: none;
  }
}

.vp-progress-played::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 11px;
  height: 11px;
  background: var(--color-gold);
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
  transition: transform 0.2s ease;
}

.video-player:hover .vp-progress-played::after,
.video-player:focus-within .vp-progress-played::after {
  transform: translateY(-50%) scale(1);
}

/* Cursor + subtle lift for thumbnails that open the popup player */
.project-card.has-video-player {
  cursor: pointer;
}

@media (max-width: 640px) {
  .video-modal-title {
    max-width: 60%;
    font-size: 1rem;
  }

  .video-modal-details-text {
    font-size: 0.92rem;
  }

  .video-modal-details-panel {
    margin-top: 1.2rem;
    padding: 1.3rem 1.2rem 2rem;
  }

  .video-controls {
    padding: 0.7rem 0.8rem;
    gap: 0.6rem;
  }

  .vp-time {
    display: none;
  }
}

/* ==========================================================================
   15B. PHOTO LIGHTBOX
   ==========================================================================
   Opens full-size when a photo thumbnail (any [data-photo] card) is
   clicked. Same "pop into view" animation approach as the video popup
   modal above, for a consistent feel across the site.
   ========================================================================== */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-cinematic), visibility 0.4s;
}

.photo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(8px);
}

.photo-lightbox-inner {
  position: relative;
  z-index: 1;
  max-width: min(1200px, 88vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.94) translateY(18px);
  transition: transform 0.5s var(--ease-cinematic);
}

.photo-lightbox.is-open .photo-lightbox-inner {
  transform: scale(1) translateY(0);
}

.photo-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--color-gold-dim);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
  background: #000;
  /* A quick cross-fade whenever prev/next swaps the image */
  opacity: 1;
  transition: opacity 0.25s ease;
}

.photo-lightbox-img.is-swapping {
  opacity: 0;
}

.photo-lightbox-meta {
  text-align: center;
  margin-top: var(--space-sm);
}

.photo-lightbox-caption {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-white);
}

.photo-lightbox-count {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.photo-lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(10, 10, 10, 0.5);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease-cinematic);
}

.photo-lightbox-close:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: rotate(90deg);
}

.photo-lightbox-close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-white);
  background: rgba(10, 10, 10, 0.5);
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.photo-lightbox-nav:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(201, 162, 74, 0.12);
}

.photo-lightbox-nav svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.photo-lightbox-prev {
  left: var(--space-md);
}

.photo-lightbox-next {
  right: var(--space-md);
}

/* Make photo thumbnails show they're clickable */
.project-card.has-photo-lightbox {
  cursor: pointer;
}

@media (max-width: 768px) {
  .photo-lightbox-nav {
    width: 44px;
    height: 44px;
  }

  .photo-lightbox-close {
    top: var(--space-sm);
    right: var(--space-sm);
  }

  .photo-lightbox-prev {
    left: var(--space-sm);
  }

  .photo-lightbox-next {
    right: var(--space-sm);
  }

  .photo-lightbox-caption {
    font-size: 1rem;
  }
}

/* ==========================================================================
   15C. THEMED PHOTO MASONRY GALLERY (Portfolio page only)
   Replaces a uniform cropped grid with a Pinterest-style "masonry" layout
   — each photo keeps its own natural width/height instead of being forced
   into a fixed shape. Photos are grouped into named theme sections (Live
   Concerts, Events, Beach Club) that stack in the order they appear in
   portfolio.html. The hover "pop" effect and lightbox click behavior are
   the same ones used everywhere else on the site.
   ========================================================================== */
/*
  Each "batch" is its own grid (NOT one giant continuous grid) so
  photos read in strict left-to-right, top-to-bottom order WITHIN
  their event/theme, and a visible gap between batches makes it clear
  where one event ends and the next begins — matching the batched
  layout of your old site.
  Each row's height is set by its tallest photo, so a short photo next
  to a tall one may leave a little empty space below it — a normal
  trade-off for keeping photos in their natural, uncropped shape while
  still reading in order.
*/
.photo-masonry-batch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-bottom: var(--space-lg);
}

.photo-masonry-batch:last-child {
  margin-bottom: 0;
}

.photo-masonry-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-black-soft);
}

.photo-masonry-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--ease-cinematic), filter 0.6s ease;
  filter: grayscale(15%) brightness(0.92);
}

.photo-masonry-item:hover img {
  transform: scale(1.07);
  filter: grayscale(0%) brightness(1);
}

/*
  Mobile: two columns instead of three. This keeps photos big enough to
  actually see without making visitors scroll through one giant single
  column of tiny thumbnails. To go back to a single column on phones,
  change "repeat(2, 1fr)" to "repeat(1, 1fr)" below.
*/
@media (max-width: 700px) {
  .photo-masonry-batch {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: var(--space-md);
  }
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Page hero used on interior pages (About, Portfolio, Contact) */
.page-hero {
  padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.page-hero-title {
  font-size: clamp(1.56rem, 3.6vw, 2.76rem);
}

.page-hero-sub {
  max-width: 620px;
  color: var(--color-ink-muted);
  margin-top: var(--space-sm);
  font-size: 1.2rem;
  line-height: 1.7;
}

/* Simple fade-in for page load */
body {
  animation: pageFade 0.8s var(--ease-cinematic);
}

@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}