/* Fluid CMS Generated CSS - Theme: corporate */
/* Layer: core.css */
/*
 * =========================================================
 * BASE THEME — core.css
 * LAYER: Settings + Generic + Elements
 * =========================================================
 * WHAT GOES HERE:
 *   - CSS custom properties (design tokens)
 *   - Universal reset
 *   - Base element typography (body, h1-h6, p, a, ul)
 *   - Layout containers (.ui-container, .ui-large-container)
 *   - Grid utilities (.ui-row, .ui-col-*)
 *   - Spacing / display utilities
 *   - Nothing component-specific. No colors beyond tokens.
 *
 * THEME OVERRIDE: Each variant theme (e.g. potu/) ships its own
 * core.css that re-declares :root tokens and body font — all
 * structural utilities below are inherited unchanged.
 * =========================================================
 */

/* =========================================================
   DESIGN TOKENS  (overridden by variant theme :root blocks)
   ========================================================= */
:root {
  /* --- Color Palette --- */
  --color-primary:        #FA5D10;   /* brand accent — override in theme */
  --color-primary-dark:   #d44a08;
  --color-primary-light:  rgba(250, 93, 16, 0.12);
  --color-secondary:      #111111;
  --color-bg-main:        #ffffff;
  --color-bg-muted:       #f6f6f6;
  --color-bg-dark:        #0f1012;
  --color-text-main:      #111111;
  --color-text-muted:     rgba(0, 0, 0, 0.55);
  --color-text-inverse:   #ffffff;
  --color-border:         rgba(0, 0, 0, 0.10);
  --color-border-dark:    rgba(0, 0, 0, 0.80);
  --color-accent:         rgb(0, 255, 0);

  /* Semantic shortcuts (used by atoms / molecules) */
  --accent:               var(--color-primary);
  --accent-dark:          var(--color-primary-dark);
  --accent-light:         var(--color-primary-light);

  /* --- Typography --- */
  --font-sans:            'Outfit', 'Inter', system-ui, sans-serif;
  --font-display:         'Outfit', 'Inter', sans-serif;
  --font-mono:            'JetBrains Mono', monospace;
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --text-base:            1rem;       /* 16px */
  --text-sm:              0.875rem;
  --text-xs:              0.75rem;
  --text-lg:              1.125rem;
  --text-xl:              1.25rem;
  --text-2xl:             1.5rem;
  --text-3xl:             1.875rem;
  --text-4xl:             2.25rem;
  --line-height-body:     1.65;
  --line-height-heading:  1.15;

  /* --- Spacing scale --- */
  --spacing-xs:           0.5rem;    /*  8px */
  --spacing-sm:           0.75rem;   /* 12px */
  --spacing-md:           1.5rem;    /* 24px */
  --spacing-lg:           2rem;      /* 32px */
  --spacing-xl:           3rem;      /* 48px */
  --spacing-2xl:          5rem;      /* 80px */
  --spacing-3xl:          7.5rem;    /* 120px */

  /* --- Border radius --- */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-pill:          9999px;
  --radius-circle:        50%;

  /* --- Shadows --- */
  --shadow-sm:            0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:            0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:            0 20px 48px rgba(0,0,0,0.12);

  /* --- Transitions --- */
  --transition-fast:      0.15s ease;
  --transition-base:      0.25s ease;
  --transition-slow:      0.45s ease;

  /* --- Button tokens --- */
  --btn-py:               0.8rem;
  --btn-px:               1.75rem;
  --btn-radius:           var(--radius-pill);
  --btn-font-size:        1rem;
  --btn-font-weight:      var(--font-weight-semibold);
  --btn-letter-spacing:   0.02em;
  --btn-transition:       background-color var(--transition-base),
                          border-color var(--transition-base),
                          color var(--transition-base),
                          box-shadow var(--transition-base),
                          transform var(--transition-base);

  /* --- Header --- */
  --header-h:             80px;

  /* --- Z-index ladder --- */
  --z-base:               0;
  --z-above:              10;
  --z-header:             1000;
  --z-drawer:             9999;
  --z-modal:              10000;
}


/* =========================================================
   RESET  (Universal box-model, margin/padding strip)
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:        var(--font-sans);
  font-size:          var(--text-base);
  font-weight:        var(--font-weight-regular);
  line-height:        var(--line-height-body);
  color:              var(--color-text-main);
  background-color:   var(--color-bg-main);
  -webkit-font-smoothing: antialiased;
  overflow-x:         hidden;
}

ul, ol { list-style: none; }

a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-base);
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button { cursor: pointer; }


/* =========================================================
   TYPOGRAPHY — Base element scale
   (Theme overrides heading size/weight in their own core.css)
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  font-weight:    var(--font-weight-semibold);
  line-height:    var(--line-height-heading);
  color:          var(--color-text-main);
}

h1 { font-size: clamp(2.5rem,  6vw,  4.5rem); }
h2 { font-size: clamp(1.8rem,  4vw,  3rem);   }
h3 { font-size: clamp(1.3rem,  2.5vw, 2rem);  }
h4 { font-size: clamp(1.1rem,  2vw,  1.5rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem;     }

p { margin-bottom: 0; }

em, i { font-style: italic; }
strong, b { font-weight: var(--font-weight-bold); }

small { font-size: var(--text-sm); }

/* Span italic variant often used in display headings */
h1 span.italic, h2 span.italic, h3 span.italic {
  font-style: italic;
  font-weight: var(--font-weight-light);
}


/* =========================================================
   LAYOUT CONTAINERS
   Target: all organisms / pages needing constrained width
   ========================================================= */

/* Standard content container — 1200px max */
.ui-container {
  width: 100%;
  max-width: 1280px;
  padding-right: var(--spacing-md);
  padding-left:  var(--spacing-md);
  margin-right: auto;
  margin-left:  auto;
}

/* Wide container for edge-to-edge sections — 1480px max */
.ui-large-container {
  width: 100%;
  max-width: 1480px;
  padding-right: var(--spacing-lg);
  padding-left:  var(--spacing-lg);
  margin-right: auto;
  margin-left:  auto;
}

/* Full-bleed wrapper (overflow clip for sections with absolute children) */
.ui-boxed_wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}


/* =========================================================
   GRID SYSTEM  (.ui-row + .ui-col-*)
   Target: any template using column-based layouts
   ========================================================= */
.ui-row {
  display:  flex;
  flex-wrap: wrap;
  margin-left:  -15px;
  margin-right: -15px;
}

/* Column widths — percentages match 12-col grid fractions */
.ui-col-lg-3  { width: 25%;      padding: 0 15px; }
.ui-col-lg-4  { width: 33.333%;  padding: 0 15px; }
.ui-col-lg-5  { width: 41.666%;  padding: 0 15px; }
.ui-col-lg-6  { width: 50%;      padding: 0 15px; }
.ui-col-lg-7  { width: 58.333%;  padding: 0 15px; }
.ui-col-lg-8  { width: 66.666%;  padding: 0 15px; }
.ui-col-lg-9  { width: 75%;      padding: 0 15px; }
.ui-col-lg-12 { width: 100%;     padding: 0 15px; }

/* Tablet & mobile — all cols stack */
@media (max-width: 991px) {
  .ui-col-lg-3, .ui-col-lg-4, .ui-col-lg-5, .ui-col-lg-6,
  .ui-col-lg-7, .ui-col-lg-8, .ui-col-lg-9 {
    width: 100%;
    margin-bottom: var(--spacing-md);
  }
}

/* Flexbox alignment helpers (used on .ui-row) */
.ui-align-items-center      { align-items: center; }
.ui-align-items-start       { align-items: flex-start; }
.ui-align-items-end         { align-items: flex-end; }
.ui-justify-content-between { justify-content: space-between; }
.ui-justify-content-center  { justify-content: center; }
.ui-justify-content-end     { justify-content: flex-end; }


/* =========================================================
   SPACING UTILITIES
   ========================================================= */
.ui-mb-0  { margin-bottom: 0; }
.ui-mb-sm { margin-bottom: var(--spacing-sm); }
.ui-mb-md { margin-bottom: var(--spacing-md); }
.ui-mb-lg { margin-bottom: var(--spacing-lg); }
.ui-mb-xl { margin-bottom: var(--spacing-xl); }

.ui-mt-0  { margin-top: 0; }
.ui-mt-sm { margin-top: var(--spacing-sm); }
.ui-mt-md { margin-top: var(--spacing-md); }
.ui-mt-lg { margin-top: var(--spacing-lg); }
.ui-mt-xl { margin-top: var(--spacing-xl); }

.ui-pt-0  { padding-top: 0; }
.ui-pt-sm { padding-top: var(--spacing-sm); }
.ui-pt-md { padding-top: var(--spacing-md); }
.ui-pt-lg { padding-top: var(--spacing-lg); }
.ui-pt-xl { padding-top: var(--spacing-xl); }

.ui-pb-0  { padding-bottom: 0; }
.ui-pb-sm { padding-bottom: var(--spacing-sm); }
.ui-pb-md { padding-bottom: var(--spacing-md); }
.ui-pb-lg { padding-bottom: var(--spacing-lg); }
.ui-pb-xl { padding-bottom: var(--spacing-xl); }

.ui-px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.ui-px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.ui-py-sm { padding-top:  var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.ui-py-md { padding-top:  var(--spacing-md); padding-bottom: var(--spacing-md); }
.ui-py-lg { padding-top:  var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.ui-py-xl { padding-top:  var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.ui-py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }

/* All-sides padding */
.ui-p-sm  { padding: var(--spacing-sm); }
.ui-p-md  { padding: var(--spacing-md); }
.ui-p-lg  { padding: var(--spacing-lg); }
.ui-p-xl  { padding: var(--spacing-xl); }

/* Gap utilities */
.ui-gap-sm { gap: var(--spacing-sm); }
.ui-gap-md { gap: var(--spacing-md); }
.ui-gap-lg { gap: var(--spacing-lg); }

/* Legacy shims kept for backward compat */
.ui-pl-40 { padding-left: 40px; }
.ui-ml-100 { margin-left: 100px; }
.ui-mb-30 { margin-bottom: 30px; }
.ui-mb-60 { margin-bottom: 60px; }


/* =========================================================
   DISPLAY & TEXT ALIGNMENT UTILITIES
   ========================================================= */
.ui-d-flex      { display: flex; }
.ui-d-block     { display: block; }
.ui-d-inline    { display: inline; }
.ui-d-none      { display: none; }

.ui-centred, .ui-text-center { text-align: center; }
.ui-text-left                { text-align: left;   }
.ui-text-right               { text-align: right;  }

.ui-text-muted  { color: var(--color-text-muted); }
.ui-text-accent { color: var(--accent); }
.ui-text-white  { color: var(--color-text-inverse); }

.ui-bg-muted    { background-color: var(--color-bg-muted); }
.ui-bg-dark     { background-color: var(--color-bg-dark); color: var(--color-text-inverse); }


/* =========================================================
   SECTION RHYTHM  (all section organisms use this)
   ========================================================= */
section.ui-organism,
.ui-section {
  padding-top:    var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.ui-section--sm {
  padding-top:    var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.ui-section--lg {
  padding-top:    var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}


/* =========================================================
   MISC STRUCTURAL UTILITIES
   ========================================================= */
.ui-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.ui-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-aspect-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Legacy Bootstrap-compatible utilities carried forward */
.py-5 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.mt-4 { margin-top: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-md); }
.text-center { text-align: center; }
.text-xl { font-size: var(--text-xl); }
.text-lg { font-size: var(--text-lg); }

/* Layer: atoms.css */
/*
 * =========================================================
 * BASE THEME — atoms.css
 * LAYER: Components — Level 1 (Atoms)
 * =========================================================
 * WHAT GOES HERE:
 *   Smallest indivisible UI units. Each block is mapped to a
 *   single atom HTML template in base/atoms/*.html
 *
 *   STRUCTURAL RULES ONLY:
 *     - Display model (flex, inline-flex, block)
 *     - Padding / gap / min-size
 *     - Border geometry (width, style, radius)
 *     - Transition declarations
 *     - Cursor, overflow, white-space
 *
 *   DO NOT PUT HERE:
 *     - Specific colors (use token variables only)
 *     - Gradient backgrounds
 *     - Font-family choices (inherit from core)
 *     - Theme-specific sizes or icon positions
 *     → Those belong in the variant theme's atoms.css override
 *
 * FILES TARGETED:
 *   atoms/atom_button.html
 *   atoms/atom_image.html
 *   atoms/atom_icon.html
 *   atoms/atom_text.html
 *   atoms/atom_form_group.html
 *   atoms/atom_nav_toggler.html
 * =========================================================
 */


/* =========================================================
   atom_button.html — .ui-button
   Base button geometry: display, padding, radius, transitions.
   Colors & sizes are set via BEM modifier classes below.
   ========================================================= */
.ui-button {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5em;
  padding:          var(--btn-py) var(--btn-px);
  border-radius:    var(--btn-radius);
  font-size:        var(--btn-font-size);
  font-weight:      var(--btn-font-weight);
  letter-spacing:   var(--btn-letter-spacing);
  border:           2px solid transparent;
  cursor:           pointer;
  text-decoration:  none;
  white-space:      nowrap;
  overflow:         hidden;
  position:         relative;
  transition:       var(--btn-transition);
  -webkit-user-select: none;
  user-select:      none;
}

/* --- State: hover lift (structural, no color) --- */
.ui-button:hover {
  transform: translateY(-2px);
}

.ui-button:active {
  transform: translateY(0);
}

/* Arrow / icon inside button — animates on hover */
.ui-button .btn-arrow,
.ui-button [data-icon] {
  display:    inline-block;
  transition: transform var(--transition-base);
}
.ui-button:hover .btn-arrow,
.ui-button:hover [data-icon] {
  transform: translate(3px, -3px);
}

/* --- Modifier: Primary --- */
.ui-button--primary,
.btn-primary {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--color-text-inverse);
}
.ui-button--primary:hover, .btn-primary:hover {
  background-color: var(--accent-dark);
  border-color:     var(--accent-dark);
  box-shadow:       var(--shadow-md);
}

/* --- Modifier: Secondary (dark fill) --- */
.ui-button--secondary,
.btn-secondary {
  background-color: var(--color-secondary);
  border-color:     var(--color-secondary);
  color:            var(--color-text-inverse);
}
.ui-button--secondary:hover, .btn-secondary:hover {
  box-shadow: var(--shadow-md);
}

/* --- Modifier: Outline (transparent + border) --- */
.ui-button--outline,
.btn-outline {
  background-color: transparent;
  border-color:     currentColor;
  color:            var(--color-text-main);
}
.ui-button--outline:hover, .btn-outline:hover {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--color-text-inverse);
  box-shadow:       var(--shadow-md);
}

/* --- Modifier: Ghost (for dark backgrounds) --- */
.ui-button--ghost,
.btn-ghost {
  background-color: transparent;
  border-color:     rgba(255, 255, 255, 0.5);
  color:            var(--color-text-inverse);
}
.ui-button--ghost:hover, .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color:     var(--color-text-inverse);
}

/* --- Modifier: Pill CTA (arrow appended automatically) --- */
.ui-button--cta,
.btn-cta {
  background-color: transparent;
  border-color:     var(--color-text-inverse);
  color:            var(--color-text-inverse);
  padding:          var(--btn-py) calc(var(--btn-px) * 1.25);
}
.ui-button--cta::after, .btn-cta::after { content: '↗'; margin-left: 0.25em; }
.ui-button--cta:hover,  .btn-cta:hover  {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--color-text-inverse);
  box-shadow:       var(--shadow-md);
}

/* --- Modifier: Muted --- */
.btn-muted {
  background-color: var(--color-bg-card, rgba(0,0,0,0.05));
  border-color: transparent;
  color: var(--color-text-muted);
}
.btn-muted:hover {
  background-color: var(--color-bg-card-hover, rgba(0,0,0,0.1));
  color: var(--color-text-main);
}

/* --- Modifier: Transparent --- */
.btn-transparent {
  background-color: transparent;
  border-color: transparent;
  color: currentColor;
}
.btn-transparent:hover {
  background-color: rgba(0,0,0,0.05);
}

/* --- Modifier: Gradient --- */
.btn-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  border: none;
  color: var(--color-text-inverse);
}
.btn-gradient:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-md);
}

/* Size modifiers */
.ui-button--sm { font-size: var(--text-sm); padding: 0.5rem 1rem; }
.ui-button--lg { font-size: var(--text-lg); padding: 1rem 2.25rem; }
.ui-button--xl { font-size: var(--text-xl); padding: 1.25rem 3rem; letter-spacing: 0.04em; }

/* Circle / icon-only button */
.ui-button--circle {
  width:         56px;
  height:        56px;
  padding:       0;
  border-radius: var(--radius-circle);
  font-size:     1.25rem;
}


/* =========================================================
   atom_image.html — .ui-image, .ui-avatar
   Structural: sizing, overflow, border-radius, object-fit.
   ========================================================= */
.ui-image {
  display:       block;
  max-width:     100%;
  height:        auto;
  object-fit:    cover;
  border-radius: var(--radius-lg);   /* theme overrides radius */
}

.ui-image--rounded { border-radius: var(--radius-xl); }
.ui-image--circle  { border-radius: var(--radius-circle); }
.ui-image--fluid   { width: 100%; height: 100%; object-fit: cover; }

/* Avatar cluster (stacked overlapping avatars) */
.ui-avatar {
  display:       inline-block;
  overflow:      hidden;
  border-radius: var(--radius-circle);
  object-fit:    cover;
  border:        2px solid var(--color-bg-main);
  flex-shrink:   0;
}
.ui-avatar--sm { width: 32px; height: 32px; }
.ui-avatar--md { width: 48px; height: 48px; }
.ui-avatar--lg { width: 64px; height: 64px; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* =========================================================
   atom_icon.html — .ui-icon
   SVG/mask-based icon atom. Size set by modifier class.
   ========================================================= */

/* Icon Wrapper: Optional container for background shapes */

.ui-icon-wrapper {
  display: inline-flex;
  width: fit-content;

  /* 🔑 CRITICAL */
  align-self: flex-start;   /* stops flex parents stretching it */
  flex-shrink:      0;
  flex-wrap: nowrap;
  transition:       var(--transition-base);
  margin-bottom: 1rem;
}

.ui-icon-standalone {
  display:          inline-flex;
  flex-shrink:      0;
  transition:       var(--transition-base);
  margin-bottom: 1rem;
}

/* Shape Modifiers */
.ui-icon-wrapper--circle  { border-radius: var(--radius-circle); }
.ui-icon-wrapper--rounded { border-radius: var(--radius-lg); }
.ui-icon-wrapper--square  { border-radius: 0; }

/* Wrapper Size / Padding Logic */
.ui-icon-wrapper--sm { padding: 0.5rem; }
.ui-icon-wrapper--md { padding: 0.8rem; }
.ui-icon-wrapper--lg { padding: 1.2rem; }
.ui-icon-wrapper--xl { padding: 1.8rem; }

.ui-icon {
  display:             inline-block;
  line-height:         1;
  vertical-align:      middle;
  flex-shrink:         0;
  transition:          var(--transition-base);
}

/* Standalone / Inner Icon Sizes (Rem-based for scaling) */
.ui-icon--sm  { font-size: 1rem; }
.ui-icon--md  { font-size: 1.8rem; }   /* Default */
.ui-icon--lg  { font-size: 3rem; }
.ui-icon--xl  { font-size: 5rem; }

/* Legacy Mask Support (kept for compatibility) */
.ui-icon-mask {
  -webkit-mask-size: contain;
  mask-size:         contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
  -webkit-mask-position: center;
  mask-position:         center;
}

/* Mask sources — add more in theme override */
.ui-icon--phone   { -webkit-mask-image: url('/themes/base/icons/phone.svg');   mask-image: url('/themes/base/icons/phone.svg'); }
.ui-icon--map-pin { -webkit-mask-image: url('/themes/base/icons/map-pin.svg'); mask-image: url('/themes/base/icons/map-pin.svg'); }


/* =========================================================
   atom_text.html — .ui-text-block
   Rich prose with full layout modifier system.
   ========================================================= */
.ui-text-block {
  line-height: var(--line-height-body);
}

/* ── Paragraph rhythm ── */
.ui-text-block p + p { margin-top: var(--spacing-sm); }
.ui-text-block h1,
.ui-text-block h2,
.ui-text-block h3,
.ui-text-block h4  { margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); }
.ui-text-block ul,
.ui-text-block ol  { padding-left: 1.5em; margin-top: var(--spacing-xs); }
.ui-text-block li  { margin-bottom: 0.3em; }

/* ── Alignment modifiers ── */
.ui-text-block--align-left   { text-align: left; }
.ui-text-block--align-center { text-align: center; }
.ui-text-block--align-right  { text-align: right; }
.ui-text-block--justify      { text-align: justify; }

/* Alignment must cascade into child headings/paragraphs */
.ui-text-block--align-center *,
.ui-text-block--align-center p { text-align: center; }
.ui-text-block--align-right *,
.ui-text-block--align-right p  { text-align: right; }

/* ── Size modifiers ── */
.ui-text-block--size-sm      { font-size: var(--text-sm,   0.875rem); }
.ui-text-block--size-base    { font-size: var(--text-base, 1rem);     }
.ui-text-block--size-lg      { font-size: var(--text-lg,   1.125rem); }
.ui-text-block--size-xl      { font-size: var(--text-xl,   1.25rem);  }
.ui-text-block--size-2xl     { font-size: var(--text-2xl,  1.5rem);   }
.ui-text-block--size-display { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.1; }

/* ── Font weight modifiers ── */
.ui-text-block--weight-light    { font-weight: 300; }
.ui-text-block--weight-normal   { font-weight: 400; }
.ui-text-block--weight-medium   { font-weight: 500; }
.ui-text-block--weight-semibold { font-weight: 600; }
.ui-text-block--weight-bold     { font-weight: 700; }

/* ── Color modifiers — must override inherited ui-text--dark/light on section ──
   Use child selector to force the new color on all descendant text nodes.       */
.ui-text-block--color-default,
.ui-text-block--color-default * { color: inherit; }

.ui-text-block--color-muted,
.ui-text-block--color-muted h1,
.ui-text-block--color-muted h2,
.ui-text-block--color-muted h3,
.ui-text-block--color-muted h4,
.ui-text-block--color-muted p  { color: var(--color-text-muted) !important; }

.ui-text-block--color-accent,
.ui-text-block--color-accent h1,
.ui-text-block--color-accent h2,
.ui-text-block--color-accent h3,
.ui-text-block--color-accent h4,
.ui-text-block--color-accent p  { color: var(--color-accent, var(--accent)) !important; }

.ui-text-block--color-inverse,
.ui-text-block--color-inverse h1,
.ui-text-block--color-inverse h2,
.ui-text-block--color-inverse h3,
.ui-text-block--color-inverse h4,
.ui-text-block--color-inverse p  { color: var(--color-text-inverse, #fff) !important; }

/* ── Max-width modifiers ── */
.ui-text-block--mw-none   { max-width: none; }
.ui-text-block--mw-narrow { max-width: 45ch; }
.ui-text-block--mw-prose  { max-width: 65ch; }
.ui-text-block--mw-wide   { max-width: 85ch; }

/* Eyebrow / label above a heading */
.ui-eyebrow {
  display:         block;
  font-size:       var(--text-xs);
  font-weight:     var(--font-weight-bold);
  text-transform:  uppercase;
  letter-spacing:  0.12em;
  color:           var(--accent);
  margin-bottom:   var(--spacing-xs);
}


/* =========================================================
   Infographic Atoms (Metric, Chart, DataList)
   ========================================================= */

.ui-atom-metric {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) 0;
}

.ui-atom-metric__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ui-atom-metric__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.ui-atom-metric__trend {
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
}

.ui-atom-metric__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.ui-atom-metric__value {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1;
}

.ui-atom-metric__sparkline {
  opacity: 0.8;
  height: 30px;
}

/* ── Chart Atoms ── */
.ui-atom-chart {
  margin-top: var(--spacing-md);
}

.ui-atom-chart__bar-item {
  margin-bottom: var(--spacing-sm);
}

.ui-atom-chart__bar-label-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ui-atom-chart__bar-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.ui-atom-chart__bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease-out;
}

/* ── Data List (Forex/Shares) ── */
.ui-atom-data-list__table {
  width: 100%;
  border-collapse: collapse;
}

.ui-atom-data-list__row {
  border-bottom: 1px solid var(--color-border);
}

.ui-atom-data-list__cell {
  padding: var(--spacing-xs) 0;
  font-size: var(--text-sm);
}

.ui-atom-data-list__label {
  font-weight: 600;
  color: var(--color-text-main);
}

.ui-atom-data-list__value {
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}

.ui-atom-data-list__trend {
  text-align: right;
  padding-left: var(--spacing-sm);
}

.ui-trend-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.ui-trend-badge--up {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.ui-trend-badge--down {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}


/* =========================================================
   atom_form_group.html — .ui-form-group
   Input / label field atom. No visual design — only spacing.
   ========================================================= */
.ui-form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-xs);
}

.ui-form-group label {
  font-size:   var(--text-sm);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-main);
}

.ui-form-input {
  width:         100%;
  padding:       0.7rem 1rem;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    transparent;
  color:         var(--color-text-main);
  font-size:     var(--text-base);
  outline:       none;
  transition:    border-color var(--transition-base);
}

.ui-form-input:focus {
  border-color: var(--accent);
}

.ui-form-input::placeholder {
  color:        var(--color-text-muted);
  font-weight:  var(--font-weight-light);
}

/* Underline-only variant (used in dark contact footers) */
.ui-input-underlined {
  width:         100%;
  background:    transparent;
  border:        none;
  border-bottom: 2px solid var(--color-border);
  padding:       0.8rem 0;
  color:         var(--color-text-main);
  font-size:     var(--text-lg);
  outline:       none;
  transition:    border-color var(--transition-base);
}
.ui-input-underlined:focus        { border-bottom-color: var(--accent); }
.ui-input-underlined::placeholder { color: var(--color-text-muted); font-weight: var(--font-weight-light); }


/* =========================================================
   atom_nav_toggler.html — .ui-nav-toggler
   Hamburger toggle button. Three-line icon pure CSS.
   ========================================================= */
.ui-nav-toggler {
  background:    transparent;
  border:        2px solid var(--color-border);
  border-radius: var(--radius-circle);
  width:         48px;
  height:        48px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    border-color var(--transition-base), background var(--transition-base);
  position:      relative;
  z-index:       var(--z-header);
  padding:       0;
}

.ui-nav-toggler:hover {
  border-color: var(--accent);
}

/* Three-line icon (middle bar + pseudo elements) */
.ui-nav-toggler__icon {
  display:    block;
  width:      22px;
  height:     2px;
  background: var(--color-text-main);
  position:   relative;
  transition: background var(--transition-base);
}

.ui-nav-toggler__icon::before,
.ui-nav-toggler__icon::after {
  content:    '';
  position:   absolute;
  width:      22px;
  height:     2px;
  background: inherit;
  left:       0;
  transition: transform var(--transition-base), top var(--transition-base), width var(--transition-base);
}

.ui-nav-toggler__icon::before { top: -7px; }
.ui-nav-toggler__icon::after  { top:  7px; width: 14px; right: 0; left: auto; }

/* Active state — morphs to X */
.ui-nav-toggler.active .ui-nav-toggler__icon               { background: transparent !important; }
.ui-nav-toggler.active .ui-nav-toggler__icon::before       { top: 0; transform: rotate(45deg); }
.ui-nav-toggler.active .ui-nav-toggler__icon::after        { top: 0; width: 22px; transform: rotate(-45deg); }


/* =========================================================
   BADGE / TAG / PILL  (used in multiple templates)
   ========================================================= */
.ui-badge,
.ui-tag {
  display:         inline-flex;
  align-items:     center;
  gap:             0.35em;
  padding:         0.3em 0.9em;
  border-radius:   var(--radius-pill);
  font-size:       var(--text-xs);
  font-weight:     var(--font-weight-bold);
  text-transform:  uppercase;
  letter-spacing:  0.09em;
  white-space:     nowrap;
}

/* Semantic badge modifiers (color variants set by theme) */
.ui-badge--primary { background: var(--accent);            color: var(--color-text-inverse); }
.ui-badge--outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
.ui-badge--dark    { background: var(--color-secondary);   color: var(--color-text-inverse); }
.ui-badge--muted   { background: var(--color-bg-muted);    color: var(--color-text-main); }


/* =========================================================
   DIVIDERS
   ========================================================= */
.ui-divider {
  border:  0;
  height:  1px;
  background: var(--color-border);
  margin:  var(--spacing-md) 0;
}

.ui-divider--accent {
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0.5;
}


/* =========================================================
   LINK ATOM
   ========================================================= */
.ui-link {
  color:           var(--accent);
  font-weight:     var(--font-weight-medium);
  display:         inline-flex;
  align-items:     center;
  gap:             0.3em;
  text-decoration: none;
  border-bottom:   1.5px solid transparent;
  transition:      border-color var(--transition-base), color var(--transition-base);
}
.ui-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-dark);
}


/* =========================================================
   atom_nav_item.html — .ui-nav-item  /  .ui-nav-link
   Single navigation <li><a> unit.
   LIST-LEVEL geometry only — colors are mol_nav's concern.
   ========================================================= */
.ui-nav-item {
  list-style: none;
}

/* Base link — all nav-link variants inherit this */
.ui-nav-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4em;
  text-decoration: none;
  color:           inherit;              /* color set by nav variant in mol_nav */
  font-size:       var(--text-base);
  font-weight:     var(--font-weight-medium);
  white-space:     nowrap;
  transition:      color var(--transition-base), background var(--transition-fast);
}

/* Active state marker (class set by template via child.active) */
.ui-nav-item--active > .ui-nav-link,
.ui-nav-link.active {
  color: var(--accent);
}

/* Visual variant modifiers — structural geometry only */
.ui-nav-link--pill {
  padding:       0.35em 1em;
  border-radius: var(--radius-pill);
  border:        1.5px solid currentColor;
}

.ui-nav-link--icon {
  width:           36px;
  height:          36px;
  justify-content: center;
  border-radius:   var(--radius-circle);
  border:          1.5px solid var(--color-border);
  font-size:       1rem;
}

.ui-nav-link--social {
  width:           36px;
  height:          36px;
  justify-content: center;
  border-radius:   var(--radius-circle);
  border:          1.5px solid var(--color-border);
  font-size:       1rem;
}


/* =========================================================
   atom_background.html — .ui-section__bg  /  .ui-section__mask
   Background position layer rendered inside section shells.
   Always absolute, always below content (z-index < content).
   See atom_background.html for variant class list.
   ========================================================= */

/* Common position for ALL bg variants */
.ui-section__bg {
  position: absolute;
  inset:    0;            /* top:0 right:0 bottom:0 left:0 */
  z-index:  0;
  pointer-events: none;
}

/* Color / gradient types just need fill — no extra geometry */
.ui-bg--color,
.ui-bg--gradient {
  width:  100%;
  height: 100%;
}

/* Image type — CSS background-image (non-parallax path) */
.ui-bg--image {
  background-repeat:   no-repeat;
  background-size:     cover;
  background-position: center center;
}

/* Video type — positions the <video> to fill the container */
.ui-bg--video {
  overflow: hidden;
}
.ui-bg__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Overlay mask — sits above bg (z=1) but below content (z=2) */
.ui-section__mask {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
}

/* =========================================================
   Slideshow Background — .ui-bg--slideshow
   ========================================================= */
.ui-bg--slideshow {
  background-color: #000;
  overflow: hidden;
}

.ui-bg-slide, .ui-fg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  
  /* Calculate animation timing based on —slide-count and —slide-interval */
  /* duration = count * interval */
  /* delay = index * interval */
  animation-duration: calc(var(--slide-count) * var(--slide-interval));
  animation-delay:    calc(var(--slide-index) * var(--slide-interval));
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

/* ── TRANSITION: Spider-Verse Pixel Fade ── */
.ui-transition--pixel-fade .ui-bg-slide,
.ui-synced-foregrounds .ui-fg-slide {
  animation-name: anim-pixel-reveal;
  
  /* Pixel mask — a custom dot grid for reveal */
  -webkit-mask-image: radial-gradient(circle, #000 100%, transparent 100%);
  -webkit-mask-size:  20px 20px;
  -webkit-mask-repeat: repeat;
  mask-image: radial-gradient(circle, #000 100%, transparent 100%);
  mask-size:  20px 20px;
  mask-repeat: repeat;
}

@keyframes anim-pixel-reveal {
  /* 
     Turn active for exactly 1 interval duration.
     Example for 5 slides: each slide turn is 20%.
     Fade in: 0% to 5%
     Active: 5% to 20%
     Fade out: 20% to 25%
  */
  0%   { opacity: 0; -webkit-mask-size: 0px 0px; mask-size: 0px 0px; z-index: 1; }
  5%   { opacity: 1; -webkit-mask-size: 40px 40px; mask-size: 40px 40px; }
  20%  { opacity: 1; -webkit-mask-size: 40px 40px; mask-size: 40px 40px; z-index: 1; }
  25%  { opacity: 0; -webkit-mask-size: 0px 0px; mask-size: 0px 0px; z-index: 0; }
  100% { opacity: 0; }
}

/* ── TRANSITION: Smooth Fade ── */
.ui-transition--fade .ui-bg-slide {
  animation-name: anim-fade-reveal;
}

@keyframes anim-fade-reveal {
  0%   { opacity: 0; z-index: 1; }
  5%   { opacity: 1; }
  20%  { opacity: 1; z-index: 1; }
  25%  { opacity: 0; z-index: 0; }
  100% { opacity: 0; }
}

/* Layer: molecules.css */
/*
 * =========================================================
 * BASE THEME — molecules.css
 * LAYER: Components — Level 2 (Molecules)
 * =========================================================
 * WHAT GOES HERE:
 *   Composed UI patterns built from multiple atoms.
 *   Each block maps to one molecule HTML template.
 *
 *   STRUCTURAL RULES ONLY:
 *     - Flexbox / grid composition of child atoms
 *     - Internal spacing (gap, padding)
 *     - Border geometry
 *     - Transition for interactive molecules
 *
 *   DO NOT PUT HERE:
 *     - Specific background colors / gradients
 *     - Absolute positioning of specific card types
 *     - Font-family overrides
 *     - Any Potu/variant-specific visual treatments
 *     → Those belong in the variant theme's molecules.css
 *
 * FILES TARGETED:
 *   molecules/mol_card.html
 *   molecules/mol_hero.html           (hero text block)
 *   molecules/mol_media.html          (image+text pair)
 *   molecules/mol_service_card.html
 *   molecules/mol_testimonial_card.html
 *   molecules/mol_form.html
 *   molecules/mol_info_list.html
 *   molecules/mol_text_container.html
 *   molecules/mol_cta.html
 * =========================================================
 */


/* =========================================================
   mol_title.html — .ui-mol-title
   Composed heading block: eyebrow + heading tag + subtitle.
   Alignment and color variant controlled by BEM modifiers.
   NOTE: .ui-eyebrow geometry is set in atoms.css — not here.
   ========================================================= */
.ui-mol-title {
  max-width:   800px;
}

.ui-mol-title__heading {
  margin-top:    0;
  margin-bottom: var(--spacing-sm);
  /* font-size, weight: inherited from core.css h1/h2/h3 scale */
}

.ui-mol-title__subtitle {
  font-size:   var(--text-lg);
  line-height: var(--line-height-body);
  color:       var(--color-text-muted);
  max-width:   60ch;
  margin-top:  0;
}

/* Alignment modifiers */
.ui-mol-title--center { text-align: center; margin-left: auto; margin-right: auto; }
.ui-mol-title--right  { text-align: right;  margin-left: auto; }
.ui-mol-title--left   { text-align: left; }

.ui-mol-subtitle--center { text-align: center; margin-left: auto; margin-right: auto; }
.ui-mol-subtitle--right  { text-align: right;  margin-left: auto; }
.ui-mol-subtitle--left   { text-align: left; }

/* Color variant — applied when section text_color="light" */
.ui-mol-title--light .ui-mol-title__heading,
.ui-mol-title--light .ui-mol-title__subtitle,
.ui-mol-title--light .ui-eyebrow {
  color: var(--color-text-inverse);
}
.ui-mol-title--light .ui-mol-title__subtitle {
  color: rgba(255, 255, 255, 0.75);
}

/* Color variant — applied when section text_color="dark" */
.ui-mol-title--dark .ui-mol-title__heading,
.ui-mol-title--dark .ui-mol-title__subtitle,
.ui-mol-title--dark .ui-eyebrow {
  color: var(--color-text-main);
}
.ui-mol-title--dark .ui-mol-title__subtitle {
  color: rgba(3, 3, 3, 0.75);
}

/* Display variant — scaled for full-viewport hero usage */
.ui-mol-title--display .ui-mol-title__heading {
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.95;
}


/* =========================================================
   mol_nav.html — .ui-mol-nav
   Universal navigation molecule: header, footer, drawer,
   sidebar, social cluster, contact list.
   BEM element classes group atoms into nav patterns.

   ATOM DEPENDENCY:
     .ui-nav-item  .ui-nav-link  .ui-nav-link--*
     → geometry defined in atoms.css; do NOT repeat here.
   ========================================================= */

/* ── Base: horizontal row (header default) ── */
.ui-mol-nav {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
  padding:     0;
  margin:      0;
  list-style:  none;
  width:       100%;
}

.ui-mol-nav--horizontal {
  justify-content: space-between;
}

.ui-mol-nav__left,
.ui-mol-nav__right {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
}

.ui-mol-nav__right {
  margin-left: auto; /* Fallback for older browsers or nested flex */
}

/* ── Logo group ── */
.ui-nav__logo {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-xs);
  text-decoration: none;
  flex-shrink: 0;
}
.ui-nav__logo img    { height: 40px; width: auto; }
.ui-nav__logo-text   { font-weight: var(--font-weight-bold); white-space: nowrap; }

/* ── Link list ── */
.ui-nav__list {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
  list-style:  none;
  padding:     0;
  margin:      0;
}

/* ── Actions (CTA button group) — right of nav ── */
.ui-nav__actions {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
  flex-shrink: 0;
}

/* ── Social icon cluster ── */
.ui-nav__socials {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-xs);
  list-style:  none;
  padding:     0;
  margin:      0;
}
/* Social link sizing: extends .ui-nav-link--social from atoms.css */
.ui-nav__social-link {
  width:           34px;
  height:          34px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-circle);
  border:          1.5px solid var(--color-border);
  transition:      border-color var(--transition-base),
                   background    var(--transition-base),
                   color         var(--transition-base);
}
.ui-nav__social-link:hover {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--color-text-inverse);
}

/* ── Contact info group ── */
.ui-nav__contacts {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--spacing-sm);
}
.ui-nav__contact-item {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-xs);
  font-size:   var(--text-sm);
}
.ui-nav__contact-value { font-weight: var(--font-weight-medium); }

/* ── Toggler slot inside horizontal nav ── */
.ui-mol-nav__toggler {
  display: none;           /* shown on mobile by organism media query */
  margin-left: auto;
}

/* ── VARIANT: vertical / footer — stacked column ── */
.ui-mol-nav--vertical,
.ui-mol-nav--footer {
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-sm);
}

.ui-mol-nav--vertical .ui-nav__list,
.ui-mol-nav--footer   .ui-nav__list {
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-xs);
}

/* ── VARIANT: drawer — full-height side panel ── */
.ui-mol-nav--drawer {
  position:   fixed;
  top:        0;
  right:      -100%;
  width:      clamp(280px, 80vw, 360px);
  height:     100vh;
  z-index:    var(--z-drawer);
  overflow-y: auto;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0;
  transition:     right var(--transition-slow);
}
.ui-mol-nav--drawer.active { right: 0; }

.ui-mol-nav__drawer-inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-lg);
  padding:        var(--spacing-lg);
  min-height:     100%;
}

.ui-mol-nav__drawer-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.ui-nav__list--drawer {
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-sm);
  list-style:     none;
  padding:        0;
  margin:         0;
  width:          100%;
}

.ui-nav__list--drawer .ui-nav__link {
  font-size:   var(--text-xl);
  font-weight: var(--font-weight-medium);
  padding:     var(--spacing-xs) 0;
  display:     block;
}

/* ── Search slot ── */
.ui-mol-nav__search {
  display:      flex;
  align-items:  center;
  border:       1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:     hidden;
}
.ui-mol-search__input {
  border:     none;
  outline:    none;
  background: transparent;
  padding:    0.5rem 0.75rem;
  font-size:  var(--text-sm);
  min-width:  180px;
}
.ui-mol-search__btn {
  padding:    0.5rem 0.75rem;
  background: transparent;
  border:     none;
  cursor:     pointer;
  display:    flex;
  align-items:     center;
  justify-content: center;
  transition: background var(--transition-base);
}

/* ── Mobile: hide nav list, show toggler ── */
@media (max-width: 991px) {
  .ui-mol-nav--horizontal .ui-nav__list    { display: none; }
  .ui-mol-nav--horizontal .ui-nav__actions { display: none; }
  .ui-mol-nav--horizontal .ui-mol-nav__toggler { display: flex; }
}




/* =========================================================
   mol_card.html — .ui-card
   Generic content card: image, title, body, footer CTA.
   ========================================================= */



.ui-card {
  display:        flex;
  flex-direction: column;
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  border:         1.5px solid var(--color-border);
  background:     var(--color-bg-main);
  transition:     box-shadow var(--transition-base), transform var(--transition-base);
  flex: 1;
}

.ui-card:hover {
  box-shadow: var(--shadow-lg);
  transform:  translateY(-4px);
}

.ui-card__image-wrap {
  width:      100%;
  aspect-ratio: 16 / 9;
  overflow:   hidden;
  flex-shrink: 0;
}

.ui-card__image-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.ui-card:hover .ui-card__image-wrap img { transform: scale(1.05); }

.ui-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--spacing-md);
}

.ui-card__title {
  font-size:     var(--text-xl);
  font-weight:   var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.ui-card__desc {
  color:         var(--color-text-muted);
  font-size:     var(--text-sm);
  flex:          1;
  margin-bottom: var(--spacing-md);
}

.ui-card__footer {
  margin-top: auto;
}


.ui-mol-service-card__desc {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

/* Illustration image at bottom of tall card */
.ui-mol-service-card__illustration {
  width:      100%;
  max-width:  280px;
  margin:     auto auto 0 auto;
  display:    block;
  object-fit: contain;
}

.ui-prose--default { color: grey }
.ui-prose--light   { color: white; }
.ui-prose--dark    { color: black; }


/* =========================================================
   mol_testimonial_card.html — .ui-mol-testi-card
   Testimonial card: rating stars, quote, name/avatar.
   Color (yellow/mint/pink) and position are theme concerns.
   ========================================================= */
.ui-mol-testi-card {
  padding:       var(--spacing-md);
  border-radius: var(--radius-lg);
  max-width:     360px;
  box-shadow:    var(--shadow-lg);
}

.ui-mol-testi-card__logo {
  max-width:     100px;
  margin-bottom: var(--spacing-sm);
}

.ui-mol-testi-card__quote {
  font-style:    italic;
  font-size:     var(--text-lg);
  line-height:   1.4;
  margin-bottom: var(--spacing-sm);
}

.ui-mol-testi-card__rating {
  font-weight: var(--font-weight-bold);
  font-size:   var(--text-sm);
}


/* =========================================================
   mol_media.html — .ui-media
   Unified image+text / video+text two-column molecule.
   image_side controls column order via BEM modifiers.
   ========================================================= */
.ui-media {
  padding: var(--spacing-2xl) 0;
}

/* Background variants (theme sets colors) */
.ui-media--muted { background-color: var(--color-bg-muted); }
.ui-media--dark  { background-color: var(--color-bg-dark); color: var(--color-text-inverse); }
.ui-media--dark .ui-mol-media__title,
.ui-media--dark .ui-mol-media__subtitle { color: var(--color-text-inverse); }
.ui-media--dark .ui-mol-media__body    { color: rgba(255,255,255,0.7); }

/* Two-column flex row */
.ui-media__row {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-2xl);
  align-items: center;
}

/* Each column — equal halves */
.ui-media__col {
  flex:      1 1 320px;
  min-width: 0;
}

/* Column order (controlled by template via data-image_side) */
.ui-media__col--first  { order: 1; }
.ui-media__col--second { order: 2; }

/* Header block — title + subtitle */
.ui-media__header { margin-bottom: var(--spacing-md); }
.ui-media__header--center { text-align: center; }
.ui-media__header--right  { text-align: right; }
.ui-media__header--left   { text-align: left; }

.ui-media__subtitle {
  display:        block;
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--accent);
  margin-bottom:  var(--spacing-xs);
}

.ui-media__title {
  font-size:   clamp(1.8rem, 3.5vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin:      0;
}

.ui-media__body {
  font-size:     var(--text-base);
  line-height:   var(--line-height-body);
  color:         var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.ui-media__cta      { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-xs); }
.ui-media__children { margin-top: var(--spacing-md); }

/* Media column */
.ui-media__media-wrapper { position: relative; overflow: hidden; }

.ui-media__img {
  width:      100%;
  height:     auto;
  display:    block;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.ui-media__img--rounded { border-radius: var(--radius-xl); }
.ui-media__img--shadow  { box-shadow: var(--shadow-lg); }
.ui-media__media-wrapper:hover .ui-media__img { transform: scale(1.03); }

/* 16:9 video wrapper */
.ui-media__video-wrap {
  position:       relative;
  padding-bottom: 56.25%;
  height:         0;
  overflow:       hidden;
  border-radius:  var(--radius-lg);
}
.ui-media__iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Responsive stacking */
@media (max-width: 991px) {
  .ui-media__row          { flex-direction: column; gap: var(--spacing-lg); }
  .ui-media__col--first,
  .ui-media__col--second  { order: unset; }
  .ui-media__col--media   { order: -1; }   /* image always on top when stacked */
  .ui-media__header--center,
  .ui-media__header--right { text-align: left; }
}


/* =========================================================
   mol_form.html — .ui-mol-form-card + .ui-mol-form
   Contact / enquiry form molecule.
   ========================================================= */

/* ── Outer card shell — the standout container ── */
.ui-mol-form-card {
  position:        relative;
  padding:         var(--spacing-lg) var(--spacing-xl);
  border-radius:   var(--radius-card, 1rem);
  border:          1px solid rgba(255, 255, 255, 0.08);
  /* Subtle glassmorphism surface */
  background:      rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:      0 4px 24px rgba(0, 0, 0, 0.18),
                   inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow:        hidden;
}

/* Fine accent stripe along the left edge */
.ui-mol-form-card::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              10%;
  bottom:           10%;
  width:            3px;
  border-radius:    0 2px 2px 0;
  background:       var(--color-accent, var(--accent));
  opacity:          0.85;
}

/* ── Form title ── */
.ui-mol-form-card__title {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  font-size:     var(--text-lg);
  font-weight:   var(--font-weight-semibold);
  margin:        0 0 var(--spacing-md) 0;
  padding-left:  var(--spacing-xs);
  letter-spacing: -0.01em;
}

/* Small pulsing dot accent beside the title */
.ui-mol-form-card__title-accent {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--color-accent, var(--accent));
  flex-shrink:   0;
  animation:     form-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes form-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── Inner form layout ── */
.ui-mol-form {
  display:        flex;
  flex-direction: column;
  gap:            0; /* fields handle their own gap */
}

.ui-mol-form__fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-sm);
  margin-bottom:  var(--spacing-md);
}

.ui-mol-form__submit { align-self: flex-start; }

/* ── Row layout helper (2-column fields) ── */
.ui-mol-form__row {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-md);
}
.ui-mol-form__row .form-group { flex: 1 1 180px; }


/* =========================================================
   mol_formgroup.html — .ui-form-group
   Universal form input wrapper molecule.
   ========================================================= */

.ui-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  width: 100%;
}

.ui-form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-main);
  display: flex;
  gap: 4px;
}

.ui-form-required {
  color: var(--accent);
}

.ui-form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-main);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ui-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05); /* Generic focus ring, theme overrides it */
}

.ui-form-textarea {
  resize: vertical;
  min-height: 100px;
}

.ui-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  padding-right: 2.5rem;
}



/* =========================================================
   mol_info_list.html — .ui-mol-info-list
   Contact info item (icon + label + value stack).
   ========================================================= */
.ui-mol-info-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--spacing-lg);
}

.ui-mol-info-item {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-md);
}


/* =========================================================
   mol_table.html — .ui-mol-table
   Responsive data table with multiple stylistic variants.
   ========================================================= */
.ui-mol-table-container {
  margin-bottom: var(--spacing-lg);
}

.ui-mol-table__title {
  font-size:     var(--text-lg);
  font-weight:   var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color:         var(--color-text-main);
}

.ui-mol-table-responsive {
  width:      100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-card, 0.5rem);
}

.ui-mol-table {
  width:           100%;
  border-collapse: collapse;
  text-align:      left;
  font-size:       var(--text-base);
}

.ui-mol-table th,
.ui-mol-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-main);

}

.ui-mol-table th {
  font-weight: var(--font-weight-bold);
  background:  rgba(0, 0, 0, 0.02);
}

/* ── Variant: Striped ── */
.ui-mol-table--variant-striped tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}

/* ── Variant: Striped (Basic Theme / Dark) ── */
[data-theme="basic"] .ui-mol-table--variant-striped tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Variant: Bordered ── */
.ui-mol-table--variant-bordered .ui-mol-table {
  border: 1px solid var(--color-border);
}
.ui-mol-table--variant-bordered th,
.ui-mol-table--variant-bordered td {
  border: 1px solid var(--color-border);
}

/* ── Header Background Colors ── */
.ui-mol-table--header-accent th {
  background: var(--color-accent, var(--accent));
  color:      var(--color-text-inverse, #fff);
  border-bottom: none;
}

.ui-mol-table--header-dark th {
  background: var(--color-bg-dark, #111);
  color:      var(--color-text-inverse, #fff);
  border-bottom: none;
}

.ui-mol-table--header-glass th {
  background:      rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Body Design ── */
.ui-mol-table--body-compact th,
.ui-mol-table--body-compact td {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--text-sm);
}

.ui-mol-table--body-spaced th,
.ui-mol-table--body-spaced td {
  padding: var(--spacing-md) var(--spacing-lg);
}

.ui-mol-info-item__icon {
  width:           40px;
  height:          40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-circle);
  flex-shrink:     0;
  font-size:       1.2rem;
  background:      rgba(255,255,255,0.05);
  color:           var(--accent);
}

.ui-mol-info-item__label {
  display:         block;
  font-size:       var(--text-xs);
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  font-weight:     var(--font-weight-bold);
  color:           var(--color-text-muted);
  margin-bottom:   2px;
}

.ui-mol-info-item__value {
  font-size:   var(--text-lg);
  font-weight: var(--font-weight-medium);
}


/* =========================================================
   mol_infographic_card.html — .ui-mol-infographic-card
   Dashboard-style card container for data atoms.
   ========================================================= */

.ui-mol-infographic-card {
  padding: var(--spacing-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  background: var(--color-bg-main);
  border-radius: var(--radius-card, 12px);
  border: 1px solid var(--color-border);
}

.ui-mol-infographic-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ui-mol-infographic-card__identity {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.ui-mol-infographic-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-accent);
}

.ui-mol-infographic-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  color: var(--color-text-main);
}

.ui-mol-infographic-card__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 2px 0 0 0;
}

.ui-mol-infographic-card__body {
  flex: 1;
}

/* ── Variants ── */
.ui-mol-infographic-card--analytics {
  padding: var(--spacing-lg);
}

.ui-mol-infographic-card--feed {
  padding: var(--spacing-sm) var(--spacing-md);
}

/* Texture integration (e.g. glassmorphism) */
.ui-texture--glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="noir"] .ui-texture--glass {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 175, 55, 0.1);
}


/* =========================================================
   mol_text_container.html — .ui-mol-text
   Simple heading + body text container, often with a CTA.
   ========================================================= */
.ui-mol-text {
  max-width: 720px;
}

.ui-mol-text__eyebrow { margin-bottom: var(--spacing-xs); }
.ui-mol-text__title   { margin-bottom: var(--spacing-sm); }
.ui-mol-text__body    { margin-bottom: var(--spacing-md); color: var(--color-text-muted); }
.ui-mol-text__cta     { margin-top: var(--spacing-md); display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }


/* =========================================================
   mol_cta.html — .ui-mol-cta
   Standalone CTA molecule (heading + button group).
   ========================================================= */
.ui-mol-cta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-md);
}

.ui-mol-cta--center { align-items: center; }
.ui-mol-cta--left { align-items: flex-start; }
.ui-mol-cta--right { align-items: flex-end; }

.ui-mol-cta__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-sm);
}


/* =========================================================
   Navigation molecules (header / drawer)
   ========================================================= */

/* mol used by mol_nav / layout_header */
.ui-mol-nav {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-lg);
  list-style:  none;
  padding:     0;
  margin:      0;
}

.ui-mol-nav__link {
  font-size:       var(--text-base);
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
  color:           var(--color-text-main);
  transition:      color var(--transition-base);
  white-space:     nowrap;
}
.ui-mol-nav__link:hover { color: var(--accent); }
.ui-mol-nav__link.active { color: var(--color-primary); }


/* ═══════════════════════════════════════════════════════════════════
   5. CHAMELEON TYPOGRAPHICAL MASONRY GRID (Structure)
   ═══════════════════════════════════════════════════════════════════ */
/* 
   These classes provide the physics and grid coordinate structure. 
   Themes override to provide aesthetic execution (colors, borders, blurs).
*/
.ui-letter-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  pointer-events: none;
  overflow: visible; 
  margin-left: 2.5rem;
  gap: 1rem;
  background: none;
}

.ui-letter-grid--over { z-index: 10; }
.ui-letter-grid--behind { z-index: 2; } 

.ui-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 1;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.ui-letter__char {
  display: flex;
  width: 100%;
  height: 80%;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

/* Search molecule */
.ui-mol-search__wrapper {
  display:      flex;
  align-items:  center;
  border:       1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:     hidden;
}

.ui-mol-search__input {
  border:      none;
  outline:     none;
  background:  transparent;
  padding:     0.5rem 0.75rem;
  font-size:   var(--text-sm);
  min-width:   180px;
}

.ui-mol-search__btn {
  padding:         0.5rem 0.75rem;
  border:          none;
  cursor:          pointer;
  background:      transparent;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--transition-base);
}

/* ── Ken Burns Background Animation ── */
.ui-bg-kenburns {
    animation: kenburns 20s ease-out infinite alternate;
    transform-origin: center center;
}

@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}


/* =========================================================
   mol_metric_card.html — .ui-metric-card
   KPI / stat card: value, label, trend badge, icon.
   ========================================================= */
.ui-metric-card {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding:        1.5rem;
  border-radius:  var(--radius-lg);
  border:         1px solid var(--color-border);
  background:     var(--color-bg-card, #fff);
  transition:     transform 0.2s ease, box-shadow 0.2s ease;
  position:       relative;
  overflow:       hidden;
}

.ui-metric-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Header: icon + label ── */
.ui-metric-card__header {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
}

.ui-metric-card__icon-wrap {
  width:            36px;
  height:           36px;
  border-radius:    var(--radius-md);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       rgba(0,0,0,0.05);
  font-size:        1.1rem;
  flex-shrink:      0;
}

.ui-metric-card__label {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--color-text-muted);
}

/* ── Big Number ── */
.ui-metric-card__value {
  font-size:   clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color:       var(--color-text-main);
  letter-spacing: -0.02em;
}

.ui-metric-card__prefix,
.ui-metric-card__suffix {
  font-size:   0.65em;
  font-weight: 600;
  color:       var(--color-text-muted);
  vertical-align: super;
}
.ui-metric-card__suffix { vertical-align: baseline; }

/* ── Footer: trend + period ── */
.ui-metric-card__footer {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
}

.ui-metric-card__sublabel {
  font-size: 0.75rem;
  color:     var(--color-text-muted);
}

.ui-metric-card--default{
  background: var(--color-bg-card);
  border: 1px solid var(--color-primary);
}

/* ── Variant: accent ── */
.ui-metric-card--accent {
  background:   var(--accent);
  border-color: var(--accent);
}

.ui-metric-card--accent .ui-metric-card__value,
.ui-metric-card--accent .ui-metric-card__label,
.ui-metric-card--accent .ui-metric-card__sublabel { color: rgba(255,255,255,0.9); }
.ui-metric-card--accent .ui-metric-card__prefix,
.ui-metric-card--accent .ui-metric-card__suffix   { color: rgba(255,255,255,0.7); }
.ui-metric-card--accent .ui-metric-card__icon-wrap { background: rgba(255,255,255,0.2); color: #fff; }
.ui-metric-card--accent .ui-trend-badge--up        { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Variant: dark ── */
.ui-metric-card--dark {
  background:   var(--color-secondary, #1a1a2e);
  border-color: rgba(255,255,255,0.08);
}
.ui-metric-card--dark .ui-metric-card__value  { color: #fff; }
.ui-metric-card--dark .ui-metric-card__label,
.ui-metric-card--dark .ui-metric-card__sublabel { color: rgba(255,255,255,0.5); }
.ui-metric-card--dark .ui-metric-card__icon-wrap { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }

/* ── Variant: glass ── */
.ui-metric-card--glass {
  background:         rgba(255,255,255,0.6);
  backdrop-filter:    blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:             1px solid rgba(255,255,255,0.4);
  box-shadow:         0 4px 24px rgba(0,0,0,0.06);
}


/* =========================================================
   mol_chart_holder.html — .ui-chart-holder
   Renders bar, donut, or line placeholder charts.
   ========================================================= */
.ui-chart-holder {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  height:         100%;
}

.ui-chart-holder__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.ui-chart-holder__title {
  font-size:   0.9rem;
  font-weight: 700;
  color:       var(--color-text-main);
  margin:      0;
}

.ui-chart-holder__body {
  display:        flex;
  flex-direction: column;
  gap:            0.85rem;
  flex:           1;
}

.ui-chart-holder__body--center {
  align-items:     center;
  justify-content: center;
}

/* ── Bar Items ── */
.ui-chart-bar__item { display: flex; flex-direction: column; gap: 4px; }

.ui-chart-bar__meta {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}

.ui-chart-bar__label {
  font-size:   0.78rem;
  font-weight: 600;
  color:       var(--color-text-main);
}

.ui-chart-bar__pct {
  font-size:   0.72rem;
  font-weight: 700;
  color:       var(--color-text-muted);
  font-family: var(--font-mono, monospace);
}

.ui-chart-bar__track {
  width:         100%;
  height:        8px;
  background:    var(--color-border);
  border-radius: 99px;
  overflow:      hidden;
}

.ui-chart-bar__fill {
  height:        100%;
  border-radius: 99px;
  transition:    width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ── Donut Chart ── */
.ui-chart-donut {
  position:        relative;
  width:           160px;
  height:          160px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.ui-chart-donut__svg {
  width:    100%;
  height:   100%;
  position: absolute;
  top:      0;
  left:     0;
}

.ui-chart-donut__label {
  position:       relative;
  z-index:        1;
  text-align:     center;
  pointer-events: none;
}

.ui-chart-donut__pct {
  font-size:   1.6rem;
  font-weight: 800;
  color:       var(--color-text-main);
  line-height: 1;
}

/* ── Line Placeholder ── */
.ui-chart-line-placeholder {
  background:    rgba(0,0,0,0.02);
  border-radius: var(--radius-md);
  overflow:      hidden;
  padding:       0.5rem 0;
}


/* =========================================================
   o-infograph-block layout helpers
   ========================================================= */
.o-infograph__panel {
  height:    100%;
  box-sizing: border-box;
}

.o-infograph__data-row > div {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .o-infograph__metrics-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .o-infograph__data-row {
    flex-direction: column;
  }
  .o-infograph__data-row > div {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .o-infograph__metrics-row {
    grid-template-columns: 1fr !important;
  }
}

/* Layer: organisms.css */
/*
 * =========================================================
 * BASE THEME — organisms.css
 * LAYER: Components — Level 3 (Organisms / Section Shells)
 * =========================================================
 *
 * WHAT GOES HERE:
 *   Full-width section containers and page-level layout shells.
 *   Each block maps to ONE organism HTML template.
 *
 *   STRUCTURAL RULES ONLY:
 *     - Section position context (relative, overflow:hidden)
 *     - z-index stacking of bg / mask / content layers
 *     - Section min-height and flex/grid composition
 *     - Container-level padding rhythm
 *     - Responsive column reordering
 *
 *   DRY BOUNDARIES:
 *     ✗ Do NOT re-style atoms (.ui-button, .ui-image, etc.)
 *       → already in atoms.css
 *     ✗ Do NOT re-style molecules (.ui-mol-card, .ui-mol-nav, etc.)
 *       → already in molecules.css
 *     ✗ Do NOT set colors, gradients, or bg-images
 *       → those belong in the variant theme's CSS override
 *
 * FILES TARGETED (3 organism templates):
 *   organisms/content_block.html    — universal content section
 *   organisms/listing_section.html    — universal listing grid
 *   organisms/navigation_section.html — header, footer, sidebar nav
 *
 * Jarallax bg container CSS (.ui-section__bg, .ui-section__mask)
 * is defined in atoms.css (atom_background.html). Not repeated here.
 * =========================================================
 */


/* =========================================================
   SHARED — All section organisms
   Every section inherits this position context so that
   atom_background.html can position itself with inset:0.
   ========================================================= */
.ui-section {
  position: relative;
  /* stacking context for absolute bg layers */
  overflow: hidden;
  /* clips jarallax transforms + bg overflow */
}

/* Content wrapper — always z:2 (above bg:0 and mask:1) */
.ui-section__content {
  position: relative;
  z-index: 2;
}

/* Prose block inside any section */
.ui-section__prose {
  max-width: 72ch;
  margin-bottom: var(--spacing-md);
}

/* CTA button strip inside any section */
.ui-section__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* Pill label (used in portfolio above heading) */
.ui-section__pill {
  display: inline-block;
  border: 1px solid var(--color-border);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-md);
}

/* Image slot inside section */
.ui-section__image {
  width: 100%;
  overflow: hidden;
}

.ui-section__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Text color modifier classes (set by template via data.text_color) */
.ui-text--light {
  color: var(--color-text-inverse);
}

.ui-text--dark {
  color: var(--color-text-main);
}


/* =========================================================
   content_block.html — .ui-content-section
   Universal section: hero, portfolio, testimonials,
   discuss, contact, generic content.
   Layout variant is driven by data-layout attribute.
   Theme CSS targets data-section-variant for aesthetics.
   =========================================================

   STACKING (z-index):
     0  atom_background (.ui-section__bg)   — atoms.css
     1  .ui-section__mask                   — atoms.css
     2  .ui-section__content                — defined above
   ========================================================= */
.ui-content-section {
  /* min-height set inline by template (e.g. 100vh for hero).
     No default — standard sections size to their content. */
  display: flex;
  flex-direction: column;
}

/* ── LAYOUT: full ──────────────────────────────────────────
   Single full-width column — hero, discuss, CTA sections.
   Content fills the available width; template constrains via
   .ui-large-container. ── */
[data-layout="full"] .ui-section__content {
  display: flex;
  flex-direction: column;
  /* Horizontal centering is handled by the container utility */
}

/* ── LAYOUT: centered ──────────────────────────────────────
   Center-aligned column — portfolio, newsletter sections. ── */
.ui-section__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Category filter pills row (portfolio) */
.ui-section__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

/* ── LAYOUT: two-col / two-col-rev ────────────────────────
   Two-column flex: main content + secondary (image or cards).
   Reversed variant flips column order visually. ── */
.ui-section__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

.ui-section__row--rev {
  flex-direction: row-reverse;
}

.ui-section__col {
  flex: 1 1 320px;
  min-width: 0;
}

.ui-section__col--main {
  min-width: 280px;
}

.ui-section__col--secondary {
  min-width: 260px;
}

/* Children slot — stacked child molecules (testimonial cards etc.) */
.ui-section__children {
  position: relative;
}

.ui-section__body {
  position: relative;
}

@media (max-width: 991px) {

  .ui-section__row,
  .ui-section__row--rev {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
}

/* ── LAYOUT: grid ──────────────────────────────────────────
   Title-block + card grid — services section style.
   Grid structure set here; cell placement (col/row span)
   is theme CSS concern. ── */
.ui-section__grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

/* Title occupies first grid cell (span can be set by theme) */
.ui-section__grid-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-lg);
}

@media (max-width: 991px) {
  .ui-section__grid-wrapper {
    grid-template-columns: 1fr;
  }

  .ui-section__grid-title {
    grid-column: 1;
    grid-row: auto;
  }
}

/* =========================================================
   INFOGRAPHIC SPATIAL ORCHESTRATOR
   Used in infograph_block.html
   ========================================================= */
.o-infograph__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
}

/* Intelligent Span Utilities */
.u-span-1 { grid-column: span 1; } /* 25% */
.u-span-2 { grid-column: span 2; } /* 50% */
.u-span-3 { grid-column: span 3; } /* 75% */
.u-span-4 { grid-column: span 4; } /* 100% */

@media (max-width: 991px) {
  .o-infograph__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .u-span-2, .u-span-3, .u-span-4 { grid-column: span 2; }
}

@media (max-width: 575px) {
  .o-infograph__grid {
    grid-template-columns: 1fr;
  }
  .u-span-1, .u-span-2, .u-span-3, .u-span-4 { grid-column: span 1; }
}

  /* ======================================
  
  Base Hero 
  
  ====================================== */
  .o-hero-block {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
  }

  .o-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Horizontal alignment within the hero container */
    display: flex;
    flex-direction: column;
  }

  /* ===== Vertical Alignment (Main Axis in Column) ===== */
  .o-hero-block.v-align-top {
    justify-content: flex-start;
  }

  .o-hero-block.v-align-center {
    justify-content: center;
  }

  .o-hero-block.v-align-bottom {
    justify-content: flex-end;
  }

  /* ===== Heights ===== */
  .o-hero-block.h-60vh { min-height: 60vh; }
  .o-hero-block.h-80vh { min-height: 80vh; }
  .o-hero-block.h-100vh { min-height: 100vh; }

  /* ===== Optional polish ===== */
  .o-hero-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.1),
      rgba(0,0,0,0.3)
    );
    z-index: 1;
  }


/* =========================================================
   listing_section.html — .ui-listing-section
   Universal grid/list/carousel organism.
   Cell count driven by data-columns attribute so theme CSS
   can target it without needing separate templates.
   ========================================================= */
/*.ui-listing-section {
 inherits position:relative, overflow:hidden from .ui-section}  */


/* Section header (optional title above grid) */
.ui-listing__header {
  margin-bottom: var(--spacing-lg);
}

/* ── Grid layout ── */
.ui-listing__grid {
  display: grid;
  grid-template-columns: repeat(var(--listing-cols, 3), 1fr);
  gap: var(--spacing-md);
}

/* Bind CSS variable to the data-columns attribute */
[data-columns="1"] .ui-listing__grid {
  --listing-cols: 1;
}

[data-columns="2"] .ui-listing__grid {
  --listing-cols: 2;
}

[data-columns="3"] .ui-listing__grid {
  --listing-cols: 3;
}

[data-columns="4"] .ui-listing__grid {
  --listing-cols: 4;
}

.ui-listing__cell {
  min-width: 0;
  /* prevent grid blowout */
}

/* ── Vertical list layout ── */
.ui-listing__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ui-listing__item {
  list-style: none;
}

/* ── Carousel layout ── */
.ui-listing__carousel {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-sm);
  /* room for scrollbar */
  scrollbar-width: thin;
}

.ui-listing__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(260px, 35vw, 400px);
}

/* CTA below the grid */
.ui-listing__footer-cta {
  margin-top: var(--spacing-lg);
  justify-content: center;
  /* center pills below centered grids */
}

/* Empty state */
.ui-listing__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--spacing-xl) 0;
  font-style: italic;
}

.ui-listing--cards .ui-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── VARIANT: Masonry (Potu-inspired staggered layout) ── */
.ui-listing--masonry .ui-section__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: center;
}

.ui-listing--masonry .ui-listing__header {
  margin-bottom: 0;
}

.ui-listing--masonry .ui-listing__grid {
  display: block;
  position: relative;
  min-height: 700px;
}

.ui-listing--masonry .ui-listing__cell {
  position: absolute;
  max-width: 350px;
  width: 100%;
}

/* Staggered offsets for the first 3 items (Potu pattern) */
.ui-listing--masonry .ui-listing__cell:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 3;
}

.ui-listing--masonry .ui-listing__cell:nth-child(2) {
  top: 200px;
  right: 0;
  z-index: 2;
  text-align: right;
}

.ui-listing--masonry .ui-listing__cell:nth-child(2) .ui-icon-wrapper {
  align-self: flex-end;
}

.ui-listing--masonry .ui-listing__cell:nth-child(3) {
  top: 420px;
  left: -10px;
  z-index: 1;
}

@media (max-width: 991px) {
  .ui-listing--masonry .ui-section__content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ui-listing--masonry .ui-listing__grid {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .ui-listing--masonry .ui-listing__cell {
    position: static;
    max-width: 100%;
  }
}

/* ── VARIANT: Compact (High-density spacing) ── */
.ui-listing--compact .ui-section__content {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.ui-listing--compact .ui-listing__grid {
  gap: var(--spacing-sm);
}

.ui-listing--compact .ui-card {
  padding: var(--spacing-md);
}

.ui-listing--compact .ui-card__title {
  font-size: 1.25rem;
}

.ui-listing--compact .ui-card__desc {
  font-size: 0.95rem;
}

/* Responsive: collapse to single column on mobile */
@media (max-width: 768px) {
  .ui-listing__grid {
    grid-template-columns: 1fr;
  }

  [data-columns="2"] .ui-listing__grid {
    --listing-cols: 1;
  }
}


/* =========================================================
   navigation_section.html — .ui-header / .ui-nav-section
   Navigation organism handles 5 variants:
     "horizontal" → fixed header + topbar + mobile drawer
     "footer"     → .ui-nav-section--footer (static)
     "vertical"   → .ui-nav-section--sidebar (sticky aside)
     "social"     → .ui-nav-section--social (icon strip)
     "contact"    → .ui-nav-section--contact (address list)

   NOTE: .ui-mol-nav variants (layout inside nav) → molecules.css
   NOTE: .ui-nav-link, .ui-nav-item          → atoms.css
   ========================================================= */

/* ── VARIANT: horizontal (fixed header) ── */
.ui-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  transition: background-color var(--transition-base),
    box-shadow var(--transition-base),
    backdrop-filter var(--transition-base);
  /* Default: transparent — JS adds .scrolled class on scroll */
  background: var(--color-bg-main);
}

/* JS-triggered solid header on scroll */
.ui-header.scrolled {
  box-shadow: var(--shadow-md);
  background: var(--color-bg-main);
}

/* Top bar — contacts left, socials right */
.ui-header__topbar {
  font-size: var(--text-sm);
  width: 100%;
}

.ui-header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.ui-header__topbar-left,
.ui-header__topbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.ui-header__topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  color: inherit;
}

/* Main nav bar */
.ui-header__main {
  width: 100%;
}

.ui-header__main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--spacing-md);
}

/* Overlay behind open drawer */
.ui-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  transition: opacity var(--transition-base);
}

.ui-drawer-overlay.active {
  display: block;
}

/* ── VARIANT: footer / sidebar / social / contact ── */
.ui-nav-section {
  width: 100%;
}


.ui-nav-section--sidebar {
  position: sticky;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

/* ── VARIANT: 4-Column Footer Grid ── */
.ui-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl) 0;
}

.ui-footer__col {
  display: flex;
  flex-direction: column;
}

.ui-footer__col-heading {
  margin-bottom: var(--spacing-lg);
}

.ui-footer__socials {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.ui-footer__nav-list,
.ui-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.ui-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  gap: var(--spacing-md);
}

.ui-footer__bottom-links {
  display: flex;
  gap: var(--spacing-lg);
}

/* Responsive Footer Grid */
@media (max-width: 991px) {
  .ui-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl) var(--spacing-lg);
  }
}

@media (max-width: 575px) {
  .ui-footer__grid {
    grid-template-columns: 1fr;
  }

  .ui-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}

/* ── Main content padding compensation ──
   Push page content below the fixed header.
   Applied to .ui-main in base.html. ── */
.ui-main {
  padding-top: var(--header-h);
}

/* ═══════════════════════════════════════════════════════════════════
   CHAMELEON SECTION (Structure)
   ═══════════════════════════════════════════════════════════════════ */
/* 
   These classes provide the structural physics. 
   Themes override to provide aesthetic execution (colors, borders, blurs).
*/

[data-section-variant="chameleon"],
[data-section-variant="chameleon-sync"] {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

[data-section-variant="chameleon"] .ui-section__content,
[data-section-variant="chameleon-sync"] .ui-section__content {
  text-align: center;
  padding: 4rem 0;
  width: 100%;
}

/* The Foreground Container */
[data-section-variant="chameleon"] .ui-section__image,
[data-section-variant="chameleon-sync"] .ui-section__image {
  position: relative;
  /* Container for masonry absolute grid */
  margin: auto 0;
  max-width: 500px;
  background: none;
}

[data-section-variant="chameleon"] img,
[data-section-variant="chameleon-sync"] img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  z-index: 5;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════
   FLEX ORGANISM (Dynamic recursive containers)
   ═══════════════════════════════════════════════════════════════════ */

.ui-flex-organism {
  position: relative;
  overflow: hidden;
}

.ui-flex-container {
  display: flex;
  gap: var(--spacing-md, 2rem);
  width: 100%;
}

.ui-flex-partition {
  /* Flex ratio is provided dynamically via style="flex: X 1 0%" */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 1rem);
  /* Distance between items within a single partition */
  min-width: 0;
  /* Prevents flex blowout on wrapped text/images */
}

/* Layout Modifiers */
.ui-layout--row {
  flex-direction: row;
}

.ui-layout--column {
  flex-direction: column;
}

/* Responsive Collapse: Always column under 768px */
@media (max-width: 768px) {
  .ui-flex-container {
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCORDION LISTING LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.ui-listing__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 1rem);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.ui-accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
  overflow: hidden;
  transition: all 0.3s ease;
}

.ui-accordion-item[open] {
  border-color: var(--color-accent);
}

.ui-accordion-header {
  padding: 1.2rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  list-style: none;
  /* Hide default arrow in FF/modern webkit */
}

.ui-accordion-header::-webkit-details-marker {
  display: none;
}

/* Hide old webkit marker */
.ui-accordion-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-accordion-icon-left {
  color: var(--color-accent);
  font-size: 1.25rem;
}

.ui-accordion-caret {
  transition: transform 0.3s ease;
  opacity: 0.6;
}

.ui-accordion-item[open] .ui-accordion-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.ui-accordion-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ui-accordion-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.ui-accordion-link:hover {
  text-decoration: underline;
}

/* =========================================================
   card_block.html — .ui-card-grid
   ========================================================= */
.ui-card-grid {
  display: grid;
  gap: 1.5rem;
}

.ui-card-grid.cols-1 {
  grid-template-columns: 1fr;
}

.ui-card-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ui-card-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ui-card-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* =========================================================
   text_card_block.html — .o-text-card-block
   Flexible split layout: 40% Text / 60% Cards
   ========================================================= */
.o-text-card-block__row,
.o-text-list-block__row {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.o-text-card-block.layout-text-right .o-text-card-block__text,
.o-text-list-block.layout-text-right .o-text-list-block__text {
  order: 2;
}

.o-text-card-block.layout-text-right .o-text-card-block__cards,
.o-text-list-block.layout-text-right .o-text-list-block__lists {
  order: 1;
}

.o-text-card-block.layout-text-right .o-text-card-block__row,
.o-text-list-block.layout-text-right .o-text-list-block__row {
  grid-template-columns: 3fr 2fr;
}

.o-text-card-block__text,
.o-text-list-block__text {
  display: flex;
  flex-direction: column;
}

.o-text-card-block__cards,
.o-text-list-block__lists {
  width: 100%;
}

.ui-list-grid {
  display: grid;
  gap: var(--spacing-lg);
}
.ui-list-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Responsive: stack on tablets and mobile */
@media (max-width: 991px) {
  .o-text-card-block__row,
  .o-text-list-block__row {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-xl);
  }

  .o-text-card-block.layout-text-right .o-text-card-block__text,
  .o-text-card-block.layout-text-right .o-text-card-block__cards,
  .o-text-list-block.layout-text-right .o-text-list-block__text,
  .o-text-list-block.layout-text-right .o-text-list-block__lists {
    order: unset;
  }
}

@media (max-width: 768px) {
  /* On mobile, everything is 1 column */
  .ui-card-grid, .ui-list-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ARTICLE BLOCK & PROSE TYPOGRAPHY
   ========================================================= */

/* The Layout Grid */
.ui-article-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto 4rem auto;
  align-items: start;
}

/* Sticky Sidebar */
.ui-sticky-widget {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  background: var(--color-bg-card, rgba(255, 255, 255, 0.02));
  border: transparent;
  padding: 1.5rem;
  border-radius: var(--radius-card);
}

@media (max-width: 991px) {
  .ui-article-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ui-sticky-widget {
    position: relative;
    top: 0;
  }
}

/* ── PROSE MAGIC (Formats any raw rich-text HTML) ── */
.ui-prose {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-main);
  max-width: 75ch;
  /* Optimal reading width */
  margin: 0 auto;
}

.ui-prose h2,
.ui-prose h3,
.ui-prose h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  margin-top: 2.5em;
  margin-bottom: 1em;
  line-height: 1.3;
}

.ui-prose h2 {
  font-size: 1.8rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

.ui-prose h3 {
  font-size: 1.5rem;
}

.ui-prose p {
  margin-bottom: 1.5em;
}

.ui-prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ui-prose a:hover {
  color: var(--color-heading);
}

/* ── PROSE LIST STYLING ── */
.ui-prose ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1.5rem;
  display: block !important;
}

.ui-prose ol {
  list-style-type: decimal !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1.5rem;
  display: block !important;
}

.ui-prose li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  display: list-item !important;
  /* Forces the bullet to appear */
}

/* Ensure Trix-generated lists also follow this */
trix-editor ul,
.trix-content ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
}

trix-editor ol,
.trix-content ol {
  list-style-type: decimal !important;
  margin-left: 1.5rem !important;
}

.ui-prose blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: 1.5rem;
  margin: 2em 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.ui-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2em 0;
  display: block;
}

/* ── Continuity Spacing ── */
.ui-pt-0 {
  padding-top: 0 !important;
}

.ui-pb-0 {
  padding-bottom: 0 !important;
}

.ui-pt-sm {
  padding-top: 8rem !important;
}

.ui-pb-sm {
  padding-bottom: 8rem !important;
}

/* ── Inset Object Styling ── */
.ui-article-inset {
  margin: 3rem 0;
  width: 100%;
  /* Ensures objects like graphs or code blocks pop out slightly */
  padding: 1.5rem;
  background: rgba(var(--color-accent-rgb), 0.03);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}

/* Ensure two back-to-back blocks of the same color are invisible */
.o-article-block+.o-article-block {
  margin-top: -1px;
  /* Prevents tiny sub-pixel gaps */
}

/* ── Article Grid ── */
.ui-article-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 991px) {
  .ui-article-grid {
    grid-template-columns: 1fr;
  }

  .ui-article-sidebar {
    order: 2;
    margin-top: 4rem;
  }
}

/* =========================================================
   LIST ITEM MOLECULE (.ui-mol-list)
   Icon inline with Title, Actions right, Badge top-right.
   ========================================================= */

/* 1. Anchor for the absolute badge, and align flex to top */
.ui-mol-list {
  position: relative; /* Allows absolute positioning inside */
  align-items: flex-start !important; 
  padding: 0.75rem 0;
}

/* Optical tweak to perfectly center the icon with the text baseline */
.ui-mol-list__icon {
  margin-top: 0.15rem; 
  margin-right: 0.5rem;
}

/* 2. Transform the body into a Grid (Text left, Actions right) */
.ui-mol-list__body {
  display: grid !important;
  grid-template-columns: 1fr auto; 
  column-gap: 1.5rem;
  align-items: center; /* Centers the action buttons vertically */
  
}

/* Title on the top left */
.ui-mol-list__title {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0.25rem !important;
}

/* Description on the bottom left */
.ui-mol-list__desc {
  grid-column: 1;
  grid-row: 2;
}

/* 3. Actions span both rows on the right (before the badge padding) */
.ui-mol-list__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0 !important; 
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* 4. The Badge - Pinned to Top Right Corner */
.ui-mol-list__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Custom premium badge styling (Overrides default Bootstrap styles) */
.ui-mol-list__badge .badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4em 0.8em;
  background-color: var(--color-accent, #0d6efd) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 5. Mobile Responsiveness */
@media (max-width: 576px) {
  .ui-mol-list__body {
    grid-template-columns: 1fr;
    padding-right: 0; /* Release safe zone on mobile */
  }
  .ui-mol-list__title {
    grid-column: 1; grid-row: 1;
    padding-right: 4rem; /* Keep title from hitting the badge */
  }
  .ui-mol-list__desc {
    grid-column: 1; grid-row: 2;
  }
  .ui-mol-list__actions {
    grid-column: 1; grid-row: 3;
    margin-top: 0.75rem !important;
    justify-content: flex-start;
  }
}


/* =========================================================
   ACCORDION STYLING (FAQs / Help Sections)
   ========================================================= */
.ui-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.ui-accordion-item {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 0.85rem;
  transition: all var(--transition-base);
}

.ui-accordion-item[open] {
  padding-bottom: 1.5rem;
}

.ui-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-heading);
  user-select: none;
}

/* Remove default arrow in Chrome/Safari */
.ui-accordion-header::-webkit-details-marker {
  display: none;
}

.ui-accordion-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ui-accordion-caret {
  font-size: 1.25rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-accent);
  opacity: 0.7;
}

.ui-accordion-item[open] .ui-accordion-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.ui-accordion-content {
  padding: 0.5rem 0 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-main);
  opacity: 0.9;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Aesthetic Override: corporate.css */
/* 
   "Corporate Architectural" — High-Precision Professionalism
   ──────────────────────────────────────────────────────────────────
   - Background: Off-white linen for a premium physical feel
   - Geometry: Zero-radius edges, thin hairlines, and tight grids
   - Contrast: Absolute black on bone-white with muted brass accents
   - Spatial: Compact padding and dense typography for robustness
   ──────────────────────────────────────────────────────────────────
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ── Architectural Palette ─────────────────────────────────── */
  --clr-bone:           #FBFBF9;
  --clr-ink:            #110040;
  --clr-steel:          #686868;
  --clr-brass:          #fea5e9;
  --clr-smoke:          #E5E5E5;

  /* ── Token Overrides ───────────────────────────────────────── */
  --color-primary:        var(--clr-ink);
  --color-primary-dark:   #000000;
  --color-primary-light:  var(--clr-smoke);
  --color-secondary:      var(--clr-steel);
  --color-accent:         var(--clr-brass);
  
  --color-bg-main:        var(--clr-bone);
  --color-bg-muted:       #F2F2F0;
  --color-bg-dark:        var(--clr-ink);
  
  --color-text-main:      var(--clr-ink);
  --color-text-muted:     var(--clr-steel);
  --color-text-inverse:   var(--clr-bone);
  
  --color-border:         rgba(10, 10, 10, 0.12);
  --color-border-dark:    rgba(10, 10, 10, 0.8);

  /* ── Typography (Dense & Geometrical) ───────────────────────── */
  --font-sans:            'Outfit', sans-serif;
  --font-display:         'Outfit', sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  /* Small font for spatial robustness */
  --text-xs:              0.75rem;
  --text-sm:              0.85rem;
  --text-base:            1rem;   /* 14px */
  --text-lg:              1.1rem;
  --text-xl:              1.25rem;
  --text-2xl:             1.5rem;
  --text-3xl:             2rem;
  --text-4xl:             2.75rem;
  --text-5xl:             3.5rem;
  --text-6xl:             4.25rem;

  --line-height-body:     1.5;
  --line-height-tight:    1.1;

  /* ── Spatial Geometry (Close Spaces) ────────────────────────── */
  --section-pad-y:        3.5rem;
  --container-max:        1200px;
  --radius-card:          0px;
  --radius-btn:           0px;
  --radius-badge:         0px;

  /* ── Shadows ── */
  --shadow-flat:          4px 4px 0px rgba(10, 10, 10, 0.05);
  --shadow-hard:          8px 8px 0px rgba(10, 10, 10, 1);
}

/* ═══════════════════════════════════════════════════════════════════
   BASE ELEMENTS
   ═══════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
  color: var(--color-text-main);
}

h1 { font-size: var(--text-6xl); }
h2 { font-size: var(--text-4xl); }

p { max-width: 60ch; }

/* ═══════════════════════════════════════════════════════════════════
   ATOMS
   ═══════════════════════════════════════════════════════════════════ */

.ui-button, .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-button:hover, .btn-primary:hover {
  background: transparent;
  color: var(--color-primary);
}

.btn-cta {
  background: var(--color-accent);
  border-color: var(--color-accent);
  padding: 1rem 2.5rem;
  font-size: var(--text-sm);
}

.ui-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   MOLECULES
   ═══════════════════════════════════════════════════════════════════ */

/* Navigation */
.ui-nav__logo-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.ui-nav__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 0.5rem 1rem;
}

.ui-nav__link:hover, .ui-nav__link.active {
  color: var(--color-primary);
  background: rgba(10, 10, 10, 0.04);
}

/* Cards */
.ui-card, .mol-card {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  padding: 2rem;
  transition: all 0.3s ease;
}

.ui-card:hover {
  border-color: var(--color-border-dark);
  transform: translateY(-4px);
  box-shadow: var(--shadow-flat);
}

.ui-card__title {
  font-size: var(--text-xl);
  margin-bottom: 0.75rem;
}

.ui-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════
   ORGANISMS
   ═══════════════════════════════════════════════════════════════════ */

.ui-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(251, 251, 249, 0.8);
  backdrop-filter: blur(12px);
}

.o-hero-block {
  min-height: 80vh;
  padding-top: 6rem;
  border-bottom: 1px solid var(--color-border);
}

.o-hero-block .ui-mol-title__heading {
  margin-bottom: 1.5rem;
  color: var(--color-primary-light);
}

.o-hero-block .ui-mol-title__subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary-light);
  max-width: 45ch;
  line-height: 1.8;
}

.o-media-text-block .ui-mol-title__heading, 
.ui-mol-title__subtitle{
  color: var(--color-primary-light);

}

.o-cards-block .ui-mol-title__subtitle{
    color: var(--color-primary-dark);
}

.o-form-block .ui-mol-title__heading,
.o-infograph-block .ui-mol-title__heading,
.o-content-section .ui-mol-title__heading {
    color: var(--color-accent);
}
.ui-prose--default { color: var(--color-primary-dark); }
.ui-prose--light   { color: var(--clr-bone) !important; }
.ui-prose--dark    { color: var(--clr-ink) !important; }

.ui-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: 4rem 0 2rem;
}
.o-navigation-block .ui-footer__brand-title{
  color: var(--color-accent);
}

.ui-footer__col-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.ui-footer__nav-link {
  color: rgba(251, 251, 249, 0.6);
  font-size: var(--text-sm);
}

.ui-footer__nav-link:hover {
  color: var(--color-text-inverse);
}

/* ═══════════════════════════════════════════════════════════════════
   CHAMELEON SECTION (Corporate Overrides)
   ═══════════════════════════════════════════════════════════════════ */

[data-section-variant="chameleon"] {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  margin: 4rem auto;
}

[data-section-variant="chameleon"] .ui-mol-title__subtitle {
  border-left: 2px solid var(--color-accent);
  padding-left: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ── Typography Grid (Corporate) ── */
.ui-letter-grid { gap: 0.5rem; }
.ui-letter__char {
  border: 1px solid var(--color-border);
  background: #fff;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ui-letter--solid .ui-letter__char {
  background: var(--color-primary);
  color: #fff;
  border: none;
}
.ui-letter:hover .ui-letter__char {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════ */
::selection { background: var(--color-primary); color: #fff; }