/* ==========================================================================
   Veridian Digital Solutions, design system
   Ivory dominant canvas. Emerald structural. Gold sparse accent.
   Written mobile-first: base rules target 375px, media queries scale up.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Brand surfaces */
  --emerald: #0f4933;
  --emerald-dk: #0a2f20;
  --emerald-dker: #071f15;
  --ivory: #f8f4ec;
  --white: #ffffff;

  /* Gold. Two values on purpose:
     --gold is a fill and rule colour only (2.08:1 on ivory, unreadable as text).
     --gold-ink is the text-safe variant (5.50:1 on ivory, passes WCAG AA). */
  --gold: #c9a84c;
  --gold-lt: #ddbe6e;
  --gold-ink: #7a5f18;

  /* Text */
  --ink: #16231c;
  --muted: #5c6058;
  --rule: #e4dfd2;
  --rule-strong: #d3ccb9;

  /* Status */
  --ok: #2f7d4f;
  --warn: #9a6b12;
  --bad: #a33232;

  /* Type */
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  /* Scale */
  --r1: 4px;
  --r2: 8px;
  --r3: 14px;
  --max: 1180px;
  --px: clamp(1.25rem, 5vw, 2.75rem);
  --section-y: clamp(3.5rem, 9vw, 6rem);

  --shadow-card: 0 1px 2px rgba(22, 35, 28, 0.04),
    0 8px 24px rgba(22, 35, 28, 0.06);
  --shadow-float: 0 30px 70px rgba(15, 73, 51, 0.24),
    0 8px 20px rgba(0, 0, 0, 0.1);
}

/* --- 2. Reset ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

/* Visible focus for keyboard users on every interactive element. */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: var(--r1);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--emerald);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Typography ------------------------------------------------------ */

.display-1,
.display-2,
.display-3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Instrument Serif ships a single weight. Emphasis comes from the italic
   and from colour, never from a bold that the font cannot render. */
.display-1 {
  font-size: clamp(2.25rem, 7vw, 3.6rem);
}

.display-2 {
  font-size: clamp(1.85rem, 5vw, 2.6rem);
}

.display-3 {
  font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  line-height: 1.2;
}

.display-1 em,
.display-2 em,
.display-3 em {
  font-style: italic;
  color: var(--emerald);
}

.lead {
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--muted);
  max-width: 34em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.eyebrow--center {
  justify-content: center;
}

.prose p + p {
  margin-top: 1rem;
}

.prose a {
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 4. Layout ---------------------------------------------------------- */

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--px);
}

.wrap--narrow {
  max-width: 820px;
}

.section {
  padding-block: var(--section-y);
}

.section--white {
  background: var(--white);
}

.section--tint {
  background: var(--ivory);
}

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
}

/* The one deliberate dark moment, used for product showcase only. */
.section--dark {
  background: var(--emerald-dk);
  color: var(--white);
}

.section--dark .display-1,
.section--dark .display-2,
.section--dark .display-3 {
  color: var(--white);
}

.section--dark .display-1 em,
.section--dark .display-2 em,
.section--dark .display-3 em {
  color: var(--gold-lt);
}

.section--dark .eyebrow {
  color: var(--gold-lt);
}

.section--dark .lead,
.section--dark .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: var(--r2);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--gold);
  color: var(--emerald);
  font-weight: 700;
}

.btn--primary:hover {
  background: var(--gold-lt);
}

.btn--secondary {
  border-color: var(--emerald);
  color: var(--emerald);
  background: transparent;
}

.btn--secondary:hover {
  background: var(--emerald);
  color: var(--white);
}

.btn--emerald {
  background: var(--emerald);
  color: var(--white);
}

.btn--emerald:hover {
  background: var(--emerald-dk);
}

/* On the dark section a bordered button needs a light border. */
.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- 6. Navigation ------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--emerald);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--px);
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.logo__mark {
  width: 36px;
  height: 36px;
  flex: none;
  background: var(--gold);
  border-radius: var(--r1);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--emerald);
}

.logo__name {
  display: block;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.logo__sub {
  display: block;
  /* 0.7 not 0.55: at 0.55 this measures 4.33:1 on emerald, just under AA. */
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav__links {
  display: none;
}

.nav__cta {
  display: none;
}

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--emerald);
  padding: 1.25rem var(--px) 2rem;
  overflow-y: auto;
  display: none;
}

.mobile-menu[data-open="true"] {
  display: block;
}

.mobile-menu__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.mobile-menu__close {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* Scoped away from .btn, otherwise this rule outranks the button colour
   (0,1,1 beats 0,1,0) and paints the gold CTA's label white on gold. */
.mobile-menu a:not(.btn) {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu a:not(.btn)[aria-current="page"] {
  color: var(--gold-lt);
}

.mobile-menu .btn {
  margin-top: 1.5rem;
}

@media (min-width: 950px) {
  .nav__toggle {
    display: none;
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
  }

  .nav__links a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
    font-weight: 500;
    padding-block: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .nav__links a:hover {
    color: var(--white);
  }

  .nav__links a[aria-current="page"] {
    color: var(--white);
    border-bottom-color: var(--gold);
  }

  .nav__cta {
    display: inline-flex;
    flex: none;
    padding: 0.7rem 1.25rem;
    font-size: 0.84rem;
  }
}

/* --- 7. Page hero (inner pages) ----------------------------------------- */

.page-hero {
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
  background: var(--ivory);
}

.page-hero .lead {
  margin-top: 1.1rem;
}

.page-hero .btn-row {
  margin-top: 1.75rem;
}

/* --- 8. Cards and grids ------------------------------------------------- */

.grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r2);
  overflow: hidden;
}

.grid > * {
  background: var(--white);
  padding: clamp(1.5rem, 4vw, 2rem);
}

.section--tint .grid > * {
  background: var(--white);
}

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

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

.numbered__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold-ink);
  letter-spacing: 0.08em;
  margin-bottom: 0.85rem;
}

.numbered :is(h2, h3, h4) {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.numbered p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Standalone card, used where a bordered grid is too rigid. */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  padding: clamp(1.5rem, 4vw, 2rem);
}

.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.card--dark p {
  color: rgba(255, 255, 255, 0.72);
}

/* Empty slot, used where real data is not available yet. Deliberately
   visible rather than hidden, so an unfilled section is obvious. */
/* Sits in a full-width .wrap so section headings keep a consistent left edge
   down the page, but centres itself so it does not stretch to 1180px. */
.empty-slot {
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--r3);
  background: rgba(255, 255, 255, 0.5);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.empty-slot__label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.85rem;
}

.empty-slot :is(h2, h3) {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}

.empty-slot p {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 40ch;
  margin-inline: auto;
}

/* --- 9. Stat strip ------------------------------------------------------ */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin-top: 2.25rem;
}

.stat strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--emerald);
  line-height: 1.1;
}

.stat span {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- 10. CTA band ------------------------------------------------------- */

.cta-band {
  background: var(--gold);
  padding-block: clamp(3rem, 7vw, 4rem);
  text-align: center;
}

.cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  color: var(--emerald);
  line-height: 1.15;
}

.cta-band p {
  color: var(--emerald-dk);
  margin-top: 0.75rem;
  margin-bottom: 1.75rem;
  font-size: 0.98rem;
}

.cta-band .btn-row {
  justify-content: center;
}

/* --- 11. Footer --------------------------------------------------------- */

.footer {
  background: var(--emerald-dker);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 7vw, 4rem) 2rem;
  font-size: 0.88rem;
}

.footer__grid {
  display: grid;
  gap: 2.25rem;
}

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

@media (min-width: 980px) {
  .footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.footer__brand p {
  margin-top: 1rem;
  line-height: 1.7;
  max-width: 30ch;
  color: rgba(255, 255, 255, 0.6);
}

.footer__heading {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 1rem;
}

.footer__links,
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  list-style: none;
}

.footer__contact {
  margin-top: 1.1rem;
}

/* Padding rather than gap, so the tap target is the full row height.
   Keeps these list links at or above the 24px minimum on mobile. */
.footer__links a,
.footer__contact a {
  display: inline-block;
  padding-block: 0.4rem;
}

.footer__links a:hover,
.footer__contact a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bottom a {
  display: inline-block;
  padding-block: 0.35rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bottom a:hover {
  color: var(--white);
}

.footer__bottom {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer__social {
  display: flex;
  gap: 0.6rem;
}

.footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
}

.footer__social a:hover {
  color: var(--white);
  border-color: var(--gold);
}

/* --- 12. Floating WhatsApp --------------------------------------------- */

.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.wa-float:hover {
  transform: scale(1.05);
}

/* --- 13. Forms ---------------------------------------------------------- */

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field .hint {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r2);
  padding: 0.8rem 0.9rem;
  font-size: 0.95rem;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--emerald);
  outline: 2px solid rgba(15, 73, 51, 0.15);
  outline-offset: 0;
}

.field-row {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 560px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r2);
  font-size: 0.88rem;
  display: none;
}

.form-status[data-state="error"] {
  display: block;
  background: rgba(163, 50, 50, 0.08);
  border: 1px solid rgba(163, 50, 50, 0.3);
  color: var(--bad);
}

.form-status a {
  color: var(--bad);
  font-weight: 600;
  text-decoration: underline;
}

.form-success {
  display: none;
  text-align: center;
  padding: clamp(2rem, 6vw, 3rem) 1rem;
}

.form-success[data-state="visible"] {
  display: block;
}

.form-success__check {
  width: 54px;
  height: 54px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--emerald);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

.form-note {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.form-note a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--emerald);
  text-decoration: underline;
}

/* --- 14. Homepage hero -------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem);
  background: var(--ivory);
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.75rem);
  align-items: center;
}

@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.75rem;
  }
}

.hero .btn-row {
  margin-top: 1.75rem;
}

/* Dark dashboard card floating on the ivory canvas. The offset ivory panel
   behind it stops the dark block reading as a hole in the page. */
.dash {
  position: relative;
}

.dash::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -18px;
  width: 88%;
  height: 92%;
  background: var(--ivory);
  border: 1.5px solid var(--rule);
  border-radius: var(--r3);
  z-index: 1;
}

@media (max-width: 979px) {
  .dash::before {
    display: none;
  }
}

.dash__card {
  position: relative;
  z-index: 2;
  background: var(--emerald-dker);
  border-radius: var(--r3);
  padding: clamp(1.15rem, 4vw, 1.6rem);
  box-shadow: var(--shadow-float);
}

.dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.dash__dots {
  display: flex;
  gap: 6px;
}

.dash__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.dash__live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

.dash__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

.dash__cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
}

.dash__cell {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r2);
  padding: 0.9rem;
}

.dash__cell-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}

.dash__cell-num {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  color: var(--white);
  line-height: 1.1;
}

.dash__cell-sub {
  font-size: 0.7rem;
  color: var(--gold-lt);
  margin-top: 0.25rem;
}

.dash__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  margin-bottom: 1rem;
}

.dash__bars div {
  flex: 1;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px 3px 0 0;
}

.dash__bars div.is-gold {
  background: var(--gold);
}

.dash__brief {
  background: rgba(201, 168, 76, 0.12);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r2) var(--r2) 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.dash__brief strong {
  color: var(--gold-lt);
  font-weight: 600;
}

/* --- 15. Contact page --------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: clamp(2.25rem, 6vw, 3.5rem);
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }
}

.contact__channels {
  list-style: none;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.contact__channels a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  word-break: break-word;
}

.contact__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.3rem;
}

/* --- 16. Blog ----------------------------------------------------------- */

.post-list {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}

.post-list article {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.25rem;
}

.post-list h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
}

.post-list h2 a:hover {
  color: var(--emerald);
}

.post-meta {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.post-body {
  max-width: 38em;
}

.post-body h2,
.post-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.post-body h2 {
  font-size: 1.6rem;
}

.post-body h3 {
  font-size: 1.25rem;
}

.post-body p,
.post-body ul,
.post-body ol {
  margin-bottom: 1.1rem;
  line-height: 1.75;
}

.post-body ul,
.post-body ol {
  padding-left: 1.25rem;
}

.post-body li {
  margin-bottom: 0.4rem;
}

.post-body a {
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 17. Legal pages ---------------------------------------------------- */

.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  line-height: 1.25;
}

.legal h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 1.5rem;
}

.legal h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal p,
.legal ul {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal strong {
  color: var(--ink);
}

.legal a {
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r1);
  padding: 0.1em 0.35em;
}

/* --- 18. Error page ----------------------------------------------------- */

.error-page {
  padding-block: clamp(4rem, 12vw, 7rem);
  text-align: center;
}

.error-page .btn-row {
  justify-content: center;
  margin-top: 2rem;
}

/* --- 19. Service rows --------------------------------------------------- */

/* A row layout rather than equal cards, because the five service descriptions
   differ a lot in length and a grid would leave ragged whitespace. */
.service-rows {
  list-style: none;
  border-top: 1px solid var(--rule);
}

.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1.25rem;
  padding-block: clamp(1.5rem, 4vw, 2rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

@media (min-width: 800px) {
  .service-row {
    grid-template-columns: 3.5rem 16rem 1fr;
    gap: 2rem;
    align-items: baseline;
  }

  /* The wrapper is dropped so the heading and body sit in the same grid row.
     Both columns are pinned explicitly, otherwise a second paragraph (the NGO
     row has one) auto-places into the narrow first column. */
  .service-row > div {
    display: contents;
  }

  .service-row :is(h2, h3, h4) {
    grid-column: 2;
  }

  .service-row > div > p {
    grid-column: 3;
  }
}

.service-row__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gold-ink);
  letter-spacing: 0.08em;
  padding-top: 0.25rem;
}

.service-row :is(h2, h3, h4) {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

@media (min-width: 800px) {
  .service-row :is(h2, h3, h4) {
    margin-bottom: 0;
  }
}

.service-row p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.75;
  max-width: 46em;
}

/* --- 20. Product pair --------------------------------------------------- */

.product-pair {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 800px) {
  .product-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.product-tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: 0.6rem 0 1rem;
  line-height: 1.6;
}

.card--dark .display-3 {
  color: var(--white);
}

/* --- 21. FAQ accordion -------------------------------------------------- */

.faq__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 900px) {
  .faq__layout {
    grid-template-columns: 1fr 1.3fr;
    align-items: start;
  }
}

.faq__list {
  border-top: 1px solid var(--rule);
}

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

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--emerald);
}

/* Plus sign that becomes a minus when the item is open. */
.faq__marker {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
}

.faq__marker::before,
.faq__marker::after {
  content: "";
  position: absolute;
  background: var(--gold-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq__marker::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}

.faq__marker::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}

.faq__item[open] .faq__marker::after {
  transform: scaleY(0);
  opacity: 0;
}

.faq__answer {
  padding-bottom: 1.25rem;
}

.faq__answer p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.8;
  max-width: 46em;
}

/* --- 22. Founder note --------------------------------------------------- */

/* Long-form personal writing, so the measure is tighter than a section intro
   and the line height is looser. Left aligned with the section heading above
   rather than centred, to keep the page's left edge consistent. */
.founder-note {
  max-width: 36em;
}

.founder-note p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink);
}

.founder-note p + p {
  margin-top: 1.35rem;
}

.founder-note__byline {
  margin-top: 2.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-strong);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

/* --- 23. Interactive demos ---------------------------------------------- */

.demo {
  background: var(--emerald-dker);
  /* The border does the separating work on the dark section, where the drop
     shadow is invisible against an almost equally dark backdrop. */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: var(--shadow-float);
  color: var(--white);
}

.demo__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.demo__dots {
  display: flex;
  gap: 6px;
}

.demo__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.demo__live,
.demo__stamp {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

.demo__live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.demo__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

/* Tabs scroll sideways on narrow screens rather than wrapping into a block. */
.demo__tablist {
  display: flex;
  gap: 0.25rem;
  padding: 0.6rem 0.6rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.demo__tablist::-webkit-scrollbar {
  display: none;
}

.demo__tab {
  flex: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.demo__tab:hover {
  color: var(--white);
}

.demo__tab[aria-selected="true"] {
  color: var(--white);
  border-bottom-color: var(--gold);
}

.demo__panel {
  padding: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.demo__panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Summary cells */
.demo-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.15rem;
}

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

.demo-summary__cell {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r2);
  padding: 0.75rem 0.8rem;
}

.demo-summary__label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.35rem;
}

.demo-summary__value {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--white);
}

.demo-summary__value.is-ok {
  color: #6ee7a0;
}

.demo-summary__value.is-warn {
  color: var(--gold-lt);
}

.demo-summary__value.is-bad {
  color: #f19a9a;
}

.demo-summary__note {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.25rem;
}

/* Tables scroll inside their own container so the page never scrolls sideways.
   The two radial gradients are scroll shadows: they sit on the container and
   fade out as the visitor reaches each end, so it is obvious there is more
   table off to the right. Pure CSS, no scroll listener. */
.demo-table-scroll {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r2);
  background-image:
    linear-gradient(to right, var(--emerald-dker), rgba(7, 31, 21, 0)),
    linear-gradient(to left, var(--emerald-dker), rgba(7, 31, 21, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 34rem;
}

.demo-table th,
.demo-table td {
  text-align: left;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}

.demo-table thead th {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.03);
}

.demo-table tbody th {
  font-weight: 600;
  color: var(--white);
}

.demo-table td {
  color: rgba(255, 255, 255, 0.78);
}

.demo-table tbody tr:last-child th,
.demo-table tbody tr:last-child td {
  border-bottom: none;
}

.pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

.pill.is-ok {
  background: rgba(110, 231, 160, 0.16);
  color: #6ee7a0;
}

.pill.is-warn {
  background: rgba(221, 190, 110, 0.16);
  color: var(--gold-lt);
}

.pill.is-bad {
  background: rgba(241, 154, 154, 0.16);
  color: #f19a9a;
}

/* Small sales chart */
.demo-chart {
  margin-bottom: 1.15rem;
}

.demo-chart__label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.6rem;
}

.demo-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 90px;
}

.demo-chart__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 0.4rem;
}

.demo-chart__fill {
  width: 100%;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}

.demo-chart__fill.is-active {
  background: var(--gold);
}

.demo-chart__bar span {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.62);
}

.demo-intro {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.demo-intro--dark {
  color: rgba(255, 255, 255, 0.72);
}

.demo-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.85rem;
  font-style: italic;
}

.demo-note--dark {
  color: rgba(255, 255, 255, 0.62);
}

/* --- 23. SIM brief ------------------------------------------------------ */

.demo--brief .brief {
  padding: 1.15rem;
}

.brief__kicker {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 0.5rem;
}

.brief__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 1.15rem;
}

.brief__body {
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1.15rem;
  max-width: 46em;
}

.brief__timeline {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.brief__step {
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 var(--r2) var(--r2) 0;
  padding: 0.8rem 0.9rem;
}

.brief__step.is-ok {
  border-left-color: #6ee7a0;
}

.brief__step.is-warn {
  border-left-color: var(--gold);
}

.brief__step.is-bad {
  border-left-color: #f19a9a;
}

.brief__step-level {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.brief__step-who {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0.2rem 0;
}

.brief__step-state {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}

.brief__chat {
  display: grid;
  gap: 0.75rem;
}

.brief__msg {
  border-radius: var(--r2);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  line-height: 1.7;
}

.brief__msg--user {
  background: rgba(255, 255, 255, 0.07);
  color: var(--white);
}

.brief__msg--sim {
  background: rgba(201, 168, 76, 0.14);
  border-left: 2px solid var(--gold);
  color: rgba(255, 255, 255, 0.85);
}

.brief__msg-role {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 0.35rem;
}

.brief__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.brief__nav .btn {
  padding: 0.7rem 1.1rem;
  font-size: 0.82rem;
}

.brief__count {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* --- 24. Stock loss estimator ------------------------------------------- */

.calc {
  display: grid;
  gap: 1.5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  padding: clamp(1.25rem, 4vw, 2rem);
}

@media (min-width: 860px) {
  .calc {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.field__hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.4rem;
  line-height: 1.6;
}

.calc__rate-out {
  float: right;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--emerald);
  font-weight: 700;
}

.calc input[type="range"] {
  width: 100%;
  accent-color: var(--emerald);
  padding: 0;
  border: none;
  background: none;
}

.calc__result {
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--r3);
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

.calc__result-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.6rem;
}

.calc__result-big {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.05;
  color: var(--emerald);
  word-break: break-word;
}

.calc__result-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.calc__breakdown {
  display: grid;
  gap: 0.85rem;
  margin: 1.35rem 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule-strong);
}

.calc__breakdown div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.calc__breakdown dt {
  font-size: 0.82rem;
  color: var(--muted);
}

.calc__breakdown dd {
  font-weight: 600;
  font-size: 0.92rem;
}

.calc__disclaimer {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.calc__noscript {
  font-size: 0.85rem;
  color: var(--muted);
  grid-column: 1 / -1;
}

.calc__noscript a {
  color: var(--emerald);
  text-decoration: underline;
}

/* --- 25. Standalone text link ------------------------------------------- */

/* A link that stands on its own rather than sitting inside a sentence, so it
   carries its own tap target instead of relying on the line box. */
.text-link {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--emerald);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* --- 20. Utilities ------------------------------------------------------ */

.stack > * + * {
  margin-top: var(--stack-gap, 1rem);
}

.text-center {
  text-align: center;
}

.mt-lg {
  margin-top: clamp(2rem, 5vw, 3rem);
}