/* =========================================================================
   VODA.MARKETING — Global Styles
   Brutalist-modern. Acid green on near-black. Mobile-first.
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Color — warm cream paper, brutalist-zine vibe */
  --bg-primary:     #f4ecdc;   /* warm cream paper */
  --bg-secondary:   #ebe1cd;   /* slightly darker cream, alternating sections */
  --bg-tile:        #ddd0b6;   /* deeper tile background */
  --text-primary:   #1f1a13;   /* warm ink-black */
  --text-secondary: #4d4337;   /* secondary copy */
  --text-muted:     #8a7e6c;   /* muted captions */
  --accent:         #d65a3c;   /* warm coral — primary, big moments */
  --accent-2:       #1f5239;   /* deep forest — readable accent for small text */
  --accent-warm:    #e8a85c;   /* sandy gold — highlights, stamps */
  --accent-blue:    #2c5aa8;   /* riso blue — halftone splash behind hero word */
  --accent-danger:  #8b2415;   /* deep brick — stakes only */
  --border:         #2a241b;   /* heavy ink line */

  /* Type */
  --font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* Spacing */
  --pad-section-y: 36px;
  --pad-section-x: 20px;
  --pad-container: 20px;

  /* Layout */
  --max-w: 1440px;
  --nav-h: 64px;

  /* Motion */
  --t: 180ms ease-out;
}

@media (min-width: 768px) {
  :root {
    --pad-section-y: 56px;
    --pad-section-x: 40px;
    --pad-container: 40px;
    --nav-h: 72px;
  }
}

/* ---------- 2. RESET ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  background: var(--bg-primary);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: 'ss01', 'ss02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body { font-size: 15px; }
}

img, picture, video, canvas, svg {
  display: block;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  max-width: 100%;
}

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

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

ul, ol { list-style: none; }

input, textarea, select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--text-primary);
}

/* ---------- 3. SKIP LINK ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: var(--bg-primary);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  z-index: 100;
}

.skip-link:focus { top: 0; }

/* ---------- 4. TYPOGRAPHY ---------- */
.hero-headline {
  font-size: 42px;
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.section-headline {
  font-size: 26px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sub-headline {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.body-copy {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.mono-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* Forest green for small accent text — passes contrast on cream bg */
.mono-caption--accent { color: var(--accent-2); }
.mono-caption--danger { color: var(--accent-danger); }

.italic-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.text-accent { color: var(--accent); }
.text-danger { color: var(--accent-danger); }
.text-muted  { color: var(--text-muted); }

@media (min-width: 768px) {
  .hero-headline { font-size: 56px; line-height: 0.94; }
  .section-headline { font-size: 32px; }
  .sub-headline { font-size: 24px; }
  .body-copy { font-size: 15px; }
  .mono-caption { font-size: 11px; }
}

@media (min-width: 1024px) {
  .hero-headline { font-size: 64px; }
  .section-headline { font-size: 38px; line-height: 1.05; }
  .sub-headline { font-size: 32px; }
}

/* ---------- 5. LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-container);
  padding-right: var(--pad-container);
}

.section {
  padding-top: var(--pad-section-y);
  padding-bottom: var(--pad-section-y);
  border-bottom: 1px solid var(--border);
}

.section--alt { background: var(--bg-secondary); }
.section--no-border { border-bottom: none; }

.section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .section-header { margin-bottom: 48px; padding-bottom: 32px; }
}

/* ---------- 6. NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 236, 220, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 14px;
  text-transform: uppercase;
}

.nav__logo .dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: 0.05em;
  margin: 0 0.1em;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
}

.nav__menu {
  display: none;
  align-items: center;
  gap: 24px;
}

@media (min-width: 768px) {
  .nav__menu { display: flex; }
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  transition: color var(--t);
}

.nav__link:hover { color: var(--text-primary); }
.nav__link--current { color: var(--accent); }

.nav__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 14px;
  transition: background var(--t), color var(--t);
}

.nav__cta:hover,
.nav.is-scrolled .nav__cta {
  background: var(--accent);
  color: var(--bg-primary);
}

.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

@media (min-width: 768px) {
  .nav__hamburger { display: none; }
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--t), opacity var(--t);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav__mobile {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.nav__mobile.is-open { display: block; }

.nav__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
}

.nav__mobile-link {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  padding: 26px 20px;
  display: block;
}

.nav__mobile-link--cta { color: var(--accent); }
.nav__mobile-link--current { color: var(--accent); }

@media (min-width: 768px) {
  .nav__mobile { display: none !important; }
}

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), color var(--t), transform var(--t), border-color var(--t);
}

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

.btn--primary {
  background: var(--accent);
  color: var(--text-primary);
  border-color: var(--text-primary);
  box-shadow: 3px 3px 0 var(--text-primary);
}

.btn--primary:hover {
  background: #c14a30;
  box-shadow: 5px 5px 0 var(--text-primary);
  transform: translate(-1px, -1px);
}

.btn--big {
  padding: 22px 32px;
  font-size: 13px;
  letter-spacing: 0.16em;
}

.btn--full { width: 100%; justify-content: center; }

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

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

/* Tiny inline link arrow style */
.link-arrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent);
  transition: gap var(--t);
}

.link-arrow:hover { gap: 14px; }

/* ---------- 8. PHOTO PLACEHOLDERS (with halftone) ---------- */
.photo {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #3a2f24 0%, #2a2218 50%, #1f1810 100%);
  overflow: hidden;
  border: 1.5px solid var(--text-primary);
  isolation: isolate;
}

/* Halftone dot overlay — gives photos a printed, indie-zine feel.
   Two dot grids layered for organic texture. Cream + sandy gold dots
   over the warm dark gradient for a riso-print feel.

   Opacity is driven by --halftone-opacity (set by IntersectionObserver in JS).
   Photos at the edge of the viewport show full halftone; photos centered
   in view fade their halftone to 0 to reveal the actual image. */
.photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(244, 236, 220, 0.5) 1.2px, transparent 2.0px),
    radial-gradient(circle, rgba(244, 236, 220, 0.3) 0.85px, transparent 1.7px);
  background-size: 6px 6px, 13px 13px;
  background-position: 0 0, 3px 4.5px;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: var(--halftone-opacity, 1);
  transition: opacity 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .photo::before {
    transition: none;
    background-image: none;
    opacity: 0;
  }
}

/* Bigger, punchier halftone for hero & feature photos */
.photo--halftone-strong::before {
  background-image:
    radial-gradient(circle, rgba(244, 236, 220, 0.65) 1.4px, transparent 2.3px),
    radial-gradient(circle, rgba(244, 236, 220, 0.4) 0.95px, transparent 1.9px);
  background-size: 7px 7px, 15px 15px;
}

/* Make sure caption sits above the halftone */
.photo__caption { z-index: 2; }

/* Real photos (img / picture / video) inside .photo — fill the wrapper, keep aspect ratio */
.photo > img,
.photo > picture,
.photo > picture > img,
.photo > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* When real media is present, hide the placeholder caption */
.photo:has(> img) .photo__caption,
.photo:has(> picture) .photo__caption,
.photo:has(> video) .photo__caption { display: none; }

/* Top-positioned caption that stays visible over real media — describes the work */
.photo:has(> img) .photo__caption--over,
.photo:has(> picture) .photo__caption--over,
.photo:has(> video) .photo__caption--over { display: block; }

/* Video tiles skip the halftone overlay so controls stay legible */
.photo:has(> video)::before { display: none; }

/* Warmer placeholder for portraits, BTS, and the hero */

.photo--16x10 { aspect-ratio: 16 / 10; }
.photo--4x5  { aspect-ratio: 4 / 5; }
.photo--4x3  { aspect-ratio: 4 / 3; }

.photo__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0));
}

.photo__label {
  display: block;
  color: var(--accent);
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .photo__caption { font-size: 10px; padding: 18px 20px; }
}

/* Bottom-anchored caption variant — used when a real photo sits behind it.
   Strong dark gradient at the bottom fading up so the photo still reads above. */
.photo__caption--over {
  inset: auto 0 0 0;
  padding: 56px 18px 22px;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.75) 35%, rgba(10,10,10,0.4) 70%, rgba(10,10,10,0) 100%);
  color: #f4ecdc;
  font-size: 10px;
  z-index: 4;
}

.photo__caption--over .photo__label {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .photo__caption--over { font-size: 11px; padding: 64px 22px 26px; }
}

/* ---------- CASE STUDY ---------- */
.case-study__head {
  max-width: 760px;
  margin-bottom: 32px;
}

.case-study__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: 18px;
  max-width: 640px;
}

.case-study__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 36px 0 36px;
}

@media (min-width: 768px) {
  .case-study__split { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .case-study__lead { font-size: 20px; }
}

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

.case-study__shipped li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px dashed var(--border);
  font-size: 15px;
  line-height: 1.5;
}

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

.case-study__shipped li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--accent);
  font-weight: 600;
}

/* Photo-hero variant — photo runs alongside the case study headline + body, full-section grid. */
.case-study--photo-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.case-study--photo-hero .case-study__head { margin-bottom: 0; max-width: none; }

@media (min-width: 900px) {
  .case-study--photo-hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
  /* Flipped layout — photo on left, content on right. */
  .case-study--photo-hero--reverse > :first-child { order: 2; }
}

/* Small inline CTA placed after each case study */

/* Right-column "result" — photo at natural aspect (no crop) with the sticky-note layered on top. */
.case-study__result-frame {
  position: relative;
}

.case-study__result-frame .photo {
  position: relative;
  width: 100%;
}

.case-study__result-frame .photo > picture {
  position: static;
  display: block;
}

.case-study__result-frame .photo > picture > img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Case studies that crop their hero photo (shared base — set aspect + object-position per case). */
#case-godswork .case-study__result-frame .photo,
#case-vtc .case-study__result-frame .photo {
  height: auto;
}

#case-godswork .case-study__result-frame .photo > picture,
#case-vtc .case-study__result-frame .photo > picture {
  position: absolute;
  inset: 0;
}

#case-godswork .case-study__result-frame .photo > picture > img,
#case-vtc .case-study__result-frame .photo > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* God's Work — 4:5 anchored to the top (preserves face + upper shirt, trims bottom). */
#case-godswork .case-study__result-frame .photo {
  aspect-ratio: 4 / 5;
}
#case-godswork .case-study__result-frame .photo > picture > img {
  object-position: center top;
}

/* Valley Tree — 16:10 to match the Landon compare slider, anchored toward the face. */
#case-vtc .case-study__result-frame .photo {
  aspect-ratio: 16 / 10;
}
#case-vtc .case-study__result-frame .photo > picture > img {
  object-position: center 20%;
}

.case-study__result-frame .note {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  transform: rotate(-1.4deg);
  background: var(--bg-secondary);
}

@media (min-width: 768px) {
  .case-study__result-frame .note {
    left: auto;
    right: 22px;
    bottom: 22px;
    max-width: 78%;
  }
}

.case-study__proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 36px;
}

@media (min-width: 640px) {
  .case-study__proof { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .case-study__proof--two { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.case-study__result-frame .case-study__proof {
  margin-top: 14px;
  max-width: none;
}

.case-study__result-frame .case-study__proof-head {
  margin-top: 28px;
  margin-bottom: 14px;
}

/* Single full-width screenshot — keep natural aspect, no crop. */
.case-study__proof-single {
  border: 1.5px solid var(--text-primary);
  background: #f4ecdc;
  max-width: 1100px;
}

.case-study__proof-single picture { display: block; }
.case-study__proof-single img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- PACKAGES — DIY / DWY / DFY tier cards ---------- */
.packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 32px;
}

@media (min-width: 900px) {
  .packages { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.package {
  border: 1.5px solid var(--text-primary);
  background: var(--bg);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.package--featured {
  background: var(--bg-secondary);
  box-shadow: 6px 6px 0 var(--accent);
}

.package--featured::before {
  content: 'Recommended';
  position: absolute;
  top: -11px;
  left: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 5px 10px;
  border: 1.5px solid var(--text-primary);
}

.package__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 10px;
}

.package__name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.1;
}

.package__sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  min-height: 3.6em;
}

.package__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}

.package__list li {
  padding: 9px 0 9px 24px;
  position: relative;
  font-size: 14px;
  line-height: 1.45;
}

.package__list li::before {
  content: '+';
  position: absolute;
  left: 4px;
  top: 9px;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.package__cta { margin-top: auto; }

/* Social embed grid — TikTok + Instagram blockquotes laid out in a responsive grid.
   The embed scripts replace blockquotes with iframes after load; we constrain widths
   so the iframes stay aligned in their cells. */
.embed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  justify-items: center;
  align-items: start;
}

@media (min-width: 720px) {
  .embed-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (min-width: 1100px) {
  .embed-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

.embed-cell {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 540px;
}

/* Skeleton — shows while the embed script is still fetching the post.
   Disappears once IG/TikTok injects an iframe (which gets max specificity below). */
.embed-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(10,10,10,0.04) 0%, rgba(214,90,60,0.06) 50%, rgba(10,10,10,0.04) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border: 1px dashed var(--border);
  pointer-events: none;
  z-index: 0;
}

.embed-cell::after {
  content: 'Loading post…';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 1;
  pointer-events: none;
}

/* Hide skeleton once an iframe is present (the script replaced the blockquote). */
.embed-cell:has(iframe)::before,
.embed-cell:has(iframe)::after {
  display: none;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.embed-cell .instagram-media,
.embed-cell .tiktok-embed,
.embed-cell iframe {
  margin: 0 !important;
  max-width: 100%;
  width: 100% !important;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .embed-cell::before { animation: none; }
}

/* Examples grid — one card per lane, each showing a representative photo + label. */
.examples-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 700px) {
  .examples-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

.example-card .photo {
  margin-bottom: 18px;
}

/* Landscape variant — wider cards used for paid-ads where dashboard screenshots
   and ad creatives are landscape-oriented. Auto-flows up to 3 columns at desktop. */

/* Screenshot tile — render the image fully on cream so dashboard text reads. */
.example-card .photo--proof {
  background: #f4ecdc;
}

.example-card .photo--proof > picture > img {
  object-fit: contain;
  padding: 16px;
}

/* Hero variant — used when the hero photo column is a UI screenshot
   (e.g. Meta Ads $3.82 dashboard). Cream background, no halftone, image fills. */
.photo--proof-hero {
  background: #f4ecdc;
}

.photo--proof-hero::before { display: none; }

.photo--proof-hero > picture > img {
  object-fit: cover;
  object-position: center;
  padding: 0;
}

/* Campaign / case study cards — clickable tiles linking to a case study. */
.campaign-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 800px) {
  .campaign-cards { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

.campaign-card {
  border: 1.5px solid var(--text-primary);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.campaign-card:hover,
.campaign-card:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--accent);
}

.campaign-card .photo {
  border: 0;
  border-bottom: 1.5px solid var(--text-primary);
  aspect-ratio: 16 / 10;
}

.campaign-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.campaign-card__client {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

.campaign-card__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.campaign-card__stats {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.6;
}

.campaign-card__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.campaign-card:hover .campaign-card__cta { color: var(--accent); }

@media (min-width: 1000px) {
  .campaign-cards--three {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.example-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}

.example-card__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

@media (min-width: 768px) {
  .example-card__name { font-size: 26px; }
}

.example-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 48ch;
}

/* Subheader pattern for stacking multiple galleries in one "Inside the Work" section. */
.shoot-feature + .shoot-feature {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.shoot-feature__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}

.shoot-feature__sub {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 22px;
  max-width: 64ch;
}

/* Horizontal-scroll gallery strip — single row, native aspect ratios preserved.
   Use a uniform height so a mix of portrait + landscape photos read as a clean row. */
.shoot-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 24px;
}

.shoot-gallery::-webkit-scrollbar { height: 8px; }
.shoot-gallery::-webkit-scrollbar-track { background: rgba(10,10,10,0.08); }
.shoot-gallery::-webkit-scrollbar-thumb {
  background: var(--text-primary);
  border-radius: 4px;
}

.shoot-gallery .photo {
  flex: 0 0 auto;
  height: 320px;
  width: auto;
  aspect-ratio: auto;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .shoot-gallery .photo { height: 420px; }
}

.shoot-gallery .photo > picture {
  position: static;
  display: block;
  height: 100%;
}

.shoot-gallery .photo > picture > img {
  position: static;
  width: auto;
  height: 100%;
  display: block;
  object-fit: cover;
}

.case-study__proof .photo { aspect-ratio: 4 / 3; }
.case-study__proof--two .photo--proof { aspect-ratio: 16 / 10; }
.case-study__proof .photo--proof { background: #f4ecdc; }
.case-study__proof .photo--proof img,
.case-study__proof .photo--proof picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  padding: 0;
}
.case-study__proof .photo--proof picture {
  position: absolute;
  inset: 0;
  display: block;
}

.case-study__proof-head {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-top: 36px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-study__proof-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------- BEFORE / AFTER COMPARE SLIDER ---------- */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1.5px solid var(--text-primary);
  background: #1f1810;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  --pos: 50%;
}

.compare.is-dragging { cursor: grabbing; }

.compare > picture,
.compare__after-clip > picture {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.compare__after-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #f4ecdc;
  transform: translateX(-1px);
  cursor: ew-resize;
  z-index: 5;
  box-shadow: 0 0 0 1px rgba(10,10,10,0.4);
}

.compare__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: #f4ecdc;
  border: 1.5px solid var(--text-primary);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--text-primary);
}

.compare__handle::after {
  content: '⇄';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  z-index: 1;
}

.compare__label {
  position: absolute;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4ecdc;
  background: var(--accent);
  padding: 11px 16px;
  border: 1px solid var(--accent);
  z-index: 4;
  pointer-events: none;
}

.compare__label--before { left: 14px; }
.compare__label--after  { right: 14px; }

/* Smooth motion only during the one-time wiggle; dragging stays instant. */
.compare.is-wiggling .compare__handle,
.compare.is-wiggling .compare__after-clip {
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 640px) {
  .compare { aspect-ratio: 4 / 5; }
  .compare__handle::before { width: 36px; height: 36px; }
}

/* ---------- 9. STATS STRIP ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  padding: 28px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat:nth-child(2n),
.stat:last-child { border-right: 0; }

.stat:nth-last-child(-n+2) { border-bottom: 0; }

@media (min-width: 768px) {
  .stat:nth-child(2n) { border-right: 1px solid var(--border); }
  .stat:nth-child(4n),
  .stat:last-child   { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .stat:nth-last-child(-n+4) { border-bottom: 0; }
  .stat { padding: 36px 28px; }
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.stat__value {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .stat__value { font-size: 44px; }
}

/* ---------- 10. PROBLEM / GENERIC 3-COL ---------- */
.three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .three-col {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
}

.three-col__cell {
  padding: 24px 0;
  border-top: 1px solid var(--border);
}

.three-col__cell:last-child { border-bottom: 1px solid var(--border); }

@media (min-width: 768px) {
  .three-col__cell {
    padding: 32px 28px;
    background: var(--bg-primary);
    border: 0;
  }
  .three-col__cell:last-child { border: 0; }
  .section--alt .three-col__cell { background: var(--bg-secondary); }
}

.three-col__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 16px;
}

.three-col__cell p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- 11. PLAN STEPS ---------- */
.plan {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .plan { grid-template-columns: repeat(3, 1fr); }
}

.plan__step {
  padding: 32px 24px;
  background: var(--bg-primary);
}

.section--alt .plan__step { background: var(--bg-secondary); }

.plan__num {
  font-family: var(--font-mono);
  font-size: 56px;
  line-height: 1;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .plan__num { font-size: 72px; }
  .plan__step { padding: 44px 32px; }
}

.plan__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.plan__body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 12. WORK GRID (asymmetric on desktop, 2x2 on mobile) ---------- */

/* ---------- 13. SERVICES GRID ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

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

.service-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 24px;
  background: var(--bg-primary);
  transition: background var(--t), color var(--t);
}

.section--alt .service-tile { background: var(--bg-secondary); }

.service-tile:hover {
  background: var(--bg-tile);
  color: var(--accent);
}

.service-tile--accent { color: var(--accent); }
.service-tile--accent:hover {
  background: var(--accent);
  color: var(--bg-primary);
}

.service-tile__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.service-tile--accent .service-tile__label { color: var(--accent); }

.service-tile:hover .service-tile__label { color: var(--accent); }
.service-tile--accent:hover .service-tile__label { color: var(--bg-primary); }

.service-tile__name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.service-tile__arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  transition: transform var(--t);
}

.service-tile:hover .service-tile__arrow { transform: translateX(4px); }

@media (min-width: 768px) {
  .service-tile { padding: 36px 32px; }
  .service-tile__name { font-size: 26px; }
}

@media (min-width: 1024px) {
  .service-tile__name { font-size: 30px; }
}

/* Big tile variant (for /services/ hub) */
.service-tile--big {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 36px 28px;
  min-height: 240px;
}

.service-tile--big .service-tile__name { font-size: 28px; }
.service-tile--big .service-tile__desc {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.service-tile--big .service-tile__arrow {
  margin-top: auto;
  align-self: flex-end;
}

@media (min-width: 768px) {
  .service-tile--big { padding: 48px 36px; min-height: 320px; }
  .service-tile--big .service-tile__name { font-size: 36px; }
}

/* ---------- 14. STAKES + SUCCESS DUO ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
}

@media (min-width: 768px) {
  .duo { grid-template-columns: 1fr 1fr; }
}

.duo__col {
  padding: 32px 24px;
  background: var(--bg-secondary);
}

@media (min-width: 768px) {
  .duo__col { padding: 56px 40px; }
}

/* ---------- 15. PHOTO SPLIT (side by side) ---------- */
.photo-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .photo-split { grid-template-columns: 1.6fr 1fr; gap: 24px; }
}

.photo-split--reverse {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .photo-split--reverse { grid-template-columns: 1fr 1fr; }
}

/* ---------- 16. FOOTER ---------- */
.footer {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .footer__inner { flex-direction: row; align-items: center; }
}

.footer__brand { color: var(--text-primary); }
.footer__brand .dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: 0.05em;
  margin: 0 0.1em;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
}

/* Reusable orange dot — brand mark used as a design element across the site. */
.dot-icon {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: 0.1em;
  margin-left: 0.15em;
  flex-shrink: 0;
}

.dot-icon--sm { width: 0.35em; height: 0.35em; }
.dot-icon--lg { width: 0.7em; height: 0.7em; }

.footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__link {
  color: var(--text-muted);
  transition: color var(--t);
}

.footer__link:hover { color: var(--accent); }

/* ---------- 17. FORM ---------- */
.form {
  display: grid;
  gap: 20px;
}

.form__row {
  display: grid;
  gap: 8px;
}

.form__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.form__input,
.form__textarea,
.form__select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-sans);
  transition: border-color var(--t);
  width: 100%;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: 0;
  border-color: var(--accent);
}

.form__textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-sans);
  line-height: 1.5;
}

.form__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.form__checks {
  display: grid;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 14px 16px;
}

.form__check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.form__check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ---------- 18. FAQ ---------- */
.faq {
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  gap: 24px;
}

@media (min-width: 768px) {
  .faq__q { padding: 28px 0; font-size: 19px; }
}

.faq__icon {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform var(--t);
}

.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__a {
  padding: 0 0 28px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  max-width: 720px;
}

/* ---------- 19. WORK / PORTFOLIO PAGE ---------- */

/* ---------- 20. WHAT-WE-SHOOT GRID ---------- */
.shoot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .shoot-grid { grid-template-columns: repeat(3, 1fr); }
}

.shoot-cell {
  padding: 28px 24px;
  background: var(--bg-primary);
}

.section--alt .shoot-cell { background: var(--bg-secondary); }

.shoot-cell__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.shoot-cell__name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.shoot-cell__desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .shoot-cell { padding: 36px 32px; }
  .shoot-cell__name { font-size: 22px; }
}

/* ---------- 21. INCLUDED LIST ---------- */
.included {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .included { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}

.included li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.included li::before {
  content: '\2022';
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 16px;
  align-self: center;
}

/* ---------- 22. ABOUT VALUES ---------- */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

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

@media (min-width: 1024px) {
  .values { grid-template-columns: repeat(4, 1fr); }
}

.value {
  padding: 28px 24px;
  background: var(--bg-primary);
}

.section--alt .value { background: var(--bg-secondary); }

.value__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.value__name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.value__body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 23. UTILITY ---------- */
.flow > * + * { margin-top: 1em; }
.flow-lg > * + * { margin-top: 24px; }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.cap-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.with-top-rule {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* ---------- 24. HOMEPAGE-SPECIFIC HERO ---------- */
.hero {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .hero { padding-top: 72px; padding-bottom: 72px; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 96px; padding-bottom: 96px; }
}

/* Side-by-side layout: text + photo. Stacks on mobile (text first). */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 56px;
  }
}

.hero__photo .photo {
  /* Slightly tilt the hero photo for a hand-pinned, friendly feel.
     Uses CSS vars so JS can layer parallax on top without clobbering rotation. */
  --rotate: -1.4deg;
  --parallax-y: 0px;
  transform: rotate(var(--rotate)) translateY(var(--parallax-y));
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__photo .photo:hover { --rotate: 0deg; }

@media (min-width: 1024px) {
  .hero__photo .photo { --rotate: -1.8deg; }
  .hero__photo .photo:hover { --rotate: 0deg; }
}

.hero__caption { margin-bottom: 24px; }

.hero__headline { margin-bottom: 28px; max-width: 16ch; }

@media (min-width: 1024px) {
  .hero__headline { max-width: 12ch; }
}

.hero__body {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.hero__body a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t);
}

.hero__body a:hover {
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .hero__body { font-size: 17px; }
}

/* Friendly hand-drawn arrow accent for hero CTA secondary */
.hand-arrow {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
  transform: translateY(1px) rotate(-4deg);
  margin-right: 6px;
}

/* ---------- 25. EMPATHY/AUTHORITY BOXES ---------- */
.box-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .box-row { grid-template-columns: repeat(2, 1fr); }
}

.box {
  border: 1px solid var(--border);
  padding: 24px;
}

.box__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.box__body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 26. GUIDE TWO-COL ---------- */
.guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .guide-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
  }
  /* Photo on the left, text-flow on the right (figure first in HTML).
     Photo column is centered vertically against the (typically taller) text. */
  .guide-grid--swap {
    grid-template-columns: 1fr 1.5fr;
  }
  .guide-grid--swap > figure {
    align-self: center;
  }

  /* When the text column is much taller than the photo (e.g. long story
     pages), give the photo more room and stick it to the viewport so the
     two columns feel balanced even with a long scroll. */
  .guide-grid--swap:has(.story-flow) {
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
  }
  .guide-grid--swap:has(.story-flow) > figure {
    align-self: start;
    position: sticky;
    top: 96px;
  }
}

/* ---------- Story flow design elements ---------- */
.story-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 40px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-marker__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.story-quote {
  margin: 8px 0 8px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}


/* Inline mid-page CTA — small centered button + caption used between sections. */
.inline-cta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

@media (min-width: 640px) {
  .inline-cta {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
    text-align: left;
  }
}

.inline-cta .mono-caption { color: var(--text-muted); margin: 0; }

/* ---------- 27. FINAL CTA ---------- */
.final-cta {
  text-align: center;
  padding: 80px 0;
}

@media (min-width: 768px) {
  .final-cta { padding: 112px 0; }
}

.final-cta .section-headline {
  max-width: 20ch;
  margin: 18px auto 36px;
}

.final-cta .mono-caption { display: block; margin-top: 28px; }

/* Hero variant for the /work index — centered, no companion photo,
   tight bottom spacing with a hairline divider that hands off to the case studies. */
.hero--work {
  text-align: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .hero--work { padding-bottom: 36px; }
}

@media (min-width: 1024px) {
  .hero--work { padding-bottom: 40px; }
}

.hero--work .hero__caption {
  margin-bottom: 18px;
}

.hero--work .hero__headline {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}

.hero--work .hero__body {
  border-top: 0;
  padding-top: 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* Extra vertical breathing room between each case study. The first case study
   sits right under the hero divider, so it gets a much smaller top — the
   divider already provides separation. */
#case-landon,
#case-godswork,
#case-vtc {
  padding-top: calc(var(--pad-section-y) + 32px);
  padding-bottom: calc(var(--pad-section-y) + 32px);
}

#case-landon {
  padding-top: 36px;
}

@media (min-width: 768px) {
  #case-godswork,
  #case-vtc {
    padding-top: calc(var(--pad-section-y) + 56px);
  }
  #case-landon,
  #case-godswork,
  #case-vtc {
    padding-bottom: calc(var(--pad-section-y) + 56px);
  }
  #case-landon { padding-top: 56px; }
}

/* ---------- 28. FOCUS STATES (a11y) ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* ---------- 30. SCROLL REVEAL ---------- */
/* Elements get .reveal added by JS, then .is-revealed when they enter view. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero photo composes its own transform — opt out of the reveal transform shift */
.hero__photo.reveal,
.hero__photo.reveal.is-revealed { transform: none; }
.hero__photo.reveal { opacity: 0; }
.hero__photo.reveal.is-revealed { opacity: 1; }

/* Stagger group: children fade in sequentially */

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-revealed { opacity: 1 !important; transform: none !important; }
  .stagger.is-revealed > * { animation: none !important; }
}

/* ---------- 31. MARQUEE TICKER ---------- */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  overflow: hidden;
  white-space: nowrap;
  padding: 18px 0;
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}

.marquee__item {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.marquee__item .dot { color: var(--accent); font-size: 16px; line-height: 0; }
.marquee__item em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 400;
}

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

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

/* ---------- 32. SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 60;
  transition: width 80ms linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* ---------- 33. PAPER TEXTURE ---------- */
/* Subtle noise on the body to give the cream a paper feel.
   Inline SVG so no extra request. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

main, header, footer { position: relative; z-index: 1; }

/* ---------- 34. SECTION NUMBER WATERMARK ---------- */
.section { position: relative; overflow: hidden; }

.section__watermark {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(140px, 28vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  top: 16px;
  right: -8px;
}

.section__watermark--left { right: auto; left: -8px; }

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

/* ---------- 35. STAMP ---------- */
/* A small bordered, rotated label — feels rubber-stamped onto the page. */

/* ---------- 36. STICKER ---------- */
/* A flat sticker tag with a hard offset shadow */
.sticker {
  display: inline-block;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1.5px solid var(--text-primary);
  box-shadow: 2px 2px 0 var(--text-primary);
  transform: rotate(-2deg);
}

.sticker--green { background: var(--accent-2); color: #f4ecdc; }

/* ---------- 37. ASTERISK DIVIDER ---------- */
/* Decorative row of mono symbols between sections */

/* Decorative row of orange dots — same purpose as aster-row, brand mark version. */
.dot-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  font-size: 22px;
}

.dot-row .dot-icon { margin-left: 0; }

@media (min-width: 768px) {
  .aster-row { font-size: 28px; padding: 44px 0; }
}

/* ---------- 38. HIGHLIGHT MARK ---------- */
/* Marker-style highlight behind a phrase */

/* ---------- 39. WAVY UNDERLINE ---------- */
.wavy {
  text-decoration: underline wavy var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Real halftone-of-blurred-letterform effect — the word's letterforms get
   a Gaussian blur halo, which is then halftone-screened with a dot pattern.
   Dots are dense at the letter edge and fall off as they extend out.
   Filter is defined in the SVG <defs> at the top of <body> on each page. */

/* ---------- 40. TAG PILL ---------- */

/* ---------- 41. CIRCLE BADGE ---------- */
/* Round rotating badge — for hero, etc. */
.circle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--text-primary);
  background: var(--accent-warm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.2;
  padding: 14px;
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 var(--text-primary);
}

/* ---------- 42. NOTE / INDEX CARD ---------- */
/* Index-card / sticky-note feel for asides */
.note {
  display: block;
  padding: 18px 20px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--text-primary);
  box-shadow: 4px 4px 0 var(--text-primary);
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}

.note__head {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 8px;
}