/* =========================================================
   Z Parking — base styles
   Palette: off-white paper, deep charcoal, signature red accent
   ========================================================= */

:root {
  --color-paper: #FAF8F5;
  --color-stone: #EFEAE2;
  --color-ink: #1A1A1A;
  --color-ink-soft: #3C3A36;
  --color-muted: #8A857C;
  --color-rule: #D9D3C7;
  --color-red: #C8232A;

  --font-serif: "Cormorant Garamond", "GT Super", "Canela", Georgia, serif;
  --font-sans: "Inter", "Söhne", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --max-width: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 10vw, 8rem);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  /* rem-based so the whole type scale tracks the user's browser/OS font-size setting */
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
}

/* iOS only (-webkit-touch-callout gates out macOS Safari, where -apple-system-body
   computes to 13px): honor the user's Dynamic Type text-size setting. Its default
   body size is 17px, so at the default setting the site renders unchanged. */
@supports (-webkit-touch-callout: none) and (font: -apple-system-body) {
  html {
    font: -apple-system-body;
  }

  body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.55;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}

a:hover {
  opacity: 0.65;
}

/* ---------- Layout primitives ---------- */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 0;
}

/* ---------- Typography ---------- */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 1.75rem;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.display {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 7vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.12;
}

.h3 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 38ch;
}

p {
  margin: 0 0 1em;
}

.prose p {
  max-width: 62ch;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover {
  opacity: 1;
  background: transparent;
  color: var(--color-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

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

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 2px;
}

.link-arrow:hover {
  opacity: 1;
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 245, 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  /* never let the flex row squeeze the brand into the nav links / hamburger */
  flex-shrink: 0;
}

/* the two-word wordmark holds one line under the 72px header, at any text size */
.nav__brand-word {
  white-space: nowrap;
}

.nav__mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--color-red);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  font-style: italic;
}

.nav__mark svg {
  width: 100%;
  height: 100%;
}

.nav__mark img {
  width: 100%;
  height: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav__links a.is-active {
  color: var(--color-red);
}

.nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-ink);
  margin: 5px 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__copy .display {
  margin-bottom: 1.5rem;
}

.hero__copy .lede {
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Cinematic full-bleed hero (Home) ---------- */

.hero--cinematic {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  margin-top: -72px; /* extend under sticky header */
  color: var(--color-paper);
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
}

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

.hero--cinematic .hero__poster,
.hero--cinematic .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero--cinematic .hero__poster {
  z-index: 0;
}

.hero--cinematic .hero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.hero--cinematic .hero__video.is-active {
  opacity: 1;
}

.hero--cinematic .hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0) 70%);
}

.hero--cinematic .hero__inner {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 12vh, 9rem) clamp(5rem, 12vh, 8rem);
}

.hero--cinematic .hero__copy {
  max-width: 46rem;
}

/* Brand lockup — brush Z with the wordmark nested at its right, as in the delivered logo */
.hero__lockup {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 26vw, 370px);
  margin-right: clamp(2.5rem, 6vw, 5.5rem);
  filter: drop-shadow(0 6px 34px rgba(0, 0, 0, 0.35));
}

.hero__lockup img {
  display: block;
  width: 100%;
  height: auto;
}

/* Two-line wordmark nested in the open pocket at the brush-Z's right: PARKING over
   an equal-size GROUP, sharing the same right edge (as a logo lockup). The translate
   nudges the block right off the diagonal stroke and up so the air above PARKING
   roughly matches the air below GROUP. Percentages scale with the lockup (responsive). */
/* Overlapping lockup (single treatment at ALL breakpoints): PARKING nested over the Z
   with GROUP smaller and right-aligned beneath it, both bold. Right-anchored, centered
   vertically on the Z. The two clamps share the same vw axis so GROUP stays ~0.53x
   PARKING (and both track the Z's size) at every viewport. */
.hero__lockup-word {
  position: absolute;
  right: 1%;
  top: 63%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.24em;
  font-family: var(--font-serif);
  color: var(--color-paper);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.hero__lockup-line {
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  letter-spacing: 0.22em;
  margin-right: -0.22em; /* optically right-align despite trailing tracking */
  white-space: nowrap;
  line-height: 1;
}

.hero__lockup-sub {
  font-weight: 700;
  font-size: clamp(0.72rem, 1.28vw, 1.14rem); /* ~0.53x PARKING; smaller descriptor */
  letter-spacing: 0.42em;
  margin-right: -0.42em; /* match its trailing tracking to hold the right edge */
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.hero--cinematic .display {
  color: var(--color-paper);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.hero--cinematic .lede {
  color: rgba(250, 248, 245, 0.9);
  max-width: 34ch;
}

.btn--on-dark {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.btn--on-dark:hover {
  background: transparent;
  color: var(--color-paper);
  border-color: var(--color-paper);
}

.btn--ghost-on-dark {
  background: transparent;
  color: var(--color-paper);
  border-color: rgba(250, 248, 245, 0.5);
}

.btn--ghost-on-dark:hover {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

/* ---------- Static image page hero (Commercial / Events) ---------- */

.page-hero {
  position: relative;
  min-height: 62vh;
  min-height: 62svh;
  margin-top: -72px; /* extend under sticky header */
  color: var(--color-paper);
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
  display: flex;
  align-items: flex-end;
}

.page-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 65%);
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 9rem 4.5rem;
}

.page-hero__eyebrow {
  color: rgba(250, 248, 245, 0.75);
}

.page-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-paper);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  max-width: 18ch;
  margin-bottom: 1.75rem;
}

.page-hero__lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(250, 248, 245, 0.9);
  max-width: 52ch;
  margin-bottom: 2.25rem;
}

/* Header over dark hero (home video + commercial/events image heroes) */
body.home .site-header,
body.dark-hero .site-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent !important;
}

body.home .site-header .nav__brand,
body.home .site-header .nav__links a,
body.dark-hero .site-header .nav__brand,
body.dark-hero .site-header .nav__links a {
  color: var(--color-paper);
}

/* Active nav item stays brand-red on dark-hero headers too (the paper-white rule
   above otherwise overrides it — that's why COMMERCIAL/EVENTS didn't show red). */
body.home .site-header .nav__links a.is-active,
body.dark-hero .site-header .nav__links a.is-active {
  color: var(--color-red);
}

body.home .site-header .nav__toggle span,
body.dark-hero .site-header .nav__toggle span {
  background: var(--color-paper);
}

body.home .site-header.is-scrolled,
body.dark-hero .site-header.is-scrolled {
  background: rgba(26, 26, 26, 0.75);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
}

/* Reduced motion: hide videos, keep poster */
@media (prefers-reduced-motion: reduce) {
  .hero--cinematic .hero__video {
    display: none;
  }
}

/* Small viewports: poster only (per product decision) */
@media (max-width: 720px) {
  /* tighter vertical rhythm on phones — same copy, less endless scroll */
  :root {
    --section-y: 3rem;
  }

  .eyebrow {
    margin-bottom: 1.15rem;
  }

  .intro-block {
    gap: 1.25rem;
  }

  .feature-link {
    margin-top: 2rem;
  }

  .hero--cinematic .hero__video {
    display: none;
  }

  .hero--cinematic .hero__inner {
    padding-block: 6rem 4.5rem;
  }

  /* Larger hero on phones (matches the scaled-up look the client sees on his iPhone).
     Bigger Z, wordmark, and H1 so the hero reads large at default text size too. */
  .hero__lockup {
    width: min(66vw, 300px);
  }

  .hero__lockup-line {
    font-size: 1.72rem;
  }

  .hero__lockup-sub {
    font-size: 0.92rem;
  }

  .hero--cinematic .display {
    font-size: 3.2rem;
  }

  /* no room for the decorative strip on phones; it collides with hero content */
  .stat-strip {
    display: none;
  }
}

/* Hero lockup stacks above the copy on narrow viewports */
@media (max-width: 900px) {
  .hero--cinematic .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.25rem;
  }

  .hero__lockup {
    width: min(66vw, 300px);
    margin-right: 0;
  }
}

/* ---------- Stat strip (pinned to viewport bottom over the hero) ---------- */

.stat-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(250, 248, 245, 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-top: 1px solid var(--color-rule);
  padding-block: 0.55rem;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.stat-strip.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.stat-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-inline: var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}

.stat-strip span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  line-height: 1;
}

/* Dark variant for home over cinematic video */
body.home .stat-strip {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.home .stat-strip span {
  color: rgba(250, 248, 245, 0.85);
}

body.home .stat-strip span + span::before {
  /* subtle dot between items on dark */
}

/* ---------- Intro block ---------- */

.intro-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.intro-block__heading {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
}

.intro-block__body {
  color: var(--color-ink-soft);
  font-size: 1.0625rem;
}

/* ---------- Service cards (home) ---------- */

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.service-card {
  display: block;
  position: relative;
}

.service-card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-stone);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(26, 26, 26, 0.04) 0 2px, transparent 2px 10px);
  transition: transform 0.6s var(--ease);
}

.service-card:hover .service-card__media::after {
  transform: scale(1.03);
}

.service-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.service-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.service-card__desc {
  color: var(--color-ink-soft);
  margin-bottom: 1rem;
  max-width: 44ch;
}

/* ---------- "What we operate" line list ---------- */

.operate-list {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.3;
  color: var(--color-ink);
  max-width: 32ch;
}

.operate-list span {
  display: block;
}

/* Homepage commercial feature: "What we operate" is the centerpiece */
.operate-feature {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  margin-bottom: clamp(4.5rem, 9vw, 7rem);
}

.operate-feature__eyebrow {
  color: var(--color-red);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.operate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.operate-card {
  margin: 0;
}

.operate-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-stone);
}

.operate-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.operate-card:hover .operate-card__media img {
  transform: scale(1.04);
}

.operate-card figcaption {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  color: var(--color-ink);
  padding-top: 0.9rem;
}

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

.feature-link {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* ---------- Founder quote ---------- */

.quote {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.quote__mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-red);
  margin-bottom: 1rem;
}

.quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.875rem);
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

.quote__attr {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------- Closing CTA ---------- */

.closing-cta {
  background: var(--color-stone);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}

.closing-cta__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  margin-bottom: 2rem;
  max-width: 22ch;
  margin-inline: auto;
}

/* ---------- Who We Serve grid ---------- */

.serve-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}

.serve-grid__cell {
  background: var(--color-paper);
  padding: 2rem 1.5rem;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.25s var(--ease);
}

.serve-grid__cell:hover {
  background: var(--color-stone);
}

.serve-grid__num {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.serve-grid__label {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.15;
}

/* ---------- Capabilities two-column ---------- */

.capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.capabilities__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.capabilities__list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 1.0625rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.capabilities__list li::before {
  content: "—";
  color: var(--color-red);
  font-weight: 500;
}

.capabilities__media {
  aspect-ratio: 3 / 4;
  background: var(--color-stone);
  position: relative;
  overflow: hidden;
}

.capabilities__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(26, 26, 26, 0.04) 0 2px, transparent 2px 10px);
}

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

/* ---------- Approach (numbered) ---------- */

.approach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.approach__item {
  border-top: 1px solid var(--color-ink);
  padding-top: 1.5rem;
}

/* Numbered ledger — two-column capabilities variant (events page) */
.approach--ledger {
  grid-template-columns: repeat(2, 1fr);
  row-gap: clamp(2rem, 4vw, 2.75rem);
}

.approach__num {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: var(--color-red);
  margin-bottom: 1rem;
}

.approach__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.approach__text {
  color: var(--color-ink-soft);
  font-size: 0.975rem;
}

/* ---------- Value stats ---------- */

.value-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.value-stats__item {
  border-top: 1px solid var(--color-rule);
  padding-top: 1.5rem;
}

.value-stats__arrow {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.value-stats__label {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.25;
}

/* ---------- Selected engagements ---------- */

.engagements {
  text-align: center;
}

.engagements__list {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--color-ink);
}

.engagements__list span {
  display: inline-block;
  margin: 0 0.75rem;
}

/* Leading dot before every item (clean separator list; centered by .engagements). */
.engagements__list span::before {
  content: "·";
  color: var(--color-red);
  margin-right: 1.5rem;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.contact-info dt {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.contact-info dd {
  margin: 0;
  font-size: 1.125rem;
  font-family: var(--font-serif);
  line-height: 1.3;
}

.form {
  display: grid;
  gap: 1.25rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form label {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.form input,
.form select,
.form textarea {
  font: inherit;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  padding: 0.65rem 0;
  outline: none;
  transition: border-color 0.2s var(--ease);
  border-radius: 0;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-bottom-color: var(--color-ink);
}

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

.form__actions {
  margin-top: 0.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: 3.5rem 2rem;
  margin-top: 0;
}

.site-footer a:hover {
  opacity: 0.75;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.footer-tag {
  color: #bfbab0;
  font-size: 0.95rem;
  max-width: 32ch;
}

.footer-heading {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8c877d;
  margin-bottom: 1rem;
}

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

.footer-list a {
  font-size: 0.95rem;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: #8c877d;
  letter-spacing: 0.08em;
}

/* ---------- Page intro banner ---------- */

.page-intro {
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.page-intro__eyebrow {
  color: var(--color-red);
  margin-bottom: 1.25rem;
}

.page-intro__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin-bottom: 2rem;
}

.page-intro__lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--color-ink-soft);
  max-width: 52ch;
  margin-bottom: 2.25rem;
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero__grid,
  .intro-block,
  .capabilities,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .service-cards {
    grid-template-columns: 1fr;
  }

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

  .approach {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .approach--ledger {
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
  }

  /* compact reading rhythm on phones: number sits inline with the title */
  .approach__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: baseline;
    padding-top: 1.1rem;
  }

  .approach__num {
    margin: 0;
  }

  .approach__title {
    margin: 0;
    font-size: 1.35rem;
  }

  .approach__text {
    grid-column: 1 / -1;
    margin: 0.4rem 0 0;
  }

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

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

  .footer-meta {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .nav__toggle {
    display: block;
  }

  .nav__links {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-rule);
    padding: 1rem var(--gutter) 1.5rem;
    /* clear the viewport fully: own height plus the 72px header offset */
    transform: translateY(calc(-100% - 73px));
    transition: transform 0.35s var(--ease);
  }

  .nav__links.is-open {
    transform: translateY(0);
  }

  .nav__links li {
    width: 100%;
    border-bottom: 1px solid var(--color-rule);
  }

  .nav__links li:last-child {
    border-bottom: 0;
  }

  .nav__links a {
    display: block;
    padding: 1rem 0;
  }

  /* the dropdown panel is paper — links must be ink even under dark heroes,
     where the desktop header paints them paper-white */
  body.home .site-header .nav__links a,
  body.dark-hero .site-header .nav__links a {
    color: var(--color-ink);
  }

  /* active item stays brand-red in the open mobile panel too */
  body.home .site-header .nav__links a.is-active,
  body.dark-hero .site-header .nav__links a.is-active {
    color: var(--color-red);
  }
}

/* Phones: the wordmark is now two words ("Z Parking Group"). Step it down from a
   smaller rem base so it stays on one line and clears the hamburger, with headroom
   for large Dynamic Type / browser zoom (rem keeps the accessibility scaling intact). */
@media (max-width: 600px) {
  .nav__brand {
    gap: 0.5rem;
    font-size: 1.02rem;
    letter-spacing: 0.015em;
  }
}

/* Smallest phones: a touch more headroom so the wordmark still clears the hamburger
   at the largest Dynamic Type / 200% zoom, where the row is most cramped. */
@media (max-width: 400px) {
  .nav__brand {
    gap: 0.45rem;
    font-size: 0.95rem;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}