/*
 * FM Digital Solutions — front-page.css
 * Builds on tokens.css → global.css
 * Dark-first, no em dashes in visible text, no phone/WhatsApp
 */

/* ── Utilities ─────────────────────────────── */
.wrap        { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding-top: 90px; padding-bottom: 90px; }
.section-pad-sm { padding-top: 72px; padding-bottom: 72px; }
.d-block     { display: block; }
.mb-sm       { margin-bottom: .5rem; }
.muted       { color: var(--fg-muted); }
.subtle      { color: var(--fg-subtle); }
.lime        { color: var(--lime); }
.cyan        { color: var(--cyan); }
.purple-light{ color: var(--purple-light); }
.f-label     { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.f-mono      { font-family: var(--font-mono); font-size: 11px; }
.sec-idx     { color: var(--purple-light); }
.two-col     { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.section-header  { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 2.5rem; flex-wrap: wrap; }
.section-title   { font-family: var(--font-head); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--fg); margin: .35rem 0 0; line-height: 1.15; }
.section-sub     { color: var(--fg-muted); font-size: .875rem; line-height: 1.6; max-width: 480px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-muted); font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .04em;
  padding: 10px 16px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--fg); border-color: var(--border-mid); }

/* ── Chips ──────────────────────────────────── */
.chip {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: var(--surface-3); color: var(--fg-muted);
  border: 1px solid var(--border);
}
.chip-purple { background: rgba(107,61,150,.18); color: var(--purple-light); border-color: rgba(107,61,150,.3); }
.chip-lime   { background: rgba(190,216,45,.12); color: var(--lime); border-color: rgba(190,216,45,.25); }
.chip-cyan   { background: rgba(71,214,255,.1); color: var(--cyan); border-color: rgba(71,214,255,.2); }

/* ── Status dot ─────────────────────────────── */
.status-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--green); flex-shrink: 0;
}
.status-dot.pulse { animation: dot-pulse 2s infinite; }
.status-dot.pulse-slow { animation: dot-pulse 3s infinite; }
.status-dot.subtle { background: var(--fg-subtle); }

@keyframes dot-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(91,191,42,.5); }
  50%      { opacity: .8; box-shadow: 0 0 0 4px rgba(91,191,42,0); }
}

/* ── Traffic lights ─────────────────────────── */
.traffic-lights { display: flex; gap: 5px; align-items: center; }
.traffic-lights span { display: block; width: 10px; height: 10px; border-radius: 50%; }


/* ═══════════════════════════════════════════
   SECTION 1 — HERO (animated bg)
═══════════════════════════════════════════ */
.section-hero { background: var(--bg); overflow: hidden; position: relative; }

/* Animated dashboard background */
.hero-bg {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 1;
}
.hero-bg-grid {
  position: absolute; inset: -20px;
  background-image:
    linear-gradient(rgba(107,61,150,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,61,150,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: grid-drift 18s linear infinite;
}
@keyframes grid-drift {
  0%   { transform: translate(0,0); }
  100% { transform: translate(48px, 48px); }
}
.hero-bg-glow {
  position: absolute; top: -80px; right: -80px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(107,61,150,.22) 0%, transparent 70%);
  animation: glow-breathe 6s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%,100% { opacity: .7; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.08); }
}

/* Hero full-width copy */
.hero-copy--full { max-width: 680px; }

.status-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.status-left  { display: flex; align-items: center; gap: 8px; }
.status-right { display: flex; align-items: center; gap: 8px; }
.status-text  { color: var(--fg); font-weight: 600; }
.status-sep   { color: var(--border-mid); }
.status-sub   { color: var(--fg-subtle); }

.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--fg-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 14px; border-radius: 100px;
  margin-bottom: 40px;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-copy { max-width: 560px; }

/* Hero animated dashboard art (right column) */
.hero-split--art > * { min-width: 0; }
.hero-art { min-width: 0; }
.hero-art .fmds-hero { margin: -6% -8% -8% -4%; width: 112%; max-width: none; }

.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800; line-height: 1.1;
  color: var(--fg); margin: 0 0 1.25rem;
  text-wrap: balance;
}
.hero-sub {
  font-size: .9375rem; line-height: 1.7;
  color: var(--fg-muted); margin: 0 0 2rem;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 2.5rem; }

.trust-bar {
  display: flex; gap: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.trust-item {
  flex: 1; padding: 12px 16px;
  border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-title { display: block; font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--fg); margin-bottom: 2px; }
.trust-sub   { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-subtle); letter-spacing: .03em; }

/* Hero product card */
.hero-card-wrap { display: flex; align-items: center; justify-content: center; }

.project-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; width: 100%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(107,61,150,.12);
}
.project-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.project-card-body { padding: 20px; }
.card-top-bar      { margin-bottom: 16px; }
.card-status-row   { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.card-title        { font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; color: var(--fg); margin: 0 0 .5rem; }
.card-desc         { font-size: .8125rem; line-height: 1.6; color: var(--fg-muted); margin: 0 0 1rem; }
.card-footer-row   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-footer-left  { display: flex; align-items: center; gap: 6px; }
.card-cta-link     { text-decoration: none; font-size: 11px; }
.project-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--border);
}
.card-meta-loc { display: flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════
   SECTION 2 — WORK CAROUSEL
═══════════════════════════════════════════ */
.section-work { background: var(--surface); border-top: 1px solid var(--border); }

.carousel-arrows { display: flex; gap: 8px; }
.carousel-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--fg-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.carousel-arrow:hover { background: var(--surface-3); color: var(--fg); }

.carousel-wrap {
  overflow: hidden; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.carousel-track {
  display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  padding: 0;
}

/* Split tile */
.work-tile {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  min-height: 400px;
}
.work-tile-copy {
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 0;
  border-right: 1px solid var(--border);
}
.work-tile-meta   { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.work-tile-status { display: flex; align-items: center; gap: 6px; }
.work-tile-title  { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--fg); margin: 0 0 .75rem; }
.work-tile-desc   { font-size: .875rem; line-height: 1.7; color: var(--fg-muted); margin: 0 0 1.25rem; flex: 1; }
.work-tile-tags   { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
.work-tile-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1rem; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px;
}

/* Preview side */
.work-tile-preview {
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}

/* Real screenshot image (when uploaded) */
.work-tile-preview img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* Browser frame (fallback illustration) */
.browser-frame {
  width: 100%; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.browser-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.browser-url {
  flex: 1; background: var(--surface-2); border-radius: 4px;
  padding: 3px 8px; display: flex; align-items: center;
}
.browser-viewport { height: 280px; overflow: hidden; }

/* Site preview illustrations */
.site-preview-inner { padding: 12px; }
.sp-nav  { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.sp-logo { width: 20px; height: 8px; border-radius: 2px; }
.sp-logo-purple { background: var(--purple); }
.sp-logo-lime   { background: var(--lime); opacity: .8; }
.sp-logo-cyan   { background: var(--cyan); opacity: .7; }
.sp-nav-links   { display: flex; gap: 4px; margin-left: auto; }
.sp-link { width: 22px; height: 5px; border-radius: 2px; background: var(--border-mid); }
.sp-hero { margin-bottom: 12px; }
.sp-eyebrow { height: 5px; width: 60px; border-radius: 2px; margin-bottom: 6px; opacity: .7; }
.sp-eyebrow-purple { background: var(--purple-light); }
.sp-eyebrow-lime   { background: var(--lime); }
.sp-eyebrow-cyan   { background: var(--cyan); }
.sp-h1     { height: 8px; border-radius: 2px; background: var(--fg); margin-bottom: 4px; }
.sp-h1-lg  { width: 100%; }
.sp-h1-md  { width: 80%; }
.sp-body   { height: 5px; border-radius: 2px; background: var(--border-mid); margin-bottom: 3px; }
.sp-ctas   { display: flex; gap: 6px; margin-top: 8px; }
.sp-btn    { height: 16px; width: 60px; border-radius: 3px; }
.sp-btn-purple { background: var(--purple); }
.sp-btn-cyan   { background: var(--cyan); opacity: .7; }
.sp-btn-ghost  { background: transparent; border: 1px solid var(--border-mid); }
.sp-search-bar { height: 18px; background: var(--surface-3); border-radius: 4px; margin: 8px 0; border: 1px solid var(--border); }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-card { height: 50px; border-radius: 4px; }
.sp-card-a { background: rgba(107,61,150,.35); }
.sp-card-b { background: rgba(107,61,150,.2); }
.sp-card-c { background: rgba(107,61,150,.12); }
.sp-card-d { background: rgba(190,216,45,.25); }
.sp-card-e { background: rgba(190,216,45,.15); }
.sp-card-f { background: rgba(190,216,45,.08); }
.sp-card-g { background: rgba(71,214,255,.2); }
.sp-card-h { background: rgba(71,214,255,.1); }

/* FMC / FMN viewport themes */
.fmc-preview { background: #100c1e; }
.fmn-preview { background: #0a160a; }

.carousel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; gap: 16px;
}
.carousel-dots { display: flex; gap: 6px; }
.carousel-dot {
  width: 24px; height: 4px; border-radius: 2px;
  background: var(--border-mid); border: none; cursor: pointer;
  transition: background .2s, width .2s;
  padding: 0;
}
.carousel-dot.active { background: var(--purple); width: 36px; }

/* Carousel progress bar (Change 5) */
.carousel-progress {
  height: 2px; background: var(--border);
  border-radius: 1px; overflow: hidden;
  margin-bottom: 16px;
}
.carousel-progress-bar {
  height: 100%; width: 0%;
  background: var(--purple);
  border-radius: 1px;
}

/* ═══════════════════════════════════════════
   SECTION 3 — SERVICES
═══════════════════════════════════════════ */
.section-services { background: var(--bg); border-top: 1px solid var(--border); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.service-cell {
  padding: 28px 24px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  transition: background .2s;
}
.service-cell:last-child { border-right: none; }
.service-cell:hover { background: var(--surface); }

.service-num  { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-subtle); letter-spacing: .08em; text-transform: uppercase; }
.service-icon {
  width: 36px; height: 36px; border-radius: 7px;
  background: rgba(107,61,150,.15); border: 1px solid rgba(107,61,150,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple-light);
}
.service-icon-cyan   { background: rgba(71,214,255,.1); border-color: rgba(71,214,255,.2); color: var(--cyan); }
.service-icon-lime   { background: rgba(190,216,45,.1); border-color: rgba(190,216,45,.2); color: var(--lime); }
.service-icon-purple { background: rgba(107,61,150,.15); border-color: rgba(107,61,150,.25); color: var(--purple-light); }

.service-name { font-family: var(--font-head); font-size: .9375rem; font-weight: 700; color: var(--fg); }
.service-desc { font-size: .8125rem; line-height: 1.6; color: var(--fg-muted); flex: 1; }
.service-link { font-family: var(--font-mono); font-size: 10.5px; }

/* ═══════════════════════════════════════════
   SECTION 4 — SCHOOLS & ECD
═══════════════════════════════════════════ */
.section-schools { background: var(--surface); border-top: 1px solid var(--border); }

.schools-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.schools-lead  { font-size: .9375rem; line-height: 1.7; color: var(--fg-muted); margin: 0 0 1.75rem; }

.schools-feat {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 1.5rem;
}
.feat-cell {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px;
}
.feat-cell-title { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--fg); margin-bottom: 3px; }
.feat-cell-desc  { font-size: .8125rem; color: var(--fg-muted); line-height: 1.5; }

.fmn-proof {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(190,216,45,.06); border: 1px solid rgba(190,216,45,.2);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 1.5rem;
}
.fmn-proof-title { font-size: .875rem; font-weight: 600; color: var(--fg); margin-bottom: 2px; }

/* Schools proof-row: two slim bars, edge-aligned with the feature grid above */
.schools-proof-row {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  margin-bottom: 0;
}
.schools-proof-row .fmn-proof {
  align-items: center; min-width: 0; margin-bottom: 0;
  padding: 11px 16px;
}
.schools-proof-row .fmn-proof-title { font-size: .875rem; line-height: 1.35; margin-bottom: 1px; }
.schools-proof-row .fmn-proof .f-mono { font-size: 10.5px; line-height: 1.4; }
.schools-cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; padding-top: 0; padding-bottom: 0;
  border-radius: 8px; box-sizing: border-box;
}
@media (min-width: 600px) and (max-width: 860px) {
  .schools-proof-row { grid-template-columns: 1fr auto; align-items: stretch; }
  .schools-cta { width: auto; }
}

/* School portal card */
.school-portal-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.portal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: rgba(190,216,45,.08);
  border-bottom: 1px solid rgba(190,216,45,.15);
}
.portal-header-left { display: flex; align-items: center; gap: 8px; }
.portal-items { padding: 8px 0; }
.portal-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.portal-item:last-child { border-bottom: none; }
.portal-footer { padding: 12px 18px; border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════════
   SECTION 5 — PROCESS (fan-deck, Change 8)
═══════════════════════════════════════════ */
.section-process { background: var(--bg); border-top: 1px solid var(--border); }

/* Deck layout */
.process-deck {
  display: flex; gap: 0; align-items: flex-start;
  perspective: 1200px;
}

/* Individual deck cards */
.deck-card {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  /* stagger-in state */
  opacity: 0; transform: translateY(32px) rotateY(-8deg);
  transition: opacity .45s ease, transform .45s ease,
              box-shadow .2s, border-color .2s;
}
.deck-card + .deck-card { margin-left: -8px; }
.deck-card.deck-visible {
  opacity: 1; transform: translateY(0) rotateY(0deg);
}
/* Fan open on hover */
.deck-card:hover:not(.deck-open) {
  transform: translateY(-6px) rotateY(0);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  z-index: 2; position: relative;
}
/* Expanded state — swoosh to the side */
.deck-card.deck-open {
  flex: 2.2;
  border-color: var(--purple);
  box-shadow: 0 20px 60px rgba(107,61,150,.25);
  z-index: 3; position: relative;
}

.deck-card-front {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 24px;
}
.deck-card-body {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1),
              padding .35s ease, opacity .3s ease;
  opacity: 0; padding: 0 24px;
}
.deck-card.deck-open .deck-card-body {
  max-height: 200px; opacity: 1;
  padding: 0 24px 24px;
}

.deck-hint {
  font-size: 9px; color: var(--fg-subtle);
  letter-spacing: .06em; text-transform: uppercase;
  margin-top: 4px;
  transition: opacity .2s;
}
.deck-card.deck-open .deck-hint { opacity: 0; }

.process-num         { font-family: var(--font-mono); font-size: 9.5px; color: var(--purple-light); letter-spacing: .08em; text-transform: uppercase; }
.process-title       { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--fg); }
.process-desc        { font-size: .8125rem; line-height: 1.6; color: var(--fg-muted); flex: 1; margin: 0 0 .75rem; }
.process-deliverable { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); }

/* ═══════════════════════════════════════════
   SECTION 6 — FOR FOUNDERS
═══════════════════════════════════════════ */
.section-founders { background: var(--surface); border-top: 1px solid var(--border); }

.founders-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.5rem; }

.founder-proofs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.75rem; }
.founder-proof  { display: flex; align-items: flex-start; gap: 10px; }
.proof-dot      { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.proof-title    { font-size: .875rem; font-weight: 600; color: var(--fg); margin-bottom: 2px; }

/* Terminal */
.terminal {
  background: #0d0f14; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; font-family: var(--font-mono);
}
.terminal-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.terminal-code {
  padding: 20px 22px; font-size: 12.5px; line-height: 1.9;
  color: var(--fg-muted);
}
.tc-comment { color: var(--fg-subtle); }
.tc-keyword { color: #93c5fd; }
.tc-fn      { color: #a5f3fc; }
.tc-str     { color: #86efac; }
.tc-ok      { color: var(--lime); }

/* ═══════════════════════════════════════════
   SECTION 7 — INTAKE / CONTACT
═══════════════════════════════════════════ */
.section-intake { background: var(--bg); border-top: 1px solid var(--border); }

.intake-inner {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start;
}
.intake-info     { display: flex; flex-direction: column; gap: 10px; margin-top: 1.5rem; }
.intake-info-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; }

/* Form */
.intake-form    { display: flex; flex-direction: column; gap: 16px; }
.form-row       { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group     { display: flex; flex-direction: column; gap: 6px; }
.form-label     { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.form-req       { color: var(--purple-light); }
.form-input {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--fg); font-size: .875rem;
  padding: 10px 14px; font-family: var(--font-body);
  transition: border-color .15s;
  width: 100%; box-sizing: border-box;
}
.form-input:focus { outline: none; border-color: var(--purple); }
.form-input::placeholder { color: var(--fg-subtle); }
textarea.form-input { resize: vertical; min-height: 100px; }

.service-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.service-radio-label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.service-radio { display: none; }
.service-radio-name {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--fg-muted); transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.service-radio:checked + .service-radio-name {
  background: rgba(107,61,150,.18); border-color: var(--purple);
  color: var(--purple-light);
}

.form-actions  { display: flex; align-items: center; gap: 16px; }
.btn-submit    { padding: 12px 24px; }
.form-note     { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-subtle); }

.form-feedback {
  padding: 12px 16px; border-radius: 6px; font-size: .875rem;
}
.form-feedback--ok  { background: rgba(91,191,42,.1); color: var(--green); border: 1px solid rgba(91,191,42,.25); }
.form-feedback--err { background: rgba(239,68,68,.1); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
  .service-cell:nth-child(2)  { border-right: none; }
  .service-cell:nth-child(3)  { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
  .service-cell:nth-child(4)  { border-top: 1px solid var(--border); border-right: none; }

  .process-grid   { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: none; }
  .process-step:nth-child(3) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
  .process-step:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }

}

@media (max-width: 860px) {
  .hero-split    { grid-template-columns: 1fr; }
  .hero-card-wrap { display: none; }
  .hero-art .fmds-hero { width: 100%; max-width: 560px; margin: 0 auto; }
  .two-col       { grid-template-columns: 1fr; gap: 40px; }
  .intake-inner  { grid-template-columns: 1fr; gap: 40px; }
  .form-row      { grid-template-columns: 1fr; }
  .work-tile     { grid-template-columns: 1fr; }
  .work-tile-copy { border-right: none; border-bottom: 1px solid var(--border); }
  .work-tile-preview { min-height: 220px; }

  .nav-links     { display: none; }
  .hamburger     { display: flex; }
}

@media (max-width: 640px) {
  .wrap          { padding: 0 16px; }
  .section-pad   { padding-top: 60px; padding-bottom: 60px; }
  .section-pad-sm{ padding-top: 48px; padding-bottom: 48px; }
  .hero-h1       { font-size: 1.875rem; }
  .hero-actions  { flex-direction: column; }
  .trust-bar     { flex-direction: column; }
  .trust-item    { border-right: none; border-bottom: 1px solid var(--border); }
  .trust-item:last-child { border-bottom: none; }
  .services-grid { grid-template-columns: 1fr; }
  .service-cell  { border-right: none; border-bottom: 1px solid var(--border); }
  .service-cell:last-child { border-bottom: none; }
  .process-grid  { grid-template-columns: 1fr; }
  .process-step  { border-right: none; border-bottom: 1px solid var(--border); }
  .process-step:last-child { border-bottom: none; }
  .schools-feat  { grid-template-columns: 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .status-bar    { flex-direction: column; align-items: flex-start; }
}

/* ── Real screenshots (carousel + schools) ───────────────── */
.browser-viewport--shot { height: auto; overflow: hidden; background: var(--surface-2); }
.work-tile-preview .browser-viewport--shot img {
  display: block; width: 100%; height: auto;
  object-fit: contain; border-radius: 0; box-shadow: none;
}
.schools-cols { align-items: center; }
.schools-shot {
  margin: 0; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.schools-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
  .schools-shot { border-radius: 8px; }
}

/* 861px+: screenshot gets the larger share of the row, shown whole (no crop) */
@media (min-width: 861px) {
  .schools-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; }
}

/* Home hero: full-width photo with text overlay */
.section-hero--animated {
  min-height: 720px; display: flex; align-items: center;
  background:
    linear-gradient(90deg, #08080f 0%, #08080f 34%, rgba(8,8,15,.82) 44%, rgba(8,8,15,.3) 62%, transparent 80%),
    #08080f url('https://fmdigitalsolutions.co.za/wp-content/uploads/2026/10/home-hero-v1.webp') right center / cover no-repeat;
}
.section-hero--animated > .wrap { width: 100%; }
.section-hero--animated .hero-split { grid-template-columns: 1fr; }
.section-hero--animated .hero-copy { max-width: 600px; }
@media (max-width: 860px) {
  .section-hero--animated {
    background:
      linear-gradient(180deg, rgba(8,8,15,.88) 0%, rgba(8,8,15,.8) 100%),
      #08080f url('https://fmdigitalsolutions.co.za/wp-content/uploads/2026/10/home-hero-v1.webp') 70% center / cover no-repeat;
  }
}

/* ── Schools section: heading, feature tabs and framed dashboard ── */
.sx-head{max-width:760px;margin-bottom:2rem}
.sx-head .section-title{margin:0 0 1rem;font-size:clamp(1.6rem,2.7vw,2.3rem);line-height:1.15}
.sx-head .schools-lead{margin:0}
.sx-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:48px;align-items:start}
.sx-side{display:flex;flex-direction:column;gap:14px}
.sx-tabs{display:flex;flex-direction:column;gap:10px}
.sx-tab{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px;transition:border-color .2s,background .2s,transform .2s}
.sx-tab:hover{border-color:rgba(190,216,45,.45);transform:translateX(3px)}
.sx-tab:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sx-tab.is-on{border-color:var(--lime);background:rgba(190,216,45,.07);box-shadow:inset 3px 0 0 var(--lime)}
.sx-tab-t{display:block;font-family:var(--font-head);font-size:.9375rem;font-weight:700;color:var(--fg);margin-bottom:3px}
.sx-tab-d{display:block;font-size:.8125rem;color:var(--fg-muted);line-height:1.5}
.sx-side .schools-cta{margin-top:4px}
.sx-stage{position:sticky;top:96px}
.sx-frame{position:relative;border-radius:18px;overflow:hidden;background:#0d0f14;border:1px solid rgba(190,216,45,.16);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 70px -10px rgba(190,216,45,.14)}
.sx-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#161922;border-bottom:1px solid rgba(255,255,255,.06)}
.sx-bar i{width:10px;height:10px;border-radius:50%;background:#2c303b}
.sx-url{margin-left:10px;flex:1;max-width:320px;padding:4px 12px;border-radius:999px;background:#0d0f14;color:var(--fg-subtle);font-family:var(--font-mono);font-size:11px}
.sx-view{position:relative;width:100%;aspect-ratio:1024/557;background:#fff;overflow:hidden}
.sx-view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to bottom,rgba(13,15,20,0),rgba(13,15,20,.55));pointer-events:none;z-index:3}
.sx-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.sx-pane.is-on{opacity:1;visibility:visible;z-index:2}
.sx-pane img{display:block;width:100%;height:100%;object-fit:contain;object-position:top left}
.sx-mock{width:900px;height:490px;overflow:hidden;transform-origin:0 0;padding:22px 32px;box-sizing:border-box;background:#f6f8fb;color:#16223f;font-family:Inter,system-ui,sans-serif}
.m-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.m-top b{font-size:24px;letter-spacing:-.02em}
.m-chip{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}
.m-chip.g{background:#e2f5d6;color:#2a6b12}.m-chip.a{background:#fdeccd;color:#8a5a06}
.m-list{display:flex;flex-direction:column;gap:8px}
.m-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e3e8f0;border-radius:12px;padding:9px 16px}
.m-row>div:not(.m-av){flex:1;min-width:0}
.m-row b{display:block;font-size:16px}.m-row small{display:block;font-size:13px;color:#5a6478;margin-top:1px}
.m-time{font-weight:800;font-size:17px;color:#2a6b12;width:60px}
.m-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:12px}
.m-days div{position:relative;text-align:center;background:#fff;border:1px solid #e3e8f0;border-radius:12px;padding:7px 0}
.m-days small{display:block;font-size:13px;color:#5a6478}.m-days b{font-size:20px}
.m-days .on{background:#16223f;border-color:#16223f;color:#fff}.m-days .on small{color:#c9d2e6}
.m-days .dim{opacity:.5}
.m-days i{position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#5BBF2A}
.m-bar{height:10px;background:#e3e8f0;border-radius:999px;overflow:hidden;margin:-4px 0 12px}.m-bar i{display:block;height:100%;background:#5BBF2A;border-radius:999px}
.m-tick{width:26px;height:26px;border-radius:50%;background:#5BBF2A;color:#fff;font-size:15px;font-weight:800;display:grid;place-items:center;flex:none}
.m-tick.o{background:#fff;border:2px dashed #c3ccdb}
.m-av{width:40px;height:40px;border-radius:50%;background:#e2f5d6;color:#2a6b12;font-weight:800;font-size:14px;display:grid;place-items:center;flex:none}
.m-route{font-size:13px;font-weight:700;color:#16223f;background:#eef1f7;padding:6px 12px;border-radius:8px;white-space:nowrap}
.m-set{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.m-set div{background:#fff;border:1px solid #e3e8f0;border-radius:12px;padding:10px 14px}
.m-set b{display:block;font-size:16px}.m-set small{display:block;font-size:13px;color:#5a6478;margin-top:3px;line-height:1.35}
.m-foot{margin-top:10px;font-size:13px;color:#5a6478}
@media(max-width:860px){
  .sx-grid{grid-template-columns:1fr;gap:24px}
  .sx-stage{position:static;order:-1}
  .sx-frame{border-radius:12px}
  .sx-bar{padding:7px 10px}.sx-url{font-size:9px;padding:2px 8px}
}
@media(prefers-reduced-motion:reduce){.sx-pane,.sx-tab{transition:none}}

/* ── Schools section: dashboard / real website slider (inside the same browser frame) ── */
.sx-slider{position:absolute;inset:0}
.sx-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.sx-slide.is-on{opacity:1;visibility:visible;z-index:1}
.sx-slide-site img{object-fit:cover;object-position:top center}
.sx-slide-site:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.sx-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:28px 64px 10px 16px;color:#fff;font-size:.8125rem;line-height:1.4;background:linear-gradient(to bottom,rgba(13,15,20,0),rgba(13,15,20,.88) 55%);pointer-events:none}
.sx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:1px solid var(--border);background:rgba(12,14,18,.7);color:var(--fg);cursor:pointer}
.sx-nav:hover{border-color:var(--lime)}
.sx-nav:focus-visible,.sx-dot:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sx-prev{left:10px}.sx-next{right:10px}
.sx-dots{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;gap:8px}
.sx-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.sx-dot.on{background:var(--lime)}
@media(max-width:860px){.sx-nav{width:30px;height:30px}.sx-cap{font-size:.75rem;padding:22px 56px 8px 12px}}
@media(prefers-reduced-motion:reduce){.sx-slide{transition:none}}