/* ============================================================
   style-v4.css — Graffiti+ V4 Homepage
   Design system: Hyer Aviation — monochromatic luxury, sharp contrast
   White/Obsidian · pill shapes · massive bold type · Desert Sienna
   Scroll-driven accent color (brand yellow ↔ Desert Sienna)
   ============================================================ */

/* ── BRAND DISPLAY FONT ── */
@font-face {
  font-family: "GraffitiPlus Display";
  /* Bump the ?v= query whenever the woff2 changes so cached browsers
     fetch the new file instead of using the stale one. */
  src: url("Fonts/GraffitiPlusDisplay-Regular.woff2?v=3") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Utility — drop on any element to render it in the hand-drawn graffiti font.
   Default tightness is already baked in; no letter-spacing needed.
   Use sparingly: works for taglines, accents, and hero moments —
   not for body copy. */
.grft {
  font-family: "GraffitiPlus Display", "Inter", sans-serif;
  font-weight: 400;
  /* Letting natural irregular bottoms read as graffiti — disable line-height
     collapse and provide breathing room around descender-style glyphs. */
  line-height: 0.95;
}

/* ── DESIGN TOKENS ── */
:root {
  --obsidian:  #000d10;
  --canvas:    #ffffff;
  --slate:     #8e8e95;
  /* --sienna removed: second saturated color forbidden by brand. Yellow stands alone. */

  /* Scroll-driven accent — shifts per section */
  --accent:    #ffc800;

  /* Type scale */
  --text-body:       17px;
  --text-sub:        20px;
  --text-heading-sm: 30px;
  --text-heading:    52px;
  --text-heading-lg: 63px;

  --lead-body:    1.61;
  --lead-tight:   1.0;
  --lead-heading: 1.09;

  --track-body:    0.01em;
  --track-heading: -0.01em;
  --track-display: -0.02em;

  --w-regular: 400;
  --w-bold:    700;

  /* Spacing */
  --sp-11:  11px;
  --sp-17:  17px;
  --sp-22:  22px;
  --sp-23:  23px;
  --sp-34:  34px;
  --sp-38:  38px;
  --sp-53:  53px;
  --sp-60:  60px;
  --sp-68:  68px;
  --sp-119: 119px;

  /* Radius */
  --r-card: 0px;
  --r-pill: 0px;
}

/* ── GLOBAL ── */
body {
  background: var(--canvas);
  color: var(--obsidian);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
}

/* ── NAV OVERRIDE ── */
nav {
  background: var(--obsidian);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 48px !important;
  height: auto !important;
}

nav a, nav .nav-links a {
  color: rgba(255,255,255,0.5);
  font-size: 14px !important;
  letter-spacing: var(--track-body);
}

nav .nav-links {
  gap: 36px !important;
}

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

nav .nav-logo img {
  filter: none;
  height: 70px !important;
  width: auto !important;
}

/* ── SHARED: LABELS ── */
.v2-origin-label,
.v2-culture-label {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0;
  margin-bottom: var(--sp-23);
  background: none;
  border: none;
  transition: color 0.7s ease;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--obsidian);
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  padding: 15px 28px 16px;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: none;
  letter-spacing: var(--track-body);
  transition: background 0.7s ease, color 0.7s ease, transform 0.15s;
}

.btn-primary:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* ── 1. HERO ── */
.v2-hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.v2-hero video,
.v2-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.75) saturate(0.85);
}

.v2-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,13,16,0.75) 0%,
    rgba(0,13,16,0.15) 45%,
    rgba(0,13,16,0.0) 100%
  );
  z-index: 1;
}

.v2-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--sp-60) var(--sp-60);
  width: 100%;
  max-width: 1400px;
}

.v2-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-23);
  transition: color 0.7s ease;
}

.v2-hero-content h1 {
  font-size: clamp(2.8rem, 7.5vw, 8rem);
  font-weight: var(--w-bold);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--sp-34);
  color: var(--canvas);
  max-width: 20ch;
}

.v2-hero-content h1 em {
  font-style: normal;
  color: var(--accent);
  transition: color 0.7s ease;
}

.hero-since {
  display: inline-block;
  color: var(--accent);
  font-size: 1.35em;
  line-height: 0.9;
  margin-top: -0.18em;
  margin-left: 0.08em;
  transform: translateY(-0.05em);
}

.kern-shim {
  display: inline-block;
  width: var(--w, 0);
  font-style: normal;
}

.v2-hero-scroll {
  position: absolute;
  bottom: var(--sp-38);
  right: var(--sp-60);
  z-index: 2;
  font-size: 11px;
  font-weight: var(--w-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  writing-mode: vertical-rl;
}

/* ── 2. STATS BAR ── */
.v2-stats-bar {
  display: flex;
  align-items: stretch;
  background: var(--canvas);
  border-bottom: 1px solid rgba(0,13,16,0.07);
}

.v2-stat-item {
  flex: 1;
  padding: var(--sp-53) var(--sp-60);
  display: flex;
  flex-direction: column;
  gap: var(--sp-11);
}

.v2-stat-divider {
  width: 1px;
  background: rgba(0,13,16,0.08);
  flex-shrink: 0;
}

.v2-stat-num-img {
  height: auto;
  width: 100%;
  max-width: 280px;
  display: block;
}

.v2-stat-num {
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  line-height: 0.95;
  letter-spacing: 0;
}

.v2-stat-label {
  font-size: 11px;
  font-weight: var(--w-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ── 3b. ORIGIN LEFT COLUMN ── */
.v2-origin-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-38);
}
.v2-origin-video {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  align-self: start;
}
.v2-origin-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
}

/* ── 3. ORIGIN ── */
.v2-origin {
  padding: var(--sp-119) var(--sp-60);
  background: var(--canvas);
  border-top: 1px solid rgba(0,13,16,0.06);
}

.v2-origin-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-68);
  align-items: start;
}

.v2-origin-heading {
  font-size: clamp(var(--text-heading-sm), 3.2vw, var(--text-heading));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  line-height: var(--lead-heading);
  letter-spacing: var(--track-heading);
  margin: 0;
}

.v2-origin-text p {
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
  color: var(--slate);
  margin: 0 0 var(--sp-23);
}

.v2-origin-text p:last-child { margin: 0; }

/* ── 4. CULTURE ── */
.v2-culture {
  padding: 0 var(--sp-60) var(--sp-60);
  background: var(--canvas);
}

.v2-culture-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 340px 340px;
  gap: var(--sp-17);
}

.v2-culture-img {
  overflow: hidden;
  position: relative;
  border-radius: var(--r-card);
}

.v2-culture-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease, filter 0.4s;
  filter: brightness(0.92) saturate(0.85);
}

.v2-culture-img:hover img {
  transform: scale(1.03);
  filter: brightness(1) saturate(1);
}

.v2-culture-big {
  grid-row: 1 / 3;
}

/* Accent quote block */
.v2-culture-yellow {
  background: var(--accent);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--sp-34);
  border-radius: var(--r-card);
  transition: background 0.7s ease;
}

.v2-culture-yellow p {
  font-size: var(--text-sub);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  line-height: 1.3;
  margin: 0;
  letter-spacing: var(--track-heading);
}

/* ── 5. LOGO TICKER ── */
.v2-ticker {
  background: var(--canvas);
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  padding: var(--sp-38) 0;
}

.v2-ticker-label {
  display: block;
  padding: 0 var(--sp-60);
  margin-bottom: var(--sp-17);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.v2-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: v2-ticker 40s linear infinite;
  width: max-content;
}

.v2-tick-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-53);
  height: 28px;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.v2-tick-logo img {
  width: auto;
  height: 44px;
  display: block;
  opacity: 0.35;
  filter: brightness(0);
  transition: opacity 0.2s;
}

.v2-tick-logo:hover img { opacity: 0.7; }

@keyframes v2-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 6. PRODUCTS ── */
.v2-products {
  background: var(--obsidian);
  padding: var(--sp-119) 0 0;
}

.v2-products-header {
  padding: 0 var(--sp-60) var(--sp-34);
}

.v2-products .v2-origin-label {
  color: var(--accent);
}

.v2-products-header h2 {
  font-size: clamp(var(--text-heading-sm), 5vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--canvas);
  margin: 0 0 var(--sp-11);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-tight);
}

.v2-products-header p {
  color: var(--slate);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  margin: 0;
}

.v2-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-17);
  padding: 0 var(--sp-60) var(--sp-119);
}

.v2-product-card {
  position: relative;
  overflow: hidden;
  height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--canvas);
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s;
}

.v2-product-card:hover {
  border-color: var(--accent);
}

.v2-product-num {
  position: absolute;
  top: var(--sp-22);
  left: var(--sp-22);
  z-index: 3;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}

.v2-product-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-card);
  overflow: hidden;
}

.v2-product-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scale up from the top so the burned-in location label at the
     bottom of each clip is cropped out by the card's overflow:hidden. */
  transform: scale(1.30);
  transform-origin: center top;
  transition: transform 0.8s ease;
  filter: brightness(0.8) saturate(0.9);
}

.v2-product-card:hover .v2-product-bg video {
  transform: scale(1.34);
  transform-origin: center top;
  filter: brightness(1) saturate(1);
}

.v2-product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,13,16,0.96) 0%,
    rgba(0,13,16,0.2) 55%,
    rgba(0,13,16,0.0) 80%
  );
  z-index: 1;
}

.v2-product-content {
  position: relative;
  z-index: 2;
  padding: var(--sp-34);
}

.v2-product-content h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  margin: 0 0 var(--sp-11);
  color: var(--canvas);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-tight);
}

.v2-product-content p {
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lead-body);
  color: var(--slate);
  margin: 0 0 var(--sp-23);
}

.v2-product-link {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obsidian);
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  transition: background 0.7s ease, color 0.7s ease;
}

/* ── 7. CONTACT — Hi-Vis Bulletin ── */
.v2-contact {
  padding: var(--sp-119) var(--sp-60);
  background: var(--accent);
  color: var(--obsidian);
  border-bottom: 1px solid var(--obsidian);
}

.v2-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-119);
  align-items: start;
}

/* Left rail — stamp label, direct contact */
.v2-contact-label {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--obsidian);
  padding: 6px 10px 5px;
  margin: 0 0 var(--sp-34);
}

.v2-contact-direct h2 {
  font-size: clamp(var(--text-heading-sm), 4.2vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  margin: 0 0 var(--sp-22);
  letter-spacing: var(--track-display);
  line-height: 0.95;
}

.v2-contact-sub {
  color: var(--obsidian);
  opacity: 0.7;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--lead-body);
  margin: 0 0 var(--sp-53);
  max-width: 38ch;
}

.v2-contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-11);
  padding-top: var(--sp-22);
  border-top: 1px solid var(--obsidian);
}

.v2-contact-details a {
  color: var(--obsidian);
  text-decoration: none;
  font-size: var(--text-sub);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-body);
  transition: opacity 0.15s;
}

.v2-contact-details a:hover { opacity: 0.55; }

/* Right column — form */
.v2-contact-form { width: 100%; }

/* Inline success state shown after AJAX submit */
.form-success p {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--obsidian);
  line-height: 1.4;
}

.v2-contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-17);
  margin-bottom: var(--sp-22);
}

.v2-contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--sp-22);
}

.v2-contact-form .form-group label {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--obsidian);
  line-height: 1;
}

/* Hide verbose "(required)" — every field is required, one quiet asterisk does the job */
.v2-contact-form .form-group label span { display: none; }
.v2-contact-form .form-group label::after {
  content: ' *';
  opacity: 0.4;
  margin-left: 1px;
}

.v2-contact-form input,
.v2-contact-form textarea {
  background: var(--canvas);
  border: 2px solid var(--obsidian);
  color: var(--obsidian);
  border-radius: 0;
  font-size: var(--text-body);
  font-weight: 500;
  font-family: inherit;
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: background 0.18s ease-out, color 0.18s ease-out;
  letter-spacing: var(--track-body);
  line-height: 1.4;
}

.v2-contact-form input::placeholder,
.v2-contact-form textarea::placeholder {
  color: var(--obsidian);
  opacity: 0.3;
}

.v2-contact-form input:hover,
.v2-contact-form textarea:hover {
  background: rgba(255,255,255,0.65);
}

.v2-contact-form input:focus,
.v2-contact-form textarea:focus {
  background: var(--obsidian);
  color: var(--accent);
}

.v2-contact-form input:focus::placeholder,
.v2-contact-form textarea:focus::placeholder {
  color: var(--accent);
  opacity: 0.4;
}

.v2-contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Send — asphalt block on hi-vis, animated arrow */
.v2-contact-form .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-17);
  background: var(--obsidian);
  color: var(--accent);
  border: 2px solid var(--obsidian);
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--w-bold);
  padding: 22px 26px;
  cursor: pointer;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: var(--sp-22);
  min-width: 260px;
  width: auto;
  transition: background 0.18s ease-out, color 0.18s ease-out;
}

.v2-contact-form .btn-submit::after {
  content: '→';
  font-size: 20px;
  font-weight: var(--w-bold);
  letter-spacing: 0;
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-contact-form .btn-submit:hover {
  background: var(--canvas);
  color: var(--obsidian);
}
.v2-contact-form .btn-submit:hover::after { transform: translateX(8px); }

.v2-contact-form .btn-submit:focus-visible {
  outline: 3px solid var(--obsidian);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .v2-contact-form .btn-submit,
  .v2-contact-form .btn-submit::after,
  .v2-contact-form input,
  .v2-contact-form textarea { transition: none; }
}

/* Footer */
footer {
  background: var(--obsidian);
  border-top: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .v2-stats-bar { flex-wrap: wrap; }
  .v2-stat-item { padding: var(--sp-38) var(--sp-53); }
  .v2-stat-divider { display: none; }

  .v2-culture-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 280px 280px;
  }
  .v2-culture-big { grid-row: 1 / 2; }
}

@media (max-width: 900px) {
  .v2-hero-content { padding: 0 var(--sp-34) var(--sp-60); }
  .v2-hero-scroll { display: none; }

  .v2-origin { padding: var(--sp-68) var(--sp-34); }
  .v2-origin-inner { grid-template-columns: 1fr; gap: var(--sp-34); }

  .v2-culture { padding: 0 var(--sp-34) var(--sp-53); }
  .v2-culture-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 240px 240px;
  }

  .v2-products { padding: var(--sp-68) 0 0; }
  .v2-products-header { padding: 0 var(--sp-34) var(--sp-38); }
  .v2-products-grid { grid-template-columns: 1fr; padding: 0 var(--sp-34) var(--sp-68); }
  .v2-product-card { height: 420px; }

  .v2-contact { padding: var(--sp-68) var(--sp-34); }
  .v2-contact-inner { grid-template-columns: 1fr; gap: var(--sp-53); }
  .v2-contact-form .btn-submit { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  .v2-stats-bar { flex-direction: column; }
  .v2-stat-item { padding: var(--sp-23) var(--sp-34); border-bottom: 1px solid rgba(0,13,16,0.06); }

  .v2-culture-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 220px);
  }

  .v2-hero-content h1 { font-size: clamp(2.4rem, 11vw, 5rem); }
}

/* ============================================================
   NEW HOMEPAGE SECTIONS
   ============================================================ */

/* ── IMAGE PLACEHOLDER ── */
.img-placeholder {
  background: rgba(0,13,16,0.04);
  border: 1px dashed rgba(0,13,16,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  color: var(--slate);
  aspect-ratio: 4/3;
  width: 100%;
  position: relative;
}

.img-placeholder::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(0,13,16,0.12);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

.img-placeholder span {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,13,16,0.3);
  max-width: 28ch;
  line-height: 1.5;
  padding: 0 var(--sp-22);
}

/* ── HOW IT WORKS ── */
.v4-how {
  background: var(--canvas);
  padding: var(--sp-119) var(--sp-60);
  border-top: 1px solid rgba(0,13,16,0.06);
}

.v4-how-header {
  margin-bottom: var(--sp-34);
}

.v4-how-header h2 {
  font-size: clamp(var(--text-heading-sm), 3vw, var(--text-heading));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: 0;
  max-width: 26ch;
}

.v4-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-34);
}

.v4-how-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-23);
}

.v4-how-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.v4-how-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.v4-how-step:hover .v4-how-img img {
  transform: scale(1.04);
}

.v4-how-num {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  color: var(--accent);
}

.v4-how-step h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: 1.05;
  margin: 0;
}

.v4-how-step p {
  font-size: var(--text-body);
  color: var(--slate);
  line-height: var(--lead-body);
  margin: 0;
}

/* ── TESTIMONIALS ── */
.v4-testimonials {
  background: var(--obsidian);
  padding: var(--sp-119) var(--sp-60);
}

.v4-testimonials .v2-origin-label {
  color: var(--accent);
}

.v4-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-34);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--sp-53);
}

.v4-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-38);
  padding-right: var(--sp-34);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.v4-testimonial:last-child {
  border-right: none;
  padding-right: 0;
}

.v4-quote {
  font-size: var(--text-sub);
  font-weight: var(--w-regular);
  color: var(--canvas);
  line-height: 1.5;
  margin: 0;
  letter-spacing: var(--track-body);
}

.v4-attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v4-attr-name {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-body);
}

.v4-attr-role {
  font-size: 13px;
  font-weight: var(--w-regular);
  color: var(--slate);
  letter-spacing: var(--track-body);
}

/* ── PRICING ── */
.v4-pricing {
  background: var(--accent);
  padding: var(--sp-119) var(--sp-60);
}

.v4-pricing .v2-origin-label {
  color: var(--obsidian);
}

.v4-pricing-inner h2 {
  font-size: clamp(var(--text-heading), 5vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: 0 0 var(--sp-23);
}

.v4-pricing-inner h2 em {
  font-style: normal;
}

.v4-pricing-inner p {
  font-size: var(--text-body);
  color: rgba(0,13,16,0.65);
  line-height: var(--lead-body);
  margin: 0 0 var(--sp-38);
  max-width: 52ch;
}

.v4-pricing .btn-primary {
  background: var(--obsidian);
  color: var(--canvas);
}

.v4-pricing .btn-primary:hover {
  opacity: 0.85;
}

/* ── FAQ ── */
.v4-faq {
  background: var(--canvas);
  padding: var(--sp-119) var(--sp-60);
  border-top: 1px solid rgba(0,13,16,0.06);
}

.v4-faq-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-119);
  align-items: start;
}

.v4-faq-header h2 {
  font-size: clamp(var(--text-heading-sm), 3vw, var(--text-heading));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: 0;
}

.v4-faq-list {
  display: flex;
  flex-direction: column;
}

.v4-faq-item {
  border-top: 1px solid rgba(0,13,16,0.1);
  padding: var(--sp-23) 0;
}

.v4-faq-item:last-child {
  border-bottom: 1px solid rgba(0,13,16,0.1);
}

.v4-faq-item summary {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-body);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.v4-faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: var(--w-regular);
  color: var(--slate);
  flex-shrink: 0;
  margin-left: var(--sp-22);
  transition: transform 0.2s;
}

.v4-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.v4-faq-item p {
  font-size: var(--text-body);
  color: var(--slate);
  line-height: var(--lead-body);
  margin: var(--sp-17) 0 0;
}

/* ── RESPONSIVE: NEW SECTIONS ── */
@media (max-width: 1024px) {
  .v4-how-grid { grid-template-columns: repeat(2, 1fr); }
  .v4-testimonials-grid { grid-template-columns: 1fr; }
  .v4-testimonial { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-right: 0; padding-bottom: var(--sp-38); }
  .v4-testimonial:last-child { border-bottom: none; padding-bottom: 0; }
  .v4-faq-inner { grid-template-columns: 1fr; gap: var(--sp-53); }
}

@media (max-width: 900px) {
  .v4-how,
  .v4-testimonials,
  .v4-pricing,
  .v4-faq {
    padding-left: var(--sp-34);
    padding-right: var(--sp-34);
  }
}

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

/* ============================================================
   HOMEPAGE — NEW SECTIONS (tagline, use-cases, highlights, community)
   ============================================================ */

/* ── TAGLINE STRIP ── */
.v4-tagline-strip {
  background: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--sp-60);
  padding: var(--sp-53) var(--sp-60);
  flex-wrap: nowrap;
}
.v4-tagline-img {
  flex: 1;
  min-width: 0;
  height: auto;
  display: block;
}
.v4-tagline-text {
  flex: 1;
  min-width: 0;
  text-align: center;
  color: var(--obsidian);
  font-size: clamp(2.5rem, 6vw, 7rem);
  line-height: 0.95;
  white-space: nowrap;
  /* Compensate for the font's baked-in negative side bearings so
     adjacent taglines don't visually crash into each other. */
  padding: 0 0.4em;
}
@media (max-width: 700px) {
  .v4-tagline-strip { flex-wrap: wrap; }
  .v4-tagline-text { flex-basis: 100%; }
}

/* ── USE CASES ── */
.v4-use-cases {
  background: var(--obsidian);
  padding: var(--sp-119) var(--sp-60);
}
.v4-use-cases-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,0.07);
}
.v4-use-cases-left {
  padding: var(--sp-68) var(--sp-60);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v4-use-cases-left h2 {
  font-size: clamp(2rem, 4vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--canvas);
  line-height: 1.0;
  letter-spacing: var(--track-heading);
  margin: var(--sp-23) 0 var(--sp-34);
}
.v4-use-cases-left p {
  color: rgba(255,255,255,0.55);
  font-size: var(--text-sub);
  line-height: 1.55;
  margin: 0;
}
.v4-use-cases-stat-row {
  display: flex;
  gap: var(--sp-38);
  margin-top: var(--sp-53);
  padding-top: var(--sp-38);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.v4-use-cases-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v4-use-cases-stat span {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--w-bold);
  color: var(--accent);
  line-height: 1;
  letter-spacing: var(--track-heading);
}
.v4-use-cases-stat em {
  font-style: normal;
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.v4-use-cases-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.07);
  border-left: 1px solid rgba(255,255,255,0.07);
}
.v4-use-case-item {
  padding: var(--sp-22) var(--sp-34);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-17);
  background: #0a0f10;
  transition: background 0.25s;
  cursor: default;
}
.v4-use-case-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: rgba(255,255,255,0.25);
  transition: color 0.25s;
}
.v4-use-case-item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v4-use-case-item strong {
  font-size: 16px;
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-heading);
  transition: color 0.25s;
}
.v4-use-case-item span {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  font-weight: var(--w-regular);
  line-height: 1.4;
  transition: color 0.25s;
}
.v4-use-case-item:hover {
  background: rgba(255,200,0,0.04);
}
.v4-use-case-item:hover svg { color: var(--accent); }
.v4-use-case-item:hover strong { color: var(--accent); }
.v4-use-case-item:hover span { color: rgba(255,255,255,0.55); }

/* ── FOR EVERYONE ── */
.v4-for-everyone {
  background: var(--obsidian);
  color: var(--canvas);
  padding: 0 !important;
}

.v4-fe-header {
  max-width: 720px;
  padding: var(--sp-119) var(--sp-60) var(--sp-34);
}

.v4-fe-header h2 {
  font-size: clamp(var(--text-heading-sm), 4vw, var(--text-heading));
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: var(--sp-23) 0;
}

.v4-fe-header p {
  font-size: var(--text-sub);
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: var(--lead-body);
}

/* Panels */
.v4-fe-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.v4-fe-panel {
  position: relative;
  overflow: hidden;
}

.v4-fe-panel-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.v4-fe-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s ease;
}

.v4-fe-panel:hover .v4-fe-panel-img img {
  transform: scale(1.04);
}

.v4-fe-panel-content {
  padding: var(--sp-38) var(--sp-60);
  background: #0a0d0e;
}

.v4-fe-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--obsidian);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 11px;
  margin-bottom: var(--sp-22);
}

.v4-fe-panel-content h3 {
  font-size: clamp(36px, 4.5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin-bottom: var(--sp-17);
}

.v4-fe-panel-content p {
  font-size: var(--text-body);
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: var(--lead-body);
}

/* Showcase */
.v4-fe-showcase {
  position: relative;
  margin-top: 3px;
  overflow: hidden;
  height: clamp(300px, 30vw, 480px);
}

.v4-fe-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.v4-fe-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,13,16,0.88) 0%, rgba(0,13,16,0.25) 45%, rgba(0,13,16,0.25) 65%, rgba(0,13,16,0.88) 100%);
  z-index: 1;
  pointer-events: none;
}

.v4-fe-showcase-text {
  position: absolute;
  left: var(--sp-60);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 420px;
}

.v4-fe-showcase-text h3 {
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: var(--sp-17) 0 var(--sp-17);
}

.v4-fe-showcase-text p {
  font-size: var(--text-body);
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: var(--lead-body);
}

/* Responsive */
@media (max-width: 768px) {
  .v4-fe-header { padding: var(--sp-68) var(--sp-34) var(--sp-53); }
  .v4-fe-panels { grid-template-columns: 1fr; }
  .v4-fe-panel-content { padding: var(--sp-34); }
  .v4-fe-showcase-text { left: var(--sp-34); max-width: 280px; }

}

/* ── CASE CROSSFADE ── */
.case-fade {
  position: relative;
}

.case-fade__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.case-fade__slide.active {
  opacity: 1;
  position: relative; /* first/active takes up space */
}

/* ── RENTAL CASE STUDIES ── */
.v4-rental-cases {
  background: var(--canvas);
  padding: var(--sp-119) 0;
  border-top: 1px solid rgba(0,13,16,0.06);
}

.v4-rental-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--sp-68);
  border-top: 1px solid rgba(0,13,16,0.08);
}

.v4-rental-case {
  background: var(--canvas);
  border-right: 1px solid rgba(0,13,16,0.08);
  overflow: hidden;
}

.v4-rental-case:last-child { border-right: none; }

.v4-rental-case .v4-highlight-img {
  aspect-ratio: 3/2;
}

.v4-rental-case:hover .v4-highlight-img img {
  transform: scale(1.04);
  filter: brightness(0.95) saturate(1);
}

.v4-rental-case .v4-highlight-body {
  padding: var(--sp-34) var(--sp-38) var(--sp-53);
}

/* ── Card button vertical alignment (site-wide) ──
   Make cards equal-height with their footer link pinned to the bottom,
   so "View project →" lines up across a row regardless of copy length. */
.v4-highlight-card,
.v4-rental-case {
  display: flex;
  flex-direction: column;
}

.v4-highlight-card .v4-highlight-body,
.v4-rental-case .v4-highlight-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.v4-highlight-card .v4-highlight-link,
.v4-rental-case .v4-highlight-link {
  margin-top: auto;
  padding-top: var(--sp-22);
  align-self: flex-start;
}

@media (max-width: 768px) {
  .v4-rental-cases-grid { grid-template-columns: 1fr; }
  .v4-rental-case { border-right: none; border-bottom: 1px solid rgba(0,13,16,0.08); }
}

/* ── RENTAL CARDS — v4 restyle ── */
.rental-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.rental-card {
  background: #0e1214 !important;
  padding: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
  overflow: hidden !important;
}

.rental-card:last-child {
  border-right: none !important;
}

.rental-card-img {
  width: 100% !important;
  /* Container shorter than the 16:9 source so object-fit:cover +
     object-position:center top crops the bottom ~12% of the video,
     hiding the burned-in caption strip. */
  aspect-ratio: 12/5 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  margin: 0 !important;
  background: #111 !important;
}

/* text area below the full-bleed video */
.rental-card-body {
  padding: var(--sp-34) var(--sp-38) var(--sp-38) !important;
}

.rental-card-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--accent) !important;
  margin-bottom: var(--sp-11) !important;
  font-family: 'Inter', sans-serif !important;
}

.rental-card h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
  font-weight: var(--w-bold) !important;
  color: var(--canvas) !important;
  letter-spacing: var(--track-heading) !important;
  margin: 0 0 var(--sp-17) !important;
  font-family: 'Inter', sans-serif !important;
}

.rental-card p {
  font-size: var(--text-body) !important;
  color: rgba(255,255,255,0.50) !important;
  line-height: var(--lead-body) !important;
  margin-bottom: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Spec rows — vertical label/value list */
.rental-card-specs {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: var(--sp-22) !important;
}

.rental-card-spec {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: var(--sp-17) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.spec-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.30) !important;
  font-family: 'Inter', sans-serif !important;
  white-space: nowrap !important;
}

.spec-val {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.80) !important;
  font-family: 'Inter', sans-serif !important;
  text-align: right !important;
}

/* Best for footer */
.rental-card-bestfor {
  margin-top: var(--sp-22) !important;
  padding-top: var(--sp-17) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.40) !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
}

.rental-card-bestfor::before {
  content: 'Best for — ' !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* ── PROJECT HIGHLIGHTS ── */
.v4-highlights {
  background: var(--canvas);
  padding: var(--sp-119) 0;
  border-top: 1px solid rgba(0,13,16,0.06);
}
.v4-highlights-header {
  padding: 0 var(--sp-60) var(--sp-34);
}
.v4-highlights-header h2 {
  font-size: clamp(2rem, 4vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  line-height: 1.0;
  letter-spacing: var(--track-heading);
  margin: var(--sp-23) 0 0;
}
.v4-highlights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0,13,16,0.08);
}
.v4-highlight-card {
  border-bottom: 1px solid rgba(0,13,16,0.08);
  border-right: 1px solid rgba(0,13,16,0.08);
}
.v4-highlight-card:nth-child(even) {
  border-right: none;
}
.v4-highlight-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #111;
  display: block;
}
.v4-highlight-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.88) saturate(0.9);
  transition: transform 0.7s ease, filter 0.4s;
}
.v4-highlight-card:hover .v4-highlight-img img {
  transform: scale(1.04);
  filter: brightness(0.95) saturate(1);
}
.v4-highlight-img .img-placeholder {
  aspect-ratio: 16/9;
}
.v4-highlight-body {
  padding: var(--sp-38) var(--sp-53) var(--sp-53);
}
.v4-highlight-client {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: rgba(0,13,16,0.4);
  margin-bottom: var(--sp-11);
}
.v4-highlight-body h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  line-height: 1.1;
  letter-spacing: var(--track-heading);
  margin: 0 0 var(--sp-17);
}
.v4-highlight-link {
  display: inline-block;
  margin-top: var(--sp-22);
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obsidian);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,13,16,0.25);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.v4-highlight-link:hover { border-color: var(--obsidian); }

.v4-highlight-body p {
  font-size: var(--text-body);
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}

/* ── COMMUNITY / BEYOND THE BOOTH ── */
.v4-community {
  background: var(--obsidian);
  padding: var(--sp-119) var(--sp-60);
}
.v4-community-header {
  max-width: 680px;
  margin-bottom: var(--sp-68);
}
.v4-community-header h2 {
  font-size: clamp(2rem, 4vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--canvas);
  line-height: 1.0;
  letter-spacing: var(--track-heading);
  margin: var(--sp-23) 0 var(--sp-34);
}
.v4-community-header p {
  color: rgba(255,255,255,0.55);
  font-size: var(--text-sub);
  line-height: 1.55;
  margin: 0;
}
.v4-community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-34);
}
.v4-community-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-23);
}
.v4-community-photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.05);
}
.v4-community-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) saturate(0.8);
  transition: transform 0.7s ease, filter 0.4s;
}
.v4-community-card:hover .v4-community-photo img {
  transform: scale(1.04);
  filter: brightness(0.95) saturate(1);
}
.v4-community-photo .img-placeholder {
  aspect-ratio: 4/3;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.v4-community-photo .img-placeholder span,
.v4-community-photo .img-placeholder::before {
  opacity: 0.35;
}
.v4-community-text {
  border-top: 2px solid var(--accent);
  padding-top: var(--sp-23);
}
.v4-community-num {
  font-size: 11px;
  font-weight: var(--w-bold);
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-11);
}
.v4-community-text h3 {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: var(--w-bold);
  color: var(--canvas);
  line-height: 1.2;
  letter-spacing: var(--track-heading);
  margin: 0 0 var(--sp-17);
}
.v4-community-text p {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  margin: 0;
}

/* ── RESPONSIVE: NEW HOMEPAGE SECTIONS ── */
@media (max-width: 1024px) {
  .v4-use-cases-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-53); }
  .v4-highlights-grid { grid-template-columns: 1fr; }
  .v4-highlight-card { border-right: none; }
  .v4-community-grid { grid-template-columns: 1fr; gap: var(--sp-53); }
  .v4-community-card { flex-direction: row; gap: var(--sp-34); }
  .v4-community-photo { flex: 0 0 280px; }
}

@media (max-width: 900px) {
  .v4-use-cases,
  .v4-highlights-header,
  .v4-community { padding-left: var(--sp-34); padding-right: var(--sp-34); }
  .v4-highlight-body { padding: var(--sp-34); }
  .v4-tagline-strip { gap: var(--sp-34); padding: var(--sp-34); }
}

@media (max-width: 1024px) {
  /* Tagline reads as one stacked graffiti tag on phones/tablets */
  .v4-tagline-strip { flex-direction: column; gap: 0; padding: var(--sp-34); }
  .v4-tagline-text {
    flex-basis: auto;
    width: 100%;
    line-height: 0.68;
    padding: 0 0.2em;
    margin: -0.05em 0;
  }
}

@media (max-width: 700px) {
  .v4-community-card { flex-direction: column; }
  .v4-community-photo { flex: unset; }
  .v4-use-cases-right { grid-template-columns: minmax(0, 1fr); }
  /* Hide duplicate stat row on mobile — same numbers shown in the top stats bar */
  .v4-use-cases-stat-row { display: none; }
  /* Oversize stat numbers on mobile for visual impact */
  .v2-stat-num { font-size: clamp(4.5rem, 18vw, 7rem); line-height: 0.9; }
  .v4-use-cases-stat span { font-size: clamp(3.5rem, 14vw, 5rem); }
  /* Oversize tagline (Zero mess / Zero fumes / 100% fun) on mobile,
     stacked tight like a single graffiti tag — lines should touch */
  .v4-tagline-strip { gap: 0; }
  .v4-tagline-text {
    font-size: clamp(4rem, 16vw, 6rem);
    line-height: 0.68;
    padding: 0 0.2em;
    margin: -0.08em 0;
  }
}

/* ============================================================
   INNER PAGES — v4 overrides
   ============================================================ */

/* ── SHARED: CONTACT SECTION (inner pages) — Hi-Vis Bulletin ── */
.contact-section {
  padding: var(--sp-119) var(--sp-60);
  background: var(--accent);
  color: var(--obsidian);
  border-bottom: 1px solid var(--obsidian);
  max-width: none;
  margin: 0;
}

.contact-section h2 {
  font-size: clamp(var(--text-heading-sm), 4.2vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  margin: 0 auto var(--sp-22);
  max-width: 1200px;
  letter-spacing: var(--track-display);
  line-height: 0.95;
}

.contact-section .contact-sub {
  color: var(--obsidian);
  opacity: 0.7;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--lead-body);
  margin: 0 auto var(--sp-53);
  max-width: 1200px;
}

.contact-section .contact-form {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.contact-section .contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-17);
  margin-bottom: var(--sp-22);
}

.contact-section .contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--sp-22);
}

.contact-section .contact-form .form-group label {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--obsidian);
  line-height: 1;
}

.contact-section .contact-form .form-group label span { display: none; }
.contact-section .contact-form .form-group label::after {
  content: ' *';
  opacity: 0.4;
  margin-left: 1px;
}

.contact-section .contact-form input,
.contact-section .contact-form textarea {
  background: var(--canvas);
  border: 2px solid var(--obsidian);
  color: var(--obsidian);
  border-radius: 0;
  font-size: var(--text-body);
  font-weight: 500;
  font-family: inherit;
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: background 0.18s ease-out, color 0.18s ease-out;
  letter-spacing: var(--track-body);
  line-height: 1.4;
}

.contact-section .contact-form input::placeholder,
.contact-section .contact-form textarea::placeholder {
  color: var(--obsidian);
  opacity: 0.3;
}

.contact-section .contact-form input:hover,
.contact-section .contact-form textarea:hover {
  background: rgba(255,255,255,0.65);
}

.contact-section .contact-form input:focus,
.contact-section .contact-form textarea:focus {
  background: var(--obsidian);
  color: var(--accent);
}

.contact-section .contact-form input:focus::placeholder,
.contact-section .contact-form textarea:focus::placeholder {
  color: var(--accent);
  opacity: 0.4;
}

.contact-section .contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Send — asphalt block on hi-vis, animated arrow */
.contact-section .contact-form .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-17);
  background: var(--obsidian);
  color: var(--accent);
  border: 2px solid var(--obsidian);
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--w-bold);
  padding: 22px 26px;
  cursor: pointer;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: var(--sp-22);
  min-width: 260px;
  width: auto;
  transition: background 0.18s ease-out, color 0.18s ease-out;
}

.contact-section .contact-form .btn-submit::after {
  content: '→';
  font-size: 20px;
  font-weight: var(--w-bold);
  letter-spacing: 0;
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-section .contact-form .btn-submit:hover {
  background: var(--canvas);
  color: var(--obsidian);
}
.contact-section .contact-form .btn-submit:hover::after { transform: translateX(8px); }

.contact-section .contact-form .btn-submit:focus-visible {
  outline: 3px solid var(--obsidian);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .contact-section .contact-form .btn-submit { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-section .contact-form .btn-submit,
  .contact-section .contact-form .btn-submit::after,
  .contact-section .contact-form input,
  .contact-section .contact-form textarea { transition: none; }
}

/* ── PAGE HEADER (rentals, add-ons, gallery) ── */
.page-header {
  background: var(--obsidian);
  padding: var(--sp-68) var(--sp-60);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-header h1 {
  font-size: clamp(2.5rem, 6vw, var(--text-heading-lg));
  font-weight: var(--w-bold);
  color: var(--canvas);
  line-height: 1.0;
  letter-spacing: var(--track-heading);
  margin: 0 0 var(--sp-17);
  max-width: 22ch;
}

.page-header p {
  color: var(--accent);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  margin: var(--sp-17) 0 0;
  max-width: none;
}

/* ── RENTAL CARDS ── */
.rental-cards {
  background: var(--obsidian);
  padding: 0 var(--sp-60) var(--sp-119);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-17);
}

.rental-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s;
}

.rental-card:hover {
  border-color: var(--accent);
}

.rental-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  filter: brightness(1) saturate(1);
}

.rental-card h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-tight);
  margin: var(--sp-34) var(--sp-34) var(--sp-17);
}

.rental-card > p {
  color: var(--slate);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  margin: 0 var(--sp-34) var(--sp-17);
  flex: 1;
}

.rental-card ul {
  list-style: none;
  padding: 0 var(--sp-34) var(--sp-34);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-11);
}

.rental-card ul li {
  color: var(--slate);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  padding-left: var(--sp-22);
  position: relative;
}

.rental-card ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  transition: color 0.7s ease;
}

/* ── COMPARE SECTION ── */
.compare-section {
  background: var(--obsidian);
  padding: var(--sp-119) var(--sp-60);
}

.compare-header {
  margin-bottom: var(--sp-53);
}

.compare-section h2 {
  font-size: clamp(var(--text-heading-sm), 3vw, var(--text-heading));
  font-weight: var(--w-bold);
  letter-spacing: var(--track-heading);
  color: var(--canvas);
  margin: 0;
}

.compare-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  min-width: 620px;
  border: 1px solid rgba(255,255,255,0.09);
}

/* ── Cell base ── */
.compare-cell {
  padding: 20px var(--sp-34);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  display: flex;
  align-items: center;
}

/* Column separators — columns 2, 3, 4 */
.compare-grid > .compare-cell:nth-child(4n+2),
.compare-grid > .compare-cell:nth-child(4n+3),
.compare-grid > .compare-cell:nth-child(4n+4) {
  border-left: 1px solid rgba(255,255,255,0.07);
}

/* ── Label column (column 1) ── */
.compare-cell--label {
  font-size: var(--text-body);
  font-weight: var(--w-bold);
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.025);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Header row ── */
.compare-cell--head {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding-top: var(--sp-34);
  padding-bottom: var(--sp-34);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  position: relative;
}

/* Accent bar on top of every system column */
.compare-cell--head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.12);
}

/* LED Wall gets the yellow featured treatment */
.compare-grid > .compare-cell--head:nth-child(2)::before {
  background: var(--accent);
}

.compare-cell--head.compare-cell--label::before {
  display: none;
}

.compare-cell--head.compare-cell--label {
  background: transparent;
}

/* ── System header content ── */
.compare-sys-num {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.compare-grid > .compare-cell--head:nth-child(2) .compare-sys-num {
  color: var(--accent);
}

.compare-sys-title {
  font-size: var(--text-sub);
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-heading);
  line-height: 1.1;
}

/* ── Check states ── */
.compare-yes {
  color: var(--accent);
  font-weight: var(--w-bold);
}

.compare-no {
  color: rgba(255,255,255,0.18);
}

.compare-partial {
  font-style: italic;
  color: rgba(255,255,255,0.35);
  font-size: 15px;
}

/* ── Best for row ── */
.compare-cell--bestfor {
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: none;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  font-size: 15px;
}

.compare-cell--bestfor.compare-cell--label {
  font-style: normal;
  font-size: var(--text-body);
  background: rgba(255,255,255,0.025);
}

/* ── CTA ── */
.compare-cta {
  margin-top: var(--sp-60);
  display: flex;
  align-items: center;
  gap: var(--sp-34);
}

.compare-cta p {
  color: rgba(255,255,255,0.45);
  margin: 0;
  font-size: var(--text-body);
}

/* ── CASE STUDIES ── */
.case-studies {
  background: var(--canvas);
  padding: var(--sp-119) var(--sp-60);
  border-top: 1px solid rgba(0,13,16,0.06);
}

.case-studies h2 {
  font-size: clamp(var(--text-heading-sm), 3vw, var(--text-heading));
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: 0 0 var(--sp-68);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-34);
}

.case-card {
  display: flex;
  flex-direction: column;
}

.case-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-card);
  display: block;
  margin-bottom: var(--sp-23);
  filter: brightness(0.95) saturate(0.9);
  transition: filter 0.4s;
}

.case-card:hover .case-card-img {
  filter: brightness(1) saturate(1);
}

.case-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obsidian);
  background: var(--accent);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  margin-bottom: var(--sp-17);
  transition: background 0.7s ease;
  width: fit-content;
}

.case-card h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: 1.2;
  margin: 0 0 var(--sp-17);
}

.case-card > p {
  color: var(--slate);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  margin: 0;
}

/* ── RENTAL INCLUDES — Spec sheet ── */
.rental-includes {
  background: var(--obsidian);
  padding: var(--sp-119) var(--sp-60);
  color: var(--canvas);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.rental-includes-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-119);
  align-items: start;
}

.rental-includes-label {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--obsidian);
  background: var(--accent);
  padding: 6px 10px 5px;
  margin: 0 0 var(--sp-34);
}

.rental-includes h2 {
  font-size: clamp(var(--text-heading-sm), 4vw, var(--text-heading));
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-display);
  line-height: 0.95;
  margin: 0 0 var(--sp-23);
}

.rental-includes-lede {
  color: rgba(255,255,255,0.55);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  margin: 0;
  max-width: 36ch;
}

/* The numbered list */
.rental-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rental-includes-list li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-22);
  padding: var(--sp-22) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  align-items: baseline;
  transition: background 0.2s ease-out;
}

.rental-includes-list li:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rental-includes-list li:hover {
  background: rgba(255,200,0,0.04);
}

.rental-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 2px;
}

.rental-includes-list h3 {
  font-size: var(--text-sub);
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-body);
  line-height: 1.15;
  margin: 0 0 8px;
}

.rental-includes-list p {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.6);
  line-height: var(--lead-body);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 1024px) {
  .rental-includes { padding: var(--sp-68) var(--sp-34); }
  .rental-includes-inner { grid-template-columns: 1fr; gap: var(--sp-53); }
}

@media (max-width: 560px) {
  .rental-includes-list li {
    grid-template-columns: 56px 1fr;
    gap: var(--sp-17);
  }
}

/* ── ADD-ONS GRID ── */
.addons-grid {
  background: var(--obsidian);
  padding: var(--sp-68) 0 var(--sp-119);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.addon-card {
  background: var(--canvas);
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s;
}

.addon-card .img-placeholder {
  aspect-ratio: 3/2;
  border: none;
  border-bottom: 1px dashed rgba(0,13,16,0.15);
}

.addon-card-img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}

.addon-card h2,
.addon-card > p {
  padding-left: var(--sp-38);
  padding-right: var(--sp-38);
}

.addon-card h2 {
  padding-top: var(--sp-34);
}

.addon-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 32px rgba(0,0,0,0.06);
}

.addon-card h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  letter-spacing: var(--track-heading);
  line-height: 1.1;
  margin: 0 0 var(--sp-17);
}

.addon-card > p {
  color: var(--slate);
  font-size: var(--text-body);
  line-height: var(--lead-body);
  margin: 0;
  padding-bottom: var(--sp-38);
}

/* ── ADDON CARD — online gallery preview ── */
.addon-gallery-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0,13,16,0.08);
  aspect-ratio: 3/2;
  overflow: hidden;
}

.addon-gallery-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) saturate(0.85);
  transition: transform 0.5s ease, filter 0.3s;
}

.addon-card:hover .addon-gallery-preview img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}

/* ── ADD-ONS ARTWORK GALLERY ── */
.addon-artwork {
  background: var(--obsidian);
  padding: 0;
}

.addon-artwork-header {
  padding: var(--sp-119) var(--sp-60) var(--sp-34);
  max-width: 640px;
}

.addon-artwork-header h2 {
  font-size: clamp(var(--text-heading-sm), 4vw, var(--text-heading));
  font-weight: var(--w-bold);
  color: var(--canvas);
  letter-spacing: var(--track-heading);
  line-height: var(--lead-heading);
  margin: var(--sp-17) 0 var(--sp-17);
}

.addon-artwork-header p {
  font-size: var(--text-sub);
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: var(--lead-body);
  margin: 0;
}

.addon-artwork-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
}

.addon-artwork-item {
  overflow: hidden;
  aspect-ratio: 1;
  background: #111;
}

.addon-artwork-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) saturate(0.85);
  transition: transform 0.5s ease, filter 0.3s;
}

.addon-artwork-item:hover img {
  transform: scale(1.05);
  filter: brightness(1) saturate(1);
}

.addon-artwork-cta {
  padding: var(--sp-53) var(--sp-60) var(--sp-119);
}

/* ── ABOUT PAGE ── */
.about-body {
  background: var(--canvas);
}

.about-video-wrap {
  width: 100%;
  max-height: 70vh;
  overflow: hidden;
  display: block;
}

.about-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 70vh;
  filter: brightness(0.92) saturate(0.9);
}

.about-text {
  max-width: 800px;
  padding: var(--sp-119) var(--sp-60);
}

.about-text p {
  font-size: var(--text-sub);
  font-weight: var(--w-regular);
  color: var(--slate);
  line-height: var(--lead-body);
  margin: 0 0 var(--sp-34);
}

.about-text p:last-child { margin: 0; }

.about-text p:first-child {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-bold);
  color: var(--obsidian);
  line-height: 1.3;
}

/* ── GALLERY ── */
.gallery-filters {
  background: var(--obsidian);
  padding: var(--sp-22) var(--sp-60);
  display: flex;
  align-items: center;
  gap: var(--sp-11);
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gallery-filters > span {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-right: var(--sp-11);
}

.filter-btn {
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-pill);
  padding: 7px 18px;
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: rgba(255,255,255,0.5);
  color: var(--canvas);
}

.filter-btn.active {
  background: var(--accent);
  color: var(--obsidian);
  border-color: var(--accent);
}

.gallery-grid {
  background: var(--obsidian);
  padding: var(--sp-60) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}

.gallery-item {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 0;
  position: relative;
  background: rgba(255,255,255,0.04);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s;
  filter: brightness(0.95) saturate(0.9);
}

.gallery-item:hover img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,13,16,0.92) 0%, rgba(0,13,16,0.3) 60%, transparent 100%);
  color: var(--canvas);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 900;
  padding: var(--sp-53) var(--sp-22) var(--sp-22);
  letter-spacing: -0.01em;
  line-height: 1.15;
  opacity: 1;
}

/* ── INNER PAGE RESPONSIVE ── */
@media (max-width: 1024px) {
  .rental-cards { grid-template-columns: 1fr !important; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .addons-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .page-header,
  .rental-cards,
  .compare-section,
  .case-studies,
  .rental-includes,
  .addons-grid,
  .about-text,
  .gallery-filters,
  .gallery-grid,
  .contact-section {
    padding-left: var(--sp-34);
    padding-right: var(--sp-34);
  }

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

@media (max-width: 560px) {
  .rental-cards,
  .addons-grid,
  .gallery-grid { grid-template-columns: 1fr !important; }

  .rental-card-body { padding: var(--sp-22) var(--sp-34) var(--sp-34) !important; }
  .rental-card-img { aspect-ratio: 16/9 !important; object-position: center top !important; }
  .v4-rental-case .v4-highlight-body { padding: var(--sp-22) var(--sp-34) var(--sp-34) !important; }

  .gallery-caption { opacity: 1; }
}

/* ── HOW IT WORKS — full-bleed ── */
.v4-how {
  padding: var(--sp-119) 0 !important;
}
.v4-how-header {
  padding: 0 var(--sp-60) var(--sp-34) !important;
}
.v4-how-grid {
  gap: 0 !important;
  border-top: 1px solid rgba(0,13,16,0.08) !important;
}
.v4-how-step {
  gap: 0 !important;
  border-right: 1px solid rgba(0,13,16,0.08) !important;
}
.v4-how-step:last-child {
  border-right: none !important;
}
.v4-how-img {
  aspect-ratio: 4/3 !important;
}
.v4-how-num {
  padding: var(--sp-34) var(--sp-38) 0 !important;
}
.v4-how-step h3 {
  padding: var(--sp-17) var(--sp-38) var(--sp-11) !important;
  margin: 0 !important;
}
.v4-how-step p {
  padding: 0 var(--sp-38) var(--sp-38) !important;
  margin: 0 !important;
}

/* ── PRODUCTS GRID — full-bleed ── */
.v2-products-grid {
  padding: 0 0 var(--sp-119) !important;
  gap: 0 !important;
}

/* ── ADD-ONS GRID — full-bleed (gap + hairlines handled at source above) ── */

/* ── GALLERY GRID — full-bleed (gap + hairlines handled at source above) ── */
.v2-product-card {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
.v2-product-card:last-child {
  border-right: none !important;
}

/* ============================================================
   GALLERY — STORY LAYOUT (long-form case study)
   Alternative to the split .gal-page layout. Use when a project
   has more text, multiple images, or several videos.
   ============================================================ */
.gal-story {
  background: var(--obsidian);
  color: var(--white);
}
.gal-story .gal-story-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  background: #000;
  overflow: hidden;
}
.gal-story .gal-story-hero iframe,
.gal-story .gal-story-hero video,
.gal-story .gal-story-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.gal-story .gal-story-back {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-34) var(--sp-60) 0;
}
.gal-story .gal-story-back a {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.gal-story .gal-story-back a:hover { color: var(--accent); }

.gal-story-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-53) var(--sp-60) var(--sp-34);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-68);
  align-items: end;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gal-story-header .gal-story-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--accent);
  margin-bottom: var(--sp-17);
}
.gal-story-header h1 {
  font-size: clamp(2.2rem, 4.5vw, 4.5rem);
  font-weight: var(--w-bold);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--sp-22);
  color: var(--white);
}
.gal-story-header .includes-tags { margin: 0; }

.gal-story-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-22) var(--sp-34);
  font-size: 14px;
  align-self: end;
}
.gal-story-facts dt {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--w-bold);
  margin-bottom: 4px;
}
.gal-story-facts dd {
  color: var(--white);
  margin: 0 0 var(--sp-17);
  line-height: 1.4;
}

.gal-story-body {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-68) var(--sp-60);
}
.gal-story-body .gal-story-lede {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.45;
  color: var(--white);
  font-weight: var(--w-medium);
  margin: 0 0 var(--sp-38);
  letter-spacing: -0.005em;
}
.gal-story-body p {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  margin: 0 0 var(--sp-22);
}
.gal-story-body p strong { color: var(--white); font-weight: var(--w-bold); }
.gal-story-body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: var(--w-bold);
  color: var(--white);
  margin: var(--sp-53) 0 var(--sp-22);
  letter-spacing: var(--track-heading);
  line-height: 1.1;
}
.gal-story-body .gal-story-pullquote {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--accent);
  font-weight: var(--w-bold);
  border-left: 3px solid var(--accent);
  padding: var(--sp-17) 0 var(--sp-17) var(--sp-34);
  margin: var(--sp-38) 0;
  letter-spacing: var(--track-heading);
}

/* Media strip — flexible grid for additional photos & videos */
.gal-story-media {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-60) var(--sp-68);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-17);
}
.gal-story-media .gal-story-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
}
.gal-story-media .gal-story-tile.is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gal-story-media .gal-story-tile img,
.gal-story-media .gal-story-tile video,
.gal-story-media .gal-story-tile iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.gal-story-cta {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--sp-60) var(--sp-119);
  display: flex;
  gap: var(--sp-17);
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .gal-story-header {
    grid-template-columns: 1fr;
    gap: var(--sp-34);
    padding: var(--sp-38) var(--sp-34) var(--sp-22);
  }
  .gal-story .gal-story-back { padding: var(--sp-22) var(--sp-34) 0; }
  .gal-story-body { padding: var(--sp-38) var(--sp-34); }
  .gal-story-media { padding: 0 var(--sp-34) var(--sp-38); gap: var(--sp-11); }
  .gal-story-cta { padding: 0 var(--sp-34) var(--sp-68); }
}
@media (max-width: 600px) {
  .gal-story-media { grid-template-columns: 1fr; }
  .gal-story-facts { grid-template-columns: 1fr; }
}