/* =============================================================================
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-sm-bg: rgba(255,255,255,.05);
    --glass-sm-border: rgba(255,255,255,.12);
    --glass-sm-blur: 6px;

    --glass-bg: rgba(255,255,255,.10);
    --glass-border: rgba(255,255,255,.22);
    --glass-blur: 12px;

    --glass-lg-bg: rgba(255,255,255,.18);
    --glass-lg-border: rgba(255,255,255,.32);
    --glass-lg-blur: 20px;
  
    --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
  ============================================================================= */
  /* Position content over the bottom of a relative parent */
.absolute-bottom {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
  .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;
  }
  
  .overlay-primary-bottom {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  
    background: linear-gradient(
      to top,
      rgba(var(--c-primary-rgb), 0.9) 0%,
      rgba(var(--c-primary-rgb), 0.45) 55%,
      transparent 100%
    );
  }

  /* 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 */
  .gap-0 { gap: 0 !important; }
  .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-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;}
  

  @media(min-width:768px){
    .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;}
    .md-gap-0 { gap: 0 !important; }
  }
  
/* Simple responsive grids */
.grid-2,
.grid-3,
.grid-4,
.grid-5 {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.grid-4,
.grid-5 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-5 {
    grid-template-columns: repeat(5, minmax(0,1fr));
  }
}

  .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;}
  }
  .flex-col{
    flex-direction:column;
  }
  .flex-row{
    flex-direction:row;
  }
  /* 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-* — see GLASS section */
  .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 — width/style only; color from .border-primary, .border-secondary, etc. */
  .border{
    border-style:solid!important;
    border-width:2px!important;
    border-color:var(--c-border);
  }
  .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-sm,
  .hover-glass-sm,
  .hover-bg-glass,
  .hover-glass,
  .hover-bg-glass-lg,
  .hover-glass-lg,
  .hover-bg-transparent{
    border:1px solid transparent;
    transition:
      background var(--transition-slow) var(--ease),
      border-color var(--transition-slow) var(--ease),
      backdrop-filter var(--transition-slow) var(--ease),
      -webkit-backdrop-filter 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-sm:hover,
  .hover-glass-sm:hover{
    background:var(--glass-sm-bg)!important;
    border-color:var(--glass-sm-border)!important;
    backdrop-filter:blur(var(--glass-sm-blur));
    -webkit-backdrop-filter:blur(var(--glass-sm-blur));
  }
  .hover-bg-glass:hover,
  .hover-glass:hover{
    background:var(--glass-bg)!important;
    border-color:var(--glass-border)!important;
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
  }
  .hover-bg-glass-lg:hover,
  .hover-glass-lg:hover{
    background:var(--glass-lg-bg)!important;
    border-color:var(--glass-lg-border)!important;
    backdrop-filter:blur(var(--glass-lg-blur));
    -webkit-backdrop-filter:blur(var(--glass-lg-blur));
  }
  .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-underline-tertiary{
    position:relative;
  }
  .hover-underline-tertiary::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--c-tertiary);
    transition:width var(--transition) var(--ease);
  }
  .hover-underline-tertiary:hover::after,
  .hover-underline-tertiary:focus-visible::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 — sm = clearer, default = .glass / .bg-glass, lg = heavier frost
  ============================================================================= */

  .glass-sm,
  .bg-glass-sm{
    background:var(--glass-sm-bg)!important;
    border:1px solid var(--glass-sm-border)!important;
    backdrop-filter:blur(var(--glass-sm-blur));
    -webkit-backdrop-filter:blur(var(--glass-sm-blur));
  }

  .glass,
  .bg-glass{
    background:var(--glass-bg)!important;
    border:1px solid var(--glass-border)!important;
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
  }

  .glass-lg,
  .bg-glass-lg{
    background:var(--glass-lg-bg)!important;
    border:1px solid var(--glass-lg-border)!important;
    backdrop-filter:blur(var(--glass-lg-blur));
    -webkit-backdrop-filter:blur(var(--glass-lg-blur));
  }

  /* Hover glass — aliases: .hover-glass-* (see §8 HOVER UTILITIES for :hover rules) */
  
  
  /* =============================================================================
  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; }
}

/* ============================================
   OPACITY / MUTED TEXT
   ============================================ */

.opacity-100 {
  opacity: 1;
}

.opacity-90 {
  opacity: .9;
}

.opacity-80 {
  opacity: .8;
}

.opacity-70 {
  opacity: .7;
}

.opacity-60 {
  opacity: .6;
}

.opacity-50 {
  opacity: .5;
}

.opacity-40 {
  opacity: .4;
}

.opacity-30 {
  opacity: .3;
}

.text-muted {
  opacity: .65;
}

.text-subtle {
  opacity: .8;
}

.text-faint {
  opacity: .5;
}

/* ============================================
   TEXT DECORATION
   ============================================ */

.underline {
  text-decoration: underline !important;
}

/* ============================================
   BRICKS BUILDER
   Disable animations while editing
   ============================================ */

body:not(.bricks-is-frontend) [class*="animate-"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  transition: none !important;
  transition-delay: 0s !important;
  clip-path: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

@media (max-width: 767px) {
    .brxe-container {
        width: 100%;
    }
	h2 {
		font-size: 1.9em;
	}

}

/* =============================================================================
   BORDER LEFT / RIGHT UTILITIES
============================================================================= */

/* ---------- Base ---------- */

.border-left{
  border-left-style:solid;
  border-left-width:1px;
  border-left-color:var(--c-border);
}

.border-right{
  border-right-style:solid;
  border-right-width:1px;
  border-right-color:var(--c-border);
}

/* Width */
.border-left-2{border-left-width:2px!important;}
.border-left-3{border-left-width:3px!important;}

.border-right-2{border-right-width:2px!important;}
.border-right-3{border-right-width:3px!important;}

/* ---------- Brand Colors ---------- */

.border-left-primary{border-left-color:var(--c-primary)!important;}
.border-left-secondary{border-left-color:var(--c-secondary)!important;}
.border-left-tertiary{border-left-color:var(--c-tertiary)!important;}
.border-left-white{border-left-color:#fff!important;}
.border-left-black{border-left-color:#000!important;}

.border-right-primary{border-right-color:var(--c-primary)!important;}
.border-right-secondary{border-right-color:var(--c-secondary)!important;}
.border-right-tertiary{border-right-color:var(--c-tertiary)!important;}
.border-right-white{border-right-color:#fff!important;}
.border-right-black{border-right-color:#000!important;}

/* ---------- White Opacity Scale ---------- */

.border-left-white-10{border-left-color:rgba(255,255,255,.1)!important;}
.border-left-white-20{border-left-color:rgba(255,255,255,.2)!important;}
.border-left-white-30{border-left-color:rgba(255,255,255,.3)!important;}
.border-left-white-40{border-left-color:rgba(255,255,255,.4)!important;}
.border-left-white-50{border-left-color:rgba(255,255,255,.5)!important;}
.border-left-white-60{border-left-color:rgba(255,255,255,.6)!important;}
.border-left-white-70{border-left-color:rgba(255,255,255,.7)!important;}
.border-left-white-80{border-left-color:rgba(255,255,255,.8)!important;}
.border-left-white-90{border-left-color:rgba(255,255,255,.9)!important;}

.border-right-white-10{border-right-color:rgba(255,255,255,.1)!important;}
.border-right-white-20{border-right-color:rgba(255,255,255,.2)!important;}
.border-right-white-30{border-right-color:rgba(255,255,255,.3)!important;}
.border-right-white-40{border-right-color:rgba(255,255,255,.4)!important;}
.border-right-white-50{border-right-color:rgba(255,255,255,.5)!important;}
.border-right-white-60{border-right-color:rgba(255,255,255,.6)!important;}
.border-right-white-70{border-right-color:rgba(255,255,255,.7)!important;}
.border-right-white-80{border-right-color:rgba(255,255,255,.8)!important;}
.border-right-white-90{border-right-color:rgba(255,255,255,.9)!important;}

/* ---------- Primary Opacity Scale ---------- */

.border-left-primary-10{border-left-color:rgba(var(--c-primary-rgb),.1)!important;}
.border-left-primary-20{border-left-color:rgba(var(--c-primary-rgb),.2)!important;}
.border-left-primary-30{border-left-color:rgba(var(--c-primary-rgb),.3)!important;}
.border-left-primary-40{border-left-color:rgba(var(--c-primary-rgb),.4)!important;}
.border-left-primary-50{border-left-color:rgba(var(--c-primary-rgb),.5)!important;}
.border-left-primary-60{border-left-color:rgba(var(--c-primary-rgb),.6)!important;}
.border-left-primary-70{border-left-color:rgba(var(--c-primary-rgb),.7)!important;}
.border-left-primary-80{border-left-color:rgba(var(--c-primary-rgb),.8)!important;}
.border-left-primary-90{border-left-color:rgba(var(--c-primary-rgb),.9)!important;}

.border-right-primary-10{border-right-color:rgba(var(--c-primary-rgb),.1)!important;}
.border-right-primary-20{border-right-color:rgba(var(--c-primary-rgb),.2)!important;}
.border-right-primary-30{border-right-color:rgba(var(--c-primary-rgb),.3)!important;}
.border-right-primary-40{border-right-color:rgba(var(--c-primary-rgb),.4)!important;}
.border-right-primary-50{border-right-color:rgba(var(--c-primary-rgb),.5)!important;}
.border-right-primary-60{border-right-color:rgba(var(--c-primary-rgb),.6)!important;}
.border-right-primary-70{border-right-color:rgba(var(--c-primary-rgb),.7)!important;}
.border-right-primary-80{border-right-color:rgba(var(--c-primary-rgb),.8)!important;}
.border-right-primary-90{border-right-color:rgba(var(--c-primary-rgb),.9)!important;}

/* =============================================================================
   HOVER REVEAL CARD
   Title always visible; body reveals smoothly without leaving the card
============================================================================= */

.hover-reveal{
  position:relative;
  overflow:hidden !important;
}

/* Image */
.hover-reveal img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    filter .7s cubic-bezier(.2,.8,.2,1);
}

.hover-reveal:hover img,
.hover-reveal:focus-within img{
  transform:scale(1.04);
}

/* Gradient */
.hover-reveal-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:linear-gradient(
    to top,
    rgba(var(--c-primary-rgb),.96) 0%,
    rgba(var(--c-primary-rgb),.76) 28%,
    rgba(var(--c-primary-rgb),.42) 55%,
    rgba(var(--c-primary-rgb),.08) 100%
  );

  opacity:.45;

  transition:
    opacity .55s cubic-bezier(.2,.8,.2,1);
}

.hover-reveal:hover .hover-reveal-overlay,
.hover-reveal:focus-within .hover-reveal-overlay{
  opacity:1;
}

/* Content remains anchored inside the bottom of the card */
.hover-reveal-content{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:2;

  padding:var(--s-4);
}

/* Title is always visible */
.hover-reveal-title{
  position:relative;
  z-index:2;

  transform:translateY(0);

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1);
}

/* Description and link are hidden initially */
.hover-reveal-body{
  max-height:0;
  margin-top:0;

  opacity:0;
  overflow:hidden;

  transform:translateY(16px);

  transition:
    max-height .55s cubic-bezier(.2,.8,.2,1),
    margin-top .55s cubic-bezier(.2,.8,.2,1),
    opacity .35s ease .08s,
    transform .55s cubic-bezier(.2,.8,.2,1);
}

/* Hover reveal */
.hover-reveal:hover .hover-reveal-title,
.hover-reveal:focus-within .hover-reveal-title{
  transform:translateY(-4px);
}

.hover-reveal:hover .hover-reveal-body,
.hover-reveal:focus-within .hover-reveal-body{
  max-height:240px;
  margin-top:.75rem;

  opacity:1;
  transform:translateY(0);
}

/* Clean up Bricks text spacing */
.hover-reveal-content h1,
.hover-reveal-content h2,
.hover-reveal-content h3,
.hover-reveal-content h4,
.hover-reveal-content h5,
.hover-reveal-content h6,
.hover-reveal-content p{
  margin-top:0;
}

.hover-reveal-content p:last-child{
  margin-bottom:0;
}

/* Touch devices: keep content accessible */
@media (hover:none){
  .hover-reveal-overlay{
    opacity:.85;
  }

  .hover-reveal-title{
    transform:none;
  }

  .hover-reveal-body{
    max-height:240px;
    margin-top:.75rem;
    opacity:1;
    transform:none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hover-reveal img,
  .hover-reveal-overlay,
  .hover-reveal-title,
  .hover-reveal-body{
    transition:none;
  }
}

/* =============================================================================
   LIST UTILITIES
============================================================================= */

/* Remove browser indentation */
.list-reset{
  margin:0;
  padding:0;
  list-style:none;
}

/* Fully left aligned list */
.list-flush{
  padding-left:1.25rem;
  margin-left:0;
}

/* Sage bullets */
.bullets-sage{
  list-style:disc;
}

.bullets-sage li::marker{
  color:var(--c-tertiary);
}

/* Spacing */
.bullets-sage li + li{
  margin-top:1rem;
}
/* Left aligned lists */
.list-inside{
  padding-left:1.25rem;
}

.list-outside{
  padding-left:0;
  margin-left:1.25rem;
}

/* =============================================================================
   LUXURY CONTACT FORM
   Add class: form-luxury
============================================================================= */

.form-luxury{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
}

/* Each field */
.form-luxury .form-group{
  width:100%;
  margin:0;
}

/* Labels */
.form-luxury label{
  display:block;
  margin:0 0 .5rem;

  color:var(--c-muted);
  opacity:0.7;
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Shared controls */
.form-luxury input,
.form-luxury select,
.form-luxury textarea{
  display:block;
  width:100%;
  min-width:0;

  border:1px solid rgba(var(--c-primary-rgb),.14);
  border-radius:0;

  background:var(--c-white);
  color:var(--c-primary);

  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.4;

  box-shadow:none;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-luxury select{
  color: var(--c-primary);
}

.form-luxury select.is-placeholder{
  color: rgba(var(--c-primary-rgb), .48);
}

/* Inputs and select */
.form-luxury input,
.form-luxury select{
  min-height: 50px;
  padding: 5px 15px;
}

/* Textarea */
.form-luxury textarea{
  min-height:10rem;
  padding:1.25rem 1.5rem;
  resize:vertical;
}

/* Placeholder */
.form-luxury input::placeholder,
.form-luxury textarea::placeholder{
  color:rgba(var(--c-primary-rgb),.48);
  opacity:1;
}

/* Select */
.form-luxury select{
  appearance:none;
  cursor:pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(var(--c-primary-rgb),.55) 50%),
    linear-gradient(135deg, rgba(var(--c-primary-rgb),.55) 50%, transparent 50%);
  background-position:
    calc(100% - 1.4rem) 50%,
    calc(100% - 1.05rem) 50%;
  background-size:.4rem .4rem, .4rem .4rem;
  background-repeat:no-repeat;

  padding-right:3rem;
}

/* Focus */
.form-luxury input:focus,
.form-luxury select:focus,
.form-luxury textarea:focus{
  outline:none;
  border-color:var(--c-primary);
  box-shadow:0 0 0 2px rgba(var(--c-primary-rgb),.08);
}

/* Submit wrapper */
.form-luxury .submit-button-wrapper{
  width:100%;
}

/* Submit button */
.form-luxury .submit-button-wrapper .bricks-button{
  width:100%;
  min-height:4.75rem;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;

  padding:1rem 1.5rem;

  border:1px solid var(--c-primary);
  border-radius:0;

  background:var(--c-primary);
  color:var(--c-white);

  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;

  box-shadow:none;
  cursor:pointer;

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.form-luxury .submit-button-wrapper .bricks-button:hover{
  background:var(--c-primary-dark, var(--c-primary));
  border-color:var(--c-primary-dark, var(--c-primary));
}

/* Add arrow after button text */
.form-luxury .submit-button-wrapper .text::after{
  content:"→";
  display:inline-block;
  margin-left:.75rem;

  transition:transform var(--transition-fast);
}

.form-luxury .submit-button-wrapper .bricks-button:hover .text::after{
  transform:translateX(5px);
}

/* Validation */
.form-luxury .message{
  grid-column:1 / -1;
}

.form-luxury .form-group.error input,
.form-luxury .form-group.error select,
.form-luxury .form-group.error textarea{
  border-color:#a13d3d;
}

/* Mobile */
@media(max-width:767px){
  .form-luxury{
    gap:1.25rem;
  }

  .form-luxury input,
  .form-luxury select{
    min-height:4rem;
    padding:1rem 1.125rem;
  }

  .form-luxury textarea{
    min-height:9rem;
    padding:1rem 1.125rem;
  }
}