:root {
    /* Base Backgrounds - Deeper and richer */
    --bg-dark: #050a18;
    --bg-darker: #010205; /* Darkened for higher contrast */
    --bs-primary: var(--bg-dark);
    
    /* Luxury Gold Palette - Refined to feel less "yellow" and more "metallic" */
    --accent: #c5a059;           /* Classic Gold */
    --accent-secondary: #e5c17e; /* Soft Gold */
    --accent-light: #f5dba8;     /* Champagne */
    --accent-dark: #8e6f2e;      /* Deep Gold */
    --accent-gold-bright: #ffcc00; 
    
    /* Glassmorphism & Cards */
    --card-bg: rgba(10, 20, 45, 0.6);       /* Lowered opacity for blur effect */
    --card-bg-hover: rgba(15, 30, 60, 0.8);
    --glass-reflection: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    
    /* Borders - Using HSL/RGBA for better blending */
    --border-light: rgba(197, 160, 89, 0.2);
    --border-accent: rgba(197, 160, 89, 0.5);
    
    /* Typography */
    --text-main: #f0f0f0;
    --text-muted: rgba(255, 249, 249, 0.6);
    --text-light: rgba(255, 255, 255, 0.4);
    --stroke: rgba(197, 160, 89, 0.2);

    /* --- ENHANCED GRADIENTS --- */
    
    /* 1. The Main Background: A 3-stop "Radial-Mesh" Gradient 0f1e3c*/
    /* This creates a light source in the top left and a deep void in the bottom right */
    --gradient-bg: radial-gradient(circle at 0% 0%, #020408 0%, transparent 100%),
                   radial-gradient(circle at 50% 50%, #1a2a4a 0%, transparent 70%),
                   radial-gradient(circle at 100% 100%, #020408 0%, #050a18 100%);

    /* 2. The Luxury Text Gradient: Gives a "shimmer" effect */
    --gradient-gold: linear-gradient(135deg, 
        var(--accent-dark) 0%, 
        var(--accent) 25%, 
        var(--accent-light) 50%, 
        var(--accent) 75%, 
        var(--accent-dark) 100%);

    /* 3. Glow Effects */
    --accent-glow: 0 0 20px rgba(197, 160, 89, 0.3);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    --real-secondary-blue: #c5a059; 
    --real-gold: #ffcc00;
    --white: #f0f0f0;
    --color-white: #f0f0f0;
    --color-light: #f0f0f0;
    --color-dark: #f0f0f0;
    --black: #0b0f18;
    
    /* 4. Concierge page variables */
    --gold-primary: #D4AF37;
    --gold-light: #F2D06B;
    --gold-dark: #AA8C2C;
    --black-deep: #050505;
    --black-card: rgba(15, 15, 15, 0.75);
    --glass-border: rgba(212, 175, 55, 0.3);
    --transition-slow: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
[data-bs-theme="dark"] body {
    font-family: 'Inter', sans-serif;
    background:
        linear-gradient(to bottom, #010205 0%, #050a18 13%, #1a2a4a 45%, #050a18 82%, #010205 100%),
        var(--gradient-bg);
    font-family:Inter,sans-serif;
    color:var(--color-light)
}
.bg-primary{
    background:transparent !important;
}
a {
text-decoration:none!important
}

.property-archive-wrapper {
min-height:100vh;
background:var(--gradient-bg);
position:relative;
overflow:hidden
}

.property-archive-wrapper::before {
content:'';
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle at 20% 50%,#c5a0590d 0,transparent 50%),radial-gradient(circle at 80% 80%,#c5a05908 0,transparent 50%);
pointer-events:none;
z-index:0
}

.gold-gradient-text,
.luxury-text,
.text-gold {
    background: linear-gradient(
        135deg,
        var(--accent-dark) 0%,
        var(--accent) 30%,
        var(--accent-light) 50%,
        var(--accent) 70%,
        var(--accent-dark) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.border-secondary{
    border-color: var(--gold-primary) !important;
}
.filter-wrapper {
background:#ffffff05;
border:1px solid var(--border-accent);
border-radius:60px;
padding:1.5rem 2rem;
backdrop-filter:blur(20px);
margin-bottom:4rem;
box-shadow:0 4px 16px #0000004d;
position:relative;
z-index:1;
animation:fadeInUp .8s ease-out .4s both
}

.filter-wrapper::before {
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,#c5a0591a 0,transparent 100%);
border-radius:60px;
pointer-events:none
}

@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(30px)
}

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

.filter-select {
background:#ffffff0d;
border:1px solid var(--border-light);
border-radius:30px;
color:var(--accent);
font-family:'Playfair Display',serif;
font-size:.95rem;
text-transform:uppercase;
cursor:pointer;
outline:0;
padding:.6rem 1.2rem;
transition:all .3s ease;
letter-spacing:.05em
}

.filter-select:hover {
border-color:var(--accent);
background:#c5a0591a;
box-shadow:0 0 5px #c5a05933
}

.filter-select:focus {
border-color:var(--accent-secondary);
box-shadow:0 0 10px #c5a0594d
}

.archive-prop-card {
background:var(--card-bg);
border:1px solid var(--border-light);
border-radius:5px;
overflow:hidden;
transition:all .6s cubic-bezier(.23,1,.32,1);
backdrop-filter:blur(25px);
position:relative;
height:100%;
display:flex;
flex-direction:column;
box-shadow:0 5px 10px #0000004d
}

.archive-prop-card::before {
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,#c5a0591a 0,transparent 100%);
opacity:0;
transition:opacity .6s ease;
pointer-events:none;
z-index:1
}

.archive-prop-card:hover {
transform:translateY(-1px) scale(1.01);
box-shadow:0 5px 10px #c5a05904 0 0 10px #c5a05903
}

.archive-prop-card:hover::before {
opacity:1
}

.prop-img-wrapper img {
width:100%;
max-height:280px;
object-fit:cover;
transition:transform .8s cubic-bezier(.23,1,.32,1);
aspect-ratio:16/10;
overflow:hidden
}

.archive-prop-card:hover .prop-img-wrapper img {
transform:scale(1.12) rotate(1deg)
}

.price-display {
font-family:'Playfair Display',serif;
font-size:2rem;
color:var(--accent-light);
font-weight:700;
letter-spacing:.05em;
text-shadow:0 2px 8px #00000080
}

.price-tag {
padding:0 .5rem .5rem!important
}

@keyframes slideInRight {
from {
opacity:0;
transform:translateX(30px)
}

to {
opacity:1;
transform:translateX(0)
}
}

.prop-stats {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
border-top:1px solid var(--border-light);
padding:.7rem 0;
margin-top:auto
}

.stat-item {
text-align:center;
padding:0 .5rem;
transition:all .3s ease
}

.stat-item:not(:last-child) {
border-right:1px solid var(--border-light)
}

.stat-item:hover {
transform:scale(1.05)
}

.icn-gold {
max-height:45px;
margin-bottom:.3rem;
opacity:.5;
transition:transform .3s ease
}

.stat-item:hover .icn-gold {
transform:scale(1.05)
}

.stat-value {
font-size:1.12rem;
color: var(--white);
font-weight:600;
font-family:'Playfair Display',serif
}

.stat-label {
font-size:1rem;
color:var(--text-light);
font-weight:400;
text-transform:uppercase;
letter-spacing:.05em
}

.mini-amenities {
display:flex;
flex-wrap:wrap;
gap:.8rem;
padding-top:1rem;
border-top:1px dashed var(--border-light)
}

.mini-amenity-item {
font-size:.75rem;
color:var(--text-muted);
display:inline-flex;
align-items:center;
gap:.4rem;
background:#c5a05914;
padding:.4rem .8rem;
border-radius:20px;
border:1px solid #c5a05926;
transition:all .3s ease;
white-space:nowrap
}

.mini-amenity-item:hover {
background:#c5a05926;
border-color:var(--accent);
color:var(--accent)
}

.mini-amenity-item i {
color:var(--accent);
font-size:.9rem;
transition:transform .3s ease
}

.mini-amenity-item:hover i {
transform:scale(1.2)
}

.luxury-title-wrap {
padding:2rem 0
}

.ttlfont {
font-family:'Cormorant SC',serif;
font-weight:300
}

.luxury-text {
font-family:'Cormorant SC',serif;
font-weight:300;
font-size:4rem;
letter-spacing:.15em;
line-height:1.2;
filter:drop-shadow(0 2px 2px #0003)
}
.display-7{
    font-size: 1.8rem;
}
.luxury-divider {
height:1px;
width:15rem;
background:radial-gradient(circle,#a6822b 0,#a6822b00 100%);
margin:20px auto;
opacity:.8
}
.luxury-divider-hero {
height:1.6px;
width:33rem;
background:radial-gradient(circle,#a6822b 0,#a6822b00 100%);
margin:18px;
opacity:.9
}
.luxury-divider-footer {
height:1px;
width:66%;
background:radial-gradient(circle,#a6822b 0,#a6822b00 100%);
margin:20px auto;
opacity:.8
}
.luxury-subtitle {
font-family:'Cormorant SC',serif;
font-weight:400;
font-size:.85rem;
letter-spacing:.5em;
color:var(--accent);
text-transform:uppercase;
opacity:.7
}

.property-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
gap:2.5rem;
position:relative;
z-index:1
}

.publisher-name {
color:var(--accent-light)
}

@media (max-width:1200px) {
.property-grid {
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:2rem
}
}

@media (max-width:768px) {
.property-grid {
grid-template-columns:1fr;
gap:1.5rem
}
}

@media (max-width:991px) {
.luxury-text {
font-size:2rem;
letter-spacing:.2em;
line-height:1.1;
filter:drop-shadow(0 2px 2px #0003)
}

.luxury-subtitle {
font-family:'Cormorant SC',serif;
font-weight:400;
font-size:.75rem;
letter-spacing:.4em;
color:var(--accent);
text-transform:uppercase;
opacity:.7
}
}





.main-slider-wrap {
box-shadow:0 20px 40px #00000080;
border:1px solid var(--border-light);
flex:9;
border-radius:16px;
overflow:hidden
}

h1,h2,h3,h4 {
font-family:'Playfair Display',Cinzel,serif;
color:var(--accent)
}

.h3,h1,h2,h3,h4 {
letter-spacing:2px;
text-transform:uppercase;
font-weight:600
}

p,small,span {
font-family:'Helvetica Neue',Inter,sans-serif;
letter-spacing:.3px
}

.summary-item span {
font-size:.8rem;
color:var(--color-light);
text-transform:uppercase
}

.gallery-container {
height:420px;
display:flex;
gap:12px;
margin-bottom:30px
}

.thumb-slider .swiper-slide {
opacity:.6;
cursor:pointer;
border-radius:10px;
transition:opacity .3s ease,transform .3s ease
}

.thumb-slider .swiper-slide:hover {
opacity:.9;
transform:scale(1.03)
}

.main-slider img {
width:100%;
height:100%;
object-fit:cover
}

.thumb-slider img {
width:100%;
height:100%;
object-fit:cover
}

.summary-bar {
border-radius:12px;
border:1px solid var(--border-light);
backdrop-filter:blur(20px)
}

.summary-item {
padding:16px;
flex:1;
border-right:1px solid var(--stroke)
}

.summary-item:last-child {
border-right:none
}

.meta-icon-box {
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 3px;
border:none!important;
background:0 0!important
}

.meta-icon-box i {
font-size:1.7rem;
color:var(--accent)
}

.sticky-top .prop-card {
text-align:center
}

.archive-prop-card,
.prop-card,
.summary-bar,
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(20px);
}

.prop-card,.sticky-top,.summary-bar {
border:1px solid #c5a05926;
border-radius:12px;
box-shadow:0 10px 30px #0000004d;
backdrop-filter:blur(25px)
}

.sticky-top .h3 {
font-family:'Playfair Display',serif;
color:var(--accent);
margin-bottom:20px
}

.publisher-avatar-wrapper img {
border:1px solid var(--accent);
padding:4px;
border-radius:50%;
width:90px;
height:90px;
object-fit:cover;
background:var(--bg-dark)
}

.prop-card {
background:var(--card-bg);
padding:28px;
margin-bottom:28px;
border:1px solid #ffffff0d
}

.prop-card:hover {
border-color:var(--accent)
}

.amenity-item {
background:#ffffff05;
padding:14px;
border-radius:6px;
border:1px solid var(--stroke);
font-family:Cinzel,serif;
font-size:.95rem;
letter-spacing:.5px;
text-transform:capitalize;
font-weight:300
}

.amenity-item i {
color:var(--accent)
}

.amenity-item:hover {
background:#00d4ff1a
}

#property-map {
background:var(--card-bg);
border-radius:16px;
overflow:hidden;
box-shadow:var(--accent-glow)
}

.btn-success {
background-color:transparent!important;
border-color:var(--accent);
color:var(--accent)
}

.btn-success:hover {
background-color:var(--dark-light);
border-color:var(--dark-light)
}

.btn-outline-light {
border:1px solid var(--accent)!important;
color:var(--accent)!important;
background:0 0;
transition:all .4s ease
}

.btn-outline-light:hover {
background:var(--accent);
color:var(--black)!important
}

.icn {
max-height:45px;
padding-bottom:4px
}

@media (max-width:991px) {
.gallery-container {
flex-direction:column;
height:auto
}

.thumb-slider-wrap {
height:80px
}

.thumb-slider .swiper-slide {
height:100%!important
}
}


/* ==========================================================================
   2. NAVIGATION & HEADER
   ========================================================================== */
.navbar {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    /*background-color: var(--bs-primary) !important;*/
}

.plus700-top-nav {
    min-height: 92px;
}

.plus700-nav-inner {
    position: relative;
    min-height: 92px;
    align-items: center;
}

.plus700-nav-logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.plus700-nav-logo img {
    max-height: 180px;
    width: auto;
    object-fit: contain;
}

.plus700-main-menu {
    padding-left: 240px;
}

.plus700-main-menu .dropdown-menu {
    background: rgba(5, 10, 24, 0.96);
    border: 1px solid var(--border-accent);
    border-radius: 8px;
}

.plus700-main-menu .dropdown-item {
    color: var(--text-main);
    text-transform: uppercase;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

.plus700-main-menu .dropdown-item:hover,
.plus700-main-menu .dropdown-item:focus {
    background: rgba(197, 160, 89, 0.18);
    color: var(--accent-light);
}

/* Corrected Menu Selectors */
.navbar-nav li {
    margin-left: 15px;
    margin-right: 15px;
    list-style: none;
}

.navbar-nav li a {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-dark) !important;
    transition: all 0.3s ease;
    text-decoration: none;
}

.navbar-nav li a:hover {
    color: var(--accent) !important; /* Secondary Blue Hover */
    text-decoration: none !important;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   3. HERO SECTION (Real700 Branding)
   ========================================================================== */


.hero-section {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
    /* Hero bg is handled by the body gradient, but we can add depth here */
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.05;
    pointer-events: none;
}

.real700-title {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    letter-spacing: -2px;
}

.text-secondary-color {
    color: var(--accent-secondary) !important;
    text-shadow: 0 0 5px rgba(197, 160, 89, 0.2);
}

.text-info {
    color: var(--color-light) !important; /* Cyan helper */
}
.text-white{
    color:var(--white) !important;
}
.fw-bold-gold {
    color: var(--real-gold);
    font-weight: 700 !important;
}

/* The horizontal line under the title */
.divider-line {
    width: 100px;
    height: 3px;
    background-color: var(--real-secondary-blue);
}

/* --- The Button with the Glow Effect --- */
.btn-real-cta {
    background: transparent;
    color: white;
    border: 2px solid var(--real-secondary-blue);
    padding: 15px 35px;
    font-weight: 700;
    font-size: 1.2rem;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(197, 160, 89, 0.2);
}

.btn-real-cta:hover {
    background: var(--real-secondary-blue);
    color: var(--real-dark-blue);
    box-shadow: 0 0 5px rgba(197, 160, 89, 0.2);
    transform: translateY(-2px);
}

/* --- THE MAIN BUTTON (From Image) --- */
.btn-start-listing {
    background: linear-gradient(135deg, #ffcc00 0%, #ffbb00 100%);
    color: #001f3f !important;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 50px; /* More rounded like a modern button */
    padding: 15px 40px;
    border: none;
    box-shadow: 0 5px 10px rgba(197, 160, 89, 0.2);
    transition: all 0.3s ease;
}

.btn-start-listing:hover {
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(197, 160, 89, 0.2);
}

/* --- Footer Styling --- */
.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu li a {
    color: var(--dark-light);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.footer-menu li a:hover {
    color: var(--real-secondary-blue);
}

/* --- Social Icons Styling --- */
.social-icons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px; /* Adjust spacing between icons here */
    padding-left: 0;
    margin-bottom: 0;
}

.social-icons li {
    list-style: none !important;
    display: inline-block;
}

.social-icons li a {
    font-size: 1.5rem; /* Make icons look high-end */
    color: var(--accent);
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons li a:hover {
    color: var(--accent-light);
    transform: translateY(-3px);
}
.section-title {
    font-weight: 700;
    font-size: clamp(25px, 2.1vw, 40px);
    letter-spacing: -0.03em;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-bottom: 0;
    letter-spacing: 0.01em;
    margin-bottom: clamp(5px, 0.42vw, 8px);
    position: relative;
    display: inline-block;
    z-index: 1;
}

.section-title:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, -10%);
    
    height: 1.5em; 
    width: 1.5em;
    
    background: radial-gradient(circle, #c5a059 0%, #e5c17e 100%);
    border-radius: 50%;
    opacity: 0.8;
    z-index: -1;
    
    animation: heartbeat-pulse 1.2s ease-in-out 3;
}

/* 3 heartbeats then stops */
@keyframes heartbeat-pulse {
    0%, 100% {
        transform: translate(40%, -10%) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(40%, -10%) scale(1.3);
        opacity: 0.6;
    }
    50% {
        transform: translate(40%, -10%) scale(1);
        opacity: 0.8;
    }
}
.fit-column img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the magic line */
    display: block;
}

.bg-second {
    --bs-bg-opacity: 1;
    background-color: var(--accent) !important;
}
/* Homepage Specific Mini-Cards */
.home-property-card {
    background: var(--card-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.home-property-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: var(--accent-glow);
}

.mini-img-wrapper {
    position: relative;
    height: 200px; /* Smaller than archive height */
    overflow: hidden;
}

.mini-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.home-property-card:hover .mini-img-wrapper img {
    transform: scale(1.1);
}

.price-badge-mini {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(5, 10, 24, 0.8);
    color: var(--accent-light);
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    border: 1px solid var(--border-light);
}

.home-card-body {
    padding: 1.2rem;
}

.mini-title {
    font-size: 1.1rem !important; /* Significantly smaller than archive */
    margin-bottom: 0.8rem;
    color: var(--text-main);
    letter-spacing: 1px;
    /* Limit to 1 line for clean look */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mini-meta i {
    color: var(--accent);
}
.luxury-search-group {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: 50px !important;
    padding: 8px;
    transition: all 0.3s ease;
}

.luxury-search-group:focus-within {
    border-color: var(--accent);
    box-shadow: var(--accent-glow);
}

.luxury-search-group .form-control {
    background: transparent;
    color: var(--text-main);
    border: none;
    font-size: 1.1rem;
}

.luxury-search-group .form-control::placeholder {
    color: var(--text-light);
}

.btn-gold {
    background: var(--accent);
    color: var(--bg-darker);
    border-radius: 40px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-gold:hover {
    background: var(--accent-secondary);
    color: var(--bg-darker);
}

.text-accent { color: var(--accent); }

/*Concierge page specifics*/
/* =========================================================
   LUXURY HERO SECTION
========================================================= */

.plus700-concierge-hero {
    position: relative;
    min-height: 60vh;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /*background:
        radial-gradient(
            circle at center,
            rgba(15, 30, 60, 0.65) 0%,
            #051025 45%,
            #02050b 100%
        );*/
}

/* =========================================================
   ATMOSPHERIC BACKGROUND
========================================================= 

.luxury-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at center,
            rgba(25, 45, 85, 0.35) 0%,
            rgba(5, 16, 37, 0.2) 35%,
            rgba(0, 0, 0, 0.85) 100%
        );
    z-index: 0;
}

/* =========================================================
   HERO LAYOUT
========================================================= */

.luxury-hero-shell {
    position: relative;
    z-index: 2;
}

.luxury-hero-grid {
    min-height: 60vh;
    align-items: flex-end;
    padding:
        2rem
        0
        1.5rem;
}
/* =========================================================
   CENTER CHARACTER
========================================================= */

.luxury-character-stage {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    height: 60vh;

    z-index: 3;
}

.character-wrapper {
    position: relative;
    z-index: 3;
}

.character-img {
    height: 60%;
    max-height: 60%;
    width: auto;
    max-width: 65%;
    object-fit: contain;
    object-position: bottom;

    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,0.55));

    will-change: transform, opacity;
}



/* =========================================================
   BRAND MARK
========================================================= */

.plus700-concierge-brand-mark {
    position: absolute;
    top: 0%;
    left: 55%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
}

.badge-plus {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid rgba(212,175,55,0.4);

    background: rgba(5,16,37,0.65);

    color: var(--accent-light);

    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
}

.plus700-brand-text {
    font-family: 'Cormorant SC', serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.18em;
}

.plus700-brand-sub {
    margin-top: 0.5rem;

    font-size: 0.85rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;

    color: var(--text-muted);
}

/* =========================================================
   PANELS / FAUX GLASS
========================================================= */

.luxury-panel {
    position: absolute;

    background: rgba(5, 16, 37, 0.72);

    border: 1px solid rgba(212, 175, 55, 0.22);

    border-radius: 24px;
    bottom:33px;
    padding: 2rem;

    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.04);

    overflow: hidden;

    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;

    will-change: transform;
}

/* subtle metallic edge */
.luxury-panel::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.05),
            transparent 30%
        );

    pointer-events: none;
}

/* Hover */
.luxury-panel:hover {
    transform: translateY(-5px);

    border-color: rgba(212,175,55,0.4);

    box-shadow:
        0 18px 60px rgba(0,0,0,0.55),
        0 0 30px rgba(197,160,89,0.08);
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.luxury-eyebrow {
    display: inline-block;

    margin-bottom: 1rem;

    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;

    color: var(--text-light);
}

.text-gold {
    background: var(--gradient-gold);
    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* LEFT */
.trust-number {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.trust-label {
    color: var(--text-main);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* RIGHT */
.gratitude-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.gratitude-copy {
    color: var(--text-muted);
    line-height: 1.9;
    font-size: 1rem;
}

/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: luxuryEntrance 1.5s cubic-bezier(.22,1,.36,1) forwards;
}

.delay-2 {
    animation-delay: 0.25s;
}

.delay-3 {
    animation-delay: 0.45s;
}



@keyframes luxuryEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .luxury-hero-grid {
        row-gap: 2rem;
        padding: 6rem 0 3rem;
    }

    .luxury-character-stage {
        min-height: auto;
    }

    .character-img {
        max-width: 420px;
        max-height: 60vh;
    }

    

    .luxury-panel {
        text-align: center;
    }

    .plus700-concierge-brand-mark {
        top: -1.5rem;
    }
}

@media (max-width: 576px) {

    .plus700-concierge-hero {
        min-height: auto;
    }

    .luxury-hero-grid {
        min-height: auto;
    }

    .character-img {
        max-width: 320px;
        max-height: 48vh;
    }

    .luxury-panel {
        padding: 1.5rem;
    }

    .trust-number {
        font-size: 3rem;
    }

    .gratitude-title {
        font-size: 1.6rem;
    }

    .plus700-brand-text {
        font-size: 2rem;
    }
}

/* =========================================================
   DELAYED CONCIERGE MESSAGE
========================================================= */

.luxury-concierge-message {
    position: absolute;

    right: 15%;
    top: 52%;

    transform: translateY(-50%);

    z-index: 6;

    width: min(230px, 90%);
}

/* Card Style */
.plus700-intro-card {
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(10, 22, 48, 0.88),
            rgba(5, 16, 37, 0.74)
        );

    border: 1px solid rgba(212,175,55,0.18);

    border-radius: 24px;

    padding: 1.5rem 1.75rem;

    overflow: hidden;

    box-shadow:
        0 15px 50px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.04);

    backdrop-filter: blur(6px);

    opacity: 0;

    transform:
        translateY(24px)
        translateX(10px);

    animation:
        conciergeReveal 1.4s cubic-bezier(.19,1,.22,1) forwards;

    animation-delay: 1.15s;
}

/* subtle elegant line */
.plus700-intro-card .intro-line {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,219,168,0.7),
            transparent
        );
}

/* Typographic Feel */
.intro-pretext {
    color: rgba(255,255,255,0.65);

    letter-spacing: 0.06em;

    opacity: 0;

    animation: textFade 0.8s ease forwards;
    animation-delay: 1.55s;
}

.concierge-title {
    font-size: 1.8rem;
    letter-spacing: 0.08em;

    opacity: 0;

    animation:
        luxuryTyping 1.1s steps(12) forwards,
        textFade 0.4s ease forwards;

    animation-delay: 1.8s;

    white-space: nowrap;
    overflow: hidden;

    width: 0;
}

/* elegant fade after title */
.concierge-subtext {
    opacity: 0;

    animation: textFade 0.8s ease forwards;
    animation-delay: 2.8s;
}

/* =========================================================
   MESSAGE REVEAL
========================================================= */

@keyframes conciergeReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            translateX(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            translateX(0);
    }
}

/* =========================================================
   SOFT TEXT APPEAR
========================================================= */

@keyframes textFade {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* =========================================================
   LUXURY "TYPING"
========================================================= */

@keyframes luxuryTyping {
    from {
        width: 0;
    }

    to {
        width: 12ch;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .luxury-concierge-message {
        position: relative;

        top: auto;
        right: auto;

        transform: none;

        width: 100%;

        margin-top: -1rem;

        display: flex;
        justify-content: center;
    }

    .plus700-intro-card {
        max-width: 420px;
    }
}

@media (max-width: 576px) {

    .plus700-intro-card {
        padding: 1.3rem;
        border-radius: 20px;
    }

    .concierge-title {
        font-size: 1.45rem;
    }
}

/* =========================================================
   ATMOSPHERIC BACKGROUND LOGO
========================================================= */

.luxury-bg-logo {
    position: absolute;

    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1;

    pointer-events: none;

    overflow: hidden;
}

/* Main logo */
.bg-logo-img {

    width: min(48vh, 520px);
    height: auto;

    object-fit: contain;

    opacity: 0;

    transform:
        translateY(20px)
        scale(1.08);

    animation:
        bgLogoReveal 2s cubic-bezier(.19,1,.22,1) forwards;

    animation-delay: 0.35s;

    /* Luxury softness */
    filter:
        brightness(1.1)
        saturate(0.8)
        drop-shadow(0 0 30px rgba(197,160,89,0.08));

    mix-blend-mode: screen;
}

/* elegant atmospheric fade */
.bg-logo-img::after {
    content: '';
}

/* =========================================================
   LOGO REVEAL
========================================================= */

@keyframes bgLogoReveal {

    from {
        opacity: 0;

        transform:
            translateY(24px)
            scale(1.12);
    }

    to {
        opacity: 0.08;

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