.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Montserrat';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Cormorant Garamond';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.gsap-stagger-children {
}
/* Modern Standard (Firefox) */
* {
  scrollbar-width: thin;
  scrollbar-color: #B78F2B #151716;
}

/* Webkit Browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 12px; /* Width of the entire scrollbar */
}

::-webkit-scrollbar-track {
  background: #151716; /* Color of the tracking area (Carbon Black) */
}

::-webkit-scrollbar-thumb {
  background-color: #B78F2B; /* Color of the scroll thumb (Dark Goldenrod) */
  border-radius: 10px;       /* Roundness of the thumb */
  border: 3px solid #151716; /* Creates padding around the thumb using the background color */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #967323; /* Slightly darker gold on hover for feedback */
}

html, body {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}
.menu-address {
  display: flex;
  gap: 20px;
  align-items: center;
}


/* =========================================
GALLERY CARD IN HERO   ========================================= */
/* Positioning the container */
.services-container {
    position: absolute;
    right: 40px;
    bottom: 5%;
    width: 100%;
    max-width: 380px;
    z-index: 10;
}


/* =========================================
   START SERVICE AREA
========================================= */
:root {
    --area-bg: #f5f3ee;
    --area-dark: #151716;
    --area-dark-soft: #1c1f1e;
    --area-gold: #b79c4a;
    --area-gold-deep: #b78f2b;
    --area-text: #1a1a1a;
    --area-muted: #77736b;
    --area-border: #d8d1c4;
    --area-white: #f7f3ec;
}

/* ---------- 1. HERO ---------- */
.area-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.area-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
}
.area-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw 8vh;
    color: #fff;
}
.area-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.area-hero-eyebrow .eyebrow-line {
    width: 3rem;
    height: 1px;
    background: var(--area-gold);
    display: inline-block;
}
.area-hero-eyebrow p {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--area-gold);
}
.area-hero-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.5rem, 11vw, 11rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0 0 1.5rem;
    text-transform: uppercase;
}
.area-hero-subtitle {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin: 0 0 1.5rem;
}

.area-hero-tagline {
    font-family: Georgia, serif;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    font-weight: 300;
    line-height: 1.4;
    max-width: 580px;
    color: rgba(255,255,255,0.92);
    margin: 0;
}
.area-hero-scroll {
    position: absolute;
    bottom: 3vh;
    right: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.area-hero-scroll .scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--area-gold), transparent);
    animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
    0%, 100% { transform: scaleY(0.3); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
}
@keyframes areaFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 2. INTRO ---------- */
.area-intro-section {
    background: var(--area-bg);
    padding: clamp(80px, 12vw, 160px) 5vw;
    overflow: hidden;
}
.area-intro-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(50px, 7vw, 110px);
    align-items: center;
}
.area-intro-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}
.area-intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-intro-img-wrapper:hover .area-intro-img { transform: scale(1.05); }

.area-intro-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.area-intro-eyebrow .eyebrow-line {
    width: 2.5rem;
    height: 1px;
    background: var(--area-gold);
}
.area-intro-eyebrow p {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--area-gold);
}
.area-intro-eyebrow.eyebrow-light p { color: var(--area-gold); }

.area-intro-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 2rem;
    color: var(--area-text);
}
.area-intro-body {
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    line-height: 1.75;
    color: #47433d;
}
.area-intro-body p { margin: 0 0 1.4rem; }

/* ---------- 3. STATS BAR ---------- */
.area-stats {
    background: var(--area-bg);
    padding: 0 5vw clamp(60px, 8vw, 100px);
}
.area-stats-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(183, 156, 74, 0.3);
    border-bottom: 1px solid rgba(183, 156, 74, 0.3);
    padding: 3rem 0;
}
.area-stat {
    display: flex;
    flex-direction: column;
    text-align: center;
    border-right: 1px solid rgba(183, 156, 74, 0.2);
}
.area-stat:last-child { border-right: none; }
.area-stat-num {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: var(--area-text);
    line-height: 1;
    letter-spacing: -0.03em;
}
.area-stat-label {
    margin-top: 0.8rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--area-muted);
}

/* ---------- 4. SERVICES GRID ---------- */
.area-services {
    background: var(--area-bg);
    padding: clamp(80px, 12vw, 150px) 5vw;
}
.area-services-inner {
    max-width: 1400px;
    margin: 0 auto;
}
.area-services-header {
    max-width: 800px;
    margin: 0 auto 5rem;
    text-align: center;
}
.area-services-header .area-intro-eyebrow {
    justify-content: center;
}
.area-services-heading {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 4.5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--area-text);
    margin: 0 0 1.5rem;
}
.area-services-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--area-muted);
    margin: 0;
}

.area-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
/* Make 1st card span when 7 cards: 3 + 3 + 1 layout */
.area-services-grid .area-service-card:nth-child(7) {
    grid-column: span 3;
    min-height: 280px;
}

.area-service-card {
    position: relative;
    display: block;
    text-decoration: none;
    background-color: var(--area-dark);
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-height: 340px;
    border: 1px solid rgba(183, 156, 74, 0.12);
    transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-service-card:hover {
    border-color: var(--area-gold);
    transform: translateY(-4px);
}

.area-service-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    transition: height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}
.area-service-card:hover .area-service-fill { height: 100%; }
.area-service-waves {
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    height: 28px;
    display: block;
}
.area-service-fill-bg {
    width: 100%;
    height: 100%;
    background-color: var(--area-gold);
}
.area-parallax > use {
    animation: area-wave-move 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.area-parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.area-parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.area-parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.area-parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes area-wave-move {
    0%   { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

.area-service-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    transition: color 0.4s ease;
}
.area-service-card:hover .area-service-content { color: var(--area-dark); }

.area-service-num {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: var(--area-gold);
    transition: color 0.4s ease 0.15s;
}
.area-service-card:hover .area-service-num { color: var(--area-dark); }

.area-service-name {
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 1.5rem 0 0.8rem;
}
.area-service-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    transition: color 0.4s ease;
}
.area-service-card:hover .area-service-desc { color: rgba(21, 23, 22, 0.85); }

.area-service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--area-gold);
    transition: color 0.4s ease;
}
.area-service-card:hover .area-service-link { color: var(--area-dark); }
.area-service-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.area-service-card:hover .area-service-arrow {
    transform: translate(3px, -3px);
}

/* Background image layer */
.area-service-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.area-service-card:hover .area-service-bg {
    transform: scale(1.06);
}

/* Dark gradient overlay for text legibility */
.area-service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(21, 23, 22, 0.55) 0%,
        rgba(21, 23, 22, 0.75) 55%,
        rgba(21, 23, 22, 0.9) 100%
    );
    z-index: 1;
    transition: opacity 0.6s ease;
}
/* Slightly fade the overlay on hover so the gold liquid reads cleaner */
.area-service-card:hover .area-service-overlay {
    opacity: 0.85;
}

/* Bump the fill above the overlay */
.area-service-fill {
    z-index: 2;
}

/* Bump the content above everything */
.area-service-content {
    z-index: 3;
}

/* ---------- 5. FEATURED PROJECTS ---------- */
.area-featured {
    background: var(--area-dark);
    color: #fff;
    padding: clamp(80px, 12vw, 150px) 5vw;
}
.area-featured-inner {
    max-width: 1400px;
    margin: 0 auto;
}
.area-featured-header {
    max-width: 700px;
    margin: 0 auto 4rem;
    text-align: center;
}
.area-featured-header .area-intro-eyebrow { justify-content: center; }
.area-featured-heading {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--area-white);
    margin: 0;
}
.area-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.area-featured-card {
    text-decoration: none;
    color: var(--area-white);
    background: var(--area-dark-soft);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(183, 156, 74, 0.12);
    transition: border-color 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-featured-card:hover {
    border-color: var(--area-gold);
    transform: translateY(-4px);
}
.area-featured-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.area-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-featured-card:hover .area-featured-img { transform: scale(1.05); }
.area-featured-body {
    padding: 1.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.area-featured-title {
    font-family: Georgia, serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0;
    color: var(--area-white);
}
.area-featured-cta {
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--area-gold);
    white-space: nowrap;
}

/* ---------- 6. TESTIMONIAL ---------- */
.area-testimonial {
    background: var(--area-bg);
    padding: clamp(80px, 12vw, 140px) 5vw;
    text-align: center;
}
.area-testimonial-inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.area-quote-mark {
    font-family: Georgia, serif;
    font-size: 8rem;
    line-height: 0.6;
    color: var(--area-gold);
    opacity: 0.3;
    display: block;
    margin-bottom: 1rem;
}
.area-testimonial-quote {
    font-family: Georgia, serif;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--area-text);
    margin: 0 0 2.5rem;
    font-style: italic;
}
.area-testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}
.area-testimonial-author {
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--area-text);
}
.area-testimonial-project {
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--area-gold);
}

/* ---------- 7. COVERAGE / CITIES ---------- */
.area-coverage {
    background: var(--area-bg);
    padding: clamp(60px, 9vw, 120px) 5vw;
    border-top: 1px solid var(--area-border);
}
.area-coverage-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}
.area-coverage-heading {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--area-text);
    margin: 0 0 1rem;
}
.area-coverage-radius {
    font-family: "Courier New", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--area-gold);
    margin: 0 0 2.5rem;
}
.area-cities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem 1.5rem;
}
.area-cities-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(183, 156, 74, 0.18);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.area-cities-list .city-name {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    color: var(--area-text);
}
.area-cities-list .city-zip {
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--area-muted);
}
.area-coverage-map {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--area-dark-soft);
}
.area-coverage-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---------- 8. CTA ---------- */
.area-cta {
    background: var(--area-dark);
    color: var(--area-white);
    padding: clamp(80px, 11vw, 140px) 5vw;
    text-align: center;
}
.area-cta-inner {
    max-width: 900px;
    margin: 0 auto;
}
.area-cta-eyebrow {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--area-gold);
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.area-cta-heading {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    color: var(--area-white);
}
.area-cta-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(247, 243, 236, 0.7);
    margin: 0 auto 3rem;
    max-width: 600px;
}
.area-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem 1.1rem 2rem;
    border-radius: 999px;
    border: 1px solid rgba(183, 156, 74, 0.55);
    background: transparent;
    color: var(--area-white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    overflow: hidden;
    transition: color 0.4s, border-color 0.4s, transform 0.4s;
}
.area-cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--area-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}
.area-cta-button > * { position: relative; z-index: 1; }
.area-cta-button:hover {
    color: var(--area-dark);
    border-color: var(--area-gold);
    transform: translateY(-2px);
}
.area-cta-button:hover::before { transform: scaleX(1); }
.area-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.3s, background 0.3s;
}
.area-cta-button:hover .area-cta-arrow {
    transform: translate(3px, -3px);
    background: rgba(21, 23, 22, 0.12);
}

/* ---------- SCROLL REVEAL ---------- */
.area-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .area-intro-inner,
    .area-coverage-inner {
        grid-template-columns: 1fr;
    }
    .area-services-grid,
    .area-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .area-services-grid .area-service-card:nth-child(7) {
        grid-column: span 2;
    }
    .area-stats-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .area-stat {
        border-right: none;
        border-bottom: 1px solid rgba(183, 156, 74, 0.2);
        padding-bottom: 1.5rem;
    }
    .area-stat:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
    .area-hero { height: 80vh; min-height: 520px; }
    .area-hero-content { padding: 0 6vw 8vh; }
    .area-hero-scroll { display: none; }

    .area-services-grid,
    .area-featured-grid {
        grid-template-columns: 1fr;
    }
    .area-services-grid .area-service-card:nth-child(7) {
        grid-column: span 1;
    }
    .area-cities-list { grid-template-columns: 1fr; }
}
/* =========================================
    END SERVICE AREA PAGES
========================================= */

/* =========================================
    START MAIN MENU
========================================= */

/* Container */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Base Button Styles */
.menu-button, .book-call-button {
  height: 52px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  gap: 10px;
  position: relative; 
  overflow: hidden;   
}

/* --- MENU BUTTON --- */
.menu-button {
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
}

/* The Isolated Liquid Container */
.nav-pool-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(76px); 
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}

/* Fill the pool on hover */
.menu-button:hover .nav-pool-fill {
  transform: translateY(24px); 
}

/* Isolated SVG Waves */
.nav-waves {
  position: absolute;
  bottom: 100%; 
  left: 0;
  width: 100%;
  height: 24px; 
  display: block;
  pointer-events: none; 
}

/* Isolated Solid Gold Liquid */
.nav-pool-solid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #b79c4a;
}

/* Isolated Wave Animation */
.nav-parallax > use {
  animation: nav-move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.nav-parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.nav-parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.nav-parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.nav-parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

@keyframes nav-move-forever {
  0% { transform: translate3d(-90px,0,0); }
  100% { transform: translate3d(85px,0,0); }
}

/* Ensure text and hamburger float ON TOP of the water */
.hamburger, .menu-text {
  position: relative;
  z-index: 1; 
}

/* Hamburger lines */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* --- BOOK A CALL BUTTON --- */
.book-call-button {
  background-color: #ffffff;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.3s ease;
}

.book-call-button:hover {
  color: #b79c4a; 
}

.arrow-up {
  display: inline-block;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.book-call-button:hover .arrow-up {
  transform: translate(3px, -3px);
}

/* =========================================
END MAIN MENU
========================================= */


/* =========================================
MENU OVERLAY CSS  
========================================= */
/* --- Overlay Base --- */
.custom-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  z-index: 9999;
  visibility: hidden; 
  opacity: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.custom-menu-overlay.is-open {
  pointer-events: auto;
}

/* --- NEW: Header Bar (Desktop) --- */
.menu-header {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  z-index: 10000;
  pointer-events: none; /* Lets clicks pass through empty space */
}

.menu-header > * {
  pointer-events: auto; /* Re-enables clicks on logo and close button */
}

.menu-logo-link {
  width: 35%; /* perfectly centers the logo over the 35% left column */
  text-align: center;
}

.menu-inner-logo {
  max-width: 150px;
  filter: brightness(0) invert(1); /* Keeps logo white on desktop image */
}

.menu-close {
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; 
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

.menu-close:hover {
  background: #b79c4a; 
  transform: rotate(90deg) scale(1.05); 
  box-shadow: 0 8px 24px rgba(183, 156, 74, 0.3); 
}

/* --- Desktop Grid Layout --- */
.menu-grid {
  display: grid;
  grid-template-columns: 35% 65%; 
  height: 100vh;
  width: 100%;
}

.menu-image-side {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
}

.image-stack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.menu-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0; 
  transform: scale(1.1); 
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-img.active {
  opacity: 1;
  transform: scale(1);
}

/* --- Navigation Links --- */
.menu-links-side {
  display: flex;
  align-items: center;
  padding: 0 10%;
  background: #ffffff;
}

.links-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-link {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  display: block;
  color: #000000; 
  transition: color 0.4s ease;
}

.menu-link.large { font-size: 48px; line-height: 1.1; }
.menu-link.small { font-size: 14px; color: #666 !important; font-weight: 400; }

.nav-group.top-nav:hover .menu-link { color: #bbbbbb; }
.nav-group.top-nav .menu-link:hover { color: #b58e32 !important; }

/* --- Mobile Sticky Button --- */
.mobile-sticky-menu {
  display: none; 
}


/* ==========================================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================================== */
@media (max-width: 768px) {
  
  /* 1. Mobile Bottom Tab Button */
  .mobile-sticky-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%); 
    background-color: #b79c4a;
    color: #ffffff;
    width: 140px;
    height: 48px;
    border-radius: 24px 24px 0 0; 
    border: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    z-index: 9998; 
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
  }
  .mobile-sticky-menu.is-visible {
    transform: translate(-50%, 0); 
  }

  /* 2. Reflow Grid to a Scrollable Flex Column */
  .menu-grid {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto; 
    overflow-x: hidden;
  }

  /* 3. Adjust Header & Logo for White Background */
  .menu-header {
    top: 20px;
    padding: 0 20px;
    position: fixed; /* Header stays at top while links scroll */
  }
  .menu-logo-link {
    width: auto;
    text-align: left;
  }
  .menu-inner-logo {
    max-width: 110px;
    filter: brightness(0); /* Removes invert, turning logo black */
  }
  .menu-close {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  /* 4. Shift Links to the Top (Order: 1) */
  .menu-links-side {
    order: 1; /* Forces the text above the image */
    padding: 100px 8% 40px 8%; /* Top padding clears the fixed header */
    align-items: flex-start;
    min-height: max-content;
  }
  .links-container { gap: 32px; }
  .menu-link.large { font-size: 32px; }
  .menu-link.small { font-size: 15px; margin-bottom: 5px; }

  /* 5. Shrink the Image into a Somerstone-style Bottom Banner (Order: 2) */
  .menu-image-side {
    order: 2; /* Pushes image to the bottom */
    height: 220px;
    min-height: 220px;
    width: 84%; /* Gives it nice margins on the sides */
    margin: 0 auto 40px auto; 
    border-radius: 12px; /* Soft luxury corners */
  }

  .single-services .mobile-sticky-menu {
        /* Reset Bottom Layout */
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-100px) !important; /* Start off-screen at the top */
        
        /* Set Top Layout */
        top: 20px !important;
        right: 20px !important;
        
        /* Modern Pill Style */
        width: 80px;
        height: 40px;
        border-radius: 50px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important;
    }

    /* Trigger Class for JS */
    .single-services .mobile-sticky-menu.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Fix the Sidebar so it doesn't push the bottom layout */
    .single-services .side-nav {
        position: fixed;
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        transform: none;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 10px 0;
        z-index: 999;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        mix-blend-mode: normal;
    }

    .single-services .nav-line { display: none; }
    
    .single-services .nav-links {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }

    .single-services .nav-item {
        writing-mode: horizontal-tb;
        transform: none !important;
        font-size: 9px;
        color: #1a1a1a !important;
    }
}

/* =========================================
   MOBILE FIX
   ========================================= */
@media (max-width: 768px) {
    .services-container {
        right: 20px; /* Smaller gap on the right */
        left: 20px; /* Anchors it to the left side */
        width: auto; /* Removes the 100% width conflict */
        max-width: none; /* Lets it fill the mobile screen naturally */
        bottom: 20px;
    }
}

/* The Card with Glassmorphism */
.services-card {
    display: block; /* Required since it's now an <a> tag */
    text-decoration: none; /* Removes default link underline */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    color: #ffffff;
    font-family: sans-serif;

    /* Smooth transition for the hover lift & glow */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- PREMIUM HOVER EFFECTS --- */
.services-card:hover {
    background: rgba(255, 255, 255, 0.15); /* Brightens the glass slightly */
    border-color: rgba(
        183,
        156,
        74,
        0.6
    ); /* Shifts border to your brand gold */
    transform: translateY(-4px); /* Subtle lift off the screen */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Soft shadow beneath */
}

/* Image styling */
.card-image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth image zoom */
}

/* Zooms the image gracefully when the card is hovered */
.services-card:hover .card-image {
    transform: scale(1.05);
}

/* Text & Link Styling */
.card-text {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 300;
    opacity: 0.9;
    color: #ffffff;
}

.card-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    transition: color 0.3s ease;
}

/* Shifts text to gold on hover */
.services-card:hover .card-link {
    color: #b79c4a;
}

.arrow {
    display: inline-block;
    margin-right: 8px;
    font-size: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shoots the arrow up and to the right on hover */
.services-card:hover .arrow {
    transform: translate(3px, -3px);
}

/* =========================================
END GALLERY CARD IN HERO
========================================= */

/* =========================================
WHO WE ARE
========================================= */

:root {
    --stf-bg: #f5f2ed;
    --stf-gray: rgba(0, 0, 0, 0.15);
    --stf-gold: #b78f2b;
    --stf-dark: #151716;
    --stf-black: #000000;
}

.stf-section {
    position: relative;
    width: 100%;
    background-color: var(--stf-bg);
    padding: 12vw 0;
    overflow: hidden;
}

.stf-inner {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
}

.stf-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 4rem;
}

.stf-eyebrow-line {
    width: 2.5rem;
    height: 1px;
    background-color: var(--stf-gold);
}

.stf-eyebrow-text {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--stf-gold);
    margin: 0;
}

.stf-statement {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 5.5vw, 5.2rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--stf-dark);
}

/* Each word is wrapped in a span */
.stf-word {
    display: inline;
    color: var(--stf-gray);
    transition: none; /* scroll-driven, no CSS transition needed */
    white-space: pre-wrap;
}

.stf-word.filled {
    color: var(--stf-black);
}

/* Smooth partial fill on the active word */
.stf-word.active {
    color: var(--stf-black);
}

.stf-statement em {
    font-style: italic;
}

.stf-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(183, 143, 43, 0.25);
    flex-wrap: wrap;
    gap: 1.5rem;
}

.stf-meta-tagline {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #999;
    margin: 0;
}

.stf-meta-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stf-gold);
    text-decoration: none;
    transition: gap 0.3s ease;
}

.stf-meta-cta:hover {
    gap: 1.25rem;
}

.stf-meta-cta-arrow {
    display: inline-block;
    width: 1.8rem;
    height: 1px;
    background: var(--stf-gold);
    position: relative;
    transition: width 0.3s ease;
}

.stf-meta-cta-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--stf-gold);
    border-top: 1px solid var(--stf-gold);
    transform: rotate(45deg);
}

.stf-meta-cta:hover .stf-meta-cta-arrow {
    width: 2.4rem;
}

@media (max-width: 768px) {
    .stf-section {
        padding: 18vw 0;
    }
    .stf-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.three-col-section {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding: 60px 40px 0px 40px;
}

.col-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.col-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 20px;
}

.col-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(10%);
    transition: transform 0.4s ease;
}

.col-image img:hover {
    transform: scale(1.03);
}

.col-item h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 10px 0;
    color: #111;
}

.col-item p {
    font-size: 15px;
    line-height: 1.65;
    color: #444;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .three-col-section {
        flex-direction: column;
        padding: 40px 20px;
    }
}

/* =========================================
END WHO WE ARE
========================================= */

/* =========================================
Featured Work Section
========================================= */

:root {
    --base-500: #151716; /* Carbon Black */
    --base-450: #1c1f1e; /* Slightly lighter carbon for card depth */
    --base-350: #a1a1a1;
    --base-250: #cccccc;
    --base-100: #ffffff;
    --brand-gold: #b78f2b; /* Dark Goldenrod */
}

.featured-projects {
    position: relative;
    width: 100%;
    background-color: var(--base-500);
    color: var(--base-100);
    padding: 1rem 0;
    overflow: hidden;
}

.text-reveal {
    display: inline-block;
    line-height: 0.9;
    /* Use a hard stop at 50% to prevent a blurry transition */
    background: linear-gradient(
        to right,
        #b78f2b 0%,
        #b78f2b 50%,
        #ffffff 50%,
        #ffffff 100%
    );
    background-size: 200% 100%;
    /* Start at 100% (completely white) */
    background-position: 100% 0%;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    will-change: background-position;
}

.featured-projects .featured-project-card {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    perspective: 2000px;
    will-change: transform;
}

.featured-projects .featured-project-card-inner {
    position: relative;
    width: 95%;
    height: 90vh;
    padding: 3rem;
    display: flex;
    gap: 3rem;
    border-radius: 2rem;
    background-color: var(--base-450);
    transform-origin: 50% 100%;
    will-change: transform;
    overflow: hidden;
    transition: opacity 0.3s ease;
    border: 1px solid rgba(183, 143, 43, 0.1); /* Subtle gold border */
}

.featured-projects .featured-project-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.featured-projects .featured-project-card-content-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Info Section with Gold Accents */
.featured-projects .featured-project-card-info {
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.featured-projects .featured-project-card-info p {
    color: var(--brand-gold); /* Gold for category */
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.featured-projects .featured-project-card-location {
    color: var(--base-350);
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Tightened Typography */
.featured-projects .featured-project-card-title h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin: 0;
    padding: 0.5rem 0;
    line-height: 0.9; /* Tightened line height */
    letter-spacing: -0.03em;
    font-weight: 700;
}

.featured-projects .featured-project-card-description {
    width: 90%;
    text-align: left;
    color: var(--base-250);
    margin-top: 1.5rem;
    line-height: 1.5;
}

.featured-projects .featured-project-card-img {
    flex: 1.3;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.featured-projects .featured-project-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scroll Overlay */
.featured-projects .featured-project-card-inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--base-500);
    opacity: var(--after-opacity, 0);
    will-change: opacity;
    pointer-events: none;
    z-index: 2;
}

/* ── Pool Card Specific Styles ────────────────────────────── */

.pool-card {
    position: relative;
    text-decoration: none; /* Remove link underline */
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.4s ease;
    background-color: #222522;
    display: block; /* Ensure it behaves like the original div */
}

.pool-card:hover {
    border-color: var(--brand-gold);
}

/* The Liquid Fill Logic */
.pool-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%; /* Start empty */
    background-color: var(--brand-gold);
    transition: height 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}

.pool-card:hover .pool-fill {
    height: 100%; /* Fill to top */
}

/* SVG Waves */
.waves {
    position: absolute;
    top: -40px; /* Sit on top of the rising fill */
    left: 0;
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

.pool-solid-bg {
    width: 100%;
    height: 100%;
    background-color: var(--brand-gold);
}

/* Wave Animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* Content Transitions */
.pool-content-wrapper {
    position: relative;
    z-index: 2; /* Sit above the gold water */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}

.default-content,
.hover-content {
    transition: all 0.5s ease;
}

.hover-content {
    position: absolute;
    left: 1.5rem;
    bottom: -20px; /* Start hidden below */
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hover-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--base-500); /* Dark text on gold background */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hover-arrow {
    color: var(--base-500);
    font-size: 1.2rem;
}

/* Hover States for Content */
.pool-card:hover .default-content {
    opacity: 0;
    transform: translateY(-20px);
}

.pool-card:hover .hover-content {
    opacity: 1;
    bottom: 1.5rem; /* Slide up into position */
}

@media (max-width: 1000px) {
    .featured-projects .featured-project-card-inner {
        flex-direction: column;
        height: 85vh;
        padding: 2rem;
    }
    .featured-projects .featured-project-card-title h2 {
        line-height: 1;
        text-align: center;
        width: 100%;
    }
    .featured-projects .featured-project-card-info {
        text-align: center;
        width: 100%;
    }
}

.featured-projects-header {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    padding: 6rem 2rem 5rem;
    background-color: var(--base-500);
}

.featured-projects-eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--base-350);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.featured-projects-heading {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 700;
    color: #f0ece4;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
}

@media (max-width: 1000px) {
    .featured-projects-header {
        padding: 4rem 1.5rem 3rem;
    }
}

/* ── Outro Section ───────────────────────────────────────── */
.featured-projects-outro {
    position: relative;
    z-index: 2;
    background-color: var(--base-500);
    width: 100%;
    padding: 8rem 4%;
}

.featured-projects-outro-inner {
    display: flex;
    align-items: center;
    gap: 6rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Gallery grid */
.featured-projects-outro-gallery {
    flex: 1;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.outro-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.outro-gallery-col--top {
    margin-top: 0;
}

.outro-gallery-col--bottom {
    margin-top: 3rem; /* offset for stagger effect */
}

.outro-gallery-item {
    border-radius: 1.2rem;
    overflow: hidden;
    background-color: var(--base-450);
    aspect-ratio: 4 / 3;
}

.outro-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Badge tile */
.outro-gallery-item--badge {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background-color: #222522;
    border: 1px solid rgba(183, 143, 43, 0.15);
    aspect-ratio: 4 / 3;
}

.outro-badge-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--base-100);
    line-height: 1;
    letter-spacing: -0.03em;
}

.outro-badge-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--base-350);
    margin-top: 0.4rem;
}

/* Text side */
.featured-projects-outro-text {
    flex: 1;
}

.featured-projects-outro-text p {
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    font-weight: 500;
    color: #f0ece4;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 2.5rem;
}

/* CTA Button */
.outro-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.8rem 1rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: transparent;
    color: var(--base-100);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition:
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.outro-cta:hover {
    border-color: var(--brand-gold);
    background-color: rgba(183, 143, 43, 0.08);
}

.outro-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: #2a2d2c;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
    .featured-projects-outro {
        padding: 5rem 1.5rem;
    }

    .featured-projects-outro-inner {
        flex-direction: column;
        gap: 3rem;
    }

    .featured-projects-outro-gallery {
        width: 100%;
    }
}

/* =========================================
END Featured Work Section
========================================= */

/* =========================================
START OUR PROCESS Section
========================================= */
:root {
    --bg-bone: #f5f3ee;
    --text-dark: #1a1a1a;
    --box-dark: #0a0a0a;
    --accent-gold: #b78f2b;
}

.process-section {
    padding: 150px 0;
    background-color: var(--bg-bone);
    color: var(--text-dark);
    overflow: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- HEADER --- */
.process-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
}

.process-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #666;
    display: block;
    margin-bottom: 20px;
}

.process-title {
    font-family: serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.01em;
}

.btn-primary-ghost {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    transition:
        background 0.4s ease,
        color 0.4s ease;
    margin-bottom: 10px;
}

.btn-primary-ghost:hover {
    background: var(--text-dark);
    color: var(--bg-bone);
}

/* --- THE BLACK BOX --- */
.process-box {
    background: var(--box-dark);
    border-radius: 12px;
    display: flex;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
}

/* --- LEFT: TEXT CONTENT --- */
.process-text-col {
    width: 45%;
    padding: 80px 2vw 80px 4vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    position: relative;
    z-index: 2;
}

.process-slides-wrapper {
    position: relative;
    flex-grow: 1;
}

.process-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 12%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.process-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* THE GOLDEN SPLASH: Step Label */
.step-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--accent-gold);
    background: rgba(183, 143, 43, 0.1);
    border: 1px solid rgba(183, 143, 43, 0.2);
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 25px;
}

.step-title {
    font-family: serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 25px;
}

.step-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #bbb;
}

/* --- CONTROLS --- */
.process-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
}

.nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: rgba(183, 143, 43, 0.1);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.process-pagination {
    display: flex;
    gap: 8px;
    margin-left: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.dot.active {
    background: var(--accent-gold);
    transform: scale(1.3);
}

/* --- RIGHT: MASKED IMAGE --- */
.process-image-col {
    width: 60%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}

.process-img-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: opacity, transform;
}

.process-img-layer.active {
    opacity: 1;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .process-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .process-box {
        flex-direction: column;
        min-height: auto;
    }
    .process-text-col {
        width: 100%;
        padding: 50px 5vw;
    }
    .process-slide {
        padding-right: 0;
    }
    .process-image-col {
        position: relative;
        width: 100%;
        height: 400px;
        clip-path: none;
    }
}

/* =========================================
END OUR PROCESS Section
========================================= */

/* =========================================
Portfolio Page Section
========================================= */
/* --- BASE COLORS --- */
:root {
    --bg-bone: #f5f3ee;
    --border-line: #d5d2cb;
    --text-dark: #1a1a1a;
    --text-muted: #888580;
    --brand-gold: #b79c4a;
}

.portfolio-controls-section,
.portfolio-grid-section {
    width: 100%;
    background-color: var(--bg-bone);
    color: var(--text-dark);
}

/* --- THE FILTER & STATS BAR --- */
.portfolio-controls-section {
    border-top: 1px solid var(--border-line);
    border-bottom: 1px solid var(--border-line);
}

.portfolio-controls-inner {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* Handles stacking the two filter rows */
.filters-wrapper {
    display: flex;
    flex-direction: column;
    padding: 30px 4vw;
    gap: 30px;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.control-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-weight: 600;
}

/* Location Buttons */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.filter-btn {
    background: transparent;
    border: none;
    font-family: serif;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    color: var(--text-dark);
}

/* NEW: Services Checkboxes (Luxury Pills) */
.filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.custom-checkbox {
    cursor: pointer;
    user-select: none;
}

/* Hide the native checkbox completely */
.service-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* The visual pill */
.checkbox-pill {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--border-line);
    border-radius: 30px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

/* Hover state */
.custom-checkbox:hover .checkbox-pill {
    border-color: var(--text-dark);
    color: var(--text-dark);
}

/* Checked state */
.service-checkbox-input:checked ~ .checkbox-pill {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #ffffff;
    font-weight: 600;
}

.stats-col {
    padding: 30px 4vw;
    border-left: 1px solid var(--border-line);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 250px;
}

.huge-number {
    font-family: serif;
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 300;
    line-height: 0.8;
    color: var(--text-dark);
}

/* --- THE GRID --- */
.portfolio-grid-section {
    padding-bottom: 100px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--border-line);
    gap: 1px;
    border-bottom: 1px solid var(--border-line);
}

.project-card {
    background-color: var(--bg-bone);
    text-decoration: none;
    color: var(--text-dark);
    display: block;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
}

.card-inner {
    padding: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-header {
    margin-bottom: 30px;
}

.project-number {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.project-image-wrap {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-bottom: 30px;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-img-placeholder {
    width: 100%;
    height: 100%;
    background: #e9e6df;
}

.project-card:hover .project-img {
    transform: scale(1.05);
}

.project-info-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-title {
    font-family: serif;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
}

.project-city-bottom {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-controls-inner {
        flex-direction: column;
    }
    .stats-col {
        border-left: none;
        border-top: 1px solid var(--border-line);
        align-items: flex-start;
    }
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .filters-wrapper {
        gap: 40px;
    }
}

/* =========================================
END Portfolio Page Section
========================================= */

/* =========================================
Single Service Page Section
========================================= */

html,
body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

.service-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    /*     left: 50%; */
    /*     transform: translateX(-50%); */
    height: 100vh;
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* OVERRIDE OXYGEN DEFAULTS TO FIX THE GAP */
    padding: 0 !important;
    margin: 0 !important;
}

.pin-spacer {
    max-width: 100vw !important;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    will-change: transform, opacity;
}

.hero-fade-overlay {
    position: absolute;
    inset: 0;
    background: #f5f2ec; /* Ensure this matches your next section's background */
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0 4vw 10vh 4vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-top {
    margin-bottom: 4vh; /* Locks it perfectly above the title */
    display: flex;
    font-size: 1.2rem;
    font-weight: 500;
    will-change: transform, opacity;
}

.service-title-split {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: clamp(4rem, 12vw, 15rem);
    font-family: serif;
    font-style: italic;
    font-weight: 300;
    line-height: 0.9;
    margin: 0;
    white-space: nowrap;
}

.title-left,
.title-right {
    display: inline-block;
    will-change: transform, opacity;
}

/* --- MOBILE RESPONSIVE HERO --- */
@media (max-width: 768px) {
    .service-hero {
        overflow: hidden !important; /* Force crop the text as it slides away */
    }

    .hero-content {
        padding: 0 5vw 8vh 5vw;
    }

    .service-title-split {
        order: 1;
        flex-direction: column;
        align-items: center;
        font-size: 16vw; /* Scaled down so 10-letter words fit the screen */
        line-height: 0.95;
    }

    .title-left,
    .title-right {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Use padding instead of margin so it doesn't break the container width */
    .title-right {
        padding-left: 15%;
        margin-left: 0;
    }

    .hero-top {
        order: 2;
        margin-top: 5vh;
        margin-bottom: 0;
        justify-content: center;
        width: 100%;
        text-align: center;
    }
}

.service-intro-section {
    position: relative;
    z-index: 10;
    background-color: #f5f2ec; /* MUST match your .hero-fade-overlay color */
    padding: 15vh 5vw;
    margin-top: 0 !important; /* Forces it flush against the hero */
}

.intro-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 6fr; /* Left image is 40%, Right text is 60% */
    gap: 8vw;
    align-items: center;
}

/* --- IMAGE STYLING --- */
.intro-img-wrapper {
    width: 100%;
    /* Create a tall, editorial portrait ratio */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    /* Hidden state for GSAP unmasking */
    clip-path: inset(100% 0% 0% 0%);
}

.intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

/* --- TEXT STYLING --- */
.intro-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro-title {
    font-family: serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
    /* Hidden state for GSAP */
    opacity: 0;
    transform: translateY(50px);
}

.intro-body {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
    color: #4a4a4a;
    font-weight: 400;
    max-width: 90%;
    /* Hidden state for GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.intro-body p {
    margin-bottom: 1.5rem;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .intro-container {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 50px;
    }

    .intro-text-col {
        order: 1; /* Puts text ABOVE the image on mobile */
    }

    .intro-image-col {
        order: 2; /* Puts image BELOW the text on mobile */
    }

    .intro-body {
        max-width: 100%;
    }
}

.horizontal-scroll-section {
    width: 100%;
    min-height: 100vh;
    background: #1a1a1a;
    overflow: hidden;
    position: relative;
    padding: clamp(5rem, 8vw, 8rem) 0 !important;
    margin: 0 !important;
}

/* --- BACKGROUND LINES --- */
.moving-lines-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    overflow: hidden;
}

.moving-lines-bg svg {
    width: 200vw;
    height: 100%;
    min-height: 100vh;
    stroke: #ffffff;
    stroke-width: 2px;
    fill: none;
    animation: panLines 60s linear infinite alternate;
}

@keyframes panLines {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-20%);
    }
}

/* --- THE CONTAINER --- */
.horizontal-container {
    width: 100%;
    min-height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.horizontal-wrapper {
    width: min(1400px, 90vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: clamp(3rem, 7vw, 7rem);
    height: auto;
    align-items: stretch;
    padding: 0;
    transform: none !important;
}

.horizontal-item {
    position: relative;
    flex-shrink: 1;
}

/* --- INTRO SLIDE --- */
.intro-slide {
    width: 100%;
    max-width: 700px;
    color: #fff;
    margin: 0 0 clamp(1rem, 3vw, 3rem) 0;
}

.intro-slide h2 {
    font-family: serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-style: italic;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1;
}

.intro-slide p {
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    line-height: 1.5;
}

/* --- VERTICAL STAGGER PATTERN --- */
/* Item 1: Large, left aligned */
.work-slide:nth-child(4n + 1) {
    width: min(850px, 100%);
    height: clamp(420px, 60vh, 700px);
    align-self: flex-start;
    margin: 0;
}

/* Item 2: Smaller, right aligned */
.work-slide:nth-child(4n + 2) {
    width: min(560px, 80%);
    height: clamp(320px, 45vh, 520px);
    align-self: flex-end;
    margin: 0;
}

/* Item 3: Medium, centered */
.work-slide:nth-child(4n + 3) {
    width: min(700px, 90%);
    height: clamp(360px, 52vh, 600px);
    align-self: center;
    margin: 0;
}

/* Item 4: Smaller, left offset */
.work-slide:nth-child(4n + 4) {
    width: min(520px, 75%);
    height: clamp(300px, 42vh, 480px);
    align-self: flex-start;
    margin-left: 8vw;
}

/* Hide/remove the horizontal spacer */
.outro-slide {
    display: none;
}

/* --- IMAGE & TEXT STYLING --- */
.item-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0.2;
    transform: scale(0.9);
    will-change: transform, opacity;
}

.sample-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sample-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px 20px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    will-change: transform, opacity;
}

.sample-info p {
    margin: 0;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    font-family: serif;
    font-weight: 300;
    line-height: 1.3;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .horizontal-scroll-section {
        min-height: auto;
        padding: 4rem 0 !important;
    }

    .horizontal-wrapper {
        width: 90vw;
        gap: 2.5rem;
    }

    .intro-slide {
        width: 100%;
        max-width: none;
    }

    .work-slide:nth-child(n) {
        width: 100%;
        height: 55vh;
        align-self: center;
        margin: 0;
    }

    .sample-info {
        padding: 60px 20px 20px 20px;
    }
}

/* =========================================
END Single Service Page Section
========================================= */

/* =========================================
START ABOUT PAGE
========================================= */

:root {
  /* Fallback colors - adjust these to match your site's dark/light theme */
  --base-100: #ffffff;
  --base-350: #a0a0a0;
  --base-450: #1a1a1a; 
  --base-500: #000000;
  --accent-gold: #b79c4a;
}

.how-we-work {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  color: var(--base-100);
  display: flex;
  gap: 2rem;
}

.how-we-work .how-we-work-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
}

.how-we-work .how-we-work-header-content {
  padding-top: 10rem;
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.how-we-work .how-we-work-header-content .how-we-work-header-callout p {
  color: var(--base-350);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.how-we-work .how-we-work-header-content h3 {
  color: var(--base-100);
  margin-bottom: 2rem;
  font-size: 2.5rem;
  line-height: 1.2;
}

.how-we-work .how-we-work-steps {
  display: flex;
  gap: 1rem;
}

.how-we-work .how-we-work-step {
  position: relative;
  padding: 1.25rem;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(102, 95, 86, 0.65);
  border-radius: 1rem;
  transition: all 0.3s ease;
  overflow: hidden;
  color: var(--base-100);
}

.how-we-work .how-we-work-step p {
  font-size: 1.125rem;
  font-weight: 550;
  margin: 0;
}

.how-we-work .how-we-work-step-label {
  position: absolute;
  left: 2rem;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s ease;
  will-change: transform;
  white-space: nowrap;
}

.how-we-work .how-we-work-step-index {
  position: relative;
  transition: all 0.3s ease;
  will-change: transform;
}

/* Updated active state using the requested accent color */
.how-we-work .how-we-work-step.active {
  width: 8rem;
  color: #ffffff; /* Keep text white for contrast */
  background-color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.how-we-work .how-we-work-step.active .how-we-work-step-index {
  transform: translateX(24px);
}

.how-we-work .how-we-work-step.active .how-we-work-step-label {
  opacity: 1;
  transform: translateX(0);
}

.how-we-work .how-we-work-cards {
  flex: 2;
  position: relative;
  margin-left: 60%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 8rem 0;
  will-change: transform;
}

.how-we-work .how-we-work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--base-450);
  padding: 1rem;
  border-radius: 1rem;
}

.how-we-work .how-we-work-card-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.75rem;
}

.how-we-work .how-we-work-card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}

.how-we-work .how-we-work-card-index-label {
  margin-bottom: 0.5rem;
}

/* Applied the accent color to the card headings */
.how-we-work .how-we-work-card-index-label h3 {
  color: var(--accent-gold);
  font-size: 2rem;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
  margin: 0;
}

.how-we-work .how-we-work-card-copy {
  color: var(--base-350);
  padding: 1rem;
}

.how-we-work .how-we-work-card-copy p {
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .how-we-work {
    flex-direction: column;
    min-height: auto;
  }

  .how-we-work .how-we-work-header {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .how-we-work .how-we-work-steps {
    display: none;
  }

  .how-we-work .how-we-work-header-content {
    padding-top: 2rem;
    width: 100%;
    padding-bottom: 1rem;
  }

  .how-we-work .how-we-work-header-content h3 {
    font-size: 2rem;
    margin-bottom: 0;
  }

  .how-we-work .how-we-work-cards {
    margin-left: 0;
    padding: 1rem 0;
  }
}

/* =========================================
              END ABOUT PAGE
========================================= */

/* =========================================
              START CONTACT PAGE
========================================= */
:root {
    --brand-dark: #1a2a1d; /* Deep Forest Green */
    --brand-accent: #c5a880; /* Earthy Gold/Sand */
    --text-main: #333;
    --text-light: #666;
    --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}

.parallax-divider {
    /* The "15% of the viewport height" requirement */
    height: 35vh;
    min-height: 120px; /* Ensures it doesn't get too tiny on small phones */
    
    /* Parallax Magic */
    background-image: url('/wp-content/uploads/2026/04/pool-party-fw.jpg'); 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Design Flourish */
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.1); /* Subtle depth effect */
}

/* Ensure smooth scrolling on mobile devices */
@media (max-width: 1024px) {
    .parallax-divider {
        background-attachment: scroll;
        height: 12vh;
    }
}

.hero-services {
    padding: 80px 20px;
    background: #f5f3ee;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    justify-content: center;
}

.hero-container {
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left Content Styles */
.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 4rem;
    margin-bottom: 10px;
    color: var(--brand-dark);
}

.hero-subtitle {
    font-family: monospace;
    color: var(--text-light);
    margin-bottom: 50px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    display: inline-block;
}

.service-steps {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.step {
    display: flex;
    gap: 25px;
}

.step-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 1;
}

.step-text h3 {
    margin: 0 0 8px 0;
    font-size: 1.85rem;
    color: var(--brand-dark);
}

.step-text p {
    margin: 0;
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1.6;
}

.step-text a {
    color: #e67e22; /* Accent color for links */
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Right Card Styles */
.contact-card {
    background: white;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.card-label {
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #aaa;
    margin-bottom: 5px;
}

.phone-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phone-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.phone-icon {
    background: black;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-widget {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.widget-tabs {
    display: flex;
    background: #f5f5f5;
}

.tab {
    flex: 1;
    padding: 15px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: #888;
}

.tab.active {
    background: white;
    color: black;
}

.widget-placeholder {
    padding: 40px;
    min-height: 200px;
}

.placeholder-line {
    height: 12px;
    background: #f0f0f0;
    margin-bottom: 15px;
    border-radius: 5px;
}

.placeholder-line.short { width: 40%; }

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 30px;
}

.placeholder-grid span {
    height: 30px;
    background: #f9f9f9;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-container {
        grid-template-columns: 1fr;
    }
    .hero-title { font-size: 2.5rem; }
}

.widget-panel {
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.redirect-notice {
    text-align: center;
    padding: 40px 10px;
}

.redirect-notice p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.btn-jump {
    display: inline-block;
    padding: 12px 25px;
    background: var(--brand-dark);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-jump:hover {
    background: var(--brand-accent);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}


:root {
    --brand-dark: #1a2a1d;
    --brand-gold: #c5a880; /* Your specific brand gold */
    --brand-gold-hover: #d4bc9a; /* A slightly lighter shimmer gold */
}

/* 1. The Card Motion */
.contact-card {
    background: white;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    
    /* Smooth transition for the lift effect */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* 2. Hover State: Lift and Shadow */
.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 3. The Phone Icon Transition */
.phone-icon {
    background: var(--brand-dark);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Smoothly change background color and rotate icon */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-card:hover .phone-icon {
    background-color: var(--brand-gold);
    transform: rotate(15deg) scale(1.1);
}

/* 4. Subtle Gold Border Glow */
.contact-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    border: 2px solid var(--brand-gold);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.contact-card:hover::after {
    opacity: 0.3; /* Soft gold "halo" on hover */
}

/* 5. Gold treatment for the Phone Number */
.contact-card:hover .phone-number {
    color: var(--brand-gold);
    transition: color 0.3s ease;
}


/* =========================================
              END CONTACT PAGE
========================================= */

/* =========================================
              START CAREERS PAGE
========================================= */
/* =========================================
   START CAREERS PAGE - LUXURY STYLE
========================================= */

:root {
  --careers-bg: #f5f3ee;
  --careers-dark: #151716;
  --careers-dark-soft: #1c1f1e;
  --careers-text: #1a1a1a;
  --careers-muted: #77736b;
  --careers-border: #d8d1c4;
  --careers-gold: #b79c4a;
  --careers-white: #f7f3ec;
}

/* Main Editorial Section */
.careers-luxury-section {
  background: var(--careers-bg);
  color: var(--careers-text);
  padding: clamp(90px, 12vw, 165px) 5vw clamp(80px, 10vw, 130px);
  overflow: hidden;
}

.careers-luxury-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Eyebrow */
.careers-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(45px, 6vw, 80px);
}

.careers-eyebrow-line {
  width: 2.5rem;
  height: 1px;
  background: var(--careers-gold);
}

.careers-eyebrow p {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--careers-gold);
}

/* Layout */
.careers-luxury-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(50px, 8vw, 120px);
  align-items: start;
}

/* Left Headline */
.careers-heading-col h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--careers-text);
  max-width: 740px;
}

/* Right Copy */
.careers-copy-col {
  border-left: 1px solid rgba(183, 156, 74, 0.28);
  padding-left: clamp(28px, 4vw, 70px);
}

.careers-copy-col p {
  margin: 0 0 1.45rem;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.75;
  color: #47433d;
  font-weight: 400;
}

.careers-copy-col .careers-lead {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.4vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--careers-text);
  margin-bottom: 2rem;
}

/* Application Info Card */
.careers-application-card {
  margin-top: clamp(35px, 5vw, 60px);
  padding: clamp(24px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(183, 156, 74, 0.25);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(21, 23, 22, 0.06);
}

.careers-application-card p {
  margin-bottom: 0.8rem;
}

.careers-application-card p:last-child {
  margin-bottom: 0;
}

.careers-application-card a {
  color: var(--careers-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--careers-gold);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.careers-application-card a:hover {
  color: var(--careers-gold);
  border-color: var(--careers-text);
}

.careers-application-card strong {
  color: var(--careers-text);
}

/* Dark CTA Section */
.careers-luxury-cta {
  background: var(--careers-dark);
  color: var(--careers-white);
  padding: clamp(55px, 7vw, 90px) 5vw;
  border-top: 1px solid rgba(183, 156, 74, 0.18);
}

.careers-luxury-cta-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.careers-cta-label {
  display: block;
  margin-bottom: 1rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--careers-gold);
}

.careers-luxury-cta h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--careers-white);
}

/* Button */
.careers-luxury-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 190px;
  padding: 1.05rem 1.2rem 1.05rem 1.7rem;
  border-radius: 999px;
  border: 1px solid rgba(183, 156, 74, 0.55);
  background: transparent;
  color: var(--careers-white);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.careers-luxury-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--careers-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}

.careers-luxury-button span {
  position: relative;
  z-index: 1;
}

.careers-luxury-button:hover {
  color: var(--careers-dark);
  border-color: var(--careers-gold);
  transform: translateY(-2px);
}

.careers-luxury-button:hover::before {
  transform: scaleX(1);
}

.careers-button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, background 0.3s ease;
}

.careers-luxury-button:hover .careers-button-arrow {
  transform: translate(3px, -3px);
  background: rgba(21, 23, 22, 0.12);
}

/* Responsive */
@media (max-width: 980px) {
  .careers-luxury-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .careers-copy-col {
    border-left: none;
    padding-left: 0;
    padding-top: 35px;
    border-top: 1px solid rgba(183, 156, 74, 0.28);
  }

  .careers-heading-col h1 {
    max-width: 900px;
  }

  .careers-luxury-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .careers-luxury-section {
    padding: 75px 24px 70px;
  }

  .careers-heading-col h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
  }

  .careers-copy-col .careers-lead {
    font-size: 1.65rem;
  }

  .careers-application-card {
    border-radius: 14px;
  }

  .careers-luxury-cta {
    padding: 55px 24px;
  }

  .careers-luxury-button {
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================================
   END CAREERS PAGE - LUXURY STYLE
========================================= */
/* =========================================
              END CAREERS PAGE
========================================= */

/* =========================================
START Footer
========================================= */




/* =========================================
   MOBILE MENU OVERRIDES (Max-width 768px)
========================================= */
@media (max-width: 768px) {

  /* 1. Push the entire button container to the right */
  .header-actions {
    margin-left: auto; /* Forces the container to the far right of the flex row */
    justify-content: flex-end;
    margin-top: -30px;
  }

  /* 2. Reshape the "Book a Call" button into a square */
  .book-call-button {
    width: 52px; /* Match the 52px height to make a perfect square */
    padding: 0; 
    font-size: 0; /* Hides the naked text without needing HTML changes */
  }

  /* 3. Hide the original up-right arrow */
  .arrow-up {
    display: none;
  }

  /* 4. Insert a modern Phone SVG Icon */
  .book-call-button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor; /* Automatically inherits your black and gold hover colors! */
    
    /* Phone SVG Mask */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") no-repeat center / contain;
  }
}

#sg-calendly-container, 
#sg-calendly-container iframe {
    pointer-events: auto !important;
    position: relative;
    z-index: 999999; /* Ensure it stays on top of any parallax layers */
}

/* Ensure the widget-content doesn't have an overlay */
.widget-content {
    pointer-events: auto !important;
}.pool-opening-hero {
  position: relative;
  min-height: 80vh;
  padding: clamp(120px, 14vw, 200px) 5vw clamp(60px, 8vw, 100px);
  overflow: hidden;

  background-image: url("/wp-content/uploads/2026/05/pool-opening-services.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f7f3ec;
}

.service-hero-long-title .service-title-split {
  font-size: clamp(2.5rem, 7.2vw, 8.5rem);
  line-height: 0.9;
}

.service-hero-long-title .title-left,
.service-hero-long-title .title-right {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .service-hero-long-title .service-title-split {
    font-size: clamp(2.6rem, 14vw, 5rem);
    line-height: 0.95;
  }

  .service-hero-long-title .title-left,
  .service-hero-long-title .title-right {
    white-space: normal;
  }
}

/* =========================================
   BARRIER REEFS POOL MODELS START 
========================================= */
.pool-models-grid {
    padding: 80px 5vw;
    background: #f6f4ef;
    width: 100%;
}

.models-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* The screenshot shows them flush against each other with borders */
    border: 4px solid #555; /* Thick outer border like the wireframe */
    background: #555; /* Acts as the border color between gaps */
    gap: 4px; /* Creates the inner borders */
}

.pool-card {
    background: #e9e6df; /* The specific beige from the screenshot */
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

.pool-img-wrap {
    width: 100%;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
}

.pool-img-wrap img {
    max-width: 80%;
    height: auto;
    display: block;
    mix-blend-mode: multiply; /* Helps the CAD drawing blend into the beige if it isn't transparent */
}

.pool-title {
    text-align: center;
    font-family: 'Oswald', sans-serif; /* Update to match your exact condensed font */
    font-size: 1.8rem;
    font-weight: 500;
    color: #2b4535; /* Dark green text from screenshot */
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* --- THE TABLE --- */
.pool-table-wrap {
    width: 100%;
    flex-grow: 1; /* Pushes the button to the bottom evenly */
}

.pool-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
    color: #333;
}

.pool-table th {
    background: #fff;
    padding: 15px 20px;
    font-weight: 700;
}

.pool-table td {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Alternating Row Colors */
.pool-table tbody tr:nth-child(odd) {
    background: #fff;
}
.pool-table tbody tr:nth-child(even) {
    background: #f8f8f8; /* Very light gray */
}

.pool-note {
    font-size: 0.75rem;
    color: #666;
    padding: 15px 20px;
    font-style: italic;
}

/* --- ACTION BUTTON --- */
.pool-action {
    padding: 20px;
    text-align: center;
    margin-top: auto;
}

.btn-view-model {
    display: inline-block;
    padding: 12px 24px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: background 0.3s ease;
}

.btn-view-model:hover {
    background: #d2af37; /* Luxury gold hover */
    color: #1a1a1a;
}

/* --- MOBILE --- */
@media (max-width: 1024px) {
    .models-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .models-wrapper {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   END BARRIER REEFS POOL MODELS PAGE
========================================= */
/* =========================================
   Gallery Page START For Location Dropdown
========================================= */
.location-dropdown-group {
    max-width: 320px;
}

.location-select-wrap {
    position: relative;
    width: 100%;
    margin-top: 0.65rem;
}

.location-filter-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(35, 32, 28, 0.18);
    background: #fffdf8;
    color: #221f1a;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.95rem 3rem 0.95rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(35, 32, 28, 0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.location-filter-select:hover {
    border-color: rgba(35, 32, 28, 0.32);
    background: #ffffff;
}

.location-filter-select:focus {
    outline: none;
    border-color: rgba(35, 32, 28, 0.55);
    box-shadow: 0 0 0 4px rgba(35, 32, 28, 0.08);
}

.location-select-arrow {
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7c776f;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-label {
    display: block;
}
/* =========================================
   Gallery END
========================================= */

/* =========================================
   FEATURED PROJECTS START
========================================= */

:root {
  --featured-cream: #f2eee3;
  --featured-cream-soft: #efe6d2;
  --featured-muted: #b8aa8f;
  --featured-gold: #c9a15e;
  --featured-dark: #0f1114;
  --featured-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --featured-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --featured-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.featured-project {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--featured-dark);
  color: var(--featured-cream-soft);
}

.featured-project__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  z-index: 1;
}

.featured-project__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.45) 28%,
      rgba(0, 0, 0, 0.18) 58%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.22) 38%,
      rgba(0, 0, 0, 0.04) 100%
    );
}

.featured-project__top {
  position: absolute;
  top: clamp(24px, 4vw, 44px);
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.featured-project__label,
.featured-project__counter {
  margin: 0;
  font-family: var(--featured-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--featured-muted);
}

.featured-project__counter {
  font-size: 12px;
  letter-spacing: 2px;
}

.featured-project__counter span {
  color: var(--featured-gold);
}

.featured-project__content {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  bottom: clamp(48px, 8vw, 82px);
  z-index: 3;
  width: min(580px, calc(100% - 48px));
}

.featured-project__title {
  margin: 0 0 10px;
  font-family: var(--featured-serif);
  font-size: clamp(46px, 6vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fffaf1;
}

.featured-project__location {
  margin: 0 0 24px;
  font-family: var(--featured-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--featured-muted);
}

.featured-project__description {
  max-width: 520px;
  margin: 0 0 30px;
  font-family: var(--featured-sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(239, 230, 210, 0.88);
}

.featured-project__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.featured-project__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--featured-cream-soft);
  font-family: var(--featured-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.featured-project__link span {
  transition: transform 0.25s ease;
}

.featured-project__link:hover {
  color: var(--featured-gold);
}

.featured-project__link:hover span {
  transform: translateX(4px);
}

.featured-project__link--secondary {
  color: var(--featured-muted);
  font-weight: 500;
}

/* Testimonial Modal */

.testimonial-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.testimonial-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.testimonial-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 17, 20, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.testimonial-modal__content {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  padding: clamp(32px, 5vw, 60px);
  background: #1a1d22;
  border: 1px solid rgba(239, 230, 210, 0.12);
  color: var(--featured-cream-soft);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.testimonial-modal__video {
  position: relative;
  z-index: 5;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 32px;
  background: #0f1114;
  border: 1px solid rgba(239, 230, 210, 0.12);
  overflow: hidden;
  pointer-events: auto;
}

.testimonial-modal__video iframe {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: auto;
}

.testimonial-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--featured-muted);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.testimonial-modal__eyebrow {
  margin: 0 0 22px;
  font-family: var(--featured-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--featured-gold);
}


/* .testimonial-modal__play {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(239, 230, 210, 0.38);
  background: rgba(255, 255, 255, 0.08);
  color: var(--featured-cream-soft);
  font-size: 24px;
  cursor: pointer;
} */

.testimonial-modal__quote {
  margin: 0 0 24px;
  font-family: var(--featured-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.38;
  color: var(--featured-cream-soft);
}

.testimonial-modal__name {
  margin: 0 0 28px;
  font-family: var(--featured-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--featured-muted);
}

.testimonial-modal__link {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--featured-cream-soft);
  font-family: var(--featured-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
}

.testimonial-modal__link:hover {
  color: var(--featured-gold);
}

@media (max-width: 767px) {
  .featured-project {
    min-height: 680px;
  }

  .featured-project__top {
    top: 24px;
  }

  .featured-project__label,
  .featured-project__counter {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .featured-project__content {
    bottom: 42px;
  }

  .featured-project__description {
    max-width: 92%;
  }

  .featured-project__actions {
    gap: 20px;
  }
}

/* =========================================
   FEATURED PROJECTS END
========================================= */





/* =========================================
   START BLOG SINGLE POST
========================================= */
:root {
    --bls-bg: #f5f3ee;
    --bls-bg-soft: #ede9e0;
    --bls-dark: #151716;
    --bls-dark-soft: #1c1f1e;
    --bls-gold: #b79c4a;
    --bls-gold-deep: #b78f2b;
    --bls-text: #1a1a1a;
    --bls-text-body: #2c2a26;
    --bls-muted: #77736b;
    --bls-border: #d8d1c4;
    --bls-white: #f7f3ec;
}

/* =========================================
   READING PROGRESS BAR
========================================= */
.bls-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(183, 156, 74, 0.1);
    z-index: 1000;
    pointer-events: none;
}

.bls-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--bls-gold);
    transition: width 0.1s linear;
    will-change: width;
}

/* =========================================
   1. ARTICLE HEADER
========================================= */
.bls-header {
    background: var(--bls-bg);
    padding: clamp(100px, 14vw, 160px) 5vw clamp(50px, 6vw, 80px);
    position: relative;
    overflow: hidden;
}

.bls-header::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50%;
    height: 70%;
    background: radial-gradient(circle, rgba(183, 156, 74, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.bls-header-inner {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.bls-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bls-muted);
    text-decoration: none;
    transition: color 0.3s, gap 0.3s;
}

.bls-back-link:hover {
    color: var(--bls-gold);
    gap: 0.8rem;
}

.bls-back-arrow {
    transition: transform 0.3s;
}

.bls-back-link:hover .bls-back-arrow {
    transform: translateX(-3px);
}

.bls-category-pill {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(183, 156, 74, 0.4);
    background: rgba(183, 156, 74, 0.08);
    border-radius: 999px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bls-gold);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.bls-category-pill:hover {
    background: var(--bls-gold);
    color: #fff;
    border-color: var(--bls-gold);
}

.bls-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--bls-text);
    margin: 0 0 1.5rem;
}

.bls-dek {
    font-family: Georgia, serif;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-style: italic;
    line-height: 1.5;
    color: #47433d;
    margin: 0 auto 2rem;
    max-width: 720px;
}

.bls-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bls-muted);
}

.bls-meta-date {
    color: var(--bls-text);
    font-weight: 700;
}

.bls-meta-dot {
    color: var(--bls-gold);
}

.bls-meta-author {
    color: var(--bls-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.bls-meta-author:hover {
    color: var(--bls-gold);
}

/* =========================================
   2. FEATURED IMAGE
========================================= */
.bls-featured {
    background: var(--bls-bg);
    padding: 0 5vw clamp(60px, 8vw, 100px);
    margin: 0;
}

.bls-featured-img {
    display: block;
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(21, 23, 22, 0.12);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* =========================================
   3. ARTICLE BODY
========================================= */
.bls-body {
    background: var(--bls-bg);
    padding: 0 5vw clamp(80px, 11vw, 130px);
}

.bls-body-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

/* --- Sidebar --- */
.bls-sidebar {
    position: relative;
}

.bls-sidebar-sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.bls-sidebar-label {
    display: block;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bls-gold);
    margin-bottom: 1.2rem;
    font-weight: 700;
}

/* TOC */
.bls-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--bls-border);
}

.bls-toc-item {
    padding: 0;
    margin: 0;
}

.bls-toc-link {
    display: block;
    padding: 0.55rem 0 0.55rem 1rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--bls-muted);
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s, padding 0.3s;
}

.bls-toc-link:hover {
    color: var(--bls-text);
    padding-left: 1.2rem;
}

.bls-toc-link.is-active {
    color: var(--bls-gold);
    border-left-color: var(--bls-gold);
    font-weight: 700;
}

/* Share buttons */
.bls-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bls-share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--bls-border);
    background: transparent;
    color: var(--bls-muted);
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.3s,
        border-color 0.3s,
        background 0.3s,
        transform 0.3s;
}

.bls-share-btn:hover {
    color: #fff;
    background: var(--bls-gold);
    border-color: var(--bls-gold);
    transform: translateY(-2px);
}

.bls-share-btn svg {
    display: block;
}

.bls-copied-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: var(--bls-dark);
    color: #fff;
    font-family: "Courier New", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    white-space: nowrap;
}

.bls-share-btn.is-copied .bls-copied-tooltip {
    opacity: 1;
}

/* =========================================
   ARTICLE CONTENT TYPOGRAPHY
========================================= */
.bls-article-content {
    max-width: 100%;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--bls-text-body);
}

.bls-article-content > *:first-child {
    margin-top: 0;
}

.bls-article-content > *:last-child {
    margin-bottom: 0;
}

/* First paragraph drop cap */
.bls-article-content > p:first-of-type::first-letter {
    font-family: Georgia, serif;
    font-size: 4.5em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.1em 0 -0.05em;
    color: var(--bls-gold);
    font-weight: 400;
}

/* Paragraphs */
.bls-article-content p {
    margin: 0 0 1.5em;
}

/* Headings */
.bls-article-content h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--bls-text);
    margin: 2.5em 0 0.8em;
    scroll-margin-top: 80px;
}

.bls-article-content h3 {
    font-family: Georgia, serif;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bls-text);
    margin: 2em 0 0.6em;
    scroll-margin-top: 80px;
}

.bls-article-content h4 {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bls-gold);
    margin: 2em 0 0.8em;
    font-weight: 700;
}

/* Links */
.bls-article-content a {
    color: var(--bls-text);
    text-decoration: none;
    background-image: linear-gradient(to bottom, var(--bls-gold) 0%, var(--bls-gold) 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    transition: color 0.3s, background-size 0.3s;
    padding-bottom: 1px;
}

.bls-article-content a:hover {
    color: var(--bls-gold);
    background-size: 100% 2px;
}

/* Strong / em */
.bls-article-content strong {
    color: var(--bls-text);
    font-weight: 700;
}

.bls-article-content em {
    font-style: italic;
}

/* Lists */
.bls-article-content ul,
.bls-article-content ol {
    margin: 0 0 1.5em;
    padding-left: 1.5em;
}

.bls-article-content li {
    margin-bottom: 0.6em;
    line-height: 1.7;
}

.bls-article-content ul li {
    list-style: none;
    position: relative;
}

.bls-article-content ul li::before {
    content: "";
    position: absolute;
    left: -1.2em;
    top: 0.75em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bls-gold);
}

.bls-article-content ol {
    list-style: none;
    counter-reset: ol-counter;
}

.bls-article-content ol li {
    counter-increment: ol-counter;
    position: relative;
}

.bls-article-content ol li::before {
    content: counter(ol-counter, decimal-leading-zero);
    position: absolute;
    left: -2.2em;
    top: 0.1em;
    font-family: "Courier New", monospace;
    font-size: 0.8em;
    color: var(--bls-gold);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Blockquote / pull quote */
.bls-article-content blockquote {
    margin: 2.5em 0;
    padding: 0.5em 0 0.5em 2em;
    border-left: 2px solid var(--bls-gold);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.4em;
    line-height: 1.45;
    color: var(--bls-text);
    letter-spacing: -0.01em;
}

.bls-article-content blockquote p {
    margin: 0;
}

.bls-article-content blockquote cite {
    display: block;
    margin-top: 1em;
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bls-muted);
    font-style: normal;
}

/* Images */
.bls-article-content img,
.bls-article-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2.5em auto;
    border-radius: 8px;
}

.bls-article-content figure {
    margin: 2.5em 0;
}

.bls-article-content figcaption,
.bls-article-content .wp-element-caption {
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bls-muted);
    text-align: center;
    margin-top: 1em;
}

/* Code */
.bls-article-content code {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background: rgba(183, 156, 74, 0.1);
    border-radius: 3px;
    color: var(--bls-gold-deep);
}

.bls-article-content pre {
    margin: 2em 0;
    padding: 1.5em;
    background: var(--bls-dark);
    color: var(--bls-white);
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.bls-article-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* HR / divider */
.bls-article-content hr {
    border: none;
    height: 1px;
    background: var(--bls-border);
    margin: 3em auto;
    max-width: 100px;
    position: relative;
}

.bls-article-content hr::before {
    content: "❦";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bls-bg);
    padding: 0 1em;
    color: var(--bls-gold);
    font-size: 1.2em;
}

/* =========================================
   TAGS
========================================= */
.bls-tags {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--bls-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.bls-tags-label {
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bls-muted);
    margin-right: 0.5rem;
}

.bls-tag {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--bls-border);
    border-radius: 999px;
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bls-muted);
    text-decoration: none;
    transition: all 0.3s;
}

.bls-tag:hover {
    border-color: var(--bls-gold);
    color: var(--bls-gold);
    background: rgba(183, 156, 74, 0.06);
}

/* =========================================
   BOTTOM SHARE BAR
========================================= */
.bls-bottom-share {
    margin-top: 2.5em;
    padding: 2em;
    background: rgba(183, 156, 74, 0.05);
    border: 1px solid rgba(183, 156, 74, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.bls-bottom-share-label {
    font-family: Georgia, serif;
    font-size: 1rem;
    color: var(--bls-text);
    font-style: italic;
}

/* =========================================
   4. AUTHOR BIO
========================================= */
.bls-author {
    background: var(--bls-bg);
    padding: 0 5vw clamp(60px, 8vw, 100px);
}

.bls-author-inner {
    max-width: 920px;
    margin: 0 auto;
}

.bls-author-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid rgba(183, 156, 74, 0.15);
    border-radius: 16px;
}

.bls-author-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--bls-gold);
    padding: 4px;
    background: #fff;
}

.bls-author-text {
    flex: 1;
}

.bls-author-label {
    display: block;
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bls-gold);
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.bls-author-name {
    font-family: Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--bls-text);
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
}

.bls-author-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bls-muted);
    margin: 0 0 1rem;
}

.bls-author-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bls-gold);
    text-decoration: none;
}

.bls-card-arrow {
    display: inline-block;
    transition: transform 0.3s;
}

.bls-author-link:hover .bls-card-arrow {
    transform: translateX(4px);
}

/* =========================================
   5. RELATED ARTICLES
========================================= */
.bls-related {
    background: var(--bls-bg-soft);
    padding: clamp(80px, 11vw, 130px) 5vw;
}

.bls-related-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.bls-related-head {
    text-align: center;
    margin-bottom: clamp(50px, 6vw, 70px);
}

.bls-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bls-eyebrow-line {
    width: 2.5rem;
    height: 1px;
    background: var(--bls-gold);
}

.bls-eyebrow p {
    margin: 0;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bls-gold);
}

.bls-related-title {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--bls-text);
    margin: 0;
}

.bls-related-title em {
    font-style: italic;
    color: var(--bls-gold);
}

.bls-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.bls-related-card {
    text-decoration: none;
    color: var(--bls-text);
    background: #fff;
    border: 1px solid rgba(183, 156, 74, 0.12);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        border-color 0.4s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bls-related-card:hover {
    border-color: var(--bls-gold);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(21, 23, 22, 0.1);
}

.bls-related-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.bls-related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.bls-related-card:hover .bls-related-img {
    transform: scale(1.06);
}

.bls-related-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(21, 23, 22, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Courier New", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bls-related-body {
    padding: 1.5rem 1.5rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bls-related-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Courier New", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bls-muted);
    margin-bottom: 0.9rem;
}

.bls-related-card-title {
    font-family: Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.4rem;
    color: var(--bls-text);
    flex: 1;
}

.bls-related-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bls-gold);
    margin-top: auto;
}

.bls-related-card:hover .bls-card-arrow {
    transform: translateX(4px);
}

/* =========================================
   6. CTA
========================================= */
.bls-cta {
    background: var(--bls-dark);
    color: var(--bls-white);
    padding: clamp(80px, 11vw, 140px) 5vw;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bls-cta::before {
    content: "";
    position: absolute;
    bottom: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(183, 156, 74, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.bls-cta-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.bls-cta-eyebrow {
    display: inline-block;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bls-gold);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.bls-cta-heading {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    color: var(--bls-white);
}

.bls-cta-heading em {
    font-style: italic;
    color: var(--bls-gold);
}

.bls-cta-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(247, 243, 236, 0.7);
    margin: 0 auto 2.5rem;
    max-width: 540px;
}

.bls-cta-form {
    display: flex;
    gap: 0.8rem;
    max-width: 500px;
    margin: 0 auto;
}

.bls-cta-input {
    flex: 1;
    padding: 1rem 1.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(183, 156, 74, 0.3);
    border-radius: 999px;
    color: var(--bls-white);
    font-size: 0.95rem;
    font-family: Georgia, serif;
}

.bls-cta-input::placeholder {
    color: rgba(247, 243, 236, 0.4);
}

.bls-cta-input:focus {
    outline: none;
    border-color: var(--bls-gold);
}

.bls-cta-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    background: var(--bls-gold);
    color: var(--bls-dark);
    border: none;
    border-radius: 999px;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s;
    white-space: nowrap;
}

.bls-cta-submit:hover {
    transform: translateY(-2px);
}

.bls-cta-arrow {
    display: inline-block;
    transition: transform 0.3s;
}

.bls-cta-submit:hover .bls-cta-arrow {
    transform: translate(2px, -2px);
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1024px) {
    .bls-body-inner {
        grid-template-columns: 1fr;
    }

    .bls-sidebar {
        display: none;
    }

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

@media (max-width: 768px) {
    .bls-article-content {
        font-size: 1.05rem;
    }

    .bls-article-content > p:first-of-type::first-letter {
        font-size: 3.5em;
    }

    .bls-author-card {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .bls-bottom-share {
        flex-direction: column;
        align-items: flex-start;
    }

    .bls-related-grid {
        grid-template-columns: 1fr;
    }

    .bls-cta-form {
        flex-direction: column;
    }

    .bls-meta {
        font-size: 0.62rem;
        gap: 0.4rem;
    }
}

/* =========================================
   START BLOG ARCHIVE
========================================= */
:root {
    --bl-bg: #f5f3ee;
    --bl-bg-soft: #ede9e0;
    --bl-dark: #151716;
    --bl-dark-soft: #1c1f1e;
    --bl-gold: #b79c4a;
    --bl-gold-deep: #b78f2b;
    --bl-text: #1a1a1a;
    --bl-muted: #77736b;
    --bl-border: #d8d1c4;
    --bl-white: #f7f3ec;
}

/* =========================================
   1. HERO
========================================= */
.bl-hero {
    background: var(--bl-bg);
    padding: clamp(110px, 16vw, 180px) 5vw clamp(50px, 6vw, 80px);
    position: relative;
    overflow: hidden;
}

.bl-hero::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50%;
    height: 70%;
    background: radial-gradient(circle, rgba(183, 156, 74, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.bl-hero-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.bl-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bl-eyebrow-line {
    width: 2.5rem;
    height: 1px;
    background: var(--bl-gold);
    flex-shrink: 0;
}

.bl-hero-eyebrow p {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bl-gold);
}

.bl-hero-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--bl-text);
    margin: 0 0 1.8rem;
    max-width: 900px;
}

.bl-hero-title em {
    font-style: italic;
    color: var(--bl-gold);
}

.bl-hero-lead {
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.7;
    color: #47433d;
    margin: 0;
    max-width: 680px;
}

/* =========================================
   2. FILTER BAR
========================================= */
.bl-filter-bar {
    background: var(--bl-bg);
    padding: clamp(40px, 5vw, 60px) 5vw clamp(30px, 4vw, 50px);
    position: sticky;
    top: 0;
    z-index: 50;
    border-top: 1px solid rgba(183, 156, 74, 0.18);
    border-bottom: 1px solid rgba(183, 156, 74, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(245, 243, 238, 0.92);
}

.bl-filter-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.bl-filter-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bl-filter-label p {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bl-gold);
}

.bl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.bl-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--bl-border);
    background: transparent;
    border-radius: 999px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bl-muted);
    cursor: pointer;
    transition:
        border-color 0.3s,
        color 0.3s,
        background 0.3s,
        transform 0.3s;
}

.bl-filter:hover {
    border-color: var(--bl-text);
    color: var(--bl-text);
    transform: translateY(-1px);
}

.bl-filter.is-active {
    background: var(--bl-gold);
    border-color: var(--bl-gold);
    color: #fff;
}

.bl-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.65rem;
    letter-spacing: 0;
}

.bl-filter.is-active .bl-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.bl-result-count {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bl-muted);
}

.bl-current-count {
    color: var(--bl-text);
    font-weight: 700;
}

/* =========================================
   3. ARTICLE GRID
========================================= */
.bl-grid-section {
    background: var(--bl-bg);
    padding: clamp(50px, 7vw, 90px) 5vw clamp(80px, 11vw, 140px);
}

.bl-grid-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
}

/* Featured first card spans 2 cols (only when "all" filter is active) */
.bl-card-feature {
    grid-column: span 2;
}

.bl-card-feature .bl-card-img-wrap {
    aspect-ratio: 16 / 9;
}

.bl-card-feature .bl-card-title {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
}

/* When a filter is active, feature reverts to normal card */
.bl-grid.is-filtered .bl-card-feature {
    grid-column: span 1;
}

.bl-grid.is-filtered .bl-card-feature .bl-card-img-wrap {
    aspect-ratio: 4 / 3;
}

.bl-grid.is-filtered .bl-card-feature .bl-card-title {
    font-size: 1.4rem;
}

/* Card */
.bl-card {
    display: flex;
    flex-direction: column;
    will-change: transform, opacity;
}

.bl-card.is-hidden {
    display: none;
}

.bl-card-link {
    text-decoration: none;
    color: var(--bl-text);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(183, 156, 74, 0.12);
    border-radius: 12px;
    overflow: hidden;
    transition:
        border-color 0.4s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bl-card-link:hover {
    border-color: var(--bl-gold);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(21, 23, 22, 0.1);
}

/* Image */
.bl-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bl-dark-soft);
}

.bl-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.bl-card-link:hover .bl-card-img {
    transform: scale(1.06);
}

.bl-card-cat-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(21, 23, 22, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card body */
.bl-card-body {
    padding: 1.5rem 1.5rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bl-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bl-muted);
    margin-bottom: 0.9rem;
}

.bl-card-dot {
    color: var(--bl-gold);
}

.bl-card-date {
    color: var(--bl-text);
    font-weight: 700;
}

.bl-card-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
    color: var(--bl-text);
    transition: color 0.3s ease;
}

.bl-card-link:hover .bl-card-title {
    color: var(--bl-gold-deep);
}

.bl-card-excerpt {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--bl-muted);
    margin: 0 0 1.4rem;
    flex: 1;
}

.bl-card-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bl-gold);
    margin-top: auto;
}

.bl-card-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.bl-card-link:hover .bl-card-arrow {
    transform: translateX(4px);
}

/* Empty state */
.bl-empty-state,
.bl-empty-default {
    grid-column: 1 / -1;
    text-align: center;
    padding: clamp(60px, 8vw, 100px) 2rem;
}

.bl-empty-inner {
    max-width: 480px;
    margin: 0 auto;
}

.bl-empty-icon {
    display: inline-block;
    font-size: 3rem;
    color: var(--bl-gold);
    opacity: 0.5;
    margin-bottom: 1rem;
    font-family: Georgia, serif;
}

.bl-empty-title {
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--bl-text);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.bl-empty-text {
    color: var(--bl-muted);
    font-size: 1rem;
    margin: 0 0 2rem;
}

.bl-empty-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    background: var(--bl-dark);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.bl-empty-reset:hover {
    background: var(--bl-gold);
    transform: translateY(-2px);
}

.bl-empty-default p {
    color: var(--bl-muted);
    font-size: 1.1rem;
}

/* =========================================
   4. NEWSLETTER CTA
========================================= */
.bl-cta {
    background: var(--bl-dark);
    color: var(--bl-white);
    padding: clamp(80px, 11vw, 140px) 5vw;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bl-cta::before {
    content: "";
    position: absolute;
    bottom: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(183, 156, 74, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.bl-cta-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.bl-cta-eyebrow {
    display: inline-block;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bl-gold);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.bl-cta-heading {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    color: var(--bl-white);
}

.bl-cta-heading em {
    font-style: italic;
    color: var(--bl-gold);
}

.bl-cta-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(247, 243, 236, 0.7);
    margin: 0 auto 2.5rem;
    max-width: 540px;
}

.bl-cta-form {
    display: flex;
    gap: 0.8rem;
    max-width: 500px;
    margin: 0 auto;
}

.bl-cta-input {
    flex: 1;
    padding: 1rem 1.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(183, 156, 74, 0.3);
    border-radius: 999px;
    color: var(--bl-white);
    font-size: 0.95rem;
    font-family: Georgia, serif;
    transition: border-color 0.3s, background 0.3s;
}

.bl-cta-input::placeholder {
    color: rgba(247, 243, 236, 0.4);
}

.bl-cta-input:focus {
    outline: none;
    border-color: var(--bl-gold);
    background: rgba(255, 255, 255, 0.1);
}

.bl-cta-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    background: var(--bl-gold);
    color: var(--bl-dark);
    border: none;
    border-radius: 999px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s;
    white-space: nowrap;
}

.bl-cta-submit:hover {
    transform: translateY(-2px);
}

.bl-cta-arrow {
    display: inline-block;
    transition: transform 0.3s;
}

.bl-cta-submit:hover .bl-cta-arrow {
    transform: translate(2px, -2px);
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1024px) {
    .bl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bl-card-feature {
        grid-column: span 2;
    }
    .bl-grid.is-filtered .bl-card-feature {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .bl-filter-bar {
        position: relative;
        top: auto;
    }

    .bl-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        margin-left: -5vw;
        margin-right: -5vw;
        padding-left: 5vw;
        padding-right: 5vw;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .bl-filters::-webkit-scrollbar {
        display: none;
    }

    .bl-filter {
        flex-shrink: 0;
    }

    .bl-grid {
        grid-template-columns: 1fr;
    }

    .bl-card-feature {
        grid-column: span 1;
    }

    .bl-card-feature .bl-card-img-wrap {
        aspect-ratio: 4 / 3;
    }

    .bl-card-feature .bl-card-title {
        font-size: 1.5rem;
    }

    .bl-cta-form {
        flex-direction: column;
    }
}
/* ===========================
  END Blog Archive Page
============================= */

/* ===========================
  START Project Pages
============================= */


/* --- CONTAINER --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 600px;
    overflow: hidden;
    background: #000;
}

.slides-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}

/* --- SLIDE (IMAGES) --- */
.hero-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    will-change: transform, opacity;
}

.hero-slide.active {
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

/* --- SPRINGHETTI CARD & LUXURY REVEAL --- */
.springhetti-card {
    position: absolute;
    bottom: 0;
    left: 120px;
    background: #fff;
    padding: 3rem;
    max-width: 550px; 
    width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 20;
}

.text-mask {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
}

.springhetti-meta {
    color: #005596; 
    font-size: 0.9rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    /* Initial state for GSAP */
    opacity: 0;
    transform: translateY(100%);
}

.springhetti-title {
    font-family: inherit; 
    color: #222;
    font-size: 3.5rem; 
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 2.5rem;
    /* Initial state for GSAP */
    opacity: 0;
    transform: translateY(100%);
}

.springhetti-footer {
    display: flex;
    /* Initial state for GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.springhetti-action-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: gap 0.3s ease;
    background: none; border: none;
    padding: 0; text-align: left;
}

.springhetti-action-btn:hover { gap: 25px; }

.springhetti-action { font-size: 1rem; font-weight: 600; text-transform: uppercase; color: #333; }
.springhetti-arrow { color: #d2af37; font-size: 1.4rem; font-weight: 700; }

/* --- NAVIGATION --- */
.slider-nav {
    position: absolute;
    bottom: 0; left: 0;
    display: flex;
    z-index: 30;
    background: #1a1a1a; 
}

.nav-btn {
    width: 60px; height: 60px;
    background: #1a1a1a; border: none;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.2s ease; color: #fff; padding: 0;
}

.nav-btn:hover { background: #333; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn + .nav-btn { border-left: 1px solid rgba(255,255,255,0.2); }

/* --- SPECS PANEL --- */
.specs-panel {
    position: fixed;
    top: 0; right: 0;
    width: 100%; max-width: 450px; 
    height: 100%; background: #d2af37; 
    color: #fff; z-index: 9999; 
    transform: translateX(100%); 
    display: flex; flex-direction: column;
    box-shadow: -5px 0 20px rgba(0,0,0,0.15);
}

.specs-panel.panel-ready { transition: transform 0.4s ease-in-out; }
.specs-panel.open { transform: translateX(0); }
.specs-header { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
.specs-header h3 { margin: 0; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.close-specs { background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; padding: 0.5rem; }
.specs-body { padding: 2.5rem; overflow-y: auto; flex-grow: 1; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.spec-item h4 { color: rgba(255,255,255,0.8); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.6rem; }
.spec-item p { margin: 0; font-size: 1.35rem; font-weight: 500; line-height: 1.3; }
.spec-item.full-width { grid-column: 1 / -1; }

/* --- EDITORIAL PROJECT GRID --- */
.project-grid-section { padding: 100px 0; background: #f5f2ec; width: 100%; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.grid-img-wrapper { width: 100%; height: 500px; overflow: hidden; background: #f4f4f4; position: relative; cursor: pointer; clip-path: inset(100% 0% 0% 0%); }
.gallery-grid .grid-img-wrapper:nth-child(3n) { grid-column: 1 / -1; height: 700px; }
.grid-img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; transition: transform 1.2s cubic-bezier(0.15, 1, 0.3, 1); }
.grid-img-wrapper:hover .grid-img { transform: scale(1.08) !important; }
.grid-img-wrapper::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.grid-img-wrapper:hover::after { opacity: 1; }

/* --- LIGHTBOX --- */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 100000; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 90%; max-height: 80vh; object-fit: contain; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 40px; right: 40px; color: #fff; font-size: 30px; cursor: pointer; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .springhetti-card { left: 0; bottom: 60px; width: 100%; max-width: 100%; padding: 2rem; }
    .springhetti-title { font-size: 2.2rem; }
    .slider-nav { width: 100%; }
    .nav-btn { width: 50%; height: 60px; }
    .specs-panel { max-width: 100%; }
    .gallery-grid { grid-template-columns: 1fr; padding: 0 20px; }
    .grid-img-wrapper, .gallery-grid .grid-img-wrapper:nth-child(3n) { height: 350px; }
}

/* --- Services Wrapper --- */
.project-services-wrapper {
  margin-bottom: 60px; /* Gives nice breathing room before the images start */
  text-align: center;
}

/* --- The Cormorant Garamond Heading --- */
.services-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  font-weight: 500;
  font-style: italic; /* Cormorant Garamond looks stunning in italic */
  color: #1a1a1a;
  margin-bottom: 30px;
  letter-spacing: 0.02em;
}

/* --- The Grid for the Cards --- */
.services-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* --- The Luxury Gold Translucent Cards --- */
.service-gold-card {
  background: rgba(183, 156, 74, 0.08); /* Very sheer gold */
  backdrop-filter: blur(8px); /* Subtle glassmorphism */
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(183, 156, 74, 0.4); /* Crisp gold border */
  color: #b79c4a; /* Brand gold text */
  padding: 12px 28px;
  border-radius: 6px; /* Soft edges */
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default; /* So it feels like a tag, not a button */
}

/* --- Subtle Lift on Hover --- */
.service-gold-card:hover {
  background: rgba(183, 156, 74, 0.15); /* Slightly darker gold on hover */
  border-color: rgba(183, 156, 74, 0.8);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(183, 156, 74, 0.15); /* Soft gold underglow */
  color: #1a1a1a; /* Flips text to black for contrast */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
  .services-heading { font-size: 32px; }
  .service-gold-card { padding: 10px 20px; font-size: 12px; }
}


/* =========================================
   FOOTER — SERVICE AREAS START
========================================= */
.home-areas {
    background: var(--area-bg, #f5f3ee);
    padding: clamp(80px, 11vw, 140px) 5vw;
    overflow: hidden;
}

.home-areas-inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* ---------- HEADER ---------- */
.home-areas-header {
    max-width: 760px;
    margin: 0 auto clamp(50px, 7vw, 90px);
    text-align: center;
}

.home-areas-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.home-areas-eyebrow .eyebrow-line {
    width: 2.5rem;
    height: 1px;
    background: var(--area-gold, #b79c4a);
}

.home-areas-eyebrow p {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--area-gold, #b79c4a);
}

.home-areas-heading {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--area-text, #1a1a1a);
    margin: 0 0 1.5rem;
}

.home-areas-heading em {
    font-style: italic;
    color: var(--area-gold, #b79c4a);
}

.home-areas-intro {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: var(--area-muted, #77736b);
    margin: 0;
}

/* ---------- GRID ---------- */
.home-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ---------- AREA CARD ---------- */
.home-area-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--area-text, #1a1a1a);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(183, 156, 74, 0.12);
    transition:
        border-color 0.4s ease,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-area-card:hover {
    border-color: var(--area-gold, #b79c4a);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(21, 23, 22, 0.12);
}

/* Image */
.home-area-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--area-dark-soft, #1c1f1e);
}

.home-area-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.home-area-card:hover .home-area-img {
    transform: scale(1.06);
}

.home-area-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(21, 23, 22, 0) 40%,
        rgba(21, 23, 22, 0.55) 100%
    );
    z-index: 1;
    transition: opacity 0.4s ease;
}

.home-area-card:hover .home-area-overlay {
    opacity: 0.85;
}

/* Number badge */
.home-area-num {
    position: absolute;
    top: 1.2rem;
    left: 1.4rem;
    z-index: 2;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Body */
.home-area-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 1.5rem;
}

.home-area-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.home-area-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, 1.6vw, 1.6rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--area-text, #1a1a1a);
    position: relative;
    display: inline-block;
}

/* Gold underline that grows on hover */
.home-area-name::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--area-gold, #b79c4a);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-area-card:hover .home-area-name::after {
    width: 100%;
}

.home-area-sub {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--area-muted, #77736b);
}

.home-area-arrow {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(183, 156, 74, 0.25);
    color: var(--area-gold, #b79c4a);
    font-size: 0.9rem;
    transition:
        background 0.4s ease,
        color 0.4s ease,
        transform 0.4s ease,
        border-color 0.4s ease;
}

.home-area-card:hover .home-area-arrow {
    background: var(--area-gold, #b79c4a);
    border-color: var(--area-gold, #b79c4a);
    color: #fff;
    transform: translate(3px, -3px);
}

/* ---------- FOOTER / VIEW ALL ---------- */
.home-areas-footer {
    margin-top: clamp(50px, 6vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(183, 156, 74, 0.25);
}

.home-areas-footer-text {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--area-muted, #77736b);
    margin: 0;
}

.home-areas-view-all {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.2rem 1rem 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(21, 23, 22, 0.2);
    background: transparent;
    color: var(--area-text, #1a1a1a);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    overflow: hidden;
    transition:
        color 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}

.home-areas-view-all::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--area-gold, #b79c4a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

.home-areas-view-all > * {
    position: relative;
    z-index: 1;
}

.home-areas-view-all:hover {
    color: #fff;
    border-color: var(--area-gold, #b79c4a);
    transform: translateY(-2px);
}

.home-areas-view-all:hover::before {
    transform: scaleX(1);
}

.view-all-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(21, 23, 22, 0.06);
    transition: transform 0.3s ease, background 0.3s ease;
}

.home-areas-view-all:hover .view-all-arrow {
    background: rgba(255, 255, 255, 0.15);
    transform: translate(3px, -3px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .home-areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .home-areas-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .home-areas-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-areas-view-all {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================
   FOOTER — SERVICE AREAS END
========================================= */

/* =========================================
   ALL SERVICE AREAS ARCHIVE PAGE START
========================================= */
:root {
    --aa-bg: #f5f3ee;
    --aa-bg-soft: #ede9e0;
    --aa-dark: #151716;
    --aa-dark-soft: #1c1f1e;
    --aa-dark-tile: #222522;
    --aa-gold: #b79c4a;
    --aa-gold-deep: #b78f2b;
    --aa-text: #1a1a1a;
    --aa-muted: #77736b;
    --aa-border: #d8d1c4;
    --aa-white: #f7f3ec;
}

/* =========================================
   1. HERO
========================================= */
.aa-hero {
    background: var(--aa-bg);
    padding: clamp(120px, 18vw, 200px) 5vw clamp(70px, 9vw, 110px);
    position: relative;
    overflow: hidden;
}

/* Subtle radial accent */
.aa-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(183, 156, 74, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.aa-hero-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.aa-hero-pill {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(183, 156, 74, 0.4);
    background: rgba(183, 156, 74, 0.08);
    border-radius: 999px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--aa-gold);
    margin-bottom: 2rem;
}

.aa-hero-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--aa-text);
    margin: 0 0 2rem;
    max-width: 950px;
}

.aa-hero-title em {
    font-style: italic;
    color: var(--aa-gold);
}

.aa-hero-lead {
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.7;
    color: #47433d;
    margin: 0 0 2.5rem;
    max-width: 720px;
}

.aa-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Shared button base */
.aa-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 1.8rem;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    overflow: hidden;
    transition: color 0.4s, border-color 0.4s, transform 0.4s, background 0.4s;
}

.aa-btn-primary {
    background: var(--aa-dark);
    color: var(--aa-white);
    border: 1px solid var(--aa-dark);
}
.aa-btn-primary:hover {
    background: var(--aa-gold);
    border-color: var(--aa-gold);
    transform: translateY(-2px);
}

.aa-btn-ghost {
    background: transparent;
    color: var(--aa-text);
    border: 1px solid rgba(21, 23, 22, 0.25);
}
.aa-btn-ghost:hover {
    border-color: var(--aa-text);
    background: rgba(21, 23, 22, 0.04);
    transform: translateY(-2px);
}

.aa-btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.aa-btn:hover .aa-btn-arrow {
    transform: translate(3px, -3px);
}

/* =========================================
   2. STATS BAR
========================================= */
.aa-stats {
    background: var(--aa-bg);
    padding: 0 5vw clamp(80px, 10vw, 120px);
}

.aa-stats-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(183, 156, 74, 0.3);
    border-bottom: 1px solid rgba(183, 156, 74, 0.3);
}

.aa-stat {
    padding: 2.5rem 1.5rem;
    border-right: 1px solid rgba(183, 156, 74, 0.18);
    display: flex;
    flex-direction: column;
}
.aa-stat:last-child {
    border-right: none;
}

.aa-stat-num {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 400;
    color: var(--aa-text);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.8rem;
}

.aa-stat-label {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--aa-muted);
}

/* =========================================
   SHARED SECTION HEAD
========================================= */
.aa-section-head {
    max-width: 800px;
    margin: 0 0 clamp(45px, 6vw, 70px);
}

.aa-eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.aa-eyebrow-line {
    width: 2.5rem;
    height: 1px;
    background: var(--aa-gold);
}

.aa-eyebrow p {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--aa-gold);
}

.aa-section-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--aa-text);
    margin: 0 0 1.5rem;
}

.aa-section-title em {
    font-style: italic;
    color: var(--aa-gold);
}

.aa-section-title--light {
    color: var(--aa-white);
}

.aa-section-sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--aa-muted);
    margin: 0;
    max-width: 680px;
}

.aa-section-sub--muted {
    color: rgba(247, 243, 236, 0.6);
}

/* =========================================
   3. PRIMARY AREAS
========================================= */
.aa-primary {
    background: var(--aa-bg);
    padding: clamp(80px, 11vw, 140px) 5vw;
}

.aa-primary-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.aa-areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.aa-area-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--aa-text);
    border: 1px solid rgba(183, 156, 74, 0.15);
    display: flex;
    flex-direction: column;
    transition:
        border-color 0.4s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.aa-area-card:hover {
    border-color: var(--aa-gold);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(21, 23, 22, 0.12);
}

.aa-area-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--aa-dark-soft);
}

.aa-area-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.aa-area-card:hover .aa-area-img {
    transform: scale(1.06);
}

.aa-area-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

.aa-area-body {
    padding: 1.6rem 1.5rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.aa-area-county {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--aa-gold);
    margin-bottom: 0.6rem;
}

.aa-area-name {
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
    color: var(--aa-text);
}

.aa-area-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--aa-muted);
    margin: 0 0 1.4rem;
    flex: 1;
}

.aa-area-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--aa-gold);
    margin-top: auto;
}

.aa-link-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.aa-area-card:hover .aa-link-arrow {
    transform: translateX(4px);
}

/* =========================================
   4. ALSO SERVING (DARK)
========================================= */
.aa-secondary {
    background: var(--aa-dark);
    color: var(--aa-white);
    padding: clamp(80px, 11vw, 140px) 5vw;
}

.aa-secondary-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.aa-cities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.aa-city-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border-radius: 10px;
    background: var(--aa-dark-tile);
    border: 1px solid rgba(183, 156, 74, 0.12);
    text-decoration: none;
    color: var(--aa-white);
    transition:
        border-color 0.4s,
        background 0.4s,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.aa-city-tile:hover {
    border-color: var(--aa-gold);
    background: rgba(183, 156, 74, 0.08);
    transform: translateY(-3px);
}

.aa-city-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.aa-city-name {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--aa-white);
}

.aa-city-county {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, 0.5);
}

.aa-city-arrow {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--aa-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.4s, transform 0.4s, color 0.4s;
}

.aa-city-tile:hover .aa-city-arrow {
    background: var(--aa-gold);
    color: var(--aa-dark);
    transform: translateX(4px);
}

/* =========================================
   5. EVERY SERVICE. EVERY MARKET.
========================================= */
.aa-services {
    background: var(--aa-bg);
    padding: clamp(80px, 11vw, 140px) 5vw;
}

.aa-services-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.aa-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* 7th service spans full width for editorial rhythm */
.aa-services-grid .aa-service-tile:nth-child(7) {
    grid-column: span 3;
}

.aa-service-tile {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 2.5rem 2rem 2rem;
    border: 1px solid rgba(183, 156, 74, 0.15);
    text-decoration: none;
    color: var(--aa-text);
    display: flex;
    flex-direction: column;
    min-height: 240px;
    transition:
        border-color 0.4s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.5s ease;
    overflow: hidden;
}

.aa-service-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--aa-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.aa-service-tile:hover {
    border-color: var(--aa-gold);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(21, 23, 22, 0.1);
}

.aa-service-tile:hover::before {
    transform: scaleX(1);
}

.aa-service-num {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: var(--aa-gold);
    margin-bottom: 1.2rem;
}

.aa-service-name {
    font-family: Georgia, serif;
    font-size: clamp(1.4rem, 1.8vw, 1.65rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
    color: var(--aa-text);
}

.aa-service-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--aa-muted);
    margin: 0;
    flex: 1;
}

.aa-service-arrow {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: var(--aa-gold);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 1.1rem;
}

.aa-service-tile:hover .aa-service-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* =========================================
   6. CTA
========================================= */
.aa-cta {
    background: var(--aa-dark);
    color: var(--aa-white);
    padding: clamp(80px, 11vw, 140px) 5vw;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aa-cta::before {
    content: "";
    position: absolute;
    bottom: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(183, 156, 74, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.aa-cta-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.aa-cta-eyebrow {
    display: inline-block;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--aa-gold);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.aa-cta-heading {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    color: var(--aa-white);
}

.aa-cta-heading em {
    font-style: italic;
    color: var(--aa-gold);
}

.aa-cta-sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(247, 243, 236, 0.7);
    margin: 0 auto 3rem;
    max-width: 620px;
}

.aa-btn-cta {
    background: transparent;
    color: var(--aa-white);
    border: 1px solid rgba(183, 156, 74, 0.55);
    padding: 1.1rem 1.2rem 1.1rem 2rem;
    gap: 1rem;
}

.aa-btn-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--aa-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

.aa-btn-cta > * {
    position: relative;
    z-index: 1;
}

.aa-btn-cta:hover {
    color: var(--aa-dark);
    border-color: var(--aa-gold);
    transform: translateY(-2px);
}

.aa-btn-cta:hover::before {
    transform: scaleX(1);
}

.aa-btn-arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: transform 0.3s, background 0.3s;
}

.aa-btn-cta:hover .aa-btn-arrow-circle {
    background: rgba(21, 23, 22, 0.12);
    transform: translate(3px, -3px);
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1100px) {
    .aa-areas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .aa-stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .aa-stat:nth-child(2) {
        border-right: none;
    }
    .aa-stat:nth-child(1),
    .aa-stat:nth-child(2) {
        border-bottom: 1px solid rgba(183, 156, 74, 0.18);
    }

    .aa-areas-grid,
    .aa-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .aa-services-grid .aa-service-tile:nth-child(7) {
        grid-column: span 2;
    }

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

@media (max-width: 600px) {
    .aa-hero {
        padding-top: 100px;
    }

    .aa-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .aa-btn {
        justify-content: center;
    }

    .aa-stats-inner {
        grid-template-columns: 1fr;
    }

    .aa-stat {
        border-right: none;
        border-bottom: 1px solid rgba(183, 156, 74, 0.18);
    }
    .aa-stat:last-child {
        border-bottom: none;
    }

    .aa-areas-grid,
    .aa-services-grid,
    .aa-cities-grid {
        grid-template-columns: 1fr;
    }

    .aa-services-grid .aa-service-tile:nth-child(7) {
        grid-column: span 1;
    }
}

/* =========================================
   END ALL SERVICE AREAS ARCHIVE PAGE
========================================= */

/* =========================================
   SPRINGHETTI POOL OPENING SECTIONS
   Info + Pricing + FAQ
========================================= */

:root {
  --sp-bg: #f5f3ee;
  --sp-bg-soft: #ede9e0;
  --sp-dark: #151716;
  --sp-dark-soft: #1c1f1e;
  --sp-dark-tile: #222522;
  --sp-gold: #b79c4a;
  --sp-gold-deep: #b78f2b;
  --sp-text: #1a1a1a;
  --sp-muted: #77736b;
  --sp-border: #d8d1c4;
  --sp-white: #f7f3ec;
}

.sp-service-block *,
.sp-service-block *::before,
.sp-service-block *::after {
  box-sizing: border-box;
}

.sp-service-block {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: inherit;
}

.sp-service-block a {
  text-decoration: none;
}

/* Shared */
.sp-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 5vw;
  padding-right: 5vw;
}

.sp-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.sp-eyebrow-line {
  width: 2.5rem;
  height: 1px;
  background: var(--sp-gold);
}

.sp-eyebrow p {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sp-gold);
}

.sp-heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--sp-text);
  margin: 0 0 1.5rem;
}

.sp-heading em {
  color: var(--sp-gold);
  font-style: italic;
}

.sp-sub {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.7;
  color: var(--sp-muted);
  margin: 0;
  max-width: 720px;
}

.sp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s, transform 0.4s, background 0.4s;
}

.sp-btn-dark {
  background: var(--sp-dark);
  color: var(--sp-white);
  border: 1px solid var(--sp-dark);
}

.sp-btn-dark:hover {
  background: var(--sp-gold);
  border-color: var(--sp-gold);
  color: var(--sp-dark);
  transform: translateY(-2px);
}

.sp-btn-outline {
  background: transparent;
  color: var(--sp-white);
  border: 1px solid rgba(183, 156, 74, 0.55);
}

.sp-btn-outline:hover {
  background: var(--sp-gold);
  color: var(--sp-dark);
  border-color: var(--sp-gold);
  transform: translateY(-2px);
}

/* =========================================
   INFO SECTION
========================================= */

.sp-info {
  padding: clamp(80px, 10vw, 130px) 0;
  background: var(--sp-bg);
}

.sp-info-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.sp-info-image {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sp-dark);
}

.sp-info-image img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-info-image:hover img {
  transform: scale(1.04);
}

.sp-info-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.22));
  pointer-events: none;
}

.sp-info-card {
  border-top: 1px solid rgba(183, 156, 74, 0.35);
  border-bottom: 1px solid rgba(183, 156, 74, 0.35);
  padding: clamp(2rem, 4vw, 3.2rem) 0;
}

.sp-info-copy {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.sp-info-copy p {
  margin: 0;
  color: #48443d;
  font-size: 1rem;
  line-height: 1.75;
}

.sp-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.2rem 0 2.4rem;
}

.sp-check-item {
  position: relative;
  background: #fff;
  border: 1px solid rgba(183, 156, 74, 0.16);
  padding: 1.35rem 1.35rem 1.35rem 3.1rem;
  min-height: 120px;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.sp-check-item:hover {
  border-color: var(--sp-gold);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(21, 23, 22, 0.08);
}

.sp-check-item::before {
  content: "✓";
  position: absolute;
  left: 1.25rem;
  top: 1.35rem;
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-gold);
  color: var(--sp-dark);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50%;
}

.sp-check-item h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.55rem;
  color: var(--sp-text);
}

.sp-check-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sp-muted);
}

/* =========================================
   PRICING SECTION
========================================= */

.sp-pricing {
  padding: clamp(80px, 10vw, 130px) 0;
  background: var(--sp-bg-soft);
  position: relative;
  overflow: hidden;
}

.sp-pricing::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -12%;
  width: 60%;
  height: 70%;
  background: radial-gradient(circle, rgba(183, 156, 74, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.sp-pricing .sp-wrap {
  position: relative;
}

.sp-pricing-head {
  max-width: 800px;
  margin: 0 auto clamp(45px, 6vw, 70px);
  text-align: center;
}

.sp-pricing-head .sp-eyebrow {
  justify-content: center;
}

.sp-pricing-head .sp-sub {
  margin-left: auto;
  margin-right: auto;
}

.sp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.sp-price-card {
  background: #fff;
  border: 1px solid rgba(183, 156, 74, 0.18);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  transition: border-color 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-price-card:hover {
  border-color: var(--sp-gold);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(21, 23, 22, 0.12);
}

.sp-price-card.featured {
  border-color: var(--sp-gold);
  box-shadow: 0 20px 50px rgba(183, 156, 74, 0.16);
}

.sp-price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--sp-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.sp-price-card:hover::before,
.sp-price-card.featured::before {
  transform: scaleX(1);
}

.sp-price-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--sp-gold);
  color: var(--sp-dark);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  z-index: 2;
}

.sp-price-top {
  padding: 2.2rem 2rem 1.5rem;
  background: var(--sp-bg);
  border-bottom: 1px solid rgba(183, 156, 74, 0.18);
}

.sp-price-kicker {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin-bottom: 1rem;
  padding-right: 5.5rem;
}

.sp-price-top h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--sp-text);
  margin: 0 0 0.8rem;
}

.sp-price-top p {
  margin: 0;
  color: var(--sp-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.sp-price-number {
  padding: 2rem 2rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.sp-price-number span:first-child {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  color: var(--sp-gold);
  line-height: 1;
  margin-top: 0.5rem;
}

.sp-price-number strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 6vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--sp-text);
}

.sp-price-note {
  padding: 0 2rem 1.2rem;
  color: var(--sp-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  font-style: italic;
}

.sp-feature-list {
  list-style: none;
  padding: 0 2rem 1.6rem;
  margin: 0;
}

.sp-feature-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(216, 209, 196, 0.85);
  color: #403c36;
  font-size: 0.95rem;
  line-height: 1.45;
}

.sp-feature-list li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--sp-gold);
  color: var(--sp-dark);
  font-size: 0.72rem;
  font-weight: 700;
}

.sp-feature-list li.not-included {
  color: #aaa29a;
}

.sp-feature-list li.not-included::before {
  content: "×";
  background: #ddd6cc;
  color: #8d867d;
}

.sp-addons {
  margin-top: auto;
  padding: 1.4rem 2rem 1.7rem;
  background: var(--sp-bg);
  border-top: 1px solid rgba(183, 156, 74, 0.18);
}

.sp-addons-title {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sp-gold);
  margin-bottom: 0.9rem;
  font-weight: 700;
}

.sp-addon-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  color: #403c36;
  padding: 0.35rem 0;
}

.sp-addon-row strong {
  color: var(--sp-text);
}

.sp-disclaimer {
  padding: 0 2rem 1.8rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--sp-muted);
  font-style: italic;
}

.sp-travel-note {
  max-width: 900px;
  margin: 2.8rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(183, 156, 74, 0.3);
  text-align: center;
  color: var(--sp-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* =========================================
   FAQ SECTION
========================================= */

.sp-faq {
  background: var(--sp-dark);
  color: var(--sp-white);
  padding: clamp(80px, 10vw, 130px) 0;
  position: relative;
  overflow: hidden;
}

.sp-faq::before {
  content: "";
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(183, 156, 74, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.sp-faq .sp-wrap {
  position: relative;
}

.sp-faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.sp-faq .sp-heading {
  color: var(--sp-white);
}

.sp-faq .sp-sub {
  color: rgba(247, 243, 236, 0.68);
}

.sp-faq-list {
  display: grid;
  gap: 0.85rem;
}

.sp-faq-item {
  background: var(--sp-dark-tile);
  border: 1px solid rgba(183, 156, 74, 0.14);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.sp-faq-item:hover,
.sp-faq-item[open] {
  border-color: rgba(183, 156, 74, 0.55);
  background: rgba(183, 156, 74, 0.06);
}

.sp-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--sp-white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.sp-faq-item summary::-webkit-details-marker {
  display: none;
}

.sp-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  color: var(--sp-gold);
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.sp-faq-item[open] summary::after {
  content: "–";
  background: var(--sp-gold);
  color: var(--sp-dark);
  transform: rotate(180deg);
}

.sp-faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: rgba(247, 243, 236, 0.68);
  font-size: 1rem;
  line-height: 1.7;
}

.sp-faq-answer p,
.sp-faq-answer ul {
  margin: 0;
}

.sp-faq-answer ul {
  padding-left: 1.15rem;
}

.sp-faq-answer li {
  margin-bottom: 0.55rem;
}

.sp-faq-answer strong {
  color: var(--sp-white);
}

.sp-faq-cta {
  margin-top: 2.4rem;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
  .sp-info-grid,
  .sp-faq-grid {
    grid-template-columns: 1fr;
  }

  .sp-info-image,
  .sp-info-image img {
    min-height: 420px;
  }

  .sp-price-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sp-wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .sp-info,
  .sp-pricing,
  .sp-faq {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .sp-check-grid {
    grid-template-columns: 1fr;
  }

  .sp-info-image,
  .sp-info-image img {
    min-height: 340px;
  }

  .sp-price-top,
  .sp-price-number,
  .sp-price-note,
  .sp-feature-list,
  .sp-addons,
  .sp-disclaimer {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .sp-price-badge {
    position: static;
    display: inline-block;
    margin: 1.2rem 1.4rem 0;
    width: fit-content;
  }

  .sp-price-kicker {
    padding-right: 0;
  }

  .sp-faq-item summary {
    padding: 1.15rem 1.2rem;
  }

  .sp-faq-answer {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}