/* SiteMzansi v1 — dark by default with a light-mode toggle, primary accent
   (emerald) plus a secondary warm accent (amber) used for specific call-out
   moments: the recommended pricing tier, the header CTA, and the "What we
   build" service icons. Design read: agency landing for SA SMEs, confident
   modern-studio language, native CSS, restrained scroll-reveal motion.
   Dials: variance 8, motion 6, density 3. */

:root,
:root[data-theme="dark"] {
  --bg: #0b0c0a;
  --bg-raised: #131511;
  --nav-bg: rgba(11, 12, 10, 0.85);
  --text: #f4f2ec;
  --text-dim: #a6a89f;
  --text-faint: #6f716a;
  --accent: #2fa86a;
  --accent-soft: #2fa86a26;
  --accent-2: #f28c3a;
  --accent-2-ink: #2a1704;
  --divider: #f28c3a4d;
  --border: #ffffff14;
  --radius: 14px;
  --max: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  --bg: #faf9f6;
  --bg-raised: #f0efe9;
  --nav-bg: rgba(250, 249, 246, 0.85);
  --text: #14150f;
  --text-dim: #55574d;
  --text-faint: #85877a;
  --accent: #1f8a53;
  --accent-soft: #1f8a5320;
  --accent-2: #dd7a1f;
  --accent-2-ink: #fff8f0;
  --divider: #dd7a1f59;
  --border: #00000014;
}

body { transition: background 0.2s var(--ease), color 0.2s var(--ease); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.15rem; }

p { margin: 0; color: var(--text-dim); }

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

img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
}

section, header, footer { position: relative; }

/* Keeps anchor-scrolled sections (nav links, hero CTAs) from landing under
   the sticky nav — --nav-height is measured in script.js since the nav's
   height varies with the logo/content instead of being a fixed value. */
section[id] { scroll-margin-top: var(--nav-height, 90px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--accent);
  color: #06120c;
}
.btn--primary:hover { background: #38bd77; }

.btn--ghost {
  border: 1px solid var(--border);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--accent); }

.btn--accent {
  background: var(--accent-2);
  color: var(--accent-2-ink);
}
.btn--accent:hover { background: #ffa64d; }

.btn--nav {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
}

.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.nav__brand-img {
  display: block;
  height: 128px;
  width: auto;
  border-radius: 6px;
  margin-top: 5px;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.nav__links a, .nav__mobile a, .footer__pdf-link, .footer a, .field__note a {
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--text); }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle__icon { transition: transform 0.35s var(--ease); }
.theme-toggle:hover .theme-toggle__icon { transform: rotate(25deg) scale(1.1); }

.theme-toggle__icon { width: 18px; height: 18px; }
.theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: block; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  width: 20px;
  height: 2px;
  background: var(--text);
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--divider);
  background: var(--bg);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a { font-size: 1rem; }
.nav__mobile .btn { margin-top: 0.5rem; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__inner .btn--nav { display: none; }
  .nav__toggle { display: flex; }
}

@media (min-width: 861px) {
  /* Guards against the mobile menu staying open (`.is-open`) when the
     viewport is resized past the breakpoint instead of the toggle being
     clicked — there's no resize listener resetting the class. */
  .nav__mobile.is-open { display: none; }
}

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

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  min-height: 70dvh;
}

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

/* Flex column + gap gives every child (heading, each paragraph, the CTA
   row) one consistent rhythm, instead of chained margin-top values that
   drift out of sync whenever a line wraps differently. */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: -200px;
}

.hero__text p {
  font-size: 1.1rem;
  max-width: 46ch;
}

.hero__ctas {
  margin-top: 0.75rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }
  .hero__visual { order: -1; }
  .hero__visual img { aspect-ratio: 16 / 10; }
  .hero__text { margin-top: 0; }
}

/* ---------- Strip ---------- */

.strip {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.strip__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.strip__num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.strip__label {
  color: var(--text-dim);
  font-size: 0.92rem;
}

@media (max-width: 700px) {
  .strip { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Services ---------- */

.services {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

/* Shares .services with #services above, but unlike that section (which
   sits right after .strip and inherits its bottom border as the divider),
   #deliverables follows .process directly and needs its own top divider. */
#deliverables {
  border-top: 1px solid var(--divider);
}

.services h2 { margin-bottom: 2.5rem; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.service {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  grid-column: span 1;
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.service .process__more { margin-top: 1.25rem; }

.service--wide { grid-column: span 2; }
.service--static { cursor: default; }
.service--static:hover { transform: none; }

.service__icon {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1.5px solid var(--accent-2);
  border-radius: 6px;
  color: var(--accent-2);
  margin-bottom: 1.5rem;
}

.service h3 { margin-bottom: 0.75rem; }

@media (max-width: 860px) {
  .services__grid { grid-template-columns: 1fr; }
  .service--wide { grid-column: span 1; }
}

/* ---------- Pricing ---------- */

.pricing {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--divider);
  text-align: center;
}

.pricing__top { max-width: 640px; margin: 0 auto; }

.pricing__intro { margin: 1rem auto 0; max-width: 48ch; }

.pricing__slider {
  margin: 3rem auto 0;
  max-width: 420px;
}

.pricing__rate {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.pricing__rate::before { content: attr(data-symbol); font-size: 0.55em; vertical-align: 0.2em; margin-right: 0.1rem; }
.pricing__rate-unit { font-size: 1.1rem; font-weight: 600; color: var(--text-faint); margin-left: 0.35rem; }

.pricing__currency {
  display: inline-flex;
  margin: 1.25rem auto 0;
  padding: 0.25rem;
  gap: 0.25rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.pricing__currency-btn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pricing__currency-btn:hover { color: var(--text); }
.pricing__currency-btn.is-active { background: var(--accent); color: var(--accent-ink, #fff); }
.pricing__currency-note { margin-top: 0.6rem; font-size: 0.75rem; color: var(--text-faint); }

.pricing__slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin-top: 1.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--border) 0%);
  background: var(--border);
  cursor: pointer;
}
.pricing__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.pricing__slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.pricing__slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.pricing__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-faint);
  text-align: left;
}
.pricing__labels span:last-child { text-align: right; }

.pricing__tiers {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.pricing__tier {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 2rem;
}

/* The one spot the secondary amber accent appears: flagging the tier most
   businesses land on, so it reads as a recommendation, not decoration. */
.pricing__tier--featured { border-top-color: var(--accent-2); }
.pricing__tier-badge {
  position: absolute;
  top: -0.7rem;
  right: 1.5rem;
  background: var(--accent-2);
  color: var(--accent-2-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.pricing__tier-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.75rem;
}

.pricing__tier-range {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.pricing__tier-dash { color: var(--text-faint); margin: 0 0.3rem; font-weight: 400; }

.pricing__tier p { font-size: 0.92rem; }
.pricing__tier p + p { margin-top: 0.85rem; }

.pricing__tier-example { color: var(--text-faint); font-size: 0.85rem; }
.pricing__tier-example a { color: var(--accent); text-decoration: underline; }

@media (max-width: 900px) {
  .pricing__tiers { grid-template-columns: 1fr; }
}

.pricing__note { margin: 2.5rem auto 0; max-width: 42ch; font-size: 0.9rem; }

/* ---------- Work ---------- */

.work {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--divider);
}

.work h2 { margin-bottom: 0.75rem; }

.work__intro {
  max-width: 60ch;
  margin-bottom: 2.5rem;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* .work__item is a <button> — without an explicit reset it falls back to
   the browser's own button styling, which in some browsers (Firefox among
   them) defaults to an arrow cursor instead of a hand on hover. */
.work__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.work__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  cursor: pointer;
}

.work__item h3 {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.work__item p { font-size: 0.9rem; }

@media (max-width: 860px) {
  .work__grid { grid-template-columns: 1fr; }
}

/* ---------- Process ---------- */

.process {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--divider);
}

.process__intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}

.process h2 { margin-bottom: 1rem; }

.process__timeline {
  max-width: 52ch;
  font-size: 0.96rem;
}

.process__timeline + .process__timeline {
  margin-top: 1rem;
}

.process__intro-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

@media (max-width: 860px) {
  .process__intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .process__intro-visual { order: -1; }
}

.process__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.process__step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--accent);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.process__step::before {
  content: attr(data-step);
  position: absolute;
  top: 0.75rem;
  right: -0.25rem;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  opacity: 0.06;
  pointer-events: none;
}
.process__step:hover .process__more { color: var(--text); }
.process__step:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.process__step h3 { margin-bottom: 0.6rem; }
.process__step p { font-size: 0.92rem; }

.process__more {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
}
.process__more::after { content: " ->"; }

@media (max-width: 860px) {
  .process__list { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.modal[hidden] { display: none; }

.modal__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.modal h3 { margin-bottom: 1.25rem; }
.modal p { margin-top: 0; margin-bottom: 1rem; font-size: 0.96rem; }
.modal p:last-child { margin-bottom: 0; }

.modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.modal__close:hover { transform: rotate(90deg); }
.modal__close:hover { border-color: var(--accent); }

/* ---------- About ---------- */

.about {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--divider);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 3rem;
  align-items: center;
}

.about__text p {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  max-width: 52ch;
}

.about__visual img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__visual { order: -1; }
}

/* ---------- Affiliate ---------- */

.affiliate {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--divider);
  text-align: center;
}

.affiliate__intro {
  margin: 1rem auto 0;
  max-width: 56ch;
}

.affiliate__steps {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.affiliate__step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 2px solid var(--accent);
}
.affiliate__step::before {
  content: attr(data-step);
  position: absolute;
  top: 0.75rem;
  right: -0.25rem;
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  opacity: 0.06;
  pointer-events: none;
}
.affiliate__step h3 { margin-bottom: 0.6rem; }
.affiliate__step p { font-size: 0.92rem; }

.affiliate__reward {
  margin-top: 4rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: left;
}
.affiliate__reward h3 { text-align: center; margin-bottom: 1rem; }
.affiliate__reward > p { max-width: 56ch; margin: 0 auto; text-align: center; }
.affiliate__reward > p + p { margin-top: 1.5rem; }

.affiliate__reward-grid {
  margin: 1.75rem auto 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
.affiliate__reward-grid::before {
  content: "or";
  grid-column: 2;
  grid-row: 1;
  color: var(--text-faint);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.affiliate__reward-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}
.affiliate__reward-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.affiliate__reward-label {
  color: var(--text-dim);
  font-size: 0.88rem;
}

@media (max-width: 700px) {
  .affiliate__reward-grid { grid-template-columns: 1fr; }
  .affiliate__reward-grid::before { grid-column: 1; grid-row: 2; }
  .affiliate__reward-item:last-child { order: 3; }
}

.affiliate__tips {
  margin-top: 4rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.affiliate__tips h3 { text-align: center; margin-bottom: 1.25rem; }
.affiliate__tips-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  list-style: none;
  padding: 0;
}
.affiliate__tips-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
}
.affiliate__tips-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.affiliate__form {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.affiliate__success {
  margin-top: 3rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.affiliate__success h3 { font-size: 1.3rem; }
.affiliate__success p { margin-top: 0.75rem; }

@media (max-width: 860px) {
  .affiliate__steps { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact {
  max-width: 620px;
  margin: 0 auto;
  padding: 6rem 1.5rem 7rem;
  border-top: 1px solid var(--divider);
  text-align: center;
}

.contact p { margin: 1rem auto 0; max-width: 46ch; }

.contact__form {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.contact__success {
  margin-top: 3rem;
}

.contact__success h3 {
  font-size: 1.3rem;
}

.contact__success p {
  margin-top: 0.75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.88rem;
  color: var(--text-dim);
}

.field__optional {
  font-weight: 400;
  color: var(--text-faint);
}

.field input,
.field textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__help {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.field__note {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: 0.25rem;
}
.field__note a { color: var(--accent); }

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 0.35rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  vertical-align: -5px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn__icon { width: 13px; height: 13px; }
.copy-btn__icon--check { display: none; color: var(--accent); }
.copy-btn.is-copied .copy-btn__icon--copy { display: none; }
.copy-btn.is-copied .copy-btn__icon--check { display: block; }

/* ---------- Legal pages (privacy policy, etc.) ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

.legal .eyebrow-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.legal h1 { margin-bottom: 1.5rem; }

.legal__lede {
  font-size: 1.1rem;
  max-width: 60ch;
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}

.legal p { max-width: 66ch; margin-top: 0.5rem; }
.legal p:first-of-type { margin-top: 0; }
.legal a:not(.btn) { color: var(--accent); text-decoration: underline; }
.legal code {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

.legal__back { margin-top: 3.5rem; }

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

.footer {
  border-top: 1px solid var(--divider);
  padding: 2.5rem 1.5rem;
}

.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.footer__pdf-link:hover { color: var(--text); }

/* Half the header's logo size — the footer mark is a sign-off, not a
   second nav, so it doesn't need to match the header's scale. */
.footer .nav__brand-img { height: 64px; margin-top: 0; }

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

/* Hidden-until-revealed only applies once JS confirms it can run the
   IntersectionObserver reveal (html.js, set by an inline head script).
   No-JS or JS-failure visitors get full content, never a blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered reveal for grouped cards: siblings within the same grid/list
   animate in with a short cascading delay instead of all at once. Delay
   is capped so long lists (leads table etc, not present here, but future
   grids) don't leave the last item waiting seconds to appear. */
.services__grid > .reveal:nth-child(1) { --reveal-delay: 0s; }
.services__grid > .reveal:nth-child(2) { --reveal-delay: 0.08s; }
.services__grid > .reveal:nth-child(3) { --reveal-delay: 0.16s; }
.services__grid > .reveal:nth-child(4) { --reveal-delay: 0.24s; }
.services__grid > .reveal:nth-child(5) { --reveal-delay: 0.32s; }
.services__grid > .reveal:nth-child(6) { --reveal-delay: 0.4s; }

.work__grid > .reveal:nth-child(1) { --reveal-delay: 0s; }
.work__grid > .reveal:nth-child(2) { --reveal-delay: 0.1s; }
.work__grid > .reveal:nth-child(3) { --reveal-delay: 0.2s; }

.process__list > .reveal:nth-child(1) { --reveal-delay: 0s; }
.process__list > .reveal:nth-child(2) { --reveal-delay: 0.08s; }
.process__list > .reveal:nth-child(3) { --reveal-delay: 0.16s; }
.process__list > .reveal:nth-child(4) { --reveal-delay: 0.24s; }

.strip > .reveal:nth-child(1) { --reveal-delay: 0s; }
.strip > .reveal:nth-child(2) { --reveal-delay: 0.1s; }
.strip > .reveal:nth-child(3) { --reveal-delay: 0.2s; }

.hero__visual.reveal { --reveal-delay: 0.12s; }

/* Card hover-lift: motivated by feedback (confirms the card is interactive
   before the click), not decoration. Only on pointer devices with hover
   support, so it doesn't leave a stuck hover state on touch. */
@media (hover: hover) {
  .service, .work__item, .process__step {
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  /* Specificity note: .reveal.is-visible (set once scrolled into view) pins
     transform at 3 classes' worth of specificity, which would otherwise
     silently beat a plain :hover rule (2) and make the hover lift a no-op
     after the reveal finishes. Matching that exact class combination here
     is what makes the override actually win. */
  .service.reveal.is-visible:hover,
  .work__item.reveal.is-visible:hover,
  .process__step.reveal.is-visible:hover {
    transform: translateY(-4px);
  }
  .service:hover { border-color: var(--accent); }
  .work__item:hover img { box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .service, .work__item, .process__step { transition: none; }
  .service:hover, .work__item:hover, .process__step:hover { transform: none; }
}

/* ---------- Affiliate auth (login / dashboard) ---------- */

.auth {
  max-width: 440px;
  margin: 0 auto;
  padding: 5rem 1.5rem 7rem;
  text-align: center;
}

.auth h1 { margin-bottom: 0.75rem; }
.auth__lede { max-width: 40ch; margin: 0 auto; }

.auth__form {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.auth__error {
  background: #d9453620;
  border: 1px solid #d9453660;
  color: #ff8a7a;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  text-align: left;
}

.auth__note {
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--text-faint);
}
.auth__note a { color: var(--accent); }

.dash {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 1.5rem 7rem;
}

.dash__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
}

.dash__header h1 { margin-bottom: 0.4rem; }
.dash__code {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-family: monospace;
  font-size: 1.05rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
}

.dash__status {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin-top: 0.6rem;
}
.dash__status--pending { background: #f28c3a26; color: var(--accent-2); }
.dash__status--active { background: var(--accent-soft); color: var(--accent); }
.dash__status--disabled { background: #d9453620; color: #ff8a7a; }

.dash__banner {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.95rem;
}

.dash__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.dash__stat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.dash__stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.dash__stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.dash__progress-wrap {
  margin-bottom: 2.5rem;
}

.dash__progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 0.75rem;
}

.dash__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s var(--ease, ease);
}

.dash__table-wrap {
  overflow-x: auto;
}

.dash__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.dash__table th,
.dash__table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dash__table th {
  color: var(--text-faint);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dash__pill {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}
.dash__pill--pending { background: #f28c3a26; color: var(--accent-2); }
.dash__pill--closed_paid { background: var(--accent-soft); color: var(--accent); }
.dash__pill--lost { background: #6f716a26; color: var(--text-faint); }

.dash__empty { color: var(--text-faint); font-size: 0.92rem; padding: 1rem 0; }

@media (max-width: 640px) {
  .dash__stats { grid-template-columns: 1fr; }
}

/* ---------- Print (used to generate the downloadable overview PDF) ---------- */

.print-only { display: none; }

@media print {
  .print-only { display: block; text-align: center; margin-top: 1.5rem; }

  /* !important is required here: :root[data-theme="dark"] (an attribute
     selector, higher specificity than plain :root) is what's actually
     applied whenever dark mode is active, and it would otherwise win over
     this print override regardless of source order or @media scoping. */
  :root {
    --bg: #ffffff !important;
    --bg-raised: #f4f3ef !important;
    --nav-bg: #ffffff !important;
    --text: #14150f !important;
    --text-dim: #45473d !important;
    --text-faint: #6f716a !important;
    --border: #00000022 !important;
  }

  .theme-toggle,
  .nav__toggle,
  .nav__mobile,
  .modal-overlay,
  .contact__form,
  .footer__pdf-link,
  .strip__label ~ * {
    display: none !important;
  }

  .nav { position: static; backdrop-filter: none; box-shadow: none; }

  /* dvh is a viewport unit; print has no viewport, so this otherwise
     forces a near-full-page gap of blank space before the hero text. */
  .hero { min-height: auto; }

  /* Chromium's print pagination doesn't fragment CSS Grid rows correctly:
     rather than splitting hero across the page boundary, it defers the
     whole grid to the next page and leaves page 1 blank. Fall back to
     block layout (and the DOM order: text, then image) for print only. */
  .hero, .about {
    display: block !important;
  }
  .hero__visual, .about__visual {
    margin-top: 1.5rem;
  }

  .reveal { opacity: 1 !important; transform: none !important; }

  /* break-inside:avoid is only safe on elements that comfortably fit one
     page; applying it to whole top-level sections (hero, services, etc,
     each taller than a page) just pushes them whole onto the next page,
     leaving the previous page mostly blank. Scope it to the small
     repeatable cards instead. */
  .service, .work__item, .process__step, .strip__item {
    break-inside: avoid;
  }

  .hero__visual img, .work__item img, .about__visual img {
    box-shadow: none;
  }

  a { color: var(--accent); text-decoration: none; }
}