/* =============================================================================
DJM • Bricks Utility Framework
Mobile-first | Utility-driven | Stacks by default | Responsive at md (768px)

=============================================================================
LAYOUT EXAMPLES
=============================================================================

STACKING BEHAVIOR (IMPORTANT)
All columns default to full width (span-12).
At 768px and up, md-span-* takes effect.

------------------------------------------------------------------------------

1) THREE EQUAL COLUMNS (Stacks on mobile)

Parent:
  grid grid-12 gap-4

Children:
  span-12 md-span-4
  span-12 md-span-4
  span-12 md-span-4

Mobile:
  100%
  100%
  100%

Tablet/Desktop:
  33% | 33% | 33%

------------------------------------------------------------------------------

2) 25% / 50% / 25% LAYOUT (Stacks on mobile)

Parent:
  grid grid-12 gap-4

Children:
  span-12 md-span-3
  span-12 md-span-6
  span-12 md-span-3

Mobile:
  100%
  100%
  100%

Tablet/Desktop:
  25% | 50% | 25%

------------------------------------------------------------------------------

3) TWO COLUMN LAYOUT (50 / 50)

Parent:
  grid grid-12 gap-4

Children:
  span-12 md-span-6
  span-12 md-span-6

------------------------------------------------------------------------------

4) SWAP COLUMN ORDER ON MOBILE

Parent:
  flex wrap gap-4

Image:
  order-2 md-order-1

Text:
  order-1 md-order-2

Mobile:
  Text first
  Image second

Desktop:
  Image left
  Text right

------------------------------------------------------------------------------

5) CENTER CONTENT

Full center (vertical + horizontal):
  center

Horizontal center only:
  flex justify-center

Vertical center in row:
  flex items-center

------------------------------------------------------------------------------

6) BUTTON COLOR SWAP EXAMPLE

Classes:
  btn bg-black text-white hover-bg-white hover-text-black hover-lift hover-press icon-shift

Default:
  Black background, white text

Hover:
  White background, black text
  Lifts + icon shifts

------------------------------------------------------------------------------

7) TILE REVEAL

Outer:
  card tile hover-lift

Hidden content:
  tile-expand

------------------------------------------------------------------------------

8) IMAGE ZOOM

Wrap image in:
  img-zoom

=============================================================================
END USAGE DOC
=============================================================================
*/

:root{
    --c-primary:  #2563eb;
    --c-primary-rgb: 37, 99, 235;
    --c-secondary:#0ea5e9;
    --c-tertiary: #22c55e;
  
    --c-text:     #0f172a;
    --c-muted:    #475569;
  
    --c-bg:       #ffffff;
    --c-surface:  #f8fafc;
    --c-border:   rgba(15,23,42,.12);
  
    --c-black: #0b1220;
    --c-white: #ffffff;
  
    --glass-bg: rgba(255,255,255,.10);
    --glass-border: rgba(255,255,255,.22);
  
    --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    --font-serif: Georgia, 'Times New Roman', serif;
  
    --fs-0: clamp(1rem, .95rem + .25vw, 1.125rem);
    --fs-1: clamp(1.125rem, 1.05rem + .4vw, 1.125rem);
    --fs-2: clamp(1.35rem, 1.2rem + .8vw, 1.5rem);
    --fs-3: clamp(1.65rem, 1.35rem + 1.2vw, 2.4rem);
  
    --s-1:.5rem;
    --s-2:.75rem;
    --s-3:1rem;
    --s-4:1.5rem;
    --s-5:2rem;
    --s-6:3rem;
  
    --container:1100px;
  
    --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);
    --shadow-glow:0 0 24px rgba(0,0,0,.12);
    --shadow-glow-primary:0 0 20px rgba(37,99,235,.25);
  
    --transition:220ms;
    --transition-slow:380ms;
    --transition-slower:700ms;
    --ease:cubic-bezier(.2,.8,.2,1);
  }
  
  
  /* =============================================================================
  2) BASE
  ============================================================================= */
  
  html{font-size:16px;}
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:var(--font-sans);
    background:var(--c-bg);
    color:var(--c-text);
    font-size:var(--fs-0);
    line-height:1.6;
  }
  img{max-width:100%;height:auto;}
  
  
  /* =============================================================================
  3) CONTAINER / SECTION
  ============================================================================= */
  
  .container{
    width:min(var(--container),100% - 2rem);
    margin-inline:auto;
  }
  
  section{padding:80px 32px;}
  .section--pad-lg{padding:calc(var(--s-6) * 1.4) 0;}
  .section--tight{padding:var(--s-4) 0;}
  
  
  /* =============================================================================
  4) DISPLAY / FLEX / ALIGNMENT
  ============================================================================= */
  
  .relative{position:relative;}
  .flex{display:flex;}
  .grid{display:grid;}
  .block{display:block;}
  .inline-flex{display:inline-flex;}
  .wrap{flex-wrap:wrap;}
  
  .items-center{align-items:center;}
  .items-start{align-items:flex-start;}
  .items-end{align-items:flex-end;}
  
  .justify-center{justify-content:center;}
  .justify-between{justify-content:space-between;}
  .justify-start{justify-content:flex-start;}
  .justify-end{justify-content:flex-end;}
  
  .center{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  
  /* Center block, left-aligned text — for sections like Stonewall Pastures */
  .content-center{margin-inline:auto;text-align:left;}
  .content-center--narrow{max-width:min(720px,100%);margin-inline:auto;text-align:left;}
  .content-center--wide{max-width:min(900px,100%);margin-inline:auto;text-align:left;}
  
  .gap-1{gap:var(--s-1)!important;}
  .gap-2{gap:var(--s-2)!important;}
  .gap-3{gap:var(--s-3)!important;}
  .gap-4{gap:var(--s-4)!important;}
  
  /* Padding – all sides */
  .p-0{padding:0!important;}
  .p-1{padding:var(--s-1);}
  .p-2{padding:var(--s-2);}
  .p-3{padding:var(--s-3);}
  .p-4{padding:var(--s-4);}
  .p-5{padding:var(--s-5);}
  .p-6{padding:var(--s-6);}
  /* Padding – top & bottom */
  .py-1{padding-top:var(--s-1);padding-bottom:var(--s-1);}
  .py-2{padding-top:var(--s-2);padding-bottom:var(--s-2);}
  .py-3{padding-top:var(--s-3);padding-bottom:var(--s-3);}
  .py-4{padding-top:var(--s-4);padding-bottom:var(--s-4);}
  .py-5{padding-top:var(--s-5);padding-bottom:var(--s-5);}
  .py-6{padding-top:var(--s-6);padding-bottom:var(--s-6);}
  /* Padding – left & right */
  .px-1{padding-left:var(--s-1);padding-right:var(--s-1);}
  .px-2{padding-left:var(--s-2);padding-right:var(--s-2);}
  .px-3{padding-left:var(--s-3);padding-right:var(--s-3);}
  .px-4{padding-left:var(--s-4);padding-right:var(--s-4);}
  .px-5{padding-left:var(--s-5);padding-right:var(--s-5);}
  .px-6{padding-left:var(--s-6);padding-right:var(--s-6);}
  /* Padding – top */
  .pt-1{padding-top:var(--s-1);}
  .pt-2{padding-top:var(--s-2);}
  .pt-3{padding-top:var(--s-3);}
  .pt-4{padding-top:var(--s-4);}
  .pt-5{padding-top:var(--s-5);}
  .pt-6{padding-top:var(--s-6);}
  /* Padding – right */
  .pr-1{padding-right:var(--s-1);}
  .pr-2{padding-right:var(--s-2);}
  .pr-3{padding-right:var(--s-3);}
  .pr-4{padding-right:var(--s-4);}
  .pr-5{padding-right:var(--s-5);}
  .pr-6{padding-right:var(--s-6);}
  /* Padding – bottom */
  .pb-1{padding-bottom:var(--s-1);}
  .pb-2{padding-bottom:var(--s-2);}
  .pb-3{padding-bottom:var(--s-3);}
  .pb-4{padding-bottom:var(--s-4);}
  .pb-5{padding-bottom:var(--s-5);}
  .pb-6{padding-bottom:var(--s-6);}
  /* Padding – left */
  .pl-1{padding-left:var(--s-1);}
  .pl-2{padding-left:var(--s-2);}
  .pl-3{padding-left:var(--s-3);}
  .pl-4{padding-left:var(--s-4);}
  .pl-5{padding-left:var(--s-5);}
  .pl-6{padding-left:var(--s-6);}
  
  /* Margin – all sides */
  .m-0{margin:0!important;}
  .m-1{margin:var(--s-1);}
  .m-2{margin:var(--s-2);}
  .m-3{margin:var(--s-3);}
  .m-4{margin:var(--s-4);}
  .m-5{margin:var(--s-5);}
  .m-6{margin:var(--s-6);}
  /* Margin – top & bottom */
  .my-1{margin-top:var(--s-1);margin-bottom:var(--s-1);}
  .my-2{margin-top:var(--s-2);margin-bottom:var(--s-2);}
  .my-3{margin-top:var(--s-3);margin-bottom:var(--s-3);}
  .my-4{margin-top:var(--s-4);margin-bottom:var(--s-4);}
  .my-5{margin-top:var(--s-5);margin-bottom:var(--s-5);}
  .my-6{margin-top:var(--s-6);margin-bottom:var(--s-6);}
  /* Margin – left & right */
  .mx-1{margin-left:var(--s-1);margin-right:var(--s-1);}
  .mx-2{margin-left:var(--s-2);margin-right:var(--s-2);}
  .mx-3{margin-left:var(--s-3);margin-right:var(--s-3);}
  .mx-4{margin-left:var(--s-4);margin-right:var(--s-4);}
  .mx-5{margin-left:var(--s-5);margin-right:var(--s-5);}
  .mx-6{margin-left:var(--s-6);margin-right:var(--s-6);}
  /* Margin – top */
  .mt-1{margin-top:var(--s-1);}
  .mt-2{margin-top:var(--s-2);}
  .mt-3{margin-top:var(--s-3);}
  .mt-4{margin-top:var(--s-4);}
  .mt-5{margin-top:var(--s-5);}
  .mt-6{margin-top:var(--s-6);}
  /* Margin – right */
  .mr-1{margin-right:var(--s-1);}
  .mr-2{margin-right:var(--s-2);}
  .mr-3{margin-right:var(--s-3);}
  .mr-4{margin-right:var(--s-4);}
  .mr-5{margin-right:var(--s-5);}
  .mr-6{margin-right:var(--s-6);}
  /* Margin – bottom */
  .mb-1{margin-bottom:var(--s-1);}
  .mb-2{margin-bottom:var(--s-2);}
  .mb-3{margin-bottom:var(--s-3);}
  .mb-4{margin-bottom:var(--s-4);}
  .mb-5{margin-bottom:var(--s-5);}
  .mb-6{margin-bottom:var(--s-6);}
  /* Margin – left */
  .ml-1{margin-left:var(--s-1);}
  .ml-2{margin-left:var(--s-2);}
  .ml-3{margin-left:var(--s-3);}
  .ml-4{margin-left:var(--s-4);}
  .ml-5{margin-left:var(--s-5);}
  .ml-6{margin-left:var(--s-6);}
  
  
  /* =============================================================================
  5) GRID SYSTEM
  ============================================================================= */
  
  .grid-12{grid-template-columns:repeat(12,minmax(0,1fr));}
  .span-12{grid-column:span 12;}
  .span-6{grid-column:span 6;}
  .span-4{grid-column:span 4;}
  .span-3{grid-column:span 3;}
  
  @media(min-width:768px){
    .md-span-6{grid-column:span 6;}
    .md-span-4{grid-column:span 4;}
    .md-span-3{grid-column:span 3;}
  }
  
  .order-1{order:1;}
  .order-2{order:2;}
  @media(min-width:768px){
    .md-order-1{order:1;}
    .md-order-2{order:2;}
  }
  
  /* 50/50 split — full width, no gap, equal height. Stacks on mobile. */
  .split-50{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    width:100%;
    align-items:stretch;
  }
  .split-50 > *{min-height:0;}
  .split-50-gap-1{gap:var(--s-1)!important;}
  .split-50-gap-2{gap:var(--s-2)!important;}
  .split-50-gap-3{gap:var(--s-3)!important;}
  .split-50-gap-4{gap:var(--s-4)!important;}
  .split-50-gap-5{gap:var(--s-5)!important;}
  .split-50-gap-6{gap:var(--s-6)!important;}
  .split-50-gap-lg{gap:65px!important;}
  @media(max-width:767px){
    .split-50{grid-template-columns:1fr;}
  }
  /* For col with bg image: fills cell, matches height of sibling */
  .split-50-bg{
    background-size:cover;
    background-position:center;
  }
  /* 50/25/25 split — col1 half, col2 & col3 quarter each. Stacks on mobile. */
  .split-50-25-25{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:0;
    width:100%;
    align-items:stretch;
  }
  .split-50-25-25 > *{min-height:0;}
  .split-50-25-25-gap-1{gap:var(--s-1)!important;}
  .split-50-25-25-gap-2{gap:var(--s-2)!important;}
  .split-50-25-25-gap-3{gap:var(--s-3)!important;}
  .split-50-25-25-gap-4{gap:var(--s-4)!important;}
  .split-50-25-25-gap-5{gap:var(--s-5)!important;}
  .split-50-25-25-gap-6{gap:var(--s-6)!important;}
  .split-50-25-25-gap-lg{gap:65px!important;}
  @media(max-width:767px){
    .split-50-25-25{grid-template-columns:1fr;}
  }
  /* 33/33/33 split — three equal columns. Stacks on mobile. */
  .split-33{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
    width:100%;
    align-items:stretch;
  }
  .split-33 > *{min-height:0;}
  .split-33-gap-1{gap:var(--s-1)!important;}
  .split-33-gap-2{gap:var(--s-2)!important;}
  .split-33-gap-3{gap:var(--s-3)!important;}
  .split-33-gap-4{gap:var(--s-4)!important;}
  .split-33-gap-5{gap:var(--s-5)!important;}
  .split-33-gap-6{gap:var(--s-6)!important;}
  .split-33-gap-lg{gap:65px!important;}
  @media(max-width:767px){
    .split-33{grid-template-columns:1fr;}
  }
  /* 25/25/25/25 split — four equal columns. Stacks on mobile. */
  .split-25{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    width:100%;
    align-items:stretch;
  }
  .split-25 > *{min-height:0;}
  .split-25-gap-1{gap:var(--s-1)!important;}
  .split-25-gap-2{gap:var(--s-2)!important;}
  .split-25-gap-3{gap:var(--s-3)!important;}
  .split-25-gap-4{gap:var(--s-4)!important;}
  .split-25-gap-5{gap:var(--s-5)!important;}
  .split-25-gap-6{gap:var(--s-6)!important;}
  .split-25-gap-lg{gap:65px!important;}
  @media(max-width:767px){
    .split-25{grid-template-columns:1fr;}
  }
  /* Generic cell — works with split-25, split-33, split-50 */
  .split-cell{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/3;
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .split-cell--tall{aspect-ratio:3/4;}
  .split-cell--wide{aspect-ratio:16/9;}
  .split-zoom{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:transform var(--transition-slow) ease-in-out;
  }
  .split-cell:hover .split-zoom{
    transform:scale(1.08);
  }
  .split-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to top,
      rgba(var(--c-primary-rgb),0.85) 0%,
      rgba(var(--c-primary-rgb),0.4) 50%,
      rgba(var(--c-primary-rgb),0.1) 100%
    );
  }
  .split-content{
    position:relative;
    z-index:1;
    padding:var(--s-5);
    color:var(--c-white);
  }
  .full-bleed{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
  }
  .full-width {
    width: 100%;
    max-width: 100%;
  }
  .flush{padding:0;margin:0;}
  
  
  /* =============================================================================
  6) COLOR UTILITIES
  ============================================================================= */
  
  /* Background */
  .bg-white{background:var(--c-white)!important;}
  .bg-black{background:var(--c-black)!important;}
  .bg-bg{background:var(--c-bg)!important;}
  .bg-surface{background:var(--c-surface)!important;}
  .bg-primary{background:var(--c-primary)!important;}
  /* Primary bg at opacity — 10–90 */
  .bg-primary-10{background:rgba(var(--c-primary-rgb),.1)!important;}
  .bg-primary-20{background:rgba(var(--c-primary-rgb),.2)!important;}
  .bg-primary-30{background:rgba(var(--c-primary-rgb),.3)!important;}
  .bg-primary-40{background:rgba(var(--c-primary-rgb),.4)!important;}
  .bg-primary-50{background:rgba(var(--c-primary-rgb),.5)!important;}
  .bg-primary-60{background:rgba(var(--c-primary-rgb),.6)!important;}
  .bg-primary-70{background:rgba(var(--c-primary-rgb),.7)!important;}
  .bg-primary-80{background:rgba(var(--c-primary-rgb),.8)!important;}
  .bg-primary-90{background:rgba(var(--c-primary-rgb),.9)!important;}
  /* Primary overlay — add to div inside .relative container. Image shows through, text sits above. */
  .overlay-primary-10{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.1)!important;}
  .overlay-primary-20{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.2)!important;}
  .overlay-primary-30{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.3)!important;}
  .overlay-primary-40{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.4)!important;}
  .overlay-primary-50{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.5)!important;}
  .overlay-primary-60{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.6)!important;}
  .overlay-primary-70{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.7)!important;}
  .overlay-primary-80{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.8)!important;}
  .overlay-primary-90{position:absolute;inset:0;pointer-events:none;background:rgba(var(--c-primary-rgb),.9)!important;}
  .overlay-content{position:relative;z-index:1;}
  .bg-secondary{background:var(--c-secondary)!important;}
  .bg-tertiary{background:var(--c-tertiary)!important;}
  .bg-glass{background:var(--glass-bg)!important;border:1px solid var(--glass-border)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .bg-transparent{background:rgb(0,0,0,0)!important;border:1px solid rgba(0,0,0,0)!important;}
  
  /* Text */
  .text-white{color:var(--c-white)!important;}
  .text-black{color:var(--c-black)!important;}
  .text-primary{color:var(--c-primary)!important;}
  .text-secondary{color:var(--c-secondary)!important;}
  .text-tertiary{color:var(--c-tertiary)!important;}
  .text-muted{color:var(--c-muted)!important;}
  /* Primary color at opacity — mute by 10–90 */
  .text-primary-10{color:rgba(var(--c-primary-rgb),.1)!important;}
  .text-primary-20{color:rgba(var(--c-primary-rgb),.2)!important;}
  .text-primary-30{color:rgba(var(--c-primary-rgb),.3)!important;}
  .text-primary-40{color:rgba(var(--c-primary-rgb),.4)!important;}
  .text-primary-50{color:rgba(var(--c-primary-rgb),.5)!important;}
  .text-primary-60{color:rgba(var(--c-primary-rgb),.6)!important;}
  .text-primary-70{color:rgba(var(--c-primary-rgb),.7)!important;}
  .text-primary-80{color:rgba(var(--c-primary-rgb),.8)!important;}
  .text-primary-90{color:rgba(var(--c-primary-rgb),.9)!important;}
  /* White at opacity — mute by 10–90 */
  .text-white-10{color:rgba(255,255,255,.1)!important;}
  .text-white-20{color:rgba(255,255,255,.2)!important;}
  .text-white-30{color:rgba(255,255,255,.3)!important;}
  .text-white-40{color:rgba(255,255,255,.4)!important;}
  .text-white-50{color:rgba(255,255,255,.5)!important;}
  .text-white-60{color:rgba(255,255,255,.6)!important;}
  .text-white-70{color:rgba(255,255,255,.7)!important;}
  .text-white-80{color:rgba(255,255,255,.8)!important;}
  .text-white-90{color:rgba(255,255,255,.9)!important;}
  .uppercase{text-transform:uppercase;}
  .font-sans{font-family:var(--font-sans)!important;}
  .font-serif{font-family:var(--font-serif)!important;}
  .font-bold{font-weight:700!important;}
  .italic{font-style:italic!important;}
  
  /* Border */
  .border{border:2px solid var(--c-border)!important;}
  .border-white{border-color:rgba(255,255,255,1)!important;}
  .border-black{border-color:rgba(0,0,0,1)!important;}
  .border-primary{border-color:var(--c-primary)!important;}
  
  /* Fading line — 1px div with white gradient fade (left → right) */
  .border-fade-white{
    height:1px;
    width:100%;
    margin-top: 40px;
    margin-bottom: 40px;
    background:linear-gradient(
      to right,
      rgba(255,255,255,.40) 0%,
      rgba(255,255,255,.20) 50%,
      rgba(255,255,255,0) 100%
    );
  }
  
  
  /* =============================================================================
  7) CHARACTER MAX (line-length / readability)
  ============================================================================= */
  
  .max-ch-45{max-width:45ch;}
  .max-ch-55{max-width:55ch;}
  .max-ch-65{max-width:65ch;}
  .max-ch-75{max-width:75ch;}
  .max-ch-80{max-width:80ch;}
  
  /* =============================================================================
  8) HOVER UTILITIES (UTILITY-ONLY)
  ============================================================================= */
  
  .hover-bg-white,
  .hover-bg-black,
  .hover-bg-primary,
  .hover-bg-secondary,
  .hover-bg-tertiary{transition:background var(--transition-slow) var(--ease);}
  .hover-bg-glass,
  .hover-bg-transparent{transition:background var(--transition-slow) var(--ease),border-color var(--transition-slow) var(--ease);}
  .hover-bg-white:hover{background:var(--c-white)!important;}
  .hover-bg-black:hover{background:var(--c-black)!important;}
  .hover-bg-primary:hover{background:var(--c-primary)!important;}
  .hover-bg-secondary:hover{background:var(--c-secondary)!important;}
  .hover-bg-tertiary:hover{background:var(--c-tertiary)!important;}
  .hover-bg-glass:hover{background:var(--glass-bg)!important;border:1px solid var(--glass-border)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .hover-bg-transparent:hover{background:rgb(0,0,0,0)!important;border:1px solid rgba(0,0,0,0)!important;}
  
  .hover-text-white:hover{color:var(--c-white)!important;transition:color var(--transition) var(--ease);}
  .hover-text-black:hover{color:var(--c-black)!important;transition:color var(--transition) var(--ease);}
  .hover-text-primary:hover{color:var(--c-primary)!important;transition:color var(--transition) var(--ease);}
  .hover-text-secondary:hover{color:var(--c-secondary)!important;transition:color var(--transition) var(--ease);}
  .hover-text-tertiary:hover{color:var(--c-tertiary)!important;transition:color var(--transition) var(--ease);}
  
  .hover-border-primary:hover{border-color:var(--c-primary)!important;transition:border-color var(--transition) var(--ease);}
  .hover-border-white:hover{border-color:rgba(255,255,255,.6)!important;transition:border-color var(--transition) var(--ease);}
  
  
  /* =============================================================================
  9) MOTION UTILITIES
  ============================================================================= */
  
  .hover-lift{
    transition:transform var(--transition) var(--ease), box-shadow var(--transition) var(--ease);
  }
  .hover-lift:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
  }
  
  .hover-scale{
    transition:transform var(--transition) var(--ease);
    backface-visibility:hidden;
    transform:translateZ(0);
  }
  .hover-scale:hover{
    transform:translateZ(0) scale(1.04);
  }
  .brxe-container:not(.full-width) {
    max-width: 1200px;
  }
  .brxe-button {
    font-weight: 500;
  }
  /* Prevent bottom-border/underline flicker on Bricks buttons with hover-scale */
  .brxe-button.hover-scale .bricks-button,
  .brxe-button.hover-scale.bricks-button{
    text-decoration:none!important;
  }
  .brxe-button.hover-scale .bricks-button:hover,
  .brxe-button.hover-scale .bricks-button:focus,
  .brxe-button.hover-scale .bricks-button:focus-visible{
    text-decoration:none!important;
  }
  .brxe-button.hover-scale .bricks-button:focus,
  .brxe-button.hover-scale .bricks-button:focus-visible{
    outline:none;
  }
  
  .hover-press{
    transition:transform var(--transition) var(--ease);
  }
  .hover-press:active{
    transform:translateY(1px) scale(.98);
  }
  
  .hover-tilt{
    transition:transform var(--transition) var(--ease);
  }
  .hover-tilt:hover{
    transform:rotate(-1deg) translateY(-2px);
  }
  
  .hover-glow{
    transition:box-shadow var(--transition) var(--ease);
  }
  .hover-glow:hover{
    box-shadow:var(--shadow-glow);
  }
  .hover-glow-primary:hover{
    box-shadow:var(--shadow-glow-primary);
  }
  
  .hover-brighten{
    transition:filter var(--transition) var(--ease);
  }
  .hover-brighten:hover{
    filter:brightness(1.05);
  }
  
  .hover-saturate{
    transition:filter var(--transition) var(--ease);
  }
  .hover-saturate:hover{
    filter:saturate(1.12);
  }
  
  .hover-shimmer{
    position:relative;
    overflow:hidden;
  }
  .hover-shimmer::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.2) 50%, transparent 60%);
    transform:translateX(-100%);
    transition:transform var(--transition-slow) var(--ease);
  }
  .hover-shimmer:hover::after{
    transform:translateX(100%);
  }
  
  .hover-underline{
    position:relative;
  }
  .hover-underline::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:currentColor;
    transition:width var(--transition) var(--ease);
  }
  .hover-underline:hover::after{
    width:100%;
  }
  
  .hover-corner{
    position:relative;
    overflow:hidden;
  }
  .hover-corner::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
    border-radius:0 var(--r-sm) 0 0;
    transition:width var(--transition) var(--ease), height var(--transition) var(--ease);
  }
  .hover-corner:hover::before{
    width:1rem;
    height:1rem;
  }
  
  
  /* =============================================================================
  GRADIENT OVERLAY — Primary color overlay for images
  ============================================================================= */
  /* Add to section: overlays gradient above bg image, below container content */
  .section-gradient-primary{position:relative;}
  .section-gradient-primary::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(
      to right,
      rgba(var(--c-primary-rgb),0.95) 0%,
      rgba(var(--c-primary-rgb),0.80) 50%,
      rgba(var(--c-primary-rgb),0) 100%
    );
  }
  .section-gradient-primary > *{position:relative;z-index:1;}
  /* Div overlay: use with .relative parent + overlay as sibling */
  .gradient-overlay-primary{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to right,
      rgba(var(--c-primary-rgb),0.95) 0%,
      rgba(var(--c-primary-rgb),0.80) 50%,
      rgba(var(--c-primary-rgb),0) 100%
    );
  }
  /* Variants: other directions */
  .gradient-overlay-primary-left{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to left,
      rgba(var(--c-primary-rgb),0.95) 0%,
      rgba(var(--c-primary-rgb),0.80) 50%,
      rgba(var(--c-primary-rgb),0) 100%
    );
  }
  .gradient-overlay-primary-bottom{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(var(--c-primary-rgb),0) 0%,
      rgba(var(--c-primary-rgb),0.80) 50%,
      rgba(var(--c-primary-rgb),0.95) 100%
    );
  }
  .gradient-overlay-primary-top{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to top,
      rgba(var(--c-primary-rgb),0) 0%,
      rgba(var(--c-primary-rgb),0.80) 50%,
      rgba(var(--c-primary-rgb),0.95) 100%
    );
  }
  /* White gradient overlays */
  .section-gradient-white{position:relative;}
  .section-gradient-white::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(
      to right,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.80) 50%,
      rgba(255,255,255,0) 100%
    );
  }
  .section-gradient-white > *{position:relative;z-index:1;}
  .gradient-overlay-white{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
      to right,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.80) 50%,
      rgba(255,255,255,0) 100%
    );
  }
  .gradient-overlay-white-left{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to left,rgba(255,255,255,.95) 0%,rgba(255,255,255,.80) 50%,rgba(255,255,255,0) 100%);
  }
  .gradient-overlay-white-bottom{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.80) 50%,rgba(255,255,255,.95) 100%);
  }
  .gradient-overlay-white-top{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.80) 50%,rgba(255,255,255,.95) 100%);
  }
  
  
  /* =============================================================================
  ANIMATE ON SCROLL — Add .animate + .animate-fade-up (etc) to element.
  JS (djm-default.js) adds .in-view when element enters viewport.
  ============================================================================= */
  .animate-fade-up{
    opacity:0;
    transform:translateY(24px);
    transition:opacity var(--transition-slower) var(--ease),
               transform var(--transition-slower) var(--ease);
  }
  .animate-fade-up.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .animate-fade{
    opacity:0;
    transition:opacity var(--transition-slower) var(--ease);
  }
  /* Stagger delays — add to parent. All cascade in (first item delayed too). */
  .stagger-200 > *:nth-child(1){transition-delay:200ms;}
  .stagger-200 > *:nth-child(2){transition-delay:400ms;}
  .stagger-200 > *:nth-child(3){transition-delay:600ms;}
  .stagger-200 > *:nth-child(4){transition-delay:800ms;}
  .stagger-200 > *:nth-child(5){transition-delay:1000ms;}
  .stagger-200 > *:nth-child(6){transition-delay:1200ms;}
  .stagger-250 > *:nth-child(1){transition-delay:250ms;}
  .stagger-250 > *:nth-child(2){transition-delay:500ms;}
  .stagger-250 > *:nth-child(3){transition-delay:750ms;}
  .stagger-250 > *:nth-child(4){transition-delay:1000ms;}
  .stagger-250 > *:nth-child(5){transition-delay:1250ms;}
  .stagger-250 > *:nth-child(6){transition-delay:1500ms;}
  .stagger-300 > *:nth-child(1){transition-delay:300ms;}
  .stagger-300 > *:nth-child(2){transition-delay:600ms;}
  .stagger-300 > *:nth-child(3){transition-delay:900ms;}
  .stagger-300 > *:nth-child(4){transition-delay:1200ms;}
  .stagger-300 > *:nth-child(5){transition-delay:1500ms;}
  .stagger-300 > *:nth-child(6){transition-delay:1800ms;}
  .stagger-500 > *:nth-child(1){transition-delay:500ms;}
  .stagger-500 > *:nth-child(2){transition-delay:1000ms;}
  .stagger-500 > *:nth-child(3){transition-delay:1500ms;}
  .stagger-500 > *:nth-child(4){transition-delay:2000ms;}
  .stagger-500 > *:nth-child(5){transition-delay:2500ms;}
  .stagger-500 > *:nth-child(6){transition-delay:3000ms;}
  .stagger-700 > *:nth-child(1){transition-delay:700ms;}
  .stagger-700 > *:nth-child(2){transition-delay:1400ms;}
  .stagger-700 > *:nth-child(3){transition-delay:2100ms;}
  .stagger-700 > *:nth-child(4){transition-delay:2800ms;}
  .stagger-700 > *:nth-child(5){transition-delay:3500ms;}
  .stagger-700 > *:nth-child(6){transition-delay:4200ms;}
  .animate-fade.in-view{
    opacity:1;
  }
  /* =============================================================================
  10) ICON SHIFT
  ============================================================================= */
  
  .icon-shift i,
  .icon-shift svg,
  .icon-shift .bricks-button__icon{
    display:inline-block;
    transition:transform var(--transition) var(--ease);
  }
  
  .icon-shift:hover i,
  .icon-shift:hover svg,
  .icon-shift:hover .bricks-button__icon{
    transform:translateX(6px);
  }
  /* When icon-shift is inside .card, trigger on card hover */
  .card:hover .icon-shift i,
  .card:hover .icon-shift svg,
  .card:hover .icon-shift .bricks-button__icon{
    transform:translateX(6px);
  }
  
  /* Bricks button: icon slides right 5px on hover */
  .brxe-button i,
  .brxe-button svg,
  .brxe-button .bricks-button__icon{
    display:inline-block;
    transition:transform var(--transition-slow) var(--ease);
  }
  .brxe-button:hover i,
  .brxe-button:hover svg,
  .brxe-button:hover .bricks-button__icon{
    transform:translateX(5px);
  }
  
  
  /* =============================================================================
  11) GLASS
  ============================================================================= */
  
  .glass{
    background:var(--glass-bg)!important;
    border:1px solid var(--glass-border)!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  
  
  /* =============================================================================
  12) CARDS / TILE REVEAL
  ============================================================================= */
  
  .card{
    background:var(--c-tertiary);
    border:1px solid var(--c-border);
    /* border-radius:var(--r-lg); */
    /* padding:var(--s-5); */
    box-shadow:var(--shadow-sm);
  }
  
  .tile{overflow:hidden;}
  
  .tile-expand{
    max-height:0;
    opacity:0;
    transform:translateY(6px);
    transition:max-height var(--transition-slow) var(--ease),
               opacity var(--transition) var(--ease),
               transform var(--transition) var(--ease);
  }
  
  .tile:hover .tile-expand{
    max-height:240px;
    opacity:1;
    transform:translateY(0);
  }
  
  
  /* =============================================================================
  13) IMAGE ZOOM
  ============================================================================= */
  
  .img-zoom{overflow:hidden;border-radius:inherit;position:relative;}
  /* Fixed height for card images — add .card-img to image wrapper */
  .card-img{aspect-ratio:4/3;}
  .card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .img-zoom img{
    transition:transform var(--transition-slow) var(--ease);
  }
  .img-zoom:hover img,
  .card:hover .img-zoom img{
    transform:scale(1.06);
  }
  /* Hover overlay — inside .img-zoom. Put "Click to explore" (or any text) as child. */
  .card-hover-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding: 16px;
    /* background:rgba(var(--c-primary-rgb),.6); */
    color:var(--c-white);
    font-size:.875rem;
    font-weight:500;
    letter-spacing:.05em;
    opacity:0;
    transition:opacity var(--transition-slow) var(--ease);
  }
  .img-zoom:hover .card-hover-overlay,
  .card:hover .card-hover-overlay{
    opacity:1;
  }
  
  
  /* =============================================================================
  14) BUTTON BASE
  ============================================================================= */
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.75rem 1.1rem;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:600;
    cursor:pointer;
    text-decoration:none!important;
    box-shadow:var(--shadow-sm);
  }

  /* =============================================================================
TYPOGRAPHY UTILITIES (mobile-first + responsive)
Usage:
  text-base md-text-xl lg-text-2xl
  text-sm md-text-base
  text-2xl (fluid via clamp tokens below)
============================================================================= */

/* Base sizes (mobile-first) */
.text-xs  { font-size: .75rem !important; }
.text-sm  { font-size: .875rem !important; }
.text-base{ font-size: var(--fs-0) !important; }
.text-lg  { font-size: var(--fs-1) !important; }
.text-xl  { font-size: var(--fs-2) !important; }
.text-2xl { font-size: var(--fs-3) !important; }

/* Larger display sizes (still fluid) */
.text-3xl { font-size: clamp(2rem, 1.6rem + 2vw, 3rem) !important; }
.text-4xl { font-size: clamp(2.4rem, 1.8rem + 3vw, 4rem) !important; }
.text-5xl { font-size: clamp(2.8rem, 2rem + 4vw, 4.5rem) !important; }

/* Responsive overrides */
@media (min-width: 768px){
  .md-text-xs  { font-size: .75rem !important; }
  .md-text-sm  { font-size: .875rem !important; }
  .md-text-base{ font-size: var(--fs-0) !important; }
  .md-text-lg  { font-size: var(--fs-1) !important; }
  .md-text-xl  { font-size: var(--fs-2) !important; }
  .md-text-2xl { font-size: var(--fs-3) !important; }
  .md-text-3xl { font-size: clamp(2rem, 1.6rem + 2vw, 3rem) !important; }
  .md-text-4xl { font-size: clamp(2.4rem, 1.8rem + 3vw, 4rem) !important; }
  .md-text-5xl { font-size: clamp(2.8rem, 2rem + 4vw, 4.5rem) !important; }   
}

@media (min-width: 992px){
  .lg-text-xs  { font-size: .75rem !important; }
  .lg-text-sm  { font-size: .875rem !important; }
  .lg-text-base{ font-size: var(--fs-0) !important; }
  .lg-text-lg  { font-size: var(--fs-1) !important; }
  .lg-text-xl  { font-size: var(--fs-2) !important; }
  .lg-text-2xl { font-size: var(--fs-3) !important; }
  .lg-text-3xl { font-size: clamp(2rem, 1.6rem + 2vw, 3rem) !important; }
  .lg-text-4xl { font-size: clamp(2.4rem, 1.8rem + 3vw, 4rem) !important; }
  .lg-text-5xl { font-size: clamp(2.8rem, 2rem + 4vw, 4.5rem) !important; }
}