/* ========================================================================= Casa Campana – Villa Listing Page Single global stylesheet for all ACF blocks (Hero, Intro, Complete Villa, Villa Type [reversible], Curated Stay, More Than a Villa, Editorial). Header/Footer styles are NOT included here — they live in the theme. ===========================================f============================== */
 :root {
     --ccvb-cream: #f6ecd9;
     --ccvb-cream-light: #FAEFDD;
     --ccvb-dark: #1F1E10;
     --ccvb-dark-2: #171410;
     --ccvb-gold: #FAEFDD;
     --ccvb-text: #2c2a24;
     --ccvb-text-muted: #342610;
     --ccvb-white: #ffffff;
     --ccvb-border: #C29A5C;
     --ccvb-font-serif: "Instrument Serif";
     --ccvb-font-sans: "Quicksand";
     --ccvb-container: 1200px;
     --ccvb-radius: 0px;
     --ccvb-gap: clamp(1.5rem, 80px, 80px);
}
 a:-webkit-any-link:focus-visible {
     outline-offset: 0px !important;
}
/* ---------- base / resets scoped to plugin blocks ---------- */
 .ccvb-hero, .ccvb-intro, .ccvb-complete, .ccvb-villa-type, .ccvb-curated, .ccvb-more-than, .ccvb-editorial {
     font-family: var(--ccvb-font-sans);
     color: var(--ccvb-text);
     box-sizing: border-box;
}
 .ccvb-hero *, .ccvb-intro *, .ccvb-complete *, .ccvb-villa-type *, .ccvb-curated *, .ccvb-more-than *, .ccvb-editorial * {
     box-sizing: border-box;
}
 .ccvb-hero img, .ccvb-intro img, .ccvb-complete img, .ccvb-villa-type img, .ccvb-curated img, .ccvb-more-than img, .ccvb-editorial img {
     max-width: 100%;
     display: block;
}
 .color_background{
     background:var(--ccvb-cream-light);
     position:relative;
}
 .light_color_background{
     background:#FDFCF9;
     position:relative;
}
 .white_background{
     background:#fff;
     position:relative;
}
 .leaf_pos_left{
     position: absolute;
     left: 0;
     top: 0;
}
 .leaf_pos_right{
     position: absolute;
     right: 0;
     top: 0;
}
 .ccvb-eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     text-transform: capitalize;
     color: var(--ccvb-gold);
     font-style: italic;
     margin: 0 0 24px 0px;
     line-height: 24px;
     font-family:var(--ccvb-font-serif);
}
 .ccvb-eyebrow--light {
     color: var(--ccvb-gold);
}
 .ccvb-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 8px 24px;
     font-size: 0.85rem;
     letter-spacing: 0.04em;
     text-decoration: none;
     border-radius: 0;
     border: 1px solid transparent;
     transition: background-color .25s ease, color .25s ease, border-color .25s ease;
     white-space: nowrap;
     flex: 1;
}
 .ccvb-btn--sm {
     padding: 0.6rem 1.25rem;
     font-size: 0.78rem;
}
 .ccvb-btn--dark {
     background: var(--ccvb-dark);
     color: var(--ccvb-cream-light);
     border-color: var(--ccvb-dark);
     padding:8px 24px;
}
 .ccvb-amenities + .ccvb-cta-row{
     width: 200px;
}
 .ccvb-btn--dark:hover {
     background: var(--ccvb-gold);
     border-color: #211a0f;
     color: var(--ccvb-dark);
}
 .ccvb-btn--outline {
     border: 1px solid #ffffff;
     padding: 8px 24px ;
}
 .ccvb-btn--outline-light{
     padding: 8px 24px !important;
}
 .ccvb-btn--outline:hover {
     background: var(--ccvb-dark);
     color: var(--ccvb-cream-light);
     border-color: var(--ccvb-dark);
}
 .ccvb-cta-row {
     display: flex;
     gap: 20px;
     flex-wrap: nowrap;
     margin-top: 24px;
}
/* Stats "table" used on Complete Villa + Villa Type */
 .stats.vill_list_stats {
     margin: 24px 0px;
     background: #FDF7EE;
}
 .stats.vill_list_stats::before {
     background: url(/wp-content/uploads/2026/07/Group-6-7.svg) no-repeat center;
     top: -4px;
     left: -4px;
}
 .stats.vill_list_stats::after {
     background: url(/wp-content/uploads/2026/07/Group-7-2.svg) no-repeat center;
     bottom: -4px;
     left: -4px;
}
 .stats.vill_list_stats .stat:last-child::before {
     background: url(/wp-content/uploads/2026/07/Group-6-8.svg) no-repeat center;
     top: -5px;
     right: -5px;
     transform:unset;
}
 .stats.vill_list_stats .stat:last-child::after {
     background: url(/wp-content/uploads/2026/07/Group-7-3.svg) no-repeat center;
     bottom: -6px;
     right: -4px;
     transform:unset;
}
 .stats.vill_list_stats .stat:first-child::before {
     top: -5px;
     right: -7px;
     transform: unset;
     background: url(/wp-content/uploads/2026/07/Group-9-3.svg) no-repeat center;
}
 .stats.vill_list_stats .stat:first-child::after {
     bottom: -5px;
     right: -6px;
     background: url(/wp-content/uploads/2026/07/Group-8-2.svg) no-repeat center;
     transform: unset;
}
 .stats.vill_list_stats .stat:nth-child(2)::before {
     top: -5px;
     right: -8px;
     transform: unset;
     background: url(/wp-content/uploads/2026/07/Group-9-3.svg) no-repeat center;
}
 .stats.vill_list_stats .stat:nth-child(2)::after {
     bottom: -5px;
     right: -6px;
     background: url(/wp-content/uploads/2026/07/Group-8-2.svg) no-repeat center;
     transform: unset;
}
 .ccvb-stats-table {
     display: grid;
     grid-template-columns: 1fr 1fr;
     background-color: #fff;
     gap: 1.25rem 2rem;
     margin: 1.5rem 0 0;
     padding: 1.25rem 0;
     border-top: 1px solid var(--ccvb-border, #B9B4AB);
     border-bottom: 1px solid var(--ccvb-border, #B9B4AB);
     position: relative;
}
 .ccvb-stats-table--compact {
     border: none;
     padding: 0.5rem 0 0;
}
 .ccvb-stats-table {
     display: grid;
     grid-template-columns: 1fr 1fr;
     background-color: #fff;
     gap: 1.25rem 2rem;
     margin: 1.5rem 0 0;
     padding: 1.25rem 0;
     border-top: 1px solid var(--ccvb-border, #B9B4AB);
     border-bottom: 1px solid var(--ccvb-border, #B9B4AB);
}
 .ccvb-stats-table--compact {
     border: none;
     padding: 0.5rem 0 0;
}
/* --- Stat cells --- */
 .ccvb-stats-table__col {
     position: relative;
     border: 1px solid #B9B4AB;
     padding: 12px 20px;
}
 .ccvb-stats-table__col dt {
     font-size: 16px;
     text-transform: capitalize;
     letter-spacing: 0;
     color: #342610;
     margin: 0 0 8px 0;
     font-family: 'Instrument Serif', serif;
     font-weight: 400;
}
 .ccvb-stats-table__col dd {
     margin: 0;
     font-size: 16px;
     line-height: 24px;
     color: #342610;
     font-family: 'Quicksand', sans-serif;
     font-weight: 600;
}
/* Base pseudo-element: sits 6px past every edge so corner marks are never clipped by the cell's own box */
 .ccvb-stats-table__col::before {
     content: "";
     position: absolute;
     top: -5px;
     right: -6px;
     bottom: -8px;
     left: -6px;
     pointer-events: none;
     background-repeat: no-repeat;
     background-size: 12px 12px 
}
/* Cell 1 (Villa): owns all 4 of its corners — the only cell that does */
 .ccvb-stats-table__col:nth-child(1)::before {
     background-image: url(/wp-content/uploads/2026/07/Group-9-2.svg), url(/wp-content/uploads/2026/07/Group-9-2.svg), url(/wp-content/uploads/2026/07/Group-9-2.svg), url(/wp-content/uploads/2026/07/Group-9-2.svg);
     background-position: top left, top right, bottom left, bottom right;
}
/* Cell 2 (Guests): only its right-side corners */
 .ccvb-stats-table__col:nth-child(2)::before {
     background-image: url(/wp-content/uploads/2026/07/Group-9-2.svg), url(/wp-content/uploads/2026/07/Group-9-2.svg);
     background-position: top right, bottom right;
}
/* Cell 3 (Bedrooms): only its bottom corners */
 .ccvb-stats-table__col:nth-child(3)::before {
     background-image: url(/wp-content/uploads/2026/07/Group-9-2.svg), url(/wp-content/uploads/2026/07/Group-9-2.svg);
     background-position: bottom left, bottom right;
}
/* Cell 4 (From/Night): only its bottom-right corner */
 .ccvb-stats-table__col:nth-child(4)::before {
     background-image: url(/wp-content/uploads/2026/07/Group-9-2.svg);
     background-position: bottom right;
}
/* --- CTA row (See Villa / Book Now) --- */
 .ccvb-cta-row {
     grid-column: 1 / -1;
     display: flex;
     gap: 20px;
     margin-top: 24px;
}
 .ccvb-btn {
     flex: 1;
     text-align: center;
     padding: 12px 8px;
     font-family: 'Instrument Serif';
     font-weight: 400;
     font-size: 16px;
     text-decoration: none;
     line-height: 24px;
     letter-spacing:0;
     transition: opacity 0.2s ease, background-color 0.2s ease;
}
 .ccvb-btn--dark {
     background-color: #211a0f;
     color: #fff;
     border: 1px solid #211a0f;
     max-width:384px;
     width:384px;
}
 .ccvb-btn--dark:hover {
     opacity: 0.9;
}
 .ccvb-btn--outline {
     background-color: #f7f5f0;
     color: #211a0f;
     padding:8px 24px;
     border: 1px solid #B9B4AB;
}
/* .ccvb-btn--outline:hover {
     background-color: #efece4;
}
 */
/* ========================================================================= 1. HERO ========================================================================= */
 .ccvb-hero {
     position: relative;
     min-height: 92vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     isolation: isolate;
}
 .hero {
     position: relative;
     min-height: auto;
     height: auto;
     max-height: max-content;
}
 .ccvb-hero__overlay {
     position: absolute;
     inset: 0;
    /* background: linear-gradient(180deg, rgba(20,17,10,.25) 0%, rgba(20,17,10,.15) 45%, rgba(20,17,10,.55) 100%);
     */
     z-index: 1;
}
 .ccvb-hero__content {
     position: relative;
     z-index: 2;
     text-align: center;
     color: var(--ccvb-white);
     padding: 0 1.5rem;
}
 .ccvb-hero__content > img{
     margin:0 auto;
}
 .ccvb-hero__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2.2rem, 80px, 80px);
     margin: 12px 0 12px;
     letter-spacing: -3%;
     line-height: 104px;
     color:#FAEFDD;
}
 .ccvb-hero__subtitle {
     font-size: 20px;
     letter-spacing: 0;
     text-transform: capitalize;
     margin: 0;
     color: #FAEFDD;
     line-height: 30px;
}
 .page-id-391 .ccvb-hero__content>img,
  .page-id-391 .ccvb-hero__subtitle,
 .page-id-507 .ccvb-hero__content>img,
  .page-id-507 .ccvb-hero__subtitle{
     display:none;
}
/* ========================================================================= 2. INTRO STATEMENT ========================================================================= */
 .ccvb-intro {
     background: var(--ccvb-cream);
     padding: 100px 0px;
     position:relative;
}
 .leaf-left{
     position:absolute;
     top:-5px;
     left:-5px;
}
 .ccvb-intro__inner {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: var(--ccvb-gap);
     align-items: start;
}
 .ccvb-intro__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     margin: 0;
     letter-spacing: -3%;
}
 .ccvb-intro__text {
     margin: 0;
     color: #342610;
     max-width: 46ch;
     font-size: 20px;
     line-height: 30px;
}
 @media (max-width: 768px) {
     .ccvb-intro__inner {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================= 3. COMPLETE VILLA FEATURE ========================================================================= */
 .ccvb-complete {
     position: relative;
     padding: 300px 100px;
     background: var(--ccvb-cream);
}
 .ccvb-complete .ccvb-parallax-wrap {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     height: clamp(320px, 48vw, 620px);
     border-radius: 0px;
     overflow: hidden;
     position: relative;
}
 .ccvb-complete__card {
     position: absolute;
     width: 850px;
     margin: 0 auto;
     background: var(--ccvb-white);
     padding: 40px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0 80px;
     align-items: center;
     box-shadow: 0 20px 45px rgba(20, 17, 10, .12);
     border-radius: 0;
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 10px);
}
 .ccvb-complete__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.4rem, 52px, 52px);
     margin: 0 0 24px 0;
}
 .ccvb-stats-table .ccvb-stats-table__col:first-child{
     border-right: 0;
     border-bottom: 0;
}
 .ccvb-stats-table .ccvb-stats-table__col:nth-child(4){
     border-left: 0;
     border-top: 0;
}
 .ccvb-complete__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 1.6;
     font-size: 0.92rem;
}
 .ccvb-complete__card .ccvb-stats-table {
     border: none;
     padding: 0;
     margin: 0;
     gap:0rem;
}
/* .ccvb-complete__card .ccvb-cta-row {
     grid-column: 1 / -1;
}
 */
 @media (max-width: 900px) {
     .ccvb-complete__card {
         grid-template-columns: 1fr;
         margin-top: -3rem;
         width:80%;
    }
}
/* ========================================================================= 4. VILLA TYPE (reversible: Canopy Villas / Ridge House / Tide Pavilion) One block + one CSS block pair drives every instance — the ONLY thing that changes is the --reverse modifier flipping grid + order. ========================================================================= */
 .ccvb-villa-type {
     max-width: 100%;
     margin: 0 auto;
     padding:100px 0px 0px 0px;
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     gap: var(--ccvb-gap);
     align-items: center;
     background: var(--ccvb-cream-light);
}
 .ccvb-villa-type.ccvb-villa-type--reverse{
     grid-template-columns: 1.2fr .8fr;
}
 .ccvb-villa-type__media {
     order: 2;
     padding-left: 0;
     padding-right: 120px;
}
 .ccvb-villa-type__content {
     order: 1;
     padding-left: 120px;
}
/* Reverse modifier: swap the two columns' visual order (zig-zag layout) */
 .ccvb-villa-type--reverse .ccvb-villa-type__media {
     order: 1;
     padding-left: 120px;
}
 .ccvb-villa-type--reverse .ccvb-villa-type__content {
     order: 2;
     padding-left: 0;
     padding-right: 120px;
}
 .ccvb-villa-type__media {
     height: clamp(480px, 600px, 600px);
     border-radius: 0px;
     overflow: hidden;
     position: relative;
}
 .ccvb-villa-type__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.6rem, 52px, 52px);
     margin: 0 0 24px;
     line-height: 66px;
}
 .ccvb-villa-type__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 1.7;
}
 .ccvb-amenities {
     margin-top: 1.5rem;
}
 .ccvb-amenities__label {
     font-size: 14px;
     text-transform: capitalize;
     letter-spacing: 0;
     color: var(--ccvb-text-muted);
     margin: 0 0 12px;
     line-height: 20px;
}
 .ccvb-amenities__list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
}
 .ccvb-amenities__list li {
     position: relative;
     padding-left: 28px;
     font-size: 16px;
     line-height: 24px;
     color: #342610;
     font-weight: 600;
}
 .ccvb-amenities__list li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 4px;
     background: url(/wp-content/uploads/2026/07/Vector-17.svg);
     width: 16px;
     height: 16px;
}
 @media (max-width: 820px) {
     .ccvb-villa-type, .ccvb-villa-type--reverse {
         grid-template-columns: 1fr !important;
    }
     .ccvb-villa-type__media, .ccvb-villa-type--reverse .ccvb-villa-type__media {
         order: 1 !important;
    }
     .ccvb-villa-type__content, .ccvb-villa-type--reverse .ccvb-villa-type__content {
         order: 2 !important;
    }
}
/* ========================================================================= 5. CURATED AROUND YOUR STAY (auto-advancing image + progress bars) Explicitly NOT parallax — handled entirely by JS timers, see main.js ========================================================================= */
 .ccvb-curated {
     background: #fff;
     padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}
 .ccvb-curated__intro {
     max-width: var(--ccvb-container);
     margin: 0 auto clamp(2rem, 5vw, 3.5rem);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--ccvb-gap);
     align-items: end;
}
 .ccvb-curated__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.8rem, 3vw, 2.5rem);
     margin: 0;
     line-height: 1.2;
}
 .ccvb-curated__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 30px;
     font-size: 20px;
}
 .ccvb-curated__stage {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--ccvb-gap);
     align-items: stretch;
}
 .ccvb-curated__media {
     position: relative;
     min-height: 420px;
     border-radius: 0px;
     overflow: hidden;
     background: var(--ccvb-dark-2);
}
 .ccvb-curated__img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transform: scale(1.04);
     transition: opacity 900ms ease, transform 6s ease;
}
 .ccvb-curated__img.is-active {
     opacity: 1;
     transform: scale(1);
     z-index: 1;
}
 .ccvb-curated__list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
}
 .ccvb-curated__item {
     border: 0 !important;
     padding: 0px 0px 0 0;
}
 .ccvb-curated__item:first-child {
     border-top: 0px;
}
 .ccvb-curated__trigger {
     all: unset;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: .9rem;
     width: 100%;
     padding: 24px 0px;
}
 .ccvb-curated__index {
     font-family: var(--ccvb-font-serif);
     font-size: 0.85rem;
     color: var(--ccvb-text-muted);
}
 .ccvb-curated__label {
     font-family: var(--ccvb-font-serif);
     font-size: clamp(1.05rem, 32px, 32px);
     line-height:42px;
     color: var(--ccvb-text-muted);
     transition: color .25s ease;
}
 .ccvb-curated__item.is-active .ccvb-curated__label, .ccvb-curated__item.is-active .ccvb-curated__index {
     color: var(--ccvb-text);
}
/* the progress-bar underline that fills like a story/reel timer */
 .ccvb-curated__track {
     display: block;
     margin-top: 0;
     height: 2px;
     width: 100%;
     background: #B9B4AB;
     opacity:30%;
     border-radius: 0;
     overflow: hidden;
}
 .ccvb-curated__fill {
     display: block;
     height: 100%;
     width: 0%;
     background: #000;
     border-radius: 0px;
    /* width is animated via JS (rAF) so it can be paused on hover/focus */
}
 @media (max-width: 900px) {
     .ccvb-curated__intro, .ccvb-curated__stage {
         grid-template-columns: 1fr;
    }
     .ccvb-curated__media {
         order: -1;
         min-height: 600px;
    }
}
/* ========================================================================= 6. MORE THAN A VILLA (dark section) ========================================================================= */
 .ccvb-more-than {
     background: var(--ccvb-dark);
     color: var(--ccvb-cream-light);
     padding: 100px 0px;
     position:relative;
}
 .ccvb-more-than__intro {
     max-width: var(--ccvb-container);
     margin: 0 auto;
}
 .ccvb-more-than__row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--ccvb-gap);
     align-items: start;
}
 .ccvb-more-than__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.9rem, 68px, 68px);
     margin: 0;
     line-height:88px;
     color: var(--ccvb-cream-light);
}
 .ccvb-more-than__copy {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}
 .ccvb-more-than__copy p,.ccvb-more-than__row p {
     margin: 0;
     color: #FAEFDD;
     line-height: 30px;
     font-size: 20px;
}
 .ccvb-more-than__gallery {
     max-width: var(--ccvb-container);
     margin: clamp(2rem, 5vw, 3.5rem) auto 0;
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 60px;
}
 .ccvb-more-than__media {
     border-radius: 0px;
     overflow: hidden;
     position: relative;
}
/* .ccvb-more-than__media--small {
     height: clamp(552px, 26vw, 280px);
}
 */
 .ccvb-more-than__media--wide {
     height: clamp(332px, 26vw, 360px);
}
 @media (max-width: 820px) {
     .ccvb-more-than__row, .ccvb-more-than__gallery {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================= 7. THE EDITORIAL ========================================================================= */
 .ccvb-editorial {
     background: var(--ccvb-cream);
     padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}
 .ccvb-editorial__header {
     max-width: var(--ccvb-container);
     margin: 0 auto clamp(2rem, 5vw, 3rem);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
}
 .ccvb-editorial__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.8rem, 3vw, 2.4rem);
     margin: 0;
}
 .ccvb-editorial__grid {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.75rem;
}
 .ccvb-editorial__card {
     display: flex;
     flex-direction: column;
}
 .ccvb-editorial__media {
     aspect-ratio: 4 / 3;
     overflow: hidden;
     border-radius: 0px;
     margin-bottom: 1rem;
}
 .ccvb-editorial__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
}
 .ccvb-editorial__card:hover .ccvb-editorial__media img {
     transform: scale(1.05);
}
 .ccvb-editorial__card-title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 1.15rem;
     margin: 0 0 0.5rem;
}
 .ccvb-editorial__card-excerpt {
     margin: 0 0 1rem;
     color: var(--ccvb-text-muted);
     font-size: 0.9rem;
     line-height: 1.6;
}
 .ccvb-editorial__card .ccvb-btn {
     align-self: flex-start;
}
 @media (max-width: 900px) {
     .ccvb-editorial__grid {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================= PARALLAX (shared utility — used by every image EXCEPT Curated Stay) ========================================================================= */
 .ccvb-parallax-wrap {
     overflow: hidden;
     position: relative;
}
 .ccvb-parallax-media {
     position: absolute;
     inset: -12% 0;
     width: 100%;
     height: 124%;
     will-change: transform;
}
 .ccvb-parallax-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: translate3d(0, 0, 0);
     will-change: transform;
}
/* Respect users who prefer reduced motion: disable JS-driven parallax + autoplay transforms */
 @media (prefers-reduced-motion: reduce) {
     .ccvb-parallax-media {
         position: static;
         inset: auto;
         height: 100%;
    }
     .ccvb-curated__img {
         transition: opacity 400ms ease;
         transform: none !important;
    }
}
/* New Hero */
 .new-hero {
     position: relative;
     min-height: 100vh;
     overflow: hidden;
     isolation: isolate;
}
 .new-hero__content {
     position: relative;
     z-index: 2;
     min-height: 100vh;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 152px;
     flex-wrap: nowrap;
     padding: 80px 0px;
     max-width:1220px;
     margin:0 auto;
}
 .new-hero__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2.2rem, 5.5vw, 4.2rem);
     line-height: 1.05;
     margin: 0 0 1rem;
     color: var(--ccvb-cream-light);
}
 .new-hero__desc {
     margin: 0;
     color: rgba(246,236,217,.92);
     font-size: clamp(1rem, 1.3vw, 1.15rem);
     line-height: 1.6;
}
 .new-hero__cta {
     flex-shrink: 0;
     align-self: flex-end;
     min-width:200px;
}
/* Light/cream solid button variant used on dark hero imagery (shared utility) */
 .ccvb-btn--light {
     background: var(--ccvb-cream-light);
     color: var(--ccvb-dark);
     border-color: var(--ccvb-cream-light);
}
 .ccvb-btn--light:hover {
     background: var(--ccvb-gold);
     border-color: var(--ccvb-gold);
     color: var(--ccvb-dark);
}
/* ========================================================================= STATS BAR (24 Guests / 12 Bedrooms / Private Infinity Pool / ...) Full-width dark band, evenly divided columns with vertical divider lines. Sits directly under the hero. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-dark, --ccvb-cream-light, --ccvb-font-serif ========================================================================= */
 .stats-bar {
     background: var(--ccvb-dark);
}
 .stats-bar__list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     max-width: var(--ccvb-container, 1240px);
     margin-inline: auto;
}
 .stats-bar__item {
     padding: 24px 20px;
     border-left: 1px solid #342610;
}
 .stats-bar__item:first-child {
     border-left: none;
     padding-left: 0;
}
 .stats-bar__value {
     display: block;
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.4rem, 2vw, 1.9rem);
     color: var(--ccvb-cream-light);
     line-height: 1.2;
     margin-bottom: 0.3rem;
}
 .stats-bar__label {
     display: block;
     font-size: 0.9rem;
     color: rgba(246, 236, 217, 0.65);
}
 @media (max-width: 900px) {
     .stats-bar__list {
         grid-template-columns: repeat(3, 1fr);
         row-gap: 1.5rem;
    }
     .stats-bar__item:nth-child(3n+1) {
         border-left: none;
         padding-left: 0;
    }
}
 @media (max-width: 560px) {
     .stats-bar__list {
         grid-template-columns: repeat(2, 1fr);
    }
     .stats-bar__item:nth-child(odd) {
         border-left: none;
         padding-left: 0;
    }
}
/* ========================================================================= RESERVED ENTIRELY FOR YOU Centered statement on cream background, followed by a full-bleed parallax image with a bottom caption overlay. Append this to your main assets/css/style.css. Relies on shared vars/utilities already defined there: --ccvb-cream, --ccvb-gold, --ccvb-text-muted, --ccvb-font-serif, .ccvb-parallax-wrap, .ccvb-parallax-media, .ccvb-parallax-img ========================================================================= */
 .reserved-for-you{
     background: var(--ccvb-cream);
     position:relative;
}
 .reserved-for-you__text {
     max-width: 780px;
     margin: 0 auto;
     text-align: center;
     padding:100px 0 100px 0;
}
 .reserved-for-you__eyebrow {
     font-size: 16px;
     line-height: 24px;
     font-style: italic;
     margin: 0 0 24px;
     color: #11552F;
     font-family: var(--ccvb-font-serif);
}
 .reserved-for-you__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     letter-spacing: -3%;
     max-width: 533px;
     margin: 0 auto;
}
 .reserved-for-you__para {
     color: var(--ccvb-text-muted);
     font-size: 20px;
     line-height: 30px;
     margin: 20px auto 0 auto;
     max-width: 45ch;
}
 .reserved-for-you__para:last-child {
     margin-bottom: 0;
}
 .reserved-for-you__media {
     position: relative;
     height: clamp(360px, 55vw, 720px);
     overflow: hidden;
}
 .reserved-for-you__caption-overlay {
     position: absolute;
     inset: 0;
    /* background: linear-gradient(180deg, rgba(20,17,10,0) 60%, rgba(20,17,10,.5) 100%);
     */
     z-index: 1;
}
 .reserved-for-you__caption {
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
     bottom: clamp(1.5rem, 4vw, 2.5rem);
     z-index: 2;
     margin: 0;
     font-family: var(--ccvb-font-serif);
     font-size: clamp(1.2rem, 2vw, 1.6rem);
     color: var(--ccvb-cream-light);
}
/* ========================================================================= 3IN1 MARQUEE Pure CSS infinite scroll: track holds the item list TWICE back-to-back, animated from translateX(0) to translateX(-50%) so the loop is seamless. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream, --ccvb-dark, --ccvb-gold, --ccvb-font-serif ========================================================================= */
 .marquee-3ini {
     overflow: hidden;
     padding: clamp(1.5rem, 4vw, 3rem) 0;
}
 .marquee-3ini--light {
     background: var(--ccvb-cream);
}
 .marquee-3ini--dark {
     background: var(--ccvb-dark);
}
 .marquee-3ini__viewport {
     width: 100%;
     overflow: hidden;
}
 .marquee-3ini__track {
     display: flex;
     width: max-content;
     animation: marquee-3ini-scroll var(--marquee-3ini-duration, 24s) linear infinite;
}
 .marquee-3ini:hover .marquee-3ini__track, .marquee-3ini:focus-within .marquee-3ini__track {
     animation-play-state: paused;
}
 .marquee-3ini__group {
     display: flex;
     align-items: center;
     white-space: nowrap;
}
 .marquee-3ini__item {
     font-family: var(--ccvb-font-serif);
     font-size: 160px;
     color: #C29A5C;
     letter-spacing: 0.02em;
     line-height:140px 
}
 .marquee-3ini--dark .marquee-3ini__item {
     color: var(--ccvb-gold);
}
 .marquee-3ini__item.is-italic {
     font-style: italic;
}
 .marquee-3ini__dot {
     font-size: 1.4rem;
     margin: 0 clamp(1rem, 2.5vw, 2.5rem);
     line-height: 1;
}
 @keyframes marquee-3ini-scroll {
     from {
         transform: translateX(0);
    }
     to {
         transform: translateX(-50%);
    }
}
 @media (prefers-reduced-motion: reduce) {
     .marquee-3ini__track {
         animation: none;
    }
}
/* ========================================================================= CONTENT TEXT BLOCK ("Three Villas. One Private Estate.") Dark two-column masonry: intro text + 1 villa card stacked in the left column, 2 more villa cards stacked in the right column (staggered heights, matching the design). Append this to your main assets/css/style.css. Relies on shared vars/utilities already defined there: --ccvb-dark, --ccvb-cream-light, --ccvb-gold, --ccvb-font-serif, --ccvb-container, --ccvb-gap, .ccvb-btn, .ccvb-parallax-wrap, .ccvb-parallax-media, .ccvb-parallax-img ========================================================================= */
 .content-text-block {
     background: var(--ccvb-dark);
     position:relative;
     padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
}
 .content-text-block__grid {
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(2rem, 5vw, 4rem);
     align-items: start;
}
 .content-text-block__col {
     display: flex;
     flex-direction: column;
     gap: clamp(2.5rem, 6vw, 4rem);
}
 .content-text-block__eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     font-style: italic;
     color: var(--ccvb-cream-light);
     margin: 0 0 40px;
     font-family: var(--ccvb-font-serif);
}
 .content-text-block__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     margin: 0;
     letter-spacing: -3%;
     color:#FAEFDD;
}
 .content-text-block__intro-text {
     margin: 40px 0 0 0;
     color: #FAEFDD;
     max-width: 48ch;
     font-size: 20px;
     line-height: 30px;
}
 li.accordion-image__item.is-active .accordion-image__trigger{
     padding-bottom:16px !important;
}
 .content-text-block__media {
     aspect-ratio: 4 / 3;
     border-radius: 0px;
     overflow: hidden;
     position: relative;
     margin-bottom: 40px;
}
 .content-text-block__card-title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.5rem, 2.2vw, 2rem);
     color: var(--ccvb-cream-light);
     margin: 0 0 0.75rem;
}
 .content-text-block__card-desc {
     margin: 0 0 32px;
     color: #FAEFDD;
     line-height: 20px;
     font-size: 14px;
}
 .content-text-block__cta {
     color: #fff;
     border-color: #fff;
     background: transparent;
}
 .content-text-block__cta:hover {
     background: var(--ccvb-gold);
     border-color: var(--ccvb-gold);
     color: var(--ccvb-dark);
}
 .content-text-block__leaf {
     width: clamp(160px, 22vw, 260px);
     height: auto;
     opacity: 1;
     margin-top: 1rem;
}
 @media (max-width: 860px) {
     .content-text-block__grid {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================= VILLA HIGHLIGHTS ("Everything you need, all in one place") 3x3 grid of highlight cards;
 each card's icon crossfades into a photo on hover/focus (only cards with a "photo" field assigned do this — icon-only cards just show the icon). Followed by a bordered "Included with your stay" 4-column list and a Check Availability button. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream, --ccvb-cream-light, --ccvb-dark, --ccvb-gold, --ccvb-text-muted, --ccvb-border, --ccvb-font-serif, --ccvb-container, .ccvb-btn ========================================================================= */
 .villa-highlights {
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
}
 .villa-highlights__intro {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: var(--ccvb-gap, 2rem);
     align-items: center;
     margin-bottom: clamp(2rem, 5vw, 3rem);
}
 .villa-highlights__eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     text-transform: capitalize;
     font-style: italic;
     color: #11552F;
     margin: 0 0 20px;
     line-height: 24px;
     font-family: 'Instrument Serif';
}
 .villa-highlights__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     margin: 0;
     letter-spacing: -3%;
}
 .villa-highlights__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 30px;
     font-size: 20px;
}
/* --- 3x3 highlight card grid --- */
 .villa-highlights__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
     margin-bottom: clamp(2rem, 5vw, 3rem);
}
 .highlight-card {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--ccvb-border);
     border-radius: 2px;
     min-height: 92px;
     position:relative;
     background: rgba(255, 255, 255, .3);
}
 .highlight-card:before, .highlight-card:after{
     content: "";
     height: 12px;
     display: inline-block;
     width: 12px;
     background-repeat: no-repeat;
     position: absolute;
     z-index: 99;
}
 .highlight-card:before {
     background: url(/wp-content/uploads/2026/07/Group-6-6.svg);
     left: -4px;
     top: -4px;
}
 .highlight-card:after {
     background: url(/wp-content/uploads/2026/07/Group-9-2.svg);
     right: -6px;
     top: -4px;
}
 .highlight-card__visual {
     position: relative;
     flex-shrink: 0;
     width:90px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
}
 .highlight-card__icon {
     width: 52px;
     height: 52px;
     object-fit: contain;
     transition: opacity 0.35s ease;
     position: relative;
     z-index: 1;
}
 .highlight-card__photo {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transition: opacity 0.35s ease;
     z-index: 2;
}
/* Only cards with a photo assigned crossfade on hover/focus */
 .highlight-card.has-hover-photo:hover .highlight-card__photo, .highlight-card.has-hover-photo:focus-within .highlight-card__photo {
     opacity: 1;
}
 .highlight-card.has-hover-photo:hover .highlight-card__icon, .highlight-card.has-hover-photo:focus-within .highlight-card__icon {
     opacity: 0;
}
 .highlight-card__label {
     flex: 1;
     display: flex;
     align-items: center;
     padding: 0;
     font-size: 20px;
     line-height: 30px;
     transition:.3s;
     color: var(--ccvb-text-muted);
     padding-left: 20px;
}
 .highlight-card.has-hover-photo:hover .highlight-card__label {
     padding-left: 13px !important;
     background:#fff;
}
 .page-id-286 .highlight-card{
     background: #fff;
     border-color:#fff;
}
 .page-id-286 .villa-highlights__heading, .page-id-286 .villa-highlights__eyebrow, .page-id-286 .villa-highlights__desc, .page-id-286 .villa-highlights__included-heading, .page-id-286 .villa-highlights__included-icon, .page-id-286 .villa-highlights__included-list li{
     color:#FAEFDD 
}
 @media (prefers-reduced-motion: reduce) {
     .highlight-card__icon, .highlight-card__photo {
         transition: none;
    }
}
/* --- Included with your stay --- */
 .villa-highlights__included-heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 1.4rem;
     margin: 0 0 1rem;
}
 .villa-highlights__included-list {
     list-style: none;
     margin: 0;
     padding: 20px;
     border: 1px solid var(--ccvb-border);
     border-radius: 2px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     position:relative;
}
 .page-id-286 .villa-highlights__included-list{
     border: 1px solid #39371D;
}
 .page-id-286 .villa-highlights__included-list:before {
     background: url(/wp-content/uploads/2026/08/Group-6-9.svg);
}
 .page-id-286 .villa-highlights__included-list:after {
     background: url(/wp-content/uploads/2026/08/Group-8.svg);
}
 .villa-highlights__included-list:before, .villa-highlights__included-list:after{
     content: "";
     height: 12px;
     display: inline-block;
     width: 12px;
     background-repeat: no-repeat;
     position: absolute;
     z-index: 99;
}
 .villa-highlights__included-list:before {
     background: url(/wp-content/uploads/2026/07/Group-6-6.svg);
     left: -4px;
     top: -4px;
}
 .villa-highlights__included-list:after {
     background: url(/wp-content/uploads/2026/07/Group-9-2.svg);
     right: -6px;
     top: -4px;
}
 .villa-highlights__included-list li {
     display: flex;
     align-items: center;
     gap: 16px;
     font-size: 14px;
     line-height: 20px;
}
 .villa-highlights__included-icon {
     color: var(--ccvb-gold);
     font-size: 0.85rem;
     flex-shrink: 0;
}
 .villa-highlights__cta-row {
     display: flex;
     justify-content: center;
     margin-top: clamp(2rem, 5vw, 3rem);
}
 @media (max-width: 900px) {
     .villa-highlights__intro {
         grid-template-columns: 1fr;
    }
     .villa-highlights__grid {
         grid-template-columns: 1fr;
    }
     .villa-highlights__included-list {
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 480px) {
     .villa-highlights__included-list {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================= IMAGE CONTENT BOX (combined: optional intro + reversible image/text row) ONE block drives the whole "Spaces That Invite Connection" section. Turn on the intro for just the first instance;
 every instance renders its own reversible row via a single --reverse modifier class. Append this to your main assets/css/style.css. Relies on shared vars/utilities already defined there: --ccvb-cream-light, --ccvb-text-muted, --ccvb-font-serif, --ccvb-container, --ccvb-gap, .ccvb-parallax-wrap, .ccvb-parallax-media, .ccvb-parallax-img ========================================================================= */
 .image-content-box {
     background: var(--ccvb-cream-light);
     position:relative;
}
 .image-content-box + .image-content-box img.leaf_pos_right{
     display:none;
}
/* ---- optional intro (eyebrow + heading left, description right) ---- */
 .image-content-box__intro {
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(1rem, 3vw, 1.5rem);
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: var(--ccvb-gap, 2rem);
     align-items: center;
}
 .image-content-box__eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     text-transform: capitalize;
     font-style: italic;
     color: #11552f;
     line-height: 24px;
     font-weight: 400;
     font-family: var(--ccvb-font-serif);
     margin: 0 0 20px;
}
 .image-content-box__intro-heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     margin: 0;
     letter-spacing: -3%;
}
 .image-content-box__intro-desc {
     margin: 0;
     padding-top: 0;
     color: var(--ccvb-text-muted);
     font-size: 20px;
     line-height: 30px;
}
/* ---- reversible image + content row ---- */
 .image-content-box__row {
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
     display: grid;
     grid-template-columns: 1.4fr .6fr;
     gap: var(--ccvb-gap, 2rem);
     align-items: start;
}
 .image-content-box__media {
     order: 1;
}
 .image-content-box__content {
     order: 2;
     padding-top:0 
}
/* Reverse modifier: swap column order AND put the image on the right */
 .image-content-box__row--reverse {
     grid-template-columns: .6fr 1.4fr;
}
 .image-content-box__row--reverse .image-content-box__media {
     order: 2;
}
 .image-content-box__row--reverse .image-content-box__content {
     order: 1;
}
 .image-content-box__media {
     height: clamp(280px, 34vw, 460px);
     overflow: hidden;
     position: relative;
}
 .image-content-box__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     margin: 0 0 24px 0px;
     font-size: 32px;
     line-height: 42px;
}
 .image-content-box__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     font-size: 14px;
     max-width: 40ch;
     line-height: 20px;
}
 @media (max-width: 780px) {
     .image-content-box__intro {
         grid-template-columns: 1fr;
    }
     .image-content-box__intro-desc {
         padding-top: 0.5rem;
    }
}
 @media (max-width: 820px) {
     .image-content-box__row, .image-content-box__row--reverse {
         grid-template-columns: 1fr;
         padding-top:0;
    }
     .image-content-box__row .image-content-box__media, .image-content-box__row--reverse .image-content-box__media {
         order: 1;
    }
     .image-content-box__row .image-content-box__content, .image-content-box__row--reverse .image-content-box__content {
         order: 2;
         padding-top: 0rem;
    }
}
/* ========================================================================= ACCORDION IMAGE ("Designed Around the Way You Gather") Intro row, then a left accordion list (click to expand;
 first item open by default) + a right image stack that crossfades + subtly scales to match whichever item is active. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream-light, --ccvb-text-muted, --ccvb-gold, --ccvb-border, --ccvb-font-serif, --ccvb-container, --ccvb-gap, .ccvb-btn ========================================================================= */
 .accordion-image {
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
}
 .accordion-image__intro {
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: var(--ccvb-gap, 2rem);
     align-items: center;
     margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
 .accordion-image__eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     text-transform: capitalize;
     font-style: italic;
     color:#11552F;
     line-height:24px;
     font-weight:400;
     font-family: var(--ccvb-font-serif);
     margin: 0 0 20px;
}
 .accordion-image__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     margin: 0;
     letter-spacing: -3%;
}
 .accordion-image__desc {
     margin: 0;
     padding-top: 0;
     color: var(--ccvb-text-muted);
     font-size: 20px;
     line-height: 30px;
}
 .accordion-image__cta-row{
     text-align:center;
     margin-top:80px;
}
 .page-id-286 .accordion-image__cta-row{
     margin-top:0px !important;
}
/* --- stage: accordion list + image --- */
 .accordion-image__stage {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 50px;
     align-items: center;
}
 .accordion-image__list {
     list-style: none;
     margin: 0;
     padding: 0;
     border: 1px solid var(--ccvb-border);
}
 .accordion-image__item {
     border-bottom: 1px solid var(--ccvb-border);
     transition: background-color 0.3s ease;
     position:relative;
}
 .accordion-image__item:after, .accordion-image__item:before{
     content: "";
     height: 12px;
     display: inline-block;
     width: 12px;
     background-repeat: no-repeat;
     position: absolute;
     z-index: 99 
}
 .accordion-image__item:before {
     background: url(/wp-content/uploads/2026/07/Group-6-6.svg);
     left: -4px;
     top: -4px 
}
 .accordion-image__item:after {
     background: url(/wp-content/uploads/2026/07/Group-9-2.svg);
     right: -6px;
     top: -4px 
}
 .accordion-image__item:last-child {
     border-bottom: none;
}
 .accordion-image__item.is-active {
     background: #fff;
     padding-bottom:32px;
}
 .accordion-image__trigger {
     all: unset;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 1rem;
     width: 100%;
     box-sizing: border-box;
     padding: 32px 24px 32px 24px;
}
 .accordion-image__index {
     font-size: 20px;
     color: var(--ccvb-text-muted);
     flex-shrink: 0;
     line-height: 30px;
}
 .accordion-image__title {
     font-family: var(--ccvb-font-serif);
     font-size: 32px;
     line-height:42px;
}
/* Expandable body — animated via max-height (set inline by JS) for a smooth accordion-style open/close instead of an abrupt display toggle. */
 .accordion-image__body {
     max-height: 0;
     overflow: hidden;
     padding: 0 1.5rem;
     transition: max-height 0.4s ease, padding 0.4s ease;
}
/* .accordion-image__item.is-active .accordion-image__body {
     padding: 0 1.5rem 1.5rem;
}
 */
 .accordion-image__small-heading {
     display: block;
     font-size: 16px;
     margin: 0 0 16px;
     line-height: 24px;
     font-weight: 600;
     font-family: var(--ccvb-font-sans);
}
 .accordion-image__icon {
     width: 37px;
     height: 20px;
     object-fit: contain;
}
 .accordion-image__item-desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     font-size: 16px;
     line-height: 24px;
}
/* --- image stack: crossfade + gentle scale on activate --- */
 .accordion-image__item.is-active button span.accordion-image__index{
     font-size: 0;
     display: flex;
     align-items: center;
}
 .accordion-image__item.is-active button span.accordion-image__index:before{
     content: "";
     background: url(/wp-content/uploads/2026/07/greenleaf.svg);
     width: 37px;
     height: 22px;
     object-fit: contain;
     display: inline-block;
     background-repeat: no-repeat;
}
 .accordion-image__media {
     position: relative;
     height: 735px;
     border-radius: 0px;
     overflow: hidden;
}
 .accordion-image__img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transform: scale(1.06);
     transition: opacity 0.6s ease, transform 0.8s ease;
     z-index: 1;
}
 .accordion-image__img.is-active {
     opacity: 1;
     transform: scale(1);
     z-index: 2;
}
 .page-id-286 .accordion-image .ccvb-btn.ccvb-btn--dark{
     display:none;
}
 @media (prefers-reduced-motion: reduce) {
     .accordion-image__img {
         transition: opacity 0.3s ease;
         transform: none !important;
    }
     .accordion-image__body {
         transition: none;
    }
}
 @media (max-width: 900px) {
     .accordion-image__intro {
         grid-template-columns: 1fr;
    }
     .accordion-image__stage {
         grid-template-columns: 1fr;
    }
     .accordion-image__media {
         order: -1;
         height: 550px;
    }
}
/* ========================================================================= BOOK VILLA CTA ("Create unforgettable memories in a private setting") Full-width dark band, optional parallax background image, centered eyebrow/heading/subtext + a single outlined light button. Append this to your main assets/css/style.css. Relies on shared vars/utilities already defined there: --ccvb-dark, --ccvb-cream-light, --ccvb-font-serif, .ccvb-btn, .ccvb-parallax-wrap, .ccvb-parallax-media, .ccvb-parallax-img ========================================================================= */
 .book-villa-cta {
     position: relative;
     min-height: 55vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: var(--ccvb-dark);
}
 .book-villa-cta__overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
}
/* If no background image is set, the overlay isn't needed — harmless either way, but you can hide it in that case by adding a modifier class if desired. */
 .book-villa-cta__content {
     position: relative;
     z-index: 2;
     max-width: 780px;
     margin: 0 auto;
     text-align: center;
     padding: clamp(3rem, 8vw, 5rem) 1.5rem;
}
 .book-villa-cta__eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     text-transform: capitalize;
     font-style: italic;
     color:#FAEFDD;
     line-height:24px;
     font-weight:400;
     font-family: var(--ccvb-font-serif);
     margin:0px;
}
 .book-villa-cta__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 68px;
     line-height: 88px;
     color: var(--ccvb-cream-light);
     letter-spacing: -3%;
     margin: 10px auto;
}
 .book-villa-cta__subtext {
     margin: 0 0 40px 0;
     color: #FAEFDD;
     font-size: 20px;
     line-height: 30px;
}
/* Outlined light-on-dark button variant used on this CTA */
 .ccvb-btn--outline-light {
     background: transparent;
     color: var(--ccvb-cream-light);
     border: 1px solid rgba(246, 236, 217, 0.6);
}
 .ccvb-btn--outline-light:hover {
     background: var(--ccvb-cream-light);
     color: var(--ccvb-dark);
     border-color: var(--ccvb-cream-light);
}
/* ========================================================================= VILLA HORIZONTAL INTRO ("Modern Luxury, Surrounded by Nature") Two columns: eyebrow + heading + paragraphs on the left, a tall parallax image on the right. Append this to your main assets/css/style.css. Relies on shared vars/utilities already defined there: --ccvb-cream, --ccvb-text-muted, --ccvb-font-serif, --ccvb-container, --ccvb-gap, .ccvb-parallax-wrap, .ccvb-parallax-media, .ccvb-parallax-img ========================================================================= */
 .villa-horizontal-intro {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     padding: 100px 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(2rem, 6vw, 5rem);
     align-items: stretch;
}
 .villa-horizontal-intro__text {
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .villa-horizontal-intro__eyebrow {
     font-size: 16px;
     letter-spacing: 0;
     text-transform: capitalize;
     font-style: italic;
     color:#11552F;
     line-height:24px;
     font-weight:400;
     font-family: var(--ccvb-font-serif);
     margin: 0 0 20px;
}
 .villa-horizontal-intro__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2rem, 4vw, 2.9rem);
     line-height: 1.2;
     margin: 0 0 1.5rem;
}
 .villa-horizontal-intro__body {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
}
 .villa-horizontal-intro__body p {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 1.8;
}
 .villa-horizontal-intro__media {
     border-radius: 0px;
     overflow: hidden;
     position: relative;
     min-height: 480px;
}
 @media (max-width: 900px) {
     .villa-horizontal-intro {
         grid-template-columns: 1fr;
    }
     .villa-horizontal-intro__media {
         order: -1;
         min-height: 320px;
    }
}
/* ========================================================================= VILLA THUMBNAIL CONTENT GRID ("What Makes The Canopy Villas Unique") Centered heading + optional top-left decorative leaf + 3-column grid of image/title/description cards. On hover: the card lifts slightly and its image zooms in — both animated with CSS transitions, no JS needed. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream-light, --ccvb-text-muted, --ccvb-font-serif, --ccvb-container ========================================================================= */
 .villa-thumbnail-content {
     position: relative;
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
     overflow: hidden;
    /* contain the leaf icon */
}
 .villa-thumbnail-content__leaf {
     position: absolute;
     top: 0;
     left: 0;
     width: clamp(140px, 16vw, 220px);
     height: auto;
     opacity: 0.6;
     pointer-events: none;
     z-index: 0;
}
 .villa-thumbnail-content__heading {
     position: relative;
     z-index: 1;
     text-align: center;
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}
 .villa-thumbnail-content__grid {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: clamp(1.5rem, 3vw, 2.5rem);
}
 .villa-thumbnail-content__card {
     transition: transform 0.4s ease;
}
 .villa-thumbnail-content__card:hover, .villa-thumbnail-content__card:focus-within {
     transform: translateY(-8px);
}
 .villa-thumbnail-content__media {
     aspect-ratio: 4 / 3;
     border-radius: 0px;
     overflow: hidden;
     margin-bottom: 1.5rem;
     box-shadow: 0 10px 25px rgba(20, 17, 10, 0);
     transition: box-shadow 0.4s ease;
}
 .villa-thumbnail-content__card:hover .villa-thumbnail-content__media, .villa-thumbnail-content__card:focus-within .villa-thumbnail-content__media {
     box-shadow: 0 18px 34px rgba(20, 17, 10, 0.18);
}
 .villa-thumbnail-content__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
}
 .villa-thumbnail-content__card:hover .villa-thumbnail-content__media img, .villa-thumbnail-content__card:focus-within .villa-thumbnail-content__media img {
     transform: scale(1.08);
}
 .villa-thumbnail-content__card-title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.3rem, 2vw, 1.6rem);
     margin: 0 0 0.6rem;
     transition: color 0.3s ease;
}
 .villa-thumbnail-content__card:hover .villa-thumbnail-content__card-title, .villa-thumbnail-content__card:focus-within .villa-thumbnail-content__card-title {
     font-weight:600;
}
 .villa-thumbnail-content__card-desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 1.6;
     font-size: 0.95rem;
}
 @media (prefers-reduced-motion: reduce) {
     .villa-thumbnail-content__card, .villa-thumbnail-content__media, .villa-thumbnail-content__media img, .villa-thumbnail-content__card-title {
         transition: none;
    }
}
 @media (max-width: 900px) {
     .villa-thumbnail-content__grid {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================= CATEGORY BASED GALLERY ("Step Inside Your Private Retreat") Intro row (heading/description + prev/next arrows), then a two-column stage: left image carries the category name overlaid;
 right image is a plain detail shot. Arrows cycle categories, sliding both columns independently together (see script-addition.js). Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream, --ccvb-text-muted, --ccvb-font-serif, --ccvb-container, --ccvb-gap ========================================================================= */
 .category-gallery {
     position: relative;
     max-width: var(--ccvb-container);
     margin: 0 auto;
     padding: 100px 0px;
     overflow: hidden;
    /* contain the leaf icon */
}
 .category-gallery__leaf {
     position: absolute;
     top: 0;
     right: 0;
     width: clamp(140px, 16vw, 220px);
     height: auto;
     opacity: 0.6;
     pointer-events: none;
     z-index: 0;
}
 .category-gallery__intro {
     position: relative;
     z-index: 1;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 2rem;
     flex-wrap: wrap;
     margin-bottom: clamp(2rem, 5vw, 3rem);
}
 .category-gallery__eyebrow {
     font-size: 0.8rem;
     letter-spacing: 0;
     font-family: var(--ccvb-font-serif);
     font-style: italic;
     color: #4b6a52;
     margin: 0 0 0.75rem;
}
 .category-gallery__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2rem, 4vw, 2.8rem);
     margin: 0 0 0.75rem;
}
 .category-gallery__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     max-width: 60ch;
     line-height: 1.6;
}
 .category-gallery__nav {
     display: flex;
     gap: 0.75rem;
     flex-shrink: 0;
}
 .category-gallery__arrow {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     border: none;
     background: var(--ccvb-cream-light, #faf3e6);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background-color 0.3s ease, transform 0.2s ease;
}
 .category-gallery__arrow svg {
     width: 20px;
     height: 20px;
}
 .category-gallery__arrow:hover svg{
     stroke:black;
}
 .category-gallery__arrow:hover {
     background: var(--ccvb-gold);
     color: var(--ccvb-cream-light);
     transform: translateY(-2px);
}
/* --- two-column stage --- */
 .category-gallery__stage {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     gap: clamp(1rem, 2.5vw, 1.5rem);
}
 .category-gallery__col {
     position: relative;
    /* aspect-ratio: 4 / 3.4;
     */
     border-radius: 0px;
     height:500px;
     overflow: hidden;
}
/* Sliding technique: every slide is positioned by its index relative to the active one (not by explicit "next"/"prev" direction tracking), so the same rule set works whichever arrow is clicked: relative 0 -> is-active -> translateX(0) relative +1 -> is-next -> translateX(100%) (parked just off right) relative -1 (N-1) -> is-prev -> translateX(-100%) (parked just off left) anything else -> default -> translateX(220%) (parked further away, invisible) Swapping classes lets the browser transition transform smoothly between whatever value a slide had and its new one — both columns slide independently since each has its own set of slides/classes. */
 .category-gallery__slide {
     position: absolute;
     inset: 0;
     transform: translateX(220%);
     transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
     z-index: 1;
}
 .category-gallery__slide.is-active {
     transform: translateX(0);
     z-index: 3;
}
 .category-gallery__slide.is-next {
     transform: translateX(-100%);
}
/* was +100% */
 .category-gallery__slide.is-prev {
     transform: translateX(100%);
}
/* was -100% */
 .category-gallery__slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
/* Left column: dark gradient + large label overlay, matching "Living Room" */
 .category-gallery__col--left .category-gallery__slide::after {
     content: "";
     position: absolute;
     inset: 0;
    /* background: linear-gradient(180deg, rgba(20,17,10,0) 40%, rgba(20,17,10,.45) 100%);
     */
     z-index: 2;
     pointer-events: none;
}
 .category-gallery__label {
     position: absolute;
     z-index: 3;
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: 80px;
     line-height: 104px;
     color: #fff;
     left: 50%;
     transform: translate(-50%, -50%);
     top: 50%;
     max-width: 5ch;
}
 @media (prefers-reduced-motion: reduce) {
     .category-gallery__slide {
         transition: none;
    }
}
/* ========================================================================= CASA IMAGE THUMBNAIL — FLIP CARDS ("Discover Another Side of Casa Campana") Intro (heading left, description right) + a 3-column grid of flip cards. Front: image with title overlay. On hover/focus: card flips 180° (CSS 3D transform) to reveal a description + optional link on the back. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream, --ccvb-dark, --ccvb-cream-light, --ccvb-text-muted, --ccvb-font-serif, --ccvb-container, --ccvb-gap, .ccvb-btn ========================================================================= */
 .casa-image-thumbnail {
     max-width: var(--ccvb-container, 1240px);
     margin: 0 auto;
     padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
}
 .casa-image-thumbnail__intro {
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: var(--ccvb-gap, 2rem);
     align-items: start;
     margin-bottom: clamp(2rem, 5vw, 3rem);
}
 .casa-image-thumbnail__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2rem, 4vw, 2.8rem);
     line-height: 1.2;
     margin: 0;
}
 .casa-image-thumbnail__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 1.7;
}
 .casa-image-thumbnail__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
}
/* --- flip card mechanics --- */
 .flip-card {
     position: relative;
     aspect-ratio: 3 / 4;
     perspective: 1600px;
     cursor: pointer;
     outline: none;
     border-radius: 4px;
}
 .flip-card__inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
     transform-style: preserve-3d;
}
 .flip-card:hover .flip-card__inner, .flip-card:focus .flip-card__inner, .flip-card:focus-within .flip-card__inner {
     transform: rotateY(180deg);
}
 .flip-card__face {
     position: absolute;
     inset: 0;
     border-radius: 4px;
     overflow: hidden;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
}
/* Front: image + bottom-left title overlay */
 .flip-card__face--front {
     background: var(--ccvb-dark);
}
 .flip-card__face--front img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .flip-card__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(20,17,10,0) 45%, rgba(20,17,10,.55) 100%);
}
 .flip-card__title {
     position: absolute;
     left: 50%;
     top: 50%;
     margin: 0;
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.3rem, 2vw, 1.7rem);
     line-height: 1.2;
     color: #fff;
     transform: translate(-50%, -50%);
}
/* Back: solid color panel with description */
 .flip-card__face--back {
     transform: rotateY(180deg);
     background: var(--ccvb-dark);
     color: var(--ccvb-cream-light);
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: clamp(1.5rem, 3vw, 2rem);
}
 .flip-card__back-title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.2rem, 1.8vw, 1.5rem);
     margin: 0 0 0.85rem;
     color: var(--ccvb-cream-light);
}
 .flip-card__back-desc {
     margin: 0 0 1.25rem;
     font-size: 0.92rem;
     line-height: 1.7;
     color: rgba(246, 236, 217, 0.85);
}
 .flip-card__link {
     align-self: flex-start;
     color: #342610;
     border-color: rgba(246, 236, 217, 0.4);
     max-height: 45px;
     width: 100%;
}
 .flip-card__link:hover {
     background: var(--ccvb-gold);
     border-color: var(--ccvb-gold);
     color: var(--ccvb-dark);
}
 @media (prefers-reduced-motion: reduce) {
     .flip-card__inner {
         transition: none;
    }
}
 @media (max-width: 900px) {
     .casa-image-thumbnail__intro {
         grid-template-columns: 1fr;
         gap:24px;
    }
     .casa-image-thumbnail__grid {
         grid-template-columns: 1fr;
    }
     .flip-card {
         aspect-ratio: 4 / 3;
    }
}
/* ========================================================================= FEATURED BLOG POST ("Insights, Inspiration & Island Experiences") Intro (eyebrow/heading left, description right) + a two-column featured card: post image left, meta/title/excerpt/button right. Pulls the single latest published Post live. ========================================================================= */
 .featured-blog {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     padding: 100px 0px 80px 0px 
}
 .featured-blog__intro {
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: var(--ccvb-gap, 2rem);
     align-items: center;
     margin-bottom: clamp(2rem, 5vw, 3rem);
}
 .featured-blog__eyebrow {
     font-size: 0.8rem;
     letter-spacing: 0;
     font-family:var(--ccvb-font-serif);
     font-style: italic;
     color: #11552F;
     margin: 0 0 0.75rem;
}
 .featured-blog__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2rem, 4vw, 2.8rem);
     line-height: 1.2;
     margin: 0;
}
 .featured-blog__desc {
     margin: 0;
     color: var(--ccvb-text-muted);
     line-height: 1.7;
}
 .featured-blog__card {
     display: grid;
     grid-template-columns: 1fr 1fr;
     background: #fff;
     border-radius: 4px;
     overflow: hidden;
}
 .featured-blog__media {
     min-height: 340px;
     background: var(--ccvb-cream);
}
 .featured-blog__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
 .featured-blog__body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: clamp(1.75rem, 4vw, 3rem);
}
 .featured-blog__meta {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
     font-size: 0.85rem;
     color: var(--ccvb-text-muted);
}
 .featured-blog__badge {
     background: var(--ccvb-cream);
     border-radius: 2px;
     padding: 0.3rem 0.7rem;
     font-size: 0.72rem;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--ccvb-dark);
}
 .featured-blog__date {
     margin-left: auto;
}
 .featured-blog__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.5rem, 2.6vw, 2.1rem);
     line-height: 1.25;
     margin: 0 0 1rem;
}
 .featured-blog__excerpt {
     margin: 0 0 1.75rem;
     color: var(--ccvb-text-muted);
     line-height: 1.7;
}
 .featured-blog .featured-blog__body .ccvb-btn{
     max-width: max-content;
     width: auto;
     max-height: 40px;
}
 @media (max-width: 780px) {
     .featured-blog__intro {
         grid-template-columns: 1fr;
    }
     .featured-blog__card {
         grid-template-columns: 1fr;
    }
     .featured-blog__media {
         min-height: 260px;
    }
}
/* ========================================================================= LATEST STORIES GRID ("Explore Our Latest Stories") Heading + category dropdown, a 3-column post grid, and an AJAX "Load more" button. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-cream, --ccvb-cream-light, --ccvb-dark, --ccvb-text-muted, --ccvb-border, --ccvb-font-serif, --ccvb-container, .ccvb-btn ========================================================================= */
 .latest-stories {
     max-width: var(--ccvb-container);
     margin: 0 auto;
     padding-bottom:100px;
}
 .latest-stories__head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
     margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
 .latest-stories__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.9rem, 3.5vw, 2.6rem);
     margin: 0;
}
 .latest-stories__filter {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     background: #fff;
     border: 1px solid #B9B4AB;
     border-radius: 999px;
     padding: 12px 16px;
}
 .latest-stories__filter-label {
     display: inline-block;
    /* was: none — needs to show for "Category:" to appear */
     font-size: 0.9rem;
     font-weight: 400;
     color: var(--ccvb-dark);
     white-space: nowrap;
}
 .latest-stories__select {
     appearance: none;
     background: transparent;
     border: 0;
     border-radius: 0;
     padding: 0 1.5rem 0 0;
     font-size: .9rem;
     font-weight: 700;
     color: var(--ccvb-dark);
     cursor: pointer;
     width: auto;
     background-image: url(/wp-content/uploads/2026/08/CaretDown.svg);
     background-repeat: no-repeat;
     background-position: right center;
     background-size: 14px;
     outline: 0px !important;
     font-family: 'Quicksand';
}
 .latest-stories__grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
     margin-bottom: clamp(2rem, 5vw, 3rem);
}
 .latest-stories__card {
     display: flex;
     flex-direction: column;
}
 .latest-stories__media {
     display: block;
     aspect-ratio: 4 / 3;
     border-radius:0px;
     overflow: hidden;
     margin-bottom: 1rem;
}
 .latest-stories__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
}
 .latest-stories__card:hover .latest-stories__media img {
     transform: scale(1.05);
}
 .latest-stories__meta {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 0.75rem;
     font-size: 0.8rem;
     color: var(--ccvb-text-muted);
}
 .latest-stories__badge {
     background: #FDFCF9B2;
     border: 0;
     border-radius: 0;
     padding: 6px 8px;
     font-size: 12px;
     letter-spacing: 0;
     color: var(--ccvb-dark);
     font-weight: 600 
}
 .latest-stories__date {
     margin-left: auto;
}
 .latest-stories__title {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(1.2rem, 1.8vw, 1.45rem);
     line-height: 1.3;
     margin: 0 0 0.65rem;
}
 .latest-stories__title a {
     color: inherit;
     text-decoration: none;
}
 .latest-stories__title a:hover {
     color: var(--ccvb-text-muted);
}
 .latest-stories__excerpt {
     margin: 0;
     color: var(--ccvb-text-muted);
     font-size: 0.92rem;
     line-height: 1.65;
}
 .latest-stories__load-more-row {
     display: flex;
     justify-content: center;
}
 @media (max-width: 900px) {
     .latest-stories__grid {
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 560px) {
     .latest-stories__grid {
         grid-template-columns: 1fr;
    }
}
 @media only screen and (min-width:769px){
     .latest-stories__excerpt {
         font-size: 16px;
         line-height: 24px;
    }
     .latest-stories__heading {
         font-size: 52px;
         line-height: 66px;
         letter-spacing: -3%;
    }
     .latest-stories__title {
         font-size: 32px;
         line-height: 42px;
         margin: 0 0 20px;
    }
     .featured-blog__heading {
         font-size: 68px;
         line-height: 88px;
    }
     .featured-blog__eyebrow {
         font-size: 16px margin: 0 0 20px;
         line-height: 24px;
    }
     .featured-blog__desc {
         font-size: 20px;
         line-height: 30px;
    }
     .featured-blog__title {
         font-size: 52px;
         line-height: 66px;
         margin: 0 0 20px;
    }
     .featured-blog__excerpt {
         margin: 0 0 32px;
         font-size: 16px;
         line-height: 24px;
    }
     .featured-blog__badge {
         border-radius: 0;
         padding: 6px 8px;
         font-size: 12px;
         letter-spacing: 0;
         line-height: 16px;
         font-weight: 600;
    }
}
/* ========================================================================= NEWSLETTER CTA ("Travel Ideas Delivered to Your Inbox") Full-width dark band, optional parallax background image, centered eyebrow/heading/description + a Contact Form 7 form styled into a pill-shaped email+button bar. Append this to your main assets/css/style.css. Relies on shared vars already defined there: --ccvb-dark, --ccvb-cream-light, --ccvb-gold, --ccvb-font-serif, .ccvb-parallax-wrap, .ccvb-parallax-media, .ccvb-parallax-img ========================================================================= */
 .newsletter-cta {
     position: relative;
     min-height: 55vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: var(--ccvb-dark);
}
 .newsletter-cta__overlay {
     position: absolute;
     inset: 0;
     background: rgba(20, 17, 10, 0.5);
     z-index: 1;
}
 .newsletter-cta__content {
     position: relative;
     z-index: 2;
     max-width: 760px;
     margin: 0 auto;
     text-align: center;
     padding: clamp(3rem, 8vw, 5rem) 1.5rem;
}
 .newsletter-cta__eyebrow {
     font-size: 16px;
     font-style: italic;
     color: var(--ccvb-cream-light);
     opacity: 1;
     margin: 0 0 10px;
     font-family: 'Instrument Serif';
}
 .newsletter-cta__heading {
     font-family: var(--ccvb-font-serif);
     font-weight: 400;
     font-size: clamp(2.1rem, 4.5vw, 3.2rem);
     line-height: 1.2;
     color: var(--ccvb-cream-light);
     margin: 0 0 1.5rem;
}
 .newsletter-cta__desc {
     margin: 0 0 2rem;
     color: rgba(246, 236, 217, 0.85);
     font-size: 1.05rem;
     line-height: 1.6;
}
 .newsletter-cta__notice {
     color: rgba(246, 236, 217, 0.7);
     font-size: 0.9rem;
     font-style: italic;
}
 .newsletter_section{
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
}
/* --- Contact Form 7 pill styling --- CF7's default template wraps each field in its own <p>. These rules flatten that into a single-row pill: email input on the left, Subscribe button on the right, both inside a white rounded bar. If your form's field/button markup differs (e.g. custom field names), adjust the selectors below to match — the key targets are: .wpcf7-form -> the pill container input[type="email"] -> the email input input[type="submit"] -> the Subscribe button */
 .newsletter-cta__form {
     max-width: 70%;
     margin: 0 auto;
}
 .newsletter-cta__form .wpcf7-form {
     display: flex;
     align-items: center;
     background: #fff;
     border-radius: 999px;
     padding: 6px;
     gap: 0;
}
 .newsletter-cta__form .wpcf7-form p {
     margin: 0;
     flex: 1;
     display: flex;
     align-items: center;
}
 .newsletter-cta__form .wpcf7-form-control-wrap {
     flex: 1;
     display: block;
     width: 100%;
}
 .newsletter-cta__form input[type="email"], .newsletter-cta__form input[type="text"] {
     width: 100%;
     border: none;
     background: transparent;
     padding: 0.9rem 1.25rem;
     font-size: 1rem;
     color: var(--ccvb-dark);
     outline: none;
}
 .newsletter-cta__form input[type="submit"] {
     flex-shrink: 0;
     background: var(--ccvb-dark);
     color: var(--ccvb-cream-light);
     border: none;
     border-radius: 999px;
     padding: 0.9rem 1.75rem;
     font-family: var(--ccvb-font-serif);
     font-size: 0.95rem;
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .newsletter-cta__form input[type="submit"]:hover {
     background: var(--ccvb-gold);
     color: var(--ccvb-dark);
}
 .wpcf7-response-output{
     margin:0 !important;
     padding:0 !important;
     border:0 !important;
     position: absolute;
     bottom: 10px;
     text-align: center;
     width: 100%;
     left: 0;
}
 .newsletter-cta__form .wpcf7-spinner {
     background-color: #000000;
     padding: 0;
     position: absolute;
     right: 32%;
     margin: 0;
}
 .newsletter-cta__form .wpcf7-response-output {
     margin: 1rem 0 0;
     color: rgba(246, 236, 217, 0.85);
     border-color: rgba(246, 236, 217, 0.4) !important;
}
 .newsletter-cta__form .wpcf7-not-valid-tip {
     color: #ff0c0c;
     text-align: left;
     margin-top: 0;
     position: absolute;
     bottom: -31px;
     width: 100%;
     left: 0;
     display: inline-block 
}
 @media (max-width: 560px) {
     .newsletter-cta__form .wpcf7-form {
         flex-direction: column;
         border-radius: 50px !important;
         padding: 10px;
         gap: 0.5rem;
    }
     .newsletter-cta__form input[type="submit"] {
         width: 100%;
    }
     .newsletter-cta__form .wpcf7-response-output {
         bottom: -50px !important;
         text-align: center;
         width: 80% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
    }
}
 @media (max-width: 860px) {
     .category-gallery__stage {
         grid-template-columns: 1fr;
    }
     .category-gallery__intro {
         align-items: flex-start;
    }
     .category-gallery__nav {
         position: absolute;
         right: 0;
         top: 0px;
    }
     .category-gallery__arrow {
         width: 40px;
         height: 40px;
    }
}
/* custom css starts */
 .page-id-209 .ccvb-curated__intro .ccvb-eyebrow {
     letter-spacing: 0;
     text-transform: capitalize;
     color: #11552F;
     font-family: 'Instrument Serif';
}
 .page-id-209 .stats.vill_list_stats .stat .v, .page-id-209 .stats.vill_list_stats .stat .V{
     font-size: 16px;
     margin-top: 8px;
     font-weight: 600;
     font-family: 'Quicksand';
}
 .ccvb-villa-type.cvb-villa-type--reverse + .ccvb-villa-type{
     padding-bottom:100px;
}
 @media only screen and (min-width:300px) and (max-width:769px){
     .category-gallery__col {
         height: 400px;
    }
     .category-gallery__label {
         font-size: 54px;
         line-height: 60px;
    }
     .image-content-box__desc{
         max-width: max-content;
    }
     .book-villa-cta{
         min-height:0;
    }
     .ccvb-more-than__gallery .ccvb-parallax-wrap{
         margin-bottom:20px;
         min-height:auto;
    }
     .ccvb-more-than__gallery .ccvb-parallax-media{
         position:relative;
    }
     .flip-card__back-desc{
         font-size:12px;
    }
     .villa-horizontal-intro{
         padding: 0;
    }
     .villa-thumbnail-content{
         padding-top:0;
         padding-bottom:0;
    }
     .accordion-image__cta-row{
         margin-top:24px;
    }
     .editorial-progress{
         margin-top: 0;
    }
     .category-gallery{
         padding:0px 24px !important;
    }
     .ccvb-curated__stage{
         gap: 32px;
    }
     header button.nav-toggle{
         left:1% !important;
    }
     header{
         margin: 0px 32px !important;
    }
     .footer {
         padding: 64px 32px;
    }
     .ccvb-complete__card{
         width:80%;
    }
     .ccvb-more-than__row{
         gap:32px;
    }
     .ccvb-villa-type.ccvb-villa-type--reverse {
         grid-template-columns: 1fr !important;
    }
     .wrap {
         width: 100% 
    }
     .ccvb-villa-type__content {
         padding-left: 0px !important;
    }
     .ccvb-villa-type--reverse .ccvb-villa-type__content {
         padding-right: 0px !important;
    }
}
 @media only screen and (max-width:1199px){
     .ccvb-complete.ccvb-parallax-wrap{
         padding:300px !important;
    }
     .ccvb-hero {
         min-height: 50vh;
    }
     .ccvb-villa-type__content{
         padding-left: 32px;
    }
     .ccvb-villa-type--reverse .ccvb-villa-type__content {
         padding-right: 32px;
    }
}
 @media only screen and (min-width:769px) and (max-width:1025px){
     .ccvb-more-than {
         padding-left: 32px !important;
         padding-right: 32px !important;
    }
     .new-hero {
         min-height: 400px;
         padding: 100px 5% 0 5% !important;
    }
     .new-hero__content {
         min-height: 400px;
         gap: 64px;
    }
     .book-villa-cta{
         min-height:auto;
    }
     .book-villa-cta__content{
         padding:0;
    }
     .reserved-for-you__text {
         max-width: 100%;
         padding: 0 0 32px 0px;
    }
     .reserved-for-you__para {
         max-width: 80%;
    }
     :root {
         --ccvb-container: 90%;
    }
     .image-content-box__intro{
         padding:0;
    }
     .ccvb-intro__inner {
         grid-template-columns: 1fr !important;
         gap: 32px !important;
    }
     .ccvb-villa-type__content {
         padding-left: 32px !important;
         padding-right: 32px !important;
    }
     .ccvb-complete__card {
         width: 80%;
    }
}
 @media only screen and (min-width:1025px) and (max-width:1200px){
     :root {
         --ccvb-container: 90%;
    }
}
 @media only screen and (max-width:767px){
     .ccvb-curated__desc {
         line-height: 24px;
         font-size: 16px;
    }
     .ccvb-complete__desc {
         margin-bottom: 20px;
    }
     .ccvb-complete.ccvb-parallax-wrap {
         padding: 300px 0 !important;
    }
     .ccvb-hero__title {
         font-size: 38px;
         line-height: 40px;
    }
     .ccvb-hero__subtitle {
         font-size: 16px;
         line-height: 24px;
    }
     .ccvb-hero {
         min-height: 70vh;
    }
     .ccvb-hero__content{
         margin-top: 50px;
    }
     .page-id-209 section {
         padding: 32px 24px !important;
    }
     .ccvb-villa-type__content {
         padding-left: 0px;
    }
     .ccvb-villa-type.ccvb-villa-type--reverse {
         grid-template-columns: 1fr !important;
    }
     .ccvb-villa-type{
         gap:32px;
    }
     .ccvb-villa-type__title {
         font-size: 32px;
         margin: 0 0 12px;
         line-height: 40px;
    }
     .ccvb-intro__heading {
         font-size: 32px;
         line-height: 40px;
    }
     .ccvb-intro__inner{
         gap:24px;
    }
     .ccvb-intro__text {
         max-width: unset;
         font-size: 16px;
         line-height: 24px;
    }
     .ccvb-complete__card{
         width: 90%;
    }
     .ccvb-complete__title {
         font-size: 32px;
         margin: 0 0 12px 0;
    }
     .ccvb-curated__intro{
         gap:24px;
    }
     .wrap {
         width: 100%;
    }
     .ccvb-more-than__title {
         font-size: 32px;
         margin: 0 0 12px 0;
         line-height: 40px;
    }
     .ccvb-more-than__copy p, .ccvb-more-than__row p {
         font-size:16px;
         line-height: 24px;
    }
     .ccvb-more-than__row{
         gap:24px;
    }
     .ccvb-curated__label {
         font-size: 24px;
         line-height: 30px;
    }
     .ccvb-curated__trigger {
         padding: 14px 0px;
    }
     .ccvb-curated__media {
         min-height: 300px;
    }
     .ccvb-villa-type__desc {
         font-size: 16px;
         line-height: 24px;
    }
     .ccvb-villa-type__media {
         height: 300px;
    }
     .footer {
         padding: 40px 24px;
    }
}
 @media only screen and (max-width:769px) {
     .casa-image-thumbnail {
         padding: 0;
    }
     .ccvb-more-than {
         padding-left: 32px !important;
         padding-right: 32px !important;
    }
     .ccvb-more-than__gallery{
         gap:0;
    }
     .new-hero__content {
         align-items: end;
         padding: 100px 24px 0 24px;
         gap: 24px ;
         text-align: center;
         min-height:50vh;
         justify-content:center;
         flex-wrap: wrap;
    }
     .new-hero__cta {
         align-self: flex-start;
         max-width: 200px;
    }
     .ccvb-btn--dark {
         max-width: max-content;
         width: auto;
         padding: 8px 24px;
    }
     .new-hero{
         min-height:50vh;
    }
     .marquee-3ini__item {
         font-size: 82px;
         line-height: 85px;
    }
     section.stats-bar, section.reserved-for-you, section.marquee-3ini, section.content-text-block, section.color_background, section .book-villa-cta__content, section.questions, section.editorial, .footer{
         padding: 32px 24px !important;
    }
     section.reserved-for-you .reserved-for-you__para, section.content-text-block .content-text-block__intro-text, section.color_background .villa-highlights__desc, .book-villa-cta__subtext, .highlight-card__label, .image-content-box__intro-desc, .accordion-image__desc{
         font-size: 16px;
         line-height: 24px;
         max-width: unset;
         padding:0;
    }
     section.reserved-for-you .reserved-for-you__heading, section.content-text-block .content-text-block__heading, section .villa-highlights .villa-highlights__heading, .image-content-box__intro-heading, .book-villa-cta__heading, .accordion-image__heading {
         font-size: 32px;
         line-height: 40px;
         letter-spacing: 0;
         max-width: none;
    }
     .content-text-block__grid{
         text-align:center;
    }
     section.reserved-for-you .reserved-for-you__text{
         margin-bottom:32px;
    }
     section.reserved-for-you .reserved-for-you__text, section.stats-bar .stats-bar__item, .villa-highlights, .accordion-image, .book-villa-cta{
         padding: 0 !important;
    }
     .villa-highlights__intro, .image-content-box__intro,.image-content-box__row, .image-content-box__row--reverse, .accordion-image__intro{
         gap: 24px;
    }
     .book-villa-cta__subtext {
         margin: 0 0 24px 0;
    }
     section.stats-bar .stats-bar__list {
         grid-template-columns: repeat(6, 1fr);
        /* was repeat(3, 1fr) */
    }
     section.stats-bar .stats-bar__list > li {
         grid-column: span 2;
        /* 3 per row = 33.3% each, same as before */
    }
    /* target the last row's items and make them 50/50 */
     section.stats-bar .stats-bar__list > li:nth-last-child(-n+2) {
         grid-column: span 3;
    }
     .highlight-card{
         min-height:60px;
    }
     .accordion-image__trigger{
         padding:12px;
    }
     .accordion-image__title {
         font-size: 24px;
         line-height: 30px;
    }
     .content-text-block__leaf{
         display:none;
    }
}
 @media only screen and (max-width:575px){
     .newsletter-cta__form{
         max-width: 100% !important;
    }
} 
@media only screen and (min-width:769px)
 .ccvb-more-than__gallery .ccvb-more-than__media:first-child{
     max-height: 80%;
}
}
.page-id-507 .new-hero__text{
	max-width: 784px;
}
/* custom css ends */