/* ─────────────────────────────────────────────────────────────────
   Inspiration Theme — Design System (canonical tokens)

   All blocks consume these tokens. To restyle a deployment, override
   the tokens in user/<host>/config/themes/inspiration.yaml header_raw
   (or any deployment-scoped CSS) — every block updates automatically.

   NEVER hard-code colors, fonts, spacing, radii, or shadows in a
   per-block CSS module. Use these tokens.
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,500&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ── Palette — neutrals (always present) ─────────────────── */
  --ds-ink:           #0e0f0c;     /* primary text + dark backgrounds */
  --ds-ink-soft:      #4a4842;     /* secondary text */
  --ds-ink-mute:      #76736a;     /* tertiary text, captions */
  --ds-paper:         #faf6ec;     /* primary breathing surface */
  --ds-paper-2:       #f3ecda;     /* alternating section bg */
  --ds-sand:          #ecdfc1;     /* warmer ivory */
  --ds-cream:         #fff7e3;     /* lightest cream variant */
  --ds-rule:          #d8cfb8;     /* warm divider line on light bg */
  --ds-rule-dark:     rgba(255,255,255,.10);  /* divider on dark bg */
  --ds-steel:         #1d2731;     /* deep neutral charcoal */
  --ds-steel-2:       #2a3641;     /* steel hover/variant */

  /* ── Palette — accent colors (per-deployment overridable) ── */
  --ds-accent:        #b9492a;     /* primary accent (warmth/family) — clay */
  --ds-accent-dk:     #913619;     /* accent darker (hover, deep variants) */
  --ds-cta:           #e36218;     /* CTA color — single conversion accent — ember */
  --ds-cta-dk:        #bb4d0d;     /* CTA hover */
  --ds-trust:         #4d5e3a;     /* trust/guarantee accent — moss */
  --ds-trust-dk:      #3a482b;     /* trust hover */

  /* ── Typography ──────────────────────────────────────────── */
  --ds-font-display:  'Anton', 'Impact', 'Bebas Neue', sans-serif;
  --ds-font-serif:    'Fraunces', 'Source Serif Pro', Georgia, serif;
  --ds-font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --ds-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --ds-fs-display-xl: clamp(2.6rem, 6vw, 5rem);     /* hero titles */
  --ds-fs-display-lg: clamp(2.2rem, 4.5vw, 3.4rem); /* section h2 */
  --ds-fs-display-md: clamp(1.8rem, 3.5vw, 2.6rem); /* sub-titles */
  --ds-fs-display-sm: 1.4rem;                       /* card titles */
  --ds-fs-body-lg:    1.05rem;
  --ds-fs-body:       1rem;
  --ds-fs-body-sm:    0.92rem;
  --ds-fs-eyebrow:    0.72rem;

  /* ── Spacing scale (rem) ─────────────────────────────────── */
  --ds-space-1:  0.25rem;
  --ds-space-2:  0.5rem;
  --ds-space-3:  0.75rem;
  --ds-space-4:  1rem;
  --ds-space-5:  1.5rem;
  --ds-space-6:  2rem;
  --ds-space-7:  3rem;
  --ds-space-8:  4.25rem;   /* default section vertical padding (desktop) */
  --ds-space-9:  6rem;

  /* Section padding (responsive) */
  --ds-section-py-lg: 4.25rem;  /* desktop */
  --ds-section-py-sm: 2.75rem;  /* mobile */

  /* ── Radii ───────────────────────────────────────────────── */
  --ds-radius-sm: 6px;
  --ds-radius:    12px;
  --ds-radius-lg: 20px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --ds-shadow-sm: 0 1px 2px rgba(14,15,12,.06), 0 2px 6px rgba(14,15,12,.04);
  --ds-shadow-md: 0 6px 18px rgba(14,15,12,.08), 0 2px 6px rgba(14,15,12,.05);
  --ds-shadow-lg: 0 24px 60px rgba(14,15,12,.18), 0 8px 18px rgba(14,15,12,.08);
  --ds-shadow-cta:0 10px 24px rgba(227,98,24,.32);

  /* ── Section schemes (computed token aliases) ────────────── */
  /* Default scheme = paper (light, primary surface) */
  --scheme-bg:       var(--ds-paper);
  --scheme-fg:       var(--ds-ink);
  --scheme-fg-soft:  var(--ds-ink-soft);
  --scheme-fg-mute:  var(--ds-ink-mute);
  --scheme-rule:     var(--ds-rule);
  --scheme-card-bg:  #fff;
  --scheme-card-fg:  var(--ds-ink);

  /* Container widths */
  --ds-container-sm: 720px;
  --ds-container-md: 980px;
  --ds-container-lg: 1180px;
  --ds-container-xl: 1320px;
}

/* ── Scheme: paper (default light) ─────────────────────────── */
.scheme-paper, .ds-scheme-paper {
  --scheme-bg: var(--ds-paper);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: paper-2 (alternating ivory) ───────────────────── */
.scheme-paper-2, .ds-scheme-paper-2 {
  --scheme-bg: var(--ds-paper-2);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: sand (warm ivory, feature/form section) ───────── */
.scheme-sand, .ds-scheme-sand {
  --scheme-bg: var(--ds-sand);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: cream (lightest variant) ──────────────────────── */
.scheme-cream, .ds-scheme-cream {
  --scheme-bg: var(--ds-cream);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: steel (deep neutral, photo/process sections) ──── */
.scheme-steel, .ds-scheme-steel, .section.dark.scheme-steel {
  --scheme-bg: var(--ds-steel);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.82);
  --scheme-fg-mute: rgba(255,247,227,.62);
  --scheme-rule: var(--ds-rule-dark);
  --scheme-card-bg: rgba(255,255,255,.04);
  --scheme-card-fg: #fff;
}

/* ── Scheme: ink (final CTA / highest-contrast dark) ───────── */
.scheme-ink, .ds-scheme-ink {
  --scheme-bg: var(--ds-ink);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.85);
  --scheme-fg-mute: rgba(255,247,227,.65);
  --scheme-rule: var(--ds-rule-dark);
  --scheme-card-bg: rgba(255,255,255,.06);
  --scheme-card-fg: #fff;
}

/* ── Scheme: accent (warm color section, e.g. stats) ───────── */
.scheme-accent, .ds-scheme-accent {
  --scheme-bg: var(--ds-accent);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.88);
  --scheme-fg-mute: rgba(255,247,227,.70);
  --scheme-rule: rgba(255,247,227,.20);
  --scheme-card-bg: rgba(255,247,227,.10);
  --scheme-card-fg: #fff;
}

/* ── Scheme: trust (moss green section, guarantees) ─────────── */
.scheme-trust, .ds-scheme-trust {
  --scheme-bg: var(--ds-trust);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.88);
  --scheme-fg-mute: rgba(255,247,227,.70);
  --scheme-rule: rgba(255,247,227,.20);
  --scheme-card-bg: rgba(255,247,227,.10);
  --scheme-card-fg: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   Global type baseline (used by every block)
   ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
  background: var(--ds-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .section-title h1, .section-title h2, .section-title h3 {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: inherit;
}

em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* When em appears inside a display heading, give it the accent color */
.hero-title em,
.section-title h1 em, .section-title h2 em, .section-title h3 em {
  color: var(--ds-accent);
}

/* ─────────────────────────────────────────────────────────────────
   Section primitive (any block extending modular/section.html.twig)
   ──────────────────────────────────────────────────────────── */
.section {
  background: var(--scheme-bg);
  color: var(--scheme-fg);
}
.section.section-lg { padding-top: var(--ds-section-py-lg); padding-bottom: var(--ds-section-py-lg); }
@media (max-width: 768px) {
  .section.section-lg { padding-top: var(--ds-section-py-sm); padding-bottom: var(--ds-section-py-sm); }
}
.section .section-title { margin-bottom: var(--ds-space-6); text-align: center; }
.section .section-title.text-left, .section .section-title.text-lg-left { text-align: left; }
.section .section-subtitle { text-align: center; }
@media (max-width: 768px) { .section .section-title { margin-bottom: var(--ds-space-5); } }
.section .section-title h1, .section .section-title h2, .section .section-title h3 { color: var(--scheme-fg); }
.section .section-subtitle, .section .section-subtitle p { color: var(--scheme-fg-soft); font-family: var(--ds-font-body); }
.section .section-title h2, .section .section-title h1 {
  font-size: var(--ds-fs-display-lg);
  line-height: 1;
  text-transform: uppercase;
}
.section .section-subtitle {
  font-size: var(--ds-fs-body-lg);
  max-width: var(--ds-container-sm);
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────
   Buttons (.btn-primary, .ds-btn)
   ──────────────────────────────────────────────────────────── */
.btn-primary, .ds-btn {
  font-family: var(--ds-font-body);
  font-weight: 700;
  background: var(--ds-cta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 1rem 1.6rem !important;
  font-size: var(--ds-fs-body) !important;
  letter-spacing: 0.005em;
  box-shadow: var(--ds-shadow-cta);
  transition: background .15s, transform .15s, box-shadow .15s;
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  text-decoration: none !important;
}
.btn-primary:hover, .ds-btn:hover {
  background: var(--ds-cta-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(227,98,24,.45);
}

/* Ghost button — outline on dark bg */
.btn-ghost, .ds-btn-ghost {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Card primitive (.ds-card)
   ──────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────
   Eyebrow (small uppercase label)
   ──────────────────────────────────────────────────────────── */
.ds-eyebrow {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-cta);
  padding: 0;
  margin: 0 0 var(--ds-space-3) 0;
}

/* ─────────────────────────────────────────────────────────────────
   Component recipes — UNIFIED across all 64 blocks.
   Per ui-ux-pro-max audit (2026-04-28): block library was "jumping"
   because each block made independent calls on radius / shadow /
   hover / padding / image. These recipes are the single source.

   Block CSS modules MUST consume these via @extend-style composition
   (cascade-layered) rather than defining their own.
   ──────────────────────────────────────────────────────────── */

/* ── Animation timing (one rhythm for the whole library) ─── */
:root {
  --ds-ease:           cubic-bezier(.2,.7,.2,1);
  --ds-ease-out:       cubic-bezier(.2,.8,.2,1);
  --ds-duration-fast:  150ms;
  --ds-duration:       240ms;
  --ds-duration-slow:  360ms;
}

/* ── Card primitive (extends earlier .ds-card) ──────────── */
.ds-card,
.section .card,
.section .ds-card {
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out);
}
.ds-card-interactive:hover,
.section .card:hover {
  transform: translateY(-2px);
  border-color: var(--ds-accent);
  box-shadow: var(--ds-shadow-md);
}
.ds-card .card-body,
.section .card .card-body { padding: var(--ds-space-5); }
@media (max-width: 600px) {
  .ds-card .card-body, .section .card .card-body { padding: var(--ds-space-4); }
}

/* ── Image frame (consistent across all photo treatments) ── */
.ds-image,
.section .card img.img-fluid,
.section .ds-image {
  display: block;
  width: 100%;
  border-radius: var(--ds-radius-sm);
  object-fit: cover;
}
.ds-image-hero { aspect-ratio: 16 / 9; }
.ds-image-card { aspect-ratio: 4 / 3; }
.ds-image-square { aspect-ratio: 1 / 1; }
.ds-image-portrait { aspect-ratio: 3 / 4; }

/* ── Eyebrow label (mono uppercase, used by every block needing one) ── */
.ds-eyebrow,
.section .eyebrow {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-cta);
  margin: 0 0 var(--ds-space-3) 0;
}

/* ── Check list (used by features-list, bulletpoints, cta, why-acme, form pitch) ── */
.ds-checks,
.section .has-list-checked ul,
.has-list-checked ul,
.section .check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ds-space-5) 0;
}
.ds-checks li,
.section .has-list-checked ul li,
.has-list-checked ul li,
.section .check-list li {
  position: relative;
  padding: var(--ds-space-2) 0 var(--ds-space-2) calc(var(--ds-space-5) + .35rem);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.55;
  color: var(--scheme-fg);
}
.ds-checks li::before,
.section .has-list-checked ul li::before,
.has-list-checked ul li::before,
.section .check-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .65rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  margin: 0 !important;
  display: block !important;
  background: var(--ds-trust);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-size: 65% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50%;
}

/* ── Badge / pill (small uppercase indicator) ───────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--ds-cream);
  color: var(--ds-ink);
}
.ds-badge-trust { background: var(--ds-trust); color: var(--ds-cream); }
.ds-badge-cta   { background: var(--ds-cta); color: #fff; }
.ds-badge-accent{ background: var(--ds-accent); color: var(--ds-cream); }

/* ── Icon system (consistent stroke + color treatment) ──── */
.ds-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-icon-lg { width: 1.75rem; height: 1.75rem; }
.ds-icon-xl { width: 2.5rem; height: 2.5rem; }

/* ── Section header alignment helpers ───────────────────── */
.section .section-title.text-left,
.section .section-title.text-lg-left { text-align: left; }
.section .section-title.text-left .section-subtitle,
.section .section-title.text-lg-left + .section-subtitle { text-align: left; margin-left: 0; }

/* ── Focus ring (every interactive element) ─────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-cta);
  outline-offset: 3px;
  border-radius: var(--ds-radius-sm);
}

/* ── Reduce-motion safety ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}