/* ============================================================
   HAVENROLL — style.css
   Design system first. Every value references a token.
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Colors */
  --forest:      #0C4514;
  --forest-deep: #071f0a;
  --sage:        #698C70;
  --sage-dark:   #41644A;
  --orange:      #E77D36;
  --orange-dark: #c4601e;
  --cream:       #F1F0E9;
  --cream-dark:  #E4E2D8;
  --white:       #FFFFFF;
  --ink:         #131515;
  --ink-mid:     #3C3C3C;
  --ink-muted:   #6A6A6A;

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Source Sans 3', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   0.6875rem;  /* 11px — labels, tags, eyebrows */
  --text-sm:   0.8125rem;  /* 13px — captions, footer copy */
  --text-base: 1rem;       /* 16px — nav, buttons */
  --text-md:   1.0625rem;  /* 17px — body, leads */
  --text-lg:   1.25rem;    /* 20px — card body */

  /* Line heights — 3 values only */
  --leading-tight:   1.2;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  /* Spacing — 4px base, named by multiple */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* Border radius — 2 values */
  --radius:    4px;
  --radius-lg: 8px;

  /* Shadows — 3 levels */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.05);

  /* Easing — 2 curves only */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* Layout */
  --nav-h: 72px;
  --max-w: 1160px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--ink);
  background: var(--white);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font-sans); cursor: pointer; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--leading-tight);
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-normal);
}
p { line-height: var(--leading-relaxed); }

/* ── Focus visible ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-10);
}
.section { padding: var(--sp-20) 0; }

/* ── Eyebrow ─────────────────────────────────────────────  */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--sp-4);
}
.eyebrow--orange { color: var(--orange); }

/* ── Buttons ─────────────────────────────────────────────  */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 13px var(--sp-8);
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background    0.2s var(--ease-out),
    border-color  0.2s var(--ease-out),
    color         0.2s var(--ease-out),
    transform     0.2s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98) !important; }

.btn--orange {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.btn--orange:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.3);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--ghost-sage {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
}
.btn--ghost-sage:hover {
  border-color: var(--white);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--forest);
  border-color: rgba(12,69,20,0.3);
}
.btn--outline:hover {
  border-color: var(--forest);
  transform: translateY(-2px);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.btn--nav {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
  padding: 10px var(--sp-6);
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
}
.btn--nav:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  transform: translateY(-1px);
}
.btn--nav-ghost {
  background: transparent;
  color: var(--white);
  font-weight: 700;
  border-color: rgba(255,255,255,0.45);
  padding: 10px var(--sp-6);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}
.btn--nav-ghost:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* ── Section Headers ─────────────────────────────────────  */
.section__header { max-width: 560px; margin-bottom: var(--sp-16); }

.section__header h2 { color: var(--forest); }
.section__header h2 em { color: var(--sage); font-style: italic; }
.section__header--light h2 { color: var(--white); }
.section__header--light h2 em { color: var(--white); }

.section__divider {
  width: 0;
  height: 2px;
  background: var(--orange);
  margin: var(--sp-5) 0 var(--sp-6);
  border-radius: 1px;
  transition: width 0.8s var(--ease-out) 0.45s;
}
.section__header.visible .section__divider { width: 40px; }

.section__lead {
  font-size: 1.35rem;
  color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}
.section__lead--light { color: var(--white); font-weight: 400; }

/* ── Reveal ──────────────────────────────────────────────  */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
.reveal.visible  { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.1s;  }
.reveal--delay-2 { transition-delay: 0.2s;  }
.reveal--delay-3 { transition-delay: 0.3s;  }
.reveal--delay-4 { transition-delay: 0.4s;  }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--forest);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.nav.scrolled {
  background: rgba(10,55,18,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-10);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}
.nav__logo:hover { opacity: 0.82; }
.nav__logo img { height: 34px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  position: relative;
  transition: color 0.2s;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: var(--sp-3); right: var(--sp-3);
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: var(--sp-2);
  margin-left: auto;
}
.nav__burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav__burger.open span:first-child  { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:last-child   { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  bottom: 0;
  z-index: 190;
  background: var(--forest-deep);
  padding: var(--sp-10) var(--sp-10) var(--sp-12);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateY(-105%);
  transition: transform 0.4s var(--ease-out);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-lg);
}
.nav__drawer.open { transform: translateY(0); }

.drawer__link {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: block;
  transition: color 0.2s;
}
.drawer__link:hover { color: var(--white); }
.drawer__cta { margin-top: var(--sp-8); align-self: stretch; justify-content: center; font-size: var(--text-base); padding: 16px var(--sp-8); }

/* ── Secondary button for light backgrounds ──────────────── */
.btn--outline {
  background: transparent;
  color: var(--forest);
  border-color: rgba(12,69,20,0.35);
}
.btn--outline:hover {
  border-color: var(--forest);
  background: rgba(12,69,20,0.06);
  transform: translateY(-2px);
}

/* ============================================================
   HERO  — light cream background
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--cream);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Decorative background layers — out of flow */
.hero__pattern,
.hero__orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__pattern {
  z-index: 0;
}
.hero__orb {
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
}
.hero__orb--1 {
  width: 480px; height: 480px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(12,69,20,0.06) 0%, transparent 70%);
}
.hero__orb--2 {
  width: 360px; height: 360px;
  bottom: -60px; left: -60px;
  background: radial-gradient(circle, rgba(231,125,54,0.05) 0%, transparent 70%);
}
.hero__orb--3 {
  width: 280px; height: 280px;
  top: 30%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(105,140,112,0.04) 0%, transparent 70%);
}

/* Very subtle warm tint top-right */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 90% 20%, rgba(231,125,54,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 5%  80%, rgba(12,69,20,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-30) var(--sp-10) var(--sp-20);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  text-align: center;
}

/* Eyebrow */
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.hero__eyebrow-line {
  display: block;
  height: 1.5px;
  background: var(--orange);
  flex-shrink: 0;
  animation: eyebrowExpand 0.7s var(--ease-out) 0.2s both;
}
.hero__eyebrow-line--right {
  animation-delay: 0.35s;
}
@keyframes eyebrowExpand {
  from { width: 0; opacity: 0; }
  to   { width: 32px; opacity: 1; }
}
.hero__eyebrow-text {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark);
  animation: fadeUp 0.6s var(--ease-out) 0.4s both;
}
.hero__eyebrow-text br { display: none; }

/* Headline */
.hero__heading {
  color: var(--forest);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}
.hero__line {
  display: block;
  animation: lineRise 0.9s var(--ease-out) both;
}
.hero__line:nth-child(1) { animation-delay: 0.38s; }
.hero__line:nth-child(2) { animation-delay: 0.54s; }
.hero__line em { font-style: italic; font-weight: 700; color: var(--orange); }
.hero__dim { opacity: 0.38; }
@keyframes lineRise {
  from { opacity: 0; transform: translateY(32px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

.hero__sub {
  font-size: 1.4rem;
  color: var(--ink-mid);
  line-height: 1.4;
  max-width: 560px;
  margin: 0 auto var(--sp-3);
  animation: fadeUp 0.8s var(--ease-out) 0.8s both;
}

.hero__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 0.8s var(--ease-out) 1.0s both;
  margin: 20px 0;
}
.hero__actions .btn {
  font-size: 1rem;
  padding: 15px var(--sp-10);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Photo — 16:9 rect */
.hero__visual {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeUp 1s var(--ease-out) 0.7s both;
}

.hero__photo-circle {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(12,69,20,0.14),
    0 3px 10px  rgba(12,69,20,0.07);
  transition: box-shadow 1s var(--ease-out);
  cursor: default;
}
.hero__photo-circle:hover {
  box-shadow:
    0 20px 56px rgba(12,69,20,0.17),
    0 5px 16px  rgba(12,69,20,0.09);
}
.hero__photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 1s var(--ease-out);
}
.hero__photo-circle:hover img {
  transform: scale(1.06);
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-8); left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: fadeUp 1s var(--ease-out) 1.6s both;
  transition: color 0.2s;
  z-index: 1;
}
.hero__scroll:hover { color: var(--forest); }
.hero__scroll-arrow {
  font-size: var(--text-base);
  animation: arrowBounce 2.4s ease-in-out 2.4s infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ============================================================
   PROOF BAR  — stats that used to live in hero
   ============================================================ */
.proof-bar {
  background: var(--forest);
  padding: var(--sp-12) 0;
}
.proof-bar__inner {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: var(--sp-10);
  align-items: center;
}
.proof-divider {
  height: 48px;
  background: rgba(255,255,255,0.12);
  border-radius: 1px;
  justify-self: center;
  width: 1px;
}
.proof-stat { text-align: center; }
.proof-stat__num {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--sp-2);
  letter-spacing: -0.02em;
}
.proof-stat__num--orange { color: var(--orange); }
.proof-stat p,
.proof-stat__label {
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--white);
  line-height: var(--leading-normal);
  max-width: 200px;
  margin: 0 auto;
  text-wrap: balance;
}
.proof-stat__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--sp-2);
  color: var(--orange);
  opacity: 0.85;
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners {
  display: none;
  background: var(--white);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--cream-dark);
}
.partners .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.partners__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.partners__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6);
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.partner-logo:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
}
.partner-logo img {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  filter: saturate(0.85);
  transition: filter 0.2s;
}
.partner-logo:hover img {
  filter: saturate(1);
}
.partner-more {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-muted);
  padding: var(--sp-4) var(--sp-5);
  border: 1.5px dashed var(--cream-dark);
  border-radius: var(--radius-lg);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--forest-deep);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--forest-deep), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--forest-deep), transparent); }

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeRoll 44s linear infinite;
}
.marquee__track:hover { animation-play-state: paused; }
@keyframes marqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
/* The dot carries equal margin on both sides, so it sits exactly halfway
   between neighbouring items. */
.marquee__dot {
  color: var(--orange);
  font-size: 0.7rem;
  opacity: 0.9;
  flex-shrink: 0;
  margin: 0 var(--sp-10);
}

/* ============================================================
   DELIVERABLES
   ============================================================ */
.deliverables { background: var(--cream); }

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

.d-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-10);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform    0.3s var(--ease-out),
    box-shadow   0.3s var(--ease-out);
}
.d-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Left accent bar */
.d-card__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0.14);
  transform-origin: top;
  transition: transform 0.45s var(--ease-out);
}
.d-card:hover .d-card__bar { transform: scaleY(1); }

/* Ghost number */
.d-card__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 700;
  color: var(--cream-dark);
  line-height: 1;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.03em;
  user-select: none;
  transition: color 0.3s;
}
.d-card:hover .d-card__num { color: rgba(230,118,43,0.1); }

.d-card h3 {
  color: var(--forest);
  margin-bottom: var(--sp-4);
}
.d-card p {
  font-size: 1.35rem;
  color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   PROBLEMS
   ============================================================ */
.problems {
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
.problems__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.problems__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  margin-bottom: var(--sp-16);
}
.problems__image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.14);
}
.problems__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease-out);
}
.problems__image:hover img { transform: scale(1.04); }

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

.p-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-8);
  position: relative;
  overflow: hidden;
  transition:
    background   0.28s var(--ease-out),
    border-color 0.28s var(--ease-out),
    transform    0.28s var(--ease-out),
    box-shadow   0.28s var(--ease-out);
}
/* Left border that draws down */
.p-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}
.p-card:hover {
  background: rgba(255,255,255,0.065);
  border-color: rgba(230,118,43,0.25);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.p-card:hover::before { transform: scaleY(1); }

.p-card__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(230,118,43,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-bottom: var(--sp-5);
  transition: background 0.25s, border-color 0.25s;
}
.p-card:hover .p-card__icon {
  background: rgba(230,118,43,0.1);
  border-color: rgba(230,118,43,0.45);
}

.p-card__tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230,118,43,0.65);
  margin-bottom: var(--sp-2);
}

.p-card h3 {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: var(--sp-3);
}
.p-card p {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--white);
  line-height: var(--leading-relaxed);
}
.p-card:hover p { color: rgba(255,255,255,0.92); transition: color 0.28s; }

/* ============================================================
   PROCESS
   ============================================================ */
.process { background: #F1F0E9; }

.process__wrapper {
  position: relative;
  padding-top: var(--sp-12);
}

.process__connector {
  position: absolute;
  top: 76px;
  left: calc(12.5% + 28px);
  width: calc(75% - 56px);
  height: 2px;
  overflow: visible;
  pointer-events: none;
}
.process__path {
  stroke-linecap: round;
  transition: stroke-dashoffset 2s var(--ease-out) 0.25s;
}
.process__path.animate { stroke-dashoffset: 0 !important; }

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

.process-step { text-align: center; padding: 0 var(--sp-3); }

.process-step__dot {
  position: relative;
  width: 56px; height: 56px;
  background: var(--forest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-6);
  box-shadow: var(--shadow-md);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.process-step:hover .process-step__dot {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.process-step__num {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  position: relative;
  z-index: 1;
}

.process-step__ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.process-step__ring circle {
  transition: stroke-dashoffset 1s var(--ease-out);
}
.process-step.visible .process-step__ring circle { stroke-dashoffset: 0 !important; }
.process-step:nth-child(1).visible .process-step__ring circle { transition-delay: 0.15s; }
.process-step:nth-child(2).visible .process-step__ring circle { transition-delay: 0.42s; }
.process-step:nth-child(3).visible .process-step__ring circle { transition-delay: 0.69s; }
.process-step:nth-child(4).visible .process-step__ring circle { transition-delay: 0.96s; }

.process-step h4 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--forest);
  margin-bottom: var(--sp-3);
  line-height: var(--leading-tight);
}
.process-step p {
  font-size: 1.05rem;
  color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--sage);
  padding: var(--sp-30) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 85% 50%, rgba(13,71,21,0.4) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 8% 60%,  rgba(230,118,43,0.06) 0%, transparent 55%);
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-20);
  align-items: center;
}

.cta-band__image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 3px 10px rgba(0,0,0,0.12);
}
.cta-band__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease-out);
}
.cta-band__image:hover img { transform: scale(1.04); }

.cta-band__text .eyebrow { margin-bottom: var(--sp-4); }
.cta-band__text h2 {
  color: var(--white);
  margin-bottom: var(--sp-5);
  font-style: italic;
}
.cta-band__text p {
  color: var(--white);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-8);
}
.cta-band__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cta-band__btn {
  align-self: flex-start;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--forest);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
}

.footer__top {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-20) var(--sp-10) var(--sp-16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer__contact {
  justify-self: end;
  text-align: right;
}
.footer__links { align-items: flex-end; }

.footer__logo {
  display: inline-flex;
  margin-bottom: var(--sp-4);
  transition: opacity 0.2s;
}
.footer__logo:hover { opacity: 0.78; }
.footer__logo img { height: 30px; width: auto; }

.footer__tagline {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-3);
  max-width: 270px;
}
/* Business identity block. Carrier A2P vetting and CAN-SPAM both expect the
   registered legal name, physical address, phone, and email to be publicly
   visible on the site, and the DBA relationship to be disclosed. Keeping it
   in the shared footer puts it on every page rather than only the legal ones. */
.footer__identity {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.78);
  line-height: var(--leading-relaxed);
  margin-top: var(--sp-5);
  font-style: normal;
}
.footer__identity strong {
  color: var(--white);
  font-weight: 600;
}
.footer__identity a {
  color: rgba(255,255,255,0.78);
  transition: color 0.2s var(--ease-out);
}
.footer__identity a:hover { color: var(--orange); }
.footer__identity a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.footer__col-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-5);
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.footer__link {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  display: block;
  transition: color 0.2s;
}
.footer__link:hover { color: var(--white); }

.footer__phrase {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.72);
  line-height: var(--leading-relaxed);
  margin-top: var(--sp-6);
  max-width: 300px;
}

.footer__bottom {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.footer__copy {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}

/* Clearance for the fixed LeadConnector chat bubble. It floats in the
   viewport's bottom-right corner, so without this it covers the footer's
   own bottom-right content (the AI summary row) once the page is scrolled
   to the end. */
.footer__bottom { padding-bottom: var(--sp-20); }

/* Legal links in the footer bar. Deliberately brighter than .footer__copy —
   the copyright line is decorative, but a link people are expected to find
   and click needs real contrast. */
.footer__legal-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.footer__legal-link:hover { color: var(--orange); }
.footer__copy-sep { margin: 0 var(--sp-2); }
.footer__legal-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius);
  color: var(--cream);
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section {
  position: relative;
  background: #F1F0E9;
  overflow: visible;
  padding: var(--sp-24) 0 calc(var(--sp-24) + 80px);
}

/* Full-width wordmark at bottom — 70% in section, 30% under footer */
.contact-section__watermark {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  transform: translateY(18%);
  user-select: none;
  line-height: 0;
}
.contact-section__watermark img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.07;
}

.contact-section__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* Left copy */
.contact-section__copy h2 {
  color: var(--forest);
  margin: var(--sp-3) 0 var(--sp-5);
}
.contact-section__copy h2 em { color: var(--sage); }
.contact-section__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sage-dark);
  margin-bottom: var(--sp-4);
}
.contact-section__copy p {
  color: var(--ink-mid);
  font-size: 1.1rem;
  line-height: var(--leading-relaxed);
  max-width: 400px;
}

/* Right card — grid stacking keeps height stable when form swaps to success */
.contact-section__card {
  background: var(--white);
  border-radius: 12px;
  padding: var(--sp-10) var(--sp-10);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.07),
    0 1px 6px rgba(0,0,0,0.04);
  border: 1px solid var(--cream-dark);
  display: grid;
}
.contact-form,
.contact-form__success {
  grid-column: 1;
  grid-row: 1;
}

/* Form */
.contact-form__honeypot { display: none; }

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}
.contact-form__field:last-of-type { margin-bottom: 0; }

.contact-form__field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--cream-dark);
  border-radius: var(--radius);
  padding: 10px 14px;
  width: 100%;
  transition:
    border-color 0.2s var(--ease-out),
    box-shadow   0.2s var(--ease-out);
  outline: none;
  resize: none;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.6;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: var(--sage);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(105,140,112,0.16);
}

.contact-form__submit {
  width: 100%;
  margin-top: var(--sp-5);
  justify-content: center;
  font-size: 1rem;
  padding: 13px var(--sp-6);
}

/* Success message — overlays the form in the same grid cell */
.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  gap: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.contact-form__success.visible {
  opacity: 1;
  pointer-events: auto;
}
.contact-form.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.contact-form__success-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(105,140,112,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-dark);
}
.contact-form__success h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--forest);
  margin: 0;
}
.contact-form__success p {
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ============================================================
   PLAYBOOK BAND  (home, directly under the proof bar)
   ============================================================ */
.pb-band {
  background: var(--white);
  border-bottom: 1px solid var(--cream-dark);
  padding: var(--sp-16) 0;
}
.pb-band__inner {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.pb-band__cover {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.6deg);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.pb-band__cover img {
  display: block;
  width: 100%;
  height: auto;
}
.pb-band:hover .pb-band__cover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 22px 48px rgba(12,69,20,0.18), 0 8px 18px rgba(0,0,0,0.07);
}

.pb-band__text h2 {
  font-size: 2.3rem;
  line-height: var(--leading-tight);
  color: var(--forest);
  margin: var(--sp-3) 0 var(--sp-5);
}
.pb-band__text h2 em {
  font-style: italic;
  color: var(--sage-dark);
}
.pb-band__text > p {
  font-size: var(--text-md);
  color: var(--ink-mid);
  line-height: var(--leading-normal);
  max-width: 54ch;
  margin: 0 0 var(--sp-8);
}

.pb-band__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.pb-band__arrow { transition: transform 0.3s var(--ease-out); }
.pb-band__btn:hover .pb-band__arrow { transform: translateX(4px); }

/* ============================================================
   RESULTS  (Rossville panel — home and /playbook/)
   ============================================================ */
.results { background: var(--forest); }

/* One large rounded container: header copy and stats on the left, the phone
   mockup anchored to the right with its bottom edge flush with the panel edge
   (the source image is cut off at the bottom — the panel edge hides the cut). */
.results__panel {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: var(--sp-12) var(--sp-10);
  display: grid;
  grid-template-columns: 1fr min(380px, 36vw);
  column-gap: var(--sp-10);
}
.results__panel-copy { grid-column: 1; }
.results__panel-copy .section__header {
  text-align: left;
  margin-bottom: var(--sp-8);
  max-width: none;
}
/* Sized so "Rossville Christian Academy." holds one line beside the phone. */
.results__panel-copy h2 { font-size: clamp(1.9rem, 2.9vw, 2.35rem); }
.results__panel-copy .section__lead { max-width: 44ch; }
.results__panel-copy .section__divider { margin-left: 0; }

/* Anchored to the panel's bottom-right so the image's hard-cut bottom edge
   coincides exactly with the panel edge. No shadow — the mockup is a flat
   straight-on render and reads as intended against the panel. */
.results__phone {
  position: absolute;
  bottom: 0;
  right: var(--sp-10);
  width: min(360px, 33vw);
  height: auto;
}

.results__stats {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  max-width: 640px;
  position: relative;
}
.r-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.r-stat:hover {
  border-color: rgba(231,125,54,0.45);
  background: rgba(255,255,255,0.08);
}
.r-stat__num {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.r-stat__label {
  font-size: 1rem;
  font-weight: 400;
  color: var(--white);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ============================================================
   CLIENT QUOTES  (home — light section after the results panel)
   ------------------------------------------------------------
   The message screenshots have the brand cream baked in as their
   background, so on a cream section they sit chrome-free — no
   card, border, or shadow, or the rectangle would show.
   ============================================================ */
.quotes { background: var(--cream); }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-8);
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.quotes__grid figure { margin: 0; }
.quotes__grid img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   FOOTER — SOCIAL + AI SUMMARY ROWS
   ============================================================ */
.footer__social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
/* The contact column is right-aligned on desktop; the icon rows follow it. */
.footer__contact .footer__social { justify-content: flex-end; }
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.footer__social-link:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-2px);
}
.footer__social-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.footer__ai {
  margin-top: var(--sp-8);
  /* Breathing room beneath the icon row so the fixed chat bubble in the
     viewport's bottom-right corner never sits on top of it. */
  margin-bottom: var(--sp-12);
}
.footer__contact .footer__ai-row { justify-content: flex-end; }
.footer__ai-row { display: flex; }
.footer__ai-label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-3);
}
.footer__ai-row {
  gap: var(--sp-3);
}
.footer__ai-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.footer__ai-link:hover {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-2px);
}
.footer__ai-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding: 0 var(--sp-6); }
  .pb-band__inner { grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--sp-10); }
  .pb-band__text h2 { font-size: 2rem; }
  .quotes__grid { gap: var(--sp-3) var(--sp-5); }

  .hero__inner { padding: var(--sp-12) var(--sp-6) var(--sp-10); gap: var(--sp-8); }
  .hero__sub { max-width: 100%; }

  .deliverables__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .problems__top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .problems__grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  .process__steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
  .process__connector { display: none; }

  .cta-band__inner { grid-template-columns: 1fr; gap: var(--sp-8); }

  /* Single column at tablet widths. The old 1fr 1fr grid put the contact
     column (justify-self: end, text-align: right) alone in the LEFT half of
     the second row, so it floated right-aligned mid-page. */
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer__brand { grid-column: auto; }
  .footer__contact { justify-self: start; text-align: left; }
  .footer__links { align-items: flex-start; }
  .footer__contact .footer__social { justify-content: flex-start; }
  .contact-section__inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  .contact-section__copy p { max-width: 100%; }
  .contact-section { padding-bottom: calc(var(--sp-16) + 60px); }
}

/* Nav collapses to the burger well before the content breakpoint: three
   uppercase links plus two uppercase buttons don't fit between 768 and ~980,
   so links wrap and the CTA hits the viewport edge. */
@media (max-width: 980px) {
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; }
}

/* Above the burger's breakpoint the drawer is unreachable, so make sure
   it can never paint. main.js also clears .open when this query stops
   matching; this is the belt to that braces, for the frames before JS
   runs. Both are needed: only the JS clears body's inline scroll lock. */
@media (min-width: 981px) {
  .nav__drawer { display: none; }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .container { padding: 0 var(--sp-5); }
  .nav__inner { padding: 0 var(--sp-5); }
  .section { padding: var(--sp-12) 0; }

  .hero { min-height: auto; }
  .hero__eyebrow-text br { display: inline; }
  .hero__inner { padding: var(--sp-5) var(--sp-5) var(--sp-6); gap: var(--sp-4); }
  .hero__sub { font-size: 1.1rem; }
  .hero__actions { flex-direction: column; align-items: center; width: 100%; }
  /* Stacked on mobile, so these go full width. The old 46% was narrower than
     the uppercase label needs and the nowrap text spilled outside the box. */
  .hero__actions .btn { width: 100%; max-width: 340px; justify-content: center; font-size: var(--text-base); padding: 14px var(--sp-5); }

  .section__header { margin-bottom: var(--sp-8); }

  .problems__top { margin-bottom: var(--sp-8); }

  .cta-band { padding: var(--sp-12) 0; }
  .cta-band__inner { padding: 0 var(--sp-5); gap: var(--sp-6); }

  .pb-band { padding: var(--sp-12) 0; }
  .pb-band__inner { grid-template-columns: 1fr; gap: var(--sp-8); justify-items: center; text-align: center; }
  .pb-band__cover { max-width: 340px; }
  .pb-band__text > p { margin-left: auto; margin-right: auto; }

  .quotes__grid { grid-template-columns: 1fr; gap: var(--sp-2); max-width: 440px; }

  /* Panel: phone leaves the absolute right slot and flows below the stats,
     bottom edge flush with the panel so the image's cut-off stays hidden. */
  .results__panel { grid-template-columns: 1fr; padding-bottom: var(--sp-10); }
  .results__phone {
    position: static;
    grid-column: 1;
    display: block;
    height: auto;
    width: min(320px, 70%);
    margin: var(--sp-8) auto calc(-1 * var(--sp-10));
  }

  .results__panel { padding: var(--sp-8) var(--sp-5) var(--sp-8); }
  .r-stat { padding: var(--sp-5); }
  .r-stat__num { font-size: 2rem; }

  .contact-section { padding: var(--sp-16) 0 calc(var(--sp-12) + 60px); }
  .contact-section__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
  .contact-section__copy { text-align: center; width: 100%; max-width: 480px; }
  .contact-section__copy p { max-width: 100%; }
  .contact-section__card { width: 100%; max-width: 480px; padding: var(--sp-8) var(--sp-6); }
  .contact-form__row { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-10) var(--sp-5) var(--sp-8); }
  .footer__brand { grid-column: auto; }
  .footer__contact { justify-self: start; text-align: left; }
  .footer__links { align-items: flex-start; }
  .footer__contact .footer__social { justify-content: flex-start; }
  .footer__bottom { padding: var(--sp-4) var(--sp-5) var(--sp-24); flex-direction: column; text-align: center; }
  .nav__drawer { padding: var(--sp-5) var(--sp-5) var(--sp-8); }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.15rem; }
  .hero__inner { padding: var(--sp-4) var(--sp-4) var(--sp-5); gap: var(--sp-3); }
  .hero__sub { font-size: 1rem; }
  .process__steps { grid-template-columns: 1fr; gap: var(--sp-8); }
  .proof-bar__inner { grid-template-columns: 1fr; }
  .proof-divider { display: none; }
  .proof-bar { padding: var(--sp-8) 0; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }

  .pb-band__text h2 { font-size: 1.65rem; }
  .results__stats { grid-template-columns: 1fr; }
}

/* ── Booking modal (GoHighLevel) ─────────────────────────── */
/* Sits above the nav (z 200) and mobile drawer (z 190). */
.booking {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Narrow side gutters on purpose: every pixel here is a pixel the
     widget loses, and it has layout thresholds at ~740px and 1000px.
     At a 768px viewport this keeps the panel at 752 and side-by-side,
     where a normal --sp-4 gutter would drop it to 736 and stack it. */
  padding: var(--sp-6) var(--sp-2);
}

.booking[hidden] { display: none; }

.booking__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 31, 10, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.booking__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* The GHL widget has two width thresholds, both worth clearing:
       ~740px  calendar and the list of times sit side by side, so the
               visitor sees bookable times without picking a date first
       1000px  the meeting details move into a left column, which stops
               them pushing the calendar below the fold
     Hence 1080, not the 720 this started at. */
  max-width: 1080px;
  /* A definite height, so .booking__frame's flex:1 resolves to real
     pixels. With only max-height the frame collapses to 0. */
  height: min(820px, calc(100vh - var(--sp-12)));
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity   240ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.booking.is-open .booking__scrim { opacity: 1; }
.booking.is-open .booking__panel { opacity: 1; transform: translateY(0) scale(1); }

.booking__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--forest);
  flex-shrink: 0;
}

.booking__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: var(--leading-tight);
  color: var(--white);
  font-weight: 600;
}

.booking__sub {
  margin-top: var(--sp-2);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--cream-dark);
}

.booking__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(241, 240, 233, 0.28);
  border-radius: var(--radius);
  color: var(--cream);
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out),
    border-color     200ms var(--ease-out),
    transform        200ms var(--ease-out);
}

.booking__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.booking__close:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.booking__close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.booking__close:active { transform: scale(0.94); }

.booking__frame {
  flex: 1;
  min-height: 0;
  background: var(--white);
}

/* The GHL widget scrolls inside its own document, so the iframe just
   fills the panel. No embed helper script involved. */
.booking__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lock the page behind the modal */
body.booking-open { overflow: hidden; }

@media (max-width: 640px) {
  .booking { padding: 0; }

  .booking__panel {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .booking__head { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .booking__title { font-size: 1.25rem; }
  .booking__sub { font-size: var(--text-base); }
}

@media (prefers-reduced-motion: reduce) {
  .booking__scrim,
  .booking__panel {
    transition: none;
  }
  .booking__panel { transform: none; }
}