/* =========================================
   TERRAVISE — CLEAN LIGHT THEME
   ========================================= */

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

/* Sections and links are toggled off with the `hidden` attribute (see the blog
   section in index.html). A later `display:` on a class would otherwise beat the
   browser's default [hidden] rule and quietly un-hide them. */
[hidden] { display: none !important; }

:root {
  --white:      #ffffff;
  --bg:         #f5f7f5;
  --bg-2:       #eef2ee;
  --surface:    #ffffff;
  --border:     #e2e8e2;
  --border-2:   #cdd8cd;
  --green:      #1e7a3e;
  --green-mid:  #2a9950;
  --green-light:#e8f5ec;
  --green-xlt:  #f2faf4;
  --text:       #0d1a0d;
  --text-2:     #4a5e4a;
  --text-3:     #8a9e8a;
  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  /* Two-layer shadows: a tight contact shadow for the edge, a wide soft one for
     lift. A single blurred shadow is what makes a card read as a flat box. */
  --shadow-sm:  0 1px 2px rgba(13,26,13,0.04), 0 2px 6px -2px rgba(13,26,13,0.06);
  --shadow:     0 2px 4px -1px rgba(13,26,13,0.04), 0 12px 24px -10px rgba(13,26,13,0.12);
  --shadow-lg:  0 4px 8px -2px rgba(13,26,13,0.05), 0 28px 56px -16px rgba(13,26,13,0.18);
  --shadow-green: 0 2px 6px -1px rgba(30,122,62,0.24), 0 8px 20px -8px rgba(30,122,62,0.35);
}

html { scroll-behavior: smooth; }
/* The nav is fixed, so an un-offset anchor jump parks the section heading
   underneath it. Clears the 64px bar plus breathing room. */
html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── TYPOGRAPHY ─── */
/* Tracking is set in em so it scales with the clamp instead of getting loose at
   large sizes and cramped at small ones. Tight tracking on big weights is most
   of what reads as "modern" in display type. */
h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; line-height: 1.06; letter-spacing: -0.032em; }
h2 { font-size: clamp(27px, 3.1vw, 38px); font-weight: 800; line-height: 1.14; letter-spacing: -0.028em; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.32; letter-spacing: -0.018em; }
h4 { font-size: 17px; font-weight: 700; }
h5 { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

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

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}

.section-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 44px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--text-2); font-size: 17px; line-height: 1.65; }

/* ─── BUTTONS ─── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-green);
  transition: background 0.2s, transform 0.18s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.2s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px -2px rgba(30,122,62,0.28), 0 14px 28px -10px rgba(30,122,62,0.45);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary.btn-lg { font-size: 16px; padding: 15px 32px; border-radius: 14px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, background 0.2s, transform 0.18s cubic-bezier(0.2,0.8,0.3,1), box-shadow 0.2s;
  white-space: nowrap;
}
.btn-secondary:hover {
  border-color: var(--green); background: var(--green-xlt);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.btn-secondary:active { transform: translateY(0); }
.btn-secondary.btn-lg { font-size: 16px; padding: 15px 32px; border-radius: 14px; }

.btn-ghost {
  display: inline-flex; align-items: center;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
}
.btn-ghost:hover { color: var(--text); background: var(--bg); }

/* =========================================
   NAV
   ========================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: invert(32%) sepia(75%) saturate(600%) hue-rotate(100deg) brightness(0.7);
}
.logo-img.logo-sm { width: 28px; height: 28px; }
.logo-text {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.nav-links {
  display: flex; list-style: none; gap: 4px;
  margin-left: auto;
}
.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--bg); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text-2); border-radius: 2px;
  transition: all 0.25s;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.mobile-menu a {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .mobile-cta {
  margin-top: 12px;
  background: var(--green);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius);
  border-bottom: none;
}
.nav.open .mobile-menu { display: flex; }

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  padding: 112px 0 48px;
  background: linear-gradient(180deg, #f2faf4 0%, #ffffff 62%);
  overflow: hidden;
}
/* Soft green bloom behind the mockup so the right half isn't a white void.
   Sits under the content and never intercepts clicks. */
.hero::after {
  content: '';
  position: absolute;
  top: -160px; right: -180px;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(42,153,80,0.13) 0%, rgba(42,153,80,0.04) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-container { position: relative; z-index: 1; }
.hero-container {
  display: grid;
  /* Slightly wider text rail so the headline's hard line breaks land where they
     were written to, instead of spilling a single word onto its own line. */
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 56px;
}
.hero-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-light);
  border: 1px solid rgba(30,122,62,0.2);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 24px;
  letter-spacing: 0.03em;
}
/* Capped below the global h1 clamp: at 56px this headline is competing with a
   half-width column and breaks badly. */
.hero-text h1 { font-size: clamp(34px, 3.9vw, 46px); margin-bottom: 22px; }
.hero-sub {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
/* Laid out in a row rather than stacked: three short phrases in a column made
   the left rail much taller than the mockup beside it, which is what left the
   hero looking bottom-heavy and empty on the right. */
.hero-trust {
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  max-width: 520px;
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-2); font-weight: 500;
}
.trust-item svg { color: var(--green); flex-shrink: 0; }

/* App mockup */
.hero-visual { position: relative; }
.app-mockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.app-logo-row { display: flex; align-items: center; gap: 8px; }
.app-logo-icon { width: 22px; height: 22px; object-fit: contain; filter: invert(32%) sepia(75%) saturate(600%) hue-rotate(100deg) brightness(0.7); }
.app-logo-name { font-size: 13px; font-weight: 800; color: var(--text); }
.app-user-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), #4caf50);
}
/* Was a fixed 300px, which clipped the third job row mid-line against the
   mockup's overflow:hidden and made the screenshot look broken. */
.app-body { display: flex; min-height: 300px; }
.app-sidebar {
  width: 130px; flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.app-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
}
.app-nav-item.active { background: var(--green-light); color: var(--green); }
.app-content { flex: 1; padding: 14px; overflow: hidden; }
.app-page-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.app-stats-row { display: flex; gap: 8px; margin-bottom: 14px; }
.app-stat-card {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.app-stat-label { font-size: 10px; color: var(--text-3); font-weight: 500; }
.app-stat-val { font-size: 20px; font-weight: 800; color: var(--text); }
.app-jobs-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.app-job-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.app-job-row:last-of-type { border-bottom: none; }
.app-job-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #22c55e; }
.dot-blue  { background: #3b82f6; }
.dot-orange { background: #f97316; }
.app-job-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.app-job-name { font-size: 12px; font-weight: 600; color: var(--text); }
.app-job-sub  { font-size: 10px; color: var(--text-3); }
.app-job-status {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.status-active  { background: #dcfce7; color: #15803d; }
.status-pending { background: #fef9c3; color: #a16207; }

/* Floating tags */
.mockup-float {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.mockup-float svg { color: var(--green); flex-shrink: 0; }
.mockup-float-1 { bottom: -16px; left: -32px; }
.mockup-float-2 { top: 30px; right: -36px; }


/* =========================================
   VALUE SECTION
   ========================================= */
.value-section {
  padding: 72px 0;
}
.value-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Top-aligned, not centred: the card stack is much taller than the text, and
     centring it floated the heading down the page behind a band of empty space. */
  align-items: start;
  gap: 64px;
}
.value-left .eyebrow { display: block; }
.value-left h2 { margin-bottom: 20px; }
.value-left p { color: var(--text-2); font-size: 17px; line-height: 1.75; margin-bottom: 32px; }

/* Value cards */
.value-cards { display: flex; flex-direction: column; gap: 12px; }
.value-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
}
.value-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.value-card-icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--green-light);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.value-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.value-card span   { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ─── Schedule / Gantt mockup ─── */
.gantt-body { display: flex; flex-direction: column; gap: 9px; }
.gantt-months {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-left: 104px;
  font-size: 10px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.gantt-row { display: flex; align-items: center; gap: 10px; }
.gantt-label { width: 94px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-2); }
.gantt-track { position: relative; flex: 1; height: 16px; background: var(--bg); border-radius: 5px; }
.gantt-bar { position: absolute; top: 3px; height: 10px; border-radius: 3px; }
.bar-a { background: var(--green); }
.bar-b { background: var(--green-mid); }
.bar-c { background: #6cc389; }
.bar-late { background: #e5734b; }
.gantt-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-3);
}
.gantt-key { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.gantt-chip { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.chip-late { background: #e5734b; }
.gantt-note { font-weight: 600; color: var(--green); }

/* ─── Site Design mockup ─── */
.design-body { display: flex; flex-direction: column; gap: 10px; }
.design-canvas {
  position: relative;
  height: 176px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(226,232,226,0.75) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(226,232,226,0.75) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--green-xlt);
  border: 1px solid var(--border);
  overflow: hidden;
}
.design-shape {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #29502f;
  border-radius: 5px;
  text-align: center;
  padding: 2px;
}
.shape-lawn  { left: 8%;  top: 14%; width: 44%; height: 46%; background: rgba(108,195,137,0.42); border: 1.5px solid #4aa86a; }
.shape-bed   { left: 57%; top: 12%; width: 34%; height: 30%; background: rgba(30,122,62,0.24);  border: 1.5px dashed #1e7a3e; }
.shape-patio { left: 20%; top: 66%; width: 52%; height: 26%; background: rgba(138,158,138,0.36); border: 1.5px solid #7b8f7b; }
.design-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 10px; color: var(--text-2); font-weight: 600;
}
.design-key { display: inline-flex; align-items: center; gap: 5px; }
.design-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-lawn  { background: rgba(108,195,137,0.6); border: 1px solid #4aa86a; }
.sw-bed   { background: rgba(30,122,62,0.3);  border: 1px dashed #1e7a3e; }
.sw-patio { background: rgba(138,158,138,0.5); border: 1px solid #7b8f7b; }
.design-scale { margin-left: auto; color: var(--text-3); font-weight: 700; }

/* ─── Purchase order mockup ─── */
.po-body { display: flex; flex-direction: column; gap: 8px; }
.po-head { display: flex; align-items: center; justify-content: space-between; }
.po-num { font-size: 13px; font-weight: 800; }
.po-badge {
  font-size: 10px; font-weight: 700;
  background: var(--green-light); color: var(--green);
  padding: 3px 9px; border-radius: 20px;
}
.po-vendor { font-size: 11px; color: var(--text-3); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.po-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.po-desc { flex: 1; font-size: 11px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.po-desc em { font-style: normal; font-size: 9px; font-weight: 500; color: var(--text-3); }
.po-qty { font-size: 11px; color: var(--text-2); width: 46px; text-align: right; }
.po-recv { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; white-space: nowrap; width: 66px; text-align: center; }
.recv-full { background: #dcfce7; color: #15803d; }
.recv-part { background: #fef9c3; color: #a16207; }
.recv-open { background: var(--bg-2); color: var(--text-3); }
.po-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; font-size: 10.5px; color: var(--text-3); }
.po-foot strong { font-size: 13px; color: var(--text); }

/* =========================================
   PROMO VIDEO
   ========================================= */
.promo-section { padding: 0 0 72px; }
.promo-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0d2e19;
}
.promo-play-btn {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  overflow: hidden;
}
.promo-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.3,1);
}
.promo-play-btn:hover .promo-poster { transform: scale(1.03); }
/* The photo is bright and busy on the right, so the scrim runs horizontally —
   heavy over the blueprints where the copy sits, clear over the tablet. */
.promo-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(9,32,17,0.94) 0%,
    rgba(9,32,17,0.86) 30%,
    rgba(9,32,17,0.45) 55%,
    rgba(9,32,17,0.08) 78%,
    rgba(9,32,17,0) 100%);
}
.promo-copy {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px;
  padding: 0 56px;
  max-width: 560px;
  color: #fff;
}
.promo-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8fd6a6;
}
.promo-title {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -0.03em;
}
.promo-sub {
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 340px;
}
.promo-cue {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 6px;
  font-size: 15px; font-weight: 700;
  color: #fff;
}
.promo-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-mid);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  padding-left: 3px; /* optical centring of the triangle */
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1), background 0.2s;
}
.promo-play-btn:hover .promo-icon { transform: scale(1.09); background: #35b25f; }
.promo-time {
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}
.promo-play-btn:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 3px; }
/* Swapped in on click; inherits the frame's rounded corners. Shared by the
   promo and every case study. */
.facade-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
/* It's focused on swap so the space bar works straight away — but that
   shouldn't paint the UA's blue ring around the frame. */
.facade-video:focus { outline: none; }
.facade-video:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 3px; }

/* =========================================
   CASE STUDIES
   ========================================= */
.cases-section { padding: 72px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
/* An odd trailing card centres rather than sitting stranded on the left. */
.case-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; width: 100%; }
.case-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
}
.case-card:hover, .case-card:focus-within {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
/* These posters are frames from motion-graphics videos, so they already carry
   their own on-screen text. Overlaying the card copy on top collided with it —
   the copy sits below the still instead, which also means any frame works. */
.case-play-btn {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: none; background: #0d2e19;
  cursor: pointer; overflow: hidden;
}
.case-play-btn::after { content: ''; position: absolute; inset: 0; }
.case-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.3,1), filter 0.3s;
}
.case-card:hover .case-poster { transform: scale(1.04); filter: brightness(0.88); }
.case-play-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(30,122,62,0.94);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  padding-left: 3px; /* optical centring of the triangle */
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.3,1), background 0.2s;
}
.case-card:hover .case-play-badge { transform: translate(-50%, -50%) scale(1.1); background: var(--green-mid); }
.case-time {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(9,20,12,0.82);
  color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.case-body { padding: 20px 22px 22px; }
.case-tag {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
.case-title { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 8px; }
.case-result { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.case-card:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.case-play-btn:focus-visible { outline: none; }

/* =========================================
   FEATURES TABS
   ========================================= */
.features-section {
  padding: 72px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feature-tabs { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
/* Nine tabs no longer fit one row at every width. Wrapping is the safe
   failure: the scrollbar is hidden, so an overflowing strip would silently
   swallow the last tab with nothing to hint it was there. */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  overflow-x: visible;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0;
  padding: 16px 15px;
  font-size: 14px; font-weight: 600;
  color: var(--text-3);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }

.tab-panels { padding: 0; }
.tab-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
}
.tab-panel.active { display: grid; }

.panel-text h3 { margin-bottom: 14px; }
.panel-text p { color: var(--text-2); font-size: 16px; line-height: 1.75; margin-bottom: 24px; }
.panel-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.panel-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  padding-left: 0;
}
.panel-list li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}

/* Screen mockups inside tabs */
.panel-visual { }
.screen-mockup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.screen-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.s-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.s-title { font-size: 11px; font-weight: 700; color: var(--text-3); margin-left: 6px; letter-spacing: 0.04em; }
.screen-body { padding: 16px; }

/* Catalog screen */
.catalog-body { display: flex; flex-direction: column; gap: 8px; }
.cat-upload {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--green-xlt);
  border: 1px solid rgba(30,122,62,0.18);
  border-radius: 8px;
  margin-bottom: 4px;
}
.cat-upload-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--white); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cat-upload-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cat-upload-text strong {
  font-size: 11px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-upload-text span { font-size: 10px; color: var(--text-2); }
.cat-upload-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 20px;
  background: #dcfce7; color: #15803d;
  flex-shrink: 0;
}
.cat-item-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.cat-vendor-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  background: var(--bg);
  border-radius: 6px;
}
.cat-vendor { font-size: 11px; color: var(--text-2); font-weight: 600; }
.cat-price { font-size: 11px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cat-price-best { color: var(--green); }
.cat-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 8px; margin-top: 2px;
  font-size: 10px; color: var(--text-3); font-weight: 600;
}
.cat-save { color: var(--green); font-weight: 700; }

/* User groups / access screen */
.access-body { display: flex; flex-direction: column; gap: 8px; }
.acc-group {
  padding: 10px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 8px;
}
.acc-group-active { background: var(--green-xlt); border-color: rgba(30,122,62,0.18); }
.acc-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.acc-group-name { font-size: 12px; font-weight: 700; color: var(--text); }
.acc-group-count { font-size: 10px; color: var(--text-3); font-weight: 600; }
.acc-perms { display: flex; flex-wrap: wrap; gap: 4px; }
.acc-perm {
  font-size: 9px; font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
}
.acc-perm.on  { background: #dcfce7; color: #15803d; }
.acc-perm.off { background: var(--white); color: var(--text-3); border: 1px solid var(--border); }

/* Projects screen */
.projects-body { display: flex; flex-direction: column; gap: 10px; }
.proj-row { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--bg); border-radius: 8px; }
.proj-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-green-sm  { background: #22c55e; }
.dot-blue-sm   { background: #3b82f6; }
.dot-orange-sm { background: #f97316; }
.proj-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.proj-name { font-size: 12px; font-weight: 600; color: var(--text); }
.proj-meta { font-size: 10px; color: var(--text-3); }
.proj-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.badge-active   { background: #dcfce7; color: #15803d; }
.badge-progress { background: #dbeafe; color: #1d4ed8; }
.badge-pending  { background: #fef9c3; color: #a16207; }
.proj-budget-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.budget-label { font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.budget-bar-track { background: var(--border); border-radius: 4px; height: 6px; margin-bottom: 6px; }
.budget-bar-fill { background: var(--green); border-radius: 4px; height: 100%; }
.budget-nums { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3); font-weight: 600; }

/* Estimates screen */
.estimates-body { display: flex; flex-direction: column; gap: 10px; }
.est-header-row { display: flex; align-items: center; justify-content: space-between; }
.est-title { font-size: 13px; font-weight: 700; color: var(--text); }
.est-badge { font-size: 10px; font-weight: 700; background: #dbeafe; color: #1d4ed8; padding: 2px 8px; border-radius: 4px; }
.est-client { font-size: 12px; color: var(--text-3); font-weight: 500; }
.est-line-items { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.est-item { display: flex; justify-content: space-between; padding: 7px 10px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.est-item:last-child { border-bottom: none; }
.est-total { font-weight: 700; color: var(--text); background: var(--bg); }
.est-sign-row { display: flex; gap: 8px; align-items: center; }
.est-sign-area { flex: 1; border: 1.5px dashed var(--border-2); border-radius: 8px; padding: 8px 10px; font-size: 11px; color: var(--text-3); text-align: center; }
.est-approve-btn {
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 7px 12px; border-radius: 6px; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
}

/* Invoices screen */
.invoices-body { display: flex; flex-direction: column; gap: 8px; }
.inv-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.inv-info { display: flex; flex-direction: column; gap: 1px; }
.inv-num    { font-size: 11px; font-weight: 700; color: var(--text-3); }
.inv-client { font-size: 12px; font-weight: 600; color: var(--text); }
.inv-right  { display: flex; align-items: center; gap: 8px; }
.inv-amount { font-size: 13px; font-weight: 700; color: var(--text); }
.inv-badge  { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.badge-paid  { background: #dcfce7; color: #15803d; }
.badge-sent  { background: #dbeafe; color: #1d4ed8; }
.badge-draft { background: var(--bg-2); color: var(--text-3); }
.inv-summary { display: flex; justify-content: space-between; padding: 10px 10px 0; border-top: 1px solid var(--border); margin-top: 4px; }
.inv-sum-item { display: flex; flex-direction: column; gap: 2px; }
.inv-sum-item span { font-size: 11px; color: var(--text-3); }
.inv-sum-item strong { font-size: 15px; font-weight: 800; color: var(--text); }
.text-green-sm { color: var(--green) !important; }

/* People screen */
.people-body { display: flex; flex-direction: column; gap: 8px; }
.people-row { display: flex; align-items: center; gap: 10px; }
.person-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.av-a { background: #dcfce7; color: #15803d; }
.av-b { background: #dbeafe; color: #1d4ed8; }
.av-c { background: #ffedd5; color: #c2410c; }
.person-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.person-name { font-size: 12px; font-weight: 600; color: var(--text); }
.person-time { font-size: 10px; color: var(--text-3); }
.person-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.timesheet-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.ts-approve-btn {
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* =========================================
   HOW IT WORKS
   ========================================= */
.how-section { padding: 72px 0; }
.steps-row { display: flex; align-items: stretch; gap: 0; }
/* Given a surface of their own — as bare text in a row they read as an
   unfinished three-column paragraph rather than a sequence. */
.step-card {
  flex: 1;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
}
.step-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.step-num {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--green-light);
  color: var(--green);
  font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.step-card h4 { margin-bottom: 10px; }
.step-card p { color: var(--text-2); font-size: 15px; line-height: 1.7; }
.step-arrow {
  color: var(--border-2);
  align-self: center;
  padding: 0 18px;
  flex-shrink: 0;
}

/* =========================================
   TESTIMONIALS
   ========================================= */
.testimonials-section {
  padding: 72px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: flex; flex-direction: column;
}
.tcard-featured {
  grid-column: span 2;
  background: var(--green-xlt);
  border-color: rgba(30,122,62,0.2);
}
.tcard-quote {
  font-size: 48px;
  line-height: 0.9;
  color: var(--green);
  opacity: 0.4;
  margin-bottom: 12px;
  font-weight: 800;
}
.tcard p { color: var(--text-2); font-size: 16px; line-height: 1.75; flex: 1; margin-bottom: 24px; }
.tcard-featured p { font-size: 18px; color: var(--text); }
.tcard-author { display: flex; align-items: center; gap: 12px; }
.tcard-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.av-green  { background: #dcfce7; color: #15803d; }
.av-blue   { background: #dbeafe; color: #1d4ed8; }
.av-orange { background: #ffedd5; color: #c2410c; }
.tcard-author strong { display: block; font-size: 14px; font-weight: 700; }
.tcard-author span   { font-size: 13px; color: var(--text-3); }

/* =========================================
   SERVICES
   ========================================= */
.services-section {
  padding: 72px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Six cards fill this 3-up grid exactly. If a seventh is ever added it would
   otherwise sit alone in the left column — drop it into the middle instead. */
.service-card:last-child:nth-child(3n + 1) { grid-column: 2; }
.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px 28px 26px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
}
.service-card:hover,
.service-card:focus-within {
  border-color: var(--green);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.service-teaser {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}
/* The whole card is the hit area: this button's ::after is stretched over it,
   which keeps one interactive element per card instead of nesting them. */
.service-open {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 0;
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  color: var(--green);
  cursor: pointer;
  text-align: left;
  transition: gap 0.2s;
}
.service-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.service-card:hover .service-open { gap: 11px; }
.service-open:focus-visible { outline: none; }
.service-card:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.service-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--green-light);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-card h3 { margin-bottom: 10px; }
.service-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.service-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
}
.service-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7a3e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
/* ─── Service detail modal ─── */
.modal-service { max-width: 560px; text-align: left; }
.service-modal-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
  padding-right: 32px; /* clear of the close button */
}
.service-modal-head .service-icon { margin-bottom: 0; flex-shrink: 0; }
.service-modal-head h3 { font-size: 22px; }
.service-modal-body p {
  color: var(--text-2);
  font-size: 15px; line-height: 1.75;
  margin-bottom: 20px;
}
.service-modal-body .service-list { margin-bottom: 28px; }
#serviceModalCta { width: 100%; justify-content: center; }

.services-note {
  text-align: center;
  margin-top: 32px;
  font-size: 15px;
  color: var(--text-2);
}

/* =========================================
   PRICING
   ========================================= */
.pricing-section { padding: 72px 0; }
.pricing-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  padding: 32px 30px;
  box-shadow: var(--shadow);
  position: sticky; top: 88px; /* clears the fixed nav */
}
.price-trial {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--green-mid);
  padding: 5px 11px; border-radius: 20px;
  margin-bottom: 16px;
}
.price-label {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.price-figure { display: flex; align-items: baseline; gap: 8px; }
.price-amount { font-size: 52px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.price-period { font-size: 17px; font-weight: 600; color: var(--text-2); }
.price-note {
  font-size: 14px; color: var(--text-2);
  margin: 12px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.price-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.price-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px; color: var(--text-2); line-height: 1.55;
}
.price-list li::before {
  content: '';
  position: absolute; left: 0; top: 5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7a3e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.price-card .btn-primary { width: 100%; justify-content: center; }

.price-how h3 { margin-bottom: 20px; }
.price-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.price-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  font-size: 15px; line-height: 1.7; color: var(--text-2);
}
.price-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--green-light);
  color: var(--green);
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.price-steps strong { display: block; color: var(--text); font-weight: 700; margin-bottom: 2px; }

.price-modules {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.price-modules-label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.price-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.price-chip {
  font-size: 13px; font-weight: 600;
  color: var(--green);
  background: var(--white);
  border: 1px solid rgba(30,122,62,0.22);
  padding: 6px 13px;
  border-radius: 20px;
}
.price-ceiling {
  margin-top: 20px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-2);
}
.price-ceiling strong { color: var(--text); }

.price-services {
  display: flex; align-items: center; gap: 32px;
  margin-top: 36px;
  padding: 28px 32px;
  background: var(--green-xlt);
  border: 1px solid rgba(30,122,62,0.18);
  border-radius: var(--radius-xl);
}
.price-services-text h3 { font-size: 19px; margin-bottom: 8px; }
.price-services-text p { font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.price-services-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  flex-shrink: 0;
}
.price-services-actions .btn-primary { justify-content: center; white-space: nowrap; }
.price-services-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13.5px; font-weight: 700;
  color: var(--green); text-decoration: none;
  transition: gap 0.2s;
}
.price-services-link:hover { gap: 10px; }

/* =========================================
   ABOUT / STAFF
   ========================================= */
.about-section { padding: 72px 0; }
/* Anonymous team summary — stands in for the named staff cards while the team
   is still employed elsewhere. The .staff-* rules below are left intact so the
   named version can be restored without rebuilding the styles. */
.about-summary { max-width: 940px; margin: 0 auto; }
/* Two tiles now that the degree count is gone — capped and centred so they
   don't stretch to half the page each. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 0 auto 28px;
}
.about-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 22px;
  text-align: center;
}
.about-stat-num {
  display: block;
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1;
  color: var(--green);
  margin-bottom: 8px;
}
.about-stat-label { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.about-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.about-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 26px 28px;
}
.about-col h3 { font-size: 18px; margin-bottom: 10px; }
.about-col p { font-size: 14.5px; line-height: 1.75; color: var(--text-2); }
.about-note {
  text-align: center;
  margin-top: 24px;
  font-size: 14.5px;
  color: var(--text-3);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
.staff-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2,0.8,0.3,1);
}
.staff-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); transform: translateY(-3px); }
.staff-avatar {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.staff-initials { font-size: 28px; font-weight: 800; color: var(--green); letter-spacing: -0.5px; }
/* Sits on top of the initials, which stay as the fallback if the file is missing. */
.staff-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.staff-name { font-size: 20px; margin-bottom: 4px; }
.staff-role {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.staff-bio {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 20px;
  text-align: left;
}
/* Reads as an intentional "not written yet" rather than a bio that failed to load. */
.staff-bio-pending { color: var(--text-3); font-style: italic; text-align: center; }
.staff-creds {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin-bottom: 22px;
}
.staff-creds li {
  font-size: 11px; font-weight: 600;
  color: var(--green);
  background: var(--green-xlt);
  border: 1px solid rgba(30,122,62,0.15);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
/* No portfolio link follows on the CTO card, so drop the trailing gap. */
.staff-creds:last-child { margin-bottom: 0; }
.staff-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto;
  font-size: 14px; font-weight: 700;
  color: var(--green);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid rgba(30,122,62,0.25);
  border-radius: 20px;
  transition: background 0.2s, border-color 0.2s, gap 0.2s;
}
.staff-link:hover { background: var(--green-xlt); border-color: var(--green); gap: 10px; }

/* =========================================
   BLOG
   ========================================= */
.blog-section {
  padding: 72px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.blog-filters { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; }
.blog-filter {
  font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}
.blog-filter:hover { border-color: var(--border-2); color: var(--text); }
.blog-filter.active { background: var(--green); border-color: var(--green); color: var(--white); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.blog-loading { grid-column: 1 / -1; text-align: center; color: var(--text-3); font-size: 15px; padding: 32px 0; }
.blog-loading a { color: var(--green); font-weight: 600; }
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.blog-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.blog-card[hidden] { display: none; }
.blog-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  padding: 0;
  background: var(--bg-2);
  cursor: pointer;
  overflow: hidden;
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-thumb-article { color: var(--text-3); background: var(--green-xlt); cursor: pointer; }
.blog-play {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
  padding-left: 3px;
}
.blog-thumb-video:hover .blog-play { transform: scale(1.08); }
.blog-duration {
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: 10px; font-weight: 700;
  color: var(--white);
  background: rgba(0,0,0,0.75);
  padding: 2px 6px;
  border-radius: 4px;
}
.blog-iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.blog-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.blog-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--text-3); font-weight: 600;
  margin-bottom: 10px;
}
.blog-tag {
  background: var(--green-light);
  color: var(--green);
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
}
.blog-title { font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
.blog-title a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.blog-title a:hover { color: var(--green); }
.blog-excerpt { color: var(--text-2); font-size: 14.5px; line-height: 1.65; }

/* =========================================
   FAQ
   ========================================= */
.faq-section { padding: 72px 0; }
.faq-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
  align-items: start;
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--green); }
.faq-item p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.75;
  padding-bottom: 20px;
}

/* =========================================
   CTA SECTION
   ========================================= */
.cta-section {
  padding: 72px 0;
  background: linear-gradient(160deg, #0d2e19 0%, #1e5c32 100%);
  text-align: center;
}
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
.cta-logo {
  width: 64px; height: 64px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  margin-bottom: 24px;
}
.cta-section h2 { color: #fff; margin-bottom: 14px; }
.cta-section p  { color: rgba(255,255,255,0.7); font-size: 17px; margin-bottom: 32px; }
.cta-section .btn-primary {
  background: #fff;
  color: var(--green);
  font-size: 16px;
  margin-bottom: 14px;
}
.cta-section .btn-primary:hover { background: #f0faf4; }
.cta-note { font-size: 13px; color: rgba(255,255,255,0.45); }

/* =========================================
   FOOTER
   ========================================= */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: flex; gap: 64px; justify-content: center;
  padding: 48px 24px 40px;
}
.footer-brand { max-width: 300px; text-align: center; align-items: center; }
.footer-brand .nav-logo { display: inline-flex; margin-bottom: 12px; }
.footer-brand p { font-size: 13px; color: var(--text-3); line-height: 1.6; margin-bottom: 20px; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: center;
  margin-bottom: 20px;
}
.footer-links a {
  font-size: 13px; font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--green); }
.footer-socials { display: flex; gap: 10px; justify-content: center; }
.footer-socials a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.footer-socials a:hover { color: var(--green); border-color: rgba(30,122,62,0.3); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  font-size: 13px; color: var(--text-3);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 560px; margin: 0 auto; }
  .mockup-float-1 { left: 0; }
  .mockup-float-2 { right: 0; }
  .value-container { grid-template-columns: 1fr; gap: 48px; }
  .tab-panel.active { grid-template-columns: 1fr; }
  .panel-visual { display: none; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .tcard-featured { grid-column: span 1; }
  /* Three compact cards are too narrow at tablet width; two reads better, and
     the 3n+1 centering rule above doesn't apply once there are two columns. */
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-card:last-child:nth-child(3n + 1) { grid-column: auto; }
  .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; }
  /* Three cards don't fit a tablet; drop to two and center a lone last card
     rather than leaving it stranded in the left column. */
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .staff-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; }
  .faq-container { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { flex-direction: column; gap: 40px; }
  .footer-cols { justify-content: flex-start; gap: 32px; }
}

@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: 28px 20px; }
}

@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }
  /* Stacked, so they need real side padding now that they're bordered cards —
     and a gap, since the row's zero-gap only worked when they were bare text. */
  .steps-row { flex-direction: column; gap: 14px; }
  .step-card { padding: 24px 22px; }
  .step-arrow { display: none; }
  /* 16:9 at phone width is only ~220px tall — not enough room for the copy.
     Go taller, drop the scrim to vertical, and anchor the text to the bottom. */
  .promo-play-btn { aspect-ratio: 4 / 5; }
  .promo-scrim {
    background: linear-gradient(180deg,
      rgba(9,32,17,0.20) 0%,
      rgba(9,32,17,0.55) 42%,
      rgba(9,32,17,0.93) 100%);
  }
  .promo-copy {
    justify-content: flex-end;
    padding: 0 26px 32px;
    max-width: none;
    gap: 10px;
  }
  .promo-title { font-size: 32px; }
  .promo-sub { font-size: 15px; max-width: 300px; }
  .promo-section { padding-bottom: 56px; }
  /* Stacked, so the card shouldn't stick — it would follow you down the page
     while you read the very explanation it's summarising. */
  .pricing-grid { grid-template-columns: 1fr; gap: 26px; }
  .price-card { position: static; padding: 26px 22px; }
  .price-amount { font-size: 44px; }
  .price-services { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 22px; }
  .price-services-actions { align-self: stretch; }
  .pricing-section { padding: 56px 0; }
  .cases-section { padding: 56px 0; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card:last-child:nth-child(odd) { max-width: none; }
  .case-body { padding: 18px 18px 20px; }
  .case-title { font-size: 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card:last-child:nth-child(odd) { max-width: none; margin: 0; }
  .tab-panel { padding: 28px 20px; }
  .hero { padding: 92px 0 44px; }
  .about-stats { grid-template-columns: 1fr; gap: 12px; }
  .about-stat { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; }
  .about-stat-num { margin-bottom: 0; font-size: 32px; flex-shrink: 0; }
  .about-cols { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: 1fr; max-width: 460px; }
  .service-card, .staff-card { padding: 28px 24px; }
  .value-section, .features-section, .how-section, .testimonials-section,
  .services-section, .about-section, .blog-section, .faq-section,
  .cta-section { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  /* Six tabs don't fit a phone; the strip scrolls, but tightening it up means
     fewer of them start out off-screen. */
  .tab-nav { flex-wrap: nowrap; overflow-x: auto; }
  .tab-btn { padding: 14px 13px; font-size: 13px; }
}

@media (max-width: 540px) {
  .app-sidebar { display: none; }
  .picker-grid { grid-template-columns: 1fr 1fr; }
  .logos-strip .container { flex-direction: column; gap: 16px; }
}

/* =========================================
   MODAL
   ========================================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13,26,13,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  width: 100%; max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.modal-overlay.open .modal { transform: translateY(0); }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: color 0.2s, background 0.2s;
}
.modal-close:hover { color: var(--text); background: var(--bg-2); }
/* The service modal focuses this on open, so the default blue UA ring would be
   the first thing you see. */
.modal-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; color: var(--text); }

.modal-head { text-align: center; margin-bottom: 28px; }
.modal-logo {
  width: 48px; height: 48px; object-fit: contain;
  filter: invert(32%) sepia(75%) saturate(600%) hue-rotate(100deg) brightness(0.7);
  margin-bottom: 14px;
}
.modal-head h3 { font-size: 22px; margin-bottom: 8px; }
.modal-head p  { font-size: 14px; color: var(--text-2); }

/* Form */
.demo-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--text); }
.req { color: var(--green); }
.form-group input,
.form-group select,
.form-group textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30,122,62,0.1);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9e8a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.btn-submit { width: 100%; justify-content: center; padding: 13px; font-size: 15px; margin-top: 4px; }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
/* Honeypot. Off-screen rather than display:none — some bots skip fields they
   can tell are hidden, and this one needs to look fillable. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { text-align: center; font-size: 12px; color: var(--text-3); }

/* Success state */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 16px 0;
}
.form-success.visible { display: flex; }
.success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.form-success h4 { font-size: 20px; }
.form-success p  { color: var(--text-2); font-size: 15px; max-width: 340px; }

/* ─── FADE-IN ANIMATION ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }