/* 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;
  /* 2026-10-05: the responsive gate measured `320px over=620 (img.blk-avatar)` on
     elbcleaningservice.com — a remote (940px) avatar inside a flex row whose item defaults to
     min-width:auto. `max-width:100%` + `flex:0 0 auto` keeps the mark at 40px and lets the
     surrounding row shrink instead of pushing the page wider than the phone. */
  max-width: 100%;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.blk-flex-center {
  min-width: 0;
  flex-wrap: wrap;
}
.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); }
  /* 2026-10-16 (owner): "we do not want the typing to zoom in on mobile". This rule used to SHRINK
     the controls to --typo-meta-size (14px) — below iOS's 16px floor, so focusing a field zoomed the
     whole page. Mobile only tightens the PADDING; the font never drops under 16px. */
  .form-group input, .form-group textarea, .form-group select { padding: 12px 14px; font-size: max(16px, var(--typo-body-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;
}
/* FIX (2026-10-05): the overflow fix was scoped to `--split`, so every OTHER variant kept
   overflowing. Measured on elbcleaningservice.com: the page renders `block-hero--centered`, the
   responsive gate blocked the build at `320px over=620 (img.block-hero__image)` / `390px over=550`.
   A flex item defaults to `min-width:auto` and refuses to shrink below the image's intrinsic
   width — the rule must apply to the media panel for ALL variants, not one. */
.block-hero__media {
  min-width: 0;
  max-width: 100%;
}
.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);
}

/* ── DESIGN SYSTEM: bold ── */
/* ── DESIGN SYSTEM: bold ─────────────────────────────────────────────────────────────────────
   Heavy, hard-edged, high-contrast. Square corners, offset "print" shadows, uppercase display
   type. The default platform look, made deliberate. Overrides SHAPE / RHYTHM / TYPE — never the
   client's colour tokens (those come from <project>-vars.css), so two bold sites can differ in
   palette and still share one language, and two different systems never look alike. */
:root {
  --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-8: 0; --radius-14: 0;
  --radius-lg: 0; --radius-lg2: 0; --radius-xl: 0; --radius-2xl: 0;
  --radius-pill: 0; --radius-round: 0;
  --depth-shadow-sm: 4px 4px 0 var(--color-text-primary, #111);
  --depth-shadow-md: 7px 7px 0 var(--color-text-primary, #111);
  --depth-shadow-lg: 11px 11px 0 var(--color-text-primary, #111);
  --depth-glass-bg: transparent;
  --depth-glass-blur: 0px;
  --depth-glass-border: 2px solid var(--color-text-primary, #111);
  --font-weight-heading: 900;
  --motion-hover-duration: 0.12s;
}
.blk-title,
.blk-section > .blk-title {
  text-transform: uppercase;
  letter-spacing: -0.015em;
  font-weight: 900;
  line-height: 1.02;
}
.blk-card,
.block-cards__card {
  border: 2px solid var(--color-text-primary, #111);
  box-shadow: var(--depth-shadow-sm);
}
.blk-card:hover,
.block-cards__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--depth-shadow-md);
}
.blk-lead { font-weight: 500; }
.blk-meta, .blk-label { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.blk-cta, .block-cta__button { border: 2px solid var(--color-text-primary, #111); box-shadow: var(--depth-shadow-sm); }

/* mobile-contract.css */
/* =============================================================
   CLAJAMA MOBILE CONTRACT  (2026-10-16)
   ─────────────────────────────────────────────────────────────
   OWNER (verbatim): "on all mobile devices we do not want the typing to zoom in.
   The content [must not] pour outside or [be] to close to the margins. Responsive
   means it will collapse to the screen size design is controlling what is there and
   how its presented for that size. Example 100 menu items on a mobile?"

   Three rules, enforced in one place so EVERY built page carries them:
     1. TYPING NEVER ZOOMS  — a phone focuses a control below 16px and iOS zooms the
        page; every control is >=16px at phone widths (and on coarse pointers).
     2. NOTHING POURS OUT   — content keeps a real gutter and stays inside the viewport.
     3. IT COLLAPSES        — the nav and any long list collapse to a screen-sized,
        SCROLLABLE surface, so 100 items are reachable instead of running off-screen.

   Appended LAST in the shared bundle (core/block_library/renderer._get_combined_css)
   so it wins every tie. Named in core/responsive_math.mobile_contract() so the
   numbers are graded, not asserted.
   ============================================================= */

/* ── 0. the text-size adjust trap ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── 1. TYPING NEVER ZOOMS ──────────────────────────────────────────────────────────────
   iOS Safari zooms the viewport when a focused <input>/<select>/<textarea> computes
   below 16px. A control's own block may shrink it (the old contact_form rule set
   14px at <=640px) — this floor wins, on every phone width and every coarse pointer. */
/* NB: TWO separate blocks on purpose — one plain `max-width` query (so the responsive-maths
   parser attributes the rule to a phone breakpoint) and one coarse-pointer query for a phone
   held in landscape (which reports a wide viewport). */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }
}

/* ── 2. NOTHING POURS OUT / SAFE GUTTERS ───────────────────────────────────────────────
   A phone must never show more than the screen, and content must not sit on the edge. */
@media (max-width: 767px) {
  body { overflow-wrap: break-word; word-break: break-word; }

  /* every block section keeps a gutter (full-bleed variants opt out via .is-bleed) */
  .block-header__inner,
  .block-content,
  .container {
    padding-left: max(16px, var(--space-md, 16px));
    padding-right: max(16px, var(--space-md, 16px));
  }

  /* media and code may never exceed the viewport */
  img, svg, video, canvas, iframe, embed, object { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* a wide table scrolls inside its own box instead of widening the page */
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
  table thead, table tbody { width: 100%; }

  /* flex/grid children default to min-width:auto, which is how a long word widens the page */
  .row > *, .grid > *, [class*="__grid"] > *, [class*="__cols"] > * { min-width: 0; }
}

/* ── 3. IT COLLAPSES TO THE SCREEN ─────────────────────────────────────────────────────
   The header's own sheet already collapses on a phone. Two additions:
     * a CROWDED menu (many items) collapses at EVERY width, and
     * the opened panel SCROLLS, so N items (100) stay reachable. */
.block-header__mobile {
  /* NB: dvh only — a `vh` fallback here would register as a "fluid type signal" in
     core.responsive_math (its regex counts any `<n>vh`) and mask a genuinely fixed-type site. */
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 639px) {
  .block-header__nav, .block-header__cta { display: none; }
  .block-header__hamburger { display: block; }
}
/* a crowded menu is not a width question — 100 links do not fit at any width */
.block-header--crowded .block-header__nav,
.block-header--crowded .block-header__cta { display: none; }
.block-header--crowded .block-header__hamburger { display: block; }


    /* ── 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; }