/* =============================================================================
DJM • Bricks Drop-In CSS Kit (Base + Utilities + Components)
Paste into: Bricks → Settings → Custom Code → CSS (or Theme Styles → Custom CSS)

GOAL
- Mobile-first defaults
- Reusable design tokens (primary/secondary/tertiary)
- Utility classes for layout, spacing, alignment, ordering, widths
- Buttons + cards + sections + nav + badges + pricing + feature list
- Motion utilities: hover lift/scale, icon shift, tile expand/reveal, image zoom

------------------------------------------------------------------------------
USAGE (copy/paste classes into Bricks “CSS classes” field)
------------------------------------------------------------------------------

1) SECTION + CONTAINER
- Section wrapper:        section section--pad-lg bg-surface
- Inside wrapper:         container
Example structure:
  <section class="section section--pad-lg bg-surface">
    <div class="container">...</div>
  </section>

2) BUTTONS
- Primary button:         btn btn--primary motion hover-lift hover-press
- Secondary button:       btn btn--secondary motion hover-lift
- Outline button:         btn btn--outline motion hover-lift
- Full-width on mobile:   btn btn--primary btn--full full-mobile

3) ICON SHIFT BUTTON (your “arrow moves on hover”)
- Add:                    icon-shift
Example:
  <a class="btn btn--primary motion hover-lift icon-shift" href="#">
    Explore Capabilities <i class="ion-ios-arrow-round-forward"></i>
  </a>

4) GRID LAYOUT + RESPONSIVE SPANS
- 12-col grid parent:     grid grid-12
- Child spans:            span-12 md-span-6 lg-span-7 (etc.)
Example 2-col:
  Parent: grid grid-12
  Left:   span-12 md-span-6
  Right:  span-12 md-span-6

5) REORDER COLUMNS ON MOBILE
- Put parent on flex:     flex
- Child order:            order-2 md-order-1 / order-1 md-order-2
Example (swap on mobile):
  Parent: flex wrap items-center gap-4
  Image:  order-2 md-order-1
  Text:   order-1 md-order-2

6) VERTICAL + HORIZONTAL CENTERING
- Center everything:      center
- Align vertically in row: flex items-center
- Grid center:            grid place-center

6b) RESPONSIVE TEXT ALIGNMENT
- Base:                   text-left text-center text-right
- 768px+:                 md-text-left md-text-center md-text-right
- 992px+:                 lg-text-left lg-text-center lg-text-right
Example (center on mobile, right on desktop):
  text-center md-text-right

7) TILES / CARDS WITH HOVER EFFECTS
- Card:                   card motion hover-lift
- Hover scale tile:       card motion hover-scale
- Image zoom:             img-zoom (wrap an Image element)
- Reveal extra content:   tile + child tile-expand
Example:
  Outer: card tile motion hover-lift
  Hidden content: tile-expand

8) NAV / HEADER QUICK KIT
- Nav wrapper:            nav
- Inner container:        nav__inner container
- Brand:                  nav__brand
- Links:                  nav__links
- Link:                   nav__link link-grow

9) TEXT + HEADING COLORS
- Base:                   text-white text-black
- Brand:                  text-primary text-secondary text-tertiary
- Semantic:               text-muted text-success text-warning text-danger
- Heading (parent or self): heading-primary heading-secondary heading-tertiary
  Put on parent div to color all h1-h6 inside, or on heading element itself.
  Use text-primary on paragraph, heading-primary on section for mixed colors.

10) BADGES + PILLS
- Badge:                  badge badge--primary (or --secondary/--tertiary)
- Pill:                   pill pill--outline

11) PRICING CARD
- Wrapper:                pricing
- Card:                   pricing__card card motion hover-lift
- Highlight:              pricing__card is-featured
- Price row:              pricing__price
- Feature list:           feature-list

------------------------------------------------------------------------------
PROJECT SETUP TIP
- Change colors once per project below in :root tokens (primary/secondary/tertiary).
- Keep the rest the same across all client sites.
============================================================================= */


/* =============================================================================
1) DESIGN TOKENS
============================================================================= */
:root{
    /* Brand colors (edit per project) */
    --c-primary:  #2e55a5;
    --c-secondary:#f7b031;
    --c-tertiary: #22c55e;
  
    --c-text:     #0f172a;
    --c-muted:    #475569;
  
    --c-bg:       #ffffff;
    --c-surface:  #f8fafc;
    --c-border:   rgba(15, 23, 42, .12);
  
    --c-success:  #16a34a;
    --c-warning:  #f59e0b;
    --c-danger:   #ef4444;
  
    --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
    /* Fluid type scale */
    --fs-00: clamp(.875rem, .84rem + .2vw, .95rem);
    --fs-0:  clamp(1rem, .95rem + .25vw, 1.125rem);
    --fs-1:  clamp(1.125rem, 1.05rem + .4vw, 1.35rem);
    --fs-2:  clamp(1.35rem, 1.2rem + .8vw, 1.8rem);
    --fs-3:  clamp(1.65rem, 1.35rem + 1.2vw, 2.4rem);
    --fs-4:  clamp(2rem, 1.55rem + 2vw, 3.2rem);
    --lh: 1.55;
  
    /* Spacing scale */
    --s-0: .25rem;
    --s-1: .5rem;
    --s-2: .75rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: 3rem;
    --s-7: 4rem;
    --s-8: 6rem;
  
    /* Layout */
    --container: 1100px;
    --gutter: clamp(1rem, 3vw, 2rem);
  
    /* Radius + shadows */
    --r-sm: .5rem;
    --r-md: .85rem;
    --r-lg: 1.25rem;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 10px 25px rgba(0,0,0,.10);
  
    /* Buttons */
    --btn-radius: 999px;
    --btn-py: .75rem;
    --btn-px: 1.05rem;
    --btn-fw: 600;
  
    /* Motion */
    --transition-fast: 140ms;
    --transition: 220ms;
    --transition-slow: 380ms;
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --ease-in-out: cubic-bezier(.4,0,.2,1);
  
    /* Border */
    --bw: 1px;
  }
  
  
  /* =============================================================================
  2) BASE / RESETS
  ============================================================================= */
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    font-family: var(--font-sans);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: var(--lh);
    font-size: var(--fs-0);
  }
  img, svg, video{ max-width:100%; height:auto; }
  a{ color: var(--c-primary); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  hr{ border:0; border-top: var(--bw) solid var(--c-border); margin: var(--s-5) 0; }
  
  h1,h2,h3,h4,h5,h6{ line-height:1.15; margin:0 0 .5em; }
  h1{ font-size: var(--fs-4); }
  h2{ font-size: var(--fs-3); }
  h3{ font-size: var(--fs-2); }
  h4{ font-size: var(--fs-1); }
  p{ margin:0 0 1em; color: var(--c-text); }
  .small{ font-size: var(--fs-00); color: var(--c-muted); }
  
  :focus-visible{
    outline: 3px solid color-mix(in srgb, var(--c-primary) 35%, transparent);
    outline-offset: 2px;
    border-radius: .35rem;
  }
  
  /* Optional: make icons align nicely in Bricks buttons */
  .brxe-button i,
  .brxe-button svg{
    vertical-align: middle;
  }
  
  
  /* =============================================================================
  3) LAYOUT: CONTAINER + SECTIONS
  ============================================================================= */
  .brxe-container, .container{
    width: min(var(--container), 100% - (var(--gutter) * 2));
    margin-inline: auto;
  }
  .brxe-section, .section{ padding: var(--s-6) 0; }
  .section--pad-sm{ padding: var(--s-5) 0; }
  .section--pad-lg{ padding: var(--s-7) 0; }
  .section--tight{ padding: var(--s-4) 0; }
  
  .bg-bg{ background: var(--c-bg); }
  .bg-surface{ background: var(--c-surface); }
  .bg-cover{ background-size:cover; background-position:center; }
  .bg-primary{ background: var(--c-primary); color:#fff; }
  .bg-secondary{ background: var(--c-secondary); color:#fff; }
  .bg-tertiary{ background: var(--c-tertiary); color:#06220f; }
  
  .hero{ padding: var(--s-8) 0; }
  .lead{ font-size: var(--fs-1); color: var(--c-muted); max-width: 65ch; }
  
  
  /* =============================================================================
  4) UTILITIES: DISPLAY + FLEX + GRID + ALIGNMENT
  ============================================================================= */
  /* Display */
  .flex{ display:flex; }
  .inline-flex{ display:inline-flex; }
  .block{ display:block; }
  .inline{ display:inline; }
  .hidden{ display:none !important; }
  
  /* Flex direction */
  .row{ flex-direction: row; }
  .col{ flex-direction: column; }
  
  /* Wrap */
  .wrap{ flex-wrap:wrap; }
  .nowrap{ flex-wrap:nowrap; }
  
  /* Alignment: items (cross-axis) */
  .items-start{ align-items:flex-start; }
  .items-center{ align-items:center; }
  .items-end{ align-items:flex-end; }
  .items-stretch{ align-items:stretch; }
  
  /* Alignment: justify (main-axis) */
  .justify-start{ justify-content:flex-start; }
  .justify-center{ justify-content:center; }
  .justify-end{ justify-content:flex-end; }
  .justify-between{ justify-content:space-between; }
  .justify-around{ justify-content:space-around; }
  .justify-evenly{ justify-content:space-evenly; }
  
  /* Self alignment (child items) */
  .self-start{ align-self:flex-start; }
  .self-center{ align-self:center; }
  .self-end{ align-self:flex-end; }
  
  /* Center helper */
  .center{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  /* Grid alignment */
  .place-center{ place-items:center; }
  .place-start{ place-items:start; }
  .place-end{ place-items:end; }
  .place-stretch{ place-items:stretch; }
  
  /* Gap */
  .gap-1{ gap: var(--s-1); }
  .gap-2{ gap: var(--s-2); }
  .gap-3{ gap: var(--s-3); }
  .gap-4{ gap: var(--s-4); }
  .gap-5{ gap: var(--s-5); }
  
  
  /* =============================================================================
  5) UTILITIES: WIDTH + SPACING + TEXT
  ============================================================================= */
  /* Width */
  .w-100{ width:100%; }
  .w-auto{ width:auto; }
  
  /* Min-height (for empty blocks with bg image) */
  .min-h-300{ min-height:300px; }
  .min-h-400{ min-height:400px; }
  .min-h-500{ min-height:500px; }
  .min-h-full{ min-height:100%; }
  @media (min-width: 768px){
    .md-min-h-0{ min-height:0; }
  }
  
  /* Aspect ratio (for image columns) */
  .aspect-video{ aspect-ratio: 16/9; }
  .aspect-square{ aspect-ratio: 1/1; }
  .max-20ch{ max-width:20ch; }
  .max-25ch{ max-width:25ch; }
  .max-30ch{ max-width:30ch; }
  .max-40ch{ max-width:40ch; }
  .max-50ch{ max-width:50ch; }
  .max-60ch{ max-width:60ch; }
  .max-70ch{ max-width:70ch; }
  
  /* Full width on mobile, normal on desktop */
  .full-mobile{ width:100%; }
  @media (min-width: 992px){
    .full-mobile{ width:auto; }
  }
  
  /* Margin */
  .m-0{ margin:0 !important; }
  .mt-1{ margin-top: var(--s-1) !important; }
  .mt-2{ margin-top: var(--s-2) !important; }
  .mt-3{ margin-top: var(--s-3) !important; }
  .mt-4{ margin-top: var(--s-4) !important; }
  .mt-5{ margin-top: var(--s-5) !important; }
  .mb-1{ margin-bottom: var(--s-1) !important; }
  .mb-2{ margin-bottom: var(--s-2) !important; }
  .mb-3{ margin-bottom: var(--s-3) !important; }
  .mb-4{ margin-bottom: var(--s-4) !important; }
  .mb-5{ margin-bottom: var(--s-5) !important; }
  .mr-1{ margin-right: var(--s-1) !important; }
  .mr-2{ margin-right: var(--s-2) !important; }
  .mr-3{ margin-right: var(--s-3) !important; }
  .mr-4{ margin-right: var(--s-4) !important; }
  .mr-5{ margin-right: var(--s-5) !important; }
  .mr-6{ margin-right: var(--s-6) !important; }
  .mr-7{ margin-right: var(--s-7) !important; }
  .ml-1{ margin-left: var(--s-1) !important; }
  .ml-2{ margin-left: var(--s-2) !important; }
  .ml-3{ margin-left: var(--s-3) !important; }
  .ml-4{ margin-left: var(--s-4) !important; }
  .ml-5{ margin-left: var(--s-5) !important; }
  .ml-6{ margin-left: var(--s-6) !important; }
  .ml-7{ margin-left: var(--s-7) !important; }

  /* Padding */
  .p-2{ padding: var(--s-2) !important; }
  .p-3{ padding: var(--s-3) !important; }
  .p-4{ padding: var(--s-4) !important; }
  .p-5{ padding: var(--s-5) !important; }
  
  .pt-2{ padding-top: var(--s-2) !important; }
  .pt-3{ padding-top: var(--s-3) !important; }
  .pt-4{ padding-top: var(--s-4) !important; }
  .pt-5{ padding-top: var(--s-5) !important; }
  .pt-6{ padding-top: var(--s-6) !important; }
  .pt-7{ padding-top: var(--s-7) !important; }
  .pb-2{ padding-bottom: var(--s-2) !important; }
  .pb-3{ padding-bottom: var(--s-3) !important; }
  .pb-4{ padding-bottom: var(--s-4) !important; }
  .pb-5{ padding-bottom: var(--s-5) !important; }
  .pb-6{ padding-bottom: var(--s-6) !important; }
  .pb-7{ padding-bottom: var(--s-7) !important; }

  /* Text */
  .text-left{ text-align:left; }
  .text-center{ text-align:center; }
  .text-right{ text-align:right; }
  
  /* Responsive text alignment */
  @media (min-width: 768px){
    .md-text-left{ text-align:left; }
    .md-text-center{ text-align:center; }
    .md-text-right{ text-align:right; }
  }
  @media (min-width: 992px){
    .lg-text-left{ text-align:left; }
    .lg-text-center{ text-align:center; }
    .lg-text-right{ text-align:right; }
  }
  
  /* Base text colors */
  .text-white, .text-white *{ color: #fff !important; }
  .text-black, .text-black *{ color: #0f172a !important; }
  
  .text-muted, .text-muted *{ color: var(--c-muted) !important; }
  .text-primary, .text-primary *{ color: var(--c-primary) !important; }
  .text-secondary, .text-secondary *{ color: var(--c-secondary) !important; }
  .text-tertiary, .text-tertiary *{ color: var(--c-tertiary) !important; }
  .text-success, .text-success *{ color: var(--c-success) !important; }
  .text-warning, .text-warning *{ color: var(--c-warning) !important; }
  .text-danger, .text-danger *{ color: var(--c-danger) !important; }
  
  .fw-400{ font-weight:400; }
  .fw-600{ font-weight:600; }
  .fw-700{ font-weight:700; }
  
  
  /* =============================================================================
  6) RESPONSIVE GRID SYSTEM (Bricks-friendly)
  ============================================================================= */
  .grid{ display:grid; gap: var(--s-4); align-items:stretch; }
  
  /* Simple responsive columns */
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  @media (min-width: 768px){
    .grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  
  /* 12-col system */
  .grid-12{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
  
  /* Spans */
  .span-12{ grid-column: span 12; }
  .span-11{ grid-column: span 11; }
  .span-10{ grid-column: span 10; }
  .span-9 { grid-column: span 9; }
  .span-8 { grid-column: span 8; }
  .span-7 { grid-column: span 7; }
  .span-6 { grid-column: span 6; }
  .span-5 { grid-column: span 5; }
  .span-4 { grid-column: span 4; }
  .span-3 { grid-column: span 3; }
  .span-2 { grid-column: span 2; }
  .span-1 { grid-column: span 1; }
  
  /* Responsive spans */
  @media (min-width: 768px){
    .md-span-12{ grid-column: span 12; }
    .md-span-8{ grid-column: span 8; }
    .md-span-7{ grid-column: span 7; }
    .md-span-6{ grid-column: span 6; }
    .md-span-5{ grid-column: span 5; }
    .md-span-4{ grid-column: span 4; }
    .md-span-3{ grid-column: span 3; }
  }
  @media (min-width: 992px){
    .lg-span-12{ grid-column: span 12; }
    .lg-span-8{ grid-column: span 8; }
    .lg-span-7{ grid-column: span 7; }
    .lg-span-6{ grid-column: span 6; }
    .lg-span-5{ grid-column: span 5; }
    .lg-span-4{ grid-column: span 4; }
    .lg-span-3{ grid-column: span 3; }
  }
  
  
  /* =============================================================================
  7) ORDER UTILITIES (for “which column goes first on mobile”)
  ============================================================================= */
  .order-1{ order:1; }
  .order-2{ order:2; }
  .order-3{ order:3; }
  
  @media (min-width: 768px){
    .md-order-1{ order:1; }
    .md-order-2{ order:2; }
    .md-order-3{ order:3; }
  }
  @media (min-width: 992px){
    .lg-order-1{ order:1; }
    .lg-order-2{ order:2; }
    .lg-order-3{ order:3; }
  }
  
  
  /* =============================================================================
  8) COMPONENTS: BUTTONS
  ============================================================================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding: var(--btn-py) var(--btn-px);
    /* border-radius: var(--btn-radius); */
    font-weight: var(--btn-fw);
    border: var(--bw) solid transparent;
    cursor:pointer;
    text-decoration:none !important;
    user-select:none;
    line-height:1;
    padding: 10px 20px;
    text-transform: uppercase;
  }
  .btn > i {
    font-size: 1.7em;
  }
  .btn--primary{ background: var(--c-primary); color:#fff; box-shadow: var(--shadow-sm); }
  .btn--secondary{ background: var(--c-secondary); color:#fff; box-shadow: var(--shadow-sm); }
  .btn--tertiary{ background: var(--c-tertiary); color:#06220f; box-shadow: var(--shadow-sm); }
  
  .btn--primary:hover{ background: color-mix(in srgb, var(--c-primary) 85%, transparent); }
  .btn--secondary:hover{ background: color-mix(in srgb, var(--c-secondary) 85%, transparent); }
  .btn--tertiary:hover{ background: color-mix(in srgb, var(--c-tertiary) 85%, transparent); }
  
  .btn--outline{
    background: transparent;
    color: var(--c-primary);
    border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border));
  }
  
  .btn--ghost{
    background: transparent;
    color: var(--c-text);
    border-color: transparent;
  }
  
  .btn--dark{ background:#0b1220; color:#fff; }
  .btn--dark:hover{ background: color-mix(in srgb, #0b1220 85%, transparent); }
  
  .btn--sm{ padding:.55rem .85rem; font-size: var(--fs-00); }
  .btn--lg{ padding:.95rem 1.35rem; font-size: var(--fs-1); }
  .btn--full{ width:100%; }
  
  
  /* =============================================================================
  9) COMPONENTS: CARDS / SURFACES
  ============================================================================= */
  .card{
    background: var(--c-bg);
    border: var(--bw) solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-5);
  }
  .card--soft{ background: var(--c-surface); }
  
  .border{ border: var(--bw) solid var(--c-border); }
  .round-sm{ border-radius: var(--r-sm); }
  .round-md{ border-radius: var(--r-md); }
  .round-lg{ border-radius: var(--r-lg); }
  .shadow-sm{ box-shadow: var(--shadow-sm); }
  .shadow-md{ box-shadow: var(--shadow-md); }
  
  
  /* =============================================================================
  10) MOTION UTILITIES (hover animations)
  ============================================================================= */
  .motion{
    transition:
      transform var(--transition) var(--ease-out),
      box-shadow var(--transition) var(--ease-out),
      background var(--transition) var(--ease-out),
      border-color var(--transition) var(--ease-out),
      color var(--transition) var(--ease-out),
      opacity var(--transition) var(--ease-out);
    will-change: transform;
  }
  
  /* Hover lift / scale / press */
  .hover-lift.motion:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .hover-scale.motion:hover{ transform: scale(1.03); }
  .hover-press.motion:active{ transform: translateY(1px) scale(.99); }
  .hover-glow.motion:hover{ box-shadow: 0 16px 45px rgba(0,0,0,.14); }
  .hover-tilt.motion:hover{ transform: translateY(-2px) rotate(-.4deg); }
  
  /* Reduce motion accessibility */
  @media (prefers-reduced-motion: reduce){
    .motion,
    .icon-shift *,
    .tile-expand,
    .img-zoom img,
    .link-grow:after{
      transition: none !important;
    }
  }
  
  
  /* =============================================================================
  11) ICON SHIFT (generic: Bricks icon, <i>, svg)
  ============================================================================= */
  .icon-shift .bricks-button__icon,
  .icon-shift i,
  .icon-shift svg{
    display:inline-block;
    transition: transform var(--transition) var(--ease-out);
    will-change: transform;
  }
  .icon-shift:hover .bricks-button__icon,
  .icon-shift:hover i,
  .icon-shift:hover svg{
    transform: translateX(6px);
  }
  
  /* Reverse direction */
  .icon-shift-left:hover .bricks-button__icon,
  .icon-shift-left:hover i,
  .icon-shift-left:hover svg{
    transform: translateX(-6px);
  }
  
  /* Optional spin */
  .icon-spin:hover .bricks-button__icon,
  .icon-spin:hover i,
  .icon-spin:hover svg{
    transform: rotate(14deg);
  }
  
  
  /* =============================================================================
  12) TILE EXPAND / REVEAL ON HOVER
  ============================================================================= */
  .tile{ overflow:hidden; }
  .tile .tile-expand{
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition:
      max-height var(--transition-slow) var(--ease-out),
      opacity var(--transition) var(--ease-out),
      transform var(--transition) var(--ease-out);
  }
  .tile:hover .tile-expand{
    max-height: 240px; /* adjust per design */
    opacity: 1;
    transform: translateY(0);
  }
  
  
  /* =============================================================================
  13) IMAGE ZOOM ON HOVER
  ============================================================================= */
  .img-zoom{
    overflow:hidden;
    border-radius: inherit;
  }
  .img-zoom img{
    transition: transform var(--transition-slow) var(--ease-out);
    will-change: transform;
  }
  .img-zoom:hover img{ transform: scale(1.06); }
  
  
  /* =============================================================================
  14) LINKS: UNDERLINE GROW
  ============================================================================= */
  .link-grow{
    position: relative;
    display:inline-block;
    text-decoration:none !important;
  }
  .link-grow:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-.18em;
    height:2px;
    width:100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition) var(--ease-out);
    opacity:.8;
  }
  .link-grow:hover:after{ transform: scaleX(1); }
  
  
  /* =============================================================================
  15) NAV / HEADER MINI KIT
  ============================================================================= */
  .nav{
    background: var(--c-bg);
    border-bottom: var(--bw) solid var(--c-border);
  }
  .nav__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: var(--s-3) 0;
  }
  .nav__brand{
    display:inline-flex;
    align-items:center;
    gap: .65rem;
    font-weight: 700;
    color: var(--c-text);
    text-decoration:none !important;
  }
  .nav__links{
    display:flex;
    align-items:center;
    gap: var(--s-3);
  }
  .nav__link{
    color: var(--c-text);
    font-weight: 600;
    text-decoration:none !important;
    opacity: .9;
  }
  .nav__link:hover{ opacity: 1; }
  
  /* Mobile nav stack helper (optional) */
  @media (max-width: 767px){
    .nav__inner{ flex-wrap: wrap; gap: var(--s-2); }
    .nav__links{ width:100%; justify-content:flex-start; flex-wrap: wrap; }
  }
  
  .uppercase {
    text-transform: uppercase;
  }
  
  /* =============================================================================
  16) BADGES / PILLS
  ============================================================================= */
  .badge{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding: .35rem .6rem;
    font-size: var(--fs-00);
    font-weight: 700;
    border-radius: 999px;
    border: var(--bw) solid transparent;
    line-height: 1;
  }
  .badge--primary{ background: color-mix(in srgb, var(--c-primary) 12%, var(--c-bg)); color: var(--c-primary); border-color: color-mix(in srgb, var(--c-primary) 22%, var(--c-border)); }
  .badge--secondary{ background: color-mix(in srgb, var(--c-secondary) 12%, var(--c-bg)); color: var(--c-secondary); border-color: color-mix(in srgb, var(--c-secondary) 22%, var(--c-border)); }
  .badge--tertiary{ background: color-mix(in srgb, var(--c-tertiary) 12%, var(--c-bg)); color: color-mix(in srgb, var(--c-tertiary) 70%, #05240f); border-color: color-mix(in srgb, var(--c-tertiary) 22%, var(--c-border)); }
  
  .pill{
    display:inline-flex;
    align-items:center;
    padding: .5rem .85rem;
    border-radius: 999px;
    border: var(--bw) solid var(--c-border);
    background: var(--c-bg);
    font-weight: 600;
  }
  .pill--outline{ background: transparent; border-color: color-mix(in srgb, var(--c-primary) 25%, var(--c-border)); color: var(--c-primary); }
  .pill--soft{ background: var(--c-surface); }
  
  
  /* =============================================================================
  17) FEATURE LIST (nice bullets)
  ============================================================================= */
  .feature-list{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .feature-list li{
    display:flex;
    align-items:flex-start;
    gap: .6rem;
    padding: .35rem 0;
    color: var(--c-text);
  }
  .feature-list li:before{
    content: "✓";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-tertiary) 18%, var(--c-bg));
    color: color-mix(in srgb, var(--c-tertiary) 70%, #06220f);
    font-weight: 900;
    flex: 0 0 1.3rem;
    margin-top: .05rem;
  }
  
  
  /* =============================================================================
  18) PRICING MINI KIT
  ============================================================================= */
  .pricing{
    display:grid;
    gap: var(--s-4);
  }
  @media (min-width: 768px){
    .pricing{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .pricing__card{
    position: relative;
  }
  .pricing__card.is-featured{
    border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .pricing__eyebrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
  }
  .pricing__title{
    font-size: var(--fs-1);
    font-weight: 800;
    margin: 0;
  }
  .pricing__price{
    display:flex;
    align-items:baseline;
    gap: .5rem;
    margin: var(--s-3) 0;
  }
  .pricing__amount{
    font-size: var(--fs-3);
    font-weight: 900;
    line-height: 1;
  }
  .pricing__period{ color: var(--c-muted); font-weight: 600; }
  .pricing__desc{ color: var(--c-muted); margin-bottom: var(--s-3); }
  
  
  /* =============================================================================
  19) FORM BASICS
  ============================================================================= */
  .input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select{
    width: 100%;
    padding: .75rem .9rem;
    border-radius: .75rem;
    border: var(--bw) solid var(--c-border);
    background: var(--c-bg);
    font: inherit;
  }
  textarea{ min-height: 140px; }
  label{ display:block; margin: 0 0 .35rem; font-weight:600; }
  
  /* Stack spacing helper */
  .stack > * + *{ margin-top: var(--s-3); }
  .stack-lg > * + *{ margin-top: var(--s-4); }
  
  .brxe-container > .brxe-block {
    padding: 0 var(--s-7);
  }

  header.sticky.scrolling > section {
    box-shadow: none !important;
    border-bottom: 2px solid #f7b031;
}

header.sticky.scrolling > section {
    padding: 10px 60px !important;
}
.no-hero-image header > section img,
header.sticky.scrolling > section img {
    max-height: 30px;
}
header.sticky.scrolling .white-static {
    display: none;
}
header.sticky:not(.scrolling) .black-scrolling {
    display: none;
}
header.sticky.scrolling .black-scrolling {
    display: block;
}
#brx-header.scrolling #logo-container .no-scroll {
    display: none;
}
#brx-header:not(.scrolling) #logo-container .scrolling {
    display: none;
}
header nav a,
header nav span,
header nav .brx-submenu-toggle svg {
    color: var(--header-overlay-menu-font-color);
    text-transform: uppercase;
    font-weight: bold;
}
header.scrolling nav .brx-submenu-toggle svg {
	color: #000000;
}