:root{
      --ease-out: cubic-bezier(.22,1,.36,1);
      --ease-in: cubic-bezier(.5, 0, .75, .0);
      --glass-bg: rgba(12, 18, 16, .38);
      --glass-ring: rgba(255,255,255,.08);
      --nav-h: 64px;
      --hero-overlay: linear-gradient(180deg, rgba(4,7,6,.55) 0%, rgba(4,7,6,.35) 35%, rgba(4,7,6,.65) 100%);
    }
    html,body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol', sans-serif; overflow-x: hidden !important;}

    /* ——— GLASS NAV ——— */
    .glass{ backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); background: var(--glass-bg); border: 1px solid var(--glass-ring); }
    .nav-shadow{ box-shadow: 0 10px 30px rgba(0,0,0,.20); }

    /* ——— HERO VIDEO ——— */
    .hero{ height: 100svh; position: relative; overflow: clip; }
    .video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
    .video-bgg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; }
    .hero-overlay{ position:absolute; inset:0; background: var(--hero-overlay); z-index:1; }
    .hero-inner{ position:relative; z-index:2; }

    /* Crossfade/zoom slides */
    .slide{ position:absolute; inset:0; opacity:0; transform: scale(1.02); transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out); }
    .slide.is-active{ opacity:1; transform: scale(1); }

    /* dots */
    .dot{ width:12px;height:12px; border-radius:999px; background:rgb(139 223 200); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .25s var(--ease-out), background .25s; cursor:pointer }
    .dot.is-active{ background:rgb(21 189 139); transform: scale(1.15); box-shadow: 0 2px 10px rgba(255,255,255,.35) }

    /* Section reveals */
    .reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
    .reveal.in{ opacity:1; transform:none; }

    /* Terrain crossfade */
    .terrain-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 1s var(--ease-out); }
    .terrain-img.is-on{ opacity:1; }

    /* Parallax image wrapper (mountain) */
    .parallax-wrap{ position:absolute; inset:0; overflow:hidden }
    .parallax-img{ position:absolute; width:112%; height:112%; object-fit:cover; transform: translateY(0) scale(1.03); will-change: transform; }

    /* Models carousel */
    .carousel-track{ display:flex; width:100%; transition: transform .6s var(--ease-out); will-change: transform; }
    .carousel-card{ flex: 0 0 100%; height: 24rem; }
    @media (min-width:1024px){ .carousel-card{ height: 32rem; } }

    .model-dot{ width:10px; height:10px; border-radius:999px; background:#d1d5db; transition:transform .2s var(--ease-out), background .2s; cursor:pointer }
    .model-dot.is-active{ background:#14b8a6; transform:scale(1.15)}

    /* Counters typography scale */
    .counter{ font-variation-settings: "wght" 800; }

    /* Button micro-interactions */
    .btn-soft{ background: rgba(255,255,255,.92); backdrop-filter: blur(10px); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out); }
    .btn-soft:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,255,255,.18); background: #fff; }

    /* Reduce motion respect */
    @media (prefers-reduced-motion: reduce){
      .slide, .carousel-track{ transition: none !important; }
    }
  
    /* ---- Page 6: Triptych (expand-on-scroll) ---- */
    #interior-triptych .hx-triptych{
      display:flex; align-items:center;
      height:clamp(420px,72vh,760px); overflow:hidden;
    }
    #interior-triptych .hx-card{ position:relative; flex:1 0 0; height:100%; isolation:isolate; will-change:transform,flex-basis,opacity,border-radius; transition: flex-basis .85s var(--ease-out), transform .85s var(--ease-out), opacity .55s var(--ease-out), border-radius .55s var(--ease-out); }
    #interior-triptych .hx-img{
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      transform:scale(1.02); transition:transform .8s var(--ease-out);
    }
    /* Expanded state */
    #interior-triptych .is-zoomed .hx-left{  transform:translateX(-115%); opacity:0; pointer-events:none; }
    #interior-triptych .is-zoomed .hx-right{ transform:translateX(115%);  opacity:0; pointer-events:none; }
    #interior-triptych .is-zoomed .hx-center{ flex:0 0 100%; border-radius:0; }
    #interior-triptych .is-zoomed .hx-center .hx-img{ transform:scale(1.0); }
    /* Mobile fallback */
    @media (max-width:767px){
      #interior-triptych .hx-triptych{ gap:1rem; height:auto; }
      #interior-triptych .hx-card{ aspect-ratio:4/3; }
      #interior-triptych .is-zoomed .hx-left,
      #interior-triptych .is-zoomed .hx-right{ transform:none; opacity:1; pointer-events:auto; }
      #interior-triptych .is-zoomed .hx-center{ flex:1 0 0; border-radius:1rem; }
    }
    @media (prefers-reduced-motion:reduce){
      #interior-triptych .hx-card, #interior-triptych .hx-img{ transition:none !important; }
    }
    /* —— Page 6: full-bleed state & container overrides —— */
  #interior-triptych{ overflow:hidden; }
  #interior-triptych.triptych-full{ padding-block:0 !important; }
  #interior-triptych.triptych-full .mx-auto{ width:100% !important; max-width:none !important; }
  /* make the triptych itself fill the viewport when zoomed */
  #interior-triptych #p6Triptych.is-zoomed{ height:100svh; }


  /* Page 6: overlay copy & scrim (only visible when center is full) */
#interior-triptych .hx-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,0) 72%);
  opacity:0; transition:opacity .45s var(--ease-out); z-index:1;
}
#interior-triptych #p6Triptych.is-zoomed .hx-center .hx-scrim{ opacity:1; }

#interior-triptych .hx-copy{
  position:absolute; right:clamp(24px,6vw,72px); top:50%;
  transform:translateY(-50%) translateX(24px);
  max-width:min(560px,40vw); color:#fff;
  opacity:0; visibility:hidden; pointer-events:none; z-index:2;
  transition:opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
#interior-triptych #p6Triptych.is-zoomed .hx-copy{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); pointer-events:auto;
}

#interior-triptych .hx-title{ font-weight:800; line-height:1.2; font-size:clamp(22px,2.6vw,40px); text-shadow:0 2px 18px rgba(0,0,0,.35); }
#interior-triptych .hx-body{ margin-top:.75rem; font-size:clamp(14px,1.2vw,18px); line-height:1.7; color:rgba(255,255,255,.95); }

#interior-triptych .hx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1rem; padding:.875rem 1.25rem; border-radius:9999px;
  background:rgba(0,0,0,.72); color:#fff; font-weight:700;
  backdrop-filter:blur(6px) saturate(140%);
  transition:transform .2s var(--ease-out), background .2s var(--ease-out);
}
#interior-triptych .hx-btn:hover{ background:rgba(0,0,0,.9); transform:translateY(-1px); }


/* === ENV CONTROL (scroll-scrub + tracker) === */
/* === ENV CONTROL (horizontal scroll + tracker) === */
#env-control {
  position: relative;
  color: #0f172a;
}
#env-control > .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* horizontal scrolling rail */
#env-control .env-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 30px;
}
#env-control .env-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, rgba(20,184,166,0.92), rgba(5,150,105,0.92));
  color: #fff;
  border-radius: 22px;
  padding: 22px 26px;
  min-width: 320px;
  min-height: 160px;
  box-shadow: 0 12px 28px rgba(16,185,129,.25);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
#env-control.in .env-card { opacity: 1; transform: none; }

#env-control .env-ico {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  background: rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  font-size: 32px;
  flex: none;
}
#env-control .env-title { font-weight: 800; font-size: 20px; line-height: 1.1; }
#env-control .env-sub { font-size: 15px; opacity: .98; margin-top: 6px; line-height: 1.25; }

/* baseline track */
#env-control .env-line {
  position: relative;
  margin-top: 20px;
  height: 6px;
  background: rgba(255,255,255,.45);
  border-radius: 9999px;
}
#env-control .env-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
              rgba(16,185,129,.15) 0%,
              rgba(16,185,129,1) 45%,
              rgba(16,185,129,.15) 100%);
  transform-origin: left center;
  transform: scaleX(var(--prog, 0));
  transition: transform .08s linear;
}

/* moving tracker knob */
#env-control .env-tracker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  /* border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.35); */
  transform: translateX(calc(var(--prog, 0) * 100% - 50%)) translateY(-50%);
  transition: transform .08s linear;
}

/* fixed end dot */
#env-control .env-end {
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.35); */
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  #env-control .env-rail { flex-wrap: wrap; overflow-x: visible; }
  #env-control .env-card { width: 100%; min-height: 140px; }
  #env-control .env-line { height: 4px; }
}

/* hide native horizontal scrollbar */
#env-control .env-rail {
  scrollbar-width: none;       /* Firefox */
}
#env-control .env-rail::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Edge */
}


.dur-stack {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* each card */
.dur-item {
  background: #f9fafb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all .4s ease;
  position: relative;
  z-index: 0;
  margin-top: -60px;   /* overlap amount for stack */
}

/* make sure first starts without overlap */
.dur-item:first-child { margin-top: 0; }

/* header bar */
.dur-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 1.25rem;
  background: #fff;
}
.dur-head .arrow { transition: transform .3s ease; }
.dur-item.active .dur-head .arrow { transform: rotate(180deg); }

/* collapsed body hidden */
.dur-body {
  max-height: 145px;
  /* opacity: 0; */
  overflow: hidden;
  transition: all .5s ease;
  padding: 0 24px;
}

/* expanded body visible */
.dur-item.active {
  z-index: 10;
  margin-top: 0; /* bring front */
}
.dur-item.active .dur-body {
  max-height: 1000px; /* large enough */
  opacity: 1;
  padding: 28px;
}

/* make collapsed items small but still visible */
.dur-item:not(.active) {
  height: 168px;  /* collapsed visible height */
}
.dur-item.active { height: auto; }

@media (max-width: 767px) {
  .dur-item { margin-top: 0; height: auto; }
  .dur-body { display: flex; flex-direction: column; }
}


#howSlider {
  /* width: 300%; 3 slides */
}
#howSlider img {
  flex: 0 0 100%;
}
.how-tab {
  position: relative;
  transition: color 0.3s;
  font-size: 19px;
}
.how-tab.active {
  color: #14b8a6;
}
.how-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 5px;
  background: #14b8a6;
}

/* === MODELS · Trio carousel (prev half • active full • next half) === */
#ddmodels .viewport{overflow:hidden}

/* track */
#ddmodels #ddmodelsTrack{
  display:flex;
  justify-content:center;              /* center the trio */
  align-items:stretch;
  gap:24px;                            /* space between cards */
  will-change: contents;
}

/* base — hide everything by default */
#ddmodels .carousel-slide{
  display:none;
  flex:0 0 100%;
  opacity:0;
  transform:scale(.96);
  transition: flex-basis .6s ease, opacity .6s ease, transform .6s ease;
  order:5;                             /* keep non-trio at the end */
}

/* visible trio */
#ddmodels .carousel-slide.prev,
#ddmodels .carousel-slide.active,
#ddmodels .carousel-slide.next{
  display:block;
  opacity:1;
  transform:scale(1);
}

/* put them in the right order (left → center → right) */
#ddmodels .carousel-slide.prev{ order:1; }
#ddmodels .carousel-slide.active{ order:2; }
#ddmodels .carousel-slide.next{ order:3; }

/* desktop widths (half / full / half) */
@media (min-width:1024px){
  #ddmodels .carousel-slide.prev,
  #ddmodels .carousel-slide.next{ flex-basis:50%; opacity:.9; }
  #ddmodels .carousel-slide.active{ flex-basis:100%; }
}

/* mobile — show only the active one full width */
@media (max-width:1023px){
  #ddmodels .carousel-slide.prev,
  #ddmodels .carousel-slide.next{ display:none; }
  #ddmodels .carousel-slide.active{ flex-basis:100%; }
}

/* dots utility (optional if you already style them elsewhere) */
.model-dot{ width:.75rem; height:.75rem; border-radius:9999px; }


/* ===== MODELS — 3-up center focus (no auto) ===== */
:root{
  --ease: cubic-bezier(.22,1,.36,1);
  --gap: 24px;            /* space between cards */
  --sideW: 22%;           /* left/right width on desktop */
  --centerW: 56%;         /* center width (100 - 2*sideW) */
}

/* layout spacing */
#ddmodels .viewport{ margin: 0 calc(var(--gap) * -0.5); }
#ddmodels #ddmodelsTrack > .carousel-slide{ padding: 0 calc(var(--gap) * .5); }

/* card visuals */
#ddmodels .card{
  position: relative;
  overflow: hidden;
  border-radius: 1rem;              /* rounded-2xl */
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
  height: 24rem;                    /* h-96 */
  background: #000;
}
#ddmodels .card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease); }
#ddmodels .card img.hovered{ opacity:0; }
#ddmodels .card:hover img.base{ opacity:0; }
#ddmodels .card:hover img.hovered{ opacity:1; }

/* CTA */
#ddmodels .cta{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%) translateY(10px);
  opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
}

/* Fallback BEFORE JS: always show 3 on desktop, 1 on mobile */
#ddmodels .carousel-slide{ display:block; }
@media (min-width:1024px){
  #ddmodels .carousel-slide{ flex: 0 0 33.333%; }
  #ddmodels .cta{ opacity:1; transform:translateX(-50%) translateY(0); } /* show CTA until JS ready */
}
@media (max-width:1023px){
  #ddmodels .carousel-slide{ flex: 0 0 100%; }
  #ddmodels .cta{ opacity:1; transform:translateX(-50%) translateY(0); }
}

/* AFTER JS is ready: apply exact prev/active/next sizing (desktop) and only-center CTA */
#ddmodels.js-ready .cta{ opacity:0; transform:translateX(-50%) translateY(10px); }
@media (min-width:1024px){
  #ddmodels.js-ready .carousel-slide{
    display:none; flex:0 0 0%; opacity:0; pointer-events:none;
    transition:flex-basis .5s var(--ease), opacity .3s var(--ease);
  }
  #ddmodels.js-ready .carousel-slide.prev,
  #ddmodels.js-ready .carousel-slide.next{
    display:block; flex-basis: var(--sideW); opacity:.95;
  }
  #ddmodels.js-ready .carousel-slide.active{
    display:block; flex-basis: var(--centerW); opacity:1; pointer-events:auto;
  }
  #ddmodels.js-ready .carousel-slide.active .cta{
    opacity:1; transform:translateX(-50%) translateY(0);
  }
}
/* Mobile/tablet after JS: show only the active slide */
@media (max-width:1023px){
  #ddmodels.js-ready .carousel-slide{ display:none; flex:0 0 100%; }
  #ddmodels.js-ready .carousel-slide.active{ display:block; }
  #ddmodels.js-ready .cta{ opacity:1; transform:translateX(-50%) translateY(0); }
}

/* nav buttons */
#ddmodels .navbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  background:#fff; border-radius:9999px;
  box-shadow:0 8px 18px rgba(0,0,0,.12); transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
#ddmodels .navbtn:hover{ transform:translateY(-50%) scale(1.04); box-shadow:0 10px 22px rgba(0,0,0,.16); }

/* dots */
#ddmodels .dot{
  width:10px; height:10px; border-radius:9999px; background:#d1d5db;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
#ddmodels .dot[aria-current="true"]{ background:#14b8a6; transform:scale(1.1); }

/* kill any accidental scrollbars inside the viewport */
#ddmodels .viewport{ overflow: hidden; }
#ddmodels #ddmodelsTrack{ overflow: visible; }


:root {
  --ease: cubic-bezier(.22,1,.36,1);
}
/* Footer reveal effect */
#footerHero {
  position: fixed;
  bottom: -100%;       /* Start hidden */
  left: 0;
  width: 100%;
  min-height: 48vh;
  background: url('/static/home/vvv10.webp') no-repeat center center;
  transition: bottom 0.8s ease-in-out;
  z-index: -1;         /* Behind page content */
}



#footerHero.show {
  bottom: 0;           /* Slide up */
}

#footerHero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

#footerHero > * {
  position: relative;
  z-index: 1;
}

 :root {
      --nav-h: 4rem; /* nav height */
    }
    /* Fade + slide animation */
    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(-10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeSlide {
      animation: fadeSlide 0.3s ease forwards;
    }

    .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 6px;
  color: rgba(255,255,255,0.9);
  transition: color .3s;
}

.nav-link:hover { color: #fff; }

.nav-link .underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: #14b8a6; /* teal */
  transition: width .3s ease;
}

.nav-link:hover .underline,
.nav-link.active .underline {
  width: 100%;
}

/* Triptych: mobile = show ONE center card, no animation */
@media (max-width: 767px) {
  #interior-triptych .hx-triptych {
    display: block !important;
    position: static !important;
    height: auto !important;
  }

  #interior-triptych .hx-copy 
  {
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 45% !important;
  }
  /* Hide left/right cards entirely */
  #interior-triptych .hx-card { 
    display: none !important; 
    transform: none !important; 
    will-change: auto !important;
  }
  #interior-triptych .hx-card.hx-center { 
    display: block !important; 
    position: relative !important; 
    height: 68vh !important;    /* adjust if you want a different mobile height */
    
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }

  /* Image fills, no transforms */
  #interior-triptych .hx-card.hx-center .hx-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Scrim & copy visible on mobile */
  #interior-triptych .hx-card.hx-center .hx-scrim {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10) 40%);
    opacity: 1 !important;
    pointer-events: none;
  }
  #interior-triptych .hx-card.hx-center .hx-copy {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    padding: 1rem 1.25rem 1.25rem;
    color: #fff;
  }
  #interior-triptych .hx-title { font-size: 1.25rem; line-height: 1.2; font-weight: 700; }
  #interior-triptych .hx-body  { margin-top: .5rem; font-size: .95rem; opacity: .92; }
  #interior-triptych .hx-btn   { 
    display: inline-block; margin-top: .75rem;
    background: #111; color: #fff; padding: .6rem 1rem; border-radius: 9999px;
  }

  /* If your desktop code toggles zoom/full classes, neutralize them on mobile */
  #interior-triptych.triptych-full *,
  #p6Triptych.is-zoomed * {
    transform: none !important;
    will-change: auto !important;
  }
}




@media (max-width: 767px) {
    .dur-body {
        display: flex !important;
        flex-direction: column-reverse !important;
        max-height: unset !important;
    }
}


/* Prevent background scroll while any modal is open */
body.modal-open { overflow: hidden !important; }



#pac-input
{
  top: 77px !important;
  left: 50% !important;
}


#mobileMenu
{
  max-width: 98% !important;
  overflow: hidden !important;
}

main
{
  overflow-x: hidden !important;
}




  /* --- FILTER PILLS (Base & Active) --- */
  .filter-pill, .filter-pill-project {
    background: white;
    color: #374151; /* gray-700 */
    border: 1px solid rgba(15,23,42,0.06);
    transition: transform .12s, box-shadow .12s, background-color .12s;
  }
  .filter-pill.is-active, .filter-pill-project.is-active {
    background: #111827; /* gray-900 */
    color: #fff;
    box-shadow: 0 10px 30px rgba(15,23,42,0.12);
    transform: translateY(-4px);
  }

  /* --- CARD BASE STYLES & HOVER EFFECTS (Shared) --- */
  .plan-card, .project-card {
    border-radius: 1rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
    cursor: pointer;
    /* Ensure cards have initial padding/margin for smooth max-height transition */
    padding: 0; 
    margin: 0.5rem 0;
  }

  /* Hover effects */
  .plan-card:hover, .project-card:hover { 
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  }
  .plan-card img, .project-card img { 
    border-bottom-left-radius: 0; 
    border-bottom-right-radius: 0; 
    transition: transform 0.5s ease;
  }
  .plan-card:hover img, .project-card:hover img { 
    transform: scale(1.1);
  }

  /* Overlay effect */
  .plan-card::before, .project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.0);
    transition: background 0.4s ease;
    border-radius: inherit;
    pointer-events: none;
  }
  .plan-card:hover::before, .project-card:hover::before {
    background: rgba(0, 0, 0, 0.1);
  }

  /* --- CRUCIAL FILTERING ANIMATION: COLLAPSE & EXPAND --- */

  /* Hidden State: Smoothly collapses the height and opacity */
  .plan-card.is-hidden,
  .project-card.is-hidden {
    opacity: 0 !important;
    transform: translateY(12px) scale(.98) !important;
    pointer-events: none;
    
    /* Key properties for smooth height collapse: */
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    transition: 
      opacity .3s ease, 
      transform .3s ease, 
      max-height .4s cubic-bezier(0.4, 0, 0.2, 1), 
      padding .4s cubic-bezier(0.4, 0, 0.2, 1),
      margin .4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Visible State: Smoothly restores height and opacity */
  .plan-card.is-visible,
  .project-card.is-visible {
    /* JS sets display: 'block' for this state */
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    
    /* Restore max-height and margins/paddings */
    max-height: 600px; /* Safely larger than card height */
    margin-top: 0.5rem !important; /* Restore vertical margin */
    margin-bottom: 0.5rem !important;
    
    transition: 
      opacity .45s cubic-bezier(.2,.9,.3,1), 
      transform .45s cubic-bezier(.2,.9,.3,1),
      max-height .5s cubic-bezier(0.4, 0, 0.2, 1),
      margin .5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Initial Fade-in (used by Intersection Observer) */
  .plan-card.opacity-0, .project-card.opacity-0 {
    opacity: 0;
    transform: translateY(20px);
  }
  .plan-card.appear, .project-card.appear {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
  }