/* SiteMzansi v1 — dark by default with a light-mode toggle, single accent
   (emerald), asymmetric layout. 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;
  --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;
  --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; }

.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--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(--border);
}

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

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

.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(--border);
  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; }
}

/* ---------- 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); }

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

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

.hero__visual img {
  width: 100%;
  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; }
}

/* ---------- 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(--border);
  border-bottom: 1px solid var(--border);
}

.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;
}

.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;
}

.service--wide { grid-column: span 2; }

.service__icon {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  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: 640px;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.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: "R"; 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__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__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(--border);
}

.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 img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.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(--border);
}

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

.process__timeline {
  max-width: 62ch;
  margin-bottom: 2.5rem;
  font-size: 0.96rem;
}

.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(--border);
  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; }
}

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

.contact {
  max-width: 620px;
  margin: 0 auto;
  padding: 6rem 1.5rem 7rem;
  border-top: 1px solid var(--border);
  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;
}

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

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

.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); }

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

.footer {
  border-top: 1px solid var(--border);
  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); }

/* ---------- 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; }

.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; }
}

/* ---------- 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; }

  .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; }
}