/* =========================================================
   Wabi Web — Design + Brand
   v2 · Manrope, depth-of-green, texture overlays, fixed hero
   ========================================================= */

/* ---------- Fonts ---------- */
:root {
  --font-display: "tt-commons-pro", "TT Commons Pro", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans:    "tt-commons-pro", "TT Commons Pro", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-script-big:   "Pasta Wine Big", "Caveat", cursive;
  --font-script-small: "Pasta Wine Little", "Caveat", cursive;

  /* ---------- Brand palette ---------- */
  --beige-light: #f5ebe3;
  --beige-dark:  #dbcfc4;
  --green:       #403608;
  --burnt:       #904b29;
  --brown:       #38180d;

  /* Tone derivatives */
  --green-soft: rgba(64, 54, 8, 0.08);
  --green-mid:  rgba(64, 54, 8, 0.35);
  --green-deep: #2d2606;

  /* Derived */
  --ink: var(--brown);
  --paper: var(--beige-light);
  --paper-deep: var(--beige-dark);
  --accent: var(--burnt);
  --moss: var(--green);
  --rule: rgba(64, 54, 8, 0.22);
  --rule-soft: rgba(64, 54, 8, 0.10);

  /* Spacing & rhythm */
  --container: 100%;       /* Full bleed so section content aligns with the nav */
  --container-narrow: 980px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 10vw, 144px);

  /* Radius */
  --r-sm: 2px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Top announcement bar */
  --topbar-height: 44px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--green); color: var(--beige-light); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 7.4vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--brown);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(31px, 3.5vw, 53px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--brown);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--green);
}

/* Highlight text — Manrope synthetic italic, inherits parent colour */
.h1 em, .h2 em, .h3 em,
h1 em, h2 em, h3 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}

p { margin: 0 0 1em; max-width: 64ch; }
.lede {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--brown);
  max-width: 56ch;
}

.mono, .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
}
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--green);
  display: inline-block;
}

.script {
  font-family: var(--font-script-small);
  font-size: clamp(36px, 5.6vw, 84px);
  color: var(--burnt);
  line-height: 0.9;
  letter-spacing: -0.01em;
  display: inline-block;
}
.script-small {
  font-family: var(--font-script-small);
  color: var(--burnt);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
}

.muted { color: rgba(64, 54, 8, 0.72); }
.center { text-align: center; }
.text-green { color: var(--green); }
.text-burnt { color: var(--burnt); }
.text-brown { color: var(--brown); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--paper-deep { background: var(--paper-deep); }
.section--green { background: var(--green); color: var(--beige-light); }
.section--green h1, .section--green h2, .section--green h3 { color: var(--beige-light); }
.section--green h2 em, .section--green h1 em { color: inherit; }
.section--green .eyebrow, .section--green .mono { color: var(--beige-dark); }
.section--green .eyebrow::before { background: var(--beige-dark); }
.section--green .muted { color: rgba(245, 235, 227, 0.72); }
.section--green .lede { color: rgba(245, 235, 227, 0.92); }

.section--ink { background: var(--brown); color: var(--beige-light); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--beige-light); }
.section--ink h2 em, .section--ink h1 em, .section--ink h3 em { color: inherit; }
.section--ink .eyebrow, .section--ink .mono { color: var(--beige-dark); }
.section--ink .eyebrow::before { background: var(--beige-dark); }
.section--ink .muted { color: rgba(245, 235, 227, 0.72); }
.section--ink .lede { color: rgba(245, 235, 227, 0.92); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }

@media (max-width: 880px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- TEXTURED BACKGROUNDS ---------- */
.section--textured { position: relative; isolation: isolate; }
.section--textured > .container,
.section--textured > .container-narrow { position: relative; z-index: 2; }
.section--textured::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.18;
  mix-blend-mode: multiply;
  filter: grayscale(0.2) contrast(1.05);
}
.section--textured::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    var(--paper) 0%, rgba(245,235,227,0.7) 18%,
    rgba(245,235,227,0.7) 82%, var(--paper) 100%);
}
.section--textured.section--green::after {
  background: linear-gradient(180deg,
    var(--green) 0%, rgba(64,54,8,0.72) 18%,
    rgba(64,54,8,0.72) 82%, var(--green) 100%);
}
.section--textured.section--ink::after {
  background: linear-gradient(180deg,
    var(--brown) 0%, rgba(56,24,13,0.78) 18%,
    rgba(56,24,13,0.78) 82%, var(--brown) 100%);
}
.section--textured.section--paper-deep::after {
  background: linear-gradient(180deg,
    var(--paper-deep) 0%, rgba(219,207,196,0.75) 18%,
    rgba(219,207,196,0.75) 82%, var(--paper-deep) 100%);
}

/* Texture variants — Unsplash CDN matching your mood imagery; swap with owned assets */
.tex-moss::before    { background-image: url('https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?auto=format&fit=crop&w=1800&q=70'); }
.tex-water::before   { background-image: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=1800&q=70'); }
.tex-paper::before   { background-image: url('https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=1800&q=70'); opacity: 0.32; }
.tex-section3::before { background-image: url('../img/section3-bg.jpg'); opacity: 1; mix-blend-mode: normal; filter: none; }
.tex-section3::after { background: none; }
.tex-section4::before {
  background-image: url('../img/section4-bg.jpg');
  background-attachment: fixed; /* image stays put; content glides over it */
  background-position: center;
  background-size: cover;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}
.tex-section4::after { background: none; }
/* iOS / mobile don't support fixed attachment well — fall back to scroll there */
@media (max-width: 880px) {
  .tex-section4::before { background-attachment: scroll; }
}

/* Section 4 (Four Principles) — full-image background with light copy */
.section--principles { color: var(--beige-light); }
.section--principles h1,
.section--principles h2,
.section--principles h3,
.section--principles h4 { color: var(--beige-light); }
.section--principles .eyebrow,
.section--principles .mono { color: var(--beige-dark); }
.section--principles .eyebrow::before { background: var(--beige-dark); }
.section--principles .muted { color: rgba(245, 235, 227, 0.78); }
.section--principles .pillar { border-color: rgba(245,235,227,0.18); }
.section--principles .pillar p { color: rgba(245,235,227,0.85); }
.section--principles .pillar:last-child { border-bottom-color: rgba(245,235,227,0.18); }
/* Pillar numerals (01–04) in beige-dark for legibility over the dark image */
.section--principles .pillar .num { color: var(--beige-dark); }
.tex-copper::before  { background-image: url('https://images.unsplash.com/photo-1604147706283-d7119b5b822c?auto=format&fit=crop&w=1800&q=70'); opacity: 0.24; }
.tex-leaves::before  { background-image: url('https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=1800&q=70'); }
.tex-grain::before   { background-image: url('https://images.unsplash.com/photo-1535057329207-be0e0b5cae7f?auto=format&fit=crop&w=1800&q=70'); opacity: 0.28; }
.tex-bark::before    { background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?auto=format&fit=crop&w=1800&q=70'); }
.tex-sand::before    { background-image: url('https://images.unsplash.com/photo-1505820013142-f86a3439c5b2?auto=format&fit=crop&w=1800&q=70'); opacity: 0.20; }

/* Inline SVG noise grain — pure CSS overlay */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.21  0 0 0 0 0.03  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 30px; /* trimmed vertical padding */
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--beige-light);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .25s ease, transform .25s ease, color .25s ease;
}
.btn:hover { background: var(--brown); transform: translateY(-2px); }
.btn--burnt { background: var(--burnt); }
.btn--burnt:hover { background: var(--brown); }
.btn--ghost { background: transparent; color: var(--green); border: 1px solid var(--green); }
.btn--ghost:hover { background: var(--green); color: var(--beige-light); }
.btn--burnt-ghost { background: transparent; color: var(--burnt); border: 1px solid var(--burnt); }
.btn--burnt-ghost:hover { background: var(--burnt); color: var(--beige-light); }
.btn--light { background: var(--beige-light); color: var(--brown); }
.btn--light:hover { background: var(--burnt); color: var(--beige-light); transform: translateY(-2px); }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translate(4px, -4px); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 1px solid var(--green);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.link:hover { color: var(--burnt); border-color: var(--burnt); }

/* ---------- Top announcement bar ---------- */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 51;
  height: var(--topbar-height);
  background: var(--green);
  color: var(--beige-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(0);
  transition: transform .35s ease;
}
/* When user scrolls past the hero, slide the bar up and pull nav to top:0 */
body.is-past-top .top-bar { transform: translateY(-100%); }
body.is-past-top .site-header { top: 0; }
.site-header { transition: top .35s ease, background .3s ease, padding .3s ease; }
.top-bar a {
  color: var(--beige-light);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color .25s;
}
.top-bar a:hover { color: var(--beige-dark); }
.top-bar .arrow-long {
  color: var(--beige-light); /* same as text */
  font-size: 16px;
  display: inline-block;
}

/* Clip the top-bar so the marquee doesn't cause horizontal page scroll */
.top-bar { overflow: hidden; }

/* Scrolling marquee variant */
.top-bar__link {
  display: block !important;
  width: 100%;
  overflow: hidden;
  gap: 0 !important;
  padding: 0;
}
.top-bar__track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: top-bar-scroll 42s linear infinite;
  padding-right: 32px; /* trailing gap so the loop feels seamless */
}
.top-bar__link:hover .top-bar__track { animation-play-state: paused; }
.top-bar__star {
  display: inline-block;
  color: var(--beige-light);
  opacity: 0.6;
  font-size: 14px;
}
@keyframes top-bar-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .top-bar__track { animation: none; }
}

/* ---------- Header (centered logo, split nav) ---------- */
.site-header {
  position: fixed;
  top: var(--topbar-height); left: 0; right: 0;
  z-index: 50;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(245, 235, 227, 0.5);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
  transition: background .3s ease, padding .3s ease;
}
.site-header.is-scrolled { background: rgba(245, 235, 227, 0.62); }

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--brown);
  line-height: 1;
  justify-self: center;
}
.logo img { height: 48px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 36px; }
.nav.nav-left  { justify-self: start; }
.nav.nav-right { justify-self: end; }
.nav a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  padding: 6px 0;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--burnt);
  transition: right .3s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }

.nav-cta {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--green);
  background: transparent;
  transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--green); color: var(--beige-light) !important; }
.nav-cta::after { display: none; }

/* Burger — no circle. Two chunky lines. Larger tap target. */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  width: 28px; height: 2px; background: var(--brown);
  position: relative; transition: transform .25s ease, opacity .25s ease;
  border-radius: 2px;
}
.menu-toggle span::before, .menu-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 28px; height: 2px; background: var(--brown);
  border-radius: 2px;
  transition: transform .25s ease;
}
.menu-toggle span::before { top: -9px; }
.menu-toggle span::after  { top:  9px; }

@media (max-width: 880px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }
  .logo { justify-self: start; grid-column: 1; }
  .menu-toggle { display: inline-flex; grid-column: 3; justify-self: end; }
  .nav.nav-left,
  .nav.nav-right { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   Mobile menu — full-screen overlay
   Triggered by .menu-toggle → body.menu-open, closed by .mobile-menu__close.
   ──────────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--green);
  color: var(--beige-light);
  padding: 32px clamp(24px, 6vw, 40px) clamp(24px, 6vw, 40px);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
body.menu-open .mobile-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}
body.menu-open { overflow: hidden; }

.mobile-menu__top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: clamp(32px, 8vh, 72px);
}
.mobile-menu__close {
  width: 44px; height: 44px;
  border: 0; background: transparent; padding: 0;
  color: var(--beige-light);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}
.mobile-menu__close::before {
  content: "×";
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 28px);
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 56px);
  font-weight: 500;
  color: var(--beige-light);
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color .2s;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a[aria-current="page"] { color: var(--burnt); }

.mobile-menu__footer {
  padding-top: 32px;
  border-top: 1px solid rgba(245,235,227,0.15);
  display: flex; flex-direction: column; gap: 16px;
}
.mobile-menu__cta {
  align-self: stretch;
  justify-content: center;
  padding: 18px 32px;
  font-size: 12px;
}
.mobile-menu__contact {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,235,227,0.55);
  text-align: center;
}

/* Hide the menu on desktop */
@media (min-width: 881px) { .mobile-menu { display: none; } }

main { padding-top: 0; }

/* ---------- HERO (full-bleed 50/50: image left, image right; both extend behind nav) ---------- */
.hero {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
}
/* LEFT-half hero image (text overlays this).
   Anchored explicitly to 50% so it matches the right grid column edge-for-edge. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  z-index: 0;
  background-image: url('../img/hero-mockup-left.jpg');
  background-size: cover;
  background-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  z-index: 0;
  /* Soft cream overlay keeps the left-side text legible without washing the image out */
  background: linear-gradient(180deg, rgba(245,235,227,0.18), rgba(245,235,227,0.10) 50%, rgba(245,235,227,0.22));
}
.hero .container {
  position: relative;
  z-index: 2;
  max-width: none;
  padding-inline: 0;
}
/* Explicit 50/50 columns instead of 1fr 1fr to avoid any sub-pixel rounding drift */
.hero-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 0;
  align-items: stretch;
  min-height: 100vh;
}
/* ────────────────────────────────────────────────────────────────
   Mobile hero — stack image under copy, big headline, tuned rhythm
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero { min-height: auto; }
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* Hide the left bg pseudo + overlay on mobile — only show .hero-image stacked below */
  .hero::before,
  .hero::after { display: none; }

  /* Generous vertical air (top accounts for the fixed topbar) */
  .hero-text {
    padding-top: calc(var(--topbar-height) + 72px);
    padding-bottom: 72px;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Image stacks beneath in a comfortable portrait ratio */
  .hero-image {
    min-height: 56vh;
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
  }
}

/* Note: rules re-scoped as .hero .hero-title so they win against the base rule
   declared later in the file. Also extended to the 980 breakpoint so tablets
   pick up the larger headline too. */
@media (max-width: 980px) {
  .hero .hero-title {
    font-size: clamp(42px, 8vw, 68px);
    line-height: 1.05;
    margin-bottom: 18px;
  }
  .hero .hero-title br { display: none; }
}
@media (max-width: 720px) {
  .hero .hero-title {
    font-size: clamp(47px, 11.5vw, 72px);
    line-height: 1.02;
    margin-bottom: 14px;
  }
  .hero .hero-text {
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero .hero-eyebrow,
  .hero .hero-text .eyebrow { margin-bottom: 28px; }
  .hero .hero-lede,
  .hero .hero-text .lede { margin-top: 4px; }
}
.hero-text {
  /* Top padding clears the topbar + nav (they float over the hero) */
  padding-top: calc(var(--topbar-height) + clamp(96px, 11vw, 140px));
  padding-bottom: clamp(40px, 5vw, 80px);
  /* Left padding matches the site-header gutter so copy lines up with "About" nav */
  padding-left: var(--gutter);
  padding-right: clamp(32px, 5vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/* Homepage hero: copy anchored to the bottom-left, with bottom margin matching the gutter */
.page-home .hero-text {
  justify-content: flex-end;
  padding-bottom: var(--gutter);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(29px, 4.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--brown);
}
.hero-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}
.hero-title .mark { color: var(--brown); font-weight: 600; }
.hero-title .italic-serif {
  font-family: var(--font-display); /* Manrope synthetic italic */
  font-style: italic;
  font-weight: inherit;
  color: inherit;
  display: inline-block;
}

.hero-lede {
  /* Mirrors the about/services page body text exactly */
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--brown);
  max-width: 52ch;
  margin: 0 0 36px;
}

.hero-image {
  position: relative;
  aspect-ratio: auto;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 80%, rgba(56, 24, 13, 0.08));
}
@media (max-width: 980px) {
  .hero-image { min-height: 420px; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions .btn {
  padding: 14px 32px; /* trimmed vertical, matches section 2 button proportions */
  font-size: 12px;     /* same size as the "This is me!" button below */
  letter-spacing: 0.2em;
}

/* ---------- Portraits ---------- */
.portrait {
  position: relative;
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  overflow: hidden;
}
.portrait--rounded { border-radius: 240px 240px 8px 8px; }
.portrait--landscape { aspect-ratio: 4/3; }

.about-strip {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 880px) { .about-strip { grid-template-columns: 1fr; } }

/* ---------- Marquee (olive textured, script font, asterisk dividers) ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  padding-block: 12px 6px;
  position: relative;
  /* Olive-khaki tint that sits between green and beige */
  background-color: #7a6d2f;
  color: var(--brown);
  border-block: 1px solid rgba(56,24,13,0.18);
}
.marquee::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.21  0 0 0 0 0.03  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.marquee-track {
  display: flex;
  gap: 15px;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
  font-family: var(--font-script-small);
  font-weight: 400;
  font-size: clamp(27px, 4vw, 51px);
  color: var(--brown);
  letter-spacing: -0.01em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.marquee-track span { display: inline-flex; gap: 15px; align-items: center; }
.marquee-track em { font-style: normal; color: var(--brown); font-weight: 400; font-family: var(--font-script-small); }
.marquee-track .dot {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
  background-image: url('../img/marquee%20icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Problem / value-prop strip (1/3 image + 2/3 content) ---------- */
.problem-strip {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 33% image, 67% content */
  width: 100%;
}
.problem-strip__image {
  background-size: cover;
  background-position: center;
  min-height: 520px;
}
.problem-strip__content {
  background: #4a301e;
  color: var(--beige-light);
  /* Symmetric padding on all four sides */
  padding: clamp(48px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-justify all children */
  justify-content: center;
  gap: 18px;
}
.problem-strip__content > * { align-self: flex-start; }
/* Colour the eyebrow's leading line to match the eyebrow text on the dark brown background */
.problem-strip__content .eyebrow::before { background: var(--beige-dark); }
.problem-strip__content h2 {
  color: var(--beige-light);
  font-weight: 600;
  max-width: 28ch;
}
.problem-strip__content h2 em { color: inherit; font-style: italic; font-family: var(--font-display); }
.problem-strip__content .sub {
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  color: var(--beige-dark);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
.problem-strip__list {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0;
  display: flex; flex-direction: column; gap: 12px;
}
.problem-strip__list li {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245,235,227,0.92);
  max-width: 52ch;
}
.problem-strip__body {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245,235,227,0.92);
  max-width: none; /* fill the 2/3 column */
}
.problem-strip__cta {
  margin-top: 16px;
  align-self: flex-start;
}
@media (max-width: 880px) {
  .problem-strip { grid-template-columns: 1fr; }
  /* Content first, then image beneath */
  .problem-strip__content { order: 1; }
  .problem-strip__image {
    order: 2;
    min-height: 320px;
  }
}
/* Placeholder — the real overrides live at the bottom of the file with
   higher specificity so they beat the base rules that appear later in source. */

/* Cream pill button (the "THIS IS ME!" reference) */
.btn--cream {
  background: var(--beige-light);
  color: var(--brown);
  border-radius: var(--r-pill);
  padding: 16px 32px;
}
.btn--cream:hover { background: var(--beige-dark); color: var(--brown); }

/* ---------- Services: digestible blocks ---------- */
.offer-block {
  background: var(--beige-light);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 4vw, 64px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(64,54,8,0.04), 0 18px 40px -28px rgba(64, 54, 8, 0.20);
}
.section--paper-deep .offer-block { background: var(--beige-light); }
.offer-block + .offer-block { margin-top: clamp(28px, 3.5vw, 48px); }

@media (max-width: 880px) { .offer-block { grid-template-columns: 1fr; } }

.offer-block__head { display: flex; flex-direction: column; gap: 14px; }
.offer-block__num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--burnt); font-weight: 500;
}
.offer-block__title { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; }
.offer-block__title em { color: inherit; font-style: italic; font-weight: inherit; font-family: var(--font-display); }
.offer-block__price {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em; color: var(--green); font-weight: 500;
  padding: 8px 14px; background: var(--green-soft);
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}
.offer-block__meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green); font-weight: 500;
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

.offer-block__body p { color: var(--brown); }
.offer-block__body .lede { color: var(--green-deep); margin-bottom: 18px; }

.offer-block__sub {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  list-style: none; padding-left: 0;
}
.offer-block__sub li {
  font-size: 14px; color: var(--brown);
  padding-left: 22px; position: relative; line-height: 1.5;
}
.offer-block__sub li::before {
  content: "+";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); color: var(--burnt); font-weight: 600;
}
@media (max-width: 680px) { .offer-block__sub { grid-template-columns: 1fr; } }

.offer-block__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}

.offer-addon {
  margin-top: 18px;
  padding: 18px 22px;
  background: rgba(144, 75, 41, 0.08);
  border: 1px dashed rgba(144, 75, 41, 0.35);
  border-radius: var(--r-md);
}
.offer-addon strong { color: var(--burnt); }
.offer-addon p { font-size: 14px; margin: 6px 0 0; color: var(--brown); }
.offer-addon .mono { color: var(--burnt); }

/* Compact service cards */
.service-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--beige-light);
  transition: transform .35s ease, border-color .35s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--burnt); }
.service-card .price {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green); font-weight: 500;
  padding: 6px 12px;
  background: var(--green-soft);
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.service-card h3 { font-size: clamp(24px, 2.6vw, 32px); }
.service-card h3 em { color: inherit; font-style: italic; font-weight: inherit; font-family: var(--font-display); }
.service-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.service-card li {
  font-size: 14px; color: var(--brown);
  padding-left: 22px; position: relative;
}
.service-card li::before {
  content: "+";
  position: absolute; left: 0; top: -1px;
  color: var(--burnt); font-family: var(--font-mono);
}
.service-card .card-footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}

/* Functionality matrix block */
.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg); /* match .service-card + .benefit-card */
  overflow: hidden;
  background: var(--beige-light);
}
.matrix-cell {
  padding: clamp(24px, 2.4vw, 36px);
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.matrix-cell:last-child { border-right: 0; }
.matrix-cell h4 { margin-bottom: 4px; }
.matrix-cell ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.matrix-cell li {
  font-size: 14px; color: var(--brown);
  padding-left: 18px; position: relative;
}
.matrix-cell li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  position: absolute; left: 0; top: 8px;
}
@media (max-width: 880px) {
  .matrix { grid-template-columns: 1fr; }
  .matrix-cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .matrix-cell:last-child { border-bottom: 0; }
}

/* Process step blocks */
.process-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.process-block {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--beige-light);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.process-block .num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--burnt); font-weight: 500;
}
.process-block h4 {
  font-family: var(--font-display);
  font-weight: 600; font-size: 20px;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--brown);
  margin: 0;
}
.process-block p { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; letter-spacing: 0; margin: 0; color: var(--brown); }
@media (max-width: 720px) { .process-blocks { grid-template-columns: 1fr; } }

/* ---------- Pillars ---------- */
.pillar {
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 60px 1fr 2fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.pillar .num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em; color: var(--burnt);
  padding-top: 6px; font-weight: 500;
}
.pillar h3 { font-size: clamp(24px, 2.6vw, 36px); }
.pillar h3 em { color: inherit; font-style: italic; font-weight: inherit; font-family: var(--font-display); }
.pillar p { margin: 0; color: var(--brown); }
@media (max-width: 720px) {
  .pillar { grid-template-columns: 50px 1fr; }
  .pillar p { grid-column: 2 / -1; }
}

/* ---------- Editorial work ---------- */
.work-list { display: flex; flex-direction: column; gap: clamp(80px, 10vw, 160px); }

.work-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
}
.work-item:nth-child(even) .work-image { grid-column: 7 / -1; grid-row: 1; }
.work-item:nth-child(even) .work-meta  { grid-column: 1 / span 5; grid-row: 1; padding-right: 32px; }
.work-item:nth-child(odd)  .work-image { grid-column: 1 / span 7; grid-row: 1; }
.work-item:nth-child(odd)  .work-meta  { grid-column: 8 / -1; grid-row: 1; padding-left: 32px; }

.work-image {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  border-radius: 6px;
  overflow: hidden; position: relative;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.work-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(64,54,8,0.22));
  opacity: 0; transition: opacity .35s;
}
.work-item:hover .work-image { transform: scale(1.015); }
.work-item:hover .work-image::after { opacity: 1; }

.work-meta .index {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--burnt); font-weight: 500;
  margin-bottom: 14px;
}
.work-meta h3 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1; margin-bottom: 14px; font-weight: 700; }
.work-meta .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.work-meta .tag {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--beige-light);
}

@media (max-width: 880px) {
  .work-item, .work-item:nth-child(odd), .work-item:nth-child(even) { display: block; }
  .work-item .work-meta { padding: 24px 0 0 !important; }
}

.work-preview {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.preview-card {
  grid-column: span 4;
  display: flex; flex-direction: column; gap: 14px;
}
.preview-card .work-image { aspect-ratio: 4/5; }
.preview-card h3 { font-size: 20px; }
.preview-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.preview-card .tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); font-weight: 500;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
@media (max-width: 880px) { .preview-card { grid-column: span 12; } }

/* ---------- Feature list ---------- */
.feature-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px 36px;
}
.feature-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
  color: var(--brown);
}
.feature-list li::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  transform: translateY(-2px);
}
@media (max-width: 720px) { .feature-list { grid-template-columns: 1fr; } }

/* ---------- Pull quote ---------- */
.pull {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--brown);
  max-width: 24ch;
}
.pull em { font-style: italic; font-weight: inherit; color: inherit; font-family: var(--font-display); }
.pull .script-small { display: block; font-weight: 400; margin-bottom: 8px; }
.section--green .pull, .section--ink .pull { color: var(--beige-light); }
.section--green .pull em, .section--ink .pull em { color: var(--burnt); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
/* Prevent horizontal overflow on mobile: cells + form fields respect their container */
.contact-grid > * { min-width: 0; }
.form { min-width: 0; max-width: 100%; }
.form--card { max-width: 100%; }
.field input, .field textarea, .field select { max-width: 100%; }
@media (max-width: 720px) {
  .form--card { padding: 24px 20px; }
  .contact-grid > aside > div { padding: 24px 20px !important; }
}

.form { display: flex; flex-direction: column; gap: 22px; }
/* Card-framed form variant — used on the contact page to give the form its own surface */
.form--card {
  background: var(--beige-light);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 48px);
  box-shadow: 0 1px 0 rgba(64,54,8,0.04), 0 18px 40px -28px rgba(64,54,8,0.18);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); font-weight: 500;
}
.field input, .field textarea, .field select {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--brown); font-weight: 500;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--burnt);
}
.field textarea { resize: vertical; min-height: 120px; }

.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, color .2s, border-color .2s;
  color: var(--brown); font-weight: 500;
}
.checks input { position: absolute; opacity: 0; pointer-events: none; }
.checks label:has(input:checked) { background: var(--green); color: var(--beige-light); border-color: var(--green); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brown);
  color: var(--beige-light);
  /* Reduced top padding — no longer needed since the CTA block lives in its own section */
  padding: clamp(32px, 4vw, 64px) 0 36px;
  position: relative;
}
.site-footer h2 { color: var(--beige-light); max-width: 18ch; margin-bottom: 32px; }
.site-footer h2 em { color: inherit; font-style: italic; font-family: var(--font-display); }
.site-footer .footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.site-footer .footer-grid h5 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  margin: 0 0 16px;
  color: var(--beige-dark);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer ul li { font-size: 14px; }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: var(--burnt); }
.site-footer .footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 56px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,235,227,0.6); font-weight: 500;
}
.footer-logo { margin-bottom: 12px; }
.footer-logo img {
  height: 70px;
  width: auto;
  /* Invert dark logo to cream for the dark footer */
  filter: brightness(0) saturate(100%) invert(95%) sepia(8%) saturate(620%) hue-rotate(345deg) brightness(99%) contrast(94%);
}

@media (max-width: 720px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Collage ---------- */
.collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 12px;
  aspect-ratio: 4/5;
  width: 100%;
}
.collage > div { background-size: cover; background-position: center; border-radius: 4px; }
.collage .c1 { grid-column: 1 / span 4; grid-row: 1 / span 3; }
.collage .c2 { grid-column: 5 / span 2; grid-row: 1 / span 2; border-radius: 999px; aspect-ratio: 1; }
.collage .c3 { grid-column: 5 / span 2; grid-row: 3 / span 2; }
.collage .c4 { grid-column: 1 / span 2; grid-row: 4 / span 3; }
.collage .c5 { grid-column: 3 / span 4; grid-row: 4 / span 3; }

/* ---------- Symbols ---------- */
.symbols {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.symbols svg { width: 100%; height: 48px; color: var(--green); }
@media (max-width: 720px) { .symbols { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); padding: 24px 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--brown);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px; color: var(--burnt);
  transition: transform .25s;
}
.faq details[open] summary::after { content: "—"; }
.faq details > p { padding-top: 14px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Utility ---------- */
.stack-sm > * + * { margin-top: 12px; }
.stack-md > * + * { margin-top: 24px; }
.stack-lg > * + * { margin-top: 40px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 64px; }
.no-margin { margin: 0; }

/* ---------- Benefit cards (icon-led) ---------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 side-by-side */
  gap: clamp(16px, 1.6vw, 24px);
}
@media (max-width: 1100px) { .benefits { grid-template-columns: repeat(2, 1fr); } }

/* "Why brand & website matter" section-specific overrides */
.section--why { padding-block: clamp(56px, 7vw, 100px); }
/* Allow the lede to span the full section width when nowrap is in effect */
.section--why .lede { max-width: none; }
/* Mobile: drop nowrap so headline + lede wrap gracefully on narrow viewports */
@media (max-width: 720px) {
  .section--why h2,
  .section--why .lede { white-space: normal !important; }
}
.section--why .benefit-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: none;
}
.section--why .benefit-card {
  padding: clamp(20px, 1.8vw, 28px);
  gap: 14px;
}
.section--why .benefit-icon { width: 44px; height: 44px; border-radius: 12px; }
.section--why .benefit-icon svg { width: 24px; height: 24px; }
.section--why .benefit-title {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Allow titles to flow to ~2 lines to fill the card visually */
}
.benefit-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3vw, 38px);
  background: var(--beige-light);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: transform .35s ease, border-color .35s ease;
}
.benefit-card:hover { transform: translateY(-3px); border-color: var(--burnt); }
.benefit-icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--burnt);
  background: rgba(144, 75, 41, 0.08);
  border-radius: 14px;
}
.benefit-icon svg { width: 28px; height: 28px; }
.benefit-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--brown);
  margin: 0;
}
.benefit-title em { color: inherit; font-style: italic; font-weight: inherit; font-family: var(--font-display); }
.benefit-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--brown);
  margin: 0;
}
@media (max-width: 720px) { .benefits { grid-template-columns: 1fr !important; } }


/* ---------- Team bio cards ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--beige-light);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.team-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.team-meta { display: flex; align-items: center; gap: 18px; }
.team-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.team-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--brown);
  margin: 0;
}
.team-bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--brown);
  margin: 0;
}
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }


/* ---------- Testimonial carousel (infinite scroll) ---------- */
.testimonials {
  overflow: hidden;
  padding-block: clamp(60px, 8vw, 120px);
  position: relative;
}
.testimonials__head {
  max-width: 720px;
  padding-inline: var(--gutter);
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.testimonial-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testimonial-scroll 50s linear infinite;
  padding-inline: 24px;
}
.testimonials:hover .testimonial-track { animation-play-state: paused; }
.testimonial-card {
  flex-shrink: 0;
  width: clamp(320px, 32vw, 460px);
  padding: clamp(28px, 3vw, 38px);
  background: var(--beige-light);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 1px 0 rgba(64,54,8,0.04), 0 18px 40px -28px rgba(64,54,8,0.20);
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brown);
  letter-spacing: -0.005em;
  margin: 0;
  flex: 1;
}
.testimonial-quote::before {
  content: "“";
  display: block;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.6;
  color: var(--burnt);
  margin-bottom: 8px;
}
.testimonial-attrib {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.testimonial-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--brown);
  margin: 0;
  line-height: 1.2;
}
.testimonial-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 4px;
  display: block;
}
@keyframes testimonial-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


@media print {
  .site-header, .site-footer, .menu-toggle { display: none; }
  body { background: white; color: black; }
}

/* ────────────────────────────────────────────────────────────────
   Section 3 — benefit-card borders in beige-dark
   ──────────────────────────────────────────────────────────────── */
.section--why .benefit-card {
  border-color: var(--beige-dark);
}
.section--why .benefit-card:hover { border-color: var(--beige-dark); }

/* ────────────────────────────────────────────────────────────────
   Section 4 — pillar paragraphs in Space Mono
   ──────────────────────────────────────────────────────────────── */
.section--principles .pillar p {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
}

/* ────────────────────────────────────────────────────────────────
   Section 5 — services preview
   - H2 sized to match section 3/4
   - All card text in brown
   - "+" bullets in moss-olive
   - Paragraph descriptions in Space Mono
   ──────────────────────────────────────────────────────────────── */
/* Make all text inside cards a single brown for cohesion */
.section--offer .service-card,
.section--offer .service-card h3,
.section--offer .service-card h3 em,
.section--offer .service-card p,
.section--offer .service-card li,
.section--offer .service-card .price,
.section--offer .service-card .mono,
.section--offer .service-card .link {
  color: var(--brown);
}
.section--offer .service-card .price {
  background: rgba(56,24,13,0.06); /* brown wash instead of green-soft */
}
.section--offer .service-card .link {
  border-bottom-color: var(--brown);
}
.section--offer .service-card .link:hover {
  color: var(--burnt);
  border-bottom-color: var(--burnt);
}
/* "+" bullets in moss-olive */
.section--offer .service-card li::before {
  color: #887b48;
}
/* Description paragraphs in Space Mono */
.section--offer .service-card .card-body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--brown);
}

/* ────────────────────────────────────────────────────────────────
   Section 6 — About strip, full-bleed 50/50 split
   ──────────────────────────────────────────────────────────────── */
.section--about-split {
  padding: 0;
  background: var(--paper-deep); /* same beige-dark vibe as before */
  position: relative;
  overflow: hidden;
}
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 split of full viewport width */
  width: 100%;
  min-height: 640px;
}
.about-split__image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 520px;
}
.about-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 88px);
  justify-content: center;
}
.about-split__content h2 {
  margin: 0;
}
.about-split__body {
  font-family: var(--font-mono);
  font-size: 15px;        /* close to body size, mono reads slightly larger */
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--brown);
  max-width: 56ch;
  margin: 6px 0 0;
}
@media (max-width: 880px) {
  .about-split { grid-template-columns: 1fr; }
  .about-split__image { min-height: 360px; }
  .about-split__content { padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 32px); }
}

/* ────────────────────────────────────────────────────────────────
   About page — section 5 mission bg + Space Mono body text
   ──────────────────────────────────────────────────────────────── */
.tex-about5::before {
  background-image: url('../img/about-section5.jpg');
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}
/* No overlay — image speaks for itself.
   Higher-specificity selector wins over the .section--ink gradient overlay. */
.tex-about5::after,
.section--textured.section--ink.tex-about5::after { background: none; }

/* Services page — process section background */
.tex-services5::before {
  background-image: url('../img/services-section5.jpg');
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}
.tex-services5::after { background: none; }

/* Lift the process carousel above the section's bg image + overlay pseudos */
.section--textured .process-carousel { position: relative; z-index: 2; }

/* All body paragraphs on the about page render in Space Mono.
   Ledes, hero-lede and the .pull display quote keep their display font. */
.page-about p:not(.lede):not(.hero-lede):not(.pull) {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
}
/* "How we work" descriptions are full brown, not the default 72% wash */
.page-about .muted { color: var(--brown); }

/* Journey portrait picks up the same corner radius as cards + form + matrix */
.page-about .grid-2 .portrait { border-radius: var(--r-lg); overflow: hidden; }

/* Mobile: unstick the Journey portrait so the body text doesn't scroll behind it */
@media (max-width: 880px) {
  .page-about .grid-2 .portrait {
    position: static !important;
    top: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   Services page — Space Mono for listed body paragraphs + matrix bullets
   ──────────────────────────────────────────────────────────────── */
/* Body paragraphs in the offer-block panels (non-lede) */
.page-services .offer-block__body > p:not(.lede),
/* Secondary service-card descriptions (landing + ongoing) */
.page-services .service-card .muted,
/* All bullet lists in the functionality matrix */
.page-services .matrix ul li {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
}
/* Landing + ongoing support descriptions render at full brown, not the 72% wash */
.page-services .service-card .muted { color: var(--brown); }
/* FAQ answers in Space Mono at full brown */
.page-services .faq details p,
.page-services .faq .muted {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--brown);
}

/* ────────────────────────────────────────────────────────────────
   Services — Process steps as auto-scrolling carousel (pauses on hover)
   ──────────────────────────────────────────────────────────────── */
.process-carousel {
  width: 100%;
  overflow: hidden;
  padding-block: clamp(8px, 1.6vw, 24px);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.process-carousel__track {
  display: flex;
  gap: clamp(18px, 1.8vw, 28px);
  width: max-content;
  animation: process-scroll 80s linear infinite;
  will-change: transform;
}
.process-carousel:hover .process-carousel__track,
.process-carousel:focus-within .process-carousel__track {
  animation-play-state: paused;
}
@keyframes process-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Resize each tile to live inside the horizontal track */
.process-carousel .process-block {
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 360px);
  min-height: 280px;
}

/* ────────────────────────────────────────────────────────────────
   Services — Two core offerings, tab interface
   ──────────────────────────────────────────────────────────────── */
.offer-tabs__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(40px, 4vw, 56px);
}
.offer-tab-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap parent border so active state sits clean */
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  color: rgba(56,24,13,0.55);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
  position: relative;
}
.offer-tab-trigger:hover { color: var(--brown); background: rgba(56,24,13,0.03); }
.offer-tab-trigger:focus-visible {
  outline: 2px solid var(--burnt);
  outline-offset: -4px;
}
.offer-tab-trigger.is-active {
  color: var(--brown);
  border-bottom-color: var(--brown);
}
.offer-tab-trigger__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.7;
}
.offer-tab-trigger.is-active .offer-tab-trigger__num { opacity: 1; }
.offer-tab-trigger__label {
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.offer-tab-trigger__label em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  color: inherit;
  margin: 0 4px;
}
.offer-tab-trigger__price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.offer-tab-panel {
  /* Smooth fade-in when a tab becomes active */
  animation: offer-tab-in .35s ease both;
}
.offer-tab-panel[hidden] { display: none !important; }
@keyframes offer-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .offer-tabs__nav { grid-template-columns: 1fr; }
  .offer-tab-trigger {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .offer-tab-trigger__price { grid-column: 2 / -1; grid-row: 2; padding-top: 4px; }
}

/* ────────────────────────────────────────────────────────────────
   Homepage — Lead-magnet split CTA section
   50/50 grid on dark green. Sam will drop a bg image on .cta-split__left
   later for the "Ready to cut through the noise?" half.
   ──────────────────────────────────────────────────────────────── */
.section--cta-split {
  background: var(--green);
  color: var(--beige-light);
  padding: 0;
  overflow: hidden;
}
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 460px;
}
.cta-split__left,
.cta-split__right {
  /* Less padding at bottom than top — Sam asked for tighter base */
  padding: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 88px) clamp(32px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Keep buttons + form natural width, not stretched to the column */
  align-items: flex-start;
}
.cta-split__left {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.cta-split__right {
  background: #403608; /* solid dark green */
  border-left: 1px solid rgba(245,235,227,0.10);
}
/* Match the left column's max-width so titles + copy + form align consistently */
.cta-split__right .cta-split__title,
.cta-split__right .cta-split__copy,
.cta-split__right .lead-form {
  max-width: 420px;
  width: 100%;
}
.cta-split__left h2,
.cta-split__right .cta-split__title {
  color: var(--beige-light);
}
/* Left lede paragraph in Space Mono */
.cta-split__left p {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0;
}
/* Eyebrow leading line in light beige across this whole section */
.section--cta-split .eyebrow::before {
  background: var(--beige-light);
}
.cta-split__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 18px 0 0;
}
.cta-split__copy {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  margin: 18px 0 28px;
  color: rgba(245,235,227,0.78);
}

/* Lead form — vertical stack of first name / email / website / submit */
.lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-form__field {
  width: 100%;
  padding: 14px 18px;
  background: rgba(245,235,227,0.06);
  border: 1px solid rgba(245,235,227,0.18);
  border-radius: var(--r-pill);
  color: var(--beige-light);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: border-color .25s ease, background .25s ease;
}
.lead-form__field::placeholder { color: rgba(245,235,227,0.45); }
.lead-form__field:focus {
  outline: 0;
  border-color: var(--burnt);
  background: rgba(245,235,227,0.10);
}
.lead-form .btn { align-self: flex-start; margin-top: 4px; }
.lead-form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,235,227,0.45);
  margin: 8px 0 0;
}
.lead-form__success {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--beige-light);
  background: rgba(144,75,41,0.20);
  border: 1px solid rgba(144,75,41,0.45);
  border-radius: var(--r-md, 12px);
  padding: 12px 14px;
  margin: 10px 0 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

@media (max-width: 880px) {
  .cta-split { grid-template-columns: 1fr; }
  .cta-split__right { border-left: 0; border-top: 1px solid rgba(245,235,227,0.10); }
}

/* ────────────────────────────────────────────────────────────────
   Section 7 — Selected work, infinite scrolling carousel
   Cards are tall portrait frames with a brand-colour border around a
   "screenshot" inner. When Sam adds real screenshots, replace the
   .work-card__inner placeholder markup with <img src="..." />.
   ──────────────────────────────────────────────────────────────── */
.section--work {
  overflow: hidden; /* clip the off-screen cards */
}
.work-carousel {
  width: 100%;
  overflow: hidden;
  padding-block: clamp(8px, 1.6vw, 24px);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.work-carousel__track {
  display: flex;
  gap: clamp(20px, 2vw, 32px);
  width: max-content;
  animation: work-scroll 60s linear infinite;
  will-change: transform;
}
.work-carousel:hover .work-carousel__track,
.work-carousel:focus-within .work-carousel__track {
  animation-play-state: paused;
}
@keyframes work-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly half — track is duplicated */
}

.work-card {
  flex: 0 0 auto;
  width: clamp(260px, 24vw, 380px);
  aspect-ratio: 4 / 5;
  background: var(--card-bg, #887b48);
  border-radius: 18px;
  padding: clamp(22px, 2vw, 30px);
  display: flex;
  text-decoration: none;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  box-shadow: 0 10px 28px -18px rgba(56,24,13,0.35);
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(56,24,13,0.45);
}
.work-card__inner {
  flex: 1;
  background-color: var(--beige-light);
  background-size: cover;
  /* Anchor the focal point to the top of the screenshot — most websites
     have their hero content up top, so this keeps the masthead visible. */
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Faux browser chrome — 3 traffic-light dots */
.work-card__chrome {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(56,24,13,0.04);
  border-bottom: 1px solid rgba(56,24,13,0.06);
}
.work-card__chrome span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(56,24,13,0.18);
}
/* Project label centred in the placeholder area */
.work-card__label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(56,24,13,0.45);
  padding: 24px;
  line-height: 1.4;
}
/* Mobile: smaller cards, looser track */
@media (max-width: 720px) {
  .work-card { width: 220px; }
  .work-carousel__track { gap: 16px; animation-duration: 45s; }
}

/* ────────────────────────────────────────────────────────────────
   Subtle parallax + zoom on section background images
   JS updates --p-y (translateY) and --p-scale on each section.
   Children & ::before pseudos inherit via the cascade.
   Effect is intentionally small: ~±2% viewport translate, ~3% zoom.
   Section 4 keeps its existing background-attachment: fixed parallax.
   ──────────────────────────────────────────────────────────────── */
.problem-strip { overflow: hidden; }
.section--textured { overflow: hidden; }

/* ────────────────────────────────────────────────────────────────
   Footer — centralized content ONLY on mobile (≤720px)
   Desktop keeps the original left-aligned 3-column layout.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .site-footer .container { text-align: center; }
  .site-footer h2 {
    max-width: none;
    margin-inline: auto;
  }
  .site-footer > .container > p {
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer .eyebrow {
    justify-content: center;
  }
  .site-footer .footer-grid {
    text-align: center;
    justify-items: center;
  }
  .site-footer .footer-grid h5 { text-align: center; }
  .site-footer .footer-grid ul { align-items: center; }
  .site-footer .footer-bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
  .footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
  }
}

/* Hero halves get TRANSLATE only — no scale — so the right image can't bleed
   across the 50% seam into the left half (and vice versa). */
.hero::before,
.hero-image {
  transform: translate3d(0, var(--p-y, 0px), 0);
  transform-origin: center center;
  will-change: transform;
}
/* Mid-page sections clip their scaled bg images via their own overflow rules. */
.problem-strip__image,
.tex-section3::before,
.tex-services5::before {
  transform: translate3d(0, var(--p-y, 0px), 0) scale(var(--p-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-image,
  .problem-strip__image,
  .tex-section3::before,
  .tex-services5::before {
    transform: none !important;
  }
}

/* Mobile: disable parallax on stacked sections so the transform doesn't
   leave a gap between the image and the section below it. */
@media (max-width: 720px) {
  .hero::before,
  .hero-image,
  .problem-strip__image,
  .tex-section3::before,
  .tex-services5::before {
    transform: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   Hero rhythm — DEFINITIVE overrides (desktop + mobile)
   More air between eyebrow and H1. Tighter between H1 and lede.
   Placed at the bottom of the file to beat any earlier base rules.
   ──────────────────────────────────────────────────────────────── */
.hero .hero-eyebrow,
.hero .hero-text .eyebrow { margin-bottom: 40px; }
.hero .hero-title { margin: 0 0 18px; }
.hero .hero-lede,
.hero .hero-text .lede { margin-top: 0; }

@media (max-width: 720px) {
  .hero .hero-eyebrow,
  .hero .hero-text .eyebrow { margin-bottom: 32px; }
  .hero .hero-title { margin: 0 0 14px; }
}

/* ────────────────────────────────────────────────────────────────
   Mobile section-padding — DEFINITIVE overrides
   Placed at the bottom of the file so cascade + higher specificity
   (.section--cta-split .cta-split__left etc) always beat the base
   rules declared earlier. Every full-bleed section on mobile now
   uses var(--gutter) horizontally — same as .container elsewhere.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .problem-strip .problem-strip__content {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .section--cta-split .cta-split__left,
  .section--cta-split .cta-split__right {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}
@media (max-width: 720px) {
  .problem-strip .problem-strip__content {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section--cta-split .cta-split__left,
  .section--cta-split .cta-split__right {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  /* Hero-text lands on the same left edge too */
  .hero .hero-text {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* ────────────────────────────────────────────────────────────────
   TRIAL — TT Commons Pro Regular only
   Clamps every element to weight 400 so we're only loading the
   Regular cut from Adobe Fonts. Delete this block to restore the
   original weighted hierarchy (700 headlines, 600 buttons, etc).
   ──────────────────────────────────────────────────────────────── */
* {
  font-weight: 400 !important;
}


/* ---- Infra: marquee images (replaces 18MB OT-SVG font), honeypot, form status ---- */
.marquee-word { height: clamp(31px, 4.6vw, 59px); width: auto; display: block; user-select: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 14px; font-size: 14px; line-height: 1.5; padding: 12px 16px; border-radius: 12px; }
.form-status--ok  { background: rgba(64, 54, 8, 0.08);   color: var(--green); border: 1px solid rgba(64, 54, 8, 0.16); }
.form-status--err { background: rgba(144, 75, 41, 0.10); color: var(--burnt); border: 1px solid rgba(144, 75, 41, 0.26); }