/* Go Implement - shared stylesheet.
   Extracted from index.html so the homepage and the service pages share one
   source of truth instead of each carrying its own copy of the design system.
   Every page links this file. about/, ai-adoption/, privacy/ and booked/
   ALSO carry their own inline <style> block on top of it, holding rules
   specific to those pages plus some duplication of what is here; those
   blocks are pending migration into this file. Shared classes resolve from
   here on every page, so a new shared class does not need adding inline. */

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --ink:       #0d1117;
  --ink-2:     #1a2230;
  --ink-3:     #253145;
  --slate:     #8493a8;
  --mist:      #c8d2df;
  --paper:     #f4f6f9;
  --white:     #ffffff;
  --green:     #00e676;
  --green-dim: #00c85a;
  --green-bg:  rgba(0,230,118,.08);
  /* Validation / failure only. Never used decoratively. */
  --alert:     #ff8f8f;

  --serif:  'DM Serif Display', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;
  --mono:   'DM Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --transition: 200ms cubic-bezier(.4,0,.2,1);
}

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

/* ─── Utility ────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); border: 1px solid rgba(0,230,118,.3);
  padding: 5px 12px; border-radius: 100px;
}

/* ─── NAV ────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13,17,23,.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--transition);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-logo {
  font-family: var(--serif); font-size: 22px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.nav-logo span { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav-links a {
  font-size: 13px; font-weight: 400; color: var(--slate);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--white); }

/* Services dropdown. Opens on hover AND focus-within, so it is reachable by
   keyboard without any JS. AI Adoption stays a top-level item on purpose: it is
   a commercial priority, and nesting it would bury it. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-parent { display: inline-flex; align-items: center; gap: 5px; }
.nav-parent::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transition);
}
.nav-item:hover .nav-parent::after,
.nav-item:focus-within .nav-parent::after { transform: rotate(45deg) translate(1px,1px); }
.nav-menu {
  position: absolute; top: 100%; left: -14px; min-width: 216px; z-index: 10;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 10px; padding: 8px;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Bridges the gap between trigger and panel so the menu does not close as the
   cursor travels down to it. */
.nav-menu::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--mist); white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--green-bg); color: var(--green); }
a.nav-cta {
  font-size: 13px; font-weight: 500;
  background: var(--green); color: var(--ink);
  padding: 9px 20px; border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition);
  margin-left: 32px; white-space: nowrap;
}
.nav-cta:hover { background: var(--green-dim); transform: translateY(-1px); }
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-mobile-toggle span { width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; transition: var(--transition); }

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* Tighter than a copy-only hero: this one also carries the stats and the
     stack, and all of it has to share a single viewport. */
  padding: 104px 0 48px;
  position: relative; overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0; opacity: .04;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-glow {
  position: absolute; top: -200px; right: -200px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,230,118,.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero-eyebrow { margin-bottom: 28px; }
.hero-headline {
  font-family: var(--serif);
  /* Scale is planned against the headline length: at 6 words this must hold two
     lines from 1024px up, so the cap is lower than a 3-word headline would take. */
  font-size: clamp(40px, 5vw, 70px);
  /* 1.1 not 1.05: the italic "spreadsheets" carries a descender that leading-none
     clips, and .hero has overflow:hidden. padding-bottom reserves the tail. */
  line-height: 1.1; letter-spacing: -.02em;
  padding-bottom: 6px;
  max-width: 13.5em;
  animation: fadeUp .8s ease both;
}
.hero-headline em { font-style: italic; color: var(--green); }
.hero-sub {
  margin-top: 28px;
  font-size: clamp(16px, 1.8vw, 19px); font-weight: 400;
  color: var(--mist); line-height: 1.7; max-width: 560px;
  animation: fadeUp .8s .15s ease both;
}
.hero-actions {
  display: flex; align-items: center; gap: 16px; margin-top: 44px; flex-wrap: wrap;
  animation: fadeUp .8s .25s ease both;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--ink);
  font-size: 14px; font-weight: 500;
  padding: 14px 28px; border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover { background: var(--green-dim); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,230,118,.25); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.15); color: var(--mist);
  font-size: 14px; font-weight: 400;
  padding: 14px 28px; border-radius: var(--radius-sm);
  transition: border-color var(--transition), color var(--transition);
}
.btn-secondary:hover { border-color: rgba(255,255,255,.35); color: var(--white); }
.btn-arrow { font-size: 18px; transition: transform var(--transition); }
.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow { transform: translateX(4px); }

/* Hero footer band: the numbers and the stack that substantiate the claim above.
   Sized tightly because it has to share one viewport with the headline and CTAs. */
.hero-meta {
  margin-top: clamp(32px, 5vh, 52px);
  padding-top: clamp(24px, 3.5vh, 34px);
  border-top: 1px solid rgba(255,255,255,.09);
  animation: fadeUp .8s .35s ease both;
}
.hero-stats { display: flex; gap: 24px 56px; flex-wrap: wrap; }
.hero-stat-num {
  font-family: var(--serif); font-size: clamp(28px, 2.4vw, 34px); color: var(--green);
  line-height: 1;
}
.hero-stat-unit { font-size: .52em; }
.hero-stat-label {
  font-size: 13px; color: var(--mist); margin-top: 8px; line-height: 1.5;
  max-width: 210px;
}

/* Capability, not endorsement: these are the tools we build on. Label sits
   inline with the marks rather than above them, to save hero height. */
.stack-strip {
  margin-top: clamp(22px, 3vh, 30px);
  padding-top: clamp(18px, 2.5vh, 24px);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
}
.stack-strip-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); flex-shrink: 0;
}
.stack-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 32px; }
/* These are square glyph marks, not wordmarks, so they need size and near-full
   opacity to read at all against the dark background. */
.stack-logos img {
  height: 26px; width: 26px; opacity: .8;
  transition: opacity var(--transition);
}
.stack-logos img:hover { opacity: 1; }
/* Qualifies the set as a sample rather than a complete list. */
.stack-more {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  color: var(--slate); white-space: nowrap;
}

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

/* ─── PROBLEM / SOLUTION ─────────────────────────────────────── */
.section { padding: 100px 0; }
.section-tag { margin-bottom: 20px; }
.section-title {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1; letter-spacing: -.015em; max-width: 640px;
}
.section-title em { font-style: italic; color: var(--green); }
.section-body {
  font-size: 17px; font-weight: 400; color: var(--mist); line-height: 1.75;
  max-width: 540px; margin-top: 20px;
}

/* ─── INLINE MID-PAGE CTA ────────────────────────────────────── */
/* Deliberately NOT given .reveal, a conversion CTA must never depend on JS to be visible. */
.inline-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
  margin-top: 56px; padding: 22px 28px;
  background: var(--green-bg);
  border: 1px solid rgba(0,230,118,.18);
  border-radius: var(--radius-md);
}
.inline-cta-text { font-size: 14px; color: var(--slate); line-height: 1.6; }
.inline-cta-text strong { display: block; font-size: 16px; color: var(--white); font-weight: 500; }
.inline-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--ink);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  padding: 13px 24px; border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.inline-cta-btn:hover { background: var(--green-dim); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,230,118,.2); }
.inline-cta-btn:hover .btn-arrow { transform: translateX(4px); }

.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 64px; }
.problem-list { display: flex; flex-direction: column; gap: 0; }
.problem-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  opacity: 0; transform: translateX(-16px);
  transition: opacity .5s ease, transform .5s ease;
}
.problem-item.visible { opacity: 1; transform: none; }
.problem-item:first-child { border-top: 1px solid rgba(255,255,255,.06); }
.problem-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--green);
}
.problem-icon svg { width: 18px; height: 18px; }
.problem-text strong { display: block; font-size: 15px; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.problem-text p { font-size: 13px; color: var(--mist); line-height: 1.6; }
/* Each problem points at the service that fixes it, so the page reads as an
   argument rather than two lists the reader has to map onto each other. */
.problem-fix {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 13px; font-weight: 500; color: var(--green);
}
.problem-fix .btn-arrow { font-size: 15px; }
.problem-fix:hover .btn-arrow { transform: translateX(4px); }
.problem-item:hover .problem-icon { background: var(--green-bg); color: var(--green); }

.solution-card {
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: 40px;
  position: relative; overflow: hidden;
}
.solution-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.solution-accent {
  font-family: var(--serif); font-size: 72px; color: var(--green-bg);
  line-height: 1; margin-bottom: 20px; user-select: none;
  font-style: italic;
}
.solution-card p { font-size: 16px; line-height: 1.75; color: var(--mist); }
.solution-card p + p { margin-top: 16px; }
.solution-card strong { color: var(--white); font-weight: 500; }
/* Introduces the engagement that the following sections keep returning to. */
.spine-intro {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(0,230,118,.25);
  font-size: 14px !important; color: var(--slate) !important; line-height: 1.7;
}

/* ─── SERVICES ───────────────────────────────────────────────── */
.services-section { background: var(--ink-2); }
/* Asymmetric trio: the lead service occupies a full-height column, the two
   adjacent offerings stack beside it. Three equal cards read as templated and
   imply the three are interchangeable, which they are not. */
.services-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px; margin-top: 60px;
}
#services .services-grid > .service-card:first-child {
  grid-row: 1 / 3;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 40px;
}
#services .services-grid > .service-card:first-child .service-title { font-size: 26px; margin-bottom: 16px; }
#services .services-grid > .service-card:first-child .service-body { font-size: 16px; }
#services .services-grid > .service-card:first-child .service-icon { width: 52px; height: 52px; }
#services .services-grid > .service-card:first-child .service-icon svg { width: 26px; height: 26px; }
/* gives the lead cell real visual weight instead of a third text box */
.service-shot {
  width: 100%; height: auto; display: block; margin-top: 28px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm);
}
.service-card {
  background: var(--ink); padding: 40px 32px;
  position: relative; overflow: hidden; cursor: default;
  transition: background var(--transition);
}
.service-card:hover { background: rgba(0,230,118,.04); }
.service-card:hover .service-num { opacity: .15; }
.service-num {
  font-family: var(--mono); font-size: 64px; font-weight: 500;
  color: var(--white); opacity: .04;
  position: absolute; top: 20px; right: 24px;
  transition: opacity var(--transition);
  line-height: 1; user-select: none;
}
.service-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--green-bg); border: 1px solid rgba(0,230,118,.2);
  display: flex; align-items: center; justify-content: center; color: var(--green);
  margin-bottom: 24px;
}
.service-icon svg { width: 22px; height: 22px; }
.service-title { font-size: 19px; font-weight: 500; margin-bottom: 12px; }
.service-body { font-size: 14px; color: var(--mist); line-height: 1.7; }
.service-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.service-pill {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  color: var(--slate); border: 1px solid rgba(255,255,255,.1);
  padding: 4px 10px; border-radius: 100px;
  transition: color var(--transition), border-color var(--transition);
}
.service-card:hover .service-pill { color: var(--green); border-color: rgba(0,230,118,.25); }
.service-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; font-size: 13px; font-weight: 500;
  color: var(--green);
}
.service-link .btn-arrow { font-size: 15px; }
.service-link:hover .btn-arrow { transform: translateX(4px); }

/* ─── AI ADOPTION PROGRAM ────────────────────────────────────────
   Deliberately not a card. Problem and Why SA both use the dark rounded
   panel, and a third would read as a template. This is a separate product,
   so it gets rules and space instead of a box: on a page made of containers,
   the section without one is the section that stands out. */
.program {
  margin-top: 40px; padding-top: 36px;
  border-top: 1px solid rgba(0,230,118,.28);
}
.program-lede {
  font-size: 17px; color: var(--mist); line-height: 1.75; max-width: 620px;
}
/* Asymmetric on purpose: equal thirds would rebuild the card grid in rules. */
.program-grid {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr;
  gap: 44px; margin-top: 56px;
}
.program-item { padding-left: 32px; border-left: 1px solid rgba(255,255,255,.1); }
.program-item:first-child { padding-left: 0; border-left: none; }
.program-item h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  line-height: 1.25; margin-bottom: 12px;
}
.program-item p { font-size: 14px; color: var(--mist); line-height: 1.7; }
.program-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.program-foot p { font-size: 13px; color: var(--slate); line-height: 1.6; }

/* ─── PROCESS ────────────────────────────────────────────────── */
/* Numbered circles on a connector line are the stock process-timeline graphic,
   and centred body copy is harder to read than left-aligned. Four columns each
   opened by a rule carries the same sequence with none of the decoration: the
   headline already says there are four steps, and there are visibly four. */
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; margin-top: 64px;
}
.process-step { padding-top: 22px; border-top: 1px solid rgba(0,230,118,.28); }
.process-step-title {
  font-family: var(--serif); font-size: 21px; font-weight: 400;
  line-height: 1.25; margin-bottom: 10px;
}
.process-step-body { font-size: 13.5px; color: var(--mist); line-height: 1.7; }
/* Homepage keeps the summary only; the detail lives on /how-we-work/. */
.process-more { margin-top: 32px; }

/* ─── WHY SA ─────────────────────────────────────────────────── */
.whysa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
/* No leading dots: a coloured dot before every row is decoration standing in for
   structure. The bold lead-in and the spacing already do that job. */
.whysa-points { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.whysa-point-text strong { font-size: 15px; font-weight: 500; display: block; margin-bottom: 5px; }
.whysa-point-text p { font-size: 13px; color: var(--mist); line-height: 1.65; max-width: 46ch; }

.whysa-callout {
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: 40px;
}
.whysa-callout-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); margin-bottom: 16px;
}
.whysa-callout blockquote {
  font-family: var(--serif); font-size: 24px; font-style: italic;
  line-height: 1.4; color: var(--white);
}
.whysa-callout-meta { margin-top: 24px; font-size: 13px; color: var(--slate); }
.whysa-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.whysa-stat-desc sup { font-size: 9px; color: var(--green); margin-left: 1px; }
.whysa-sources {
  margin-top: 20px; font-size: 12px; line-height: 1.7; color: var(--slate);
  border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px;
}
.whysa-sources sup { color: var(--green); margin-right: 2px; }
.whysa-sources a { color: var(--slate); border-bottom: 1px solid rgba(132,147,168,.35); }
.whysa-sources a:hover { color: var(--green); border-bottom-color: rgba(0,230,118,.5); }
.whysa-stat {
  background: var(--ink); border-radius: var(--radius-md);
  padding: 20px; border: 1px solid rgba(255,255,255,.06);
}
.whysa-stat-val { font-family: var(--serif); font-size: 32px; color: var(--green); }
.whysa-stat-desc { font-size: 12px; color: var(--slate); margin-top: 4px; line-height: 1.5; }

/* ─── TECHNICAL WINS ─────────────────────────────────────────── */
.wins-section { background: var(--ink-2); }
/* Three equal cards implied the three figures were peers. They were not: the
   "3 weeks" was a property of the billing automation, not a result beside it.
   So that case leads at full weight with the timeline folded into its story,
   and the remaining engagement sits alongside as a supporting figure. */
.wins-layout {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 0 56px; margin-top: 56px; align-items: start;
}
.win-lead {
  background: var(--ink); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md); padding: 40px;
}
.win-support { padding-left: 56px; border-left: 1px solid rgba(255,255,255,.1); }
.win-metric { font-family: var(--serif); font-size: 62px; color: var(--green); line-height: 1; }
.win-metric-sm { font-size: 40px; }
.win-metric-unit { font-size: .42em; }
.win-lead-body {
  font-size: 16px; color: var(--mist); margin-top: 18px; line-height: 1.75;
  max-width: 52ch;
}
.win-desc { font-size: 14px; color: var(--slate); margin-top: 14px; line-height: 1.7; }
.wins-note {
  margin-top: 28px; font-size: 12px; color: var(--slate); line-height: 1.7;
  max-width: 720px; border-left: 2px solid rgba(0,230,118,.25); padding-left: 14px;
}
.win-industry {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mist); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 5px 12px; border-radius: 100px;
}
.wins-placeholder {
  border: 1px dashed rgba(0,230,118,.2); border-radius: var(--radius-md);
  padding: 28px; display: flex; align-items: center; gap: 16px;
  grid-column: 1 / -1;
}
.wins-placeholder p { font-size: 13px; color: var(--slate); }
.wins-placeholder strong { color: var(--green); font-weight: 500; }

/* ─── CONTACT ────────────────────────────────────────────────── */
.contact-section {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.07);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-form-card {
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg); padding: 44px;
  position: relative; overflow: hidden;
}
.contact-form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--slate); margin-bottom: 8px; text-transform: uppercase;
}
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--ink); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-family: var(--sans); font-size: 14px; color: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--slate); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: rgba(0,230,118,.5);
  box-shadow: 0 0 0 3px rgba(0,230,118,.08);
}
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238493a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.form-select option { background: var(--ink-2); }
.form-textarea { min-height: 100px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* POPIA consent */
.popia-box {
  background: rgba(0,230,118,.04); border: 1px solid rgba(0,230,118,.15);
  border-radius: var(--radius-md); padding: 20px; margin: 24px 0;
}
.popia-title {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.popia-title svg { width: 13px; height: 13px; flex-shrink: 0; }
.consent-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(0,230,118,.08);
}
.consent-item:last-child { border-bottom: none; padding-bottom: 0; }
.consent-item label { font-size: 13px; color: var(--mist); line-height: 1.5; cursor: pointer; }
.consent-item label strong { color: var(--white); font-weight: 500; display: block; margin-bottom: 2px; }
input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--green); cursor: pointer;
}
.popia-note { font-size: 12px; color: var(--slate); margin-top: 12px; line-height: 1.6; }
.popia-note a { color: var(--green); border-bottom: 1px solid rgba(0,230,118,.3); }

.form-submit {
  width: 100%; background: var(--green); color: var(--ink);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 16px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.form-submit:hover { background: var(--green-dim); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,230,118,.2); }
.form-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.form-success {
  display: none; text-align: center; padding: 32px;
  font-size: 16px; color: var(--green); line-height: 1.7;
}
.form-success .success-icon { margin-bottom: 12px; color: var(--green); }
.form-success .success-icon svg { width: 40px; height: 40px; }

/* Semantic failure state. The only place --alert appears; it is not a second
   brand accent. Shown when the webhook does not accept the lead, so the enquiry
   is never reported as sent when it was not. */
.form-error {
  display: none; margin-top: 16px; padding: 16px 18px;
  background: rgba(255,107,107,.07);
  border: 1px solid rgba(255,107,107,.28);
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--mist); line-height: 1.6;
}
.form-error strong { display: block; color: var(--alert); font-weight: 500; margin-bottom: 4px; }
.form-error a { color: var(--alert); border-bottom: 1px solid rgba(255,107,107,.4); }

/* Contact side */
.contact-intro { margin-top: 0; }

/* Booking panel. The low-friction path, presented above the form */
.book-panel {
  margin-top: 32px; padding: 24px 26px;
  background: var(--green-bg);
  border: 1px solid rgba(0,230,118,.22);
  border-radius: var(--radius-md);
}
.book-panel-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
.book-panel-text { font-size: 15px; color: var(--white); font-weight: 500; line-height: 1.5; }
/* .book-panel-btn removed: the filled green button inside this panel was the
   calendar CTA, which is now a plain text link (.book-last). The panel's
   button is .wa-btn, which is outlined so it reads as an alternative route
   rather than a second primary action. */
.book-panel-alt { font-size: 12px; color: var(--slate); margin-top: 14px; line-height: 1.6; }

.contact-channels { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.contact-channel {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md); background: var(--ink-2);
  transition: border-color var(--transition);
}
.contact-channel:hover { border-color: rgba(0,230,118,.25); }
.channel-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--green-bg); display: flex; align-items: center; justify-content: center; color: var(--green);
  flex-shrink: 0;
}
.channel-icon svg { width: 19px; height: 19px; }
.channel-label { font-size: 12px; color: var(--slate); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.channel-value { font-size: 14px; color: var(--white); }
a.channel-link { display: inline-block; transition: color var(--transition); }
a.channel-link:hover { color: var(--green); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
  background: var(--ink-2); border-top: 1px solid rgba(255,255,255,.06);
  padding: 48px 0 32px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.footer-brand { font-family: var(--serif); font-size: 20px; margin-bottom: 12px; }
.footer-brand span { color: var(--green); }
.footer-tagline { font-size: 13px; color: var(--slate); line-height: 1.6; max-width: 280px; }
.footer-heading { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: var(--slate); transition: color var(--transition); }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-legal { font-size: 12px; color: var(--slate); }
.footer-popia {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); border: 1px solid rgba(0,230,118,.2); padding: 4px 10px; border-radius: 100px;
}

/* ─── Scroll reveal ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .problem-grid, .whysa-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  #services .services-grid > .service-card:first-child { grid-row: auto; padding: 40px 32px; }
  #services .services-grid > .service-card:first-child .service-title { font-size: 19px; }
  #services .services-grid > .service-card:first-child .service-body { font-size: 14px; }
  .service-shot { margin-top: 22px; }
  /* Stacked, the supporting figure takes a rule above it instead of beside it. */
  .wins-layout { grid-template-columns: 1fr; gap: 40px; }
  .win-lead { padding: 32px 28px; }
  .win-support {
    padding-left: 0; border-left: none;
    padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1);
  }
  .win-metric { font-size: 52px; }
  .win-metric-sm { font-size: 38px; }
  /* Keep all three stats on one row here; at the desktop gap they wrap 2+1 and
     leave a ragged hole beside the third. */
  .hero-stats { gap: 24px 34px; }
  .hero-stat-label { max-width: 185px; }
  /* Vertical rules become horizontal ones so the divided rhythm survives the stack. */
  .program-grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .program-item {
    padding-left: 0; border-left: none;
    padding-top: 24px; padding-bottom: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .program-item:first-child { padding-top: 0; border-top: none; }
  .program-item:last-child { padding-bottom: 0; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1/-1; }
}

/* Raised from 860px: the wider 'Book a free fit check' CTA leaves the logo
   and the first nav item almost touching between 860 and 908px. */
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; position: fixed; top: 64px; left: 0; right: 0; background: var(--ink-2); padding: 24px; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-links.open .nav-item { display: block; width: 100%; }
  .nav-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    margin-top: 12px; padding: 0 0 0 14px; min-width: 0;
    background: none; border: none; border-left: 1px solid rgba(255,255,255,.12);
    box-shadow: none; gap: 10px;
  }
  .nav-menu a { padding: 0; }
  .nav-parent::after { display: none; }
  .nav-mobile-toggle { display: flex; }
  /* Keep the primary CTA visible on mobile instead of hiding it in the menu */
  a.nav-cta { margin-left: auto; margin-right: 16px; font-size: 13px; padding: 12px 16px; }
}

@media (max-width: 600px) {
  /* Keep the gap between lead and supporting figure legible once stacked. */
  .win-metric { font-size: 46px; }
  .win-metric-sm { font-size: 34px; }
  .form-row { grid-template-columns: 1fr; }
  /* Two stats per row rather than one, so the band does not push the CTAs
     off a phone screen. */
  .hero-stats { gap: 22px 32px; }
  .hero-stats > div { flex: 1 1 40%; min-width: 138px; }
  .hero-stat-label { font-size: 12px; max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 28px 20px; }
  .process-steps { grid-template-columns: 1fr; }
  .stack-strip { gap: 10px 20px; }
  .stack-logos { gap: 14px 22px; }
  .stack-logos img { height: 24px; width: 24px; }
  .inline-cta { padding: 22px 20px; margin-top: 40px; }
  .inline-cta-btn { width: 100%; justify-content: center; }
  .book-panel { padding: 22px 20px; }
  .wa-btn { width: 100%; }
  .program-foot .btn-primary { width: 100%; justify-content: center; }
}

/* Narrow phones: tighten nav so logo + CTA + toggle never crowd */
@media (max-width: 360px) {
  .nav-logo { font-size: 19px; }
  a.nav-cta { margin-right: 12px; padding: 12px 13px; font-size: 12px; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────
   Anything that starts hidden and animates in is forced to its final
   state here. Killing the transition alone would leave that content
   stuck at opacity:0 for these users. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  /* entrance + scroll-reveal content must simply be visible */
  .hero-headline, .hero-sub, .hero-actions, .hero-meta,
  .reveal, .problem-item {
    animation: none !important;
    /* transition:none, not just a short duration: these start at opacity:0, so
       they must not depend on a transition frame completing to become visible */
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── SUB-PAGE SHELL ─────────────────────────────────────────────
   Shared by /how-we-work/, /process-digitisation/ and /custom-software/.
   The homepage sells the idea; these pages answer the questions someone
   already interested will ask, so they run denser and plainer. */
.page-hero {
  padding: 152px 0 64px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.page-hero .hero-grid { opacity: .035; }
.crumb {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--slate); margin-bottom: 22px;
}
.crumb a { color: var(--slate); border-bottom: 1px solid rgba(132,147,168,.3); }
.crumb a:hover { color: var(--green); border-bottom-color: rgba(0,230,118,.5); }
.page-hero h1 {
  font-family: var(--serif); font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.12; letter-spacing: -.02em; padding-bottom: 6px;
  max-width: 15em;
}
.page-hero h1 em { font-style: italic; color: var(--green); }
.page-lede {
  margin-top: 22px; font-size: clamp(16px, 1.7vw, 18px);
  color: var(--mist); line-height: 1.75; max-width: 62ch;
}
.page-hero .hero-actions { margin-top: 36px; }

/* Vertical stepped list. Used where a sequence matters and horizontal
   columns would cramp the detail. */
.steps { display: flex; flex-direction: column; margin-top: 56px; }
.step-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: 34px 0; border-top: 1px solid rgba(255,255,255,.09);
}
.step-row:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.step-name {
  font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 1.2;
}
.step-meta {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green); margin-top: 10px;
}
.step-body p { font-size: 15px; color: var(--mist); line-height: 1.75; max-width: 60ch; }
.step-body p + p { margin-top: 12px; }
.step-body ul { margin-top: 14px; list-style: none; }
.step-body li {
  font-size: 14px; color: var(--slate); line-height: 1.7;
  padding-left: 18px; position: relative;
}
.step-body li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 6px; height: 1px; background: var(--green);
}

/* Honest two-column comparison. No progress bars, no scoring. */
.tradeoff { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 52px; }
.tradeoff-col { padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.tradeoff-col:last-child { border-top-color: rgba(0,230,118,.3); }
.tradeoff-col h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 16px; }
.tradeoff-col li {
  list-style: none; font-size: 14px; color: var(--mist); line-height: 1.7;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.tradeoff-col li:last-child { border-bottom: none; }

/* FAQ. Real questions people ask before enquiring, and the source for
   the FAQPage schema on these pages. */
.faq { margin-top: 48px; max-width: 820px; }
.faq details {
  border-top: 1px solid rgba(255,255,255,.09); padding: 20px 0;
}
.faq details:last-of-type { border-bottom: 1px solid rgba(255,255,255,.09); }
.faq summary {
  cursor: pointer; font-size: 16px; font-weight: 500; color: var(--white);
  list-style: none; display: flex; justify-content: space-between; gap: 20px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--green); font-family: var(--mono); font-size: 18px; flex-shrink: 0;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.faq p { margin-top: 12px; font-size: 14.5px; color: var(--mist); line-height: 1.75; max-width: 68ch; }

/* Closing CTA used at the foot of every sub-page. */
.page-cta { border-top: 1px solid rgba(255,255,255,.07); background: var(--ink-2); }
.page-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px 40px; flex-wrap: wrap;
}
.page-cta h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.page-cta p { font-size: 15px; color: var(--mist); margin-top: 12px; max-width: 52ch; line-height: 1.7; }
/* Reassurance microcopy under a page's closing CTA, where the button sends
   the visitor to the homepage form. Sized as microcopy so it answers the
   "is this a sales trap" objection without competing with the button. */
.page-cta-alt { font-size: 13px; color: var(--slate); margin-top: 14px; line-height: 1.6; }
.page-cta-alt a { color: var(--green); border-bottom: 1px solid rgba(0,230,118,.3); }
.page-cta-alt a:hover { border-bottom-color: var(--green); }

@media (max-width: 900px) {
  .page-hero { padding: 130px 0 52px; }
  .step-row { grid-template-columns: 1fr; gap: 14px; }
  .tradeoff { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .page-cta .btn-primary { width: 100%; justify-content: center; }
}

/* Real workflow screenshot on a service page. The canvas is one long
   horizontal run, so below 900px the image keeps a legible height and scrolls
   sideways inside its frame. Only the frame scrolls; the caption stays put. */
.proof-figure { margin-top: 48px; }
.proof-figure-frame {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md);
}
.proof-figure-frame:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.proof-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-md);
}
.proof-figure figcaption {
  margin-top: 14px; font-size: 13px; color: var(--slate);
  line-height: 1.6; max-width: 640px;
}
@media (max-width: 900px) {
  .proof-figure img { width: auto; height: 190px; max-width: none; }
}
@media (max-width: 600px) {
  .proof-figure img { height: 170px; }
}

/* The full label overlaps the logo below ~600px. Phones get the short form;
   it still carries the two words that matter, free and fit check. */
.nav-cta-short { display: none; }
@media (max-width: 600px) {
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
}

/* ─── COOKIE NOTICE ──────────────────────────────────────────────
   Informational only (POPIA Condition 6). Fixed to the bottom so it never
   shifts layout, sits below the nav in the z-index scale (nav 100, nav
   dropdown 10, notice 90), and never covers the full viewport. */
.cookie-notice {
  position: fixed; z-index: 90;
  left: 24px; right: 24px; bottom: 24px;
  max-width: 720px; margin-inline: auto;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  animation: cookieNoticeIn .45s cubic-bezier(.16,1,.3,1) both;
}
.cookie-notice-text {
  flex: 1 1 320px;
  font-size: 13.5px; line-height: 1.65; color: var(--mist); margin: 0;
}
.cookie-notice-text a {
  color: var(--green); border-bottom: 1px solid rgba(0,230,118,.35);
}
.cookie-notice-text a:hover { border-bottom-color: var(--green); }
.cookie-notice-btn {
  flex: 0 0 auto;
  background: var(--green); color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 11px 24px; border-radius: var(--radius-sm);
  transition: background var(--transition), transform var(--transition);
}
.cookie-notice-btn:hover { background: var(--green-dim); transform: translateY(-1px); }
.cookie-notice-btn:active { transform: translateY(0); }
.cookie-notice-btn:focus-visible,
.cookie-notice-text a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px;
}
@keyframes cookieNoticeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .cookie-notice {
    left: 12px; right: 12px; bottom: 12px;
    padding: 16px 18px; gap: 14px;
  }
  .cookie-notice-text { flex-basis: 100%; font-size: 13px; }
  /* Full-width tap target on a phone rather than a button squeezed beside text.
     13px padding takes it to 45px tall, clearing the 44px minimum. */
  .cookie-notice-btn { width: 100%; padding: 13px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice { animation: none; }
}

/* ─── FLOATING WHATSAPP BUTTON ───────────────────────────────────
   Persistent chat entry point on every page, injected by whatsapp-float.js.
   Outline of the site's own accent, not WhatsApp's brand green: this is a
   one-accent-color page, and the glyph alone already reads as WhatsApp
   without borrowing a second green. Sits below the nav (100) and above the
   cookie notice (90) in the z-index scale. */
.whatsapp-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--ink);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(0,230,118,.2);
  transition: transform var(--transition), box-shadow var(--transition), bottom var(--transition);
}
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(0,230,118,.35); }
.whatsapp-float:active { transform: translateY(-1px); }
.whatsapp-float:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

@media (max-width: 640px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* Below ~820px the cookie notice spans edge to edge and sits in this
   button's corner too. Shift up for as long as the notice is showing;
   :has() means no coordination code needed in cookie-notice.js. */
@media (max-width: 820px) {
  body:has(.cookie-notice) .whatsapp-float { bottom: 196px; }
}
@media (max-width: 600px) {
  body:has(.cookie-notice) .whatsapp-float { bottom: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
}

/* ─── LIVE DISPATCH BOARD ────────────────────────────────────────
   A real working component on /custom-software/, not a static mock-up.
   Three semantic SLA states need three colours, so this is the one place
   an amber appears. It is status information, not decoration, and it is
   scoped to this component only. */
.db-panel {
  margin-top: 44px;
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.db-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.db-tabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-right: auto;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
}
.db-tab {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--slate); padding: 8px 16px; border-radius: 3px;
  transition: background var(--transition), color var(--transition);
}
.db-tab:hover { color: var(--white); }
.db-tab.is-active { background: var(--green); color: var(--ink); }
.db-tab:focus-visible, .db-reset:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.db-reset {
  font-family: var(--sans); font-size: 13px; color: var(--mist);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm);
  padding: 8px 16px; transition: border-color var(--transition), color var(--transition);
}
.db-reset:hover { border-color: rgba(255,255,255,.4); color: var(--white); }

/* Signals that this panel is running software rather than a picture. The dot
   reports real state (the board is live), which is why it is here and nowhere
   else on the site. */
.db-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green);
}
.db-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: dbPulse 2s ease-in-out infinite;
}
/* Removes itself the moment the visitor acts, so it never becomes furniture. */
.db-hint {
  margin: 0; padding: 12px 20px;
  background: var(--green-bg);
  border-bottom: 1px solid rgba(0,230,118,.15);
  font-size: 13px; color: var(--mist); line-height: 1.6;
}
.db-hint strong { color: var(--green); font-weight: 500; }

/* Appears once, when the first job is closed and the dashboard has something
   worth showing. Sits at the foot of the panel, next to the rows the visitor
   was just working on. */
.db-prompt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 20px; flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--green-bg);
  border-top: 1px solid rgba(0,230,118,.2);
}
.db-prompt[hidden] { display: none; }
.db-prompt-text { margin: 0; font-size: 13.5px; color: var(--white); line-height: 1.6; }
.db-prompt-btn {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  background: var(--green); color: var(--ink);
  border-radius: var(--radius-sm); padding: 10px 18px;
  transition: background var(--transition), transform var(--transition);
}
.db-prompt-btn:hover { background: var(--green-dim); }
.db-prompt-btn:active { transform: translateY(1px); }
.db-prompt-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ── board ── */
.db-list { list-style: none; margin: 0; padding: 0; }
.db-row {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) 132px 108px 104px auto;
  align-items: center; gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.db-row:last-child { border-bottom: none; }
.db-row-breached { background: rgba(255,143,143,.05); }
.db-row-met, .db-row-missed { opacity: .5; }

.db-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.db-customer { font-size: 14.5px; color: var(--white); font-weight: 500; }
.db-type { font-size: 12px; color: var(--slate); }

.db-status-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.db-status { font-size: 13px; color: var(--mist); }
.db-stopwatch { display: none; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--slate); }
.db-stopwatch.is-on { display: inline-flex; }
.db-run-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slate); flex-shrink: 0; }
.db-stopwatch.is-running .db-run-dot { background: var(--green); animation: dbPulse 1.6s ease-in-out infinite; }
.db-stopwatch.is-running { color: var(--green); }
@keyframes dbPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.db-sla { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mist); }
.db-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--slate); }
.db-row-ontrack .db-dot, .db-row-met .db-dot { background: var(--green); }
.db-row-risk .db-dot { background: #ffb547; }
.db-row-breached .db-dot, .db-row-missed .db-dot { background: var(--alert); }
.db-row-breached .db-sla { color: var(--alert); }
.db-row-risk .db-sla { color: #ffb547; }

/* The clock is the thing that makes the board feel alive, so it is sized
   to be read at a glance and uses tabular figures so digits do not jitter. */
.db-time { display: flex; flex-direction: column; gap: 2px; }
.db-clock {
  font-family: var(--mono); font-size: 16px; color: var(--white);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.db-clock-cap { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.db-row-breached .db-clock { color: var(--alert); }
.db-row-risk .db-clock { color: #ffb547; }
.db-row-met .db-clock, .db-row-missed .db-clock { font-size: 14px; color: var(--mist); }

.db-action { display: flex; justify-content: flex-end; }
.db-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  background: var(--green); color: var(--ink);
  border-radius: var(--radius-sm); padding: 9px 18px; min-width: 92px;
  transition: background var(--transition), transform var(--transition);
}
.db-btn:hover { background: var(--green-dim); }
.db-btn:active { transform: translateY(1px); }
.db-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Three pulses then stop: enough to say "this is clickable", not a loop that
   nags. Cleared as soon as anything is clicked. */
.db-btn.is-nudge { animation: dbNudge 1.5s ease-out 3; }
@keyframes dbNudge {
  0%   { box-shadow: 0 0 0 0 rgba(0,230,118,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(0,230,118,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); }
}
.db-btn[hidden], .db-closed[hidden] { display: none; }
.db-closed { font-size: 12.5px; color: var(--slate); }

/* ── dashboard ── */
.db-dash { padding: 22px 20px; }
.db-dash-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.db-tile {
  background: var(--ink); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md); padding: 20px;
}
.db-tile-val {
  font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.db-tile-cap {
  margin-top: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--slate);
}
.db-tile-sub { margin-top: 6px; font-size: 12.5px; color: var(--mist); line-height: 1.5; }

.db-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.db-dash-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 16px; font-weight: 400;
}
.db-bar + .db-bar { margin-top: 12px; }
.db-bar-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--mist); margin-bottom: 6px; }
.db-bar-val { font-family: var(--mono); color: var(--white); font-variant-numeric: tabular-nums; }
.db-bar-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.db-bar-fill { height: 100%; background: var(--mist); border-radius: 3px; transition: width var(--transition); }
.db-bar-fill.is-ok { background: var(--green); }
.db-bar-fill.is-risk { background: #ffb547; }
.db-bar-fill.is-bad { background: var(--alert); }

.db-live {
  margin: 0; padding: 14px 20px; min-height: 46px;
  font-size: 13px; color: var(--slate); line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.06);
}
.db-note { margin-top: 16px; font-size: 13px; color: var(--slate); line-height: 1.7; max-width: 62ch; }

@media (max-width: 860px) {
  /* Rows become cards. The action button gets its own full-width row so it is
     never a cramped target beside four other columns. */
  .db-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'main sla' 'status time' 'action action';
    gap: 12px 14px; padding: 18px 20px;
  }
  .db-row-main { grid-area: main; }
  .db-sla { grid-area: sla; justify-self: end; align-self: start; }
  .db-status-wrap { grid-area: status; }
  .db-time { grid-area: time; align-items: flex-end; }
  .db-action { grid-area: action; }
  /* 14px padding puts this at 45px, clearing the 44px minimum tap target. */
  .db-btn { width: 100%; padding: 14px 18px; }
  /* The view tabs and reset are real controls on a phone too, so they get
     the same 44px floor rather than the desktop's mouse-sized padding. */
  .db-tab, .db-reset {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* Two tidy rows instead of three ragged ones: status and reset on top,
     full-width tabs beneath. */
  .db-head { padding: 14px 20px; gap: 12px; }
  .db-badge { order: 1; }
  .db-reset { order: 2; margin-left: auto; }
  .db-tabs { order: 3; flex: 0 0 100%; margin-right: 0; }
  .db-tab { flex: 1; }
  .db-hint { padding: 12px 20px; }
  .db-prompt { padding: 16px 20px; }
  .db-prompt-btn { width: 100%; padding: 14px 18px; }
  .db-dash-top { grid-template-columns: 1fr; }
  .db-dash-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Numbers keep counting; only the decorative pulses stop. The hint text and
     the Live label still carry the same information without moving. */
  .db-stopwatch.is-running .db-run-dot,
  .db-badge-dot,
  .db-btn.is-nudge { animation: none; }
  .db-bar-fill { transition: none; }
  /* A static ring still marks the first action for anyone who cannot see the pulse. */
  .db-btn.is-nudge { box-shadow: 0 0 0 3px rgba(0,230,118,.35); }
}


/* ─── WhatsApp channel ───────────────────────────────────────────
   Secondary to the brief, not a second primary: outlined rather than
   filled, so it reads as an alternative route and does not compete
   with the form's submit button. WhatsApp green is deliberately not
   used — the brand accent stays the only accent. */
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 18px;
  background: transparent; color: var(--white);
  border: 1px solid rgba(0,230,118,.45);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  padding: 13px 22px; border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.wa-btn:hover { background: var(--green-bg); border-color: var(--green); transform: translateY(-2px); }
.wa-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Calendar, demoted. A plain text link below the channel list: still
   there for anyone who wants a call, no longer the headline ask. */
.book-last { margin-top: 24px; font-size: 13px; color: var(--slate); line-height: 1.7; }
.book-last a { color: var(--mist); border-bottom: 1px solid rgba(255,255,255,.2); }
.book-last a:hover { color: var(--green); border-bottom-color: rgba(0,230,118,.4); }