/* ============================================================
   CINEMATIC.CSS — Explore Ithihaas Heritage Experience
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --gold: #B8860B; 
    --gold-light: #D4AF37;
    --gold-muted: #C9A84C;
    --gold-bright: #D4A840;
    --bronze: #8A5F00;
    --bronze-dark: #5C3E00;
    --dark: #F5EFEB; /* Authentic Antique Beige Background */
    --dark-2: #FAF4EB; 
    --dark-3: #ECE1D1; 
    --dark-heritage: #140D08;
    --dark-heritage-2: #1E140D;
    --paper: #FAF5EE;
    --parchment: #F5EFEB;
    --parchment-card: #FDF9F2;
    --stone: #D4C9BD;
    --text: #2C1A12; 
    --text-muted: #5C4033;
    --white: #1A0F0A;
    --font-display: 'EB Garamond', Georgia, serif;
    --font-body: 'Outfit', sans-serif;
    --font-ui: 'Outfit', sans-serif;
}

html { scroll-behavior: smooth; }

body.cinematic-body {
    background-color: #F5EFEB;
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(212, 168, 64, 0.15) 0%, transparent 400px),
        radial-gradient(circle at 100% 0%, rgba(212, 168, 64, 0.15) 0%, transparent 400px),
        radial-gradient(circle at 50% 50%, rgba(250, 244, 235, 0.6) 0%, rgba(245, 239, 231, 0.95) 100%);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- FLOATING HERITAGE NAV ---- */
.cin-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0;
    background: rgba(18, 11, 7, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.4s ease;
}
.cin-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 48px;
    background: transparent;
    transition: all 0.4s ease;
}
.cin-nav.scrolled .cin-nav-inner {
    padding: 12px 48px;
    background: rgba(12, 7, 4, 0.98);
}
.cin-nav-divider {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(201,168,76,0) 0%, rgba(201,168,76,0.3) 25%, rgba(201,168,76,0.6) 50%, rgba(201,168,76,0.3) 75%, rgba(201,168,76,0) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease;
}
.cin-nav-ornament {
    width: 6px;
    height: 6px;
    background: #D4A840;
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(212,168,64,0.6);
    position: absolute;
    top: -3px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, background 0.35s ease;
}
.cin-nav:hover .cin-nav-divider {
    background: linear-gradient(90deg, rgba(201,168,76,0) 0%, rgba(212,168,64,0.5) 25%, rgba(212,168,64,0.9) 50%, rgba(212,168,64,0.5) 75%, rgba(201,168,76,0) 100%);
}
.cin-nav:hover .cin-nav-ornament {
    transform: rotate(45deg) scale(1.3);
    box-shadow: 0 0 10px rgba(212,168,64,0.9);
}
.cin-logo {
    font-family: var(--font-display);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cin-logo .logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.cin-logo-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: #D4AF37;
    letter-spacing: 0.04em;
    line-height: 1;
    display: inline-block;
    background: linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #AA8222 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.3s ease;
}
.cin-logo:hover .logo-img {
    transform: scale(1.04);
}
.cin-logo:hover .cin-logo-text {
    filter: brightness(1.18);
}
.cin-nav-links {
    display: flex;
    list-style: none;
    gap: 36px;
}
.cin-nav-links a {
    color: rgba(245, 230, 211, 0.85);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 4px;
}
.cin-nav-links a:hover,
.cin-nav-links a.active {
    color: var(--gold-bright);
}
.cin-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gold-bright);
    border-radius: 1px;
}
.cin-nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cin-nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #F5DCA3;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid rgba(212, 168, 64, 0.45);
    border-radius: 20px;
    background: rgba(20, 13, 8, 0.65);
    transition: all 0.35s ease;
    white-space: nowrap;
}
.cin-nav-phone svg {
    stroke: #D4AF37;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.cin-nav-phone:hover {
    color: #FFFDF9;
    border-color: #D4AF37;
    background: rgba(212, 168, 64, 0.22);
    box-shadow: 0 0 14px rgba(212, 168, 64, 0.4);
    transform: translateY(-1px);
}
.cin-nav-phone:hover svg {
    transform: rotate(12deg) scale(1.1);
}
@media (max-width: 900px) {
    .cin-nav-phone span { display: none; }
    .cin-nav-phone { padding: 8px 10px; border-radius: 50%; }
}
.cin-book-btn {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #110804;
    background: var(--gold-bright);
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(212, 168, 64, 0.3);
    transition: all 0.3s ease;
}
.cin-book-btn:hover {
    background: #F5DCA3;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(212, 168, 64, 0.5);
    color: #110804;
}

/* ---- CINEMATIC HERO ---- */
.cin-hero {
    position: relative;
    min-height: 480px;
    height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 40px;
}
.cin-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cin-hero-img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform;
    transform: scale(1.15);
}
.cin-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,8,4,0.5) 0%,
        rgba(10,8,4,0.2) 40%,
        rgba(10,8,4,0.6) 80%,
        rgba(10,8,4,1) 100%
    );
}
.cin-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.particle {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: float-particle 6s infinite ease-in-out;
}
@keyframes float-particle {
    0%   { opacity: 0; transform: translateY(0) translateX(0); }
    20%  { opacity: 0.6; }
    80%  { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-120px) translateX(30px); }
}
.cin-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 960px;
    padding: 0 24px;
    margin-top: 20px;
}
.cin-hero-tag {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
}
.cin-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.2vw, 4rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 18px;
    overflow: visible;
}
.cin-hero-title .line1,
.cin-hero-title .line2 {
    display: block;
    overflow: visible;
}
.cin-hero-sub {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 36px;
    opacity: 0;
    transform: translateY(20px);
}
.cin-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid var(--gold);
    padding: 16px 36px;
    border-radius: 2px;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
}
.cin-hero-cta svg { width: 16px; transition: transform 0.3s; }
.cin-hero-cta:hover { background: var(--gold); color: var(--dark); }
.cin-hero-cta:hover svg { transform: translateX(4px); }
.cin-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
    opacity: 0;
    animation: fadeIn 1s 3s forwards;
}
.cin-scroll-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}
.cin-scroll-indicator span {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.6;
}
@keyframes fadeIn { to { opacity: 1; } }

/* ---- DESTINATION PANELS ---- */
.cin-panels { background: var(--dark); }
.cin-panel {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.cin-panel-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cin-panel-img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    transform-origin: center center;
    transition: transform 0.1s linear;
    will-change: transform;
}
.cin-panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(10,8,4,0.9) 0%,
        rgba(10,8,4,0.5) 50%,
        rgba(10,8,4,0.1) 100%
    );
}
.cin-panel-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
    padding: 0 80px;
}
.cin-panel-number {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(201,168,76,0.12);
    line-height: 1;
    margin-bottom: -20px;
}
.cin-panel-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 8px;
}
.cin-panel-sub {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
}
.cin-panel-desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    color: var(--text-muted);
    margin-bottom: 36px;
    font-weight: 500;
}
.cin-panel-btn {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.3);
    padding-bottom: 4px;
    transition: all 0.3s;
}
.cin-panel-btn:hover { color: var(--white); border-color: var(--white); }

/* ---- SECTION SHARED ---- */
.cin-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
    padding: 0 24px;
}
.cin-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}
.cin-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 16px;
}
.cin-section-sub {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.9;
}

/* ---- 3D FLOATING CARDS ---- */
.cin-cards-section {
    background: var(--dark-2);
    padding: 120px 48px;
}
.cin-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}
.cin-card {
    background: var(--dark-3);
    border: 1px solid rgba(184,134,11,0.2);
    border-radius: 4px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: border-color 0.3s;
    cursor: poOutfit;
}
.cin-card:hover { border-color: rgba(201,168,76,0.35); }
.cin-card-img-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
}
.cin-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.cin-card:hover .cin-card-img-wrap img { transform: scale(1.08); }
.cin-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, transparent 60%);
    poOutfit-events: none;
}
.cin-card-body {
    padding: 28px;
    transform: translateZ(20px);
}
.cin-card-tag {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    display: block;
}
.cin-card-body h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 12px;
}
.cin-card-body p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.9;
    font-weight: 500;
    margin-bottom: 20px;
}
.cin-card-link {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    transition: color 0.3s;
}
.cin-card-link:hover { color: var(--white); }

/* ---- ABOUT IMMERSIVE ---- */
.cin-about {
    position: relative;
    padding: 180px 48px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cin-about-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cin-about-parallax {
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}
.cin-about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to left,
        rgba(245,235,225,0.95) 0%,
        rgba(245,235,225,0.7) 60%,
        rgba(245,235,225,0.3) 100%
    );
}
.cin-about-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding-right: 60px;
}
.cin-about-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 24px;
}
.cin-about-text {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 2;
    font-weight: 500;
    margin-bottom: 32px;
}
.cin-blockquote {
    border-left: 2px solid var(--gold);
    padding-left: 24px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--gold-light);
    margin-bottom: 40px;
    line-height: 1.9;
}
.cin-about-btn {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.3);
    padding-bottom: 4px;
    transition: all 0.3s;
}
.cin-about-btn:hover { color: var(--white); border-color: var(--white); }

/* ---- TIMELINE ---- */
.cin-timeline-section {
    background: var(--dark);
    padding: 120px 48px;
}
.cin-timeline {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cin-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    padding: 48px 0;
    border-bottom: 1px solid rgba(184,134,11,0.2);
    transition: all 0.4s;
}
.cin-timeline-item:last-child { border-bottom: none; }
.cin-timeline-item:hover .cin-tl-number { color: rgba(201,168,76,0.4); }
.cin-tl-number {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(201,168,76,0.12);
    min-width: 80px;
    line-height: 1;
    transition: color 0.4s;
}
.cin-tl-body h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 12px;
}
.cin-tl-body p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.9;
    font-weight: 500;
}

/* ---- GALLERY TEASER ---- */
.cin-gallery-teaser {
    background: var(--dark-2);
    padding: 120px 48px;
}
.cin-gallery-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 280px;
    gap: 12px;
    max-width: 1300px;
    margin: 0 auto 48px;
}
.cin-gallery-tall {
    grid-row: span 1;
    transform: translateY(-30px);
}
.cin-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    cursor: poOutfit;
}
.cin-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.cin-gallery-item:hover img { transform: scale(1.12); }
.cin-gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(245,235,225,0.8) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s;
}
.cin-gallery-item:hover .cin-gallery-item-overlay { opacity: 1; }
.cin-gallery-item-overlay span {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--white);
    letter-spacing: 0.1em;
}
.cin-gallery-cta { text-align: center; }
.cin-outline-btn {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(201,168,76,0.4);
    padding: 14px 32px;
    border-radius: 2px;
    transition: all 0.3s;
}
.cin-outline-btn:hover { background: var(--gold); color: var(--dark); }

/* ---- FINAL CTA ---- */
.cin-final-cta {
    position: relative;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}
.cin-final-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cin-final-img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
}
.cin-final-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245,235,225,0.75);
}
.cin-final-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 24px;
}
.cin-final-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 20px;
}
.cin-final-sub {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.9;
    margin-bottom: 48px;
}
.cin-final-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- ANTIQUE ORNAMENTED FOOTER ---- */
.cin-footer {
    background: #140D08 !important;
    border-top: 1px solid rgba(212, 168, 64, 0.35) !important;
    padding: 72px 48px 36px !important;
    position: relative;
    color: #F4ECE1 !important;
}
.cin-footer-ornament-top {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #140D08;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cin-footer-ornament-top .orn-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4AF37);
}
.cin-footer-ornament-top .orn-line.right {
    background: linear-gradient(90deg, #D4AF37, transparent);
}
.cin-footer-ornament-top .orn-gem {
    width: 8px;
    height: 8px;
    background: #D4AF37;
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(212, 168, 64, 0.7);
}
.cin-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 1fr;
    gap: 48px;
    align-items: start;
}
.cin-footer-brand h3 {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    color: #F5DCA3 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.04em;
}
.cin-footer-brand p {
    font-family: var(--font-ui) !important;
    font-size: 0.9rem !important;
    color: rgba(245, 230, 211, 0.75) !important;
    line-height: 1.7 !important;
    font-weight: 300 !important;
}
.cin-footer-col-title {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #D4A840;
    margin-bottom: 16px;
    display: block;
}
.cin-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start !important;
}
.cin-footer-links a {
    font-family: var(--font-ui) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em;
    color: rgba(245, 230, 211, 0.8) !important;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.cin-footer-links a:hover {
    color: #F5DCA3 !important;
    transform: translateX(4px);
}
.cin-footer-socials {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cin-footer-social-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cin-footer-social-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(212, 168, 64, 0.1);
    border: 1px solid rgba(212, 168, 64, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F5DCA3;
    transition: all 0.35s ease;
    text-decoration: none;
}
.cin-footer-social-link:hover {
    background: #D4A840;
    color: #110804;
    border-color: #D4A840;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 4px 14px rgba(212, 168, 64, 0.4);
}
.cin-footer-social-link svg {
    width: 17px;
    height: 17px;
}
.cin-footer-copy {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(212, 168, 64, 0.18) !important;
    font-size: 0.78rem !important;
    color: rgba(245, 230, 211, 0.6) !important;
    font-family: var(--font-ui) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---- WHATSAPP FLOAT (OFFICIAL WHATSAPP GREEN & WHITE) ---- */
.whatsapp-float,
#global-wa-float-btn,
#global-whatsapp-btn {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 52px; height: 52px;
    background: #25D366 !important;
    background-color: #25D366 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999995 !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}
.whatsapp-float:hover,
#global-wa-float-btn:hover,
#global-whatsapp-btn:hover {
    transform: scale(1.1) !important;
    background: #20BA56 !important;
    background-color: #20BA56 !important;
    box-shadow: 0 8px 26px rgba(37, 211, 102, 0.65) !important;
}
.whatsapp-float svg,
#global-wa-float-btn svg,
#global-whatsapp-btn svg {
    width: 26px !important;
    height: 26px !important;
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
    .cin-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .cin-gallery-strip { grid-template-columns: repeat(3, 1fr); }
    .cin-gallery-item:nth-child(4), .cin-gallery-item:nth-child(5) { display: none; }
}
@media (max-width: 768px) {
    .cin-nav-inner { padding: 16px 24px; }
    .cin-nav-links { display: none; }
    .cin-hero-title { font-size: 2.8rem; }
    .cin-panel-content { padding: 0 32px; }
    .cin-cards-grid { grid-template-columns: 1fr; }
    .cin-cards-section, .cin-gallery-teaser, .cin-timeline-section { padding: 80px 24px; }
    .cin-about { padding: 120px 24px; justify-content: center; }
    .cin-about-content { padding-right: 0; }
    .cin-gallery-strip { grid-template-columns: repeat(2, 1fr); height: auto; }
    .cin-gallery-tall { transform: none; }
    .cin-footer-inner { grid-template-columns: 1fr; }
    .cin-footer-links { justify-content: flex-start; }
}


.logo-img { height: 65px; width: auto; object-fit: contain; border-radius: 4px; transition: transform 0.3s; }
.logo-img:hover { transform: scale(1.05); }




/* ============================================================
   FULL SITE 3D ENHANCEMENTS - appended to cinematic.css
   ============================================================ */

/* ═══ GLOBAL 3D BASE ═══ */
* { box-sizing: border-box; }

/* Smooth scroll with momentum */
html {
    scroll-behavior: smooth;
    scroll-snap-type: none;
}

/* ── NAV Scrolled Luxury Dark Glass ── */
.cin-nav.scrolled .cin-nav-inner {
    background: rgba(12, 7, 4, 0.98) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(212, 168, 64, 0.25) !important;
    border-bottom: 1px solid rgba(212, 168, 64, 0.15) !important;
}

/* ── HERO SECTION 3D Depth & Crisp Typography (NO-DOUBLE-TEXT) ── */
.cin-hero-section {
    perspective: 800px;
}
.cin-hero-title {
    font-family: var(--font-display), 'EB Garamond', Georgia, serif !important;
    color: #FFF8EE !important;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    transform-style: preserve-3d;
}
.cin-hero-title .line1 {
    color: #FFF8EE !important;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}
.cin-hero-title .line2 {
    color: rgba(245, 230, 211, 0.92) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85) !important;
}
.cin-hero-sub {
    color: rgba(255, 245, 235, 0.95) !important;
    font-weight: 400 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85) !important;
}

/* ── CARDS 3D LIFT ── */
.cin-card {
    transform: translateZ(0);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                box-shadow 0.5s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 6px;
    overflow: hidden;
    background: #FAF8F5;
    border: 1px solid rgba(184,134,11,0.1);
}
.cin-card:hover {
    transform: translateY(-12px) translateZ(30px) scale(1.02);
    box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 0 0 2px rgba(184,134,11,0.2);
}
.cin-card img {
    transition: transform 0.7s ease;
}
.cin-card:hover img {
    transform: scale(1.08);
}

/* ── SECTION HEADINGS 3D ── */
.cin-section-title, .cin-about-title, .cin-final-title {
    color: #1A0F0A !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.cin-section-sub {
    color: #B8860B !important;
}

/* ── TIMELINE 3D items ── */
.cin-timeline-item {
    border-radius: 4px;
    padding: 40px 24px !important;
    transition: background 0.4s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
    border-left: 3px solid transparent;
}
.cin-timeline-item:hover {
    background: rgba(250,248,245,0.95);
    transform: translateX(12px) translateZ(20px);
    box-shadow: -6px 0 0 #B8860B, 4px 0 30px rgba(0,0,0,0.1);
    border-left: 3px solid #B8860B;
}
.cin-tl-body h3 { color: #1A0F0A !important; font-weight: 600 !important; }
.cin-tl-body p  { color: #4A3326 !important; font-weight: 500 !important; }
.cin-tl-number  { color: rgba(184,134,11,0.18) !important; }

/* ── GALLERY items 3D ── */
.cin-gallery-item {
    border-radius: 6px;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s;
}
.cin-gallery-item:hover {
    transform: translateY(-10px) scale(1.03) rotateY(3deg);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.cin-gallery-item-overlay span { color: #fff !important; }

/* ── ABOUT SECTION ── */
.cin-about-title { color: #1A0F0A !important; }
.cin-about-text  { color: #4A3326 !important; font-weight:500 !important; }
.cin-blockquote  { color: #B8860B !important; border-left-color: #B8860B !important; }


/* ── BUTTONS 3D ── */
.cin-gold-btn, .cin-outline-btn, .cin-about-btn {
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.cin-gold-btn:hover {
    transform: translateY(-4px) translateZ(10px) !important;
    box-shadow: 0 12px 30px rgba(184,134,11,0.35) !important;
}
.cin-outline-btn {
    color: #B8860B !important;
    border-color: rgba(184,134,11,0.4) !important;
}
.cin-outline-btn:hover {
    background: #B8860B !important;
    color: #fff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(184,134,11,0.3) !important;
}

/* ── TESTIMONIAL cards 3D ── */
.test-card {
    background: #FAF8F5 !important;
    border: 1px solid rgba(184,134,11,0.15) !important;
    border-radius: 6px !important;
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s, border-color 0.3s !important;
    transform: translateZ(0);
}
.test-card:hover {
    transform: translateY(-10px) rotateY(-4deg) translateZ(20px) !important;
    box-shadow: 12px 24px 50px rgba(0,0,0,0.15) !important;
    border-color: rgba(184,134,11,0.4) !important;
}
.test-quote  { color: #2C1A12 !important; font-weight: 500 !important; }
.test-author { color: #1A0F0A !important; font-weight: 700 !important; }
.test-place  { color: #B8860B !important; }

/* ── WHY-US cards 3D ── */
.why-cin-item {
    border-radius: 6px !important;
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s, background 0.3s !important;
    background: #FAF8F5 !important;
    border: 1px solid rgba(184,134,11,0.1) !important;
    transform: translateZ(0);
}
.why-cin-item:hover {
    transform: translateY(-14px) rotateX(4deg) translateZ(30px) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15), 0 0 0 2px rgba(184,134,11,0.2) !important;
    background: rgba(250,248,245,0.98) !important;
}
.why-cin-title { color: #1A0F0A !important; font-weight: 600 !important; }
.why-cin-desc  { color: #4A3326 !important; font-weight: 500 !important; }

/* ── SCROLL reveal utility ── */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── SUPPRESS WATERMARKS ── */
[class*="gemini"],[id*="gemini"],[class*="watermark"],[id*="watermark"],
[class*="branding"],[class*="powered-by"] {
    display:none !important;
}

/* ═══ LUXURY MOBILE SIDE DRAWER & BACKDROP ═══ */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    z-index: 10002;
    color: #B8860B;
    transition: transform 0.3s ease, color 0.3s ease;
    align-items: center;
    justify-content: center;
}
.mobile-menu-toggle:hover {
    transform: scale(1.08);
}
.mobile-menu-toggle svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    display: block;
}

/* Semi-transparent Backdrop */
.cin-mobile-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 6, 3, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.cin-mobile-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Side Drawer Sliding from Right */
.cin-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: #FAF8F5;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border-left: 1px solid rgba(184, 134, 11, 0.25);
    overflow-y: auto;
}
.cin-mobile-drawer.active {
    transform: translateX(0);
}

.cin-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}
.cin-mobile-drawer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.cin-mobile-drawer-logo img {
    height: 38px;
    width: auto;
}
.cin-mobile-drawer-logo span {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1A0F0A;
}

.cin-mobile-drawer-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #B8860B;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.cin-mobile-drawer-close:hover {
    transform: rotate(90deg);
}

.cin-mobile-drawer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.cin-mobile-drawer-links li {
    width: 100%;
}
.cin-mobile-drawer-links a {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #2C1A12;
    text-decoration: none;
    border-radius: 6px;
    letter-spacing: 0.03em;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cin-mobile-drawer-links a:hover,
.cin-mobile-drawer-links a.active {
    background: rgba(184, 134, 11, 0.1);
    color: #B8860B;
    transform: translateX(4px);
    font-weight: 600;
}

.cin-mobile-drawer-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 134, 11, 0.15);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cin-mobile-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff !important;
    background: #B8860B;
    padding: 14px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35);
    transition: background 0.3s, transform 0.3s;
}
.cin-mobile-drawer-cta:hover {
    background: #D4AF37;
    transform: translateY(-2px);
}

/* ═══ RESPONSIVE BREAKPOINTS (1440px, 1280px, 1024px, 834px, 768px, 390px, 375px, 360px) ═══ */

@media (max-width: 1280px) {
    .container, .cin-footer-inner, .cin-cards-grid, .why-grid, .test-grid {
        max-width: 95%;
    }
}

@media (max-width: 1024px) {
    .cin-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    .cin-gallery-strip {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .cin-gallery-item:nth-child(4), .cin-gallery-item:nth-child(5) {
        display: none;
    }
    .book-layout {
        grid-template-columns: 1fr 1fr;
    }
    .book-right {
        padding: 60px 36px;
    }
}

@media (max-width: 900px) {
    .cin-nav-links, .nav-links {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: block !important;
    }
    .cin-nav-right .cin-book-btn {
        display: none !important;
    }
    .cin-nav-inner, #mainNav {
        padding: 12px 20px !important;
    }
    .logo-img, nav img {
        height: 46px !important;
    }
}

@media (max-width: 834px) {
    .cin-hero-title {
        font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    }
    .cin-section-title {
        font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
    }
    .cin-cards-section, .cin-gallery-teaser, .cin-timeline-section, .cin-form-section {
        padding: 70px 24px !important;
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .test-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .book-layout {
        grid-template-columns: 1fr !important;
    }
    .book-left {
        height: 340px !important;
        min-height: 280px !important;
    }
    .book-left-overlay {
        padding: 32px 24px !important;
    }
    .book-left-text h2 {
        font-size: 1.8rem !important;
    }
    .book-right {
        padding: 48px 24px !important;
    }
    .gal-masonry {
        columns: 2 !important;
        column-gap: 12px !important;
    }
    .gal-section {
        padding: 60px 24px !important;
    }
}

@media (max-width: 480px) {
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }
    .cin-hero {
        min-height: 480px !important;
        padding: 90px 16px 36px 16px !important;
    }
    .cin-hero-title {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
        margin-bottom: 16px !important;
    }
    .cin-hero-sub {
        font-size: 0.95rem !important;
        margin-bottom: 28px !important;
        line-height: 1.7 !important;
    }
    .cin-hero-cta, .cin-book-btn, .journey-cin-btn {
        padding: 12px 24px !important;
        font-size: 0.72rem !important;
    }
    .cin-section-header {
        margin-bottom: 32px !important;
        padding: 0 12px !important;
    }
    .cin-section-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
    .cin-section-sub {
        font-size: 0.92rem !important;
    }
    .cin-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    .cin-card-body {
        padding: 20px !important;
    }
    .cin-cards-section, .cin-gallery-teaser, .cin-timeline-section, .cin-form-section {
        padding: 50px 16px !important;
    }
    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .why-cin-item {
        padding: 24px 18px !important;
        gap: 14px !important;
    }
    .why-cin-title {
        font-size: 1.25rem !important;
    }
    .why-cin-desc {
        font-size: 0.88rem !important;
    }
    .test-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .test-card {
        padding: 24px 18px !important;
    }
    .test-quote {
        font-size: 0.95rem !important;
        line-height: 1.75 !important;
        margin-bottom: 16px !important;
    }
    .test-num {
        font-size: 2.2rem !important;
        top: 16px !important;
        right: 18px !important;
    }
    .cin-form {
        gap: 14px !important;
    }
    .cin-form input, .cin-form textarea, .booking-form input, .booking-form select, .booking-form textarea {
        padding: 12px 14px !important;
        font-size: 0.9rem !important;
    }
    .cin-form button, .booking-form button[type="submit"] {
        padding: 14px 28px !important;
        font-size: 0.72rem !important;
        width: 100% !important;
    }
    .gal-masonry {
        columns: 1 !important;
    }
    .gal-section {
        padding: 40px 16px !important;
    }
    .gal-section-hdr {
        margin-bottom: 24px !important;
    }
    .gal-section-title {
        font-size: 1.6rem !important;
    }
    .cin-footer {
        padding: 40px 16px 20px !important;
    }
    .cin-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .cin-footer-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 16px !important;
    }
    .cin-footer-brand h3 {
        font-size: 1.2rem !important;
    }
    .cin-footer-brand p {
        font-size: 0.88rem !important;
    }

    /* Compact Floating Contact Buttons for small screens */
    #global-wa-float-btn, #static-contact-buttons a[href*="wa.me"] {
        width: 48px !important;
        height: 48px !important;
        bottom: 20px !important;
        right: 16px !important;
    }
    #global-wa-float-btn svg, #static-contact-buttons a[href*="wa.me"] svg {
        width: 24px !important;
        height: 24px !important;
    }
    #global-call-float-btn, #static-contact-buttons a[href*="tel:"] {
        width: 48px !important;
        height: 48px !important;
        bottom: 20px !important;
        right: 74px !important;
        font-size: 20px !important;
    }
    #static-contact-buttons {
        bottom: 20px !important;
        right: 16px !important;
        gap: 10px !important;
    }

    /* Lightbox modal responsive */
    .lightbox img {
        max-width: 95vw !important;
        max-height: 80vh !important;
    }
    .lightbox-close {
        top: 16px !important;
        right: 20px !important;
        font-size: 2.2rem !important;
    }
}

/* ============================================================
   HOMEPAGE REDESIGN — EXPLORE ITHIHAAS (DESIGNER HANDOFF)
   ============================================================ */

/* ---- HERITAGE NAVBAR OVERRIDES FOR HOMEPAGE ---- */
.cin-nav-inner {
    background: rgba(250, 248, 245, 0.92) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(184, 134, 11, 0.22) !important;
    box-shadow: 0 4px 20px rgba(44, 26, 18, 0.05);
}
.cin-nav.scrolled .cin-nav-inner {
    background: rgba(245, 235, 225, 0.97) !important;
    box-shadow: 0 8px 30px rgba(44, 26, 18, 0.12);
}
.cin-nav-links a {
    color: #2C1A12 !important;
    font-weight: 500 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    position: relative;
    padding-bottom: 4px;
}
.cin-nav-links a:hover,
.cin-nav-links a.active {
    color: #8A5F00 !important;
}
.cin-nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background: #B8860B;
    border-radius: 2px;
}

/* ---- SECTION 1: EDITORIAL STORY HERO WITH 4S SLIDER & VIBRANT ARTWORK ---- */
.home-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background: #0E0804;
    padding: 130px 64px 80px;
}
.home-hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.home-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
    background-size: cover;
    background-position: center center;
    will-change: opacity;
}
.home-hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.home-hero-slide .hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Preserves original bright, vivid, realistic temple colors */
    filter: brightness(0.95) contrast(1.04) saturate(1.08);
    transform: scale(1.05);
    transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.home-hero-slide.active .hero-slide-img {
    transform: scale(1);
}
/* Directional vignette: smooth fade into words on the left, keeping the center & right rich, warm and clearly visible without blackout */
.home-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        to right,
        rgba(14, 8, 4, 0.78) 0%,
        rgba(14, 8, 4, 0.62) 32%,
        rgba(14, 8, 4, 0.32) 58%,
        rgba(14, 8, 4, 0.08) 80%,
        transparent 100%
    ),
    linear-gradient(
        to top,
        rgba(14, 8, 4, 0.5) 0%,
        transparent 30%
    );
    pointer-events: none;
}
.home-hero-container {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.home-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 760px;
}
.home-hero-tag-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.home-hero-ornament-dot {
    width: 7px;
    height: 7px;
    background: var(--gold-bright);
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(212, 168, 64, 0.8);
}
.home-hero-tag {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #F5DCA3;
    font-weight: 600;
}
.home-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5.6vw, 4.5rem);
    font-weight: 500;
    line-height: 1.14;
    color: #FFF8EE;
    margin-bottom: 22px;
    letter-spacing: -0.01em;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}
.home-hero-divider-small {
    width: 68px;
    height: 2px;
    background: linear-gradient(90deg, #D4A840 0%, rgba(212, 168, 64, 0.1) 100%);
    margin-bottom: 24px;
}
.home-hero-sub {
    font-family: var(--font-ui);
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
    color: rgba(255, 245, 235, 0.95);
    line-height: 1.8;
    margin-bottom: 36px;
    max-width: 640px;
    font-weight: 300;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}
.home-hero-cta-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}
.home-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #110804;
    background: #D4A840;
    padding: 15px 32px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 168, 64, 0.45);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid #E5C158;
}
.home-hero-btn:hover {
    background: #F5DCA3;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(212, 168, 64, 0.65);
    color: #110804;
}
.home-hero-btn.secondary {
    background: rgba(20, 13, 8, 0.75);
    color: #F5DCA3;
    border: 1.5px solid rgba(212, 168, 64, 0.65);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.home-hero-btn.secondary:hover {
    background: rgba(212, 168, 64, 0.25);
    border-color: #D4AF37;
    color: #FFFDF9;
    box-shadow: 0 8px 24px rgba(212, 168, 64, 0.35);
}
.home-hero-btn svg {
    transition: transform 0.3s ease;
}
.home-hero-btn:hover svg {
    transform: translateX(4px);
}

/* Slide Progress Dots */
.hero-slider-dots {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.hero-dot {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: width 0.3s ease, background 0.3s ease;
}
.hero-dot .dot-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: #D4A840;
    border-radius: 2px;
}
.hero-dot.active {
    width: 52px;
    background: rgba(212, 168, 64, 0.35);
}
.hero-dot.active .dot-fill {
    width: 100%;
}

/* ---- SECTION HEADERS (COMMON) ---- */
.home-section-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 36px;
    position: relative;
    z-index: 2;
}
.home-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #7A5300;
    background: linear-gradient(180deg, #FAF4EB 0%, #F0E3CD 100%);
    border: 1px solid #C9A84C;
    padding: 4px 16px;
    border-radius: 4px;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(184, 134, 11, 0.1), inset 0 0 4px rgba(255, 255, 255, 0.8);
}
.home-section-tag::before,
.home-section-tag::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #B8860B;
    transform: rotate(45deg);
    margin: 0 4px;
    vertical-align: 1px;
}
.home-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    font-weight: 600;
    line-height: 1.18;
    color: #1A0F0A;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.home-section-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 12px;
    max-width: 220px;
    opacity: 0.88;
}
.home-section-flourish svg {
    width: 100%;
    max-width: 220px;
    height: 18px;
    display: block;
}
.home-section-closer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 44px auto 0;
    max-width: 220px;
    opacity: 0.85;
    position: relative;
    z-index: 6;
}
.home-section-closer svg {
    width: 100%;
    max-width: 220px;
    height: 18px;
    display: block;
}
.home-section-sub {
    font-family: var(--font-ui);
    font-size: clamp(0.92rem, 1.4vw, 1.02rem);
    color: #4A3326;
    line-height: 1.6;
    font-weight: 400;
    max-width: 640px;
    margin: 0 auto;
}
.home-section-dark .home-section-tag {
    color: #F5DCA3;
    background: rgba(245, 220, 163, 0.1);
    border-color: rgba(245, 220, 163, 0.35);
    box-shadow: none;
}
.home-section-dark .home-section-title {
    color: #FFF8EE;
}
.home-section-dark .home-section-sub {
    color: rgba(245, 230, 211, 0.85);
}

/* ---- SECTION 2: CURATED JOURNEYS (ARCHIVAL PARCHMENT CARDS & 3S AUTO-SLIDER) ---- */
.home-journeys-section {
    background-color: #F6EEE3;
    padding: 70px 24px 76px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(184, 134, 11, 0.35);
    border-bottom: 1px solid rgba(184, 134, 11, 0.35);
}
.home-journeys-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(200px, 22vw, 320px);
    height: clamp(200px, 22vw, 320px);
    background-image: url('images/gold_mandala_corner.webp');
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    transform-origin: top right;
    opacity: 0.45;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}
.home-journeys-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(200px, 22vw, 320px);
    height: clamp(200px, 22vw, 320px);
    background-image: url('images/gold_mandala_corner.webp');
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    transform: scaleY(-1);
    transform-origin: bottom left;
    opacity: 0.45;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

/* Journey Carousel Layout */
.journey-carousel-wrapper {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 2;
}
.journey-carousel-viewport {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden !important;
    position: relative;
    padding: 16px 4px;
}
.journey-carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 24px !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform !important;
}
.journey-carousel-nav {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FAF3E6;
    border: 1.5px solid #C9A84C;
    color: #8A5F00;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(138, 95, 0, 0.15);
    z-index: 5;
    padding: 0;
}
.journey-carousel-nav:hover {
    background: #D4AF37;
    color: #FFFFFF;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(138, 95, 0, 0.35);
}
.journey-carousel-nav:active {
    transform: scale(0.96);
}

/* Exact Picture Cards (matching user uploaded reference) */
.journey-card-item,
.journey-story-card {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3) !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}
.journey-card-link-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 32px rgba(70, 45, 10, 0.09);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    text-decoration: none;
    background: #FFFDF8;
    border: 1.5px solid #C8A663;
}
.journey-card-link-wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(184, 134, 11, 0.28);
    border-color: #B8860B;
}

/* Date Header at top of card (connected to Supabase admin panel) */
.journey-card-date-header {
    background: linear-gradient(180deg, #FAF3E6 0%, #F5E8D0 100%);
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1.5px solid rgba(200, 166, 99, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.journey-date-pill {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1A1009;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    transition: color 0.3s ease;
}
.journey-card-link-wrap:hover .journey-date-pill {
    color: #8E6007;
}

.journey-card-image-holder {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: #FFFAF2;
}
.journey-card-full-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.journey-card-link-wrap:hover .journey-card-full-img {
    transform: scale(1.02);
}

@media (max-width: 1100px) {
    .journey-card-item,
    .journey-story-card {
        flex: 0 0 calc((100% - 24px) / 2) !important;
        max-width: calc((100% - 24px) / 2) !important;
        min-width: 260px !important;
    }
}
@media (max-width: 680px) {
    .home-journeys-section {
        padding: 50px 14px 56px;
    }
    .journey-carousel-wrapper {
        gap: 8px;
    }
    .journey-card-item,
    .journey-story-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    .journey-carousel-nav {
        width: 38px;
        height: 38px;
    }
}

/* ---- SECTION 3: WHY EXPLORE ITHIHAAS (REFERENCE IMAGE 3x2 CARDS LAYOUT) ---- */
.home-why-section {
    background: radial-gradient(ellipse at 50% 30%, #FFFDF9 0%, #FAF5EB 60%, #F4EADB 100%);
    color: #2C1A12;
    padding: 68px 24px 60px;
    position: relative;
    border-top: 1.5px solid rgba(184, 134, 11, 0.35);
    border-bottom: 1.5px solid rgba(184, 134, 11, 0.35);
    box-shadow: inset 0 20px 40px rgba(184, 134, 11, 0.05), inset 0 -20px 40px rgba(184, 134, 11, 0.05);
    overflow: hidden;
}

.why-section-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 36px;
}
.why-section-tag {
    font-family: var(--font-ui), 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8A5F00;
    display: block;
    margin-bottom: 8px;
}
.why-section-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(2.1rem, 3.2vw, 2.85rem);
    font-weight: 700;
    color: #140802;
    line-height: 1.2;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.why-section-sub {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(1.08rem, 1.4vw, 1.28rem);
    font-style: italic;
    color: #4A3528;
    margin: 0 0 14px;
    line-height: 1.5;
}
.why-header-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 0;
}

/* 3x2 Grid of 6 Cards */
.why-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.why-feature-card {
    background: linear-gradient(170deg, #FFFDFB 0%, #FAF6EE 50%, #F5EDE0 100%);
    border: 1.5px solid #D6B972;
    border-radius: 8px;
    padding: 26px 26px 28px;
    position: relative;
    box-shadow: 0 4px 18px rgba(70, 45, 10, 0.05), inset 0 0 14px rgba(212, 168, 64, 0.03);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s ease, border-color 0.32s ease;
    display: flex;
    flex-direction: column;
}
.why-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(184, 134, 11, 0.18), inset 0 0 18px rgba(212, 168, 64, 0.06);
    border-color: #B8860B;
}

/* Ornate Corner Flourishes */
.why-card-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.card-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    opacity: 0.85;
}
.card-corner.tl { top: 4px; left: 4px; }
.card-corner.tr { top: 4px; right: 4px; }
.card-corner.bl { bottom: 4px; left: 4px; }
.card-corner.br { bottom: 4px; right: 4px; }

/* Card Top Header: Circle Icon Badge + Big Number */
.why-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.why-card-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FAF3E6;
    border: 1px solid #D6B972;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8A5F00;
    box-shadow: 0 2px 8px rgba(138, 95, 0, 0.1), inset 0 0 6px rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.why-feature-card:hover .why-card-icon-circle {
    transform: scale(1.08);
    border-color: #B8860B;
    background: #FFFDF8;
}
.why-card-number {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: #8A5F00;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Card Title */
.why-card-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.34rem;
    font-weight: 700;
    color: #140802;
    line-height: 1.26;
    margin: 0 0 12px;
    position: relative;
    z-index: 2;
}
.why-card-title.highlight {
    color: #3B140E;
}

/* Card Description */
.why-card-desc {
    font-family: var(--font-ui), 'Outfit', sans-serif;
    font-size: 0.92rem;
    color: #4A3528;
    line-height: 1.68;
    font-weight: 400;
    margin: 0;
    position: relative;
    z-index: 2;
}


/* Responsive Breakpoints */
@media (max-width: 1020px) {
    .why-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media (max-width: 640px) {
    .home-why-section {
        padding: 50px 16px 44px;
    }
    .why-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .why-feature-card {
        padding: 22px 20px 24px;
    }
    .why-card-title {
        font-size: 1.22rem;
    }
    .why-card-desc {
        font-size: 0.88rem;
    }
}


/* ---- SECTION 4: TESTIMONIALS (PARCHMENT CARDS & ANTIQUE BEIGE BACKGROUND) ---- */
.home-testimonials-section {
    background: #F5ECE0;
    padding: 64px 48px 70px;
    position: relative;
    border-top: 1px solid rgba(184, 134, 11, 0.35);
    border-bottom: 1px solid rgba(184, 134, 11, 0.35);
}
.home-test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1240px;
    margin: 0 auto 36px;
    position: relative;
    z-index: 2;
}
.home-test-card {
    background: linear-gradient(165deg, #FFFCF7 0%, #FAF3E6 50%, #F5EADB 100%);
    border: 1.5px solid #C9A84C;
    border-radius: 6px;
    padding: 34px 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 28px rgba(70, 45, 10, 0.08), inset 0 0 20px rgba(212, 168, 64, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.home-test-card::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(184, 134, 11, 0.32);
    border-radius: 4px;
    pointer-events: none;
    z-index: 4;
}
.home-test-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M2 14V6a4 4 0 0 1 4-4h8M2 2l6 6M2 6h4v4"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M22 14V6a4 4 0 0 0-4-4h-8M22 2l-6 6M22 6h-4v4"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M2 10v8a4 4 0 0 0 4 4h8M2 22l6-6M2 18h4v-4"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M22 10v8a4 4 0 0 1-4 4h-8M22 22l-6-6M22 18h-4v-4"/></svg>');
    background-position: top 4px left 4px, top 4px right 4px, bottom 4px left 4px, bottom 4px right 4px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
}
.home-test-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(184, 134, 11, 0.2), inset 0 0 28px rgba(212, 168, 64, 0.08);
    border-color: #B8860B;
}
.home-test-quote {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: #2C1A12;
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 24px;
    position: relative;
    z-index: 6;
}
.home-test-meta {
    border-top: 1px solid rgba(184, 134, 11, 0.22);
    padding-top: 16px;
    position: relative;
    z-index: 6;
}
.home-test-author {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #110804;
}
.home-test-place {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: #8A5F00;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 3px;
}
.home-test-more {
    text-align: center;
    margin-top: 20px;
}
.home-test-more a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7A5300;
    background: linear-gradient(180deg, #FFFDF9 0%, #F4E8D5 100%);
    border: 1px solid #C9A84C;
    padding: 8px 22px;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(184, 134, 11, 0.12);
    transition: all 0.3s ease;
}
.home-test-more a:hover {
    color: #110804;
    border-color: #B8860B;
    box-shadow: 0 4px 14px rgba(184, 134, 11, 0.28);
    transform: translateY(-2px);
}

/* ---- REVIEW SUBMISSION FORM (PARCHMENT CARD WITH CORNER ACCENTS) ---- */
.home-review-section {
    max-width: 860px;
    margin: 50px auto 0;
}
.home-review-card {
    background: linear-gradient(165deg, #FFFCF7 0%, #FAF3E6 50%, #F5EADB 100%);
    border: 1.5px solid #C9A84C;
    border-radius: 6px;
    padding: 38px 36px;
    box-shadow: 0 10px 28px rgba(70, 45, 10, 0.08), inset 0 0 20px rgba(212, 168, 64, 0.04);
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.home-review-card::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(184, 134, 11, 0.32);
    border-radius: 4px;
    pointer-events: none;
    z-index: 4;
}
.home-review-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M2 14V6a4 4 0 0 1 4-4h8M2 2l6 6M2 6h4v4"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M22 14V6a4 4 0 0 0-4-4h-8M22 2l-6 6M22 6h-4v4"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M2 10v8a4 4 0 0 0 4 4h8M2 22l6-6M2 18h4v-4"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23B8860B" stroke-width="1.5"><path d="M22 10v8a4 4 0 0 1-4 4h-8M22 22l-6-6M22 18h-4v-4"/></svg>');
    background-position: top 4px left 4px, top 4px right 4px, bottom 4px left 4px, bottom 4px right 4px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
}
.home-review-header {
    text-align: center;
    margin-bottom: 28px;
    position: relative;
    z-index: 6;
}
.home-review-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #7A5300;
    background: linear-gradient(180deg, #FFFDF9 0%, #F4E8D5 100%);
    border: 1px solid #C9A84C;
    padding: 5px 16px;
    border-radius: 3px;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(184, 134, 11, 0.12);
}
.home-review-tag::before,
.home-review-tag::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #B8860B;
    transform: rotate(45deg);
    margin: 0 4px;
    vertical-align: 1px;
}
.home-review-title {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    color: #110804;
    margin-bottom: 8px;
}
.home-review-sub {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: #5C4033;
    line-height: 1.65;
    max-width: 580px;
    margin: 0 auto;
}
.home-review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 6;
}
.home-review-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.home-review-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.home-review-form .form-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8A5F00;
    font-weight: 600;
}
.home-review-form input,
.home-review-form select,
.home-review-form textarea {
    background: #FFFDF9;
    border: 1px solid rgba(184, 134, 11, 0.35);
    color: #1A0F0A;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: 12px 16px;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
}
.home-review-form input:focus,
.home-review-form select:focus,
.home-review-form textarea:focus {
    border-color: #B8860B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.16);
}
.home-review-form textarea {
    min-height: 100px;
    resize: vertical;
}
.btn-submit-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(135deg, #C9A84C 0%, #B8860B 50%, #8A5F00 100%);
    border: none;
    padding: 14px 30px;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.35s ease;
    box-shadow: 0 4px 16px rgba(184, 134, 11, 0.35);
    align-self: center;
    margin-top: 6px;
}
.btn-submit-review:hover {
    background: linear-gradient(135deg, #D4AF37 0%, #C9A84C 50%, #B8860B 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(184, 134, 11, 0.55);
}

/* ---- SECTION 5: DEDICATED BOOKING HOMEPAGE SECTION ---- */
.home-booking-section {
    background: #140D08;
    color: #FFF8EE;
    padding: 120px 48px;
    position: relative;
    border-top: 1px solid rgba(184, 134, 11, 0.35);
}
.home-booking-container {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 48px;
    max-width: 1240px;
    margin: 0 auto;
    background: #1E140D;
    border: 1px solid rgba(212, 168, 64, 0.3);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.home-booking-visual {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    background: #0E0704;
}
.home-booking-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.home-booking-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 8, 4, 0.95) 0%, rgba(14, 8, 4, 0.4) 60%, rgba(14, 8, 4, 0.2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 36px;
}
.home-booking-quote-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.home-booking-badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #F5DCA3;
    font-weight: 700;
}
.home-booking-quote-box h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: #FFF8EE;
    line-height: 1.25;
}
.home-booking-quote-box p {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: rgba(245, 230, 211, 0.85);
    line-height: 1.75;
    font-weight: 300;
}
.home-booking-form-wrap {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-booking-form-header {
    margin-bottom: 28px;
}
.home-booking-pre {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #D4A840;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}
.home-booking-form-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    color: #FFF8EE;
    margin-bottom: 6px;
}
.home-booking-form-desc {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: rgba(245, 230, 211, 0.75);
}
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.booking-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.booking-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.booking-form .form-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #D4A840;
    font-weight: 600;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(201, 168, 76, 0.3);
    color: #FFF8EE;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    padding: 12px 16px;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease;
    width: 100%;
}
.booking-form select option {
    background: #1E140D;
    color: #FFF8EE;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: #D4A840;
    background: rgba(255, 255, 255, 0.08);
}
.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: rgba(245, 230, 211, 0.4);
}
.booking-form textarea {
    min-height: 90px;
    resize: vertical;
}
.btn-submit-booking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #110804;
    background: #D4A840;
    border: none;
    padding: 14px 28px;
    cursor: pointer;
    border-radius: 25px;
    font-weight: 700;
    margin-top: 8px;
    transition: all 0.35s ease;
    box-shadow: 0 4px 20px rgba(212, 168, 64, 0.35);
}
.btn-submit-booking:hover {
    background: #F5DCA3;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(212, 168, 64, 0.55);
}

/* ---- FLOATING BACK TO TOP BUTTON ---- */
#back-to-top-btn {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 48px;
    height: 48px;
    background: #FAF5EE;
    border: 1px solid #C9A84C;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8A5F00;
    cursor: pointer;
    z-index: 999990;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(44, 26, 18, 0.12);
}
#back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top-btn:hover {
    background: #D4A840;
    color: #1A0F0A;
    border-color: #D4A840;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 8px 24px rgba(212, 168, 64, 0.4);
}
#back-to-top-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}
#back-to-top-btn:hover svg {
    transform: translateY(-2px);
}

/* ---- GALLERY STYLING ENHANCEMENT ---- */
.cin-gallery-item,
.gallery-card {
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(44, 26, 18, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cin-gallery-item:hover,
.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(184, 134, 11, 0.2);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS (TABLET & MOBILE)
   ============================================================ */
@media (max-width: 1024px) {
    .home-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .home-hero-left {
        align-items: center;
        text-align: center;
    }
    .home-hero-divider-small {
        margin-left: auto;
        margin-right: auto;
    }
    .home-hero-right {
        width: 100%;
    }
    .home-hero-frame {
        max-width: 520px;
    }
    .journey-story-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    .why-editorial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .home-test-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .home-booking-container {
        grid-template-columns: 1fr;
    }
    .home-booking-visual {
        min-height: 260px;
    }
    .home-journeys-section,
    .home-why-section,
    .home-testimonials-section,
    .home-booking-section {
        padding: 56px 28px 60px;
    }
}

@media (max-width: 768px) {
    .cin-nav-inner {
        padding: 14px 20px;
    }
    .cin-nav-links {
        display: none;
    }
    .cin-nav-right .cin-book-btn {
        display: none;
    }
    .home-hero-section {
        padding: 100px 20px 60px;
        min-height: auto;
    }
    .home-hero-title {
        font-size: clamp(2rem, 7.5vw, 2.8rem);
    }
    .home-hero-sub {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 28px;
    }
    .home-hero-frame img {
        height: 280px;
    }
    .journey-story-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .why-scroll-grid,
    .why-editorial-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .home-test-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .home-journeys-section,
    .home-why-section,
    .home-testimonials-section,
    .home-booking-section {
        padding: 46px 18px 52px;
    }
    .home-booking-form-wrap {
        padding: 32px 20px;
    }
    .booking-form .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .home-hero-section {
        padding: 88px 16px 48px;
    }
    .home-hero-title {
        font-size: clamp(1.85rem, 8vw, 2.4rem);
    }
    .home-section-header {
        margin-bottom: 24px;
    }
    .journey-story-body {
        padding: 20px 18px 22px;
    }
    .journey-story-img-wrap {
        height: 190px;
    }
    .why-scroll-card,
    .why-editorial-card {
        padding: 26px 18px;
    }
    .home-test-card {
        padding: 24px 18px;
    }
    .home-review-card {
        padding: 28px 18px;
    }
    #back-to-top-btn {
        bottom: 16px;
        left: 14px;
        width: 42px;
        height: 42px;
    }
}

/* Official WhatsApp Floating Button Styling */
#global-wa-float-btn {
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
}
#global-wa-float-btn svg {
    fill: #FFFFFF !important;
}
#global-wa-float-btn:hover {
    background-color: #20BA56 !important;
    box-shadow: 0 8px 26px rgba(37, 211, 102, 0.65) !important;
}


/* ── MOBILE NAVBAR RESPONSIVE OPTIMIZATIONS ── */
@media (max-width: 600px) {
    .cin-nav-inner, #mainNav {
        padding: 10px 14px !important;
        gap: 6px !important;
    }
    .cin-logo {
        gap: 8px !important;
        min-width: 0 !important;
    }
    .cin-logo .logo-img, nav .logo-img {
        height: 34px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .cin-logo-text {
        font-size: 1.25rem !important;
        letter-spacing: 0.03em !important;
    }
    .cin-nav-right {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .cin-nav-phone {
        padding: 6px 7px !important;
        width: 36px !important;
        height: 36px !important;
    }
    .cin-nav-phone svg {
        width: 14px !important;
        height: 14px !important;
    }
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #D4AF37 !important;
        padding: 4px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    .mobile-menu-toggle svg {
        width: 24px !important;
        height: 24px !important;
    }
}