/*
Theme Name: Abedini Cinema
Theme URI: https://emilianoabedini.com
Author: Creative Sphere Media
Author URI: https://creativespheremedia.com
Description: A refined editorial theme for cinematographer Emiliano Abedini. Cream/serif Astray-photography aesthetic with full SEO architecture — services, locations, hierarchical drone silo, schema, breadcrumbs, FAQ accordions.
Version: 2.46.1
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: Proprietary
License URI: https://creativespheremedia.com/license
Text Domain: abedini-cinema
Tags: portfolio, photography, videography, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  --cream: #fef8f0;
  --cream-2: #f7eedf;
  --ink: #1a1612;
  --ink-2: #2f2f23;
  --ink-soft: #5a5448;
  --ink-muted: #8a8278;
  --line: rgba(47, 47, 35, 0.15);
  --line-soft: rgba(47, 47, 35, 0.08);
}

/* Accessibility: skip-link (WCAG 2.4.1) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
  background-color: var(--ink);
  color: var(--cream);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  display: block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  height: auto;
  left: 1rem;
  line-height: 1;
  padding: 1rem 1.5rem;
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  top: 1rem;
  width: auto;
  z-index: 100000;
  border-radius: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

html {
  /* Prevents horizontal scroll on mobile when child elements (marquee,
     wide images, etc.) extend beyond viewport. The body-only version of
     this rule (below) wasn't enough on iOS Safari — html needed it too. */
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Belt-and-suspenders: any embedded media should never break out of viewport */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }

.display { font-family: 'Italiana', serif; font-weight: 400; }
.mono {
  font-family: 'Inconsolata', monospace;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  font-size: 0.75rem;
}

/* Paper grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Navigation */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.75rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, color 0.4s ease;
}

.site-nav.scrolled {
  background: rgba(254, 248, 240, 0.92);
  backdrop-filter: blur(8px);
}

.site-logo {
  font-family: 'Italiana', serif;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.4s ease;
}
.site-nav.scrolled .site-logo { color: var(--ink); }

.nav-menu {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}
.nav-menu a {
  color: var(--cream);
  text-decoration: none;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  transition: color 0.4s ease, opacity 0.3s ease;
}
.site-nav.scrolled .nav-menu a { color: var(--ink); }
.nav-menu a:hover { opacity: 0.6; }

/* Burger menu — hidden on desktop, shown on mobile */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.burger-line {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, opacity 0.3s ease;
}
.site-nav.scrolled .burger-line { background: var(--ink); }
/* When menu open, animate to X */
body.menu-open .burger-line:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
  background: var(--ink);
}
body.menu-open .burger-line:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
  background: var(--ink);
}

/* Mobile slide-out menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
}
.mobile-menu-inner {
  min-height: 100%;
  padding: 6rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.mobile-menu-logo {
  font-family: 'Italiana', serif;
  font-size: 2rem;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.mobile-menu-logo em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
body.menu-open .mobile-menu-logo {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.mobile-nav-menu li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.menu-open .mobile-nav-menu li { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-nav-menu li:nth-child(1) { transition-delay: 0.25s; }
body.menu-open .mobile-nav-menu li:nth-child(2) { transition-delay: 0.30s; }
body.menu-open .mobile-nav-menu li:nth-child(3) { transition-delay: 0.35s; }
body.menu-open .mobile-nav-menu li:nth-child(4) { transition-delay: 0.40s; }
body.menu-open .mobile-nav-menu li:nth-child(5) { transition-delay: 0.45s; }
body.menu-open .mobile-nav-menu li:nth-child(6) { transition-delay: 0.50s; }
.mobile-nav-menu a {
  display: block;
  padding: 1.25rem 0;
  font-family: 'Italiana', serif;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.3s ease, padding-left 0.3s ease;
  position: relative;
}
.mobile-nav-menu a::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: var(--ink-soft);
}
.mobile-nav-menu a:hover { opacity: 0.6; padding-left: 0.5rem; }
.mobile-nav-menu a:hover::after { opacity: 0.6; transform: translateY(-50%) translateX(4px); }

.mobile-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.6s ease 0.6s;
}
body.menu-open .mobile-menu-contact { opacity: 1; }
.mobile-menu-contact a {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}

.mobile-menu-social {
  display: flex;
  gap: 2rem;
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}
body.menu-open .mobile-menu-social { opacity: 1; }
.mobile-menu-social a {
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.mobile-menu-social a:hover { color: var(--ink); }

body.menu-open { overflow: hidden; }

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  color: var(--cream);
  /* Pre-video background so there's never a gray flash while Vimeo loads */
  background:
    radial-gradient(ellipse at 30% 45%, rgba(212, 165, 116, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 55%, rgba(180, 90, 50, 0.3) 0%, transparent 55%),
    linear-gradient(135deg, #2a1810 0%, #0a0806 100%);
}

.hero-video,
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border: 0;
  /* Match theme — no gray flash before Vimeo handshake completes */
  background:
    radial-gradient(ellipse at 30% 45%, rgba(212, 165, 116, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 55%, rgba(180, 90, 50, 0.3) 0%, transparent 55%),
    linear-gradient(135deg, #2a1810 0%, #0a0806 100%);
}

/* v2.42.1 — iframe cover pattern.
   object-fit: cover does NOT work on iframes (only on <img>, <video>, etc.).
   Without this, Vimeo/YouTube embeds render their 16:9 video inside the
   container and pad/blur the sides to fill non-matching aspect ratios —
   producing the "ghost image on each side" effect.
   The fix: oversize the iframe so it always covers the viewport (using
   the larger of [width-driven 16:9 height] or [height-driven 16:9 width]),
   then crop via the parent's overflow: hidden. Standard background-video
   pattern. */
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Default: stretch to 16:9 fitted to viewport, then enforce cover via min */
  width: 100vw;
  height: 56.25vw;          /* 100vw * 9/16 — would letterbox top/bottom */
  min-height: 100vh;        /* but at least viewport height */
  min-width: 177.78vh;      /* and width must be at least 16/9 of viewport height */
  transform: translate(-50%, -50%);
  z-index: 0;
  border: 0;
  /* Match theme — no gray flash before Vimeo handshake completes */
  background:
    radial-gradient(ellipse at 30% 45%, rgba(212, 165, 116, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 55%, rgba(180, 90, 50, 0.3) 0%, transparent 55%),
    linear-gradient(135deg, #2a1810 0%, #0a0806 100%);
}

/* Poster image: shown only while video is loading, hidden once playback starts */
.hero-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  transition: opacity 0.6s ease 0.3s;
}
.hero-video.loaded ~ .hero-poster,
.hero-poster.hidden { opacity: 0; }

.hero-video.placeholder {
  background:
    radial-gradient(ellipse at 30% 45%, rgba(212, 165, 116, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 55%, rgba(180, 90, 50, 0.3) 0%, transparent 55%),
    linear-gradient(135deg, #2a1810 0%, #0a0806 100%);
}
.hero-video.placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(115deg, transparent 30%, rgba(254, 248, 240, 0.1) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: shimmer 9s ease-in-out infinite;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.35) 0%, transparent 25%, transparent 60%, rgba(10, 8, 6, 0.6) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(10, 8, 6, 0.35) 100%);
  pointer-events: none;
}

/* Hero H1 — visible at top, restrained typography to match cinematic feel */
.hero-h1 {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding: 8rem 2.5rem 0;
  pointer-events: none;
  text-align: center;
}
.hero-h1 h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(10, 8, 6, 0.45);
}
.hero-h1-main {
  font-family: 'Italiana', serif;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: rgba(254, 248, 240, 0.97);
}
.hero-h1-sub {
  font-family: 'Inconsolata', monospace;
  font-size: clamp(0.65rem, 0.85vw, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: lowercase;
  color: rgba(254, 248, 240, 0.72);
  font-weight: 300;
  max-width: 60ch;
  line-height: 1.5;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6rem 2.5rem 2.5rem;
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 2rem;
  opacity: 0;
  animation: fade 1.6s ease 0.6s forwards;
}

.hero-meta {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: rgba(254, 248, 240, 0.8);
}
.hero-meta span { display: flex; align-items: center; gap: 0.75rem; }
.hero-meta span::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--cream);
  border-radius: 50%;
  opacity: 0.7;
}

.scroll-indicator {
  grid-column: 2;
  text-align: center;
  font-family: 'Inconsolata', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: rgba(254, 248, 240, 0.7);
}
.scroll-indicator::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(254, 248, 240, 0.7), transparent);
  margin: 0.75rem auto 0;
  animation: scroll-line 2.5s ease-in-out infinite;
}
@keyframes scroll-line {
  0%, 100% { transform: scaleY(0.5); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

.play-circle {
  grid-column: 3;
  justify-self: end;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid rgba(254, 248, 240, 0.5);
  background: rgba(10, 8, 6, 0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.5s ease;
  color: var(--cream);
  font-family: inherit;
}
.play-circle:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  transform: scale(1.05);
}
.play-circle-inner {
  text-align: center;
  font-family: 'Italiana', serif;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
}
.play-circle-inner svg {
  display: block;
  margin: 0 auto 0.4rem;
  width: 14px; height: 14px;
}

@keyframes fade {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wordmark */
.wordmark {
  padding: 9rem 2.5rem 6rem;
  text-align: center;
}
.wordmark-eyebrow {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: lowercase;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.wordmark h1,
.wordmark .wordmark-name {
  font-family: 'Italiana', serif;
  font-size: clamp(3.5rem, 12vw, 12rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0;
}
.wordmark h1 em,
.wordmark .wordmark-name em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.wordmark-tagline {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ink-soft);
  margin-top: 2.5rem;
}

/* Sections */
.section { padding: 9rem 2.5rem; position: relative; }

.eyebrow {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: 'Italiana', serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  text-align: center;
  margin-bottom: 1.5rem;
}
.section-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}

.section-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 5rem;
  text-align: center;
}

/* Categories grid */
.categories {
  /* v2.43.0 — max-width reduced from 1400px → 1100px to make project tiles
     read as curated showcase items rather than full-width hero blocks.
     Cards now sit at ~520px wide max instead of ~660px. */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.cat-item { position: relative; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.cat-item:nth-child(4n+1) { grid-column: 1 / 7; margin-top: 0; }
.cat-item:nth-child(4n+2) { grid-column: 7 / 13; margin-top: 8rem; }
.cat-item:nth-child(4n+3) { grid-column: 2 / 8; margin-top: 4rem; }
.cat-item:nth-child(4n+4) { grid-column: 8 / 13; margin-top: -2rem; }

.cat-image {
  aspect-ratio: 4/5;
  background: var(--cream-2);
  overflow: hidden;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-item:hover .cat-image { transform: translateY(-6px); }

.cat-visual {
  position: absolute;
  inset: 0;
  /* v2.42.3 — Critical fix: works for both <img> (object-fit) and
     <div style="background:..."> (background-size) variants of .cat-visual.
     abedini_project_visual() emits an <img> when the project has a featured
     image; without these img-specific rules the image rendered at natural
     ratio anchored to the container's top-left, leaving a large cream gap
     below the image (the leftover 4:5 container area). */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-size: cover;
  background-position: center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cat-item:hover .cat-visual { transform: scale(1.04); }

.cat-label {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cat-name {
  font-family: 'Italiana', serif;
  font-size: 2rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.cat-arrow {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  transition: gap 0.3s ease, color 0.3s ease;
  display: inline-flex;
  gap: 0.5rem;
}
.cat-item:hover .cat-arrow { color: var(--ink); gap: 0.85rem; }

/* Testimonial */
.testimonial {
  padding: 12rem 2.5rem;
  text-align: center;
  background: var(--cream-2);
  position: relative;
}
.testimonial-quote {
  font-family: 'Italiana', serif;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  max-width: 22ch;
  margin: 0 auto 3rem;
  text-transform: lowercase;
}
.testimonial-quote em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.testimonial-attr {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ink-soft);
}

/* About */
.about {
  padding: 9rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  max-width: 1300px;
  margin: 0 auto;
  align-items: center;
}
.about-image {
  aspect-ratio: 4/5;
  background:
    radial-gradient(ellipse at 50% 40%, #d4a574 0%, transparent 60%),
    linear-gradient(135deg, #5a3820 0%, #1a0d08 100%);
  background-size: cover;
  background-position: center;
}
.about-content .eyebrow { text-align: left; }
.about-content .section-title { text-align: left; font-size: clamp(2.5rem, 4.5vw, 4.5rem); margin-bottom: 2rem; }
.about-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.about-text:last-of-type { margin-bottom: 2.5rem; }
.about-sig {
  font-family: 'Italiana', serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

/* Marquee */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 4rem;
  animation: scroll 50s linear infinite;
  font-family: 'Italiana', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: lowercase;
  color: var(--ink);
}
.marquee-track span { display: flex; align-items: center; gap: 4rem; }
.marquee-track span::after { content: '✺'; font-size: 1.5rem; color: var(--ink-soft); }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Contact */
.contact { padding: 12rem 2.5rem 6rem; text-align: center; }
.contact h2 {
  font-family: 'Italiana', serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-bottom: 2.5rem;
}
.contact h2 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.contact-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 45ch;
  margin: 0 auto 4rem;
  line-height: 1.6;
}
.contact-email {
  display: inline-block;
  font-family: 'Italiana', serif;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.3s ease;
  text-transform: lowercase;
}
.contact-email:hover { opacity: 0.6; }

/* Footer */
/* ==========================================================================
   Site footer (v2.23.0 — 4-column SEO footer)
   ========================================================================== */
.site-footer {
  padding: 5rem 2.5rem 2.5rem;
  border-top: 1px solid var(--line);
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: var(--cream);
}
.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer a:hover { color: var(--ink); }

.site-footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--line);
}

.footer-col-title {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--ink-muted, #999);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.footer-links li { margin: 0; }
.footer-links a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: lowercase;
  font-weight: 300;
  line-height: 1.3;
}

.footer-view-all {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}
.footer-view-all:hover { border-color: var(--ink); }

/* Studio column — different visual treatment, like a business card */
.footer-studio {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}
.footer-studio p { margin: 0 0 0.5rem; }
.footer-name {
  font-family: 'Italiana', serif;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  text-transform: lowercase;
}
.footer-tag {
  font-style: italic;
  color: var(--ink-muted, #888);
  margin-bottom: 1rem !important;
}
.footer-address {
  font-style: normal;
  margin: 0 0 1rem !important;
  line-height: 1.5;
}
.footer-social {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

/* Bottom strip — copyright + utility links */
.site-footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-utility {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-utility a { font-size: 0.7rem; letter-spacing: 0.2em; }

/* Tablet */
@media (max-width: 900px) {
  .site-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  /* Studio column spans full width on tablet — gives the address room */
  .footer-col--studio {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
    margin-top: 0.5rem;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .site-footer { padding: 4rem 1.25rem 2rem; }
  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .footer-col--studio {
    grid-column: auto;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
  }
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1.5rem;
  }
  .footer-utility { gap: 1.25rem; }
  .footer-social { gap: 1.25rem; flex-wrap: wrap; }
}

/* Single Project page */
.project-single { padding-top: 6rem; }
.project-hero {
  text-align: center;
  padding: 5rem 2.5rem 3rem;
}
.project-hero .eyebrow { margin-bottom: 1.5rem; }
.project-hero h1 {
  font-family: 'Italiana', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-bottom: 1rem;
}
.project-meta-bar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  padding: 1rem 0 3rem;
}
.project-video {
  aspect-ratio: 16/9;
  width: 100%;
  background: var(--ink);
  margin-bottom: 5rem;
  position: relative;
  overflow: hidden;
}
.project-video iframe,
.project-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.project-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5rem 6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.project-body p { margin-bottom: 1.5rem; }
.project-body h2, .project-body h3 {
  font-family: 'Italiana', serif;
  color: var(--ink);
  text-transform: lowercase;
  margin: 2.5rem 0 1rem;
  font-weight: 400;
}
.project-gallery {
  column-count: 3;
  column-gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 6rem;
  padding: 0 2.5rem;
}
@media (max-width: 900px) {
  .project-gallery { column-count: 2; }
}
@media (max-width: 600px) {
  .project-gallery { column-count: 1; }
}
.project-gallery img,
.project-gallery .gallery-item {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
  break-inside: avoid;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  opacity: 0.92;
}
.project-gallery img:hover,
.project-gallery .gallery-item:hover {
  transform: translateY(-3px);
  opacity: 1;
}
.project-gallery .gallery-item { overflow: hidden; }
.project-gallery .gallery-item img { margin-bottom: 0; }
.project-back {
  text-align: center;
  padding: 4rem 2.5rem 8rem;
}
.project-back a {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
.project-back a:hover { color: var(--ink); }

/* Archive page */
.archive-header {
  padding: 9rem 2.5rem 4rem;
  text-align: center;
}
/* /work/ archive — masonry layout */
.archive-grid {
  column-count: 3;
  column-gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem 8rem;
}
@media (max-width: 1100px) {
  .archive-grid { column-count: 2; }
}
@media (max-width: 700px) {
  .archive-grid { column-count: 1; }
}
.archive-item {
  text-decoration: none;
  color: inherit;
  break-inside: avoid;
  display: block;
  margin-bottom: 2rem;
  /* Required for column layout to size correctly */
  width: 100%;
}
.archive-item-img {
  background: var(--cream-2);
  overflow: hidden;
  margin-bottom: 1.25rem;
  position: relative; /* Critical: contains absolutely-positioned .cat-visual children */
  aspect-ratio: 4 / 3; /* Default for ALL items (image or placeholder) — gives the container a height */
  max-height: 420px;  /* Cap so wide viewports don't make cards taller than they need to be */
}
/* When the card has a real <img>, let it dictate height naturally instead of forcing 4/3 */
.archive-item-img:has(img) {
  aspect-ratio: auto;
  max-height: none;
}

.archive-item-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.archive-item-img .cat-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.archive-item:hover .archive-item-img img,
.archive-item:hover .archive-item-img .cat-visual { transform: scale(1.04); }

/* ============================================================
   v2.0 — Service / Location / Drone CPT styles
   ============================================================ */

/* Breadcrumbs */
.breadcrumbs {
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-muted);
}
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; transition: color 0.3s ease; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span { color: var(--ink); }
.breadcrumb-sep { opacity: 0.5; }

.cpt-breadcrumbs {
  padding: 7rem 2.5rem 0;
  max-width: 1200px;
  margin: 0 auto;
}
.cpt-archive-breadcrumbs {
  padding: 7rem 2.5rem 0;
  max-width: 1400px;
  margin: 0 auto;
}

/* CPT single page hero */
.cpt-single { min-height: 60vh; }
.cpt-hero {
  text-align: center;
  padding: 4rem 2.5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.cpt-hero.has-bg-image {
  max-width: none;
  padding: 7rem 2.5rem 6rem;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
.cpt-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--hero-bg-opacity, 0.4);
  z-index: -1;
  transition: opacity 0.4s ease;
}
.cpt-hero.has-bg-image::after {
  /* Subtle cream gradient at edges so text on cream background still reads if image is dark */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(254, 248, 240, 0.5) 100%);
  z-index: -1;
  pointer-events: none;
}
.cpt-hero.has-bg-image .cpt-hero-content {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cpt-hero h1 {
  /* v2.40.0 — Was Italiana. The decorative ligature-heavy glyphs at this
     size made the title hard to scan ("commercial video production in
     chicago" reads as art-deco shapes rather than words). Cormorant
     Garamond keeps the editorial serif feel while remaining readable
     at large display sizes. Italiana is preserved for em accents and
     for shorter display headings elsewhere where it still works. */
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  margin: 1rem 0 1.5rem;
  color: var(--ink);
}
.cpt-hero h1 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.cpt-hero-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}

.cpt-feature-image {
  max-width: 1400px;
  margin: 2rem auto 4rem;
  padding: 0 2.5rem;
}
.cpt-feature-image img { width: 100%; height: auto; display: block; }

/* Meta stats bar */
.cpt-meta-bar, .drone-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 auto 4rem;
  max-width: 1100px;
}
.meta-stat {
  flex: 1 1 0;
  min-width: 140px;
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.meta-stat:last-child { border-right: none; }
.meta-label {
  display: block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.meta-value {
  /* v2.40.0 — Was Italiana, matched the h1 change for the same reason.
     Values like "$5000", "2-4 weeks", "chicago" need to be read at a
     glance — they're informational, not decorative. */
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--ink);
}

/* CPT body content */
.cpt-body {
  max-width: 720px;
  margin: 0 auto 4rem;
  padding: 0 2.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.cpt-body p { margin-bottom: 1.5rem; }
.cpt-body h2, .cpt-body h3 {
  font-family: 'Italiana', serif;
  color: var(--ink);
  text-transform: lowercase;
  font-weight: 400;
  margin: 3rem 0 1rem;
  letter-spacing: -0.01em;
}
.cpt-body h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.cpt-body h3 { font-size: 1.35rem; }
.cpt-body h2 em, .cpt-body h3 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.cpt-body a { color: var(--ink); text-underline-offset: 4px; }
.cpt-body ul, .cpt-body ol { margin: 0 0 1.5rem 1.5rem; }
.cpt-body li { margin-bottom: 0.5rem; }

/* Deliverables */
.deliverables { margin-bottom: 2rem; }
.deliverables .eyebrow { text-align: left; margin-bottom: 1rem; }
.deliverables-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.deliverables-list li {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.75rem 0 0.75rem 2rem;
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}
.deliverables-list li::before {
  content: '✺';
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Airspace note */
.airspace-note { margin-bottom: 4rem; }
.airspace-note .eyebrow { text-align: left; }

/* FAQs */
.faqs { padding: 6rem 2.5rem; max-width: 900px; margin: 0 auto; }
.faq-list { margin-top: 3rem; display: grid; gap: 0.75rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 0; background: transparent; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 2rem 1.5rem 0;
  font-family: 'Italiana', serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: -0.005em;
  position: relative;
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--ink-soft);
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--ink-soft); }
.faq-a {
  padding: 0 2rem 2rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.faq-a p { margin: 0; }

/* Drone callout */
.drone-callout {
  padding: 8rem 2.5rem;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.drone-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(212, 165, 116, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 65%, rgba(184, 69, 31, 0.12) 0%, transparent 55%);
  pointer-events: none;
}
.drone-callout-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.drone-callout .eyebrow { color: rgba(254, 248, 240, 0.65); }
.drone-callout .section-title { color: var(--cream); }
.drone-callout .section-title em { color: var(--cream); }
.drone-callout .section-lede { color: rgba(254, 248, 240, 0.75); }
.drone-callout .contact-email { color: var(--cream); border-bottom-color: var(--cream); }

/* Drone hub hero */
/* Drone hub - image-dominant header */
.drone-hero {
  padding: 1rem 2.5rem 1.5rem;
  text-align: left;
  max-width: 1400px;
  margin: 0 auto;
}
.drone-hero-content { max-width: 700px; }
.drone-h1 {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0 0.5rem;
}
.drone-h1 em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.drone-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--ink-soft);
  max-width: 55ch;
  margin: 0;
  line-height: 1.5;
}
.drone-hero-image {
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding: 0 2.5rem;
}
.drone-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  background: var(--cream-2);
}
.drone-hero-fallback {
  width: 100%;
  aspect-ratio: 21/9;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(212, 165, 116, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #1a1410 0%, #2f2418 50%, #4a3622 100%);
  color: rgba(254, 248, 240, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.drone-hero-fallback svg { width: 80px; height: 80px; }
.drone-hero-fallback .eyebrow { color: rgba(254, 248, 240, 0.5); margin: 0; }

.faa-badge-strip {
  max-width: 1400px;
  margin: 0 auto 4rem;
  padding: 0 2.5rem;
  display: flex;
  justify-content: flex-start;
}
.drone-hero .section-title { margin-bottom: 1.5rem; }

.faa-badge {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream-2);
  text-align: left;
}
.faa-badge svg { color: var(--ink); flex-shrink: 0; }
.faa-badge strong {
  display: block;
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.15rem;
}
.faa-badge span {
  display: block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-soft);
}

/* Drone audiences grid */
.drone-audiences { padding: 6rem 2.5rem; text-align: center; background: var(--cream-2); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1200px; margin: 4rem auto 0; }
.audience-card {
  background: var(--cream);
  padding: 3rem 2rem;
  text-decoration: none;
  color: inherit;
  text-align: left;
  border: 1px solid var(--line);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  display: block;
}
.audience-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(26, 22, 18, 0.08); }
.audience-name { font-family: 'Italiana', serif; font-size: 2rem; text-transform: lowercase; margin-bottom: 1rem; letter-spacing: -0.01em; }
.audience-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--ink-soft); margin-bottom: 1.5rem; font-size: 1.05rem; line-height: 1.6; }

/* Drone tree directory */
.drone-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; }
.drone-tree-parent {
  display: block;
  font-family: 'Italiana', serif;
  font-size: 1.75rem;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.3s ease;
}
.drone-tree-parent:hover { opacity: 0.6; }
.drone-tree-children { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.drone-tree-children li a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  padding: 0.4rem 0;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.drone-tree-children li a::before { content: '→  '; opacity: 0.6; }
.drone-tree-children li a:hover { color: var(--ink); padding-left: 0.5rem; }

/* Venues list */
.venues-section { padding: 6rem 2.5rem; max-width: 900px; margin: 0 auto; text-align: center; }
.venues-list {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.venues-list li {
  padding: 1.5rem 1rem;
  font-family: 'Italiana', serif;
  font-size: 1.35rem;
  text-transform: lowercase;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
@media (min-width: 600px) {
  .venues-list { grid-template-columns: 1fr 1fr; }
  .venues-list li:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* Related services / cross-CPT grid */
.related-services { padding: 6rem 2.5rem; max-width: 1400px; margin: 0 auto; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.related-item { text-decoration: none; color: inherit; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.related-item:hover { transform: translateY(-4px); }
.related-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--cream-2);
}
.related-img img, .related-img .related-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.related-item:hover .related-img img,
.related-item:hover .related-img .related-visual { transform: scale(1.04); }
.related-meta { display: flex; justify-content: space-between; align-items: baseline; }
.related-name { font-family: 'Italiana', serif; font-size: 1.5rem; text-transform: lowercase; letter-spacing: -0.005em; }

/* Service archive */
.service-archive-item .archive-item-excerpt {
  margin-top: 0.75rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.archive-empty {
  max-width: 600px;
  margin: 2rem auto 6rem;
  padding: 2.5rem 2rem;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
  line-height: 1.55;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: rgba(247, 238, 223, 0.4);
}
.archive-empty strong {
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
}
.archive-empty a { color: var(--ink); border-bottom: 1px solid var(--ink-soft); }
.archive-empty a:hover { opacity: 0.7; }

/* v2 Mobile */
@media (max-width: 900px) {
  .cpt-breadcrumbs, .cpt-archive-breadcrumbs { padding: 5rem 1.5rem 0; }
  .cpt-hero { padding: 3rem 1.5rem 2rem; }
  .cpt-feature-image { padding: 0 1.5rem; margin: 1.5rem auto 3rem; }
  .cpt-meta-bar, .drone-stats { flex-direction: column; }
  .meta-stat { border-right: none; border-bottom: 1px solid var(--line); }
  .meta-stat:last-child { border-bottom: none; }
  .cpt-body { padding: 0 1.5rem; }
  .faqs { padding: 4rem 1.5rem; }
  .drone-hero { padding: 1rem 1.5rem; }
  .drone-hero-image { padding: 0 1.5rem; }
  .faa-badge-strip { padding: 0 1.5rem; }
  .drone-callout { padding: 5rem 1.5rem; }
  .drone-audiences { padding: 4rem 1.5rem; }
  .audience-grid { grid-template-columns: 1fr; }
  .related-services { padding: 4rem 1.5rem; }
  .related-grid { grid-template-columns: 1fr; }
  .venues-section { padding: 4rem 1.5rem; }
  .faa-badge { flex-direction: column; text-align: center; }
}

/* Two-path (Videography vs Photography) section on homepage */
.two-path { padding: 8rem 2.5rem; max-width: 1400px; margin: 0 auto; }
.two-path .eyebrow,
.two-path .section-title,
.two-path .section-lede { text-align: center; }
.two-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 4rem;
}
.two-path-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.two-path-card:hover { transform: translateY(-6px); }
.two-path-img {
  aspect-ratio: 4/5;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background: var(--cream-2);
}
.two-path-img img,
.two-path-img video,
.two-path-img .related-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.two-path-card:hover .two-path-img img,
.two-path-card:hover .two-path-img video,
.two-path-card:hover .two-path-img .related-visual { transform: scale(1.04); }
.two-path-label { padding: 0 1rem; }
.two-path-label .eyebrow { text-align: left; margin-bottom: 0.75rem; }
.two-path-label h3 {
  font-family: 'Italiana', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  font-weight: 400;
  margin: 0 0 1rem;
  color: var(--ink);
}
.two-path-label p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.two-path-label .cat-arrow {
  display: inline-block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 0.4rem;
  transition: border-color 0.3s ease, padding-right 0.3s ease;
}
.two-path-card:hover .cat-arrow { border-color: var(--ink); padding-right: 0.5rem; }

@media (max-width: 900px) {
  .two-path { padding: 5rem 1.5rem; }
  .two-path-grid { grid-template-columns: 1fr; gap: 3rem; margin-top: 3rem; }
  .two-path-img { aspect-ratio: 3/4; }
}

/* ============================================================
   Page templates: /work/, /videography/, /photography/, /about/, /contact/
   Grid-first organization — content visible on land
   ============================================================ */

/* /work/ — compact header so the grid is the page */
.work-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2.5rem 1.5rem;
}
.work-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.work-header-text { flex: 1; }
.work-title {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0 0;
}
.work-count {
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
}
.work-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.work-filter-chip {
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.3s ease;
}
.work-filter-chip:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.work-filter-chip.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* /videography/ and /photography/ — compact header, grid first */
.landing-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2.5rem 1.5rem;
  text-align: left;
  position: relative;
}
.landing-header.has-bg-image {
  max-width: none;
  padding: 5rem 2.5rem 4rem;
  margin: 0 0 2rem;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}
.landing-header-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--hero-bg-opacity, 0.4);
  z-index: -1;
  transition: opacity 0.4s ease;
}
.landing-header.has-bg-image::after {
  /* Subtle cream gradient at the edges so text on cream still reads if image is dark */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, transparent 30%, rgba(254, 248, 240, 0.5) 100%);
  z-index: -1;
  pointer-events: none;
}
.landing-header.has-bg-image .landing-header-content {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.landing-title {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0 0.5rem;
}
.landing-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--ink-soft);
  max-width: 55ch;
  margin: 0;
  line-height: 1.5;
}
.landing-prose {
  max-width: 720px;
  margin: 4rem auto 6rem;
  padding: 0 2.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.landing-prose p { margin-bottom: 1.5rem; }
.landing-prose h2, .landing-prose h3 {
  font-family: 'Italiana', serif;
  text-transform: lowercase;
  font-weight: 400;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
}

/* /about/ — editorial portrait + prose layout */
.about-page { padding-bottom: 4rem; }
.about-header {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2.5rem 1.75rem;
}
.about-title {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0.5rem 0 0;
}
.about-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.about-portrait {
  aspect-ratio: 4/5;
  background: var(--cream-2);
  overflow: hidden;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8dcc8 0%, #d4a574 100%);
}
.about-prose {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--ink-soft);
  padding-top: 2rem;
}
.about-prose p { margin-bottom: 1.5rem; }
.about-prose p:first-child::first-letter {
  font-family: 'Italiana', serif;
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  margin: 0.25rem 0.75rem 0 0;
  color: var(--ink);
  font-weight: 400;
}
.about-credits {
  max-width: 1400px;
  margin: 6rem auto 0;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  border-top: 1px solid var(--line);
  padding-top: 4rem;
}
.about-credit-block .eyebrow { margin-bottom: 1rem; }
.about-credit-list {
  font-family: 'Italiana', serif;
  font-size: 1.15rem;
  line-height: 1.8;
  text-transform: lowercase;
  color: var(--ink);
}
.about-credit-list p { margin-bottom: 0.5rem; }

/* /contact/ — sparse, intentional */
.contact-page { padding-bottom: 4rem; }
.contact-page-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
  text-align: center;
}
.contact-page-title {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.95;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1rem 0 1.5rem;
}
.contact-page-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 auto;
}
.contact-methods {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.contact-method {
  padding: 2.5rem 2rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background 0.3s ease;
}
.contact-method:nth-child(2n) { border-right: none; }
.contact-method:hover {
  background: var(--cream-2);
}
.contact-method .eyebrow { margin-bottom: 0.75rem; text-align: left; }
.contact-method-value {
  font-family: 'Italiana', serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--ink);
  /* v2.38.1 — overflow-wrap:anywhere allows breaks at any character only
     when needed, producing cleaner wraps for long email addresses than
     word-break:break-word (which left a single trailing 'm' on its own
     line on /contact/). The smaller font max above also helps long
     emails fit in their grid column. */
  overflow-wrap: anywhere;
}
.contact-prose {
  max-width: 720px;
  margin: 5rem auto 4rem;
  padding: 0 2.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* WP pagination */
.archive-grid + .pagination,
.archive-grid + .nav-links,
.archive-grid + nav.navigation {
  max-width: 1400px;
  margin: 3rem auto 6rem;
  padding: 2rem 2.5rem 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pagination .page-numbers,
.nav-links .page-numbers {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover { color: var(--ink); border-color: var(--ink-soft); }
.pagination .page-numbers.current,
.nav-links .page-numbers.current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Mobile */
@media (max-width: 900px) {
  .work-header,
  .landing-header,
  .about-header,
  .contact-page-header { padding-left: 1.5rem; padding-right: 1.5rem; }
  .work-header-row { gap: 1rem; }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.5rem;
  }
  .about-credits {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 1.5rem 0;
    margin-top: 4rem;
  }
  .contact-methods {
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
  }
  .contact-method {
    border-right: none;
  }
  .about-prose p:first-child::first-letter {
    font-size: 3.5rem;
  }
}

/* Generic page */
.page-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 9rem 2.5rem 6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-content h1 {
  font-family: 'Italiana', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  text-transform: lowercase;
  color: var(--ink);
  margin-bottom: 2rem;
  text-align: center;
}
.page-content h2, .page-content h3 {
  font-family: 'Italiana', serif;
  color: var(--ink);
  text-transform: lowercase;
  margin: 2.5rem 0 1rem;
  font-weight: 400;
}
.page-content p { margin-bottom: 1.5rem; }
.page-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   v2.41.0 — Single blog post template (single.php)
   ============================================================ */
.single-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}
.single-post-header {
  text-align: center;
  margin-bottom: 3rem;
}
.single-post-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  margin: 1.25rem 0 1.5rem;
  color: var(--ink);
}
.single-post-meta {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-muted);
}
.single-post-meta-sep {
  margin: 0 0.5rem;
  opacity: 0.5;
}
.single-post-feature {
  margin: 0 -2rem 3rem;
}
.single-post-feature img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.single-post-prose {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.single-post-prose p { margin: 0 0 1.5rem; }
.single-post-prose h2, .single-post-prose h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
}
.single-post-prose h2 { font-size: 1.85rem; line-height: 1.2; }
.single-post-prose h3 { font-size: 1.45rem; line-height: 1.3; }
.single-post-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}
.single-post-prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-style: italic;
  color: var(--ink);
}
.single-post-prose img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  border-radius: 2px;
}
.single-post-prose ul, .single-post-prose ol {
  margin: 0 0 1.5rem 1.5rem;
}
.single-post-prose li { margin-bottom: 0.5rem; }
.single-post-tags {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
}
.single-post-tags a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.2s ease;
}
.single-post-tags a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Related posts on single */
.single-post-related {
  max-width: 1200px;
  margin: 5rem auto 0;
  padding: 4rem 2rem 0;
  border-top: 1px solid var(--line);
}
.related-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-transform: lowercase;
  letter-spacing: -0.01em;
  margin: 1rem 0 2.5rem;
  color: var(--ink);
}
.related-title em {
  font-style: italic;
  font-weight: 300;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.related-card-image {
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 2px;
}
.related-card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.related-card:hover .related-card-image img {
  transform: scale(1.03);
}
.related-card-meta {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.related-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   v2.41.0 — Blog archive (index.php for blog/category/tag/search)
   ============================================================ */
.archive-header {
  max-width: 1200px;
  margin: 4rem auto 3rem;
  padding: 0 2rem;
  text-align: center;
}
.archive-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  margin: 1rem 0 0;
  color: var(--ink);
}
.archive-title em {
  font-style: italic;
  font-weight: 300;
}
.archive-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem 2rem;
}
.archive-card {
  display: block;
}
.archive-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.archive-card-image {
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 2px;
}
.archive-card-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.archive-card-link:hover .archive-card-image img {
  transform: scale(1.03);
}
.archive-card-meta {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.archive-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.75rem;
  text-transform: lowercase;
}
.archive-card-excerpt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.archive-card-cta {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  color: var(--accent);
}
.archive-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-muted);
  padding: 4rem 0;
}
.archive-pagination {
  max-width: 1200px;
  margin: 0 auto 5rem;
  padding: 2rem;
  text-align: center;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: lowercase;
}
.archive-pagination a, .archive-pagination .current {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.archive-pagination a:hover {
  border-bottom-color: var(--accent);
}
.archive-pagination .current {
  border-bottom-color: var(--ink);
}

/* Responsive */
@media (max-width: 900px) {
  .site-nav { padding: 1.25rem 1.5rem; }

  /* Hide desktop nav menu on mobile */
  .nav-menu { display: none; }

  /* Hide site-logo when scrolled past hero on mobile is fine, but on hero
     we want only the burger visible. The logo is colored cream over dark
     hero so it stays subtle. We hide it only on the hero view. */
  body.home .site-nav:not(.scrolled) .site-logo { opacity: 0; pointer-events: none; }

  /* Show burger on mobile */
  .burger { display: inline-flex; }

  /* Hero — true fullscreen video, nothing on top except burger */
  .hero {
    height: 100vh;
    height: 100dvh; /* iOS Safari address-bar-aware viewport */
    min-height: 0;
  }
  .hero-overlay { display: none; }
  .hero-content { display: none; }
  .hero-h1 {
    padding: 5rem 1.5rem 0;
    /* Subtle radial darkening behind H1 only (hero-overlay is hidden on mobile) */
    background: radial-gradient(ellipse at center top, rgba(10, 8, 6, 0.5) 0%, transparent 65%);
  }
  .hero-h1-sub { display: none; } /* drop long SEO subtitle on mobile, main line stays */
  .hero-h1-main { font-size: clamp(1.5rem, 7vw, 2.25rem); }

  /* Other sections */
  .wordmark { padding: 5rem 1.5rem 3rem; }
  .section { padding: 6rem 1.5rem; }

  /* v2.22.0 — Homepage work grid becomes a horizontal swipe slider on mobile.
     Stacking 4 tall (4/5 aspect) cards vertically created ~2000px of vertical
     scroll on a 375px viewport. As a slider, each card peeks at the next one
     so visitors discover scrollability naturally. */
  .categories {
    display: flex;
    grid-template-columns: none; /* override grid */
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* Bleed past section padding so cards align to viewport edges */
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.5rem 1rem;
  }
  .categories::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .cat-item:nth-child(4n+1),
  .cat-item:nth-child(4n+2),
  .cat-item:nth-child(4n+3),
  .cat-item:nth-child(4n+4) {
    /* Override desktop grid-column rules — they don't apply to flex items */
    grid-column: auto;
    margin-top: 0;
    /* Each slide is 78% of viewport — leaves a peek of the next card */
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Tighter aspect ratio on mobile slides — 4/5 is too tall when shown full-width */
  .cat-image {
    aspect-ratio: 3 / 4;
  }

  .testimonial { padding: 7rem 1.5rem; }
  .about { padding: 6rem 1.5rem; grid-template-columns: 1fr; gap: 3rem; }
  .contact { padding: 7rem 1.5rem 4rem; }
  /* .site-footer mobile rule removed — handled by the new grid breakpoints (v2.23.0) */
  .archive-grid { padding: 0 1.5rem 6rem; }
  .project-gallery { padding: 0 1.5rem; }
  .project-body { padding: 0 1.5rem 4rem; }
}

/* ============================================================
   Contact form — native, in-theme
   ============================================================ */
.abedini-contact-form {
  max-width: 640px;
  margin: 2rem auto 0;
  text-align: left;
}
.abedini-contact-form .cf-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.abedini-contact-form .cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.abedini-contact-form .cf-field {
  margin-bottom: 1.25rem;
}
.abedini-contact-form .cf-row .cf-field {
  margin-bottom: 0;
}
.abedini-contact-form label {
  display: block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.abedini-contact-form .cf-optional {
  text-transform: lowercase;
  letter-spacing: 0.1em;
  font-style: italic;
  color: var(--ink-muted);
}
.abedini-contact-form input[type="text"],
.abedini-contact-form input[type="email"],
.abedini-contact-form input[type="tel"],
.abedini-contact-form select,
.abedini-contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
  font-weight: 400;
}
.abedini-contact-form input:focus,
.abedini-contact-form select:focus,
.abedini-contact-form textarea:focus {
  outline: none;
  border-color: var(--ink-soft);
  background: rgba(255,255,255,0.4);
}
.abedini-contact-form textarea {
  resize: vertical;
  min-height: 100px;
}
.abedini-contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235a5448' stroke-width='1.4'%3e%3cpath d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}
.abedini-contact-form .cf-submit {
  margin-top: 1.5rem;
  text-align: left;
}
.abedini-contact-form .cf-button {
  background: var(--ink);
  color: var(--cream);
  border: none;
  padding: 1rem 2rem;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  border-radius: 2px;
}
.abedini-contact-form .cf-button:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.abedini-contact-form .cf-button:active {
  transform: translateY(0);
}
.abedini-contact-form .cf-message {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
}
.abedini-contact-form .cf-message-success {
  background: rgba(184, 69, 31, 0.08);
  color: var(--ink);
  border-left: 3px solid var(--accent);
}
.abedini-contact-form .cf-message-error {
  background: rgba(150, 50, 50, 0.08);
  color: #6b2828;
  border-left: 3px solid #6b2828;
}

/* Compact variant — for inline use on service pages */
.abedini-contact-form.is-compact {
  max-width: 540px;
}
.abedini-contact-form.is-compact .cf-row {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .abedini-contact-form .cf-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .abedini-contact-form .cf-row .cf-field {
    margin-bottom: 1.25rem;
  }
}

/* ============================================================
   Admin accordion (Customizer-style single-page dashboard)
   ============================================================ */

/* /contact/ page — dedicated form section */
.contact-form-section {
  max-width: 720px;
  margin: 4rem auto 6rem;
  padding: 0 2.5rem;
}
.contact-form-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.contact-form-title {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 0;
}
.contact-form-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}

@media (max-width: 600px) {
  .contact-form-section { padding: 0 1.5rem; margin-top: 3rem; }
}

/* ============================================================
   Per-section background image system
   Used by: .wordmark, .section#work, .about, .contact
   When .has-section-bg is added, the .section-bg div renders
   the image at the configured opacity, with a soft gradient
   overlay to keep text readable.
   ============================================================ */
.has-section-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section-bg {
  position: absolute;
  inset: 0;
  background-image: var(--section-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--section-bg-opacity, 0.18);
  /* v2.42.2 — Heavy blur + reduced saturation makes the section background
     read as atmosphere rather than a duplicate of any foreground image.
     Without this, if a user picks the same photo for the section bg AND a
     featured project (or feature image), the bg sat at 40% opacity with no
     blur — producing a "ghost twin" of the foreground that looked broken.
     16px blur + 0.5 saturation guarantees the bg is visually subordinate
     no matter what image you put there. */
  filter: blur(16px) saturate(0.5);
  transform: scale(1.06); /* hide the blur's edge feathering at the section edges */
  z-index: -1;
  transition: opacity 0.4s ease;
}
.has-section-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* v2.42.2 — stronger cream wash so bg never crowds the foreground */
  background: radial-gradient(ellipse at center, rgba(254, 248, 240, 0.55) 0%, rgba(254, 248, 240, 0.8) 100%);
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   Dynamic Elements (v2.15.0)
   Top stripe, sticky bottom bar, floating quote button + modal,
   exit-intent popup. Brand-aligned cream/serif aesthetic.
   ========================================================================== */

/* ---- Top announcement stripe ---- */
.abedini-top-stripe {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  padding: 0.7rem 3rem 0.7rem 1.5rem;
  text-align: center;
  z-index: 150;
  /* Defaults to hidden; JS reveals it after checking dismissal cookie */
  display: none;
}
.abedini-top-stripe.is-visible { display: block; }
.abedini-top-stripe-inner {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.abedini-top-stripe-text {
  opacity: 0.9;
}
.abedini-top-stripe-cta {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(254, 248, 240, 0.5);
  padding-bottom: 1px;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}
.abedini-top-stripe-cta:hover {
  border-bottom-color: var(--cream);
  opacity: 1;
}
.abedini-top-stripe-close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--cream);
  opacity: 0.6;
  width: 28px;
  height: 28px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abedini-top-stripe-close:hover { opacity: 1; }

/* When top-stripe is visible, push the fixed nav down so it doesn't overlap */
body.has-top-stripe .site-nav { top: 38px; }

/* ---- Sticky bottom bar ---- */
.abedini-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 0.85rem 3.5rem 0.85rem 1.5rem;
  z-index: 120;
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: none;
}
.abedini-sticky-bar.is-visible {
  display: block;
  transform: translateY(0);
}
.abedini-sticky-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.abedini-sticky-bar-text {
  flex: 1 1 auto;
}
.abedini-sticky-bar-cta {
  font-family: 'Italiana', serif;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--accent, #b8451f);
  text-decoration: none;
  border-bottom: 1px solid var(--accent, #b8451f);
  padding-bottom: 1px;
  transition: opacity 0.25s ease;
}
.abedini-sticky-bar-cta:hover { opacity: 0.7; }
.abedini-sticky-bar-close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abedini-sticky-bar-close:hover { opacity: 1; }

/* When sticky bar is visible, lift the floating button up so they don't collide */
body.has-sticky-bar .abedini-fab { bottom: 5.5rem; }

/* ---- Floating quote button (FAB) ---- */
.abedini-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 130;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.5rem 0.85rem 1rem;
  display: none;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.18), 0 2px 6px rgba(26, 22, 18, 0.12);
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.abedini-fab.is-visible {
  display: inline-flex;
  opacity: 1;
}
.abedini-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26, 22, 18, 0.22), 0 4px 8px rgba(26, 22, 18, 0.14);
}
.abedini-fab-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent, #b8451f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.abedini-fab-icon svg {
  width: 18px;
  height: 18px;
}
.abedini-fab-label {
  white-space: nowrap;
}

/* ---- Modal (used by FAB) ---- */
.abedini-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.abedini-modal.is-open {
  display: flex;
  animation: abedini-modal-fade 0.25s ease;
}
@keyframes abedini-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.abedini-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 18, 0.55);
  backdrop-filter: blur(2px);
}
.abedini-modal-panel {
  position: relative;
  background: var(--cream);
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  border-radius: 4px;
  padding: 3rem 2.5rem 2.5rem;
  box-shadow: 0 24px 60px rgba(26, 22, 18, 0.32);
  -webkit-overflow-scrolling: touch;
}
.abedini-modal-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.abedini-modal-close:hover { color: var(--ink); }
.abedini-modal-heading {
  font-family: 'Italiana', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0.5rem 0 0.75rem;
  font-weight: 400;
}
.abedini-modal-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
body.modal-open { overflow: hidden; }

/* ---- Exit-intent popup ---- */
.abedini-exit-intent {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.abedini-exit-intent.is-open {
  display: flex;
  animation: abedini-modal-fade 0.3s ease;
}
.abedini-exit-intent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 18, 0.6);
}
.abedini-exit-intent-panel {
  position: relative;
  background: var(--cream);
  max-width: 480px;
  width: 100%;
  border-radius: 4px;
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(26, 22, 18, 0.32);
}
.abedini-exit-intent-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.abedini-exit-intent-close:hover { color: var(--ink); }
.abedini-exit-intent-heading {
  font-family: 'Italiana', serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0.75rem 0 1rem;
  font-weight: 400;
}
.abedini-exit-intent-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0 auto 1.75rem;
  max-width: 380px;
}
.abedini-exit-intent-cta {
  display: inline-block;
  font-family: 'Italiana', serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--cream);
  background: var(--ink);
  padding: 0.85rem 1.75rem;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.abedini-exit-intent-cta:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ---- Mobile refinements (v2.16 folded in) ---- */

/* Larger tap targets on the FAB on small screens — icon-only round button */
@media (max-width: 600px) {
  .abedini-fab {
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem;
    border-radius: 50%;
  }
  .abedini-fab-label {
    display: none;
  }
  .abedini-fab-icon {
    margin: 0;
  }
  .abedini-sticky-bar {
    padding: 0.75rem 3rem 0.75rem 1rem;
    font-size: 0.68rem;
  }
  .abedini-sticky-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .abedini-modal-panel,
  .abedini-exit-intent-panel {
    padding: 2.5rem 1.5rem 1.75rem;
  }
}

/* In-drawer close button (more affordance than just the burger toggle) */
.mobile-menu-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: none; /* shown via media query alongside the burger */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease 0.3s, border-color 0.25s ease, color 0.25s ease;
  z-index: 110;
}
body.menu-open .mobile-menu-close { opacity: 1; }
.mobile-menu-close:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Make tap targets slightly more generous in the drawer on mobile */
@media (max-width: 900px) {
  .mobile-menu-close { display: flex; }
  .mobile-nav-menu a {
    padding: 1.4rem 0;
    min-height: 56px;
    display: flex;
    align-items: center;
  }
  .mobile-menu-contact a {
    padding: 0.5rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Hero media + gallery (v2.16.0)
   Used on single-ec_location, single-ec_service, single-ec_drone.
   Hero media supports image, MP4 upload, or Vimeo/YouTube iframe.
   Gallery is a 3×2 grid of up to 6 images, click opens full-size in same tab.
   ========================================================================== */

.cpt-hero-media {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 4rem;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--cream-2);
  border-radius: 2px;
}
.cpt-hero-media.is-image img,
.cpt-hero-media.is-video video,
.cpt-hero-media.is-iframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
/* Iframe needs a small visual nudge — Vimeo/YouTube background mode often
   has black bars at the edges; scale slightly so the bars fall outside the box. */
.cpt-hero-media.is-iframe iframe {
  transform: scale(1.02);
  transform-origin: center center;
  pointer-events: none; /* background video, not interactive */
}

/* Slightly tighter aspect on phones */
@media (max-width: 700px) {
  .cpt-hero-media {
    aspect-ratio: 16 / 9;
    margin-bottom: 2.5rem;
    border-radius: 0; /* full-bleed feel on mobile */
  }
}

/* ---- Gallery (3×2) ---- */
.cpt-gallery {
  max-width: 1400px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
}
.cpt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cpt-gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-2);
  border-radius: 2px;
  cursor: zoom-in;
  position: relative;
  text-decoration: none;
}
.cpt-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.cpt-gallery-item:hover img {
  transform: scale(1.04);
  filter: brightness(1.05);
}
/* A subtle vignette on hover gives an "open" affordance without being loud */
.cpt-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26, 22, 18, 0.18) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cpt-gallery-item:hover::after { opacity: 1; }

/* v2.26.0 — Video gallery items: autoplay-muted-loop in place,
   click navigates to source URL if set. */
.cpt-gallery-item--video {
  cursor: default; /* default; an <a> wrapper sets it back to pointer */
}
a.cpt-gallery-item--video {
  cursor: pointer;
}
.cpt-gallery-item--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--ink);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.cpt-gallery-item--video:hover video {
  transform: scale(1.04);
  filter: brightness(1.05);
}
.cpt-gallery-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cpt-gallery-play svg {
  width: 56px;
  height: 56px;
  color: var(--cream);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
a.cpt-gallery-item--video:hover .cpt-gallery-play {
  opacity: 1;
  transform: scale(1.06);
}

/* Tablet — 2 columns */
@media (max-width: 900px) {
  .cpt-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .cpt-gallery {
    padding: 0 1.25rem;
    margin-bottom: 3.5rem;
  }
}

/* Phone — 1 column */
@media (max-width: 500px) {
  .cpt-gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .cpt-gallery-item {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   Landing-page hero with video/image overlay (v2.17.0)
   Used on /videography/ and /photography/ when hero_media_type is set to
   image / mp4 / vimeo / youtube. Falls back to .landing-header.has-bg-image
   pattern when type is 'none'.
   ========================================================================== */

.landing-hero-media {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 480px;
  max-height: 720px;
  margin: 0 0 2rem;
  overflow: hidden;
  isolation: isolate;
}

/* The .cpt-hero-media block sits inside; override its aspect-ratio
   constraint and let it fill the full landing-hero-media container instead */
.landing-hero-media .cpt-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--ink);
}
.landing-hero-media .cpt-hero-media img,
.landing-hero-media .cpt-hero-media video,
.landing-hero-media .cpt-hero-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* For Vimeo/YouTube iframe, scale up slightly to hide black bars */
.landing-hero-media .cpt-hero-media.is-iframe iframe {
  transform: scale(1.15);
  transform-origin: center center;
}

/* Cream gradient overlay anchored to the left for text readability */
.landing-hero-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 2rem 2.5rem;
  background: linear-gradient(
    90deg,
    rgba(254, 248, 240, 0.9) 0%,
    rgba(254, 248, 240, 0.7) 30%,
    rgba(254, 248, 240, 0.3) 60%,
    rgba(254, 248, 240, 0) 100%
  );
}

.landing-hero-media-content {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.landing-hero-media-content .eyebrow {
  margin-bottom: 0.75rem;
}
.landing-hero-media-content .landing-title {
  font-family: 'Italiana', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 18ch;
}
.landing-hero-media-content .landing-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.landing-hero-media-content .landing-lede {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0;
}

/* Tablet and below — shorter hero, gradient stretches further for readability */
@media (max-width: 900px) {
  .landing-hero-media {
    height: 55vh;
    min-height: 380px;
  }
  .landing-hero-media-overlay {
    padding: 1.5rem;
    background: linear-gradient(
      90deg,
      rgba(254, 248, 240, 0.92) 0%,
      rgba(254, 248, 240, 0.78) 50%,
      rgba(254, 248, 240, 0.35) 100%
    );
  }
}

/* Phone — text-readable at any image complexity */
@media (max-width: 600px) {
  .landing-hero-media {
    height: 50vh;
    min-height: 320px;
  }
  .landing-hero-media-overlay {
    background: linear-gradient(
      180deg,
      rgba(254, 248, 240, 0.4) 0%,
      rgba(254, 248, 240, 0.85) 60%,
      rgba(254, 248, 240, 0.95) 100%
    );
    align-items: flex-end;
    padding-bottom: 2rem;
  }
}

/* ==========================================================================
   Inquire button (v2.18.0)
   Two variants: --hero-light for dark hero contexts (homepage, video heroes),
   --hero-dark for cream backgrounds (landing pages, CPT singles).
   ========================================================================== */

.inquire-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.6rem 0.85rem 1.75rem;
  font-family: 'Italiana', serif;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid currentColor;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              background 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
  /* Min tap target — 44px on mobile per iOS guideline */
  min-height: 44px;
}
.inquire-btn-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1em;
  font-weight: 300;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.inquire-btn:hover {
  transform: translateY(-1px);
}
.inquire-btn:hover .inquire-btn-arrow {
  transform: translateX(4px);
}

/* Light variant — for dark hero backgrounds (homepage hero with video) */
.inquire-btn--hero-light {
  color: var(--cream);
  background: rgba(254, 248, 240, 0.08);
  border-color: rgba(254, 248, 240, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.inquire-btn--hero-light:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* Dark variant — for cream backgrounds (landing pages, CPT singles) */
.inquire-btn--hero-dark {
  color: var(--cream);
  background: var(--ink);
  border-color: var(--ink);
  margin-top: 1.5rem;
}
.inquire-btn--hero-dark:hover {
  background: var(--accent, #b8451f);
  border-color: var(--accent, #b8451f);
}

/* ----- Pair container for the homepage hero (Inquire + Watch reel together) ---- */
.hero-cta-pair {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* On phones, stack the CTAs and let them breathe */
@media (max-width: 600px) {
  .hero-cta-pair {
    flex-direction: column-reverse; /* Watch reel on top, inquire below */
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
  }
  .hero-cta-pair .inquire-btn {
    justify-content: center;
  }
  .hero-cta-pair .play-circle {
    align-self: center;
  }
}

/* On the .landing-header (image fallback variant), give the button some room */
.landing-header .inquire-btn,
.landing-hero-media-content .inquire-btn,
.cpt-hero-content .inquire-btn,
.cpt-hero .inquire-btn {
  margin-top: 1.5rem;
}

/* ==========================================================================
   Generic page template — hero media + body (v2.19.0)
   Used on page.php (default template) for any custom pages.
   ========================================================================== */

.page-hero-media {
  margin: 0 auto 3rem;
  max-width: 1400px;
  padding: 0 2.5rem;
}
.page-hero-media .cpt-hero-media {
  /* Already styled by .cpt-hero-media — just inherit */
  margin: 0;
}

.page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 6rem 2.5rem 4rem;
}
.page-hero-media + .page-header,
.page-hero-media ~ .page-content > .page-header {
  /* When hero is shown, content padding starts smaller */
  padding-top: 1rem;
}
.page-header {
  margin-bottom: 2rem;
}
.page-title {
  font-family: 'Italiana', serif;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.page-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.page-body p { margin: 0 0 1.25rem; }
.page-body h2,
.page-body h3 {
  font-family: 'Italiana', serif;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 2rem 0 0.75rem;
  line-height: 1.1;
}
.page-body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.page-body h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.page-body a {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.page-body a:hover { opacity: 0.6; }

/* Make the gallery on About / generic pages have proper top spacing */
.about-page .cpt-gallery,
.page-content .cpt-gallery {
  margin-top: 4rem;
}

@media (max-width: 700px) {
  .page-content {
    padding: 5rem 1.25rem 3rem;
  }
  .page-hero-media {
    padding: 0 1.25rem;
  }
}

/* ==========================================================================
   Mobile drawer refinements (v2.21.0)
   - More visible close button
   - Inquire CTA button inside drawer
   - Tighter spacing on small viewports
   ========================================================================== */

/* Close button — solid cream chip on cream bg with ink border, always visible */
.mobile-menu-close {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 300;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  line-height: 1;
}
.mobile-menu-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* CTA wrapper — gives the Inquire button breathing room in the drawer */
.mobile-menu-cta {
  margin: 1.5rem 0 0.5rem;
  display: flex;
}
.mobile-menu-cta .inquire-btn {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 1rem 1.5rem;
  margin-top: 0;
}

/* Drawer body padding tightens on smaller phones so content fits without scroll */
@media (max-width: 380px) {
  .mobile-menu-inner {
    padding: 5rem 1.5rem 2.5rem;
    gap: 2rem;
  }
  .mobile-nav-menu a {
    font-size: 1.5rem;
    padding: 1.1rem 0;
  }
}

/* ==========================================================================
   Mobile polish (v2.21.0)
   Tighten paddings, ensure no horizontal overflow, improve touch targets
   on the smallest viewports.
   ========================================================================== */

@media (max-width: 700px) {
  /* Contact section had 12rem top padding — way too much on mobile */
  .contact { padding: 5rem 1.25rem 4rem; }
  .contact h2 { margin-bottom: 1.5rem; }

  /* Wordmark section — tighten side padding */
  .wordmark { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Site nav — tighter padding so it doesn't push the burger off-center */
  .site-nav { padding: 1.25rem 1.25rem; }

  /* Generic section padding cleanup */
  .section { padding-left: 1.25rem; padding-right: 1.25rem; }
  .archive-grid { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 4rem; }

  /* Cap section eyebrows / lede so they don't pull the page wide on long words */
  .eyebrow, .section-lede, .contact-lede {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* iPhone SE / 375px — extra-tight viewport */
@media (max-width: 380px) {
  .site-nav { padding: 1rem; }
  .site-logo { font-size: 1.1rem; }
  .contact { padding: 4rem 1rem 3rem; }
  /* .footer-social rule removed — handled by the new footer-grid breakpoints (v2.23.0) */
}

/* ==========================================================================
   Mobile work slider — visual scroll affordance (v2.22.0)
   A subtle "swipe →" hint after the slider so visitors know it scrolls.
   ========================================================================== */
@media (max-width: 700px) {
  #work::after {
    content: 'swipe →';
    display: block;
    text-align: right;
    padding: 0.75rem 1.5rem 0;
    font-family: 'Inconsolata', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: lowercase;
    color: var(--ink-muted);
  }
}

/* ==========================================================================
   Site-wide contact strip (v2.27.0)
   Renders above the SEO footer on every page that doesn't already include
   the contact form inline. Visually distinct from the footer below — slightly
   warmer cream and tighter container so it reads as "action area" not "site
   chrome."
   ========================================================================== */

.site-contact-strip {
  background: var(--cream-2, #f3ead6);
  padding: 6rem 2.5rem 5rem;
  border-top: 1px solid var(--line);
}
.site-contact-strip-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.site-contact-strip .eyebrow {
  margin-bottom: 1rem;
  text-align: center;
}
.site-contact-strip-title {
  font-family: 'Italiana', serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0 0 1rem;
}
.site-contact-strip-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}
.site-contact-strip-lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
  font-style: italic;
}
.site-contact-strip .abedini-contact-form {
  text-align: left;
}

@media (max-width: 700px) {
  .site-contact-strip {
    padding: 4rem 1.25rem 3rem;
  }
  .site-contact-strip-lede {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }
}

/* ==========================================================================
   Drone — related services back link (v2.29.0)
   The "← back to {parent}" link sits below the related grid and helps both
   crawl depth (parent reachable from every child) and navigation UX.
   ========================================================================== */

.drone-back-link {
  text-align: center;
  margin-top: 2.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
}
.drone-back-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.drone-back-link a:hover {
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   AJAX form status messages (v2.31.0)
   Inline status shown after fetch-based form submission. Replaces the old
   redirect-then-reload flow with in-place feedback.
   ========================================================================== */

.cf-ajax-status {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
}
.cf-ajax-status.is-success {
  background: rgba(58, 125, 68, 0.08);
  border-left: 3px solid #3a7d44;
  color: #1e4724;
}
.cf-ajax-status.is-error {
  background: rgba(184, 69, 31, 0.08);
  border-left: 3px solid var(--accent);
  color: #6b260f;
}
.cf-ajax-status.is-pending {
  background: rgba(26, 22, 18, 0.04);
  border-left: 3px solid var(--ink-soft);
  color: var(--ink-soft);
}

/* Disabled submit during pending state */
.abedini-contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Exit-intent popup gets a wider panel now that it has a real form inside */
.abedini-exit-intent .abedini-exit-intent-panel {
  max-width: 540px;
}
.abedini-exit-intent .abedini-contact-form {
  margin-top: 1.25rem;
}

/* ============================================================
   v2.33.0 — SEO anchor cleanup
   When a card-link has no .cat-arrow descriptor (because we removed
   the generic "view —" inner text to keep anchor text clean for SEO),
   render a CSS-only arrow indicator so users still see it's clickable.
   The arrow is decorative content (::after); Google ignores ::after
   text when computing anchor relevance.
   ============================================================ */
.cat-item:not(:has(.cat-arrow)) .cat-label::after,
.related-item:not(:has(.cat-arrow)) .related-meta::after {
  content: '— view';
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  margin-left: 0.75rem;
  transition: color 0.3s ease, margin-left 0.3s ease;
  display: inline-block;
}
.cat-item:hover .cat-label::after,
.related-item:hover .related-meta::after {
  color: var(--ink);
  margin-left: 1rem;
}

/* Placeholder state for the work grid when no projects exist yet.
   Non-clickable tile instead of href="#" dead links. */
.cat-item--placeholder {
  position: relative;
  display: block;
  cursor: default;
  opacity: 0.5;
  filter: grayscale(0.2);
  pointer-events: none;
}
.cat-item--placeholder:nth-child(4n+1) { grid-column: 1 / 7; margin-top: 0; }
.cat-item--placeholder:nth-child(4n+2) { grid-column: 7 / 13; margin-top: 8rem; }
.cat-item--placeholder:nth-child(4n+3) { grid-column: 2 / 8; margin-top: 4rem; }
.cat-item--placeholder:nth-child(4n+4) { grid-column: 8 / 13; margin-top: -2rem; }

/* ============================================================
   v2.33.0 — Areas served pillar on service single pages
   Service → Locations linking. Critical SEO: closes the link
   graph loop so location pages get PageRank flowing back to them.
   ============================================================ */
.areas-served {
  text-align: center;
  padding: 6rem 2.5rem;
}
.areas-served .section-title {
  margin-bottom: 1rem;
}
.areas-served .section-lede {
  max-width: 56ch;
  margin: 0 auto 3rem;
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.6;
}
.areas-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: center;
}
.areas-list-item { display: inline-block; }
.areas-list-link {
  display: inline-block;
  font-family: 'Italiana', serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s ease, border-color 0.3s ease;
  text-transform: lowercase;
}
.areas-list-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.areas-served-footnote {
  margin-top: 1rem;
}
.areas-served-all {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.areas-served-all:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (max-width: 768px) {
  .areas-served { padding: 4rem 1.5rem; }
  .areas-list { gap: 0.5rem 1rem; }
}

/* ============================================================
   v2.33.1 — Nearby locations block on single-ec_location pages
   ============================================================ */
.nearby-locations {
  text-align: center;
  padding: 5rem 2.5rem;
  background: var(--cream-2);
}
.nearby-locations .section-title {
  margin-bottom: 2rem;
}
.nearby-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 700px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: center;
}
.nearby-list-item { display: inline-block; }
.nearby-list-link {
  display: inline-block;
  font-family: 'Italiana', serif;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s ease, border-color 0.3s ease;
  text-transform: lowercase;
}
.nearby-list-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 768px) {
  .nearby-locations { padding: 3.5rem 1.5rem; }
}

/* ============================================================
   v2.34.0 — Featured projects pillar on service singles
   Service → /work/ link graph. Mid-weight visual cards in a
   3-up grid (same dimensions as related-services).
   ============================================================ */
.featured-projects {
  padding: 6rem 2.5rem;
  text-align: center;
}
.featured-projects .section-title {
  margin-bottom: 3rem;
}
.featured-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.featured-project {
  display: block;
  text-decoration: none;
  color: inherit;
  text-align: left;
}
.featured-project-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--cream-2);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-project:hover .featured-project-img { transform: translateY(-6px); }
.featured-project:hover .featured-project-img img { transform: scale(1.04); }
.featured-project-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.featured-project-name {
  font-family: 'Italiana', serif;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  letter-spacing: 0.01em;
}
.featured-project-cat {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
}
.featured-projects-footnote {
  margin-top: 3rem;
}
.featured-projects-all {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.featured-projects-all:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (max-width: 900px) {
  .featured-projects-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .featured-projects { padding: 4rem 1.5rem; }
  .featured-projects-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   v2.34.0 — Related journal block on CPT singles
   Editorial card style — less imagery than featured-projects,
   more emphasis on title + excerpt (it's editorial content).
   ============================================================ */
.related-journal {
  padding: 6rem 2.5rem;
  background: var(--cream-2);
  text-align: center;
}
.related-journal .section-title {
  margin-bottom: 3rem;
}
.related-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.related-journal-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 2rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.related-journal-item:hover {
  transform: translateY(-4px);
  border-color: var(--ink-soft);
}
.related-journal-meta {
  margin-bottom: 0.75rem;
}
.related-journal-date {
  font-family: 'Inconsolata', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
}
.related-journal-title {
  font-family: 'Italiana', serif;
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.related-journal-excerpt {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.related-journal-cta {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}
.related-journal-item:hover .related-journal-cta { color: var(--accent); }
.related-journal-footnote {
  margin-top: 3rem;
}
.related-journal-all {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.related-journal-all:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
@media (max-width: 900px) {
  .related-journal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .related-journal { padding: 4rem 1.5rem; }
  .related-journal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   v2.43.0 — Comprehensive mobile pass for the homepage
   ============================================================
   Tightens type, padding, and spacing on phones. Targets the
   homepage's three biggest visual moments — hero, wordmark,
   section titles — and adds a tier of refinement for very small
   screens (≤500px). Plays nicely with the existing breakpoints
   defined elsewhere in the file; these only add what was missing.
   ============================================================ */
@media (max-width: 600px) {
  /* Section rhythm — pull padding in so content has room to breathe */
  .section { padding: 5rem 1.25rem; }
  .wordmark { padding: 4rem 1.25rem 2.5rem; }
  .testimonial { padding: 5rem 1.25rem; }
  .about { padding: 5rem 1.25rem; gap: 2rem; }
  .contact { padding: 5rem 1.25rem 3rem; }

  /* Type — section titles were maxing at 3rem on mobile (clamp(3rem, 7vw, 6.5rem));
     phones at 375px showed exactly 3rem (48px), which dominates the screen.
     New clamp goes down to 2.25rem (36px) which reads as a proper headline
     without crowding the viewport. */
  .section-title { font-size: clamp(2.25rem, 8.5vw, 3rem); line-height: 1.05; }
  .section-lede { font-size: 1.05rem; margin-bottom: 3rem; line-height: 1.55; }
  .eyebrow { font-size: 0.7rem; letter-spacing: 0.25em; margin-bottom: 1rem; }

  /* Wordmark section — Em's name displayed huge. The clamp was bottoming out at
     3.5rem (56px) which still wrapped or looked oversized on 375px screens. */
  .wordmark .wordmark-name { font-size: clamp(2.75rem, 14vw, 4rem); line-height: 1; }
  .wordmark-tagline { font-size: 0.7rem; margin-top: 1.5rem; }

  /* Hero — bring h1 down a touch so it doesn't bump the bottom CTA off-screen
     on shorter devices (e.g. iPhone SE @ 667px tall). */
  .hero-h1 { padding: 4rem 1.25rem 0; }
  .hero-h1-main { font-size: clamp(1.35rem, 7.5vw, 2rem); line-height: 1.1; }

  /* Project cards slider — tighter card width (was 78%, now 85%) so the
     featured image gets more pixels and looks intentional rather than tiny. */
  .cat-item:nth-child(4n+1),
  .cat-item:nth-child(4n+2),
  .cat-item:nth-child(4n+3),
  .cat-item:nth-child(4n+4) {
    flex: 0 0 85%;
  }
  .cat-name { font-size: 1.4rem; }
  .cat-label { margin-top: 1rem; }

  /* Buttons and CTAs — reduce visual heft on mobile */
  .inquire-button, .start-project-cta, .cta-button {
    font-size: 0.9rem;
    padding: 0.85rem 1.5rem;
  }

  /* About section — when stacked single-column, give the portrait a
     reasonable max-height so it doesn't dominate the viewport */
  .about-portrait img { max-height: 70vh; object-fit: cover; }

  /* Service / drone callout sections on homepage — pad and stack */
  .drone-callout, .two-path { padding: 5rem 1.25rem; }
  .two-path { grid-template-columns: 1fr; gap: 3rem; }

  /* Footer — tighter padding */
  .site-footer { padding: 4rem 1.25rem 2rem; }
}

/* Ultra-small phones (iPhone SE 1st gen, older Androids ≤ 360px wide) */
@media (max-width: 400px) {
  .section { padding: 4rem 1rem; }
  .section-title { font-size: 1.95rem; }
  .wordmark .wordmark-name { font-size: 2.5rem; }
  .hero-h1-main { font-size: 1.4rem; }
  .cat-item:nth-child(4n+1),
  .cat-item:nth-child(4n+2),
  .cat-item:nth-child(4n+3),
  .cat-item:nth-child(4n+4) {
    flex: 0 0 88%;
  }
}

/* ============================================================
   v2.45.0 — Internal linking blocks (cross-link pills, "available in"
   location grids, drone-to-service callouts, footer subtitles)
   ============================================================ */

/* Subtle cross-cluster callout block (drone → matching service, etc) */
.cross-link-block {
  max-width: 720px;
  margin: 3rem auto 4rem;
  padding: 2rem 2.5rem;
  background: var(--cream-2);
  border-left: 2px solid var(--accent);
  text-align: center;
}
.cross-link-block .eyebrow { margin-bottom: 0.75rem; }
.cross-link-prose {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}
.cross-link-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.cross-link-cta {
  font-family: 'Inconsolata', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: gap 0.3s ease;
}
.cross-link-cta:hover { opacity: 0.75; }

/* Inline linked meta-pills on project hero (shot in / service) */
.cross-link-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 1rem 0 0;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
}
.cross-link-inline + .cross-link-inline { margin-left: 0; }
.cross-link-label { color: var(--ink-muted); }
.cross-link-inline a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color 0.3s ease;
}
.cross-link-inline a:hover { border-color: var(--accent); }

/* "available in these cities" grid on service singles */
.service-locations {
  text-align: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.service-locations-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 2rem;
}
.service-locations-grid li {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
}
.service-locations-grid a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.service-locations-grid a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Footer subtitle for drone sub-list */
.footer-col-subtitle {
  font-family: 'Inconsolata', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--ink-muted, #999);
  margin: 2rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.footer-links-sub li a {
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .cross-link-block { padding: 1.5rem 1.25rem; margin: 2rem 1rem 2.5rem; }
  .cross-link-prose { font-size: 1.05rem; }
  .service-locations { padding: 4rem 1.25rem; }
  .service-locations-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
  .service-locations-grid li { font-size: 1.1rem; }
}