@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
    --cream:#f8f4ee;
    --cream-deep:#efe3d2;
    --beige:#dfc9a7;
    --gold:#d8a03d;
    --gold-soft:#e4ba67;
    --brown:#6a4c2d;
    --charcoal:#0d1018;
    --charcoal-soft:#151b28;
    --text:#221c18;
    --muted:#6a6259;
    --white-soft:#fffaf3;
    --line:rgba(106,76,45,0.14);
    --shadow:0 18px 40px rgba(18, 20, 28, 0.09);
    --shadow-deep:0 32px 90px rgba(8, 11, 19, 0.2);
    --radius-xl:34px;
    --radius-lg:26px;
    --radius-md:20px;
    --radius-sm:16px;
    --transition:0.35s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(216,160,61,0.12), transparent 22%),
        linear-gradient(180deg, #f8f4ee 0%, #f4ece1 48%, #efe4d6 100%);
    overflow-x:hidden;
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.45s ease, transform 0.45s ease;
}

body.menu-open{
    overflow:hidden;
}

body.page-ready{
    opacity:1;
    transform:translateY(0);
}

/* Paragraph & description text: use a clean modern sans-serif for readability
   (headings remain using Poppins as defined elsewhere) */
p,
.hero-description,
.page-hero-content p,
.section-copy p,
.section-heading p,
.amenity-detail-card p,
.detail-room-body p,
.info-panel p,
.signature-card p,
.contact-panel p,
.footer-brand p{
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.is-leaving{
    opacity:0;
    transform:translateY(18px);
}

img{
    display:block;
    width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

input,
select,
textarea{
    width:100%;
    border:1px solid rgba(255,255,255,0.15);
    border-radius:18px;
    padding:16px 18px;
    background:rgba(255,248,240,0.82);
    color:var(--text);
    outline:none;
    transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

select option{
    background-color:#ffffff;
    color:var(--text);
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(185,145,86,0.58);
    box-shadow:0 0 0 4px rgba(185,145,86,0.14);
}

textarea{
    min-height:160px;
    resize:vertical;
}

.container{
    width:min(92%, 1280px);
    margin:0 auto;
}

.section{
    position:relative;
    padding:25px 0;
}

.section-soft{
    background:linear-gradient(180deg, rgba(255,248,240,0.26), rgba(232,219,200,0.62));
}

.section-dark{
    background:
        radial-gradient(circle at top right, rgba(216,160,61,0.18), transparent 28%),
        linear-gradient(135deg, rgba(8,12,22,0.98), rgba(16,22,34,0.94));
    color:var(--white-soft);
}

.section-dark h2,
.section-dark h3,
.section-dark p{
    color:var(--white-soft);
}

.site-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1000;
    padding:10px 0;
    transition:padding var(--transition);
}

.site-header::before{
    content:"";
    position:absolute;
    inset:6px 10px;
    border-radius:20px;
    /* clean solid navbar background */
    background:#020b1f;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    transition:inset var(--transition);
}

.site-header.is-scrolled{
    padding:6px 0;
}

.site-header.is-scrolled::before{
    inset:4px 10px;
    background:#020b1f;
    box-shadow:none;
}

.booking-page .site-header::before{
    background:#020b1f;
    box-shadow:none;
}

.header-shell{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:14px;
    min-height:74px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    justify-self:start;
}

/* nudge logo left for a slightly offset premium layout */
.brand{
    transform:translateX(-8px);
}

.brand-mark{
    width:66px;
    height:66px;
    padding:5px;
    flex-shrink:0;
    background:#ffffff;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    border:1px solid rgba(216,160,61,0.3);
    box-sizing:border-box;
}

.brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.brand-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    color:var(--white-soft);
}

.brand-copy strong{
    font-size:1.12rem;
    font-weight:700;
    line-height:1.15;
    letter-spacing:0.01em;
    color:#f6efe4;
    /* removed text-shadow for a clean, sharp navbar */
}

.brand-copy small{
    font-size:0.58rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:#d8a03d;
    font-weight:600;
}

.site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    margin:0;
    padding:0 8px;
    justify-self:center; /* center the nav in the header grid */
}

.site-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    color:var(--white-soft);
    font-size:0.95rem;
    font-weight:600;
    padding:8px 0;
    text-shadow:none;
    transition:color var(--transition);
}

.site-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--gold);
    transition:width var(--transition);
}

.site-nav a:hover,
.site-nav a.active{
    color:#ffd27a;
}

/* keep underline only; removed glow/text-shadow for a cleaner look */

.site-nav a:hover::after,
.site-nav a.active::after{
    width:100%;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    justify-self:end;
}

/* Header-specific button styling: flat, no borders/shadows */
.site-header .header-actions .button{
    border:0;
    box-shadow:none;
    background:#020b1f; /* match navbar solid color to avoid transparency */
    color:var(--white-soft);
}

.site-header .header-actions .button.button-gold{
    background:var(--gold);
    color:#000;
    box-shadow:none;
    border:0;
}

.site-header .header-actions .button.button-gold:hover{
    filter:brightness(0.96);
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:0 28px;
    border-radius:999px;
    border:1px solid transparent;
    font-size:0.98rem;
    font-weight:600;
    transition:background var(--transition), color var(--transition), filter var(--transition);
}

.button:hover{
    /* flat button interaction: subtle brightness only, no lift */
    transform:none;
    filter:brightness(0.98);
}

.button-gold{
    /* flat solid gold button */
    background:var(--gold);
    color:#000;
    box-shadow:none;
    border:0;
}

.button-gold:hover{
    transform:none;
    filter:brightness(0.96);
}

.button-outline{
    border-color:rgba(255,255,255,0.12);
    color:var(--white-soft);
    background:transparent;
    backdrop-filter:none;
}

.button-outline:hover{
    background:rgba(255,248,240,0.14);
}

.button-secondary{
    border-color:rgba(106,76,45,0.06);
    background:transparent;
    color:var(--brown);
    box-shadow:none;
}

.button-secondary:hover{
    background:rgba(255,248,240,0.72);
}

.button-compact{
    min-height:42px;
    padding:0 18px;
    border-radius:10px;
    font-size:0.85rem;
    border:1px solid rgba(255,220,154,0.18);
}

.nav-toggle{
    display:none;
    width:46px;
    height:46px;
    border-radius:12px;
    border:0;
    background:#020b1f;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
}

.nav-toggle span{
    width:20px;
    height:2px;
    border-radius:999px;
    background:var(--white-soft);
    transition:transform var(--transition), opacity var(--transition);
}

.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    isolation:isolate;
    overflow:hidden;
}

.hero-slides,
.hero-overlay{
    position:absolute;
    inset:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    background-image:var(--hero-image);
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.04);
    transition:opacity 0.9s ease, transform 3.2s ease;
}

.hero-slide.is-active{
    opacity:1;
    transform:scale(1.01);
}

.hero-overlay{
    background:
        linear-gradient(90deg, rgba(8,12,22,0.74) 0%, rgba(10,15,27,0.48) 46%, rgba(10,15,27,0.26) 100%),
        radial-gradient(circle at top left, rgba(216,160,61,0.16), transparent 24%);
    z-index:0;
}

.hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:start;
    gap:40px;
    width:100%;
    padding-top:140px;
    padding-bottom:168px;
}

.hero-content{
    max-width:720px;
    margin-top:0;
    padding-left:48px;
    position:sticky;
    top:110px;
    z-index:3;
    will-change:transform;
}

/* When active, keep the hero content visually fixed in place above the slider */
.hero-content.hero-locked{
    position:fixed;
    /* top is calculated in JS so we leave it unset here */
    left:0;
    width:auto;
    z-index:90; /* keep below header (1000) but above slider images */
    will-change:left, top, width;
    transition:none!important;
}

.hero-content-placeholder{
    display:block;
    width:100%;
    height:0;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    color:var(--gold-soft);
    font-size:0.76rem;
    font-weight:600;
    letter-spacing:0.28em;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    width:46px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-soft));
}

/* Make small gold section-title text more legible on light backgrounds */
.section:not(.section-dark) .eyebrow {
    color: #000;
}

/* On light (non-dark) sections, render small decorative gold lines/dividers in black */
.section:not(.section-dark) .eyebrow::before{
    background:linear-gradient(90deg, transparent, #000);
}

.section:not(.section-dark) .check-list li::before{
    background:#000;
    box-shadow:0 0 0 4px rgba(0,0,0,0.06);
}

/* Replace decorative SVG stroke with black on light sections */
.section:not(.section-dark) .section-copy::before{
    background:
        radial-gradient(circle, rgba(0,0,0,0.12), transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='.20' stroke-width='1.5'%3E%3Cpath d='M76 124c-4-20 2-38 18-54 8-8 18-14 30-18-2 12-8 22-16 30-16 16-32 24-48 42 8-2 16-2 24 0'/%3E%3Cpath d='M54 112c-8-14-10-28-6-44 3-11 9-20 18-28 4 9 6 18 4 28-4 20-18 34-28 52 6-4 12-6 18-8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

.eyebrow-dark{
    color:var(--gold-soft);
}

h1,
h2,
h3{
    font-family:'Poppins',sans-serif;
    letter-spacing:-0.03em;
    font-weight:700;
}

.hero-content h1,
.page-hero-content h1{
    color:var(--white-soft);
    /* slightly reduced for a cleaner, more balanced luxury look */
    font-size:clamp(1.95rem, 4.0vw, 3.2rem);
    line-height:1.04;
    letter-spacing:-0.02em;
    max-width:640px;
}

.page-hero-content h1{
    text-transform:uppercase;
}

.hero-lead{
    margin-top:20px;
    color:var(--gold-soft);
    font-size:1.05rem;
    font-weight:600;
}

.hero-subtitle{
    margin-top:14px;
    color:var(--white-soft);
    font-size:1rem;
    font-weight:500;
}

.hero-description,
.page-hero-content p,
.section-copy p,
.section-heading p,
.amenity-detail-card p,
.detail-room-body p,
.info-panel p,
.signature-card p,
.contact-panel p,
.footer-brand p{
    color:rgba(251,246,238,0.82);
    line-height:1.82;
}

.hero-description{
    max-width:680px;
    margin-top:20px;
    margin-left:0;
    font-size:1rem;
    font-weight:500;
    color:rgba(251,246,238,0.92);
    line-height:1.72;
    letter-spacing:0.004em;
    text-align:left;
    text-wrap:pretty;
}

.hero-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    margin-top:28px;
    margin-left:0;
    flex-wrap:nowrap;
}

.hero-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:22px;
    align-self:end;
}

.hero-dots{
    display:flex;
    align-items:center;
    gap:10px;
}

.hero-dot{
    width:14px;
    height:14px;
    border-radius:999px;
    background:rgba(255,248,240,0.28);
    border:1px solid rgba(255,248,240,0.06);
    transition:width var(--transition), background var(--transition), transform 0.3s ease;
}

.hero-dot:hover{ transform:none; }

.hero-dot.is-active{
    width:34px;
    background:var(--gold);
    box-shadow:none;
}

.booking-overlap{
    position:relative;
    margin-top:-120px;
    z-index:2;
}

.booking-card{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr)) auto;
    gap:16px;
    align-items:end;
    padding:18px 20px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(6,10,18,0.64), rgba(10,16,26,0.44));
    border:1px solid rgba(216,160,61,0.12);
    backdrop-filter:blur(14px);
    box-shadow:0 28px 80px rgba(6, 10, 18, 0.38), inset 0 1px 0 rgba(255,255,255,0.02);
    color:var(--white-soft);
}

.booking-card .field-group label{
    margin-bottom:8px;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,248,240,0.86);
}

.booking-card input,
.booking-card select{
    min-height:52px;
    padding:12px 16px;
    border-radius:12px;
    font-size:0.92rem;
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.06);
    color:var(--white-soft);
    box-shadow:none;
}

.booking-card select{
    color-scheme:light;
}

.booking-card select option{
    background-color:#ffffff;
    color:#000000;
}

.booking-card input[type="date"]{
    color-scheme:dark;
}

.booking-card input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer;
    opacity:0.95;
    transition:opacity 0.2s ease, transform 0.2s ease;
}

.booking-card input[type="date"]::-webkit-calendar-picker-indicator:hover{
    opacity:1;
    transform:scale(1.12);
}

/* Occupancy Popover Controller (Rooms & Guests) */
.occupancy-controller-group{
    position:relative;
}

.occupancy-trigger-box{
    min-height:52px;
    padding:12px 16px;
    border-radius:12px;
    font-size:0.92rem;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--white-soft);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    user-select:none;
    transition:background var(--transition), border-color var(--transition);
}

.occupancy-trigger-box:hover,
.occupancy-trigger-box.is-open{
    background:rgba(255,255,255,0.08);
    border-color:var(--gold);
}

.occupancy-toggle-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,0.18);
    color:#ffffff;
    font-size:14px;
    font-weight:700;
    line-height:1;
    flex-shrink:0;
    transition:transform 0.2s ease, background 0.2s ease;
}

.occupancy-trigger-box.is-open .occupancy-toggle-icon{
    background:var(--gold);
    color:#000000;
}

.occupancy-popover{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:320px;
    max-width:calc(100vw - 32px);
    background:#ffffff;
    border-radius:8px;
    box-shadow:0 18px 44px rgba(0, 0, 0, 0.35);
    border:1px solid rgba(0,0,0,0.14);
    z-index:9999;
    display:none;
    color:#222222;
    overflow:hidden;
}

.occupancy-popover.is-open{
    display:block;
    animation:occupancyFadeIn 0.2s ease forwards;
}

@keyframes occupancyFadeIn{
    from{ opacity:0; transform:translateY(-6px); }
    to{ opacity:1; transform:translateY(0); }
}

.occupancy-rooms-list{
    max-height:280px;
    overflow-y:auto;
}

.occupancy-room-block{
    border-bottom:1px solid #eeeeee;
}

.occupancy-room-block:last-child{
    border-bottom:none;
}

.occupancy-room-header{
    background:#ebebeb;
    padding:7px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.88rem;
    font-weight:700;
    color:#2b2b2b;
}

.occupancy-room-btn{
    width:22px;
    height:22px;
    border-radius:4px;
    border:1px solid #cccccc;
    background:#ffffff;
    color:#333333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    padding:0;
    line-height:1;
    transition:background 0.15s ease, border-color 0.15s ease;
}

.occupancy-room-btn:hover:not(:disabled){
    background:#e0e0e0;
    border-color:#999999;
}

.occupancy-room-btn:disabled{
    opacity:0.35;
    cursor:not-allowed;
}

.occupancy-room-body{
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#ffffff;
}

.occupancy-stepper-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    font-weight:600;
    color:#333333;
}

.occupancy-stepper{
    display:inline-flex;
    align-items:center;
    border:1px solid #d2d2d2;
    border-radius:4px;
    background:#ffffff;
    overflow:hidden;
}

.occupancy-stepper button{
    width:26px;
    height:28px;
    border:none;
    background:transparent;
    font-size:14px;
    font-weight:700;
    color:#333333;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s ease;
}

.occupancy-stepper button:hover:not(:disabled){
    background:#f0f0f0;
}

.occupancy-stepper button:disabled{
    opacity:0.3;
    cursor:not-allowed;
}

.occupancy-stepper span{
    min-width:24px;
    text-align:center;
    font-size:0.9rem;
    font-weight:700;
    color:#111111;
}

.occupancy-popover-actions{
    padding:10px 14px;
    background:#f8f8f8;
    border-top:1px solid #eeeeee;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.occupancy-add-room-btn{
    background:none;
    border:none;
    color:#a17838;
    font-weight:700;
    font-size:0.85rem;
    cursor:pointer;
    padding:4px 6px;
    border-radius:4px;
    display:flex;
    align-items:center;
    gap:4px;
}

.occupancy-add-room-btn:hover:not(:disabled){
    color:#7a551b;
    text-decoration:underline;
}

.occupancy-add-room-btn:disabled{
    opacity:0.4;
    cursor:not-allowed;
    text-decoration:none;
}

.occupancy-done-btn{
    background:var(--gold, #d8a03d);
    color:#000000;
    border:none;
    border-radius:6px;
    padding:6px 16px;
    font-weight:700;
    font-size:0.84rem;
    cursor:pointer;
    transition:filter 0.2s ease;
}

.occupancy-done-btn:hover{
    filter:brightness(0.95);
}

.booking-card .button{
    min-height:52px;
    padding:0 22px;
    font-size:0.9rem;
    white-space:nowrap;
}

.booking-card .booking-submit{
    background:var(--gold);
    color:#000;
    box-shadow:none;
    border:0;
}

.booking-card .booking-submit:hover{ transform:none; filter:brightness(0.96); }

.field-group label{
    display:block;
    margin-bottom:8px;
    color:var(--muted);
    font-size:0.92rem;
    font-weight:500;
}

.booking-submit{
    width:100%;
    gap:10px;
}

.button-arrow{
    display:inline-flex;
    align-items:center;
    font-size:1rem;
    transition:transform var(--transition);
}

.booking-submit:hover .button-arrow{
    transform:translateX(3px);
}

.section-heading{
    max-width:720px;
    margin-bottom:34px;
}

.section-heading h2,
.section-copy h2,
.why-content h2,
.signature-card h2,
.contact-panel h2,
.booking-heading h2{
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.14;
    color:var(--text);
    margin-bottom:16px;
}

.section-copy p,
.section-heading p,
.detail-room-body p,
.amenity-detail-card p,
.info-panel p,
.contact-panel p,
.footer-brand p{
    color:var(--muted);
}

.icon-grid,
.room-grid,
.amenity-grid,
.three-column-grid,
.stats-grid{
    display:grid;
    gap:24px;
}

.icon-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
}

.icon-card{
    padding:26px 18px;
    border-radius:24px;
    background:#fffaf5;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    text-align:center;
}

.icon-card h3{
    font-size:1rem;
    color:var(--text);
    line-height:1.5;
}

.icon-badge,
.amenity-icon,
.amenity-icon-text{
    width:60px;
    height:60px;
    margin:0 auto 18px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg, rgba(216,160,61,0.14), rgba(106,76,45,0.05));
    color:var(--brown);
    font-weight:600;
    letter-spacing:0.08em;
    box-shadow:inset 0 1px 0 rgba(255,248,240,0.58);
}

.amenity-icon img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.about-split,
.why-grid,
.page-split,
.signature-grid,
.contact-grid,
.booking-page-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:44px;
    align-items:center;
}

.about-media{
    position:relative;
    min-height:560px;
}

.about-image{
    position:absolute;
    overflow:hidden;
    border-radius:32px;
    box-shadow:var(--shadow-deep);
}

.about-image img,
.why-image img,
.page-image-stack img,
.signature-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-image-primary{
    inset:0 88px 82px 0;
}

.about-image-secondary{
    right:0;
    bottom:0;
    width:230px;
    height:250px;
    border:8px solid rgba(244,236,223,0.9);
}

.section-copy{
    position:relative;
}

.section-copy::before{
    content:"";
    position:absolute;
    top:-18px;
    right:8%;
    width:180px;
    height:180px;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(216,160,61,0.12), transparent 62%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d8a03d' stroke-opacity='.20' stroke-width='1.5'%3E%3Cpath d='M76 124c-4-20 2-38 18-54 8-8 18-14 30-18-2 12-8 22-16 30-16 16-32 24-48 42 8-2 16-2 24 0'/%3E%3Cpath d='M54 112c-8-14-10-28-6-44 3-11 9-20 18-28 4 9 6 18 4 28-4 20-18 34-28 52 6-4 12-6 18-8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events:none;
}

.dual-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:18px;
    flex-wrap:wrap;
}

.section-copy .button{
    margin-top:18px;
}

.room-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.room-card,
.detail-room-card,
.amenity-card,
.amenity-detail-card,
.info-panel,
.contact-panel,
.stat-card{
    border-radius:24px;
    background:#fffaf6;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.room-card{
    position:relative;
}

.room-image{
    position:relative;
    min-height:238px;
    overflow:hidden;
}

.room-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 10%, rgba(21,18,16,0.82) 100%);
}

.room-image img{
    height:100%;
    object-fit:cover;
    transition:transform 1s ease;
}

.room-card:hover .room-image img,
.detail-room-card:hover img,
.gallery-card:hover img{
    transform:scale(1.08);
}

.room-content{
    position:absolute;
    inset:auto 0 0 0;
    padding:22px;
    color:var(--white-soft);
    z-index:1;
}

.room-content h3{
    color:var(--white-soft);
    font-size:1.2rem;
    margin-bottom:12px;
}

.room-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}

.room-meta span,
.card-kicker{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,248,240,0.12);
    border:1px solid rgba(255,248,240,0.12);
    color:inherit;
    font-size:0.78rem;
}

.room-card .button-outline{
    min-height:42px;
    padding:0 18px;
}

.room-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.button-room-book,
.detail-book-button{
    min-height:42px;
    padding:0 18px;
    font-size:0.84rem;
}

.amenity-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.amenity-card,
.amenity-detail-card{
    padding:24px;
    text-align:center;
}

.amenity-card h3,
.amenity-detail-card h3{
    font-size:1.08rem;
    margin-bottom:10px;
}

.why-content h2,
.signature-card h2{
    color:var(--white-soft);
}

.why-image,
.signature-image{
    position:relative;
    width:100%;
    height:100%;
    min-height:520px;
    align-self:stretch;
    overflow:hidden;
    border-radius:34px;
    box-shadow:var(--shadow-deep);
    display:flex;
}

.why-image img,
.signature-image img{
    width:100%;
    height:100%;
    min-height:100%;
    flex:1;
    object-fit:cover;
    object-position:center;
    display:block;
}

.check-list{
    list-style:none;
    display:grid;
    gap:16px;
    margin-top:24px;
}

.check-list li{
    position:relative;
    padding-left:34px;
    color:rgba(251,246,238,0.86);
    line-height:1.7;
}

.light-checks li{
    color:var(--muted);
}

.check-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gold-soft), var(--gold));
    box-shadow:0 0 0 4px rgba(185,145,86,0.16);
}

.stats-band{
    padding:34px 0 60px;
    background:
        radial-gradient(circle at center, rgba(216,160,61,0.12), transparent 32%),
        linear-gradient(180deg, rgba(7,11,20,1), rgba(15,21,33,0.98));
}

.stats-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.stat-card{
    padding:34px 28px;
    text-align:center;
    background:rgba(255,248,240,0.06);
    border-color:rgba(255,248,240,0.08);
    box-shadow:none;
}

.stat-card strong{
    display:block;
    margin-bottom:10px;
    color:var(--gold-soft);
    font-size:2.5rem;
    font-weight:700;
    text-shadow:0 0 18px rgba(185,145,86,0.28);
}

.stat-card span{
    color:rgba(251,246,238,0.82);
}

.page-hero{
    position:relative;
    min-height:72vh;
    display:flex;
    align-items:flex-end;
    background-image:var(--page-image);
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.page-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(8,12,22,0.84), rgba(10,15,27,0.38));
}

.page-hero-content{
    position:relative;
    z-index:1;
    padding-top:180px;
    padding-bottom:88px;
    max-width:780px;
    padding-left:28px;
}

.page-hero-content p{
    max-width:590px;
    margin-top:22px;
    margin-left:24px;
    text-wrap:pretty;
}

.booking-hero{
    min-height:82vh;
}

.booking-hero .page-hero-overlay{
    background:
        linear-gradient(100deg, rgba(6,10,18,0.88) 0%, rgba(10,15,27,0.64) 48%, rgba(10,15,27,0.32) 100%),
        radial-gradient(circle at top left, rgba(216,160,61,0.22), transparent 24%);
}

.booking-hero-notes{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.booking-hero-notes span{
    display:inline-flex;
    align-items:center;
    padding:11px 16px;
    border-radius:999px;
    background:rgba(255,248,240,0.08);
    border:1px solid rgba(255,248,240,0.14);
    color:rgba(251,246,238,0.92);
    backdrop-filter:blur(12px);
}

.page-split,
.booking-page-grid{
    align-items:start;
}

.page-image-stack,
.map-shell{
    border-radius:34px;
    overflow:hidden;
    box-shadow:var(--shadow-deep);
}

.page-image-stack{
    position:relative;
    width:100%;
    height:100%;
    min-height:520px;
    align-self:stretch;
    display:flex;
}

.page-image-stack img{
    width:100%;
    height:100%;
    min-height:100%;
    flex:1;
    object-fit:cover;
    object-position:center;
    display:block;
}

.three-column-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.info-panel{
    padding:34px;
}

.card-kicker{
    background:rgba(216,160,61,0.12);
    color:var(--brown);
    margin-bottom:18px;
}

.info-panel h3,
.detail-room-body h3,
.contact-panel h2{
    font-size:1.5rem;
    line-height:1.2;
    margin-bottom:14px;
}

.detail-room-grid{
    display:grid;
    gap:26px;
}

.detail-room-card{
    display:grid;
    grid-template-columns:320px minmax(0, 1fr);
}

.detail-room-card.is-selected{
    border-color:rgba(216,160,61,0.38);
    box-shadow:0 28px 56px rgba(69, 48, 18, 0.14);
}

.detail-room-card.is-selected .card-kicker{
    background:linear-gradient(135deg, rgba(216,160,61,0.2), rgba(216,160,61,0.08));
    color:#7a551b;
}

.detail-room-card img{
    height:100%;
    object-fit:cover;
    transition:transform 1s ease;
}

.detail-room-body{
    padding:32px;
}

.contact-grid,
.booking-page-grid{
    align-items:start;
}

.booking-page-section{
    padding-top:92px;
}

.booking-layout{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:30px;
    align-items:start;
}

.booking-side-card,
.booking-form-card{
    border-radius:32px;
    border:1px solid rgba(106,76,45,0.1);
    background:linear-gradient(180deg, rgba(255,251,246,0.96), rgba(248,241,231,0.92));
    box-shadow:0 24px 54px rgba(20, 18, 16, 0.1);
}

.booking-side-card{
    padding:34px;
    position:sticky;
    top:112px;
}

.booking-side-copy,
.booking-form-heading p,
.booking-benefit-item p,
.booking-form-note,
.booking-confirmation p{
    color:var(--muted);
    line-height:1.8;
}

.booking-benefit-list{
    display:grid;
    gap:16px;
    margin-top:24px;
}

.booking-benefit-item{
    padding:18px 18px 16px;
    border-radius:22px;
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(106,76,45,0.08);
}

.booking-benefit-item strong{
    display:block;
    margin-bottom:8px;
    font-size:1rem;
    color:var(--text);
}

.booking-support-band{
    display:grid;
    gap:8px;
    margin-top:26px;
    padding:22px;
    border-radius:24px;
    background:
        linear-gradient(135deg, rgba(9, 15, 26, 0.96), rgba(14, 22, 38, 0.94)),
        radial-gradient(circle at top right, rgba(216,160,61,0.22), transparent 22%);
    color:var(--white-soft);
    box-shadow:0 18px 40px rgba(9, 13, 21, 0.18);
}

.booking-support-label{
    color:var(--gold-soft);
    font-size:0.76rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.18em;
}

.booking-support-band a{
    width:fit-content;
}

.booking-support-band a:hover{
    color:var(--gold-soft);
}

.booking-form-card{
    padding:34px;
}

.booking-form-heading{
    margin-bottom:22px;
}

.booking-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.booking-form .field-group label{
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(78, 60, 38, 0.82);
}

.booking-form input,
.booking-form select,
.booking-form textarea{
    background:rgba(255,252,247,0.98);
    border-color:rgba(106,76,45,0.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}

.booking-message-group textarea{
    min-height:170px;
}

.booking-form-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:4px;
}

.booking-primary-button{
    gap:10px;
    min-width:190px;
}

.booking-form-note{
    font-size:0.92rem;
}

.booking-confirmation{
    margin-top:22px;
    padding:22px 24px;
    border-radius:24px;
    background:rgba(255,255,255,0.56);
    border:1px solid rgba(106,76,45,0.08);
}

.booking-confirmation h3{
    margin-bottom:10px;
    font-size:1.35rem;
}

.contact-panel{
    padding:34px;
}

.contact-panel .footer-links{
    margin-top:18px;
    color:var(--muted);
}

.contact-panel .social-links a{
    background:rgba(216,160,61,0.12);
    border-color:rgba(106,76,45,0.12);
    color:var(--brown);
}

.contact-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-top:20px;
}

.field-span-2{
    grid-column:1 / -1;
}

.map-shell{
    padding:34px;
    background:#fffaf6;
    border:1px solid var(--line);
}

.map-shell h2{
    font-size:2rem;
    margin-bottom:18px;
}

.map-shell iframe{
    width:100%;
    min-height:420px;
    border:0;
    border-radius:26px;
    margin-top:18px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
}

.gallery-card{
    min-height:260px;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
    background:rgba(255,248,240,0.72);
    padding:12px;
}

.gallery-card img{
    height:100%;
    object-fit:cover;
    border-radius:22px;
    transition:transform 1s ease;
}

.newsletter-form{
    display:flex;
    gap:12px;
    margin-top:12px;
}

.social-links{
    display:flex;
    gap:12px;
    margin-top:18px;
}

.social-links a{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(255,248,240,0.1);
    border:1px solid rgba(255,248,240,0.12);
    color:var(--white-soft);
    font-size:0.86rem;
    font-weight:600;
    transition:transform var(--transition), background var(--transition);
}

.social-links a:hover{
    transform:translateY(-2px);
    background:rgba(185,145,86,0.18);
}

.site-footer{
    padding:88px 0 34px;
    background:linear-gradient(180deg, rgba(22,18,14,0.98), rgba(14,11,9,1));
    color:var(--white-soft);
}

.footer-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr 0.9fr 1fr;
    gap:28px;
}

.footer-brand img{
    width:88px;
    height:88px;
    padding:6px;
    background:#ffffff;
    border-radius:18px;
    object-fit:contain;
    margin-bottom:18px;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
    border:1px solid rgba(216,160,61,0.3);
    box-sizing:border-box;
}

.site-footer h3{
    margin-bottom:18px;
    font-size:1.4rem;
}

.footer-links{
    list-style:none;
    display:grid;
    gap:12px;
    color:rgba(251,246,238,0.74);
}

.footer-links a:hover{
    color:var(--gold-soft);
}

.footer-bottom{
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid rgba(255,248,240,0.08);
    color:rgba(251,246,238,0.68);
}

.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:999;
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--gold);
    color:#fffdf9;
    font-weight:700;
    box-shadow:none;
}

.booking-float{
    position:fixed;
    right:22px;
    bottom:94px;
    z-index:999;
    min-height:52px;
    padding:0 22px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#020b1f;
    border:0;
    color:var(--white-soft);
    font-weight:600;
    box-shadow:none;
    backdrop-filter:none;
    transition:filter var(--transition), color var(--transition);
}

.booking-float:hover{
    transform:none;
    filter:brightness(0.95);
    color:#ffe0a1;
}

.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}



/* Slightly reduce paragraph & description font size for a cleaner premium look */
p,
.hero-description,
.page-hero-content p,
.section-copy p,
.section-heading p,
.amenity-detail-card p,
.detail-room-body p,
.info-panel p,
.signature-card p,
.contact-panel p,
.footer-brand p{
    font-size:0.95rem;
}

/* ==========================================================================
   Multi-Property Architecture Styles (CA86, CA90, CC131 - New Town, Kolkata)
   ========================================================================== */

/* 4-column booking card layout: Property + Check-in + Check-out + Guests & Rooms controller + Submit */
.booking-card.booking-card-multi{
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

/* Property Showcase Grid */
.property-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:28px;
}

.property-card{
    display:flex;
    flex-direction:column;
    border-radius:28px;
    background:#fffaf6;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    overflow:hidden;
    transition:transform var(--transition), box-shadow var(--transition);
}

.property-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-deep);
}

.property-card-media{
    position:relative;
    width:100%;
    aspect-ratio:2 / 3;
    overflow:hidden;
    background:#e8dfd5;
}

.property-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 1s ease;
}

.property-card:hover .property-card-media img{
    transform:scale(1.06);
}

.property-badge-tag{
    position:absolute;
    top:16px;
    left:16px;
    z-index:2;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(2, 11, 31, 0.88);
    color:var(--gold-soft);
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    border:1px solid rgba(216,160,61,0.3);
    backdrop-filter:blur(8px);
}

.property-card-body{
    padding:28px;
    display:flex;
    flex-direction:column;
    flex-grow:1;
}

.property-card-body h3{
    font-size:1.35rem;
    margin-bottom:8px;
    color:var(--text);
}

.property-location{
    font-size:0.86rem;
    color:var(--muted);
    margin-bottom:14px;
    display:flex;
    align-items:flex-start;
    gap:6px;
    line-height:1.5;
}

.property-room-summary{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.property-room-pill{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(216,160,61,0.12);
    border:1px solid rgba(216,160,61,0.22);
    color:var(--brown);
    font-size:0.78rem;
    font-weight:600;
}

.property-contacts{
    display:grid;
    gap:8px;
    margin-bottom:22px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:0.88rem;
}

.property-contact-row{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text);
}

.property-contact-row a{
    color:var(--brown);
    font-weight:500;
    transition:color var(--transition);
}

.property-contact-row a:hover{
    color:var(--gold);
}

.property-card-footer{
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* Property Filter Tabs (Rooms page) */
.property-filter-tabs{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:44px;
}

.property-tab-btn{
    padding:12px 24px;
    border-radius:999px;
    background:rgba(255,255,255,0.7);
    border:1px solid var(--line);
    color:var(--text);
    font-weight:600;
    font-size:0.92rem;
    cursor:pointer;
    transition:all var(--transition);
}

.property-tab-btn:hover{
    background:#ffffff;
    border-color:var(--gold);
    transform:translateY(-2px);
}

.property-tab-btn.is-active{
    background:#020b1f;
    color:var(--gold-soft);
    border-color:var(--gold);
    box-shadow:0 8px 24px rgba(2, 11, 31, 0.2);
}

/* Property Badge in Room Cards */
.room-property-tag{
    display:inline-flex;
    align-items:center;
    padding:4px 12px;
    border-radius:999px;
    background:#020b1f;
    color:var(--gold-soft);
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-bottom:8px;
    border:1px solid rgba(216,160,61,0.3);
}

/* Contact Page 3-Property Directory */
.contact-property-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    margin-bottom:48px;
}

.contact-property-card{
    background:#fffaf6;
    border:1px solid var(--line);
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    transition:transform var(--transition), box-shadow var(--transition);
}

.contact-property-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-deep);
}

.contact-property-card h3{
    font-size:1.3rem;
    margin-bottom:8px;
    color:var(--text);
}

.contact-property-address{
    font-size:0.88rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:18px;
}

.contact-property-links{
    display:grid;
    gap:10px;
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--line);
}

.contact-property-links a{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.88rem;
    font-weight:500;
    color:var(--brown);
    transition:color var(--transition);
}

.contact-property-links a:hover{
    color:var(--gold);
}

.contact-property-links .map-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border-radius:12px;
    background:#020b1f;
    color:var(--gold-soft);
    font-weight:600;
    margin-top:8px;
    border:1px solid rgba(216,160,61,0.25);
}

.contact-property-links .map-btn:hover{
    background:#061436;
    color:#ffffff;
}

/* ==========================================================================
   Area Info, Categorized Room Amenities & Property Rules
   ========================================================================== */

.area-info-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:26px;
}

.area-info-card{
    background:#fffaf6;
    border:1px solid var(--line);
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    transition:transform var(--transition), box-shadow var(--transition);
}

.area-info-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-deep);
}

.area-info-card h3{
    font-size:1.25rem;
    margin-bottom:14px;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:10px;
    border-bottom:2px solid rgba(216,160,61,0.28);
}

.area-distance-list{
    list-style:none;
    display:grid;
    gap:12px;
    margin-top:0;
}

.area-distance-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:0.92rem;
}

.area-distance-item:last-child{
    border-bottom:none;
}

.area-distance-item span{
    color:var(--text);
    font-weight:500;
}

.area-distance-badge{
    font-weight:700;
    color:#7a551b;
    background:rgba(216,160,61,0.16);
    padding:4px 10px;
    border-radius:999px;
    font-size:0.82rem;
    white-space:nowrap;
    border:1px solid rgba(216,160,61,0.24);
}

/* Categorized Room Amenities Grid */
.room-amenities-categories{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:22px;
    margin-top:34px;
}

.amenity-category-card{
    background:#fffaf6;
    border:1px solid var(--line);
    border-radius:22px;
    padding:26px;
    box-shadow:var(--shadow);
    transition:transform var(--transition);
}

.amenity-category-card:hover{
    transform:translateY(-4px);
}

.amenity-category-card h3{
    font-size:1.15rem;
    margin-bottom:14px;
    color:var(--text);
    padding-bottom:10px;
    border-bottom:2px solid var(--gold);
}

.amenity-bullet-list{
    list-style:none;
    display:grid;
    gap:10px;
}

.amenity-bullet-list li{
    position:relative;
    padding-left:24px;
    font-size:0.92rem;
    color:var(--muted);
    line-height:1.5;
}

.amenity-bullet-list li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:var(--gold);
    font-size:0.85rem;
    font-weight:700;
}

/* Languages Spoken & Property Rules */
.property-rules-card{
    border-radius:26px;
    background:linear-gradient(135deg, rgba(8,12,22,0.98), rgba(16,22,34,0.94));
    color:var(--white-soft);
    padding:30px;
    box-shadow:var(--shadow-deep);
    border:1px solid rgba(216,160,61,0.24);
}

.property-rules-card h3{
    color:var(--gold-soft);
    font-size:1.25rem;
    margin-bottom:14px;
}

.property-rules-list{
    list-style:none;
    display:grid;
    gap:12px;
}

.property-rules-list li{
    position:relative;
    padding-left:26px;
    color:var(--text);
    font-weight:500;
    line-height:1.6;
    font-size:0.92rem;
}

.property-rules-card .property-rules-list li{
    color:rgba(251,246,238,0.92);
}

.property-rules-list li::before{
    content:"•";
    position:absolute;
    left:6px;
    top:-2px;
    color:#7a551b;
    font-size:1.4rem;
    line-height:1;
}

.property-rules-card .property-rules-list li::before{
    color:var(--gold);
}

.language-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.language-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(216,160,61,0.14);
    border:1px solid rgba(216,160,61,0.28);
    color:var(--gold-soft);
    font-size:0.82rem;
    font-weight:600;
}

.language-pill-light{
    background:rgba(216,160,61,0.12);
    border-color:rgba(216,160,61,0.24);
    color:var(--brown);
}