/* =========================================================================
   JLS VIDEO AGENCY — DESIGN SYSTEM
   Brand tokens sourced from Branding.pdf. Type uses the agency's own font
   files (assets/fonts) — see the @font-face block below.
   ========================================================================= */

@font-face {
  font-family: "JLS Accent";
  src: url("../fonts/hero-accent.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "JLS Header";
  src: url("../fonts/headers.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "JLS Poster";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "JLS Paragraph";
  src: url("../fonts/paragraphs.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --navy: #2E4A66;
  --navy-dark: #1F3349;
  --slate: #6D8EA6;
  --cream: #E8DFC6;
  --offwhite: #F7F3EC;
  --gold: #F2C14E;
  --orange: #E07A3F;
  --coral: #D6645A;
  --text: #2B3A4A;
  --text-soft: #5A6B7B;
  --white: #FFFFFF;

  /* Type — hero text/accents use the condensed display face, section
     headers use the black-weight face, body copy uses the extralight face */
  --font-accent: "JLS Accent", "Helvetica Neue", Arial, sans-serif;
  --font-header: "JLS Header", "Helvetica Neue", Arial, sans-serif;
  --font-body: "JLS Paragraph", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-accent);
  --font-poster: "JLS Poster", Georgia, "Times New Roman", serif;

  /* Layout */
  --container-w: 1240px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 50px -25px rgba(46, 74, 102, 0.35);
  --shadow-card: 0 12px 30px -18px rgba(46, 74, 102, 0.28);
  --nav-h: 84px;
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: url('../images/logo/cursor.png') 6 6, auto;
}

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

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-header);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 28px;
}

section { position: relative; }

.section-pad { padding: 110px 0; }
@media (max-width: 768px) {
  .section-pad { padding: 72px 0; }
}

.bg-cream { background: var(--cream); }
.bg-navy { background: var(--navy); color: var(--offwhite); }
.bg-navy h2, .bg-navy h3 { color: var(--offwhite); }
.bg-gold { background: var(--gold); color: var(--navy); }
.bg-gold h2, .bg-gold h3 { color: var(--navy); }
.bg-offwhite { background: var(--offwhite); }

/* Grain texture overlay for a film-photo feel */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Warm sunset vignette used behind cream/navy sections for retro depth */
.vignette { position: relative; }
.vignette::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(242, 193, 78, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(224, 122, 63, 0.14), transparent 60%);
}

/* Sprocket-hole film strip divider — a small retro nod between sections */
.film-divider {
  height: 26px;
  background-color: var(--navy-dark);
  background-image: radial-gradient(circle, rgba(247, 243, 236, 0.4) 3px, transparent 3.5px);
  background-repeat: repeat-x;
  background-size: 34px 100%;
  background-position: 16px center;
}

/* ---------------------------------------------------------------------- */
/* Type scale                                                             */
/* ---------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 13px;
  border: 1.5px dashed rgba(46, 74, 102, 0.45);
  border-radius: 100px;
  background: rgba(46, 74, 102, 0.05);
}
.eyebrow::before {
  content: "\2726";
  font-size: 12px;
  color: var(--coral);
  display: inline-block;
}
.eyebrow.on-dark {
  color: var(--gold);
  border-color: rgba(242, 193, 78, 0.4);
  background: rgba(242, 193, 78, 0.08);
}
.eyebrow.on-dark::before { color: var(--gold); }

.h-display {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(3.2rem, 7vw, 6rem);
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

.h-section {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  text-transform: uppercase;
}

.h-card {
  font-size: 1.3rem;
}

.lede {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-soft);
  line-height: 1.6;
  font-weight: 400;
}

.section-head {
  max-width: 720px;
  margin: 0 0 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head .lede { margin-top: 18px; }

/* Pulp-poster style heading — used for standout taglines. Layered, flat
   "screen-print" shadow in brand colors instead of a soft blur, like a
   projector title card — each line wipes in left-to-right. */

/* CSS Grid stacking: image and content occupy the same grid cell. The row
   is pinned to one viewport height (not the image's raw aspect-ratio
   height, which for this portrait photo would be ~1.25x the viewport width
   — wildly tall on a wide screen and the cause of the huge empty gap).
   The image uses object-fit:contain so it's still NEVER cropped — it just
   scales down to fit inside that one-screen frame, centered. The row can
   still grow taller than 100vh if the content itself ever needs more room,
   so nothing gets clipped either. */
.poster-section {
  position: relative;
  height: 190vh;
  min-height: 1200px;
  background: #0a1018;
  overflow: hidden;
}
.poster-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.poster-section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dark overlay for legibility */
.poster-section::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10, 16, 24, 0.56);
  z-index: 1;
  pointer-events: none;
}
/* Film grain layer */
.poster-section::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Content panel — covers full section, vertically centered. Side padding
   lives here (not on .poster-trigger) so the JS fit's width measurement
   matches the text's actual available width exactly — no overflow. */
.poster-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 26vh clamp(2rem, 25vw, 420px) 32px;
  box-sizing: border-box;
  pointer-events: none;
}
.poster-content > * { pointer-events: auto; }
.poster-content .poster-trigger {
  width: 100%;
  max-width: 1800px;
}

.poster-trigger.reveal { opacity: 1; transform: none; transition: none; }

.poster-heading {
  font-family: var(--font-poster);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-align: center;
  width: 100%;
  /* Base size; JS (initPosterFit in main.js) measures the longest line
     and overrides this inline so it always fills the available width
     with zero wrapping, regardless of font-metric guesswork. */
  font-size: 7.5rem;
}

.poster-line {
  display: block;
  color: #F7F3EC;
  clip-path: inset(0 100% 0 0);
  white-space: nowrap;
}

.poster-trigger.is-visible .poster-line {
  animation: project-in 0.9s cubic-bezier(0.25, 0, 0.2, 1) forwards;
}
.poster-trigger.is-visible .poster-line:nth-child(1) { animation-delay: 0.1s; }
.poster-trigger.is-visible .poster-line:nth-child(2) { animation-delay: 1.1s; }
.poster-trigger.is-visible .poster-line:nth-child(3) { animation-delay: 2.1s; }
.poster-trigger.is-visible .poster-line:nth-child(4) { animation-delay: 3.1s; }
.poster-trigger.is-visible .poster-line:nth-child(5) { animation-delay: 4.1s; }
.poster-trigger.is-visible .poster-line:nth-child(6) { animation-delay: 5.1s; }

/* Gap between sentence 1 ("down to luck.") and sentence 2 ("Post. Hope. Repeat.") */
.poster-heading .poster-line:nth-child(3) { margin-bottom: 0.55em; }

@keyframes project-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Cinema intertitle card — cream panel, navy text, compact */
.cinema-card {
  margin: 110px auto 0;
  max-width: 580px;
  background: #F7F3EC;
  border-radius: 4px;
  border: 1.5px solid rgba(46, 74, 102, 0.3);
  position: relative;
  overflow: hidden;
  padding: 32px 44px;
  text-align: center;
}
.cinema-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(46, 74, 102, 0.18);
  border-radius: 2px;
  pointer-events: none;
}
.cinema-card::after { display: none; }
.cinema-card-text {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--navy);
  line-height: 1.55;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

/* Scroll cue — sits below the cinema card. Same poster font as the main
   tagline, but a small fixed size (not auto-fit) — a quiet prompt, not a
   second giant headline. */
.scroll-cue {
  margin-top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.discover-heading {
  font-family: var(--font-poster);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #F7F3EC;
  text-align: center;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  margin: 0;
}
.scroll-cue-arrow {
  display: flex;
  color: #F7F3EC;
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}
.scroll-cue-arrow svg { display: block; }
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-arrow { animation: none; }
}

@media (max-width: 768px) {
  /* Font-size itself is set by JS (initPosterFit) at every breakpoint. */
  .poster-content { padding: 60px 0 20px; }
  .cinema-card { margin-top: 70px; padding: 28px 30px; max-width: 90%; }
  .scroll-cue { margin-top: 36px; }
}
@media (max-width: 480px) {
  .cinema-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-line { clip-path: none; animation: none; }
}

/* Alternating service rows */
.service-rows { padding: 0; }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
  padding: 96px 0;
  border-bottom: 1px solid rgba(46, 74, 102, 0.1);
}
.service-row:last-child { border-bottom: none; }
.service-row--right .service-row-image { order: 2; }
.service-row--right .service-row-content { order: 1; }
.service-row-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
}
.service-row-image img { width: 100%; height: 100%; object-fit: cover; }
.service-row-num {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 1;
  color: rgba(46, 74, 102, 0.12);
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.service-row-content { display: flex; flex-direction: column; gap: 18px; }
.service-row-content h3 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.1;
}
.service-row-content p { color: var(--text-soft); line-height: 1.7; font-size: 1.05rem; }
@media (max-width: 860px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 64px 0;
  }
  .service-row-image { aspect-ratio: 16 / 10; order: -1 !important; }
  .service-row-content { order: 1 !important; }
  .service-row-num { font-size: 4rem; }
}

/* ---------------------------------------------------------------------- */
/* Service chapters — movie-chapter-style section introductions           */
/* ---------------------------------------------------------------------- */

.chapter-banner {
  padding: 44px 0;
  overflow: hidden;
}
.chapter-banner .container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
}
.chapter-num {
  font-family: var(--font-poster);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: rgba(247, 243, 236, 0.45);
  flex-shrink: 0;
}
.chapter-title {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #F7F3EC;
  line-height: 1;
  margin: 0;
}

.service-chapter {
  background: var(--cream);
  padding: 0;
}
.chapter-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 0;
  align-items: stretch;
}
.chapter-image {
  overflow: hidden;
  border: none;
  border-right: 1.5px solid rgba(46, 74, 102, 0.12);
}
.chapter-image img,
.chapter-image video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.chapter-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 72px clamp(2rem, 6vw, 88px);
}
.chapter-content p {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 860px) {
  .chapter-banner { padding: 32px 0; }
  .chapter-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .chapter-image {
    aspect-ratio: 16 / 9;
    min-height: unset;
    border-right: none;
    border-bottom: 1.5px solid rgba(46, 74, 102, 0.12);
  }
  .chapter-content { padding: 40px 28px 56px; }
}

/* ---------------------------------------------------------------------- */
/* YouTube Management — services grid                                     */
/* ---------------------------------------------------------------------- */

.yt-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 60px 80px;
}
.yt-service-card {
  padding: 48px 40px;
  border-right: 1.5px solid rgba(46,74,102,0.12);
  border-bottom: 1.5px solid rgba(46,74,102,0.12);
}
.yt-service-card:nth-child(3n) { border-right: none; }
.yt-service-card:nth-child(4), .yt-service-card:nth-child(5), .yt-service-card:nth-child(6) { border-bottom: none; }
.yt-service-num {
  display: block;
  font-family: var(--font-accent);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--coral);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.yt-service-card h3 {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: 1.3;
}
.yt-service-card p {
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0;
}
@media (max-width: 900px) {
  .yt-services-grid { grid-template-columns: 1fr 1fr; padding: 48px 28px; }
  .yt-service-card:nth-child(3n) { border-right: 1.5px solid rgba(46,74,102,0.12); }
  .yt-service-card:nth-child(2n) { border-right: none; }
  .yt-service-card:nth-child(4), .yt-service-card:nth-child(5), .yt-service-card:nth-child(6) { border-bottom: 1.5px solid rgba(46,74,102,0.12); }
  .yt-service-card:nth-child(5), .yt-service-card:nth-child(6) { border-bottom: none; }
}
@media (max-width: 600px) {
  .yt-services-grid { grid-template-columns: 1fr; padding: 32px 24px; }
  .yt-service-card { border-right: none; }
  .yt-service-card:nth-child(6) { border-bottom: none; }
  .yt-service-card:nth-child(1), .yt-service-card:nth-child(2), .yt-service-card:nth-child(3), .yt-service-card:nth-child(4), .yt-service-card:nth-child(5) { border-bottom: 1.5px solid rgba(46,74,102,0.12); }
}

.pod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px 80px;
}
.pod-grid .yt-service-card { border-right: 1.5px solid rgba(46,74,102,0.12); border-bottom: 1.5px solid rgba(46,74,102,0.12); }
.pod-grid .yt-service-card:nth-child(2n) { border-right: none; }
.pod-grid .yt-service-card:nth-child(3), .pod-grid .yt-service-card:nth-child(4) { border-bottom: none; }
.pod-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pod-includes li {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text);
  padding-left: 18px;
  position: relative;
}
.pod-includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
@media (max-width: 700px) {
  .pod-grid { grid-template-columns: 1fr; padding: 32px 24px; }
  .pod-grid .yt-service-card { border-right: none; border-bottom: 1.5px solid rgba(46,74,102,0.12); }
  .pod-grid .yt-service-card:nth-child(3), .pod-grid .yt-service-card:nth-child(4) { border-bottom: 1.5px solid rgba(46,74,102,0.12); }
  .pod-grid .yt-service-card:last-child { border-bottom: none; }
}

.audit-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 60px;
  max-width: 860px;
  margin: 44px auto 0;
  list-style: none;
  padding: 0;
}
.audit-checklist li {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.audit-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}
.audit-checklist li:last-child { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .audit-checklist { grid-template-columns: 1fr; }
  .audit-checklist li:last-child { grid-column: auto; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 100px;
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 16px 30px; font-size: 0.9rem; }

.btn-primary {
  background: var(--gold);
  color: var(--navy-dark);
  box-shadow: 0 14px 30px -12px rgba(242, 193, 78, 0.55);
}
.btn-primary:hover { background: var(--coral); color: var(--white); }

.btn-secondary {
  background: transparent;
  color: var(--offwhite);
  border-color: rgba(247, 243, 236, 0.55);
}
.btn-secondary:hover { background: rgba(247, 243, 236, 0.12); }

.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: var(--offwhite); }

/* Ghost button for nav — adapts between transparent and scrolled states */
.btn-nav-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
}
.btn-nav-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  color: #fff;
}
.site-nav.is-scrolled .btn-nav-outline,
.site-nav.is-solid .btn-nav-outline {
  color: var(--navy);
  border-color: var(--navy);
}
.site-nav.is-scrolled .btn-nav-outline:hover,
.site-nav.is-solid .btn-nav-outline:hover {
  background: rgba(46,74,102,0.08);
  color: var(--navy);
}

.btn-block { width: 100%; }

/* ---------------------------------------------------------------------- */
/* Nav                                                                    */
/* ---------------------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.site-nav.is-scrolled,
.site-nav.is-solid {
  background: var(--offwhite);
  box-shadow: 0 8px 30px -20px rgba(46, 74, 102, 0.5);
  height: 72px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-logo img { height: 40px; width: auto; }
.nav-logo .logo-dark { display: none; }
.site-nav.is-scrolled .nav-logo .logo-light,
.site-nav.is-solid .nav-logo .logo-light { display: none; }
.site-nav.is-scrolled .nav-logo .logo-dark,
.site-nav.is-solid .nav-logo .logo-dark { display: block; }

.nav-logo-text { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-links a:not(.btn) {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--offwhite);
  position: relative;
  padding: 4px 0;
}
.site-nav.is-scrolled .nav-links a:not(.btn),
.site-nav.is-solid .nav-links a:not(.btn) { color: var(--navy); }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: currentColor;
  transition: width 0.25s ease;
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-links a.is-active::after { width: 100%; }

.nav-cta { display: none; }
@media (min-width: 1020px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--offwhite);
  transition: background 0.3s ease;
}
.site-nav.is-scrolled .nav-toggle span,
.site-nav.is-solid .nav-toggle span,
.nav-open .nav-toggle span { background: var(--navy); }

@media (max-width: 1019px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.mobile-open {
    display: flex;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--offwhite);
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 28px;
    gap: 26px;
    overflow-y: auto;
  }
  .nav-links.mobile-open a:not(.btn) { color: var(--navy); font-size: 1.3rem; }
  .nav-links.mobile-open .nav-cta { display: inline-flex; margin-top: 12px; }
}

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

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--offwhite);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(242, 193, 78, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(31, 51, 73, 0.5) 0%, rgba(31, 51, 73, 0.38) 35%, rgba(20, 28, 38, 0.95) 100%);
}
.hero-media::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.rec-tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(247, 243, 236, 0.75);
  margin-bottom: 22px;
}
.rec-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(214, 100, 90, 0.7);
  animation: rec-pulse 1.8s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 100, 90, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(214, 100, 90, 0); }
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 220px 0 90px;
  max-width: 880px;
}
.hero .eyebrow { color: var(--gold); }
.hero h1 {
  color: var(--offwhite);
  margin: 0;
  letter-spacing: -0.015em;
  text-shadow: 0 12px 40px rgba(15, 22, 30, 0.45);
}
.word-pop {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: word-pop-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.word-pop.is-italic { font-style: italic; }
.is-italic { font-style: italic; }
@keyframes word-pop-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .word-pop { animation: none; opacity: 1; transform: none; }
}
.hero-rule {
  display: block;
  width: 180px;
  height: auto;
  margin: 24px 0 28px;
}
/* Override reveal slide-up — draw the line from left to right instead */
.hero-rule.reveal { opacity: 1; transform: none; transition: none; }
.hero-rule path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero-rule.reveal.is-visible path {
  animation: hero-rule-in 0.9s cubic-bezier(0.25, 0, 0.2, 1) 0.4s forwards;
}
@keyframes hero-rule-in {
  to { stroke-dashoffset: 0; }
}
.hero .lede { color: rgba(247, 243, 236, 0.86); max-width: 560px; margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.page-hero {
  min-height: 100vh;
  align-items: center;
}
.page-hero .hero-content {
  padding: 120px 0 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
.page-hero .hero-media {
  background: var(--navy);
}
.page-hero .hero-media::after {
  background: linear-gradient(180deg, rgba(10, 16, 26, 0.55) 0%, rgba(10, 16, 26, 0.45) 50%, rgba(10, 16, 26, 0.65) 100%);
}

/* ---------------------------------------------------------------------- */
/* Marquee (trusted-by)                                                   */
/* ---------------------------------------------------------------------- */

.marquee-section { padding: 70px 0; overflow: hidden; }
.marquee-section.bg-navy { padding: 76px 0; }
.marquee-label {
  text-align: center;
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 36px;
}
.bg-navy .marquee-label { color: rgba(247, 243, 236, 0.7); }
.bg-gold .marquee-label { color: var(--navy); }
.bg-gold .marquee-track img { border-color: var(--navy-dark); }
.marquee-track-wrap {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.marquee-track img {
  height: 92px;
  width: 92px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 3px solid var(--offwhite);
  display: block;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------- */
/* What we do — service cards                                            */
/* ---------------------------------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(46, 74, 102, 0.06);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}
.service-card.featured {
  background: var(--navy);
  color: var(--offwhite);
}
.service-card.featured h3 { color: var(--offwhite); }
.service-card.featured p { color: rgba(247, 243, 236, 0.78); }
.service-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transform: rotate(-4deg);
}
.service-icon.accent-gold { background: rgba(242, 193, 78, 0.32); }
.service-icon.accent-coral { background: rgba(214, 100, 90, 0.18); }
.service-icon.accent-slate { background: rgba(109, 142, 166, 0.22); }
.service-icon.accent-orange { background: rgba(224, 122, 63, 0.2); }
.service-card.featured .service-icon { background: rgba(247, 243, 236, 0.14); }
.service-card p { color: var(--text-soft); line-height: 1.6; flex-grow: 1; }
.service-link {
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
}
.service-card.featured .service-link { color: var(--gold); }
.service-link svg { transition: transform 0.25s ease; }
.service-card:hover .service-link svg { transform: translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Case studies                                                           */
/* ---------------------------------------------------------------------- */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 120px;
}
.stat-card {
  background: var(--offwhite);
  border: 1.5px solid rgba(46,74,102,0.28);
  border-radius: 4px;
  padding: 36px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(46,74,102,0.13);
  border-radius: 2px;
  pointer-events: none;
}
.stat-card .stat-card-title {
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.stat-card p {
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: rgba(46,74,102,0.75);
  line-height: 1.75;
  margin: 0;
  position: relative;
  z-index: 1;
}
.stat-card p strong { font-weight: 700; color: var(--navy); }
.video-story {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  align-items: center;
}
.video-story--reverse {
  grid-template-columns: 1.6fr 1fr;
}
.video-story--reverse .yt-embed { order: -1; }
.video-story-quote {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--navy);
  margin: 0;
}
.video-divider {
  margin: 48px 0;
  overflow: hidden;
  opacity: 0.3;
}
.video-divider svg { width: 100%; display: block; }
.yt-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 64px;
  box-shadow: var(--shadow-card);
}
.yt-embed.yt-embed-sm {
  border-radius: 0;
  margin: 0;
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.yt-facade {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.yt-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  transition: background 0.2s ease;
}
.yt-facade:hover::after { background: rgba(0,0,0,0.1); }
.yt-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  pointer-events: none;
}
.yt-play-btn svg { width: 26px; height: 26px; fill: var(--navy); margin-left: 4px; }
.yt-facade:hover .yt-play-btn { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.video-cta {
  text-align: center;
  padding: 48px 0 8px;
}
.video-cta-headline {
  font-family: var(--font-accent);
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: 0.03em;
  color: var(--navy);
  margin-bottom: 28px;
  line-height: 1;
}
.bg-navy .video-story-quote { color: var(--offwhite); }
.bg-navy .video-cta-headline { color: var(--offwhite); }
.bg-navy .video-divider { opacity: 1; }
@media (max-width: 760px) {
  .stat-cards { grid-template-columns: 1fr; }
  .video-story, .video-story--reverse { grid-template-columns: 1fr; gap: 28px; }
  .video-story--reverse .yt-embed { order: 0; }
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .case-grid { grid-template-columns: 1fr; } }

.case-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
}
.case-card img { width: 100%; height: 100%; object-fit: cover; }
.case-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,51,73,0) 35%, rgba(20,30,40,0.92) 100%);
}
.case-card-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 26px;
  color: var(--offwhite);
}
.case-stat {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 2.6rem;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin-bottom: 6px;
}
.case-card-body h4 { color: var(--offwhite); font-size: 1.05rem; margin-bottom: 4px; }
.case-card-body p { color: rgba(247,243,236,0.78); font-size: 0.88rem; }
.placeholder-badge {
  position: absolute; top: 18px; right: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(20, 28, 38, 0.82);
  color: var(--offwhite);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px 7px 8px;
  border-radius: 6px;
  backdrop-filter: blur(2px);
}
.placeholder-badge::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 2px;
  background-image: repeating-linear-gradient(45deg, var(--gold) 0 3px, #1c2630 3px 6px);
}

/* ---------------------------------------------------------------------- */
/* About / why JLS                                                        */
/* ---------------------------------------------------------------------- */

.about-section { overflow: hidden; }
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 740px;
  align-items: stretch;
}
.about-split-image {
  position: relative;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.about-split-image::after { display: none; }
.about-split-text {
  background: var(--cream);
  padding: 80px 72px 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.about-split-text p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}
@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; }
  .about-split-image { min-height: 340px; }
  .about-split-text { padding: 48px 28px; }
}

/* ---------------------------------------------------------------------- */
/* Gallery                                                                */
/* ---------------------------------------------------------------------- */

.reel-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding: 8px clamp(28px, 5vw, 80px) 48px;
}
.reel-strip::-webkit-scrollbar { display: none; }
.reel-item {
  flex: 0 0 auto;
  width: clamp(320px, 44vw, 580px);
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: var(--shadow-card);
}
.reel-item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media (max-width: 640px) {
  .reel-item { width: 85vw; }
  .reel-strip { padding: 8px 24px 40px; }
}
.gallery-strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding: 40px clamp(28px, 5vw, 80px) 56px;
  align-items: center;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-item {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  background: var(--white);
  padding: 12px 12px 34px;
  box-shadow: var(--shadow-card);
  border-radius: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.gallery-item:nth-child(6n+1) { transform: rotate(-2.5deg); }
.gallery-item:nth-child(6n+2) { transform: rotate(1.8deg); }
.gallery-item:nth-child(6n+3) { transform: rotate(-1deg); }
.gallery-item:nth-child(6n+4) { transform: rotate(2.4deg); }
.gallery-item:nth-child(6n+5) { transform: rotate(-1.8deg); }
.gallery-item:nth-child(6n+6) { transform: rotate(1.2deg); }
.gallery-item:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.04);
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.gallery-item .frame { overflow: hidden; aspect-ratio: 1 / 1; }
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  cursor: zoom-in;
  filter: saturate(1.05) contrast(1.02);
}

.lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(20, 28, 38, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 90vw; max-height: 86vh;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 28px; right: 32px;
  background: rgba(247,243,236,0.12);
  border: none;
  color: var(--offwhite);
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.4rem;
}

/* ---------------------------------------------------------------------- */
/* FAQ accordion                                                          */
/* ---------------------------------------------------------------------- */

.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid rgba(46, 74, 102, 0.15);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  text-align: left;
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 1.08rem;
  color: var(--navy);
  cursor: pointer;
}
.faq-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.is-open .faq-answer { padding-bottom: 26px; }
.faq-answer p { color: var(--text-soft); line-height: 1.65; max-width: 700px; }

/* FAQ dark-orange variant */
.faq-dark-orange .faq-item { border-bottom-color: rgba(247,243,236,0.2); }
.faq-dark-orange .faq-question { color: var(--offwhite); }
.faq-dark-orange .faq-answer p { color: rgba(247,243,236,0.8); }
.faq-dark-orange .faq-icon { border-color: var(--offwhite); color: var(--offwhite); }
.faq-dark-orange .eyebrow { color: rgba(247,243,236,0.6); }

/* ---------------------------------------------------------------------- */
/* Testimonials                                                           */
/* ---------------------------------------------------------------------- */

.testimonial-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 24px;
  margin: 0 -4px;
}
.testimonial-strip::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 auto;
  width: 240px;
  background: #F7F3EC;
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-snap-align: start;
}
.reviews-vintage {
  position: relative;
  padding: 130px 0;
  background-image: url('../../vintage.webp');
  background-size: cover;
  background-position: center 40%;
}
.reviews-vintage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 26, 0.70);
}
.reviews-vintage .container,
.reviews-vintage .testimonial-strip {
  position: relative;
  z-index: 1;
}
.reviews-vintage .testimonial-strip {
  padding: 8px clamp(28px, 5vw, 80px) 48px;
  max-width: 1400px;
  margin: 0 auto;
}
.reviews-vintage .h-section { color: var(--offwhite) !important; }
.google-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}
.google-g {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #4285F4;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.google-badge span:last-child { font-size: 0.75rem; color: var(--text-soft); font-family: var(--font-body); }
.stars { color: var(--gold); letter-spacing: 3px; font-size: 0.95rem; }
.testimonial-card p.quote { color: var(--text); line-height: 1.65; font-size: 0.93rem; flex-grow: 1; margin: 0; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.testimonial-author-name { font-family: var(--font-header); font-weight: 900; font-size: 0.88rem; color: var(--navy); }
.testimonial-author-role { font-size: 0.76rem; color: var(--text-soft); }
.reviews-footer { text-align: center; margin-top: 36px; }
.reviews-footer a { font-family: var(--font-body); font-size: 0.88rem; color: var(--navy); text-decoration: underline; opacity: 0.65; }
.reviews-footer a:hover { opacity: 1; }

/* ---------------------------------------------------------------------- */
/* Contact / GHL embed                                                    */
/* ---------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.ghl-embed-placeholder {
  background: rgba(247, 243, 236, 0.06);
  border: 1.5px dashed rgba(247, 243, 236, 0.4);
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  color: rgba(247, 243, 236, 0.75);
}
.ghl-embed-placeholder strong { color: var(--gold); font-size: 1rem; }
.ghl-embed-placeholder span { font-size: 0.85rem; max-width: 360px; line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Get In Touch                                                           */
/* ---------------------------------------------------------------------- */

.contact-section { overflow: hidden; }

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
  align-items: stretch;
}

/* LEFT — photo */
.contact-split-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.contact-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,25,42,0.72) 28%, transparent 65%);
}
.contact-image-pills {
  position: absolute;
  bottom: 36px;
  left: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}
.contact-pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 25, 42, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #fff;
  white-space: nowrap;
}

/* RIGHT — form */
.contact-split-text {
  background: var(--navy);
  padding: 80px 72px 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-eyebrow {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 4px;
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form-field input,
.contact-form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
  resize: vertical;
}
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.contact-form-field input:focus,
.contact-form-field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.12);
}
.contact-form-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 12px 28px;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
.contact-form-success {
  display: none;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 4px 0 0;
}

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-split-image { min-height: 360px; }
  .contact-split-text { padding: 60px 28px; }
  .contact-form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Generic content blocks (service pages)                                 */
/* ---------------------------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 36px; } }

.includes-list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.includes-item { display: flex; gap: 16px; align-items: flex-start; }
.includes-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 0.85rem;
}
.includes-item h4 { font-size: 1.02rem; margin-bottom: 4px; }
.includes-item p { color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }

.process-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
.process-step {
  padding: 80px 28px 88px;
}
.process-step-word {
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(2.4rem, 3.6vw, 4rem);
  line-height: 1;
  color: var(--coral);
  margin-bottom: 32px;
  letter-spacing: 0.01em;
  font-weight: 800;
}
.process-step p {
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--text);
  margin: 0;
}
.process-arrow {
  display: flex;
  align-items: center;
  padding: 0 6px;
  margin-top: calc(72px + clamp(1.2rem, 1.8vw, 2rem));
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.process-arrow:nth-child(2) { transition-delay: 0.05s; }
.process-arrow:nth-child(4) { transition-delay: 0.3s; }
.process-arrow:nth-child(6) { transition-delay: 0.55s; }
.process-steps.is-visible .process-arrow {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr 1fr; padding: 0 28px; }
  .process-step { padding: 56px 32px 64px; }
  .process-arrow { display: none; }
}
@media (max-width: 560px) {
  .process-steps { grid-template-columns: 1fr; padding: 0 24px; }
  .process-step { padding: 48px 0 52px; border-bottom: 1.5px solid rgba(46,74,102,0.1); }
  .process-step:last-child { border-bottom: none; }
}

.pullquote {
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--offwhite);
  padding: 56px;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.pullquote p.quote {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--offwhite);
}
.pullquote .testimonial-author { justify-content: center; margin-top: 26px; }

.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--orange), var(--coral));
  padding: 70px 50px;
  text-align: center;
  color: var(--white);
}
.cta-band h2 { color: var(--white); }
.cta-band .lede { color: rgba(255,255,255,0.85); max-width: 560px; margin: 18px auto 32px; }
.cta-band .btn-primary { background: var(--navy); box-shadow: 0 14px 30px -12px rgba(31,51,73,0.5); }
.cta-band .btn-primary:hover { background: var(--navy-dark); }

.film-cta {
  position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.film-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.62);
}
.film-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 100px 40px;
  max-width: 900px;
}
.film-cta-heading {
  font-family: var(--font-accent);
  font-size: clamp(3.2rem, 7vw, 7rem);
  color: #fff;
  line-height: 1;
  letter-spacing: 0.03em;
  margin: 0 0 44px;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .film-cta { min-height: 380px; }
  .film-cta-inner { padding: 70px 28px; }
}

/* ---------------------------------------------------------------------- */
/* Podcast / horizontal image gallery scroll                              */
/* ---------------------------------------------------------------------- */

.pod-gallery-section {
  background: var(--offwhite);
  padding: 72px 0 72px 64px;
  overflow: hidden;
}
.pod-gallery-label {
  font-family: var(--font-accent);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.03em;
  color: var(--navy);
  margin: 0 0 40px;
  line-height: 1;
}
.pod-gallery-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 24px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(46,74,102,0.08);
}
.pod-gallery-scroll:active { cursor: grabbing; }
.pod-gallery-scroll::-webkit-scrollbar { height: 4px; }
.pod-gallery-scroll::-webkit-scrollbar-track { background: rgba(46,74,102,0.08); border-radius: 4px; }
.pod-gallery-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.pod-gallery-card {
  flex-shrink: 0;
  width: 340px;
  height: 460px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}
.pod-gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.32) 50%, rgba(0,0,0,0) 100%);
}
.pod-gallery-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 22px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.pod-card-left, .pod-card-right { display: flex; flex-direction: column; gap: 3px; }
.pod-card-right { text-align: right; }
.pod-card-name {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}
.pod-card-sub, .pod-card-reviews {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.3;
}
.pod-card-rating {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.2;
}
@media (max-width: 600px) {
  .pod-gallery-section { padding: 48px 0 48px 24px; }
  .pod-gallery-card { width: 260px; height: 360px; }
}

/* ---------------------------------------------------------------------- */
/* Social reel gallery                                                    */
/* ---------------------------------------------------------------------- */

.social-reel-section {
  background: var(--navy-dark);
  padding: 72px 0;
  overflow: hidden;
}
.social-reel-label {
  font-family: var(--font-accent);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 auto 40px;
  line-height: 1;
  text-align: center;
  max-width: var(--container-w);
  padding: 0 28px;
}
.social-reel-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 clamp(28px, 5vw, 80px) 24px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,0.1);
}
.social-reel-scroll:active { cursor: grabbing; }
.social-reel-scroll::-webkit-scrollbar { height: 4px; }
.social-reel-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); border-radius: 4px; }
.social-reel-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.social-reel-card {
  flex-shrink: 0;
  width: 240px;
  height: 426px;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  position: relative;
  cursor: pointer;
}
.social-reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.social-reel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.2s ease;
}
.social-reel-card:hover::after { background: rgba(0,0,0,0.28); }
.social-reel-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.social-reel-card-play svg { width: 22px; height: 22px; fill: var(--navy); margin-left: 3px; }
.social-reel-card:hover .social-reel-card-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Video lightbox */
.video-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
}
.video-lightbox.is-open { display: flex; }
.video-lightbox-inner {
  position: relative;
  width: min(90vw, calc(90vh * 9 / 16));
  max-height: 90vh;
}
.video-lightbox-inner video {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: block;
  background: #000;
}
.video-lightbox-close {
  position: absolute;
  top: -44px; right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.video-lightbox-close:hover { opacity: 1; }
.reel-yt-divider {
  font-family: var(--font-accent);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 44px 0 20px;
}
.reel-yt-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 64px 32px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,0.1);
  cursor: grab;
}
.reel-yt-grid:active { cursor: grabbing; }
.reel-yt-grid::-webkit-scrollbar { height: 4px; }
.reel-yt-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); border-radius: 4px; }
.reel-yt-grid::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.reel-yt-item {
  flex: 0 0 auto;
  width: clamp(280px, 38vw, 520px);
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.reel-yt-item iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 600px) {
  .social-reel-section { padding: 48px 0; }
  .social-reel-card { width: 190px; height: 338px; }
  .reel-yt-grid { padding: 0 24px 28px; }
  .reel-yt-item { width: 85vw; }
  .reel-yt-divider { padding: 36px 24px 16px; }
}

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* Results scroll gallery                                                 */
/* ---------------------------------------------------------------------- */

.results-scroll-row {
  margin: 120px 0 0;
}
.results-scroll-label {
  font-family: var(--font-accent);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.03em;
  color: var(--offwhite);
  margin: 0 0 32px;
  line-height: 1;
  text-align: center;
}
.results-scroll-inner {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 clamp(28px, 5vw, 80px) 36px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255,255,255,0.1);
  justify-content: center;
}
.results-scroll-inner:active { cursor: grabbing; }
.results-scroll-inner::-webkit-scrollbar { display: none; }
.results-scroll-inner { scrollbar-width: none; -ms-overflow-style: none; }
.results-scroll-card {
  flex-shrink: 0;
  width: 320px;
  height: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 44px rgba(0,0,0,0.35);
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.results-scroll-card img,
.results-scroll-card video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
.results-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
  padding: 0 clamp(16px, 4vw, 48px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.results-duo-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.35);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.results-duo-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.duo-slot { position: relative; }
.duo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #2E4A66;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  z-index: 1;
}
.duo-badge--after { background: #3a7d44; }
.duo-badge--right { left: auto; right: 8px; }
.results-scroll-card .duo-badge { top: 28px; left: 28px; }
.results-scroll-card .duo-badge--right { left: auto; right: 28px; }
.results-scroll-card--center-badges .duo-badge { top: 10px; transform: none; left: 20px; }
.results-scroll-card--center-badges .duo-badge--right { top: 10px; transform: none; left: auto; right: 20px; }

@media (max-width: 768px) {
  .results-duo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .results-scroll-row { margin: 72px -28px 0; }
  .results-scroll-label { margin-left: 0; }
  .results-scroll-card { width: 300px; }
}

/* ---------------------------------------------------------------------- */
/* Audit page form                                                        */
/* ---------------------------------------------------------------------- */

.audit-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 980px) { .audit-grid { grid-template-columns: 1fr; gap: 40px; } }

.audit-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 44px;
}
.audit-card .ghl-embed-placeholder {
  border-color: rgba(46, 74, 102, 0.25);
  background: rgba(46, 74, 102, 0.04);
  color: var(--text-soft);
  min-height: 420px;
}
.audit-card .ghl-embed-placeholder strong { color: var(--orange); }

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

.site-footer {
  background: var(--offwhite);
  color: rgba(46, 74, 102, 0.7);
  padding: 28px 0 14px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(46, 74, 102, 0.15);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  margin-top: 8px;
}
.footer-logo img { height: 32px; width: auto; }
.footer-logo-text {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--navy);
}
.footer-col h5 {
  font-family: var(--font-header);
  color: var(--navy);
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 7px; }
.footer-col a { font-size: 0.92rem; color: rgba(46,74,102,0.7); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
  font-size: 0.82rem;
  color: rgba(46,74,102,0.55);
}
.social-row { display: flex; gap: 14px; }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(46,74,102,0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(46,74,102,0.7);
}
.social-row a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Scroll reveal                                                          */
/* ---------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

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

/* ========================================================================
   MOBILE OPTIMIZATION — Comprehensive responsive enhancement
   Fills gaps in the existing breakpoint system for phones (320–480px),
   mid-phones (480–768px), and portrait-tablet transition (768–860px).
   ======================================================================== */

/* ── Container edge padding: tighten on narrow phones ── */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
}
@media (max-width: 360px) {
  .container { padding: 0 14px; }
}

/* ── Global section spacing ── */
@media (max-width: 480px) {
  .section-pad { padding: 56px 0; }
}
@media (max-width: 768px) {
  .section-head { margin-bottom: 36px; }
}

/* ── Homepage hero ── */
@media (max-width: 768px) {
  .hero-content { padding: 160px 0 64px; }
  .hero .lede { margin-bottom: 28px; }
  .hero-rule { width: 140px; margin: 18px 0 20px; }
}
@media (max-width: 480px) {
  .hero-content { padding: 130px 0 48px; }
  .hero-rule { width: 110px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* ── Service-page hero ── */
@media (max-width: 768px) {
  .page-hero .hero-content { padding: 104px 0 60px; }
}
@media (max-width: 480px) {
  .page-hero .hero-content { padding: 88px 0 44px; }
  /* Inline h1 font-size on service pages locks to 4.5rem minimum (72px)
     which overflows on narrow phones — bring it down proportionally. */
  .page-hero .hero-content h1 { font-size: clamp(2.6rem, 10vw, 4rem) !important; }
}

/* ── About-split: remove tall min-height after 1-column collapse ── */
@media (max-width: 860px) {
  .about-split { min-height: 0 !important; }
}

/* ── Stat cards: reduce oversized bottom margin on single column ── */
@media (max-width: 760px) {
  .stat-cards { margin-bottom: 64px; gap: 14px; }
  .stat-card { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .stat-cards { margin-bottom: 48px; }
}

/* ── Video story: tighten gap and heading after column collapse ── */
@media (max-width: 760px) {
  .yt-embed { margin: 0 0 36px; }
  .video-cta { padding: 28px 0 0; }
  .video-cta-headline { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 20px; }
}

/* ── Service cards: reduce inner padding on single-column layout ── */
@media (max-width: 620px) {
  .service-card { padding: 28px 24px; gap: 14px; }
}

/* ── YT service and pod cards: reduce padding on mobile ── */
@media (max-width: 600px) {
  .yt-service-card { padding: 32px 24px; }
  .yt-service-num { font-size: 2.8rem; margin-bottom: 14px; }
}

/* ── Chapter banner and title ── */
@media (max-width: 480px) {
  .chapter-banner { padding: 28px 0; }
  .chapter-title { font-size: clamp(1.8rem, 6.5vw, 2.8rem); }
}

/* ── Film CTA: shrink heading and inner padding ── */
@media (max-width: 768px) {
  .film-cta-heading { font-size: clamp(2.2rem, 7vw, 5rem); margin-bottom: 32px; }
  .film-cta-inner { padding: 80px 32px; }
}
@media (max-width: 480px) {
  .film-cta { min-height: 360px; }
  .film-cta-heading { font-size: clamp(1.8rem, 8vw, 3.5rem); margin-bottom: 28px; }
  .film-cta-inner { padding: 56px 18px; }
}

/* ── Pull quote: reduce padding ── */
@media (max-width: 768px) {
  .pullquote { padding: 40px 28px; }
}
@media (max-width: 480px) {
  .pullquote { padding: 32px 18px; }
}

/* ── CTA band: reduce side padding ── */
@media (max-width: 768px) {
  .cta-band { padding: 56px 28px; }
}
@media (max-width: 480px) {
  .cta-band { padding: 44px 18px; }
}

/* ── Photo gallery strip ── */
@media (max-width: 768px) {
  .gallery-strip { padding: 24px 24px 36px; gap: 16px; }
  .gallery-item { width: 200px; }
}
@media (max-width: 480px) {
  .gallery-strip { padding: 20px 18px 28px; }
  .gallery-item { width: 180px; }
}

/* ── Reviews vintage: shrink tall vertical padding ── */
@media (max-width: 768px) {
  .reviews-vintage { padding: 80px 0; }
  .reviews-vintage .testimonial-strip { padding: 8px 24px 36px; }
}
@media (max-width: 480px) {
  .reviews-vintage { padding: 64px 0; }
  .reviews-vintage .testimonial-strip { padding: 8px 18px 28px; }
  .testimonial-card { width: 210px; }
}

/* ── Pod gallery horizontal scroll ── */
@media (max-width: 480px) {
  .pod-gallery-section { padding: 48px 0 48px 18px; }
  .pod-gallery-label { font-size: clamp(1.8rem, 6vw, 3rem); margin-bottom: 28px; }
  .pod-gallery-card { width: 230px; height: 340px; }
}
@media (max-width: 360px) {
  .pod-gallery-section { padding: 36px 0 36px 14px; }
  .pod-gallery-card { width: 200px; height: 280px; }
}

/* ── Social reel horizontal scroll ── */
@media (max-width: 480px) {
  .social-reel-section { padding: 48px 0 48px 18px; }
  .social-reel-label { font-size: clamp(1.8rem, 6vw, 3rem); margin-bottom: 28px; }
}
@media (max-width: 360px) {
  .social-reel-section { padding: 36px 0 36px 14px; }
  .social-reel-card { width: 160px; height: 284px; }
}

/* ── Results scroll gallery ── */
@media (max-width: 480px) {
  .results-scroll-row { margin: 56px -18px 0; }
  .results-scroll-label { font-size: clamp(1.8rem, 6vw, 3rem); margin-left: 0; }
  .results-scroll-inner { padding: 0 18px 28px; }
  .results-scroll-card { width: 270px; }
}
@media (max-width: 360px) {
  .results-scroll-row { margin: 48px -14px 0; }
  .results-scroll-label { margin-left: 0; }
  .results-scroll-inner { padding: 0 14px 22px; }
  .results-scroll-card { width: 240px; }
}

/* ── Marquee: scale logos on small phones ── */
@media (max-width: 480px) {
  .marquee-section { padding: 48px 0; }
  .marquee-track img { height: 72px; width: 72px; }
  .marquee-track { gap: 24px; }
}

/* ── Nav toggle: bigger tap target ── */
@media (max-width: 1019px) {
  .nav-toggle { padding: 10px; gap: 6px; }
  /* Remove tap highlight and hover underline in mobile menu */
  .nav-links a:focus { outline: none; }
  .nav-links a:not(.btn)::after { display: none; }
}

/* ── Video lightbox: portrait 9:16 fix ──────────────────────────────────
   Social reel videos are portrait 9:16. The original container used a
   landscape 16:9 formula and had no defined height, so the child video's
   height:100% resolved to nothing. Switching to aspect-ratio:9/16 gives
   the container a computed height and sizes it correctly on all screens. */
.video-lightbox-inner {
  position: relative;
  width: min(55vw, calc(88vh * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: 88vh;
}
@media (max-width: 768px) {
  .video-lightbox-inner {
    width: min(84vw, calc(88vh * 9 / 16));
  }
  /* On small screens the container may sit near the viewport top, pushing
     the close button (top:-44px) above the fold. Move it inside the frame. */
  .video-lightbox-close {
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding: 0;
    line-height: 1;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE-ONLY ADJUSTMENTS
   ──────────────────────────────────────────────────────────────────────────── */

/* 4 — Prevent horizontal scroll on all devices */
html { overflow-x: hidden; }

@media (max-width: 768px) {

  /* 1 — Center homepage hero content horizontally */
  .hero:not(.page-hero) .hero-content { text-align: center; }
  .hero:not(.page-hero) .hero-rule    { margin-left: auto; margin-right: auto; }
  .hero:not(.page-hero) .hero-actions { justify-content: center; }

  /* 1c — Homepage hero: lift content so both buttons clear the browser chrome */
  .hero:not(.page-hero) .hero-content { padding-bottom: 130px; }

  /* 2b — Poster heading: add side padding so JS measures a narrower width */
  .poster-content { justify-content: flex-start; padding: 100px 20px 20px; }

  /* 3 — Poster section: tighter height on mobile */
  .poster-section { height: 115vh; min-height: 680px; }

  /* "When it works" — allow subtitle to wrap on mobile */
  #case-studies .section-head h2 { white-space: normal !important; }
  #case-studies .section-head p  { white-space: normal !important; }

  /* 5 — Organic social hero video: zoom left, preserve faces (single-video only) */
  .page-organic .hero-media:not(.hero-media--triptych) video { object-position: 15% center; }

  /* 6 — Organic "Social Shows" (thus.jpg): show subjects, less ceiling */
  .page-organic > section:nth-of-type(2) .about-split-image {
    background-position: center 55%;
  }

  /* 6b — Homepage about-split "Built by Filmmakers" (Jason.jpg): show face */
  #why-jls .about-split-image { background-position: center 25%; }

  /* 7 — Audit page Jason.jpg: center on face, less ceiling */
  .page-audit .about-split-image {
    background-position: center 40% !important;
  }

  /* 4p — Podcast "Story Comes Together" image: centre on camera */
  .page-podcast > section:nth-of-type(5) .about-split-image {
    background-position: 50% 15%;
  }

  /* 8 — YouTube Management "YouTube Shows" image: more people, less ceiling */
  .page-youtube > section:nth-of-type(2) .about-split-image {
    background-position: center 30%;
  }

  /* 9 — Last service card in pod-grid: left-align to match all others */
  .pod-grid .yt-service-card:last-child { text-align: left !important; }
  .pod-grid .yt-service-card:last-child .yt-service-num { display: block !important; }

  /* 10 — Free Audit review grid: fix 7th-item asymmetric padding */
  .page-audit .audit-grid     { padding: 0 20px !important; }
  .page-audit .audit-full-row { padding: 36px 0 !important; }
}

@media (max-width: 480px) {
  /* Keep buttons centered in the stacked column for homepage hero */
  .hero:not(.page-hero) .hero-actions { align-items: center; }
  /* Slightly less bottom push on the smallest phones */
  .hero:not(.page-hero) .hero-content { padding-bottom: 110px; }
}

/* ── Client gallery scroll inside reviews section ── */
.client-gallery-scroll {
  overflow: hidden;
  margin-top: 56px;
  padding-bottom: 48px;
}
.client-gallery-track {
  display: flex;
  gap: 16px;
  animation: client-scroll 28s linear infinite;
  width: max-content;
}
.client-gallery-track img {
  height: 220px;
  width: auto;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
@keyframes client-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.client-gallery-scroll:hover .client-gallery-track { animation-play-state: paused; }
@media (max-width: 768px) {
  .client-gallery-track img { height: 160px; }
  /* Mobile: disable auto-scroll, enable touch drag */
  .client-gallery-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .client-gallery-track  { animation: none; }
}

/* Mobile-only line break helper */
.mobile-break { display: none; }
@media (max-width: 768px) { .mobile-break { display: inline; } }

/* Book a Call button in mobile menu: navy fill on light background */
.nav-links.mobile-open .btn-nav-outline {
  background: var(--navy);
  color: var(--offwhite);
  border-color: var(--navy);
}

/* ── Service intro: stacked layout (title+text centered, then full-width image) ── */
.podcast-shows-stacked {}
.podcast-shows-text {
  text-align: center;
  padding: 80px clamp(2rem, 6vw, 80px) 72px;
  max-width: 1100px;
  margin: 0 auto;
}
.podcast-shows-image img {
  display: block;
  width: 100%;
  max-height: 65vh;
  object-fit: cover;
  object-position: center 60%;
}
@media (max-width: 860px) {
  .podcast-shows-text { padding: 56px 28px 48px; }
}

/* ── Homepage hero: keep right-side person in frame at every viewport ──
   The right person sits at ~80% of the image width. As the viewport
   narrows the hero scales by height, increasing horizontal overflow,
   so the X% must rise progressively to track the subject.            */
.hero:not(.page-hero) .hero-media img {
  object-position: 62% 40%;           /* wide desktop — both people visible */
}
@media (max-width: 1100px) {
  .hero:not(.page-hero) .hero-media img { object-position: 67% 38%; }
}
@media (max-width: 900px) {
  .hero:not(.page-hero) .hero-media img { object-position: 72% 36%; }
}
@media (max-width: 768px) {
  .hero:not(.page-hero) .hero-media img { object-position: 77% 34%; }
}
@media (max-width: 600px) {
  .hero:not(.page-hero) .hero-media img { object-position: 81% 32%; }
}
@media (max-width: 480px) {
  .hero:not(.page-hero) .hero-media img { object-position: 84% 30%; }
}
@media (max-width: 380px) {
  .hero:not(.page-hero) .hero-media img { object-position: 87% 28%; }
}

/* ── Homepage organic social: dual portrait video panel ── */
.chapter-image--social-pair {
  display: flex;
  gap: 10px;
  background: var(--cream);
  overflow: visible;
  border-right: none;
  padding: 32px 24px;
  justify-content: center;
  align-items: flex-start;
}
.chapter-image--social-pair video {
  width: calc(50% - 5px);
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  background: #111;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .chapter-image--social-pair {
    aspect-ratio: unset;
    overflow: visible;
    background: var(--cream);
    min-height: unset;
    padding: 24px 16px 32px;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    border-right: none;
    border-bottom: none;
  }
  .chapter-image--social-pair video {
    width: calc(50% - 5px);
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    object-fit: cover;
    background: #111;
    flex-shrink: 0;
  }
}

/* ── Organic Social page: triptych hero ── */
.hero--triptych {
  background: #07080d;
}
.hero-media--triptych {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: #07080d;
  overflow: hidden;
}
.hero-media--triptych video {
  flex: 1;
  min-width: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: center center;
}
.hero-media--triptych::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7,8,13,0.62) 0%,
      rgba(7,8,13,0.38) 30%,
      rgba(7,8,13,0.38) 65%,
      rgba(7,8,13,0.82) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero--triptych .hero-content { position: relative; z-index: 2; }
@media (max-width: 600px) {
  .hero-media--triptych video:last-child { display: none; }
  .hero-media--triptych gap { gap: 3px; }
}
@media (max-width: 400px) {
  .hero-media--triptych video:nth-child(2) { display: none; }
}

/* ── Large desktop (1920px+): homepage hero + chapter text centering ── */
@media (min-width: 1920px) {
  .hero:not(.page-hero) {
    align-items: center;
  }
  .hero:not(.page-hero) .hero-content {
    padding: 80px 0;
  }
  .chapter-content {
    justify-content: center;
  }
}