/* responsive-vars.css */
/* =============================================================
   CLAJAMA Responsive Vars — Bootstrap-compatible breakpoints
   Used by: rendered_block() → _get_combined_css()
   Loaded into every built site as the FIRST stylesheet
   ============================================================= */

/* ── Breakpoints (matching Bootstrap 5) ── */
:root {
  --bp-xs: 0;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  /* Container max-widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  /* Spacing scale (1rem = 16px base) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;
  --space-2xl: 6rem;
}

/* ── Responsive Container ── */
/* max() ensures the container fills at least the viewport width on mobile */
/* min() caps the max-width at the container breakpoint on desktop */
.container {
  width: min(100%, 100vw);
  padding-right: var(--space-md, 1rem);
  padding-left: var(--space-md, 1rem);
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
@media (min-width: 576px) {
  .container { max-width: var(--container-sm, 540px); }
}
@media (min-width: 768px) {
  .container { max-width: var(--container-md, 720px); }
}
@media (min-width: 992px) {
  .container { max-width: var(--container-lg, 960px); }
}
@media (min-width: 1200px) {
  .container { max-width: var(--container-xl, 1140px); }
}
@media (min-width: 1400px) {
  .container { max-width: var(--container-xxl, 1320px); }
}

/* ── Responsive Grid ── */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

/* ── Mobile-first grid columns ── */
/* By default, all columns stack vertically on mobile (< 576px) */
[class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; max-width: 100%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; }
}
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; max-width: 100%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; max-width: 100%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}

/* ── Responsive utilities ── */
@media (max-width: 575px) {
  .d-none-mobile { display: none !important; }
  .d-block-mobile { display: block !important; }
  .text-center-mobile { text-align: center !important; }
  .w-100-mobile { width: 100% !important; }
  .flex-column-mobile { flex-direction: column !important; }
  .gap-mobile { gap: var(--space-md, 1rem) !important; }
}

/* ── 360px FORM-FACTOR FLOOR (2026-09-20) ─────────────────────────────
   WHY: this ladder bottoms out at 575px (Bootstrap 5), and nothing in the
   bundle declared anything below 400px. A 360px phone — the smallest form
   factor the platform supports — therefore inherited the 575px layout, which
   is what core/responsive_math.py labels `baseline_breakpoints` improper and
   what the design contract forbids ("COLUMNS 4→1 UNLESS 2-GRID"). Measured
   2026-09-20 over the whole generated-site CSS bundle: distinct max-width
   steps 575/639/640/760/767/900/991 and ZERO rules at or below 400px.

   This file is prepended to EVERY generated site (_get_combined_css,
   core/block_library/renderer.py), and site_base.html always links it, so the
   floor lands on every build — including builds whose per-project vars file is
   empty (renderer returns "" when there are no tokens).

   Selectors are written as attribute matches ([class*="__grid"]) on purpose:
   the BEM grid convention is block-<name>__grid / block-<name>--grid, and
   attribute selectors carry no class token, so the dead-CSS pruner
   (scripts/analyze_dead_css.py → build_unified_css.py) can never drop this
   rule as "unused class".

   Escape hatch: a layout that must stay 2-up at 360px declares its own
   @media (max-width: 360px) rule later in its block stylesheet (later wins at
   equal specificity, and this file is first in the bundle). */
@media (max-width: 360px) {
  [class*="__grid"],
  [class*="--grid"],
  [class*="blog-grid"],
  [class*="pricing-grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [class*="--split"] [class*="inner"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-lg, 1.5rem) !important;
  }
  h1 { font-size: clamp(1.5rem, 8vw, 1.75rem); }
  h2 { font-size: clamp(1.25rem, 7vw, 1.5rem); }
  h3 { font-size: clamp(1.125rem, 6vw, 1.25rem); }
}
@media (min-width: 576px) {
  .d-mobile-only { display: none !important; }
  .d-desktop { display: block !important; }
}

/* ── Fluid images ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Responsive typography ── */
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
p { font-size: clamp(0.875rem, 1.5vw, 1rem); }

/* ── Global: all elements with fixed max-width use min() for safety ── */
div[style*="max-width:"],
section[style*="max-width:"],
header[style*="max-width:"],
main[style*="max-width:"] {
  max-width: min(var(--elem-max-w, 100%), 100vw) !important;
}


/* clajama-blocks-vars.css */
/* ═════════════════════════════════════════════════════════════════════
 * CLAJAMA Block Design Variables — clajama-blocks-vars.css
 * ═════════════════════════════════════════════════════════════════════
 *
 * PURPOSE: Single token layer for ALL rendered client sites and block CSS.
 *          Every block template and every static/css/blocks/*.css file
 *          references these custom properties.
 *
 * SOURCE OF TRUTH: design_system/brands/clajama/tokens.css
 *   - Color / radius / spacing / typography scale values come from there.
 *   - The June 2026 design upgrade extends it with fluid type (clamp()),
 *     depth (glass + shadow), and motion tokens used by block templates.
 *
 * NAMING: Three compatible conventions are aliased to the same values:
 *   1. --color-* / --spacing-* / --typo-*   (canonical, used by block CSS)
 *   2. Short aliases --accent, --bg-surface, --text-primary, --border  (used by templates)
 *   3. OD names --bg, --fg, --surface, --border  (Open Design compatibility)
 *
 * This file is embedded inline into every rendered site by
 * core/block_library/renderer._get_combined_css().
 * ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ────────────────────────────────────────────────
     SURFACE — 3 levels (never pure #000 / #fff)
     ──────────────────────────────────────────────── */
  --bg: #07070B;
  --surface: #0E1018;
  --raised: #13152A;

  --color-base: #07070B;
  --color-surface: #0E1018;
  --color-raised: #13152A;

  /* Short aliases used by templates */
  --base: var(--color-base);
  --bg-surface: var(--color-surface);

  /* ────────────────────────────────────────────────
     FOREGROUND — 4-level ramp
     ──────────────────────────────────────────────── */
  --fg: #D8D9E2;
  --fg-2: rgba(168, 169, 184, 0.75);
  --muted: rgba(168, 169, 184, 0.45);

  --color-text-primary: #D8D9E2;
  --color-text-secondary: rgba(168, 169, 184, 0.75);
    /* text placed ON an image / dark scrim (2026-09-20: was a raw hex in two block sheets) */
    --color-text-on-dark: #fff;
  --color-text-muted: rgba(168, 169, 184, 0.45);

  /* Short aliases used by templates */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);

  /* ────────────────────────────────────────────────
     BORDER — 2 levels
     ──────────────────────────────────────────────── */
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.04);

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);

  /* Short alias used by templates */
  --border-color: var(--color-border);

  /* ────────────────────────────────────────────────
     ACCENT — single brand accent (#7B4DFF purple)
     ──────────────────────────────────────────────── */
  --accent: #7B4DFF;
  --accent-hover: #9C6BFF;
  --accent-active: color-mix(in oklab, var(--accent), black 14%);
  --accent-on: #0f0f0d;
  --color-accent-on: var(--accent-on);  /* canonical alias */   /* FG when accent is the background (button labels) */

  --color-accent: #7B4DFF;
  --color-accent-hover: #9C6BFF;
  --color-accent-tint: rgba(123, 77, 255, 0.08);

  /* ────────────────────────────────────────────────
     SEMANTIC — state colors (<5% of any surface)
     ──────────────────────────────────────────────── */
  --success: #2ecc8a;
  --warn: #F59E0B;
  --danger: #e74c3c;

  --color-status-green: #2ecc8a;
  --color-status-red: #e74c3c;
  --color-status-warn: #F59E0B;

  /* Tinted backgrounds for status chips / alerts */
  --color-status-green-tint: rgba(46, 204, 138, 0.12);
  --color-status-red-tint: rgba(231, 76, 60, 0.12);
  --color-status-warn-tint: rgba(245, 158, 11, 0.12);

  /* ────────────────────────────────────────────────
     TYPOGRAPHY — fonts, fluid scale, leading
     ──────────────────────────────────────────────── */
  --font-display: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --font-family: var(--font-body);

  --font-weight-heading: 200;
  --font-weight-body: 300;
  --font-weight-label: 500;
  --font-heading: var(--font-display);

  /* Fluid type (June 2026 upgrade) — clamp(min, preferred, max) */
  --typo-display-size: clamp(2.75rem, 5.5vw + 1rem, 4rem);      /* 44–64px  */
  --typo-headline-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);      /* 36–56px  */
  --typo-h1-size: clamp(2rem, 3.5vw + 0.75rem, 2.25rem);         /* 32–36px  */
  --typo-h2-size: clamp(1.5rem, 2vw + 0.75rem, 1.625rem);        /* 24–26px  */
  --typo-h3-size: clamp(1.125rem, 1vw + 0.875rem, 1.25rem);      /* 18–20px  */
  --typo-subheadline-size: clamp(1rem, 1vw + 0.875rem, 1.125rem);/* 16–18px  */
  --typo-body-size: clamp(0.9375rem, 0.5vw + 0.8125rem, 1rem);   /* 15–16px  */
  --typo-small-size: 0.8125rem;                                  /* 13px     */
  --typo-meta-size: 0.875rem;                                    /* 14px     */
  --typo-label-size: 0.75rem;                                    /* 12px     */
  --typo-caption-size: 0.625rem;                                 /* 10px     */

  --typo-headline-line-height: 1.1;
  --typo-h1-leading: 1.1;
  --typo-h2-leading: 1.2;
  --typo-h3-leading: 1.3;
  --typo-subheadline-leading: 1.5;
  --typo-body-line-height: 1.7;
  --typo-body-leading: var(--typo-body-line-height);

  --typo-headline-letter-spacing: -0.02em;
  --typo-h1-tracking: -0.02em;
  --typo-h2-tracking: -0.01em;
  --typo-h1-weight: var(--font-weight-heading);
  --typo-h2-weight: var(--font-weight-heading);
  --typo-h3-weight: var(--font-weight-heading);
  --typo-measure: 68ch;

  /* Weight / opacity modifiers (atmosphere system) */
  --weight-headline-weight: var(--font-weight-heading);
  --weight-body-opacity: 0.75;
  --weight-border-width: 1px;
  --weight-border-opacity: 1;
  --weight-surface-opacity: 1;

  /* ────────────────────────────────────────────────
     SPACING — 4px grid + section rhythm
     ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-md: var(--space-4);

  --section-y-desktop: 80px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;

  --spacing-section-padding: var(--section-y-desktop);
  --spacing-section: var(--section-y-desktop);
  --spacing-page: 20px;
  --spacing-block-gap: 40px;
  --spacing-grid: 24px;
  --spacing-lg: 32px;
  --spacing-content-max-width: 1200px;
  --spacing-card-padding: 24px;
  --spacing-element-gap: 16px;
  --spacing-text-max-width: 680px;
  --elem-max-w: 560px;

  /* ────────────────────────────────────────────────
     RADIUS
     ──────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-md2: 12px;
  --radius-lg: 16px;
  --radius-lg2: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;
  /* 8px/14px/50px used widely in blocks → aliases on the scale */
  --radius-8: 8px;
  --radius-14: 14px;
  --radius-round: 50px;

  /* ────────────────────────────────────────────────
     CONTAINER — max-widths
     ──────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-xxl: 1440px;

  /* ────────────────────────────────────────────────
     DEPTH — glass + shadow (June 2026 upgrade)
     ──────────────────────────────────────────────── */
  --depth-shadow-sm: 0 1px 3px color-mix(in oklch, var(--color-base) 30%, transparent);
  --depth-shadow-md: 0 4px 12px color-mix(in oklch, var(--color-base) 20%, transparent);
  --depth-shadow-lg: 0 12px 40px color-mix(in oklch, var(--color-base) 15%, transparent);
  --depth-glass-bg: color-mix(in oklch, var(--color-surface) 60%, transparent);
  --depth-glass-border: color-mix(in oklch, var(--color-border) 50%, transparent);
  --depth-glass-blur: 16px;
  --depth-surface-grad: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    color-mix(in oklch, var(--color-surface) 90%, var(--color-accent)) 100%
  );
  --depth-gradient-accent: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    color-mix(in oklch, var(--color-accent) 60%, var(--color-accent-hover)) 100%
  );
  --depth-bleed-width: 100vw;
  --depth-bleed-offset: 50%;

  /* ────────────────────────────────────────────────
     MOTION — duration + easing (June 2026 upgrade)
     ──────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --motion-hover-duration: var(--motion-base);
  --motion-hover-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-entrance-duration: 500ms;
  --motion-entrance-easing: cubic-bezier(0.2, 0, 0, 1);

  --font-size-display: 64px;
  --font-size-h1: 36px;
  --font-size-h2: 26px;
  --font-size-h3: 20px;
  --font-size-body: 15px;
  --font-size-small: 13px;
  --font-size-label: 10px;
  --font-size-caption: 10px;
  --letter-spacing-display: -0.025em;
  --letter-spacing-h1: -0.02em;
  --letter-spacing-h2: -0.01em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-caption: 0.1em;
  --line-height-body: 1.7;

  /* ────────────────────────────────────────────────
     PULSE SUB-BRAND — light monitoring widget theme
     Scoped tokens for pulse_sidebar / pulse_topbar
     (intentionally light; do NOT map to dark tokens)
     ──────────────────────────────────────────────── */
  --pulse-bg: #FFFFFF;
  --pulse-surface: #F8FAFC;
  --pulse-surface-active: #EEF2FF;
  --pulse-text: #0F172A;
  --pulse-muted: #64748B;
  --pulse-border: #E2E8F0;
  --pulse-accent: #4F46E5;
  --pulse-danger: #DC2626;
}

/* ────────────────────────────────────────────────
   RESPONSIVE SECTION SPACING — wires the section-y
   scale (desktop 80 / tablet 48 / phone 32) into
   --spacing-section-padding so sections scale on
   mobile. Atmosphere/visual-pace overrides (set
   later in the page head) intentionally take
   precedence on desktop.
   ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  :root {
    --spacing-section-padding: var(--section-y-tablet);
    --spacing-section: var(--section-y-tablet);
  }
}
@media (max-width: 767px) {
  :root {
    --spacing-section-padding: var(--section-y-phone);
    --spacing-section: var(--section-y-phone);
  }
}

/* ────────────────────────────────────────────────
   SHARED BLOCK UTILITIES — one class = one pattern.
   Replaces the most repeated inline style blocks in
   the 125 block templates (section wrapper, headings,
   lead/meta text, cards, avatars, CTA buttons).
   Blocks use these classes instead of style="" →
   smaller templates, consistent rendering, and the
   full token scale (typography + spacing + depth).
   ──────────────────────────────────────────────── */
.blk-section {
  padding: var(--spacing-section-padding) 24px;
  max-width: var(--spacing-content-max-width, 1200px);
  margin: 0 auto;
}
.blk-section--narrow {
  max-width: var(--spacing-text-max-width, 680px);
}
.blk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-grid, 24px);
}
.blk-flex-center {
  display: flex;
  align-items: center;
  gap: var(--spacing-element-gap, 16px);
}
.blk-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  padding: 28px 24px;
  transition: transform var(--motion-hover-duration, 0.25s) var(--motion-hover-easing, ease);
}
.blk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-md, none);
}
.blk-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.blk-card-img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.blk-cta {
  display: inline-flex;
  padding: 14px 32px;
  background: var(--accent);
  color: var(--accent-on, #fff);
  border-radius: 8px;
  font-size: var(--typo-body-size);
  font-weight: 600;
  text-decoration: none;
}
.blk-title {
  font-size: var(--typo-h2-size);
  font-weight: var(--typo-h2-weight);
  line-height: var(--typo-h2-leading);
  letter-spacing: var(--typo-h2-tracking);
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.blk-lead {
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-leading);
  color: var(--text-muted);
  margin: 0 0 40px;
}
.blk-meta {
  font-size: var(--typo-label-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.blk-icon {
  font-size: var(--typo-h2-size);
  display: block;
  margin-bottom: 12px;
}

/* ── Hover micro-motion (2026-08-13) — replaces inline onmouseover/onmouseout
   JS in block templates with CSS :hover (design standards Pillar 4: the
   build_validator flags inline JS → builds went needs_review). ── */
.clajama-hover-lift,
.clajama-hover-lift-sm,
.clajama-hover-lift-accent,
.clajama-hover-x,
.clajama-hover-border {
  transition: transform var(--motion-hover-duration, 0.25s) var(--motion-hover-easing, ease),
              box-shadow var(--motion-hover-duration, 0.25s) var(--motion-hover-easing, ease),
              border-color var(--motion-hover-duration, 0.25s) var(--motion-hover-easing, ease);
  will-change: transform, box-shadow;
}
.clajama-hover-lift:hover,
.clajama-hover-lift-accent:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-md, 0 10px 30px rgba(0,0,0,0.25));
}
.clajama-hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--depth-shadow-sm, 0 4px 14px rgba(0,0,0,0.18));
}
.clajama-hover-lift-accent:hover {
  border-color: var(--color-accent, #7B4DFF);
}
.clajama-hover-x:hover {
  transform: translateX(4px);
  border-color: var(--color-accent, #7B4DFF);
}
.clajama-hover-border:hover {
  border-color: var(--color-accent, #7B4DFF);
}

/* clajama-blocks.css */
/* =============================================================
   CLAJAMA Responsive Overrides — inline style fixer
   Forces responsive behavior on blocks with hardcoded px values
   
   Every built site gets this as part of _get_combined_css().
   It overrides common inline pixel values for mobile via CSS
   without modifying the 88 Jinja block templates.
   ============================================================= */

/* ═══════════════════════════════════════════════════════════════════
   NATIVE RESPONSIVE GRID SYSTEM (2026-08-08)
   Class-based grids that collapse WITHOUT !important hacks.
   Templates emit these classes instead of inline grid-template-columns,
   so user design tokens and media queries work natively.
   ═══════════════════════════════════════════════════════════════════ */
.blk-grid {
  display: grid;
  gap: var(--grid-gap, 24px);
}
/* 2026-09-30 (owner: "lets blocks be fluid … look at how we are boxing in our blocks and not
   allowing dynamic growth"). `repeat(N, 1fr)` is NOT fluid: a `1fr` track has an implicit
   min-width of min-content, so ONE wide child (a table, a long unbroken word, an image with an
   intrinsic width, a price row) forces the track wider than its container and the block stops
   growing with the page. `minmax(0, 1fr)` lets the track shrink AND grow. Same for the split
   variants. */
.blk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blk-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 260px)), 1fr)); }
.blk-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min-sm, 200px)), 1fr)); }
.blk-grid--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.blk-grid--split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

/* ── FLUID GROWTH (2026-09-30) ────────────────────────────────────────────────────────────────
   The owner: "they are static … we are boxing in our blocks and not allowing dynamic growth".
   A block grows when nothing forces it wider and nothing clips it taller. These four rules remove
   the causes; the page-level overflow guard stays as a last resort, not as the mechanism. */
.blk-grid > *,
.blk-flex-center > * { min-width: 0; }          /* a grid/flex child may always shrink */
.blk-section,
.blk-section--narrow { width: 100%; }           /* a section never forces a fixed width */
.blk-section p, .blk-section li, .blk-section h1, .blk-section h2, .blk-section h3,
.blk-section h4, .blk-section td, .blk-section th, .blk-section a, .blk-section span {
  overflow-wrap: anywhere;                       /* long words/URLs wrap instead of overflowing */
  word-break: normal;
}
.blk-section img, .blk-section svg, .blk-section video, .blk-section iframe, .blk-section table {
  max-width: 100%;
}
/* Nothing that holds TEXT may clip it. Media wrappers keep their rounded-corner clip. */
.blk-card, .blk-section { overflow: visible; }
[class*="__content"], [class*="__body"], [class*="__text"] { overflow: visible; }

/* Spacing helpers — token-driven, replace inline px on sections/cards */
.blk-sec-pad {
  padding: var(--spacing-section-padding, 80px) var(--spacing-side, 24px);
}
.blk-card {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-6, 24px);
}

/* Tablet: 2-col grids stay 2, 3/4-col collapse to 2 */
@media (min-width: 576px) and (max-width: 991px) {
  .blk-grid--3, .blk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk-grid--split, .blk-grid--split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Mobile: everything stacks */
@media (max-width: 575px) {
  .blk-grid--2, .blk-grid--3, .blk-grid--4,
  .blk-grid--auto, .blk-grid--auto-sm,
  .blk-grid--split, .blk-grid--split-rev {
    grid-template-columns: minmax(0, 1fr);
  }
  .blk-sec-pad { padding: var(--spacing-section-pad-mobile, 48px) var(--spacing-side-mobile, 16px); }
  .blk-card { padding: var(--space-5, 20px) var(--space-4, 16px); }
}

/* ── Responsive Container Override ── */
/* Forces ALL fixed-width containers to never overflow viewport */
@media (max-width: 991px) {
  div[style*="max-width:"],
  div[style*="max-width :"],
  section[style*="max-width:"],
  section[style*="max-width :"],
  header[style*="max-width:"],
  main[style*="max-width:"] {
    max-width: min(100%, 100vw) !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  /* Fix max-width containers - ensure they fill viewport */
  section,
  div[style*="margin: 0 auto"],
  div[style*="margin:0 auto"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Force max-width to never exceed viewport using clamp */
  div[style*="max-width:"],
  section[style*="max-width:"] {
    max-width: min(100%, 100vw) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix full-viewport-width elements */
  .block-bleed,
  section[style*="width: 100vw"],
  section[style*="width:100vw"],
  div[style*="width: 100vw"],
  div[style*="width:100vw"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stack flex rows */
  div[style*="display: flex"],
  div[style*="display:flex"] {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }
  
  /* Keep header inline on mobile */
  .header-inner,
  nav[style*="display: flex"],
  nav[style*="display:flex"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* Stack grid columns -> single column on mobile */
  div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Squash gaps */
  div[style*="gap:"] {
    gap: min(16px, 3vw) !important;
  }

  /* Reduce section padding on mobile */
  section[style*="padding:"],
  div[style*="padding:"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: min(60px, 10vw) !important;
    padding-bottom: min(60px, 10vw) !important;
  }

  /* Force buttons to full width on mobile */
  a[style*="display: inline-flex"],
  button[style*="display: inline-flex"],
  a[style*="display:inline-flex"],
  button[style*="display:inline-flex"] {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ── Extra small devices (<= 575px) ── */
@media (max-width: 575px) {
  /* Make multi-column grids single column */
  div[style*="repeat(auto-fit"],
  div[style*="repeat(auto-fill"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Two-column grids -> stack */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Marquee cards: wider on mobile */
  div[style*="flex: 0 0 300px"],
  div[style*="flex:0 0 300px"] {
    flex: 0 0 85vw !important;
  }

  /* Fix grid-column: span 2 on mobile */
  .block-testimonial-card[style*="grid-column: span 2"],
  .block-testimonial-card[style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }

  /* Fix testimonial offset layout */
  .block-testimonials-offset {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Fix split row layouts */
  .block-split-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Glass card padding on mobile */
  .block-container div[style*="padding:"] {
    padding: 24px 16px !important;
  }
}

/* ── Tablet (576px - 991px) ── */
@media (min-width: 576px) and (max-width: 991px) {
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  div[style*="repeat(auto-fit"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* ── Extra small devices (<= 575px) ── */
@media (max-width: 575px) {
  /* Make testimonial/feature grids single column */
  div[style*="repeat(auto-fit"],
  div[style*="repeat(auto-fill"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Reduce section padding */
  section[style*="padding:"],
  div[style*="padding:"] {
    padding-top: min(60px, 12vw) !important;
    padding-bottom: min(60px, 12vw) !important;
  }

  /* Marquee cards: wider on mobile */
  div[style*="flex: 0 0 300px"] {
    flex: 0 0 85vw !important;
  }

  /* Two-column grids -> stack */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: 1fr 1.5fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Stack header nav */
  .header-inner[style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Fix grid-column: span 2 on mobile */
  .block-testimonial-card[style*="grid-column: span 2"],
  .block-testimonial-card[style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }

  /* Fix testimonial offset layout */
  .block-testimonials-offset {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Fix bleed sections */
  .block-bleed {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Fix split row layouts */
  .block-split-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Fix glass card padding on mobile */
  .block-container div[style*="padding:"],
  .centered-hero div[style*="padding:"] {
    padding: 24px 16px !important;
  }
}

/* ── Tablet (576px - 991px) ── */
@media (min-width: 576px) and (max-width: 991px) {
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns: 1fr 1.5fr"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  /* Half-width on tablets */
  div[style*="repeat(auto-fit"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026 DESIGN UPGRADE — shipped to EVERY built site via _get_combined_css()
   Source of truth: static/css/clajama-app.css (262-372) — keep in sync.
   Fixes: built sites previously received ZERO of these tokens (0/54 audit).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fluid Type Scale (5) ── */
:root {
  --typo-h1-size: clamp(2rem, 5vw + 1rem, 4rem);
  --typo-h1-weight: 700;
  --typo-h1-leading: 1.05;
  --typo-h1-tracking: -0.03em;

  --typo-h2-size: clamp(1.25rem, 3vw + 0.5rem, 2rem);
  --typo-h2-weight: 600;
  --typo-h2-leading: 1.2;

  --typo-h3-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  --typo-h3-weight: 600;

  --typo-body-size: clamp(0.875rem, 0.75vw + 0.75rem, 1.0625rem);
  --typo-body-leading: 1.65;

  --typo-small-size: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem);
}

/* ── Depth & Glass Tokens (derived from 9-value OD palette) ── */
:root {
  --depth-shadow-sm: 0 1px 3px color-mix(in oklch, var(--color-base) 30%, transparent);
  --depth-shadow-md: 0 4px 12px color-mix(in oklch, var(--color-base) 20%, transparent);
  --depth-shadow-lg: 0 12px 40px color-mix(in oklch, var(--color-base) 15%, transparent);

  --depth-glass-bg: color-mix(in oklch, var(--color-surface) 60%, transparent);
  --depth-glass-border: color-mix(in oklch, var(--color-border) 50%, transparent);
  --depth-glass-blur: 12px;

  --depth-accent-glow: 0 0 20px color-mix(in oklch, var(--color-accent) 25%, transparent);
  --depth-surface-grad: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    color-mix(in oklch, var(--color-surface) 90%, var(--color-accent)) 100%
  );

  --depth-bleed-width: 100vw;
  --depth-bleed-offset: calc(-1 * (var(--depth-bleed-width) - min(var(--depth-bleed-width), 1200px)) / 2);
}

/* ── Motion & Transition Tokens ── */
:root {
  --motion-entrance-duration: 0.6s;
  --motion-entrance-delay: 0.15s;
  --motion-entrance-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-hover-duration: 0.2s;
  --motion-hover-easing: ease;
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Entrance Animation Keyframes ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slide-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Reveal Classes (toggled by IntersectionObserver in site_base.html) ── */
.reveal { opacity: 0; }
.reveal.visible {
  animation: fade-up var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-scale.visible {
  animation: scale-in var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-left.visible {
  animation: slide-left var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-right.visible {
  animation: slide-right var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal:nth-child(1) { animation-delay: 0s; }
.reveal:nth-child(2) { animation-delay: 0.1s; }
.reveal:nth-child(3) { animation-delay: 0.2s; }
.reveal:nth-child(4) { animation-delay: 0.3s; }
.reveal:nth-child(5) { animation-delay: 0.4s; }
.reveal:nth-child(6) { animation-delay: 0.5s; }

/* ── Short aliases + completeness tokens (audit: 54 used, 0 defined) ── */
:root {
  --base: var(--color-base, #07070B);
  --surface: var(--color-surface, #0E1018);
  --raised: var(--color-raised, #13152A);
  --border: var(--color-border, rgba(255, 255, 255, 0.10));
  --accent: var(--color-accent, #7B4DFF);
  --text-primary: var(--color-text-primary, #FFFFFF);
  --text-secondary: var(--color-text-secondary, rgba(255, 255, 255, 0.65));
  --text-muted: var(--color-text-muted, rgba(255, 255, 255, 0.45));
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --spacing-grid: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-section: clamp(3rem, 8vw, 5.5rem);
  --spacing-page: clamp(1rem, 4vw, 2rem);
  --spacing-block-gap: 2rem;
  --spacing-section-padding: clamp(3rem, 8vw, 5.5rem);
  --typo-subheadline-size: clamp(0.875rem, 0.75vw + 0.75rem, 1rem);
  --typo-subheadline-leading: 1.6;
  --color-status-green-tint: color-mix(in oklch, var(--color-status-green, #22C55E) 12%, transparent);
  --color-status-red-tint: color-mix(in oklch, var(--color-status-red, #EF4444) 12%, transparent);
  --color-status-warn-tint: color-mix(in oklch, var(--color-status-warn, #F59E0B) 12%, transparent);
}

/* ── Spacing scale (stack.html uses var(--spacing-{{ gap }})) + border-subtle ── */
:root {
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 2rem;
  --spacing-6: 2.5rem;
  --spacing-8: 3.5rem;
  --color-border-subtle: color-mix(in oklch, var(--color-border, rgba(255, 255, 255, 0.10)) 60%, transparent);
}

/* announcement_bar.css */
/* ── CLAJAMA Block: announcement_bar ── */
/* Variants: dismissible, rotating, static */
.block-announcement {
  width: 100%;
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  font-size:var(--typo-small-size);
  line-height: 1.6;
  color: var(--color-base);
  transition: background 0.2s ease, color 0.2s ease;
}
.block-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.block-announcement__text {
  color: inherit;
  font-weight: var(--font-weight-body);
}
.block-announcement__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-weight-body);
  transition: opacity 0.2s ease;
}
.block-announcement__link:hover {
  opacity: 0.7;
}
.block-announcement__close {
  background: none;
  border: none;
  color: inherit;
  font-size:var(--typo-h3-size);
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.block-announcement__close:hover {
  opacity: 1;
}
/* ── static variant ── */
.block-announcement--static {
  cursor: default;
}
/* ── rotating variant ── */
.block-announcement--rotating .block-announcement__text {
  animation: none;
}
@media (max-width: 639px) {
  .block-announcement__inner {
    padding: 6px 12px;
    flex-wrap: wrap;
    text-align: center;
  }
}

/* before_after.css */
/* ── CLAJAMA Block: before_after ── */
/* Before/after comparison — tokens only. */
.before-after{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;max-width:900px;margin:0 auto}
.before-col,.after-col{border-radius:var(--radius-lg);overflow:hidden;position:relative}
.before-col img,.after-col img{width:100%;height:auto;display:block;object-fit:cover}
.before-col::before,.after-col::after{
  position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:var(--radius-sm);
  font-size:var(--typo-meta-size);font-weight:600;background:rgba(0,0,0,.55);color:var(--color-text-on-dark);
}
.before-col::before{content:"Before"}
.after-col::after{content:"After";left:auto;right:10px}
.arrow{font-size:28px;color:var(--accent);text-align:center}
@media (max-width:640px){.before-after{grid-template-columns:minmax(0, 1fr);gap:10px}.arrow{transform:rotate(90deg)}}

/* blog.css */
/* ── BLOCK: blog ──────────────────────────────────────── */
/* VARIANTS: grid, list, featured                          */
/* Restored from archive (was missing from runtime CSS —   */
/* blog rendered UNSTYLED on client sites). Classes match  */
/* the current blog.html template exactly.                 */

.block-blog {
  padding: var(--spacing-section-padding) 24px;
}
.blog-section-header {
  text-align: center;
  margin-bottom: 40px;
}
.blog-section-header .section-heading {
  font-size: var(--typo-h2-size);
  font-weight: var(--typo-h2-weight);
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

/* ── Grid variant ── */
.block-blog.variant-grid .blog-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-md, 0 12px 32px rgba(0,0,0,0.3));
}
.card-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-border);
}
.blog-card .card-image {
  border-bottom: 1px solid var(--color-border);
}
.blog-card .post-category,
.blog-featured-post .post-category {
  display: inline-block;
  font-size:var(--typo-caption-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 16px 16px 0;
}
.blog-card h3,
.blog-card h4 {
  font-size:var(--typo-h3-size);
  font-weight: var(--weight-headline-weight, 600);
  color: var(--color-text-primary);
  margin: 8px 16px;
  line-height: 1.3;
}
.blog-card h3 a,
.blog-card h4 a {
  color: inherit;
  text-decoration: none;
}
.blog-card h3 a:hover,
.blog-card h4 a:hover {
  color: var(--color-accent);
}
.post-excerpt {
  font-size: var(--typo-meta-size);
  color: var(--text-muted, var(--color-text-secondary));
  line-height: 1.6;
  margin: 0 16px 12px;
  flex: 1;
}
.post-meta {
  display: flex;
  gap: 12px;
  font-size: var(--typo-label-size);
  color: var(--text-muted, var(--color-text-muted));
  padding: 0 16px 16px;
  margin-top: auto;
}
.post-date,
.post-author {
  color: var(--text-muted, var(--color-text-muted));
}

/* ── Featured variant ── */
.blog-featured-post {
  max-width: 1100px;
  margin: 0 auto 48px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.featured-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

/* 2026-08-24 (mobile columns): featured post stacks on phones. */
@media (max-width: 639px) {
  .featured-content { grid-template-columns: minmax(0, 1fr); }
}
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-text {
  padding: 32px;
}
.featured-text h3 {
  font-size:var(--typo-h2-size);
  font-weight: var(--weight-headline-weight, 600);
  color: var(--color-text-primary);
  margin: 8px 0 12px;
  line-height: 1.25;
}
.featured-text h3 a {
  color: inherit;
  text-decoration: none;
}
.featured-text h3 a:hover {
  color: var(--color-accent);
}
.featured-text .post-excerpt {
  margin: 0 0 16px;
  padding: 0;
}

/* ── List variant ── */
.blog-list {
  max-width: 800px;
  margin: 0 auto;
}
.blog-list-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
.blog-list-item:last-child {
  border-bottom: none;
}
.list-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  display: block;
}
.list-text .post-category {
  font-size:var(--typo-caption-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.list-text h3 {
  font-size:var(--typo-h3-size);
  font-weight: var(--weight-headline-weight, 600);
  color: var(--color-text-primary);
  margin: 6px 0 8px;
}
.list-text h3 a {
  color: inherit;
  text-decoration: none;
}
.list-text h3 a:hover {
  color: var(--color-accent);
}
.list-text .post-meta {
  padding: 8px 0 0;
}

/* ── Pagination (blog-pagination) ── */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px 0 0;
}
.pagination-prev,
.pagination-next,
.pagination-info {
  font-size: var(--typo-meta-size);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 8px);
}
.pagination-prev:hover,
.pagination-next:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

@media (max-width: 767px) {
  .blog-featured-post {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-list-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* breadcrumbs.css */
.block-breadcrumbs { padding: 0.75rem 0; }
.block-breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.block-breadcrumbs__item { display: flex; align-items: center; gap: 0.5rem; font-size:var(--typo-small-size); }
.block-breadcrumbs__link { color: var(--color-accent); text-decoration: none; }
.block-breadcrumbs__link:hover { text-decoration: underline; }
.block-breadcrumbs__current { color: var(--color-text-secondary); }
.block-breadcrumbs__sep { color: var(--color-text-muted); }

@media (max-width: 640px) {
  .block-breadcrumbs { padding: 0.5rem 0; }
  .block-breadcrumbs__item { font-size: var(--typo-label-size); }
}

@media (max-width: 640px) {
  .block-breadcrumbs { padding: 0.5rem 0; }
  .block-breadcrumbs__item { font-size: var(--typo-label-size); }
}
/* cards_grid.css */
/* ── CLAJAMA Block: cards_grid ── */
/* Variants: 2-col, 3-col, 4-col, masonry */
.block-cards {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.block-cards__title {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.block-cards__grid {
  display: grid;
  gap: 16px;
}
.block-cards--2-col .block-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-cards--3-col .block-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-cards--4-col .block-cards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.block-cards--masonry .block-cards__grid {
  columns: 3;
  column-gap: 16px;
}
.block-cards--masonry .block-cards__card {
  break-inside: avoid;
  margin-bottom: 16px;
}
.block-cards__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.block-cards__card:hover {
  background: var(--color-raised);
}
.block-cards__icon {
  font-size: var(--typo-h2-size);
  margin-bottom: 12px;
  color: var(--color-text-primary);
}
.block-cards__card-title {
  font-size:var(--typo-body-size);
  font-weight: var(--font-weight-label);
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.block-cards__card-body {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  margin: 0 0 12px;
  line-height: 1.6;
}
.block-cards__card-link {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-accent);
  text-decoration: none;
  margin-top: auto;
  transition: opacity 0.2s ease;
}
.block-cards__card-link:hover {
  opacity: 0.8;
}
@media (max-width: 639px) {
  .block-cards--3-col .block-cards__grid,
  .block-cards--4-col .block-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-cards--masonry .block-cards__grid { columns: 2; }
}
@media (max-width: 639px) {
  .block-cards--2-col .block-cards__grid,
  .block-cards--3-col .block-cards__grid,
  .block-cards--4-col .block-cards__grid { grid-template-columns: minmax(0, 1fr); }
  .block-cards--masonry .block-cards__grid { columns: 1; }
  .block-cards { padding: 40px 16px; }
}

/* centered_hero.css */
/* ── BLOCK: centered_hero ─────────────────────────────── */
/* VARIANTS: default, glass, bleed, split_right             */
/* Uses native .blk-grid system — responsive, customizable. */

.centered-hero {
  font-family: var(--font-family, inherit);
}

.centered-hero .blk-grid--split {
  align-items: center;
}

.centered-hero img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Split-right hero: image fills its column nicely */
.centered-hero .blk-grid--split > div:last-child img {
  width: 100%;
  object-fit: cover;
}

/* Glass variant inner card already uses --depth-* tokens in template */

/* ── VARIANT LAYOUTS (data-driven — 2026-08-16) ──
   Modifier classes from core/block_library/variant_presets.py. */
.centered-hero .blk-hero-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--depth-shadow-sm);
}
.centered-hero--glass .blk-hero-inner {
  background: var(--depth-glass-bg);
  backdrop-filter: blur(var(--depth-glass-blur));
  border: 1px solid var(--depth-glass-border);
  box-shadow: var(--depth-shadow-lg);
}
.centered-hero--bleed {
  max-width: none !important;
  padding: 140px 24px;
  background: var(--depth-surface-grad);
}
.centered-hero--bleed .blk-hero-inner {
  background: none;
  border: none;
  box-shadow: none;
}
.centered-hero--split-right .blk-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  text-align: left;
}

/* 2026-08-24 (mobile columns): split-right hero stacks on phones. */
@media (max-width: 639px) {
  .centered-hero--split-right .blk-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    text-align: center;
  }
}
.centered-hero--split-right .blk-hero-inner .blk-hero-media {
  background: var(--depth-glass-bg);
  backdrop-filter: blur(var(--depth-glass-blur));
  border: 1px solid var(--depth-glass-border);
  border-radius: var(--radius-xl);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--typo-display-size);
}

/* contact_form.css */
/* BLOCK: contact_form */
.block-contact-form { padding: var(--spacing-section-padding) 0; }
.contact-form-inner { max-width: 560px; margin: 0 auto; }
.contact-form-header { text-align: center; margin-bottom: 40px; }
.section-heading { font-size:var(--typo-headline-size); font-weight: 400; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0 0 12px; }
.contact-form-text { font-size:var(--typo-body-size); font-weight: 400; line-height: 1.7; color: var(--color-text-secondary); margin: 0; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; background: var(--color-raised); border: 1px solid var(--color-border); color: var(--color-text-primary); font-family: var(--font-family); font-size:var(--typo-body-size); font-weight: 400; outline: none; box-sizing: border-box; }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--color-accent); }
.form-group select { appearance: none; cursor: pointer; }
.form-submit { padding: 14px 32px; background: var(--color-accent); color: var(--accent-on, #ffffff); border: none; font-family: var(--font-family); font-size:var(--typo-body-size); font-weight: 400; cursor: pointer; letter-spacing: 0.06em; margin-top: 8px; }
.form-submit:hover { opacity: 0.9; }

@media (max-width: 640px) {
  .block-contact-form { padding: 48px 16px; }
  .section-heading { font-size: var(--typo-h2-size); }
  .contact-form-text { font-size: var(--typo-meta-size); }
  .form-group input, .form-group textarea, .form-group select { padding: 12px 14px; font-size: var(--typo-meta-size); }
  .form-submit { width: 100%; padding: 14px 20px; }
}

@media (max-width: 640px) {
  .block-contact-form { padding: 48px 16px; }
  .section-heading { font-size: var(--typo-h2-size); }
  .contact-form-text { font-size: var(--typo-meta-size); }
  .form-group input, .form-group textarea, .form-group select { padding: 12px 14px; font-size: var(--typo-meta-size); }
  .form-submit { width: 100%; padding: 14px 20px; }
}

/* cta_banner.css */
/* ── CLAJAMA Block: cta_banner ── */
/* Variants: centered, split, with_form */
.block-cta {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 20px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.block-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.block-cta__headline {
  font-size:var(--typo-headline-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.block-cta__body {
  font-size:var(--typo-body-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  line-height: 1.7;
}
.block-cta__action {
  margin-bottom: 0;
}
.block-cta__button,
.block-cta__submit {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-base);
  border: none;
  padding: 12px 28px;
  font-size: var(--typo-meta-size);
  font-weight: var(--font-weight-label);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.block-cta__button:hover,
.block-cta__submit:hover {
  opacity: 0.85;
}
/* ── split variant ── */
.block-cta--split .block-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  text-align: left;
  align-items: center;
}
.block-cta--split .block-cta__action {
  text-align: right;
}
/* ── with_form variant ── */
.block-cta--with_form .block-cta__form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 20px auto 0;
}
.block-cta__input {
  flex: 1;
  background: var(--color-raised);
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  font-size: var(--typo-meta-size);
  font-weight: var(--font-weight-body);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
}
.block-cta__input:focus {
  border-color: var(--color-accent);
}
@media (max-width: 639px) {
  .block-cta--split .block-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .block-cta--split .block-cta__action { text-align: center; }
}
@media (max-width: 639px) {
  .block-cta { padding: var(--spacing-section-padding) 16px; }
  .block-cta__headline { font-size:var(--typo-h2-size); }
}

/* Glass + bleed variants (2026) — base sizing; visual depth
   is inline (--depth-* tokens). Variant classes exist so the
   section always has consistent rhythm. */
.block-cta--glass {
  padding: var(--spacing-section-padding) 24px;
}
.block-cta--bleed {
  padding: 140px 24px;
  position: relative;
  overflow: hidden;
}

/* ── VARIANT LAYOUTS (data-driven — 2026-08-16) ── */
.block-cta .blk-cta-inner {
  max-width: 700px;
}
.block-cta--split .blk-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  text-align: left;
  max-width: 1000px;
  background: var(--depth-surface-grad);
  border-radius: 20px;
  padding: 48px;
}
.block-cta--glass .blk-cta-inner {
  text-align: center;
  background: var(--depth-glass-bg);
  backdrop-filter: blur(var(--depth-glass-blur));
  border: 1px solid var(--depth-glass-border);
  border-radius: 24px;
  padding: 56px 40px;
  box-shadow: var(--depth-shadow-md);
  max-width: 800px;
}
.block-cta--bleed {
  padding: var(--spacing-section-padding) 24px;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: var(--depth-bleed-offset);
  background: var(--depth-surface-grad);
}

/* dashboard.css */
.dashboard-panel {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.dashboard-panel__title {
  font-size:var(--typo-body-size);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}
.dashboard-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.dashboard-panel__metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dashboard-panel__metric-label {
  font-size:var(--typo-caption-size);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.dashboard-panel__metric-value {
  font-size: var(--typo-h3-size);
  font-weight: 400;
  color: var(--color-text-primary);
}
.dashboard-panel__metric-unit {
  font-size:var(--typo-small-size);
  color: var(--color-text-secondary);
  margin-left: 2px;
}
.dashboard-panel__metric-trend {
  font-size: var(--typo-caption-size);
  font-weight: 400;
}
@media (max-width: 640px) {
  .dashboard-panel { padding: 16px; }
  .dashboard-panel__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .dashboard-panel__metric-value { font-size:var(--typo-h3-size); }
}
{# AGENT: backend | 2026-05-13 | Created for health compliance platform build #}

@media (max-width: 640px) {
  .dashboard-panel { padding: 16px; }
  .dashboard-panel__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .dashboard-panel__metric-value { font-size:var(--typo-h3-size); }
}

/* faq.css */
/* ── CLAJAMA Block: faq ── */
/* Variants: single-open, multi-open, with_search */
.block-faq {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 20px;
  max-width: 740px;
  margin: 0 auto;
}
.block-faq__title {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.block-faq__search {
  width: 100%;
  background: var(--color-raised);
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  font-size: var(--typo-meta-size);
  font-weight: var(--font-weight-body);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  margin-bottom: 20px;
  outline: none;
  transition: border-color 0.2s ease;
}
.block-faq__search:focus {
  border-color: var(--color-accent);
}
.block-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.block-faq__item {
  border-bottom: 1px solid var(--color-border);
}
.block-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  font-size:var(--typo-body-size);
  font-weight: var(--font-weight-body);
  font-family: var(--font-family);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.block-faq__question:hover {
  color: var(--color-accent);
}
.block-faq__chevron {
  font-size:var(--typo-h3-size);
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.block-faq__question:hover .block-faq__chevron {
  color: var(--color-accent);
}
.block-faq__answer {
  padding: 0 0 16px;
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.block-faq__answer p {
  margin: 0;
}
@media (max-width: 639px) {
  .block-faq { padding: 40px 16px; }
}

/* feature_grid.css */
/* ── BLOCK: feature_grid ──────────────────────────────── */
/* VARIANTS: 2-col, 3-col, 4-col, cards-alt, offset, overlap */
/* Rewritten to match template classes (.block-features /   */
/* .block-feature-card) — the old .feature-grid__* classes  */
/* were never emitted by the template (dead CSS).           */

.block-features {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.block-features > h2 {
  text-align: center;
}

.block-features__grid,
.block-features .block-features__grid {
  display: grid;
  gap: 24px;
}
.block-features.variant-2-col .block-features__grid,
.block-features--2-col .block-features__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.block-features.variant-3-col .block-features__grid,
.block-features--3-col .block-features__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.block-features.variant-4-col .block-features__grid,
.block-features--4-col .block-features__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Fallback: template emits <div style="display:grid..."> — these rules
   cover the card styling that has no inline equivalent. */
.block-feature-card {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius:var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--depth-shadow-sm, none);
}

@media (max-width: 767px) {
  .block-features__grid,
  .block-features.variant-2-col .block-features__grid,
  .block-features.variant-3-col .block-features__grid,
  .block-features.variant-4-col .block-features__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── VARIANT LAYOUTS (data-driven — 2026-08-16) ── */
.blk-features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
.block-features .block-feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--depth-shadow-sm);
}
.block-features--offset .blk-features-container {
  gap: 24px;
}
.block-features--offset .block-feature-card:first-child {
  grid-column: span 2;
  background: var(--depth-glass-bg);
  backdrop-filter: blur(var(--depth-glass-blur));
  border: 1px solid var(--depth-glass-border);
}
.block-features--overlap .blk-features-container {
  margin-top: -40px;
}
.block-features--overlap .block-feature-card:first-child { margin-top: 40px; }
.block-features--overlap .block-feature-card:last-child { margin-top: 80px; }
.block-features--cards-alt .block-feature-card:nth-child(even) {
  border-color: var(--color-accent);
}
.block-features--2-col .blk-features-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-features--3-col .blk-features-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-features--4-col .blk-features-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .block-features--2-col .blk-features-container,
  .block-features--3-col .blk-features-container,
  .block-features--4-col .blk-features-container { grid-template-columns: minmax(0, 1fr); }
}

/* footer.css */
/* ── CLAJAMA Block: footer ── */
/* Variants: simple, columns, with_newsletter */
.block-footer {
  font-family: var(--font-family);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-section-padding) 20px 40px;
}
.block-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.block-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
.block-footer__column-title {
  font-size: var(--typo-caption-size);
  font-weight: var(--font-weight-label);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.block-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.block-footer__link {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.block-footer__link:hover {
  color: var(--color-text-primary);
}
/* ── SOCIAL menu — a SEPARATE layout from the menu columns (2026-08-21
   CLAJAMA design system: footer MENU + SOCIAL menu are two different
   layouts). Menu = plain text-link columns; Social = inline row of pill
   chips that wraps and centers on mobile. Never style them identically. ── */
.block-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.block-footer__social-link {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.block-footer__social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.block-footer__legal {
  font-size: var(--typo-caption-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
}
/* ── with_newsletter variant ── */
.block-footer__newsletter {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.block-footer__newsletter-title {
  font-size:var(--typo-body-size);
  font-weight: var(--font-weight-label);
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.block-footer__newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 400px;
}
.block-footer__newsletter-input {
  flex: 1;
  background: var(--color-raised);
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  font-size:var(--typo-small-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.2s ease;
}
.block-footer__newsletter-input:focus {
  border-color: var(--color-accent);
}
.block-footer__newsletter-btn {
  background: var(--color-accent);
  color: var(--color-base);
  border: none;
  padding: 10px 18px;
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-label);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.block-footer__newsletter-btn:hover {
  opacity: 0.85;
}
/* ── simple variant ── */
.block-footer--simple .block-footer__columns {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}
@media (max-width: 639px) {
  .block-footer { padding: 40px 16px 30px; }
  .block-footer__columns { grid-template-columns: minmax(0, 1fr); }
  /* 2026-08-21: social menu wraps + centers on mobile — it is a distinct
     layout from the stacked menu columns. */
  .block-footer__social { justify-content: center; gap: 10px; }
  /* Mountain Goats review 2026-08-20: the "All rights reserved" legal bar
     rendered at 10px caption on mobile — bump for legibility + wrap. */
  .block-footer__legal { font-size: 12px; line-height: 1.6; }
}

/* Per-column wrapper (was missing) + variant classes */
.block-footer__column {
  min-width: 0;
}
.block-footer--columns .block-footer__columns {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.block-footer--with-newsletter .block-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* form.css */
/* ── BLOCK: form ──────────────────────────────────────── */
/* VARIANTS: default, centered, compact                    */
/* Rewritten to match template classes (.block-form,       */
/* .form-group, .form-header, etc.) — old .form-block__*   */
/* classes were dead CSS.                                  */

.block-form {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 24px;
}
.block-form .container {
  max-width: 640px;
  margin: 0 auto;
}
.form-inner {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, 16px);
  padding: 40px;
}
.form-header {
  margin-bottom: 28px;
  text-align: center;
}
.form-header .section-heading {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.form-text {
  font-size: var(--typo-meta-size);
  color: var(--color-text-muted, var(--text-muted));
  margin: 0;
}
.block-form-element {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size:var(--typo-small-size);
  font-weight: 500;
  color: var(--color-text-secondary, var(--text-secondary));
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-raised, var(--raised));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-sm, 8px);
  color: var(--color-text-primary, var(--text-primary));
  font-family: var(--font-family);
  font-size:var(--typo-body-size);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-accent, var(--accent));
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted, var(--text-muted));
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--typo-meta-size);
  color: var(--color-text-secondary, var(--text-secondary));
  cursor: pointer;
}
.form-submit {
  padding: 14px 28px;
  background: var(--color-accent, var(--accent));
  color: var(--accent-on, #fff);
  border: none;
  border-radius: var(--radius-sm, 8px);
  font-size:var(--typo-body-size);
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}
.form-submit:hover {
  opacity: 0.9;
}

.block-form.variant-centered .form-inner {
  margin: 0 auto;
}
.block-form.variant-compact .form-inner {
  padding: 24px;
}

/* gallery.css */
/* ── CLAJAMA Block: gallery ── */
/* Variants: grid, masonry, carousel */
.block-gallery {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.block-gallery__title {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.block-gallery__grid {
  display: grid;
  gap: 8px;
}
.block-gallery--grid .block-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.block-gallery--masonry .block-gallery__grid {
  columns: 3;
  column-gap: 8px;
}
.block-gallery--masonry .block-gallery__item {
  break-inside: avoid;
  margin-bottom: 8px;
}
.block-gallery__item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.block-gallery__image {
  width: 100%;
  display: block;
  transition: opacity 0.2s ease;
}
.block-gallery__image:hover {
  opacity: 0.85;
}
.block-gallery__caption {
  font-size: var(--typo-caption-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-muted);
  margin: 6px 0 0;
  text-align: center;
}
/* ── lightbox overlay ── */
.block-gallery__lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-base);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}
/* ── carousel variant ── */
.block-gallery--carousel .block-gallery__grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0;
}
.block-gallery--carousel .block-gallery__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
@media (max-width: 639px) {
  .block-gallery--grid .block-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-gallery--masonry .block-gallery__grid { columns: 2; }
}
@media (max-width: 639px) {
  .block-gallery--grid .block-gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .block-gallery--masonry .block-gallery__grid { columns: 1; }
  .block-gallery { padding: 40px 16px; }
}

/* header.css */
/* ── CLAJAMA Block: header ── */
/* Variants: sticky, transparent, solid, minimal */
.block-header {
  font-family: var(--font-family);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.block-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
}
.block-header__logo {
  font-size:var(--typo-h3-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.block-header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.block-header__link {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.block-header__link:hover {
  color: var(--color-text-primary);
}
.block-header__cta {
  background: var(--color-accent);
  color: var(--color-base);
  padding: 8px 18px;
  font-size: var(--typo-label-size);
  font-weight: var(--font-weight-label);
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.block-header__cta:hover {
  opacity: 0.85;
}
.block-header__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.block-header__hamburger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-text-primary);
  margin: 4px 0;
}
.block-header__mobile {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.block-header__mobile-inner {
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  gap: 10px;
}
.block-header__mobile-link {
  font-size: var(--typo-meta-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 6px 0;
}
.block-header__mobile-cta {
  background: var(--color-accent);
  color: var(--color-base);
  text-align: center;
  padding: 10px;
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-label);
  text-decoration: none;
  margin-top: 4px;
}
/* ── sticky variant ── */
.block-header--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* ── transparent variant ── */
.block-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
  position: absolute;
  width: 100%;
  z-index: 100;
}
/* ── minimal variant ── */
.block-header--minimal .block-header__nav {
  display: none;
}
@media (max-width: 639px) {
  .block-header__nav,
  .block-header__cta { display: none; }
  .block-header__hamburger { display: block; }
}

/* hero.css */
/* ── CLAJAMA Block: hero ── */
/* Variants: centered, split, fullscreen, minimal, with_image, with_video */
.block-hero {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.block-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.block-hero__content {
  max-width: 680px;
  text-align: center;
}
.block-hero__badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 9999px;
  border: 1px solid var(--color-border, #2a2a3a);
  color: var(--color-accent);
  background: var(--color-surface, rgba(15, 15, 25, 0.5));
  margin-bottom: 1.5rem;
}

.block-hero__headline {
  font-size: var(--typo-display-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  margin: 0 0 16px;
  letter-spacing: -0.025em;
  line-height: 1.0;
}
.block-hero__subheadline {
  font-size:var(--typo-h3-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  line-height: 1.6;
}
.block-hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.block-hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-base);
  padding: 12px 28px;
  font-size: var(--typo-meta-size);
  font-weight: var(--font-weight-label);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.block-hero__cta:hover {
  opacity: 0.85;
}
.block-hero__secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: 12px 28px;
  font-size: var(--typo-meta-size);
  font-weight: var(--font-weight-body);
  text-decoration: none;
  transition: background 0.2s ease;
}
.block-hero__secondary:hover {
  background: var(--color-accent-tint);
}
.block-hero__image {
  width: 100%;
  /* 2026-09-30: `max-width:639px` alone let the media panel overflow a phone viewport —
     the responsive-math gate measured `320px over=620 (img.block-hero__image)` on elb v12,
     because a flex item defaults to min-width:auto and refuses to shrink below the image's
     max-width. min(639px,100%) + min-width:0 on the panel keeps the desktop ceiling and the
     phone gutter. */
  max-width: min(639px, 100%);
  height: auto;
  display: block;
}
.block-hero__video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
  max-width: 639px;
}
.block-hero__video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
/* ── split variant ── */
.block-hero--split .block-hero__inner {
  flex-direction: row;
  align-items: center;
}
.block-hero--split .block-hero__content {
  text-align: left;
  flex: 1;
}
.block-hero--split .block-hero__actions {
  justify-content: flex-start;
}
.block-hero--split .block-hero__media {
  flex: 1;
  /* a flex item is min-width:auto by default — without this the hero image cannot shrink
     and pushes the whole page wider than a phone screen (measured 2026-09-30). */
  min-width: 0;
}
/* ── fullscreen variant ── */
.block-hero--fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── minimal variant ── */
.block-hero--minimal {
  padding: var(--spacing-section-padding) 20px;
}
.block-hero--minimal .block-hero__headline {
  font-size:var(--typo-headline-size);
}
.block-hero--minimal .block-hero__subheadline {
  display: none;
}
@media (max-width: 639px) {
  .block-hero--split .block-hero__inner { flex-direction: column; }
  .block-hero--split .block-hero__content { text-align: center; }
  .block-hero--split .block-hero__actions { justify-content: center; }
  .block-hero__headline { font-size:var(--typo-headline-size); }
}
@media (max-width: 639px) {
  .block-hero { padding: var(--spacing-section-padding) 16px; }
  .block-hero__headline { font-size: var(--typo-h2-size); }
}

/* logo_strip.css */
.block-logos { padding: 3rem 0; text-align: center; }
.block-logos__title { font-size: var(--typo-caption-size); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.block-logos__strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; }
.block-logos__item { opacity: 0.35; transition: opacity 0.2s; }
.block-logos__item:hover { opacity: 0.6; }
.block-logos__image { max-height: 32px; width: auto; }

@media (max-width: 640px) {
  .block-logos { padding: 2rem 0; }
  .block-logos__strip { gap: 1.25rem; }
  .block-logos__image { max-height: 24px; }
}

@media (max-width: 640px) {
  .block-logos { padding: 2rem 0; }
  .block-logos__strip { gap: 1.25rem; }
  .block-logos__image { max-height: 24px; }
}
/* metric_card.css */
.metric-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.metric-card--chart {
  grid-column: span 2;
}
.metric-card--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.metric-card__label {
  font-size:var(--typo-caption-size);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.metric-card__value {
  font-size:var(--typo-h2-size);
  font-weight: 400;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.metric-card__unit {
  font-size: var(--typo-meta-size);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 4px;
}
.metric-card__trend {
  font-size: var(--typo-caption-size);
  font-weight: 400;
}
.metric-card__trend--up { color: var(--color-status-green); }
.metric-card__trend--down { color: var(--color-status-red, #e74c3c); }
.metric-card__trend--flat { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .metric-card { padding: 12px 14px; }
  .metric-card--chart { grid-column: span 1; }
  .metric-card__value { font-size: var(--typo-h3-size); }
}
{# AGENT: backend | 2026-05-13 | Created for health compliance platform build #}

@media (max-width: 640px) {
  .metric-card { padding: 12px 14px; }
  .metric-card--chart { grid-column: span 1; }
  .metric-card__value { font-size: var(--typo-h3-size); }
}

/* modal.css */
/* ── BLOCK: modal ──────────────────────────────────────── */
/* VARIANTS: default, small, large, fullscreen             */
/* Template is inline-styled; this styles the body text    */
/* (the only class-based element without inline styles).   */

.modal-body {
  color: var(--text-secondary, var(--color-text-secondary));
  font-size:var(--typo-body-size);
  line-height: 1.6;
}

/* newsletter.css */
/* ── BLOCK: newsletter ────────────────────────────────── */
/* VARIANTS: inline, popup, slide-in, banner */

.block-newsletter {
  padding: 4rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}
.block-newsletter__headline {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.block-newsletter__form {
  display: flex;
  gap: 0.75rem;
  max-width: 440px;
  margin: 1.5rem auto 0;
}
.block-newsletter__input {
  flex: 1;
  padding: 0.7rem 1rem;
  background: var(--color-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-weight: var(--font-weight-body);
  font-size:var(--typo-body-size);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.block-newsletter__input:focus {
  border-color: var(--color-accent);
}
.block-newsletter__input::placeholder {
  color: var(--color-text-muted);
}
.block-newsletter__btn {
  padding: 0.7rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-label);
  font-size:var(--typo-small-size);
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-transform: uppercase;
  white-space: nowrap;
}
.block-newsletter__btn:hover {
  opacity: 0.85;
}
.block-newsletter__incentive {
  font-size:var(--typo-small-size);
  color: var(--color-text-secondary);
  margin-top: 0.75rem;
  font-weight: var(--font-weight-body);
}

/* Banner variant */
.block-newsletter--banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 3rem 2rem;
}
.block-newsletter--banner .block-newsletter__headline {
  margin-bottom: 0;
  font-size:var(--typo-h3-size);
}

/* Popup variant overlay hints */
.block-newsletter--popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 13, 0.85);
  z-index: 1000;
}
.block-newsletter--popup .block-newsletter__form {
  background: var(--color-surface);
  padding: 3rem;
  border: 1px solid var(--color-border);
  max-width: 639px;
}

@media (max-width: 639px) {
  .block-newsletter__form {
    flex-direction: column;
  }
  .block-newsletter--banner {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Inner wrapper + button + success state (was missing) */
.block-newsletter__inner {
  max-width: 560px;
  margin: 0 auto;
}
.block-newsletter__button {
  padding: 0.7rem 1.5rem;
  background: var(--color-accent, var(--accent));
  color: var(--accent-on, #fff);
  border: none;
  font-family: var(--font-family);
  font-size:var(--typo-body-size);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.block-newsletter__button:hover {
  opacity: 0.9;
}
.block-newsletter__success {
  color: var(--color-status-green, #2ecc8a);
  font-size: var(--typo-meta-size);
  margin-top: 0.75rem;
}
/* Inline + slide-in variants inherit base layout */
.block-newsletter--inline,
.block-newsletter--slide-in {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}

/* page_heading.css */
/* CLAJAMA Block: page_heading — page title with optional subtitle */
.block-page-heading {
  padding: var(--spacing-section, 48px) var(--spacing-page, 20px);
}

.block-page-heading__inner {
  max-width: var(--spacing-content-max-width, 1200px);
  margin: 0 auto;
}

.block-page-heading--centered .block-page-heading__inner {
  text-align: center;
}

.block-page-heading__title {
  margin: 0 0 calc(var(--spacing-element-gap, 16px) * 0.5);
  font-size: var(--typo-h1-size, 2rem);
  font-weight: var(--weight-headline-weight, 200);
  color: var(--color-text-primary, #D8D9E2);
  letter-spacing: var(--typo-h1-tracking, -0.02em);
  line-height: var(--typo-h1-leading, 1.1);
}

.block-page-heading__subtitle {
  margin: 0;
  max-width: var(--spacing-text-max-width, 680px);
  font-size: var(--typo-subheadline-size, 1rem);
  font-weight: var(--font-weight-body, 300);
  color: var(--color-text-muted, rgba(168, 169, 184, 0.45));
  line-height: var(--typo-subheadline-leading, 1.5);
}

.block-page-heading--centered .block-page-heading__subtitle {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 639px) {
  .block-page-heading {
    padding: 32px 16px;
  }
}

/* 2026-09-06 visual guarantee: photo-banner variant. content_injector fills
   page_heading.image on zero-visual pages; the scrim gradient is inline
   (dynamic URL), these rules add banner rhythm + white text on any photo. */
.block-page-heading--with-image {
  padding: calc(var(--spacing-section, 48px) * 2.4) var(--spacing-page, 20px);
  background-size: cover !important;
  background-position: center !important;
}

.block-page-heading--with-image .block-page-heading__title,
.block-page-heading--with-image .block-page-heading__subtitle {
  color: var(--color-text-on-dark);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.block-page-heading--with-image .block-page-heading__subtitle {
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 639px) {
  .block-page-heading--with-image {
    padding: 56px 16px;
  }
}

/* pricing_table.css */
/* BLOCK: pricing_table */
.block-pricing-table { padding: var(--spacing-section-padding) 0; }
.pricing-header { text-align: center; margin-bottom: 48px; }
.section-heading { font-size:var(--typo-headline-size); font-weight: 400; letter-spacing: -0.02em; color: var(--color-text-primary); margin: 0 0 12px; }
.pricing-subtitle { font-size:var(--typo-body-size); font-weight: 400; line-height: 1.7; color: var(--color-text-secondary); margin: 0; }

/* Grid variants */
.pricing-grid { display: grid; gap: 24px; align-items: start; }
.pricing-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pricing-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 32px; display: flex; flex-direction: column; }
.pricing-card.highlighted { border-color: var(--color-accent); position: relative; }
.pricing-card-header { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; }
.plan-name { font-size:var(--typo-h3-size); font-weight: 400; color: var(--color-text-primary); margin: 0 0 8px; }
.plan-price { font-size:var(--typo-headline-size); font-weight: 400; letter-spacing: -0.02em; color: var(--color-accent); }
.plan-period { font-size:var(--typo-body-size); font-weight: 400; color: var(--color-text-secondary); margin-left: 4px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 32px; flex: 1; }
.plan-feature { font-size:var(--typo-body-size); font-weight: 400; line-height: 1.7; color: var(--color-text-secondary); padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.plan-cta { text-align: center; }
.cta-button { display: inline-block; padding: 12px 32px; background: var(--color-accent); color: var(--accent-on, #ffffff); text-decoration: none; font-size:var(--typo-small-size); font-weight: 400; letter-spacing: 0.06em; }

/* Feature comparison table */
.pricing-comparison { width: 100%; border-collapse: collapse; }
.pricing-comparison th, .pricing-comparison td { padding: 16px; text-align: center; border-bottom: 1px solid var(--color-border); font-size:var(--typo-body-size); font-weight: 400; color: var(--color-text-secondary); }
.pricing-comparison th.feature-label, .pricing-comparison td.feature-label { text-align: left; color: var(--color-text-primary); }
.pricing-comparison th.highlighted, .pricing-comparison td.highlighted { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.plan-label .plan-name { display: block; font-size:var(--typo-body-size); font-weight: 400; margin-bottom: 4px; }
.plan-label .plan-price { font-size:var(--typo-h3-size); font-weight: 400; }
.plan-label .plan-price small { font-size: var(--typo-caption-size); font-weight: 400; color: var(--color-text-secondary); }
.check-mark { color: var(--color-accent); }
.cross-mark { color: var(--color-text-muted); }

/* Responsive */
@media (max-width: 639px) {
  .pricing-grid.cols-3, .pricing-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .pricing-comparison { font-size:var(--typo-small-size); }
  .pricing-comparison th, .pricing-comparison td { padding: 10px 8px; }
}

/* product_grid.css */
/* ── BLOCK: product_grid ──────────────────────────────── */
/* VARIANTS: 3-col, 4-col, list, with_quick_add            */
/* Rewritten to match template classes (.block-products__*) */
/* — old .block-product-grid__* classes were dead CSS.     */

.block-products {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.block-products__title {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}
.block-products__grid {
  display: grid;
  gap: 24px;
}
.block-products--3-col .block-products__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.block-products--4-col .block-products__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.block-products--list .block-products__grid {
  grid-template-columns: minmax(0, 1fr);
}
.block-products--with-quick-add .block-products__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-products__card {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.block-products__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-md, 0 12px 32px rgba(0,0,0,0.3));
}
.block-products__image-link {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-raised, var(--raised));
  text-decoration: none;
}
.block-products__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.block-products__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--typo-h1-size);
  font-weight: 700;
  color: var(--color-text-muted, var(--text-muted));
}
.block-products__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-accent, var(--accent));
  color: var(--accent-on, #fff);
  font-size:var(--typo-caption-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
}
.block-products__info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.block-products__name {
  font-size:var(--typo-body-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  margin: 0;
}
.block-products__price {
  font-size:var(--typo-h3-size);
  font-weight: 700;
  color: var(--color-accent, var(--accent));
}
.block-products__description {
  font-size:var(--typo-small-size);
  color: var(--color-text-secondary, var(--text-secondary));
  line-height: 1.5;
  margin: 4px 0 0;
  flex: 1;
}
.block-products__add {
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--color-accent, var(--accent));
  color: var(--accent-on, #fff);
  border: none;
  border-radius: var(--radius-sm, 8px);
  font-size: var(--typo-meta-size);
  font-weight: 600;
  cursor: pointer;
}
.block-products__add:hover {
  opacity: 0.9;
}

@media (max-width: 767px) {
  .block-products--3-col .block-products__grid,
  .block-products--4-col .block-products__grid,
  .block-products--with-quick-add .block-products__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* quote_form.css */
/* ── CLAJAMA Block: quote_form ── */
/* Variants: default, compact, split — uses design tokens only. */
.quote-form{max-width:1000px;margin:0 auto}
.quote-form--default{max-width:640px}
.quote-form__grid{display:flex;gap:32px;align-items:flex-start}
.quote-form--default .quote-form__grid{display:block}
.quote-form__intro{flex:1;min-width:0}
.quote-form__card{flex:1;min-width:0}
.quote-form__field{margin-bottom:12px}
.quote-form__field label{display:block;font-size:var(--typo-small-size);color:var(--text-muted);margin-bottom:6px}
.quote-form__field input,.quote-form__field select,.quote-form__field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--color-border);
  border-radius:var(--radius-sm);background:var(--color-surface);
  color:var(--text-primary);font-size:var(--typo-small-size);outline:none;
}
.quote-form__field input:focus,.quote-form__field select:focus,.quote-form__field textarea:focus{border-color:var(--accent)}
.quote-form__field input::placeholder,.quote-form__field textarea::placeholder{color:var(--text-muted)}
@media (max-width:760px){.quote-form__grid{flex-direction:column;gap:20px}}

/* reviews.css */
/* ── BLOCK: reviews ───────────────────────────────────── */
/* VARIANTS: list, with_filter, featured                   */
/* Unified: summary (avg/count/stars) + item cards matching */
/* the current template (avatar, header, author, text).    */

.block-reviews {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 24px;
  max-width: 900px;
  margin: 0 auto;
}
.block-reviews__title {
  font-size: var(--typo-h2-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 32px;
}
.block-reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.block-reviews__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.block-reviews__avg {
  font-size: var(--typo-headline-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.block-reviews__stars {
  display: flex;
  gap: 0.15rem;
  font-size: var(--typo-small-size);
  color: var(--color-status-warn, #F59E0B);
}
.block-reviews__star {
  color: var(--color-text-muted);
  font-size: var(--typo-body-size);
}
.block-reviews__star--filled {
  color: var(--color-accent);
}
.block-reviews__count {
  font-size: var(--typo-caption-size);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-body);
  letter-spacing: 0.02em;
}
.block-reviews__list {
  display: grid;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.block-reviews--list .block-reviews__list {
  grid-template-columns: minmax(0, 1fr);
}
.block-reviews__item {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 12px);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.block-reviews__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.block-reviews__item-stars {
  margin-bottom: 0.5rem;
}
.block-reviews__body {
  font-size: var(--typo-small-size);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
  line-height: 1.6;
}
.block-reviews__text {
  font-size: var(--typo-meta-size);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.block-reviews__author {
  font-size: var(--typo-meta-size);
  font-weight: 600;
  color: var(--color-text-primary);
}
.block-reviews__date {
  font-size: var(--typo-label-size);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-body);
  letter-spacing: 0.02em;
}
.block-reviews__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.block-reviews__filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--typo-label-size);
  cursor: pointer;
  background: var(--color-raised, var(--raised));
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border, var(--border));
}
.block-reviews__filter-btn--active {
  background: var(--color-accent, var(--accent));
  color: var(--color-accent-on, #0f0f0d);
  border-color: var(--color-accent, var(--accent));
}

/* service_area.css */
/* ── CLAJAMA Block: service_area ── */
/* Service-area / coverage section — tokens only. */
.block-service-area{max-width:860px;margin:0 auto;text-align:center}
.block-service-area .blk-title{margin-bottom:12px}
.block-service-area .blk-lead{margin-bottom:28px}
.service-area__badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.service-area__badge{
  padding:10px 18px;border-radius:999px;border:1px solid var(--color-border);
  background:var(--color-raised);color:var(--text-primary);
  font-size:var(--typo-small-size);font-weight:500;
}
.service-area__badge:hover{border-color:var(--accent);color:var(--accent)}

/* stat_counters.css */
/* ── BLOCK: stat_counters ─────────────────────────────── */
/* VARIANTS: row, grid, with_icons                         */
/* Fixed: template uses .block-stats__inner (was __grid)   */
/* and .block-stats__value (was missing).                  */

.block-stats {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.block-stats__inner {
  display: grid;
  gap: 24px;
}
.block-stats--row .block-stats__inner {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.block-stats--grid .block-stats__inner {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.block-stats--with-icons .block-stats__inner {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.block-stats__item {
  text-align: center;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 12px);
  padding: 28px 16px;
}
.block-stats--row .block-stats__item {
  background: none;
  border: none;
  padding: 0;
}
.block-stats__icon {
  font-size: var(--typo-h2-size);
  margin-bottom: 8px;
}
.block-stats__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.block-stats__value {
  font-size:var(--typo-headline-size);
  font-weight: 700;
  color: var(--color-text-primary, var(--text-primary));
  line-height: 1.1;
}
.block-stats__prefix {
  font-size:var(--typo-headline-size);
  font-weight: 700;
  color: var(--color-text-primary, var(--text-primary));
}
.block-stats__label {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-label, 500);
  color: var(--color-text-muted, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

/* tabs.css */
/* ── BLOCK: tabs ──────────────────────────────────────── */
/* VARIANTS: horizontal, vertical, pills */

.block-tabs {
  padding: 2rem 0;
}
.block-tabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}
.block-tabs__tab {
  padding: 0.75rem 1.5rem;
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-family);
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.block-tabs__tab:hover {
  color: var(--color-text-primary);
}
.block-tabs__tab--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}
.block-tabs__content {
  font-size:var(--typo-body-size);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
  line-height: 1.7;
}

/* Vertical variant */
.block-tabs--vertical {
  display: flex;
  gap: 2rem;
}
.block-tabs--vertical .block-tabs__nav {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--color-border);
  min-width: 180px;
}
.block-tabs--vertical .block-tabs__tab {
  border-bottom: none;
  border-right: 1px solid transparent;
  margin-bottom: 0;
  margin-right: -1px;
  text-align: left;
}
.block-tabs--vertical .block-tabs__tab--active {
  border-right-color: var(--color-accent);
}
.block-tabs--vertical .block-tabs__content {
  flex: 1;
}

/* Pills variant */
.block-tabs--pills .block-tabs__nav {
  border-bottom: none;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.block-tabs--pills .block-tabs__tab {
  border: 1px solid var(--color-border);
  margin-bottom: 0;
  border-radius: 0;
  padding: 0.5rem 1.25rem;
}
.block-tabs--pills .block-tabs__tab--active {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 639px) {
  .block-tabs--vertical {
    flex-direction: column;
  }
  .block-tabs--vertical .block-tabs__nav {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    min-width: unset;
    overflow-x: auto;
  }
  .block-tabs--vertical .block-tabs__tab {
    border-right: none;
    border-bottom: 1px solid transparent;
    margin-right: 0;
    white-space: nowrap;
  }
  .block-tabs--vertical .block-tabs__tab--active {
    border-bottom-color: var(--color-accent);
  }
}

/* Panel content — the tab panels themselves (was missing) */
.block-tabs__panel {
  display: none;
}
.block-tabs__panel.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

/* Horizontal (default base) — ensure panels sit under nav */
.block-tabs--horizontal .block-tabs__content {
  padding-top: 0.5rem;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* team_grid.css */
/* ── BLOCK: team_grid ─────────────────────────────────── */
/* VARIANTS: grid, list, with_bios                         */
/* Fixed: added .block-team__member, __photo-placeholder,   */
/* __photo — old CSS only had __card (dead).               */

.block-team {
  font-family: var(--font-family);
  padding: var(--spacing-section-padding) 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.block-team__title {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 32px;
}
.block-team__grid {
  display: grid;
  gap: 24px;
}
.block-team--grid .block-team__grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.block-team--list .block-team__grid {
  grid-template-columns: minmax(0, 1fr);
}
.block-team--with-bios .block-team__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.block-team__member {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 12px);
  padding: 24px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.block-team__member:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-md, 0 12px 32px rgba(0,0,0,0.3));
}
.block-team__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
}
.block-team__photo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-raised, var(--raised));
  color: var(--color-accent, var(--accent));
  font-size: var(--typo-h2-size);
  font-weight: 700;
}
.block-team__name {
  font-size: var(--typo-subheadline-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.block-team__role {
  font-size:var(--typo-small-size);
  color: var(--color-text-muted, var(--text-muted));
}
.block-team__bio {
  font-size:var(--typo-small-size);
  color: var(--color-text-secondary, var(--text-secondary));
  line-height: 1.6;
  margin: 12px 0 0;
}

/* testimonials.css */
/* ── BLOCK: testimonials ──────────────────────────────── */
/* VARIANTS: grid, carousel, single */

.block-testimonials {
  padding: 4rem 2rem;
}
.block-testimonials__title {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2.5rem;
  text-align: center;
}
.block-testimonials__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1000px;
  margin: 0 auto;
}
.block-testimonials__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.block-testimonials__quote {
  font-size:var(--typo-body-size);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
  flex: 1;
}
.block-testimonials__quote::before {
  content: '"';
  color: var(--color-accent);
  font-size:var(--typo-h3-size);
  font-weight: var(--font-weight-heading);
}
.block-testimonials__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.block-testimonials__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
}
.block-testimonials__name {
  font-size:var(--typo-small-size);
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
}
.block-testimonials__role {
  font-size:var(--typo-caption-size);
  font-weight: var(--font-weight-label);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Single variant */
.block-testimonials--single {
  max-width: 639px;
  margin: 0 auto;
}
.block-testimonials--single .block-testimonials__card {
  text-align: center;
  align-items: center;
}
.block-testimonials--single .block-testimonials__author {
  justify-content: center;
}

/* Carousel variant */
.block-testimonials--carousel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.block-testimonials--carousel .block-testimonials__grid {
  display: flex;
  gap: 1.5rem;
  scroll-snap-align: start;
}
.block-testimonials--carousel .block-testimonials__card {
  min-width: 320px;
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .block-testimonials__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .block-testimonials--carousel .block-testimonials__card {
    min-width: 280px;
  }
}

/* ── VARIANT LAYOUTS (data-driven — 2026-08-16) ──
   Modifier classes come from core/block_library/variant_presets.py.
   Same card markup; the container modifier class picks the layout. */
.blk-testimonials-container {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: var(--spacing-content-max-width, 1100px);
  margin: 0 auto;
}
.blk-testimonial-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}

/* marquee — horizontal scroll */
.block-testimonials--marquee .blk-testimonials-container {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 0 24px 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: none;
}
.block-testimonials--marquee .blk-testimonial-item {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

/* offset — asymmetric 2-col */
.block-testimonials--offset .blk-testimonials-container {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.block-testimonials--offset .blk-testimonial-item:first-child {
  grid-column: span 2;
}

/* glass — glass cards */
.block-testimonials--glass .blk-testimonial-item {
  background: var(--depth-glass-bg);
  backdrop-filter: blur(var(--depth-glass-blur));
  border: 1px solid var(--depth-glass-border);
  box-shadow: var(--depth-shadow-sm);
}

/* grid — default 3-col on wide */
@media (min-width: 900px) {
  .block-testimonials--grid .blk-testimonials-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* carousel — single visible */
.block-testimonials--carousel .blk-testimonials-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-width: 720px;
}
.block-testimonials--carousel .blk-testimonial-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* two_column.css */
/* ── BLOCK: two_column ────────────────────────────────── */
/* VARIANTS: 50/50, 60/40, 70/30, image+text, text+image  */
/* Classes match the template exactly (block-two__*) —    */
/* previously this file defined dead block-two-col__*     */
/* classes that the template never emitted.               */

.block-two {
  padding: 4rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.block-two__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.block-two__inner.block-two__col--half {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.block-two__inner.block-two__col--sixty {
  grid-template-columns: 3fr 2fr;
}
.block-two__inner.block-two__col--seventy {
  grid-template-columns: 7fr 3fr;
}
.block-two__heading {
  font-size:var(--typo-h2-size);
  font-weight: var(--font-weight-heading);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  line-height: 1.15;
}
.block-two__text {
  font-size:var(--typo-body-size);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-body);
  line-height: 1.7;
}
.block-two__image {
  width: 100%;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

@media (max-width: 639px) {
  .block-two__inner,
  .block-two__inner.block-two__col--half,
  .block-two__inner.block-two__col--sixty,
  .block-two__inner.block-two__col--seventy {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* Column wrappers — grid children (base padding/flow) */
.block-two__col {
  min-width: 0;
}
.block-two__heading-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* video_embed.css */
/* ── BLOCK: video_embed ───────────────────────────────── */
/* VARIANTS: default, with_transcript, 16:9, 4:3           */
/* Fixed: added __placeholder; aspect-ratio variant        */
/* classes use colons (16:9) which the template emits.     */

.block-video {
  font-family: var(--font-family);
  padding: 40px 24px;
  max-width: 900px;
  margin: 0 auto;
}
.block-video__title {
  font-size:var(--typo-h3-size);
  font-weight: var(--font-weight-heading, 600);
  color: var(--color-text-primary);
  margin: 0 0 16px;
}
.block-video__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 default */
  background: var(--color-raised, var(--raised));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--color-border, var(--border));
}
.block-video--16\:9 .block-video__wrapper,
.block-video--16-9 .block-video__wrapper {
  padding-bottom: 56.25%;
}
.block-video--4\:3 .block-video__wrapper,
.block-video--4-3 .block-video__wrapper {
  padding-bottom: 75%;
}
.block-video__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.block-video__placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, var(--text-muted));
  font-size: var(--typo-meta-size);
}


    /* ── CSS Variable Aliases (short → long) ── */
    :root {
        --accent: var(--color-accent);
        --raised: var(--color-raised);
        --bg-surface: var(--color-surface);
        --border-color: var(--color-border);
        --grid-min: var(--resp-grid-min, 260px);
        --grid-gap: var(--resp-grid-gap, 12px);
    }
    

    /* ── Page reset + overflow guard ── */
    html { overflow-x: hidden; }
    body { overflow-x: hidden; width: 100%; position: relative; margin: 0; }
    img { max-width: 100%; height: auto; }
    * { box-sizing: border-box; }