/*
Theme Name: System Builder Hub
Theme URI: https://www.systembuilderhub.com
Author: System Builder Hub
Description: Custom WordPress theme for System Builder Hub — business systems for Oman/GCC SME owners.
Version: 1.0.0
Text Domain: sbh
*/

/* ==========================================================================
   Design tokens — generated from design/design-system.md. Do not hardcode
   hex values anywhere else in this theme; add new tokens here instead.
   ========================================================================== */
:root {
  --color-primary: #0B2942;
  --color-secondary: #1769AA;
  --color-accent: #3B8CC4;
  --color-bg: #F7F9FB;
  --color-surface: #FFFFFF;
  --color-bg-dark: #0B2942;
  --color-text-primary: #102A43;
  --color-text-secondary: #52667A;
  --color-text-inverse: #FFFFFF;
  --color-border: #D9E2EC;
  --color-secondary-hover: #145A8C;
  --color-error: #C0392B;
  --color-success: #1E8E5A;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --size-display: clamp(2.75rem, 5vw, 4rem);
  --size-h1: 2.5rem;
  --size-h2: clamp(1.875rem, 3.5vw, 2.5rem);
  --size-h3: 1.375rem;
  --size-h4: 1.125rem;
  --size-body-lg: 1.125rem;
  --size-body: 1rem;
  --size-body-sm: 0.875rem;
  --size-caption: 0.75rem;
  --size-button: 0.9375rem;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(11,41,66,0.06);
  --shadow-md: 0 8px 24px rgba(11,41,66,0.10);
  --shadow-lg: 0 16px 48px rgba(11,41,66,0.14);

  --transition-default: all 200ms ease;
  --transition-hover: all 150ms ease;

  --max-width: 1180px;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; color: var(--color-text-primary); }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
}

/* ==========================================================================
   Utility — eyebrow labels, decorative rules
   ========================================================================== */
.eyebrow {
  display: inline-block;
  font-size: var(--size-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.eyebrow--on-dark { color: var(--color-accent); }
.rule {
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-4);
  border: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--size-button);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  transition: var(--transition-default);
  min-height: 48px;
  line-height: 1;
}
.btn--primary {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
}
.btn--primary:hover { background: #145E93; }
.btn--outline {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn--outline:hover { background: rgba(255,255,255,0.08); }
.btn--email {
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-8);
  min-height: 48px;
}
.btn--email:hover { background: var(--color-secondary-hover); }
.btn--email svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Reinstated 2026-08-19 as a SECONDARY CTA alongside email — deliberately
   styled in brand blue, not WhatsApp's fixed green, per consultant
   instruction ("don't let the green WhatsApp color become the dominant
   brand color"). Outline treatment keeps it visually secondary to .btn--email. */
.btn--whatsapp {
  background: transparent;
  color: var(--color-secondary);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-8);
  min-height: 48px;
}
.btn--whatsapp:hover { background: rgba(23,105,170,0.08); }
.btn--whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Outline button for LIGHT backgrounds (hero, light sections) — distinct
   from .btn--outline, which assumes a dark section and white text/border. */
.btn--outline-light {
  background: transparent;
  color: var(--color-secondary);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-full);
  padding: var(--space-4) var(--space-8);
  min-height: 48px;
}
.btn--outline-light:hover { background: rgba(23,105,170,0.08); }

/* Reusable primary+secondary CTA row — hero, entry-point CTA, etc. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.navbar__logo img { height: 48px; width: auto; aspect-ratio: auto; }
.navbar__links {
  display: none;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--size-nav, 0.9375rem);
  font-weight: 500;
}
@media (min-width: 900px) {
  .navbar__links { display: flex; }
}
.navbar__links a { color: var(--color-text-primary); transition: var(--transition-hover); }
.navbar__links a:hover, .navbar__links a.is-active { color: var(--color-secondary); }
.navbar__dropdown { position: relative; }
.navbar__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: var(--space-2);
  margin-top: var(--space-2);
}
.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown:focus-within .navbar__dropdown-menu { display: block; }
.navbar__dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--size-body-sm);
}
.navbar__dropdown-menu a:hover { background: var(--color-bg); }
.navbar__actions { display: flex; align-items: center; gap: var(--space-4); }
.navbar__cta { display: none; }
@media (min-width: 900px) { .navbar__cta { display: inline-flex; padding: var(--space-2) var(--space-4); min-height: 40px; } }

.navbar__toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: var(--space-2);
}
@media (min-width: 900px) { .navbar__toggle { display: none; } }
.navbar__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  margin: 4px 0;
  transition: var(--transition-default);
}

.mobile-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-8);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.mobile-panel.is-open { display: flex; }
.mobile-panel a { padding: var(--space-3) 0; font-weight: 500; font-size: var(--size-body-lg); }
.mobile-panel__group { padding-left: var(--space-4); border-left: 2px solid var(--color-border); margin-left: var(--space-2); }
@media (min-width: 900px) { .mobile-panel { display: none !important; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0 var(--space-16);
  background: var(--color-bg);
}
@media (min-width: 768px) { .hero { padding: var(--space-12) 0 var(--space-16); } }
.hero__motif {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: 520px;
  max-width: 60vw;
  opacity: 0.08;
  pointer-events: none;
}
.hero__content { position: relative; max-width: 680px; }
.hero__eyebrow-pill {
  display: inline-block;
  font-size: var(--size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}
.hero h1 {
  font-size: var(--size-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-secondary);
}
.hero__subheadline {
  font-size: var(--size-body-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  max-width: 560px;
  line-height: 1.7;
}
.hero__cta { margin-top: var(--space-6); }
.hero__additional {
  font-size: var(--size-body);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  max-width: 560px;
  line-height: 1.7;
}

/* Hero split layout (2026-08-19) — text left, hero image right. Replaces
   the previous single-column text-only hero with a low-opacity background
   motif. .hero__motif above is kept (used on other pages / can be restored
   here) but unused in this layout. */
.hero__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
}
@media (min-width: 900px) { .hero__split { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); } }
.hero__split .hero__content { max-width: none; }
.hero__split .hero__content h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.hero__visual { position: relative; justify-self: end; width: 100%; }
.hero__visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  display: block;
  margin-left: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
  mask-image: linear-gradient(to right, transparent 0%, black 22%);
}
@media (max-width: 899px) {
  .hero__visual { max-width: 480px; margin: 0 auto; }
  .hero__visual img {
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
  }
}

/* ==========================================================================
   Section base + background rhythm
   IMP-12 (2026-08-18): was --space-24/--space-32 (96px/128px) per side —
   two adjacent sections stacked to 192px/256px of visual gap, roughly
   double CLAUDE.md's own 96–128px *between-sections* target. Halved to
   --space-12/--space-16 (48px/64px) per side so the combined gap between
   two sections now matches spec instead of doubling it.
   ========================================================================== */
.section { padding: var(--space-12) 0; }
@media (min-width: 768px) { .section { padding: var(--space-16) 0; } }
.section--white { background: var(--color-surface); }
.section--bg { background: var(--color-bg); }
.section--dark { background: var(--color-bg-dark); color: rgba(255,255,255,0.92); }
.section--dark h2 { color: #fff; }
.section--dark .eyebrow { color: var(--color-accent); }
.section-heading { max-width: 640px; margin-bottom: var(--space-12); }
.section-heading h2 { font-size: var(--size-h2); font-weight: 700; line-height: 1.2; }

/* ==========================================================================
   Problem cards — grid widened 2026-08-19 to hold 8 items (was 3-item hero
   card layout); simpler compact-card variant for the fuller list.
   ========================================================================== */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) { .problem-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.problem-card {
  background: var(--color-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: var(--transition-default);
}
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.problem-card__icon { width: 28px; height: 28px; margin-bottom: var(--space-4); color: var(--color-secondary); }
.problem-card p { font-size: var(--size-body); color: var(--color-text-primary); line-height: 1.6; }

.problem-grid--compact {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .problem-grid--compact { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.problem-grid--compact .problem-card {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  min-height: 76px;
}
.problem-grid--compact .problem-card p { font-size: var(--size-body-sm); font-weight: 500; }

/* ==========================================================================
   Outcome blocks (Section 4 — Control / Visibility / Consistency / Accountability)
   ========================================================================== */
.outcome-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) { .outcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .outcome-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); } }
.outcome-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
  transition: var(--transition-default);
}
.outcome-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.outcome-card__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--size-h4);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}
.outcome-card p { font-size: var(--size-body-sm); color: var(--color-text-secondary); line-height: 1.6; }

.outcome-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--size-body-lg);
  color: var(--color-primary);
  text-align: center;
}
.outcome-chain span.arrow { color: var(--color-accent); font-weight: 400; }

/* ==========================================================================
   Principle flow (Section 6 — Outcome → Activities → Process → Tools →
   Metrics → Improvement). Compact horizontal chain, distinct from the
   numbered .methodology sequence used for "How We Build It".
   ========================================================================== */
.principle-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}
.principle-flow__step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--size-body-sm);
  color: var(--color-primary);
  white-space: nowrap;
}
.principle-flow__arrow { color: var(--color-accent); font-size: var(--size-body-lg); }

/* ==========================================================================
   Services + Products (Section 8)
   ========================================================================== */
.services-products { max-width: 760px; margin: 0 auto; text-align: center; }
.services-products__quote {
  margin-top: var(--space-10);
  padding: var(--space-8);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-style: normal;
  font-size: var(--size-body-lg);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
}
/* Visually secondary variant (About page, 2026-08-19) — same quote
   treatment, de-emphasized so it reads as supporting color, not a second
   headline: smaller text, muted (not primary-navy) color, lighter border. */
.services-products__quote--secondary {
  margin-top: var(--space-8);
  padding: var(--space-6);
  font-size: var(--size-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-left-color: var(--color-border);
}

/* ==========================================================================
   Solution / Proof
   ========================================================================== */
.proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) { .proof { grid-template-columns: 3fr 2fr; } }
.proof__body p { font-size: var(--size-body-lg); color: var(--color-text-secondary); line-height: 1.75; }
.proof__image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   About page — systems diagram (replaces the generic workspace photo,
   2026-08-19). People/Processes/Tools/Data/Accountability shown
   disconnected, then connected into a system that achieves a defined
   business outcome. Swapped to a client-supplied graphic (assets/images/
   client/systems.jpg) 2026-08-19, later the same day — replaces the
   inline SVG built earlier that day. The graphic already has its own
   white background/corners baked in, so the wrapper card carries only
   the shadow, not extra padding (avoids a card-in-a-card look).
   ========================================================================== */
.systems-diagram-section { padding-top: 0; }
.systems-diagram-card {
  max-width: 1040px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.systems-diagram-card img { display: block; width: 100%; height: auto; }

/* Five-column variant of .outcome-grid (About page's principles section,
   2026-08-19) — same card look, auto-fits instead of the fixed 4-column
   breakpoint so a 5th item doesn't wrap alone onto its own row. */
.outcome-grid--five { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (min-width: 1024px) { .outcome-grid--five { gap: var(--space-6); } }

/* Differentiator (.proof-block) — the base h2 had no explicit font-size,
   so it fell back to the browser default (~1.5em), rendering smaller than
   every other section headline on the page. Fixed 2026-08-19 to give the
   section the visual weight the copy earns. */
.proof-block h2 { font-size: var(--size-h2); font-weight: 700; line-height: 1.15; }
.section--spacious { padding: var(--space-16) 0; }
@media (min-width: 768px) { .section--spacious { padding: var(--space-24) 0; } }

/* ==========================================================================
   Systems teaser
   ========================================================================== */
.systems-teaser { text-align: center; max-width: 640px; margin: 0 auto; }
.systems-teaser p { color: rgba(255,255,255,0.75); font-size: var(--size-body-lg); margin: var(--space-6) 0 var(--space-8); }

/* ==========================================================================
   Entry offer
   ========================================================================== */
.offer-box {
  background: rgba(59,140,196,0.08);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.offer-box p { font-size: var(--size-body-lg); line-height: 1.7; margin-bottom: var(--space-8); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-bg-dark); color: rgba(255,255,255,0.85); padding: var(--space-16) 0 var(--space-8); }
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}
@media (min-width: 768px) { .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer__logo img { height: 34px; width: auto; aspect-ratio: auto; margin-bottom: var(--space-4); }
.site-footer__tagline { color: rgba(255,255,255,0.6); font-size: var(--size-body-sm); }
.site-footer h4 { color: #fff; font-size: var(--size-body-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.site-footer__links a { display: block; padding: var(--space-1) 0; color: rgba(255,255,255,0.75); font-size: var(--size-body-sm); }
.site-footer__links a:hover { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-6);
  font-size: var(--size-caption);
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

/* ==========================================================================
   Email floating CTA (was WhatsApp — removed 2026-08-17, see CONTEXT.md)
   ========================================================================== */
.float-cta {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: var(--transition-default);
}
.float-cta:hover { background: var(--color-secondary-hover); transform: translateY(-2px); }
.float-cta svg { width: 28px; height: 28px; }

/* ==========================================================================
   Secondary-page hero (About, Services, Contact — lighter than Home's hero)
   ========================================================================== */
.page-hero { padding: var(--space-24) 0 var(--space-16); background: var(--color-bg); }
@media (min-width: 768px) { .page-hero { padding: var(--space-32) 0 var(--space-16); } }
.page-hero__content { max-width: 720px; }
.page-hero h1 { font-size: var(--size-h1); font-weight: 700; line-height: 1.2; }
.page-hero__body {
  font-size: var(--size-body-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-6);
  line-height: 1.75;
}

/* ==========================================================================
   Methodology flow diagram
   ========================================================================== */
.methodology {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .methodology { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
}
.methodology__step {
  position: relative;
  padding: 0 0 var(--space-8) var(--space-8);
  border-left: 3px solid var(--color-accent);
}
.methodology__step:last-child { border-left: 3px solid transparent; padding-bottom: 0; }
@media (min-width: 900px) {
  .methodology__step {
    padding: var(--space-8) var(--space-4) 0 0;
    border-left: none;
    border-top: 3px solid var(--color-accent);
  }
  .methodology__step:last-child { border-top: 3px solid transparent; }
}
/* IMP-11 (2026-08-18): small arrowhead at the end of the sequence — the six
   steps have a direction/destination, not six equal items. */
.methodology__arrow {
  position: absolute;
  left: -10px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  color: var(--color-accent);
  transform: rotate(90deg);
}
@media (min-width: 900px) {
  .methodology__arrow { left: auto; right: -6px; top: -18px; bottom: auto; transform: none; }
}
.methodology--dark .methodology__step { border-color: rgba(255,255,255,0.35); }
.methodology--dark .methodology__arrow { color: rgba(255,255,255,0.85); }
.methodology__number {
  position: absolute;
  left: -15px;
  top: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--size-body-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px) {
  .methodology__number { left: -2px; top: -15px; }
}
.methodology__step h3 { font-size: var(--size-h4); font-weight: 600; margin-bottom: var(--space-2); }
.methodology__step p { font-size: var(--size-body-sm); color: var(--color-text-secondary); line-height: 1.6; }

/* ==========================================================================
   Reusable dark centered proof/text block (About Proof section, etc.)
   ========================================================================== */
.proof-block { max-width: 720px; margin: 0 auto; text-align: center; }
.proof-block p { color: rgba(255,255,255,0.78); font-size: var(--size-body-lg); line-height: 1.75; margin-top: var(--space-4); }

/* ==========================================================================
   Simple centered CTA block (About/Services closing CTA)
   ========================================================================== */
.cta-block { text-align: center; }
.cta-block h2 { margin-bottom: var(--space-8); }

/* ==========================================================================
   System cards (Services page)
   ========================================================================== */
.systems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) { .systems-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }
@media (min-width: 1024px) { .systems-grid { grid-template-columns: repeat(3, 1fr); } }
.system-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: var(--transition-default);
}
.system-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.system-card__icon {
  width: 32px;
  height: 32px;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}
.system-card h3 { font-size: var(--size-h4); font-weight: 600; margin-bottom: var(--space-3); }
.system-card p { font-size: var(--size-body-sm); color: var(--color-text-secondary); line-height: 1.65; }

/* Methodology dark-background variant (Services page "How It Works") */
.methodology--dark .methodology__step h3 { color: #fff; }
.methodology--dark .methodology__step p { color: rgba(255,255,255,0.65); }

/* ==========================================================================
   Contact page — CTA row (email; .mail-link is a reusable text-link style,
   unused since WhatsApp's removal but kept for future secondary-link needs)
   ========================================================================== */
.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn--secondary:hover { background: var(--color-bg); }
.mail-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition: var(--transition-hover);
}
.mail-link:hover { color: var(--color-secondary); border-color: var(--color-secondary); }
.mail-link svg { width: 18px; height: 18px; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form { max-width: 560px; }
.form-field { margin-bottom: var(--space-6); }
.form-label {
  display: block;
  font-size: var(--size-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.form-input,
.form-textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text-primary);
  transition: var(--transition-hover);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(23,105,170,0.15);
}
.form-banner {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
  font-size: var(--size-body-sm);
}
.form-banner--success { background: rgba(30,142,90,0.1); color: var(--color-success); border: 1px solid var(--color-success); }
.form-banner--error { background: rgba(192,57,43,0.1); color: var(--color-error); border: 1px solid var(--color-error); }

/* ==========================================================================
   Archive grids (Blog/Insights, Case Studies)
   ========================================================================== */
.archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
.archive-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-default);
}
.archive-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.archive-card__thumb { aspect-ratio: 16/10; background: var(--color-bg); overflow: hidden; }
.archive-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.archive-card__body { padding: var(--space-6); }
.archive-card__meta { font-size: var(--size-caption); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.archive-card h3 { font-size: var(--size-h4); font-weight: 600; margin-bottom: var(--space-2); }
.archive-card p { font-size: var(--size-body-sm); color: var(--color-text-secondary); line-height: 1.6; }
.archive-empty {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   TEMP content marker (dev-visible only, not a user-facing style)
   ========================================================================== */
[data-temp="true"] { position: relative; }