/*==========================================================
  TWIGGLE CAD STUDIO — Architectural Design System
  Palette locked to brand: Gold #b38e6d / Teal #008891
  Type: Urbanist (display) + Epilogue (text)
==========================================================*/

:root {
    --brand-teal: #008891;      /* Teal — technical accent */
    --brand-gold: #b38e6d;    /* Gold — brand accent */
    --gold-deep: #8f6f52;
    --ink: #101314;          /* Near-black */
    --ink-soft: #2a2f31;
    --paper: #305866;        /* Client-approved blue-green canvas */
    --paper-2: #284b57;
    --line: rgba(243, 240, 232, 0.14);
    --line-strong: rgba(243, 240, 232, 0.28);
    --brand-muted: #d4dddc;
    --white: #ffffff;
    --canvas: #305866;
    --canvas-soft: #3a6674;
    --night: #305866;
    --night-raised: #284b57;
    --night-field: #173740;
    --night-field-focus: #1d414c;
    --night-text: #f3f0e8;
    --night-muted: #d4dddc;

    --light: var(--paper);
    --dark: var(--ink);
    --gray: var(--brand-muted);
    --footer-bg: #172e36;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*** Base ***/
* { -webkit-font-smoothing: antialiased; }

html, body {
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-teal) var(--paper-2);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb {
    background: var(--brand-teal);
    border-radius: 8px;
    border: 2px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-gold); }

/*** Scroll reveal system (replaces WOW.js) ***/
.wow,
[data-reveal] { visibility: visible !important; }

.reveal-init {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);
    will-change: opacity, transform;
}
.reveal-init.fadeInLeft { transform: translate3d(-32px, 0, 0); }
.reveal-init.fadeInRight { transform: translate3d(32px, 0, 0); }
.reveal-init.zoomIn { transform: scale(.96); }
.reveal-init.fadeIn { transform: none; }

.reveal-init.is-revealed {
    opacity: 1;
    transform: none;
}

/* Fail-safe: content must never stay hidden if JS/observer doesn't fire */
@keyframes revealSafety { to { opacity: 1; transform: none; } }
.reveal-init:not(.is-revealed) {
    animation: revealSafety .6s var(--ease) 2s forwards;
}

/* Smooth photo loading */
img.img-fade {
    opacity: 0;
    transition: opacity .7s var(--ease), filter .7s var(--ease);
    filter: blur(6px);
}
img.img-fade.is-loaded {
    opacity: 1;
    filter: none;
}

/*** Route content remains opaque during navigation to prevent image flashing. ***/
.page-content {
    opacity: 1;
}

/*** Reading progress line ***/
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 3000;
    pointer-events: none;
    background: transparent;
}
.scroll-progress span {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-gold));
    transition: transform .12s linear;
}

/*** Gentle parallax layers ***/
.page-hero img,
.hero-img img,
[data-parallax] {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1 !important; transform: none !important; transition: none !important; }
    img.img-fade { opacity: 1 !important; filter: none !important; }
    .scroll-progress { display: none !important; }
    .page-hero img, .hero-img img, [data-parallax] { transform: none !important; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/*** Tailwind ↔ Bootstrap utility conflict guards (text was rendering near-white) ***/
.text-muted { color: var(--brand-muted) !important; }
.text-body { color: var(--ink-soft) !important; }
.text-dark { color: var(--ink) !important; }
.text-light { color: var(--paper) !important; }
.text-white { color: #fff !important; }
.text-white-50 { color: rgba(255, 255, 255, .62) !important; }
.text-primary { color: var(--brand-teal) !important; }
.text-secondary { color: var(--brand-gold) !important; }
.bg-light { background-color: var(--canvas-soft) !important; }
.bg-dark { background-color: var(--ink) !important; }
.bg-white { background-color: var(--canvas-soft) !important; }


body {
    font-family: 'Epilogue', system-ui, sans-serif;
    color: var(--ink-soft);
    background-color: var(--canvas);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
}

/* Client colour refresh: preserve the existing structure and imagery while
   carrying the approved blue-green canvas through every public page. */
.page-content,
.page-content > div,
.page-content > section,
.page-content > .container,
.page-content > .container-fluid,
.page-content > .container-xxl,
.page-content .bg-light,
.page-content .bg-white {
    background-color: var(--canvas) !important;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content .h1,
.page-content .h2,
.page-content .h3,
.page-content .h4,
.page-content .h5,
.page-content .h6,
.page-content .text-dark,
.page-content .text-body {
    color: var(--night-text) !important;
}

.page-content p,
.page-content li,
.page-content .text-muted {
    color: var(--night-muted) !important;
}

.page-content .service-item,
.page-content .flat-card,
.page-content .testimonial-item,
.page-content .premium-form-card,
.page-content .comparison-card,
.page-content .plan-sample {
    background-color: var(--canvas-soft) !important;
    border-color: var(--line) !important;
}

.page-content .service-item:hover,
.page-content .flat-card:hover {
    background-color: #416f7d !important;
    border-color: var(--line-strong) !important;
}

.page-content .link-arrow,
.page-content .list-group-item,
.page-content .flat-card .premium-contact-value,
.page-content .comparison-caption h3 {
    color: var(--night-text) !important;
}

.page-content .link-arrow:hover,
.page-content a:not(.btn):hover {
    color: #d7b77e;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Urbanist', system-ui, sans-serif;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: none;
}

h1, .h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
h2, .h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3, .h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.05rem; }

.display-1 { font-size: clamp(3rem, 7vw, 5.6rem) !important; font-weight: 700; letter-spacing: -0.045em; }
.display-4 { font-size: clamp(2.2rem, 4.4vw, 3.6rem) !important; font-weight: 700; letter-spacing: -0.035em; }
.display-5 { font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; font-weight: 700; letter-spacing: -0.03em; }
.display-6 { font-size: clamp(1.6rem, 2.8vw, 2.2rem) !important; font-weight: 700; letter-spacing: -0.02em; }

p { color: var(--brand-muted); }
.lead, .fs-5 { font-size: 1.075rem !important; line-height: 1.8; }

a { text-decoration: none; }

::selection { background: var(--brand-gold); color: #fff; }

.text-primary { color: var(--brand-teal) !important; }
.text-secondary { color: var(--brand-gold) !important; }
.bg-light { background-color: var(--canvas-soft) !important; }
.bg-dark { background-color: var(--ink) !important; }
.border-secondary { border-color: var(--brand-gold) !important; }

/*** Eyebrow / section label ***/
.section-title,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Epilogue', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-bottom: 1.1rem;
}

.section-title::before,
.eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--brand-gold);
    display: inline-block;
}

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/*** Buttons ***/
.btn {
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all .45s var(--ease);
    transform: perspective(1px) translateZ(0);
}

.service-item, .flat-card, .split-media {
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.service-item:hover, .flat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}

.hero-stat-value {
    display: inline-block;
    transition: transform 0.4s var(--ease);
}

.hero-stats > div:hover .hero-stat-value {
    transform: scale(1.1);
    color: var(--brand-gold);
}

.btn.btn-primary {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--white);
    padding: 15px 32px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}

.btn.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-gold);
    transform: translateY(101%);
    transition: transform .45s var(--ease);
    z-index: -1;
}

.btn.btn-primary > * { position: relative; z-index: 1; }

.btn.btn-primary:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: var(--ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.3);
}

.btn.btn-primary:hover::after { transform: translateY(0); }
.btn.btn-primary:focus-visible,
.btn.btn-primary:active {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: var(--ink) !important;
}

.btn.btn-outline-light {
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
    padding: 15px 32px;
    background: transparent;
    transition: all .45s var(--ease);
}
.btn.btn-outline-light:hover {
    background: var(--white);
    color: var(--ink);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn.btn-outline-dark {
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 15px 32px;
    background: transparent;
    transition: all .45s var(--ease);
}
.btn.btn-outline-dark:hover { 
    background: var(--ink); 
    color: #fff; 
    border-color: var(--ink);
    transform: translateY(-2px);
}

.btn.btn-secondary { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }

.btn-square { width: 40px; height: 40px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    letter-spacing: 0;
}

.btn-outline-body {
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: transparent;
}
.btn-outline-body:hover {
    color: #fff;
    background: var(--brand-gold);
    border-color: var(--brand-gold);
}

/*** Text link with arrow ***/
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-strong);
    transition: all .35s var(--ease);
}
.link-arrow i { transition: transform .35s var(--ease); }
.link-arrow:hover { color: var(--brand-gold); border-bottom-color: var(--brand-gold); }
.link-arrow:hover i { transform: translateX(6px); }

/*** Back to top ***/
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 99;
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 2px;
    background: var(--ink);
    border: none;
    color: #fff;
}
.back-to-top:hover { background: var(--brand-gold); }
.back-to-top i { font-size: 18px; }

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s;
    z-index: 999999;
}

#spinner.show {
    opacity: 1;
    visibility: visible;
}

.spinner-border { border-width: .12em; }

/*==========================================================
  NAVBAR
==========================================================*/
.navbar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar.shadow-sm {
    background: #fff !important;
    box-shadow: 0 1px 0 var(--line), 0 12px 30px -22px rgba(0,0,0,.35) !important;
}

.navbar .navbar-brand h1 {
    font-family: 'Urbanist', sans-serif;
    color: var(--ink) !important;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin: 0;
}

.navbar .navbar-brand img { height: 30px; margin-right: 12px; }

.navbar .navbar-nav .nav-link {
    position: relative;
    margin-right: 26px;
    padding: 32px 0;
    color: var(--ink) !important;
    font-family: 'Epilogue', sans-serif;
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .72;
    transition: opacity .3s ease, color .3s ease;
}

.navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 26px;
    width: 0;
    height: 1px;
    background: var(--brand-gold);
    transition: width .4s var(--ease);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active { opacity: 1; color: var(--ink) !important; }
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after { width: 100%; }

.navbar .btn.btn-primary { padding: 12px 24px; font-size: .74rem; }

.navbar-toggler { 
    border: none; 
    padding: 10px; 
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--brand-gold); outline-offset: 2px; }

.hamburger-icon {
    width: 24px;
    height: 18px;
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.hamburger-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.hamburger-icon span:nth-child(1) { top: 0px; }
.hamburger-icon span:nth-child(2) { top: 8px; }
.hamburger-icon span:nth-child(3) { top: 16px; }

.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(1) {
    top: 8px;
    transform: rotate(135deg);
}

.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(3) {
    top: 8px;
    transform: rotate(-135deg);
}

.navbar-collapse {
    transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out;
}

/* Tailwind's `collapse` utility (visibility: collapse) conflicts with
   Bootstrap's `.collapse` class — keep Bootstrap behavior. */
.navbar-collapse.collapse {
    visibility: visible;
}
.navbar-collapse.collapse:not(.show) {
    visibility: hidden;
}
@media (min-width: 992px) {
    .navbar-collapse.collapse:not(.show) {
        visibility: visible;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse,
    .navbar-collapse.collapse {
        display: block !important;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        visibility: visible;
        transition: max-height .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, transform .35s ease;
    }
    .navbar-collapse.show,
    .navbar-collapse.collapse.show {
        max-height: 85vh;
        overflow-y: auto;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .navbar-collapse .navbar-nav .nav-link {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .35s ease, transform .35s ease;
    }
    .navbar-collapse.show .navbar-nav .nav-link {
        opacity: 1;
        transform: translateY(0);
    }
    .navbar-collapse.show .navbar-nav .nav-link:nth-child(1) { transition-delay: .06s; }
    .navbar-collapse.show .navbar-nav .nav-link:nth-child(2) { transition-delay: .11s; }
    .navbar-collapse.show .navbar-nav .nav-link:nth-child(3) { transition-delay: .16s; }
    .navbar-collapse.show .navbar-nav .nav-link:nth-child(4) { transition-delay: .21s; }
    .navbar-collapse.show .navbar-nav .nav-link:nth-child(5) { transition-delay: .26s; }
    .navbar-collapse.show .navbar-nav .nav-link:nth-child(6) { transition-delay: .31s; }
}

/* Hide-on-scroll-down navigation */
.navbar.sticky-top {
    transform: translateY(0);
    transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .45s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.navbar.sticky-top.nav-hidden {
    transform: translateY(-105%);
}
@media (prefers-reduced-motion: reduce) {
    .navbar.sticky-top.nav-hidden { transform: none; }
    .navbar-collapse, .navbar-collapse.collapse { transition: none; }
}

@media (max-width: 991.98px) {
    .navbar { padding: 12px 0; }
    .navbar .navbar-brand h1 { font-size: 1rem; letter-spacing: .12em; }
    .navbar .navbar-nav {
        margin-top: 14px;
        border-top: 1px solid var(--line);
        padding-top: 8px;
    }
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        opacity: 1;
        font-size: .82rem;
    }
    .navbar .navbar-nav .nav-link::after { display: none; }
    .navbar .navbar-nav .nav-link.active { color: var(--brand-gold) !important; }
}

/*==========================================================
  SPLIT-SCREEN HERO
==========================================================*/
.page-hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.page-hero .row { --bs-gutter-x: 0; }

.page-hero-content {
    padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 84px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62vh;
}

.page-hero-content h1,
.page-hero-content h2 { color: #fff; }

.page-hero-content p { color: rgba(255,255,255,.62); max-width: 46ch; }

.page-hero .eyebrow,
.page-hero .section-title { color: var(--brand-gold); }

.page-hero-index {
    font-family: 'Urbanist', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3em;
    color: rgba(255,255,255,.35);
    margin-bottom: 2.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.page-hero-media {
    position: relative;
    min-height: 62vh;
    overflow: hidden;
}

.page-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(18%) brightness(.92);
    transform: scale(1.06);
    animation: heroDrift 18s ease-out forwards;
}

@keyframes heroDrift { to { transform: scale(1); } }

.page-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16,19,20,.85) 0%, rgba(16,19,20,0) 42%);
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 2.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255,255,255,.12);
}

.hero-stat-value {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
}

.hero-stat-label {
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 8px;
}

.hero-breadcrumb {
    margin-top: 2rem;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}
.hero-breadcrumb a { color: rgba(255,255,255,.65); }
.hero-breadcrumb a:hover { color: var(--brand-gold); }

@media (max-width: 991.98px) {
    .page-hero-content { min-height: auto; padding: 64px 28px; }
    .page-hero-media { min-height: 46vh; }
    .page-hero-media::after { background: linear-gradient(180deg, rgba(16,19,20,.55), rgba(16,19,20,.15)); }
}

/* legacy page-header fallback */
.page-header { background: var(--ink); padding: 140px 0 100px 0 !important; }
.page-header h1 { color: #fff; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/*==========================================================
  SECTIONS
==========================================================*/
.container-xxl { padding-top: clamp(60px, 8vw, 110px); padding-bottom: clamp(60px, 8vw, 110px); }
.container-xxl.py-5 { padding-top: clamp(60px, 8vw, 110px) !important; padding-bottom: clamp(60px, 8vw, 110px) !important; }

.section-head { max-width: 720px; }

/*** Editorial split rows ***/
.split-row { align-items: center; }

.split-media {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    aspect-ratio: 4 / 3;
}
.split-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}
.split-media:hover img { transform: scale(1.05); }

.split-media-tag {
    position: absolute;
    left: 0; bottom: 0;
    background: var(--brand-gold);
    color: #fff;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 12px 20px;
}

/*** About / feature legacy image stack -> clean single frame ***/
.about-img,
.feature-img {
    position: relative;
    min-height: 420px;
    height: 100%;
}
.about-img img,
.feature-img img {
    position: absolute;
    object-fit: cover;
}
.about-img img:first-child,
.feature-img img:first-child {
    width: 72%; height: 78%;
    top: 0; left: 0;
}
.about-img img:last-child,
.feature-img img:last-child {
    width: 52%; height: 52%;
    right: 0; bottom: 0;
    margin: 0;
    border: 10px solid #fff;
}
.about-img::before,
.feature-img::before { display: none; }

/*** Cards ***/
.service-item,
.flat-card {
    position: relative;
    background: var(--canvas-soft);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color .45s var(--ease), transform .45s var(--ease), background .45s var(--ease);
}

.service-item::before,
.flat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 2px;
    background: var(--brand-gold);
    transition: width .5s var(--ease);
}

.service-item:hover,
.flat-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-4px);
    background: #f7f3ed;
    box-shadow: 0 26px 50px -34px rgba(16,19,20,.45) !important;
}

.service-item:hover::before,
.flat-card:hover::before { width: 100%; }

.service-item h3, .service-item h4 { color: var(--ink); }
.service-item:hover p,
.service-item:hover .text-muted { color: var(--brand-muted) !important; }
.service-item:hover h3,
.service-item:hover h4 { color: var(--ink); }
.service-item:hover .btn.btn-primary { color: var(--ink) !important; }
.service-item:hover .btn.btn-primary {
    background: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}
.service-item .service-text { background: transparent; }

.card-index {
    font-family: 'Urbanist', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .26em;
    color: var(--brand-gold);
    display: block;
    margin-bottom: 1.4rem;
}

.icon-frame {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--brand-gold);
    font-size: 20px;
    margin-bottom: 1.4rem;
    transition: all .45s var(--ease);
}
.service-item:hover .icon-frame,
.flat-card:hover .icon-frame { background: var(--ink); border-color: var(--ink); color: #fff; }

.hover-shadow { transition: all .45s var(--ease); }
.hover-shadow:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(16,19,20,.45) !important; }
.hover-scale { transition: transform .6s var(--ease); }
.hover-scale:hover { transform: scale(1.03); }

.list-group-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    color: var(--ink);
    font-weight: 500;
}

.badge { border-radius: 2px; font-weight: 600; letter-spacing: .08em; }
.badge.bg-secondary { background: var(--brand-gold) !important; }

/*** Stats strip ***/
.stat-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stat-cell { padding: 40px 24px; border-right: 1px solid var(--line); }
.stat-cell:last-child { border-right: 0; }
.stat-cell h2 { font-size: 2.6rem; margin-bottom: 6px; }
.stat-cell p { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin: 0; }
@media (max-width: 767.98px) { .stat-cell { border-right: 0; border-bottom: 1px solid var(--line); } }

/*** CTA band ***/
.cta-band {
    background: var(--ink);
    color: #fff;
    padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 72px);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.cta-band h1, .cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.6); }
.cta-band::after {
    content: "";
    position: absolute;
    right: -80px; top: -80px;
    width: 320px; height: 320px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

/*** Project tabs ***/
.project .nav .nav-link { background: var(--paper); border-radius: 2px; transition: .4s var(--ease); }
.project .nav .nav-link.active { background: var(--ink); }
.project .nav .nav-link.active h3 { color: #fff !important; }

/*** Team ***/
.team-items { margin: -.75rem; }
.team-item { padding: .75rem; }
.team-item::after { display: none; }
.team-item .team-social { position: absolute; width: 100%; bottom: -20px; left: 0; }
.team-item .team-social .btn { display: inline-flex; margin: 0 2px; color: var(--ink); background: #fff; border: 1px solid var(--line); }
.team-item .team-social .btn:hover { color: #fff; background: var(--brand-gold); border-color: var(--brand-gold); }

/*** Testimonial ***/
.testimonial-carousel { display: flex !important; flex-direction: column-reverse; max-width: 760px; margin: 0 auto; }
.testimonial-item {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: clamp(28px, 5vw, 56px);
    margin: 16px;
}
.testimonial-carousel .owl-dots { display: flex; align-items: center; justify-content: center; height: 90px; }
.testimonial-carousel .owl-dots .owl-dot { position: relative; width: 56px; height: 56px; margin: 0 6px; transition: .4s var(--ease); filter: grayscale(1); }
.testimonial-carousel .owl-dots .owl-dot.active { width: 76px; height: 76px; filter: none; }
.testimonial-carousel .owl-dots .owl-dot img { opacity: .35; transition: .4s; width: 100%; height: 100%; object-fit: cover; }
.testimonial-carousel .owl-dots .owl-dot.active img { opacity: 1; }

/*** Datepicker ***/
.bootstrap-datetimepicker-widget.bottom { top: auto !important; }
.bootstrap-datetimepicker-widget .table * { border-bottom-width: 0; }
.bootstrap-datetimepicker-widget .table th { font-weight: 500; }
.bootstrap-datetimepicker-widget.dropdown-menu { padding: 10px; border-radius: 2px; }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover { background: var(--brand-gold); }
.bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--brand-gold); }

/*==========================================================
  FORMS
==========================================================*/
.form-control, .form-select {
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 16px 18px;
    font-size: .95rem;
    color: var(--ink);
    background-color: #f8f5f0 !important;
    transition: all .3s ease;
}

.form-control::placeholder { color: #a4abae; }

.form-control:focus, .form-select:focus {
    border-color: var(--ink);
    box-shadow: none;
    background-color: #fffdf9 !important;
}

.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 64px;
    background-color: var(--canvas-soft) !important;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding-left: 18px;
}
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 14%, transparent);
}
.form-floating > label {
    padding-left: 18px;
    color: var(--brand-muted);
    font-size: .9rem;
}
.form-floating > textarea.form-control { min-height: 148px; }

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b38e6d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 15px 11px !important;
    padding-right: 48px !important;
    cursor: pointer;
}
.form-select option { background: #f8f5f0; color: var(--ink); }

/* Cross-browser premium dropdown */
.custom-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.custom-select-shell { position: relative; width: 100%; color: var(--ink); }
.custom-select-trigger {
    position: relative;
    width: 100%;
    min-height: 58px;
    padding: 16px 52px 16px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--canvas-soft);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.custom-select-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--brand-gold);
    border-bottom: 1.5px solid var(--brand-gold);
    transform: translateY(-68%) rotate(45deg);
    transition: transform .22s ease;
}
.custom-select-trigger.is-placeholder { color: var(--brand-muted); }
.custom-select-shell.is-open .custom-select-trigger,
.custom-select-trigger:focus-visible {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 14%, transparent);
}
.custom-select-shell.is-open .custom-select-trigger::after { transform: translateY(-30%) rotate(225deg); }
.custom-select-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--canvas-soft);
    box-shadow: 0 18px 45px color-mix(in srgb, var(--ink) 18%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.custom-select-shell.is-open .custom-select-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-option {
    position: relative;
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 42px 11px 13px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}
.custom-select-option:hover,
.custom-select-option:focus-visible { outline: none; background: color-mix(in srgb, var(--brand-gold) 13%, transparent); }
.custom-select-option.is-selected { background: var(--ink); color: var(--canvas-soft); }
.custom-select-option.is-selected::after {
    content: "✓";
    position: absolute;
    right: 14px;
    color: var(--brand-gold);
    font-weight: 700;
}
.custom-select-option:disabled { display: none; }
.form-floating > .custom-select-shell .custom-select-trigger {
    min-height: 64px;
    padding-top: 25px;
    padding-bottom: 7px;
}
.form-floating > .custom-select-native ~ label {
    z-index: 2;
    height: auto;
    padding-top: 8px;
    transform: scale(.85) translateY(0) translateX(.15rem);
    pointer-events: none;
}
.custom-select-native.is-invalid + .custom-select-shell .custom-select-trigger { border-color: #c0392b; }
.custom-select-native.is-valid + .custom-select-shell .custom-select-trigger { border-color: var(--brand-teal); }

@media (max-width: 575.98px) {
    .custom-select-menu { max-height: 240px; }
    .custom-select-option { min-height: 48px; }
}

.premium-form-card {
    background: var(--canvas-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Dark architectural quote forms */
.quote-page {
    color: var(--night-text);
    background: var(--night);
}
.quote-page > .container-xxl:not(.quote-form-section) {
    background: var(--night);
}
.quote-page > .container-xxl:not(.quote-form-section) h2 { color: var(--night-text); }
.quote-page > .container-xxl:not(.quote-form-section) p { color: var(--night-muted); }
.quote-page .flat-card {
    background: var(--night-raised);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}
.quote-page .flat-card .premium-contact-label { color: #8f999b; }
.quote-page .flat-card .premium-contact-value { color: var(--night-text); }
.quote-page .flat-card .icon-frame {
    color: #62c8ce;
    border-color: rgba(0, 136, 145, .32);
    background: rgba(0, 136, 145, .1);
}
.quote-form-section {
    max-width: none;
    padding-top: clamp(64px, 8vw, 112px) !important;
    padding-bottom: clamp(64px, 8vw, 112px) !important;
    background: var(--night);
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.quote-form-section > .container { max-width: 1180px; }
.quote-form-section > .container > .row {
    --bs-gutter-x: clamp(32px, 6vw, 76px);
    align-items: stretch;
}
.quote-form-section .quote-form-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.quote-form-section h2 { color: var(--night-text); }
.quote-form-section p { color: var(--night-muted); }
.quote-form-section .trust-badge {
    width: fit-content;
    color: #62c8ce;
    background: rgba(0, 136, 145, .1);
    border-color: rgba(0, 136, 145, .32);
}
.quote-form-section .premium-form-card {
    height: 100%;
    padding: clamp(28px, 4vw, 48px);
    background: var(--night-raised);
    border-color: rgba(255, 255, 255, .09);
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.quote-form-section .premium-form-card > .trust-badge + h2 { margin-bottom: 2rem !important; }
.quote-form-section .form-control,
.quote-form-section .form-select,
.quote-form-section .form-floating > .form-control,
.quote-form-section .form-floating > .form-select,
.quote-form-section .custom-select-trigger {
    color: var(--night-text);
    background: var(--night-field) !important;
    border-color: rgba(255, 255, 255, .14);
}
.quote-form-section .form-control::placeholder { color: #778183; }
.quote-form-section .form-floating > .form-control {
    padding-top: 25px !important;
    padding-bottom: 7px !important;
}
.quote-form-section .form-floating > .form-control::placeholder { color: transparent; }
.quote-form-section .form-floating > .form-control:focus::placeholder { color: transparent; opacity: 0; }
.quote-form-section .form-floating > label {
    z-index: 2;
    height: auto;
    padding: 8px 18px 0;
    color: #8f999b;
    font-size: .8rem;
    transform: scale(.85) translateY(0) translateX(.15rem) !important;
    transform-origin: 0 0;
    opacity: 1;
    pointer-events: none;
}
.quote-form-section .form-floating > label::after { display: none; }
.quote-form-section .form-control:focus,
.quote-form-section .form-select:focus,
.quote-form-section .form-floating > .form-control:focus,
.quote-form-section .form-floating > .form-select:focus,
.quote-form-section .custom-select-shell.is-open .custom-select-trigger,
.quote-form-section .custom-select-trigger:focus-visible {
    color: var(--night-text);
    background: var(--night-field-focus) !important;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(0, 136, 145, .18);
}
.quote-form-section .custom-select-trigger.is-placeholder { color: #8f999b; }
.quote-form-section .custom-select-menu {
    background: var(--night-field-focus);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .4);
}
.quote-form-section .custom-select-option { color: #dce1e1; }
.quote-form-section .custom-select-option:hover,
.quote-form-section .custom-select-option:focus-visible { background: rgba(0, 136, 145, .14); }
.quote-form-section .custom-select-option.is-selected {
    color: #fff;
    background: var(--brand-teal);
}
.quote-form-section .premium-file-upload {
    min-height: 164px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(179, 142, 109, .48);
    background: rgba(179, 142, 109, .05);
}
.quote-form-section .premium-file-upload:hover,
.quote-form-section .premium-file-upload.is-dragging {
    border-color: var(--brand-gold);
    background: rgba(179, 142, 109, .1);
}
.quote-form-section .file-upload-label span { color: var(--night-text) !important; }
.quote-form-section .file-upload-label small { color: #8f999b !important; }
.quote-form-section .file-upload-label i { color: #62c8ce !important; }
.quote-form-section .btn.btn-primary {
    min-height: 56px;
    border-color: var(--brand-teal);
    background: var(--brand-teal);
    color: #fff;
    letter-spacing: .12em;
}
.quote-form-section .btn.btn-primary::after { background: var(--night-text); }
.quote-form-section .btn.btn-primary:hover,
.quote-form-section .btn.btn-primary:focus-visible { color: var(--ink); border-color: var(--night-text); }
.quote-form-section .form-privacy-note {
    margin-top: 14px;
    color: #778183;
    font-size: .72rem;
    line-height: 1.55;
    text-align: center;
}
.quote-form-section .glass-card {
    background: rgba(255, 255, 255, .035) !important;
    border-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}
.quote-form-section .glass-card:hover { background: rgba(255, 255, 255, .055) !important; }
.quote-form-section .glass-card h3 { color: var(--night-text) !important; }
.quote-form-section .glass-card p { color: #9ca6a8 !important; }
.quote-form-section .glass-card .btn-lg-square {
    background: rgba(0, 136, 145, .14) !important;
    border: 1px solid rgba(0, 136, 145, .32);
}
.quote-form-section .glass-card .btn-lg-square i { color: #62c8ce !important; }
.quote-form-section .invalid-feedback { color: #ff9188; }
.quote-form-section .file-item {
    color: #dce1e1;
    background: var(--night-field) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
.contact-form-section iframe {
    min-height: 560px;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 6px !important;
    filter: grayscale(.25) contrast(1.05);
}

@media (max-width: 991.98px) {
    .quote-form-section .quote-form-intro { margin-bottom: 12px; }
    .contact-form-section iframe { min-height: 420px; }
}

@media (max-width: 575.98px) {
    .quote-form-section { padding-top: 48px !important; padding-bottom: 48px !important; }
    .quote-form-section .premium-form-card { padding: 22px 18px; }
    .quote-form-section .premium-file-upload { min-height: 148px; padding: 26px 16px; }
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-teal);
    font-weight: 600;
    margin-bottom: 1.4rem;
}

/*** Validation ***/
.invalid-feedback { display: none; font-size: .76rem; color: #a9372b; margin-top: .45rem; font-weight: 600; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #c0392b !important; }
.form-floating .form-control.is-invalid { border-color: #c0392b !important; }
.form-select.is-invalid,
.form-select.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b38e6d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
}
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback { display: block; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--brand-teal) !important; }
.form-floating .form-control.is-valid { border-bottom-color: var(--brand-teal) !important; }

/*==========================================================
  CONTACT BLOCKS
==========================================================*/
.section-hero-split {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    border-radius: 2px;
}
.section-hero-content { padding: clamp(40px, 6vw, 80px); color: #fff; }
.section-hero-content h1, .section-hero-content h2 { color: #fff; }

.glass-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 2px;
    transition: all .4s var(--ease);
}
.glass-card:hover { border-color: var(--brand-gold); background: rgba(255,255,255,.07); }

.contact-icon-box {
    width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--brand-gold);
    font-size: 20px;
    margin-bottom: 18px;
}

.premium-contact-item { display: flex; align-items: center; margin-bottom: 24px; }

.premium-contact-icon {
    width: 46px; height: 46px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 18px;
    flex-shrink: 0;
    color: var(--brand-gold);
    transition: all .4s var(--ease);
}
.premium-contact-item:hover .premium-contact-icon { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.premium-contact-icon i { font-size: 16px; }

.premium-contact-label {
    font-size: .66rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Premium File Upload */
/* Readable service badges (bg-secondary maps to gold and hid the text) */
.badge-soft-gold {
    background: rgba(179, 142, 109, 0.12);
    color: var(--gold-deep);
    border: 1px solid rgba(179, 142, 109, 0.45);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-soft-ink {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.premium-file-upload {
    border: 1px dashed color-mix(in srgb, var(--brand-gold) 55%, transparent);
    border-radius: 6px;
    padding: clamp(30px, 5vw, 48px) 24px;
    background: color-mix(in srgb, var(--brand-gold) 5%, var(--canvas-soft));
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.premium-file-upload:hover,
.premium-file-upload.is-dragging {
    border-color: var(--brand-gold);
    background: color-mix(in srgb, var(--brand-gold) 10%, var(--canvas-soft));
    transform: translateY(-2px);
}

.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    margin: 0;
}
.file-upload-label i { color: var(--brand-teal) !important; font-size: 1.6rem; }
.file-upload-label span { color: var(--ink) !important; font-weight: 700; }
.file-upload-label small { color: var(--brand-muted) !important; }

.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.file-item {
    background: #fff;
    border: 1px solid #eee;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.file-item i {
    color: #b38e6d;
}

.file-item .remove-file {
    color: #ff4d4d;
    cursor: pointer;
    margin-left: 5px;
}


.premium-contact-value {
    display: block;
    font-family: 'Urbanist', sans-serif;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: color .3s ease;
}
.premium-contact-item:hover .premium-contact-value { color: var(--brand-gold); }

@media (max-width: 575.98px) {
    .premium-contact-item { flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
    .premium-contact-icon { width: 52px; height: 52px; margin: 0 0 14px 0; }
    .premium-contact-icon i { font-size: 19px; }
    .premium-contact-value { font-size: 1.15rem; padding: 6px 0; }
}

/*==========================================================
  FOOTER
==========================================================*/
.footer {
    background-color: var(--ink) !important;
    border-top: 1px solid rgba(255,255,255,.05);
}

.footer-heading {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.75rem !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase;
    color: var(--brand-gold) !important;
    font-weight: 700;
    margin-bottom: 2rem;
}

.footer-nav {
    display: flex;
    flex-direction: column;
}

.footer-link {
    font-family: 'Epilogue', sans-serif;
    color: rgba(255,255,255,.5) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    transition: all 0.3s var(--ease);
    display: inline-block;
    width: fit-content;
}

.footer-link:hover {
    color: #fff !important;
    transform: translateX(5px);
}

.footer-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: all 0.3s var(--ease);
    border-radius: 2px;
}

.footer-social-link:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #fff;
    transform: translateY(-3px);
}

.newsletter-copy {
    max-width: 25rem;
    margin: 0 0 1.25rem;
    color: rgba(255,255,255,.58);
    font-family: 'Epilogue', sans-serif;
    font-size: .875rem;
    line-height: 1.7;
}

.newsletter-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.5rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 4px;
    background: rgba(255,255,255,.045);
    transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}

.newsletter-control:focus-within {
    border-color: var(--brand-gold);
    background: rgba(255,255,255,.065);
    box-shadow: 0 0 0 3px rgba(179,142,109,.13);
}

.newsletter-input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f4f2ee !important;
    font-family: 'Epilogue', sans-serif;
    font-size: .84rem !important;
    padding: 0 1rem !important;
    box-shadow: none !important;
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(255,255,255,.42) !important;
    opacity: 1;
}

.newsletter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-width: 8.25rem;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.12);
    background: var(--brand-gold);
    color: var(--ink);
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: .74rem;
    text-transform: uppercase;
    padding: 0 1rem;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

.newsletter-btn i {
    font-size: .72rem;
    transition: transform .25s var(--ease);
}

.newsletter-btn:hover,
.newsletter-btn:focus-visible {
    background: #f4f2ee;
    color: var(--ink);
}

.newsletter-btn:hover i,
.newsletter-btn:focus-visible i {
    transform: translateX(3px);
}

.newsletter-btn:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: -4px;
}

.newsletter-btn:disabled {
    cursor: wait;
    opacity: .72;
}

.newsletter-privacy,
.newsletter-msg {
    margin: .7rem 0 0;
    color: rgba(255,255,255,.4);
    font-family: 'Epilogue', sans-serif;
    font-size: .69rem;
    line-height: 1.5;
}

.newsletter-msg.alert-danger,
.newsletter-msg.text-danger {
    color: #ffb4ab !important;
}

.footer-bottom {
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

@media (max-width: 991.98px) {
    .footer { text-align: center; }
    .footer .row > div { margin-bottom: 3rem; }
    .footer-nav { align-items: center; }
    .footer-link:hover { transform: translateY(-2px); }
    .footer-social-link { margin: 0 8px; }
    .footer .d-flex { justify-content: center; }
    .newsletter-copy { margin-right: auto; margin-left: auto; }
}

@media (max-width: 575.98px) {
    .newsletter-control { grid-template-columns: minmax(0, 1fr) 3.5rem; }
    .newsletter-btn { min-width: 3.5rem; padding: 0; }
    .newsletter-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .newsletter-btn i { font-size: .8rem; }
}


.transition-all { transition: all .3s var(--ease); }

/*** Home hero sizing ***/
.page-hero .home-hero-media,
.page-hero:first-of-type .page-hero-content { min-height: 78vh; }
@media (max-width: 991.98px) { .page-hero .home-hero-media { min-height: 52vh; } }
.hero-stats { gap: 20px 40px; }
.page-hero .btn.btn-primary,
.cta-band .btn.btn-primary {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #fff;
}
.page-hero .btn.btn-primary::after,
.cta-band .btn.btn-primary::after { background: #fff; }
.page-hero .btn.btn-primary:hover,
.cta-band .btn.btn-primary:hover { color: var(--ink); border-color: #fff; background: var(--brand-gold); }

/*** Split hero media fills column ***/
.page-hero .row { align-items: stretch; }
.page-hero-media { height: 100%; }
.flat-card .premium-contact-label { color: var(--brand-muted); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.flat-card .premium-contact-value { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.flat-card .premium-contact-value:hover { color: var(--brand-gold); }

/* File Upload Enhancements */
.upload-progress-container {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    display: none;
}

.upload-progress-bar {
    height: 100%;
    background: var(--brand-gold);
    width: 0%;
    transition: width 0.3s ease;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 4px;
    margin-bottom: 8px;
    position: relative;
}

.file-item.uploading {
    border-color: var(--brand-gold) !important;
    background: var(--paper) !important;
}

.file-item.error {
    border-color: #dc3545 !important;
}

.file-item.success {
    border-color: #28a745 !important;
}

.retry-upload {
    cursor: pointer;
    color: var(--brand-gold);
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
}

.retry-upload:hover {
    text-decoration: underline;
}

.file-item .fa-times-circle {
    cursor: pointer;
    color: #dc3545;
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.file-item .fa-times-circle:hover {
    opacity: 1;
}

/* ==========================================================
   Brand token guard — Tailwind's theme redefines --primary /
   --secondary; re-assert the locked brand palette last.
   ========================================================== */
:root {
    --primary: #008891 !important;      /* Teal */
    --secondary: #b38e6d !important;    /* Gold */
}

/*==========================================================
  Motion & finish polish
==========================================================*/
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Buttons */
.btn {
    transition: transform .35s var(--ease), background-color .35s var(--ease),
                color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Cards & tiles lift gently on hover */
.service-item, .feature-item, .flat-card, .card, .portfolio-item, .team-item, .step-card {
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.service-item:hover, .feature-item:hover, .flat-card:hover,
.card:hover, .portfolio-item:hover, .team-item:hover, .step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -32px rgba(16, 19, 20, .35);
    border-color: var(--line-strong);
}

/* Image containers: slow zoom on hover */
.img-zoom, .portfolio-item img, .service-item img, .team-item img {
    transition: transform 1.1s var(--ease);
}
.img-zoom:hover img,
.portfolio-item:hover img,
.service-item:hover img,
.team-item:hover img { transform: scale(1.04); }

/* Links */
a { transition: color .3s var(--ease), opacity .3s var(--ease); }

/* Focus visibility for accessibility */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Prevent layout shift while photos stream in */
img { max-width: 100%; height: auto; background-color: var(--paper-2); }

/*==========================================================
  PREMIUM MOTION LAYER
==========================================================*/

/* Never let motion hide content: reveal from a readable baseline */
.reveal-init { opacity: .001; }

/* Staggered children inside reveal blocks */
.reveal-init.is-revealed > * { animation: rise-in .8s var(--ease) both; }
.reveal-init.is-revealed > *:nth-child(2) { animation-delay: .06s; }
.reveal-init.is-revealed > *:nth-child(3) { animation-delay: .12s; }
.reveal-init.is-revealed > *:nth-child(4) { animation-delay: .18s; }

@keyframes rise-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Section headings get a drawn accent rule */
.section-title { position: relative; }

/* Cards: soft lift with light sweep */
.flat-card,
.service-item,
.portfolio-item,
.team-item,
.premium-contact-item,
.feature-card {
    position: relative;
    transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.flat-card:hover,
.service-item:hover,
.portfolio-item:hover,
.team-item:hover,
.premium-contact-item:hover,
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -32px rgba(16, 19, 20, .38);
}
.flat-card::after,
.service-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 1s var(--ease), opacity .4s var(--ease);
}
.flat-card:hover::after,
.service-item:hover::after { transform: translateX(120%); opacity: 1; }

/* Buttons: magnetic sheen */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform .9s var(--ease);
}
.btn:hover::before { transform: translateX(130%); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(16, 19, 20, .5); }
.btn:active { transform: translateY(-1px) scale(.99); }

/* Nav link underline sweep */
.navbar .navbar-nav .nav-link { position: relative; }
.navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 1.5px;
    width: 100%;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ease);
}
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* Hero copy cascade */
.page-hero-content > *,
.hero-content > * { animation: hero-in 1s var(--ease) both; }
.page-hero-content > *:nth-child(2), .hero-content > *:nth-child(2) { animation-delay: .1s; }
.page-hero-content > *:nth-child(3), .hero-content > *:nth-child(3) { animation-delay: .2s; }
.page-hero-content > *:nth-child(4), .hero-content > *:nth-child(4) { animation-delay: .3s; }

@keyframes hero-in {
    from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* Slow ambient zoom on hero photography */
.page-hero img,
.header-carousel img { animation: ken-burns 22s var(--ease) infinite alternate; }
@keyframes ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

/* Counters and stats pop */
.hero-stat-value, .counter-value { transition: color .4s var(--ease), transform .4s var(--ease); }
.hero-stat:hover .hero-stat-value { color: var(--brand-gold); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1 !important; }
    .reveal-init.is-revealed > *,
    .page-hero-content > *, .hero-content > * { animation: none !important; }
    .page-hero img, .header-carousel img { animation: none !important; }
    .btn:hover, .flat-card:hover, .service-item:hover { transform: none !important; }
}

/* --- 2D floor plan sample gallery --- */
.plan-sample {
    background: var(--canvas-soft);
    border: 1px solid rgba(16, 19, 20, 0.08);
    border-radius: 4px;
    overflow: hidden;
    padding: 12px;
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.plan-sample:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(16, 19, 20, .12);
    border-color: var(--brand-teal, #008891);
}
.plan-sample img {
    display: block;
    width: 100%;
    object-fit: contain;
    aspect-ratio: 4 / 3;
    opacity: 1 !important;
    filter: none !important;
}

/*** Anti-spam honeypot (must stay visually hidden, not display:none) ***/
.tw-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/*** Image reliability & premium loading ***/
img {
    transition: opacity .6s var(--ease), filter .6s var(--ease);
    background-color: var(--canvas-soft);
}
img.img-loaded,
.no-js img {
    opacity: 1;
    filter: none;
}
img.img-fallback {
    object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
    img { transition: none; filter: none; opacity: 1; }
}

/*** Mobile & tablet hero: copy overlays the photograph ***/
@media (max-width: 991.98px) {
    /* Vertical reveals avoid creating a temporary horizontal page edge on
       phones and tablets while preserving the same gentle motion. */
    .reveal-init.fadeInLeft,
    .reveal-init.fadeInRight {
        transform: translate3d(0, 26px, 0);
    }

    .page-hero { position: relative; overflow: hidden; }
    .page-hero .container-fluid,
    .page-hero .row { position: relative; }

    .page-hero .row > [class*="col-"]:has(.page-hero-media) {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        padding: 0;
        z-index: 0;
    }

    .page-hero-media,
    .page-hero .home-hero-media {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 0 !important;
        border-radius: 0;
    }

    .page-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 62%;
    }

    .page-hero-media::after {
        background:
            linear-gradient(90deg, rgba(16, 19, 20, .78) 0%, rgba(16, 19, 20, .25) 62%, rgba(16, 19, 20, .1) 100%),
            linear-gradient(180deg, rgba(16, 19, 20, .3) 0%, rgba(16, 19, 20, .68) 45%, rgba(16, 19, 20, .94) 100%);
    }

    .page-hero .row > [class*="col-"]:has(.page-hero-content) {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
    }

    .page-hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: min(88vh, 720px);
        padding: 132px 26px 56px;
        background: transparent;
    }

    .page-hero-content h1 {
        font-size: clamp(2.3rem, 9vw, 3.2rem);
        line-height: 1.05;
        text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
    }

    .page-hero-content p {
        color: rgba(255, 255, 255, .82);
        max-width: 40ch;
        text-shadow: 0 1px 16px rgba(0, 0, 0, .45);
    }

    .page-hero-content .hero-stats {
        margin-top: 34px;
        padding-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, .16);
        gap: 16px 28px;
    }

    .page-hero-content .d-flex.flex-wrap { gap: 12px !important; }
    .page-hero-content .btn { flex: 1 1 44%; text-align: center; padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 575.98px) {
    .page-hero-content { padding: 118px 20px 44px; min-height: min(92vh, 680px); }
    .page-hero-content .hero-stats { display: flex; flex-wrap: wrap; }
    .page-hero-content .hero-stats > div { flex: 1 1 30%; }
    .page-hero-content .btn {
        white-space: nowrap;
        font-size: .74rem;
        letter-spacing: .12em;
        padding: 14px 14px;
    }
}

/*** Admin-managed galleries ***/
.dynamic-gallery .plan-sample img { width: 100%; height: auto; display: block; }
.dynamic-gallery-caption {
    margin-top: 10px;
    font-size: .85rem;
    color: var(--brand-muted, rgba(16,19,20,.7));
}

/* ===== Client logos strip ===== */
.clients-strip {
  padding: 3.5rem 0 3rem;
  background: var(--calm-sand, #f4f2ee);
  border-top: 1px solid rgba(16, 19, 20, 0.08);
  overflow: hidden;
}
.clients-strip-title {
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b6f72;
  margin-bottom: 2rem;
}
.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-marquee-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: clients-scroll 38s linear infinite;
}
.clients-marquee:hover .clients-marquee-track { animation-play-state: paused; }
.clients-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  min-width: 190px;
  padding: 0.9rem 1.4rem;
  background: #ffffff;
  border: 1px solid rgba(16, 19, 20, 0.07);
  border-radius: 10px;
  box-shadow: 0 6px 18px -12px rgba(16, 19, 20, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.clients-marquee-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(16, 19, 20, 0.45);
}
.clients-marquee-item img {
  max-height: 52px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease;
  mix-blend-mode: multiply;
}
.clients-marquee-item:hover img { opacity: 1; filter: grayscale(0%); }

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-marquee-track { animation: none; }
  .clients-marquee { overflow-x: auto; }
}

/* ===== Cookie consent ===== */
.cookie-consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  animation: fadeIn 0.4s ease;
}
.cookie-consent-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: rgba(16, 19, 20, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(179, 142, 109, 0.35);
  border-radius: 14px;
  padding: 1.15rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.cookie-consent-copy { min-width: 0; flex: 1 1 320px; }
.cookie-consent-copy strong {
  display: block;
  font-family: 'Urbanist', sans-serif;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 0.35rem;
}
.cookie-consent-copy p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.cookie-consent-copy a { color: var(--brand-gold, #b38e6d); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.cookie-btn {
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.cookie-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
}
.cookie-btn-ghost:hover { border-color: #fff; color: #fff; }
.cookie-btn-primary {
  background: var(--brand-gold, #b38e6d);
  border: 1px solid var(--brand-gold, #b38e6d);
  color: #101314;
}
.cookie-btn-primary:hover { background: #c9a488; border-color: #c9a488; }
@media (max-width: 575.98px) {
  .cookie-consent-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}

/* ===== Legal pages ===== */
.legal-hero {
  background: #101314;
  color: #fff;
  padding: 7rem 0 3.5rem;
}
.legal-eyebrow {
  font-family: 'Urbanist', sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.72rem;
  color: var(--brand-gold, #b38e6d);
}
.legal-hero h1 {
  font-family: 'Urbanist', sans-serif;
  color: #fff;
  margin: 0.75rem 0 0.5rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
}
.legal-hero p { color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 0.9rem; }
.legal-body { max-width: 860px; }
.legal-body h2 {
  font-family: 'Urbanist', sans-serif;
  font-size: 1.35rem;
  color: #101314;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.legal-body p, .legal-body li { color: #3a3f42; line-height: 1.85; }
.legal-body ul { padding-left: 1.25rem; }
.legal-body a { color: var(--brand-teal, #008891); }

/* ===== Brand logo images ===== */
.navbar-brand .brand-logo { height: 46px; width: auto; display: block; }
@media (max-width: 991.98px) { .navbar-brand .brand-logo { height: 38px; } }
.footer .brand-logo-footer { height: 64px; width: auto; max-width: 100%; object-fit: contain; display: block; filter: none; }


/* Seamless clients strip -> footer, compact footer */
.clients-strip { margin-bottom: 0; padding-bottom: 2.5rem; }
.clients-strip + .footer { margin-top: 0 !important; }
.footer { padding-top: 3rem !important; padding-bottom: 0 !important; }
.footer .footer-heading { margin-bottom: 1rem !important; }
@media (max-width: 991.98px) {
    .footer .row > div { margin-bottom: 1.75rem; }
}

/* Brand + client logos must never sit on a paper-colored box */
.brand-logo, .brand-logo-footer, .clients-strip img, .client-logo img {
    background-color: transparent !important;
}

/* ===== Smooth image lightbox ===== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    z-index: 999999;
    background: rgba(11, 14, 15, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overscroll-behavior: contain;
    touch-action: none;
}

.lightbox-overlay:not([open]) { display: none; }
.lightbox-overlay::backdrop { background: transparent; }

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-stage {
    position: relative;
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-image {
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    opacity: 1;
    transition: transform 0.2s ease;
    cursor: grab;
}
.lightbox-image.is-loaded { opacity: 1; }
.lightbox-image:active { cursor: grabbing; }

.lightbox-loader {
    position: absolute;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--brand-teal, #008891);
    border-radius: 50%;
    animation: lightboxSpin 0.9s linear infinite;
}
@keyframes lightboxSpin { to { transform: rotate(360deg); } }

.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, opacity 0.25s ease;
    backdrop-filter: blur(6px);
}
.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.05);
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

.lightbox-toolbar {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: 'Epilogue', sans-serif;
    font-size: 0.85rem;
}
.lightbox-toolbar button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.lightbox-toolbar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); }
.lightbox-toolbar button:disabled { opacity: 0.35; cursor: not-allowed; }
.lightbox-counter { min-width: 3.5rem; text-align: center; opacity: 0.85; }

.lightbox-caption {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    backdrop-filter: blur(6px);
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .lightbox-overlay { padding: 0.5rem; }
    .lightbox-stage { max-width: 100%; max-height: 82vh; }
    .lightbox-image { max-height: 82vh; }
    .lightbox-close { top: 0.75rem; right: 0.75rem; width: 42px; height: 42px; }
    .lightbox-prev { left: 0.5rem; width: 42px; height: 42px; }
    .lightbox-next { right: 0.5rem; width: 42px; height: 42px; }
    .lightbox-toolbar { bottom: 0.75rem; }
    .lightbox-caption { bottom: 4rem; font-size: 0.82rem; max-width: 90vw; }
}

/* Cursor hint for lightbox-enabled images */
a.plan-sample,
a[data-lightbox] {
    cursor: zoom-in;
}

/*** Real estate image enhancement comparison sliders ***/
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.comparison-card {
    overflow: hidden;
    background: var(--canvas-soft);
    border: 1px solid rgba(16, 19, 20, .1);
    border-radius: 6px;
    box-shadow: 0 18px 42px rgba(16, 19, 20, .1);
}
.comparison-stage {
    --comparison-position: 50%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--ink);
    isolation: isolate;
    touch-action: pan-y;
}
.comparison-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    filter: none !important;
    user-select: none;
    pointer-events: none;
}
.comparison-before-layer {
    position: absolute;
    inset: 0;
  clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0);
    overflow: hidden;
    z-index: 1;
}
.comparison-image-after {
    width: 100%;
}
.comparison-label {
    position: absolute;
    top: 16px;
    z-index: 4;
    padding: 7px 11px;
    border-radius: 3px;
    background: rgba(16, 19, 20, .8);
    color: #fff;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.comparison-label-before { left: 16px; }
.comparison-label-after { right: 16px; background: color-mix(in srgb, var(--brand-teal) 88%, transparent); }
.comparison-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--comparison-position);
    z-index: 3;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(16, 19, 20, .18);
    transform: translateX(-50%);
    pointer-events: none;
}
.comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--brand-gold);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(16, 19, 20, .28);
    transform: translate(-50%, -50%);
}
.comparison-range {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: ew-resize;
    opacity: 0;
}
.comparison-stage:focus-within {
    outline: 3px solid color-mix(in srgb, var(--brand-gold) 72%, transparent);
    outline-offset: -3px;
}
.comparison-caption { padding: 20px 22px 22px; }
.comparison-caption h3 { margin: 0 0 5px; font-size: 1.12rem; }
.comparison-caption p { margin: 0; color: var(--brand-muted); font-size: .9rem; }

@media (max-width: 767.98px) {
    .comparison-grid { grid-template-columns: 1fr; gap: 20px; }
    .comparison-label { top: 12px; }
    .comparison-label-before { left: 12px; }
    .comparison-label-after { right: 12px; }
    .comparison-handle { width: 44px; height: 44px; }
    .comparison-caption { padding: 17px 18px 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .comparison-card, .comparison-handle { transition: none !important; }
}

/* FAQ accordion — themed for the #305866 background */
.page-content .accordion { --bs-accordion-bg: transparent; max-width: 960px; margin: 0 auto; }
.page-content .accordion-item {
  background: var(--canvas-soft, #3a6674) !important;
  border: 1px solid var(--line, rgba(243,240,232,.18)) !important;
  border-radius: 12px !important; margin-bottom: 12px; overflow: hidden;
}
.page-content .accordion-button {
  background: transparent !important; color: var(--night-text, #f3f0e8) !important;
  font-weight: 600; font-size: 1.05rem; padding: 1.15rem 1.4rem; box-shadow: none !important;
}
.page-content .accordion-button:not(.collapsed) { color: #d7b77e !important; }
.page-content .accordion-button::after { filter: invert(1) brightness(1.6); }
.page-content .accordion-button:not(.collapsed)::after { filter: invert(76%) sepia(30%) saturate(500%) hue-rotate(5deg); }
.page-content .accordion-body {
  background: var(--night-raised, #284b57) !important; color: var(--night-muted, #d4dddc) !important;
  padding: 1.1rem 1.4rem 1.3rem; line-height: 1.7; border-top: 1px solid var(--line, rgba(243,240,232,.18));
}
/* Tailwind's .collapse utility sets visibility:collapse; keep FAQ answers visible */
.accordion-collapse.collapse, .accordion-collapse.collapse * { visibility: visible !important; }
.accordion-collapse.collapse:not(.show) { display: none; }

/* ===== Client reviews ===== */
.rv-wrap { --rv-gold: #d7b77e; --rv-text: var(--night-text, #f3f0e8); --rv-muted: var(--night-muted, #d4dddc); }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.rv-head > div:first-child { max-width: 640px; }
.rv-score { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.5rem; border-radius: 16px;
  background: linear-gradient(135deg, rgba(215,183,126,.16), rgba(215,183,126,.04)); border: 1px solid rgba(215,183,126,.35); }
.rv-score-num { font-family: Urbanist, sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--rv-gold); }
.rv-score-sub { font-size: .85rem; color: var(--rv-muted); margin-top: 4px; }
.rv-stars span { color: rgba(243,240,232,.25); letter-spacing: 2px; }
.rv-stars span.on { color: var(--rv-gold); }
.rv-stars-sm { font-size: 1.05rem; } .rv-stars-lg { font-size: 1.35rem; }
.rv-grid { columns: 3 320px; column-gap: 1.5rem; }
.rv-card { position: relative; break-inside: avoid; margin-bottom: 1.5rem; padding: 1.9rem 1.7rem 1.5rem; border-radius: 18px;
  background: linear-gradient(160deg, #3d6b79 0%, #2c5361 100%); border: 1px solid rgba(243,240,232,.14);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.55); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; overflow: hidden; }
.rv-card:hover { transform: translateY(-4px); border-color: rgba(215,183,126,.5); box-shadow: 0 26px 50px -24px rgba(0,0,0,.7); }
.rv-quote { position: absolute; top: -.6rem; right: 1.1rem; font-family: Georgia, serif; font-size: 7rem; line-height: 1; color: rgba(215,183,126,.16); pointer-events: none; }
.rv-title { font-size: 1.05rem; font-weight: 700; margin: .9rem 0 .2rem; color: var(--rv-text) !important; }
.rv-text { margin: .8rem 0 .6rem; color: var(--rv-text) !important; font-size: 1rem; line-height: 1.75; }
.rv-more { background: none; border: 0; padding: 0; color: var(--rv-gold); font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.rv-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .2rem; }
.rv-tags span { font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; background: rgba(215,183,126,.12); color: var(--rv-gold); border: 1px solid rgba(215,183,126,.3); }
.rv-author { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(243,240,232,.12); }
.rv-author strong { display: block; color: var(--rv-text); font-size: .95rem; }
.rv-author small { color: var(--rv-muted); font-size: .78rem; } .rv-author small i { color: #7fd6b0; }
.rv-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  color: #173740; background: linear-gradient(135deg, #e6c88f, #b38e6d); }
.rv-skeleton { height: 260px; animation: rvPulse 1.4s ease-in-out infinite; }
@keyframes rvPulse { 50% { opacity: .55; } }

.rv-form-shell { display: grid; grid-template-columns: 1fr 1.35fr; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(243,240,232,.14); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.rv-form-side { padding: 3rem 2.6rem; background: radial-gradient(circle at 20% 0%, rgba(215,183,126,.22), transparent 55%), linear-gradient(160deg, #1d414c, #142f37); }
.rv-form-side h2 { color: var(--rv-text) !important; font-size: clamp(1.7rem, 2.6vw, 2.3rem) !important; line-height: 1.15; }
.rv-form-side p { color: var(--rv-muted) !important; }
.rv-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.rv-points li { display: flex; align-items: center; gap: .8rem; color: var(--rv-text); font-size: .95rem; }
.rv-points i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(215,183,126,.15); color: var(--rv-gold); font-size: .85rem; }
.rv-form { padding: 2.6rem; background: #2b5260; }
.rv-hp { position: absolute; left: -9999px; }
.rv-label { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rv-text) !important; }
.rv-label em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--rv-muted); }
.rv-input { width: 100%; padding: .9rem 1.05rem; border-radius: 12px; background: #173740; color: var(--rv-text); border: 1px solid rgba(243,240,232,.18);
  font-size: 1rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.rv-input::placeholder { color: rgba(243,240,232,.42); opacity: 1; }
.rv-input:focus { outline: none; border-color: var(--rv-gold); background: #1b3e48; box-shadow: 0 0 0 4px rgba(215,183,126,.18); }
textarea.rv-input { resize: vertical; min-height: 140px; }
.rv-count { text-align: right; font-size: .75rem; color: var(--rv-muted); margin-top: .3rem; }
.rv-rate { margin-bottom: 1.6rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: rgba(23,55,64,.6); border: 1px solid rgba(243,240,232,.1); }
.rv-rate-row { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.rv-rate-row button { background: none; border: 0; padding: 0 .15rem; font-size: 2.1rem; line-height: 1; color: rgba(243,240,232,.25); cursor: pointer; transition: transform .15s, color .15s; }
.rv-rate-row button.on { color: var(--rv-gold); text-shadow: 0 0 18px rgba(215,183,126,.45); }
.rv-rate-row button:hover { transform: scale(1.15); }
.rv-rate-word { margin-left: .8rem; font-weight: 700; color: var(--rv-gold); }
.rv-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.rv-chips button { font-size: .85rem; font-weight: 600; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; transition: all .2s;
  border: 1px solid rgba(243,240,232,.25); background: rgba(23,55,64,.5); color: var(--rv-text); }
.rv-chips button:hover { border-color: var(--rv-gold); }
.rv-chips button.on { background: var(--rv-gold); border-color: var(--rv-gold); color: #173740; }
.rv-msg { padding: .8rem 1rem; border-radius: 10px; font-weight: 600; }
.rv-msg.ok { background: rgba(127,214,176,.14); color: #a8ecd0 !important; border: 1px solid rgba(127,214,176,.35); }
.rv-msg.err { background: rgba(255,140,120,.12); color: #ffc3b8 !important; border: 1px solid rgba(255,140,120,.35); }
.rv-submit { width: 100%; padding: 1rem 2rem !important; }
@media (max-width: 991.98px) {
  .rv-form-shell { grid-template-columns: 1fr; }
  .rv-form-side, .rv-form { padding: 2rem 1.4rem; }
  .rv-head { align-items: flex-start; }
}