/* ============================================================
   Chameleon Experiences — B60 grid stylesheet
   Layout: COTA B60 system (pure viewport scaling).
   Skin:   Chameleon palette + Inter.
   --B60 = 1/720 of viewport width (1/360 on mobile), so every
   dimension expressed as calc(N * var(--B60)) is a fixed
   proportion of the screen and scales with it.
   ============================================================ */

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--beige-bg);
    color: var(--neutral-dark);
    scroll-behavior: smooth;
}

a { text-decoration: none; }

:root {
    /* B60 unit — pure scaling, exactly like COTA */
    --B60: calc(100vw / 720);

    /* Chameleon palette */
    --petrol:      #0E2A2A;
    --petrol-deep: #081D1D;
    --teal:        #3FB0A0;
    --teal-text:   #2C8577;
    --teal-light:  #57C4B4;
    --teal-tint:   #E4F1EE;
    --lime:        #8FC94A;
    --lime-bright: #9BD457;
    --lime-text:   #5E8C2C;
    --ink-green:   #14342B;
    --cream:       #F3EFE4;
    --grad-brand:  linear-gradient(90deg, #3FB0A0, #8FC94A);
    --green-deep: #3C6E47;
    --green-soft: #5F7A61;
    --green-hover: #2C5438;
    --beige-bg: #FDF9F2;
    --beige-light: #F5F2E8;
    --beige-medium: #EAE5D9;
    --neutral-dark: #2C2C2C;
    --neutral-mid: #3A3A3A;
    --neutral-gray: #6B6B6B;
    --white: #FFFFFF;
    --star: #F5B342;
    --whatsapp-bg: rgba(37, 211, 102, 0.125);
    --whatsapp-text: #075E54;
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-md: 0 12px 28px rgba(0,0,0,0.05);

    /* Type scale in B60 units */
    --fsz-body-very-small: calc(5 * var(--B60));
    --fsz-body-small: calc(6 * var(--B60));
    --fsz-body-regular: calc(8 * var(--B60));
    --fsz-heading-standard: calc(12 * var(--B60));
    --fsz-heading-elegant: calc(18 * var(--B60));
    --fsz-hero: calc(20 * var(--B60));
}

@media (max-width: 768px) {
    :root { --B60: calc(100vw / 360); }
}

/* ---------- Width / height utilities ---------- */
.w-5   { width: calc(5   * var(--B60)); }
.w-10  { width: calc(10  * var(--B60)); }
.w-15  { width: calc(15  * var(--B60)); }
.w-20  { width: calc(20  * var(--B60)); }
.w-30  { width: calc(30  * var(--B60)); }
.w-60  { width: calc(60  * var(--B60)); }
.w-90  { width: calc(90  * var(--B60)); }
.w-120 { width: calc(120 * var(--B60)); }
.w-150 { width: calc(150 * var(--B60)); }
.w-180 { width: calc(180 * var(--B60)); }
.w-200 { width: calc(200 * var(--B60)); }
.w-210 { width: calc(210 * var(--B60)); }
.w-240 { width: calc(240 * var(--B60)); }
.w-270 { width: calc(270 * var(--B60)); }
.w-300 { width: calc(300 * var(--B60)); }
.w-360 { width: calc(360 * var(--B60)); }
.w-480 { width: calc(480 * var(--B60)); }
.w-540 { width: calc(540 * var(--B60)); }
.w-640 { width: calc(640 * var(--B60)); }
.w-720 { width: calc(720 * var(--B60)); }

.h-5   { height: calc(5   * var(--B60)); }
.h-10  { height: calc(10  * var(--B60)); }
.h-15  { height: calc(15  * var(--B60)); }
.h-20  { height: calc(20  * var(--B60)); }
.h-30  { height: calc(30  * var(--B60)); }
.h-60  { height: calc(60  * var(--B60)); }
.h-90  { height: calc(90  * var(--B60)); }
.h-120 { height: calc(120 * var(--B60)); }
.h-150 { height: calc(150 * var(--B60)); }
.h-180 { height: calc(180 * var(--B60)); }
.h-210 { height: calc(210 * var(--B60)); }
.h-240 { height: calc(240 * var(--B60)); }
.h-270 { height: calc(270 * var(--B60)); }
.h-300 { height: calc(300 * var(--B60)); }
.h-360 { height: calc(360 * var(--B60)); }
.h-480 { height: calc(480 * var(--B60)); }
.h-720 { height: calc(720 * var(--B60)); }

.accent-lime {
    color: var(--lime-bright);
    font-style: italic;
}

.fa-bars::before {
    color: var(--teal-light) !important;
}

.padd-lr-container {
    padding-right: calc(90 * var(--B60)) !important;
    padding-left: calc(90 * var(--B60)) !important;
}
.padd-left-container {
    padding-left: calc(90 * var(--B60)) !important;
}
.padd-right-container {
    padding-right: calc(90 * var(--B60)) !important;
}

/* ---------- B60 structural system ---------- */
.B60-component-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.B60-component { box-sizing: border-box; }
.B60-component-nest { display: flex; flex-wrap: wrap; }

.section-pad { padding-top: calc(30 * var(--B60)); padding-bottom: calc(30 * var(--B60)); }

/* ---------- Backgrounds ---------- */
.color-bg-1 { background-color: var(--beige-bg); }
.color-bg-2 { background-color: var(--beige-light); }
.color-bg-dark { background-color: var(--petrol); }
.color-bg-white { background-color: var(--white); }

/* ---------- Typography ---------- */
.heading-hero {
    font-size: var(--fsz-hero);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.0;
    color: var(--ink-green);
    margin: calc(10 * var(--B60)) 0;
    margin-top: 0;
}
.heading-hero-light {
    font-size: var(--fsz-hero);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.0;
    color: var(--beige-bg);
    margin: calc(10 * var(--B60)) 0;
    margin-top: 0;
}
.heading-elegant {
    font-size: var(--fsz-heading-elegant);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-green);
    position: relative;
    display: inline-block;
}
.heading-elegant-light {
    font-size: var(--fsz-heading-elegant);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cream);
    position: relative;
    display: inline-block;
}
.heading-elegant::after {
    content: '';
    position: absolute;
    bottom: calc(-5 * var(--B60));
    left: 0;
    width: calc(50 * var(--B60));
    height: calc(1.5 * var(--B60));
    background: var(--teal);
    border-radius: calc(1 * var(--B60));
}
.heading-elegant-light::after {
    content: '';
    position: absolute;
    bottom: calc(-5 * var(--B60));
    left: 0;
    width: calc(50 * var(--B60));
    height: calc(1.5 * var(--B60));
    background: var(--teal);
    border-radius: calc(1 * var(--B60));
}
.B60-centered-text-block .heading-elegant::after,
.B60-centered-text-block-wide .heading-elegant::after { left: 50%; transform: translateX(-50%); }

.B60-centered-text-block .heading-elegant-light::after,
.B60-centered-text-block-wide .heading-elegant-light::after { left: 50%; transform: translateX(-50%); }

.heading-standard {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fsz-heading-standard);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.15;
    color: var(--neutral-dark);
    line-height: 1.3;
    margin: 0 0 calc(6 * var(--B60));
}
.body-standard {
    font-size: var(--fsz-body-regular);
    color: var(--neutral-mid);
    line-height: 1.55;
    margin: calc(5 * var(--B60)) 0 0;
}
.body-standard-light {
    font-size: var(--fsz-body-regular);
    color: var(--cream);
    line-height: 1.55;
    margin: calc(5 * var(--B60)) 0 0;
}
.body-small {
    font-size: var(--fsz-body-small) !important;
    color: var(--neutral-gray);
    line-height: 1.5;
    margin: calc(5 * var(--B60)) 0 0;
}
.margin-bt { margin-bottom: calc(15 * var(--B60)); }
.text-center { text-align: center; }

/* ---------- Text blocks ---------- */
.B60-centered-text-block-wide {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: calc(30 * var(--B60)) calc(120 * var(--B60));
}
.B60-centered-text-block {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: calc(30 * var(--B60));
}
.B60-left-aligned-text-block {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: calc(30 * var(--B60));
}

/* ---------- Hero bits ---------- */
.hero-badge {
    background: transparent;
    color: var(--teal-light);
    padding: 0;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: var(--fsz-body-small);
    margin-bottom: calc(10 * var(--B60));
}
.hero-bullets { display: flex; flex-wrap: wrap; gap: calc(10 * var(--B60)); margin: calc(14 * var(--B60)) 0; }
.bullet { display: flex; align-items: center; gap: calc(4 * var(--B60)); font-size: var(--fsz-body-small); font-weight: 500; color: var(--cream); }
.bullet i { color: var(--teal-light); }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(8 * var(--B60)); margin-top: calc(20 * var(--B60)); }

/* ---------- Buttons ---------- */
.B60-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: calc(4 * var(--B60));
    background: var(--grad-brand);
    color: var(--petrol-deep);
    font-size: var(--fsz-body-regular);
    font-weight: 500;
    padding: calc(6 * var(--B60)) calc(14 * var(--B60));
    border: none;
    border-radius: calc(20 * var(--B60));
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.B60-btn:hover { filter: brightness(1.05); transform: translateY(calc(-1 * var(--B60))); }
.btn-outline { background: transparent; border: calc(0.75 * var(--B60)) solid var(--teal); color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: var(--petrol-deep); }
.btn-full { width: 100%; margin-top: calc(10 * var(--B60)); }

.B60-btn-grad {
    display: inline-flex; align-items: center; justify-content: center;
    gap: calc(4 * var(--B60));
    background: var(--grad-brand);
    color: var(--petrol-deep);
    font-size: var(--fsz-body-regular);
    font-weight: 500;
    padding: calc(6 * var(--B60)) calc(14 * var(--B60));
    border: none;
    border-radius: calc(20 * var(--B60));
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.B60-btn-grad:hover { 
    filter: brightness(1.05); 
    transform: translateY(calc(-1 * var(--B60)));
}

.btn-outline-dark {
    background: transparent;
    border: calc(0.75 * var(--B60)) solid var(--teal-light);
    color: var(--teal-light);
}

.btn-outline-dark:hover {
    background: var(--teal-light);
    color: var(--petrol-deep);
}

/* ---------- Images ---------- */
.B60-image-block {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    padding: calc(24 * var(--B60));
    overflow: hidden;
}
.image-cover {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(14 * var(--B60));
    box-shadow: var(--shadow-md);
}
/* ---------- Hero photo gallery (4×4 grid, center 2×2) ---------- */
.hero-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: calc(4 * var(--B60));
    width: 100%;
    aspect-ratio: 1 / 1;          /* whole ensemble is a square */
}
.hero-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;          /* every tile is 1:1 */
    object-fit: cover;
    display: block;
    border-radius: calc(4 * var(--B60));
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-gallery img:not(.gallery-main):hover {
    transform: scale(1.03);       /* subtler grow */
    z-index: 3;
    box-shadow: var(--shadow-sm);
}
.hero-gallery .gallery-main {
    grid-column: 1 / 4;           /* top-left 3×3 block: columns 1–3 */
    grid-row: 1 / 4;              /* rows 1–3 */
    border-radius: calc(6 * var(--B60));
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
    z-index: 1;
}

/* Partners hero — static 2×2 square gallery (no hover) */
.quad-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: calc(4 * var(--B60));
    width: 100%;
    aspect-ratio: 1 / 1;
}
.quad-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: calc(6 * var(--B60));
}

/* ---------- Cards ---------- */
.card-cell { box-sizing: border-box; padding: calc(8 * var(--B60)); display: flex; }
.B60-card {
    font-size: var(--fsz-body-small);
    line-height: 1.55;
    width: 100%;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: calc(14 * var(--B60));
    padding: calc(15 * var(--B60));
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.B60-card-left-align {
    text-align: left !important;
}
.B60-card > a {
    margin-top: auto;      
    display: block;
}
.B60-card .B60-btn {
    width: 100%;           
}
.card-beige { background: var(--beige-light); }
.card-icon { font-size: calc(16 * var(--B60)); color: var(--teal); margin-bottom: calc(8 * var(--B60)); display: block; }
.card-img { 
    border-radius: calc(9 * var(--B60));
    margin-bottom: calc(8 * var(--B60));
    display: block;
    height: calc(90 * var(--B60));
    object-fit: cover;
}
.feature-list { margin: 0rem; margin-bottom: calc(3 * var(--B60)); padding-left: calc(10 * var(--B60)); }
.feature-list li { margin: calc(3 * var(--B60)) 0; font-size: var(--fsz-body-small); color: var(--neutral-mid); }
.exp-details { display: flex; flex-wrap: wrap; gap: calc(8 * var(--B60)); margin: calc(9 * var(--B60)) 0 calc(6 * var(--B60)); font-size: var(--fsz-body-small); color: var(--neutral-gray); }
.exp-details span i { margin-right: calc(3 * var(--B60)); color: var(--teal); }
.card-label { font-size: var(--fsz-body-small); font-weight: 600; color: var(--neutral-dark); }
.addons {
    display: inline-block;
    background: var(--beige-light);
    font-size: var(--fsz-body-small);
    padding: calc(5 * var(--B60)) calc(7 * var(--B60));
    border-radius: calc(10 * var(--B60));
    margin-top: calc(8 * var(--B60));
    color: var(--neutral-mid);
}

/* ---------- Testimonials / reviews ---------- */
.testimonial-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--white);
    border-radius: calc(12 * var(--B60));
    padding: calc(16 * var(--B60));
    box-shadow: var(--shadow-sm);
    height: 100%; 
    display: flex;
    flex-direction: column;
}
.testimonial-card p { 
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fsz-body-regular); 
    color: #000; 
    line-height: 1.45; 
    margin: calc(4 * var(--B60)) 0; 
    margin-bottom: calc(10 * var(--B60));
}
.testimonial-card strong { font-size: var(--fsz-body-small); color: var(--neutral-dark); }
.stars { color: var(--star); letter-spacing: calc(1 * var(--B60)); margin-bottom: calc(8 * var(--B60)); }
/* Reviews page — closing note star */
.icon-star { color: var(--teal-light); }
.review-author { margin-top: auto; }
.review-name {
    display: flex;
    align-items: center;
    gap: calc(4 * var(--B60));
    font-size: var(--fsz-body-small);
    font-weight: 600;
    color: var(--neutral-dark);
    line-height: 1.3;
}
.review-flag {
    width: calc(10 * var(--B60));
    height: auto;
    border-radius: calc(1 * var(--B60));
    flex-shrink: 0;
}
.review-visited {
    font-size: var(--fsz-body-very-small);
    color: var(--neutral-gray);
    line-height: 1.3;
    margin-top: calc(2 * var(--B60));
}
/* ---------- Reviews carousel (infinite, arrow-driven, 3 visible) ---------- */
.review-carousel {
    position: relative;
    box-sizing: border-box;
    padding: 0 calc(90 * var(--B60));   /* gutters that hold the arrows */
}
.review-viewport {
    width: 100%;
    overflow: hidden;                    /* clips to exactly 3 cards (600 units) */
}
.review-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}
.review-slide { flex: 0 0 auto; }        /* width comes from .w-200; never shrink */

.B60-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(30 * var(--B60));
    height: calc(30 * var(--B60));
    border: none;
    border-radius: 50%;
    background: var(--green-deep);
    color: #fff;
    font-size: calc(10 * var(--B60));
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s ease;
}
.B60-slider-nav:hover { background: var(--green-hover); }
.B60-slider-prev { left: calc(35 * var(--B60)); }   /* centered in the 60-unit gutter */
.B60-slider-next { right: calc(35 * var(--B60)); }

@media (max-width: 768px) {
    .review-carousel { padding: 0 calc(40 * var(--B60)); }
    .review-slide { width: calc(280 * var(--B60)) !important; }  /* ~one card per screen */
}

/* ---------- Partners ---------- */
.partner-benefit {
    width: 100%;
    font-size: var(--fsz-body-small);
    line-height: 1.55;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    background: var(--white);
    border-radius: calc(12 * var(--B60));
    padding: calc(14 * var(--B60));
    text-align: center;
}
.partner-benefit i { font-size: calc(16 * var(--B60)); color: var(--teal); }
.partner-benefit h3 { margin: calc(8 * var(--B60)) 0; }
.partner-benefit p { padding: 0 calc(9 * var(--B60)); }

/* ---------- About ---------- */
.about-photo { border-radius: calc(14 * var(--B60)); overflow: hidden; box-shadow: var(--shadow-sm); }
.about-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--B60)); padding: calc(16 * var(--B60)); }
.round-thumb { width: calc(60 * var(--B60)); height: calc(60 * var(--B60)); object-fit: cover; border-radius: 50%; }
.icon-green { color: var(--teal); }

/* ---------- Contact ---------- */
.contact-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--white);
    border-radius: calc(14 * var(--B60));
    padding: calc(18 * var(--B60));
    box-shadow: var(--shadow-sm);
}
.contact-card p { font-size: var(--fsz-body-regular); color: var(--neutral-mid); margin: calc(6 * var(--B60)) 0; }
.form-group { margin-bottom: calc(10 * var(--B60)); }
input, textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fsz-body-small);
    padding: calc(8 * var(--B60)) calc(10 * var(--B60));
    border: 1px solid var(--beige-medium);
    border-radius: calc(16 * var(--B60));
    background: #fff;
}
textarea { border-radius: calc(12 * var(--B60)); resize: vertical; }
.whatsapp-link {
    display: inline-flex; align-items: center; gap: calc(5 * var(--B60));
    background: var(--teal-tint);
    color: var(--whatsapp-text);
    font-weight: 500;
    padding: calc(6 * var(--B60)) calc(12 * var(--B60));
    border-radius: calc(20 * var(--B60));
    margin-top: calc(8 * var(--B60));
}
.whatsapp-link i { font-size: calc(12 * var(--B60)); }
.hr-soft { border: none; border-top: 1px solid var(--beige-medium); margin: calc(12 * var(--B60)) 0; }
/* Homepage compact contact links */
.contact-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--B60)) calc(20 * var(--B60)); margin-bottom: calc(6 * var(--B60)); }
.contact-quick-item { font-size: var(--fsz-body-regular); font-weight: 500; color: var(--cream); }
.contact-quick-item:hover { color: var(--lime-bright); }

/* ======================================================
   About page (Route_about.php) — additions only
   ====================================================== */

/* Travel photo strip (larger than the small round-thumb gallery) */
.travel-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(10 * var(--B60));
    padding: calc(20 * var(--B60)) calc(30 * var(--B60)) 0;
}
.travel-thumb {
    width: calc(100 * var(--B60));
    height: calc(100 * var(--B60));
    object-fit: cover;
    border-radius: calc(10 * var(--B60));
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.travel-thumb:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

/* ======================================================
   Experiences page (Route_experiences.php) — additions only
   ====================================================== */

/* Small eyebrow label above each tour title */
.exp-eyebrow {
    display: block;
    font-size: var(--fsz-body-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--teal);
}

/* Two-column "what you'll see / good for" block inside a tour */
.exp-cols { display: flex; flex-wrap: wrap; gap: calc(3 * var(--B60)); margin: calc(6 * var(--B60)) 0; }
.exp-col { flex: 1; min-width: calc(120 * var(--B60)); }

/* Alternating rows: image right / text left on the reversed tours */
.exp-order-image { order: 0; }
.exp-order-text { order: 1; }

    .exp-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: calc(8 * var(--B60));
      height: auto;
      min-height: 0;
      align-content: start;
    }
    .exp-mosaic img {
      width: 100%;
      object-fit: cover;
      display: block;
      border-radius: 8px;
      aspect-ratio: 5 / 4;
    }
    .exp-mosaic .exp-mosaic-main {
      grid-column: 1 / -1;
      aspect-ratio: 3 / 2;
    }

@media (max-width: 768px) {
    /* When halves stack, always show the image first regardless of source order */
    .exp-order-image { order: -1 !important; }
    .exp-order-text { order: 0 !important; }
    .exp-cols { gap: calc(10 * var(--B60)); }
}

/* ======================================================
   Contact page (Route_contact.php) — additions only
   ====================================================== */
.social-label { font-size: var(--fsz-body-small); font-weight: 600; color: var(--neutral-dark); margin: 0 0 calc(6 * var(--B60)); }
.social-row { display: flex; gap: calc(8 * var(--B60)); }
.social-row a {
    width: calc(26 * var(--B60));
    height: calc(26 * var(--B60));
    border-radius: 50%;
    background: var(--beige-light);
    color: var(--petrol);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(12 * var(--B60));
    transition: background-color 0.2s ease, color 0.2s ease;
}
.social-row a:hover { background: var(--teal-light); color: var(--cream); }

/* ======================================================
   Blog homepage (Route_blog.php) — additions only
   ====================================================== */
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--B60)); margin-top: calc(14 * var(--B60)); }
.blog-chip {
    font-size: var(--fsz-body-small);
    font-weight: 500;
    color: var(--neutral-dark);
    background: var(--white);
    border: 1px solid var(--beige-medium);
    padding: calc(4 * var(--B60)) calc(10 * var(--B60));
    border-radius: calc(20 * var(--B60));
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.blog-chip:hover,
.blog-chip.active { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }

.blog-tag {
    align-self: flex-start;
    display: inline-block;
    background: var(--beige-light);
    color: var(--green-deep);
    font-size: var(--fsz-body-small);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: calc(2 * var(--B60)) calc(7 * var(--B60));
    border-radius: calc(20 * var(--B60));
    margin-bottom: calc(6 * var(--B60));
}

a.blog-readmore {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--B60));
    font-size: var(--fsz-body-small);
    font-weight: 600;
    color: var(--green-deep);
    padding-top: calc(8 * var(--B60));
}
a.blog-readmore:hover { color: var(--green-hover); }
a.blog-readmore i { transition: transform 0.2s ease; }
a.blog-readmore:hover i { transform: translateX(calc(2 * var(--B60))); }

/* ======================================================
   Article page (Route_article.php) — two-column + sidebar
   (replaces the earlier single-column article block)
   ====================================================== */

/* Reading progress bar */
.reading-progress {
    position: fixed; top: 0; left: 0;
    height: calc(3 * var(--B60));
    width: 0;
    background: var(--green-deep);
    z-index: 200;
    transition: width 0.1s linear;
}

/* ---------- Main column ---------- */
.article-main { padding: 0 calc(30 * var(--B60)) 0 calc(90 * var(--B60)); box-sizing: border-box; }

.breadcrumb { font-size: var(--fsz-body-small); color: var(--neutral-gray); margin-bottom: calc(10 * var(--B60)); }
.breadcrumb a { color: var(--green-deep); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 calc(4 * var(--B60)); }

.article-title { font-size: calc(24 * var(--B60)); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--neutral-dark); margin: calc(6 * var(--B60)) 0; }
.article-deck { font-size: calc(10 * var(--B60)); color: var(--neutral-mid); line-height: 1.5; margin: 0; }
.article-byline { display: flex; align-items: center; gap: calc(8 * var(--B60)); margin: calc(14 * var(--B60)) 0; }
.article-avatar {
    flex-shrink: 0;
    width: calc(28 * var(--B60)); height: calc(28 * var(--B60));
    border-radius: 50%;
    background: var(--beige-light); color: var(--green-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: calc(13 * var(--B60));
}
.article-byline-text { display: flex; flex-direction: column; }
.article-author { font-size: var(--fsz-body-small); font-weight: 600; color: var(--neutral-dark); line-height: 1.3; }
.article-byline-meta { font-size: var(--fsz-body-small); color: var(--neutral-gray); }

.article-lead-img { width: 100%; border-radius: calc(12 * var(--B60)); display: block; margin: calc(6 * var(--B60)) 0 calc(16 * var(--B60)); }

/* ---------- Prose body ---------- */
.article-body { font-size: var(--fsz-body-regular); color: var(--neutral-mid); line-height: 1.75; }
.article-body > p { margin: 0 0 calc(12 * var(--B60)); }
.article-body h2 { font-size: calc(14 * var(--B60)); font-weight: 600; letter-spacing: -0.01em; color: var(--neutral-dark); margin: calc(24 * var(--B60)) 0 calc(8 * var(--B60)); }
.article-body h3 { font-size: calc(11 * var(--B60)); font-weight: 600; color: var(--neutral-dark); margin: calc(16 * var(--B60)) 0 calc(6 * var(--B60)); }
.article-body ul, .article-body ol { margin: 0 0 calc(12 * var(--B60)); padding-left: calc(16 * var(--B60)); }
.article-body li { margin: calc(4 * var(--B60)) 0; }
.article-body a { color: var(--green-deep); text-decoration: underline; }
.article-body a:hover { color: var(--green-hover); }
.article-body strong { color: var(--neutral-dark); }

.pull-quote {
    margin: calc(18 * var(--B60)) 0;
    padding: calc(2 * var(--B60)) 0 calc(2 * var(--B60)) calc(14 * var(--B60));
    border-left: calc(2 * var(--B60)) solid var(--green-deep);
    font-size: calc(12 * var(--B60)); font-style: italic;
    color: var(--neutral-dark); line-height: 1.5;
}
.article-figure { margin: calc(16 * var(--B60)) 0; }
.article-figure img { width: 100%; border-radius: calc(10 * var(--B60)); display: block; }
.article-figure figcaption { font-size: var(--fsz-body-small); color: var(--neutral-gray); text-align: center; margin-top: calc(4 * var(--B60)); }

.inline-cta {
    background: var(--beige-light);
    border-radius: calc(12 * var(--B60));
    padding: calc(16 * var(--B60));
    margin: calc(20 * var(--B60)) 0;
    text-align: center;
}
.inline-cta p { margin: 0 0 calc(10 * var(--B60)); font-weight: 500; color: var(--neutral-dark); font-size: var(--fsz-body-regular); }

/* ---------- Sidebar ---------- */
.article-sidebar { padding: 0 calc(90 * var(--B60)) 0 calc(15 * var(--B60)); box-sizing: border-box; }
.article-sidebar-inner {
    position: sticky;
    top: calc(56 * var(--B60));
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--B60));
}
.sidebar-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: calc(12 * var(--B60));
    padding: calc(14 * var(--B60));
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}
.sidebar-title { font-size: var(--fsz-body-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-gray); margin: 0 0 calc(8 * var(--B60)); }
.sidebar-btn-link { display: block; }

/* About widget */
.sidebar-author { text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--B60)); }
.sidebar-author .author-avatar { width: calc(44 * var(--B60)); height: calc(44 * var(--B60)); font-size: calc(20 * var(--B60)); margin-bottom: calc(4 * var(--B60)); }
.sidebar-author .body-small { margin: 0 0 calc(6 * var(--B60)); }

/* CTA widget */
.sidebar-cta { background: var(--beige-light); border: none; text-align: center; }
.sidebar-cta-icon { font-size: calc(18 * var(--B60)); color: var(--green-deep); }
.sidebar-cta-title { font-size: var(--fsz-body-regular); font-weight: 600; color: var(--neutral-dark); margin: calc(6 * var(--B60)) 0 calc(4 * var(--B60)); }
.sidebar-cta .body-small { margin: 0 0 calc(6 * var(--B60)); }

/* Tags widget */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: calc(5 * var(--B60)); }
.sidebar-tags .blog-tag { margin-bottom: 0; }

/* ---------- Mobile: stack columns, un-stick sidebar ---------- */
@media (max-width: 768px) {
    .article-main { width: calc(360 * var(--B60)) !important; padding: 0 calc(20 * var(--B60)); }
    .article-sidebar { width: calc(360 * var(--B60)) !important; padding: calc(16 * var(--B60)) calc(20 * var(--B60)) 0; }
    .article-sidebar-inner { position: static; }
}

/* ======================================================
   Navigation (Chameleon, rem-based) — kept so Site_menu.php renders
   ====================================================== */
nav {
    padding: calc(5 * var(--B60)) calc(30 * var(--B60));
    background: var(--petrol-deep);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 100;
}
.nav-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.nav-brand { display: flex; align-items: center; }
.logo-img { width: calc(25 * var(--B60)); height: calc(25 * var(--B60)); object-fit: cover; border-radius: 50%; }
.logo {  
    color: var(--cream); 
    font-family: 'Marcellus', serif; 
    font-size: calc(9 * var(--B60)); 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
    font-weight: 400;
}
.nav-links { 
    display: flex; 
    gap: 32px; 
    list-style: none; 
    font-size: var(--fsz-body-regular);
}
.nav-links a { font-weight: 500; color: var(--cream); transition: color 0.2s; }
.nav-links a:hover { color: var(--lime-bright); }
.mobile-menu { display: none; font-size: 1.8rem; cursor: pointer; background: none; border: none; padding: 0; cursor: pointer; color: inherit;}

/* ======================================================
   Footer
   ====================================================== */
footer { text-align: center; background: var(--petrol-deep); font-size: 0.85rem; color: var(--beige-bg); }
.footer-bar { text-align: center; padding: calc(10 * var(--B60)) 0; }
.footer-bar p { margin: 0; font-size: var(--fsz-body-small); color: var(--beige-bg); }

/* ---------- Cookie consent banner (injected by the gateway) ---------- */
#cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--petrol-deep); color: var(--beige-light);
    padding: calc(15 * var(--B60)) calc(20 * var(--B60)); z-index: 9999;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    font-size: 0.9rem;
}
#cookie-banner p { flex-grow: 1; margin: 0; }
#cookie-banner a { color: var(--beige-light); text-decoration: underline; }
#cookie-banner button { padding: 10px 20px; border: none; border-radius: 40px; cursor: pointer; font-weight: 500; }
#cookie-banner button:first-of-type { background: var(--teal); color: #fff; }
#cookie-banner button:last-of-type { background: transparent; color: var(--beige-light); border: 1px solid var(--beige-medium); }

/* ======================================================
   Mobile: 360-unit canvas + full-width stacking
   ====================================================== */
@media (max-width: 768px) {
    /* cards & partner cells become full-width and wrap one per row */
    .card-img {
        height: calc(210 * var(--B60)) !important;
    }
    .B60-centered-text-block-wide { padding: calc(30 * var(--B60)) calc(30 * var(--B60)) !important; }

    /* nav collapses to hamburger */
    .nav-links { display: none; }
    .mobile-menu { display: block; }
    .nav-links.mobile-open { display: flex; flex-direction: column; width: 100%; padding: 24px 0 12px; gap: 20px; }
    .B60-centered-text-block, .B60-left-aligned-text-block, .B60-right-aligned-text-block, .B60-image-block {
        padding-left: calc(30 * var(--B60)) !important;
        padding-right: calc(30 * var(--B60)) !important;
    }
    .padd-lr-container { padding-left: 0 !important; padding-right: 0 !important; }
    .card-cell {
        width: calc(360 * var(--B60)) !important;
        padding-left: calc(30 * var(--B60)) !important;
        padding-right: calc(30 * var(--B60)) !important;
    }
    .w-480, .w-540, .w-640, .w-720 { width: calc(360 * var(--B60)); }
    .review-carousel { padding: 0 calc(30 * var(--B60)); }
    .review-slide.card-cell {
        width: calc(300 * var(--B60)) !important;
        padding-left: calc(8 * var(--B60)) !important;
        padding-right: calc(8 * var(--B60)) !important;
    }
    .B60-slider-prev { left: calc(15 * var(--B60)) !important; }
    .B60-slider-next { right: calc(15 * var(--B60)) !important; }
    .logo { font-size: calc(15 * var(--B60)) !important; }
    .logo-img { width: calc(40 * var(--B60)); height: calc(40 * var(--B60)) !important; }
    nav { padding: calc(5 * var(--B60)) calc(15 * var(--B60)) !important; }
    :root { 
        --fsz-body-very-small: calc(10 * var(--B60)) !important;
        --fsz-body-small: calc(12 * var(--B60)) !important;
        --fsz-body-regular: calc(15 * var(--B60)) !important;
        --fsz-heading-standard: calc(23 * var(--B60)) !important;
        --fsz-heading-elegant: calc(25 * var(--B60)) !important;
        --fsz-hero: calc(35 * var(--B60)) !important; 
    }
    .B60-btn {
        padding: calc(15 * var(--B60)) calc(25 * var(--B60)) !important;
        border-radius: calc(25 * var(--B60)) !important;
    }
    .btn-row { margin-top: calc(15 * var(--B60)) !important; }
    #bucharest-in-depth .exp-order-image {
        order: 1 !important;
    }
    #bucharest-in-depth .exp-order-text {
        order: 0 !important;
    }
    #beyond-bucharest .exp-order-image {
        order: 1 !important;
    }
    #beyond-bucharest .exp-order-text {
        order: 0 !important;
    }
    .testimonial-card {
        max-width: calc(300 * var(--B60)) !important; 
    }
    #the-guide .B60-left-aligned-text-block { order: 1; }
    #the-guide .B60-image-block { order: 2; }
    .legal-text p { font-size: calc(10 * var(--B60)) !important; }
    .whatsapp-link {
        font-size: var(--fsz-body-small) !important;
    }
    .social-row a {        
        font-size: calc(20 * var(--B60)) !important;
        padding: calc(10 * var(--B60)) !important;
    }
    #contactForm input {
        border-radius: calc(25 * var(--B60)) !important;
        padding: calc(15 * var(--B60)) calc(20 * var(--B60)) !important;
    }
    .hero-badge {
        font-size: var(--fsz-body-very-small) !important;
        margin-bottom: calc(15 * var(--B60)) !important;
    }
}

/* ======================================================
   Contact form honeypot — hidden from people, visible to bots
   ====================================================== */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ======================================================
   Footer links + legal line
   ====================================================== */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(6 * var(--B60)) calc(16 * var(--B60));
    margin-bottom: calc(10 * var(--B60));
    /* Cancel the sticky top-bar <nav> styling that would otherwise apply here */
    background: transparent;
    padding: 0;
    position: static;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.footer-links a {
    font-size: var(--fsz-body-small);
    color: var(--beige-bg);
}
.footer-links a:hover { color: var(--lime-bright); }
.footer-legal {
    font-size: var(--fsz-body-very-small, var(--fsz-body-small));
    color: var(--neutral-gray);
    margin: 0 0 calc(6 * var(--B60));
}
.legal-text p { margin: calc(1 * var(--B60)); }
.legal-text {
    padding-left: calc(90 * var(--B60));
    padding-right: calc(90 * var(--B60));
    padding-top: 0;
}

/* ---------- Chips (replaces exp-details) ---------- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(5 * var(--B60));
    margin: calc(9 * var(--B60)) 0 calc(12 * var(--B60));
}
.chip {
    font-size: var(--fsz-body-small);
    color: var(--teal-text);
    background: var(--teal-tint);
    padding: calc(3 * var(--B60)) calc(8 * var(--B60));
    border-radius: calc(20 * var(--B60));
}
.chip i {
    color: var(--teal-text);
    margin-right: calc(3 * var(--B60));
}

/* ---------- Dark card (petrol) ---------- */
.card-dark {
    background: var(--petrol);
    border: none;
}
.card-dark .heading-standard {
    color: #fff;
}
.card-dark .body-standard {
    color: rgba(243, 239, 228, 0.80);
}
.card-dark .chip {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cream);
}
.card-dark .chip i {
    color: var(--lime-bright);
}
.card-dark .icon-box {
    background: linear-gradient(135deg, rgba(63, 176, 160, 0.22), rgba(143, 201, 74, 0.22));
    color: var(--lime-bright);
}

/* ---------- Icon box (for the custom card) ---------- */
.icon-box {
    width: calc(52 * var(--B60));
    height: calc(52 * var(--B60));
    border-radius: calc(14 * var(--B60));
    background: var(--teal-tint);
    color: var(--teal-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(20 * var(--B60));
    margin-bottom: calc(10 * var(--B60));
}

#bucharest-first-look .B60-image-block, #bucharest-in-depth .B60-image-block, #flavors-of-romania .B60-image-block, #beyond-bucharest .B60-image-block, #the-traveler .B60-image-block, #the-guide .B60-image-block {
    align-items: start;
}