/* =================================================================
   GLOBAL STYLES — shared across all pages
   ================================================================= */

/* ── CSS Custom Properties ── */
:root {
  --ink: #151a24;
  --ink2: #151a24;
  --parchment: #f7f2ea;
  --parchment2: #ede6d8;
  --gold: #1cb56d;
  --gold2: #4fd18f;
  --gold3: #9be7bf;
  --white: #ffffff;
  --ff-display: "Playfair Display", Georgia, serif;
  --ff-body: "Jost", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --color-primary: red;
  --color-accent: #1cb56d;
  --color-gold: #1cb56d;
  --color-gold-light: #4fd18f;
  --color-gold-bg: #9be7bf;
  --color-gold-border: #9be7bf;
  --color-red: #d14c2c;
  --color-star: #ffb400;
  --color-footer-bg: #151a24;
  --color-footer-link: rgba(247, 242, 234, 0.32);
  --color-footer-link-hover: var(--color-accent);
  --color-footer-desc: rgba(247, 242, 234, 0.3);
  --color-footer-bot: rgba(247, 242, 234, 0.18);
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
  font-size: 17px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  font-family: var(--ff-body);
  background: var(--ink);
  color: var(--parchment);
  line-height: 1.7;
  overflow-x: hidden;
  cursor: default;
  margin: 0;
  padding: 0;
}

/* ── Custom Cursor ── */
.cur {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold2);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cur-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gold2);
  pointer-events: none;
  z-index: 9998;
  transition:
    width 0.25s,
    height 0.25s;
  mix-blend-mode: difference;
  opacity: 0.6;
}

/* ── Navigation ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 4rem;
  transition: all 0.5s var(--ease);
}
nav.solid {
  background: #151a24;
  backdrop-filter: blur(18px);
  padding: 1.1rem 4rem;
  border-bottom: 1px solid rgba(28, 181, 109, 0.12);
}
.nav-logo {
  font-family: var(--ff-display);
  color: var(--parchment);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-logo-title {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--parchment2);
}
.nav-logo-accent {
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold2);
  margin-top: -1px;
}
.logo-gem {
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-gem span {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  transform: rotate(-45deg);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav-dropdown {
  position: relative;
}
.dropdown-menu,
.dropdown-menu li {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(10, 8, 6, 0.98);
  border: 1px solid rgba(28, 181, 109, 0.12);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(28, 181, 109, 0.12);
  z-index: 1000;
  padding: 0.7rem 0;
  border-radius: 0 0 8px 8px;
}
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu {
  display: block;
}
.dropdown-menu li {
  width: 100%;
}
.dropdown-menu a {
  display: block;
  padding: 0.6rem 1.5rem;
  color: rgba(247, 242, 234, 0.85);
  font-size: 0.85em;
  text-transform: none;
  letter-spacing: 0.04em;
  background: none;
  border: none;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.dropdown-menu a:hover {
  background: rgba(28, 181, 109, 0.12);
  color: var(--gold3);
}
.nav-links a {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(247, 242, 234, 0.55);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 100%;
  height: 1px;
  background: var(--gold2);
  transition: right 0.35s var(--ease);
}
.nav-links a:hover {
  color: var(--gold3);
}
.nav-links a:hover::after {
  right: 0;
}
.nav-links a.active { color: var(--gold3); }
.nav-links a.active::after { right: 0; }
.nav-cta {
  border: 1px solid rgb(28 181 109 / 50%);
  padding: 0.5rem 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold3);
  background: transparent;
  cursor: pointer;
  font-family: var(--ff-body);
  transition: all 0.3s;
  font-weight: 500;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: default;
  padding: 4px;
}
.burger span {
  width: 22px;
  height: 1px;
  background: var(--parchment);
  display: block;
  transition: all 0.35s;
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--color-accent);
  padding: 5rem 4rem 2.5rem;
  color: var(--color-primary);
  background: var(--color-footer-bg);
}
.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
}
.flogo {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--parchment);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.fdesc2 {
  font-size: 0.78rem;
  color: var(--color-footer-desc);
  line-height: 1.8;
  font-weight: 300;
  max-width: 240px;
}
.fcol h5 {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.2rem;
  font-weight: 500;
  text-align: left !important;
}
.fcol ul.flinks {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.fcol ul.flinks li {
  margin-left: 0 !important;
}
footer,
.foot-top,
.foot-bot,
.foot-top *,
.foot-bot * {
  text-align: left !important;
}
.foot-social,
.social-icon,
.social-icon span {
  text-align: center !important;
}
.flinks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.flinks a {
  font-size: 0.9rem;
  color: var(--color-footer-link);
  text-decoration: none;
  transition: color 0.3s;
  font-weight: 300;
}
.flinks a:hover {
  color: var(--color-footer-link-hover);
}
.foot-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  flex-wrap: wrap;
}
.social-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: rgba(247, 242, 234, 0.38);
  transition:
    filter 0.2s,
    transform 0.2s,
    opacity 0.2s;
}
.social-icon svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.social-icon span {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}
.social-icon:hover {
  filter: brightness(1.25);
  transform: translateY(-3px);
}
.social-icon[aria-label="Facebook"] {
  color: #1877f2;
}
.social-icon[aria-label="Instagram"] {
  color: #e1306c;
}
.social-icon[aria-label="TikTok"] {
  color: #ff0050;
}
.social-icon[aria-label="WhatsApp"] {
  color: #25d366;
}
.social-icon[aria-label="Google"] {
  color: #4285f4;
}
.social-icon[aria-label="Tripadvisor"] {
  color: #34e0a1;
}
.foot-bot {
  border-top: 1px solid rgb(155 231 191 / 24%);
  padding-top: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.foot-bot p {
  font-size: 0.825rem;
  color: var(--color-footer-bot);
  letter-spacing: 0.04em;
}

/* ================================================================
   PAGE: HOME — #page-home
   ================================================================ */
/* ── Keyframes (must be at top level, not nested) ── */
@keyframes sp {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fi {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gl {
  from {
    transform: scale(0.88);
  }
  to {
    transform: scale(1.1);
  }
}
/* Hero cards fade/slide up into place. Kept top-level (not nested
   inside #page-home below) because @keyframes cannot be nested inside
   a plain selector rule — it would silently be dropped by the browser. */
@keyframes heroCardEnter {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* Blinking caret shown on whichever hero title/subtitle span is
   currently being typed into (see main.js typeInto/typeHeroText). */
@keyframes heroCaret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
#page-home {
  /* ── Shared utility ── */
  .stag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold2);
    font-weight: 500;
    margin-bottom: 1.2rem;
  }
  .stag::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gold2);
  }
  .sh2 {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--parchment);
  }
  .sh2 em {
    font-style: italic;
    color: var(--gold3);
  }
  .sp {
    font-size: 0.93rem;
    color: rgba(247, 242, 234, 0.48);
    line-height: 1.9;
    font-weight: 300;
    max-width: 460px;
    margin-top: 0.9rem;
  }
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.8s var(--ease),
      transform 0.8s var(--ease);
  }
  .reveal.on {
    opacity: 1;
    transform: none;
  }
  .divbar {
    width: 44px;
    height: 1px;
    background: var(--gold);
    margin: 1.4rem 0;
  }
  .alist {
    list-style: none;
    margin-top: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .alist li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    font-size: 0.86rem;
    color: rgba(247, 242, 234, 0.5);
    line-height: 1.75;
    font-weight: 300;
  }
  .alist li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: 0.6rem;
    flex-shrink: 0;
  }

  /* ── Hero ── */
  .hero {
    height: 100vh;
    min-height: 700px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/top-attractions/1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.82) saturate(1.08);
    transition: opacity 1.4s var(--ease);
  }
  .hero-bg-b {
    background-image: none;
    opacity: 0;
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      rgb(29, 32, 48) 0%,
      rgba(10, 8, 6, 0.45) 40%,
      rgba(10, 8, 6, 0.15) 100%
    );
  }
  .hero-overlay2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgb(54 64 101/65%) 0%, #29355500 55%);
  }
  .hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    padding: 0 4rem 6.5rem;
    max-width: 860px;
  }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold2);
    font-weight: 500;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fu 0.9s 0.3s var(--ease) forwards;
  }
  .eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--gold2);
    flex-shrink: 0;
  }
  .hero-h1 {
    font-family: var(--ff-display);
    font-size: clamp(3.4rem, 7vw, 6.5rem);
    font-weight: 400;
    line-height: 0.95;
    color: var(--parchment);
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: fu 0.9s 0.5s var(--ease) forwards;
  }
  .hero-h1 em {
    font-style: italic;
    color: var(--gold3);
  }
  .hero-sub {
    font-size: 0.97rem;
    color: rgba(247, 242, 234, 0.58);
    max-width: 460px;
    line-height: 1.9;
    font-weight: 300;
    margin-bottom: 2.8rem;
    opacity: 0;
    animation: fu 0.9s 0.7s var(--ease) forwards;
  }
  .typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    background: currentColor;
    vertical-align: -0.15em;
    animation: heroCaret 0.85s steps(1) infinite;
  }
  .hero-btns {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fu 0.9s 0.9s var(--ease) forwards;
  }
  .btn-fill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--gold);
    color: var(--ink);
    padding: 0.82rem 2rem;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--ff-body);
    text-decoration: none;
    border: none;
    cursor: default;
    transition:
      background 0.3s,
      gap 0.3s;
  }
  .btn-fill:hover {
    background: var(--gold2);
    gap: 1.1rem;
  }
  .btn-fill svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
  .btn-line {
    border-bottom: 1px solid rgba(28, 181, 109, 0.12);
    padding: 0.2rem 0;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.6);
    text-decoration: none;
    transition:
      color 0.3s,
      border-color 0.3s;
    font-weight: 500;
  }
  .btn-line:hover {
    color: var(--gold3);
    border-color: var(--gold2);
  }
  .scroll-hint {
    position: absolute;
    right: 4rem;
    bottom: 3rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: fi 1s 1.2s forwards;
  }
  .scroll-hint span {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(28, 181, 109, 1);
    writing-mode: vertical-rl;
  }
  .scroll-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, var(--gold2), transparent);
    animation: sp 2s infinite;
  }

  /* ── Hero cards — horizontal row along the bottom ── */
  .hero-cards {
    position: absolute;
    right: 8rem;
    bottom: 6rem;
    z-index: 3;
    display: flex;
    gap: 1.1rem;
  }
  .hero-card {
    position: relative;
    width: 108px;
    height: 132px;
    padding: 0;
    border: 2px solid rgba(247, 242, 234, 0.14);
    border-radius: 10px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: 0;
    filter: blur(0.75px) grayscale(35%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    translate: 0 24px;
    animation: heroCardEnter 0.8s var(--ease) forwards;
    transition:
      filter 0.4s var(--ease),
      scale 0.4s var(--ease),
      border-color 0.4s var(--ease),
      box-shadow 0.4s var(--ease);
  }
  .hero-card:nth-child(1) {
    animation-delay: 0.1s;
  }
  .hero-card:nth-child(2) {
    animation-delay: 0.25s;
  }
  .hero-card:nth-child(3) {
    animation-delay: 0.4s;
  }
  .hero-card:nth-child(4) {
    animation-delay: 0.55s;
  }
  .hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-card-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.55rem 0.4rem;
    font-family: var(--ff-body);
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    color: var(--parchment);
    text-align: left;
    background: linear-gradient(to top, rgba(10, 8, 6, 0.85), transparent);
  }
  .hero-card:hover,
  .hero-card.active {
    filter: blur(0) grayscale(0%);
    border-color: var(--gold2);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.45),
      0 0 0 3px rgba(79, 209, 143, 0.25);
    z-index: 5;
  }
  .hero-card.active {
    scale: 1.08;
  }

  /* ── Stats ── */
  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(28, 181, 109, 0.12);
    border-bottom: 1px solid rgba(28, 181, 109, 0.12);
  }
  .stat {
    padding: 2.2rem 3rem;
    border-right: 1px solid rgba(28, 181, 109, 0.1);
    position: relative;
    overflow: hidden;
    transition: background 0.35s;
  }
  .stat:last-child {
    border-right: none;
  }
  .stat:hover {
    background: rgba(184, 144, 42, 0.04);
  }
  .stat-n {
    font-family: var(--ff-display);
    font-size: 2.7rem;
    font-weight: 500;
    color: var(--gold2);
    line-height: 1;
    display: block;
    margin-bottom: 0.3rem;
  }
  .stat-n sup {
    font-size: 1.3rem;
    color: var(--gold);
  }
  .stat-l {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    font-weight: 500;
  }

  /* ── About ── */
  .about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 82vh;
  }
  .about-vis {
    position: relative;
    overflow: hidden;
    background: var(--ink2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .about-aura {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(
        ellipse 80% 60% at 30% 60%,
        rgba(184, 144, 42, 0.18) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 60% 80% at 70% 30%,
        rgba(10, 8, 6, 0.55) 0%,
        transparent 80%
      );
  }
  .about-badge {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    border: 1px solid rgba(28, 181, 109, 0.12);
    padding: 1.4rem 1.8rem;
    text-align: center;
    background: #1cb56d !important;
    color: #151a24;
    backdrop-filter: blur(12px);
  }
  .about-badge .bn,
  .about-badge .bt {
    color: #151a24;
    font-weight: 900;
  }
  .bn {
    font-family: var(--ff-display);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--gold2);
    line-height: 1;
    display: block;
  }
  .bt {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.45);
    margin-top: 0.35rem;
    display: block;
  }
  .about-copy {
    padding: 6rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── Attractions ── */
  .sec-att {
    padding: 8rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  .att-hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(28, 181, 109, 0.12);
  }
  .tab {
    padding: 0.55rem 1.3rem;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    font-family: var(--ff-body);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    cursor: none;
    transition: all 0.3s;
    font-weight: 500;
  }
  .tab.on,
  .tab:hover {
    color: var(--gold2);
    border-bottom-color: var(--gold2);
  }
  .att-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    align-items: stretch;
  }
  .acard {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: unset;
  }
  .acard.big {
    grid-row: span 2;
    grid-column: span 2;
  }
  .att-grid .acard:not(.big) {
    grid-row: auto;
    grid-column: auto;
  }
  .acard:not(.big) {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
  }
  .acard:not(.big) .acard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 1 1 auto;
    display: block;
  }
  .acard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
  }
  .abg {
    position: absolute;
    inset: 0;
    transition: transform 0.8s var(--ease);
  }
  .acard:hover .abg {
    transform: scale(1.06);
  }
  .aink {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(10, 8, 6, 0.95) 0%,
      rgba(10, 8, 6, 0.08) 55%
    );
    transition: opacity 0.4s;
  }
  .acard:hover .aink {
    opacity: 0.82;
  }
  .ainfo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    transform: translateY(6px);
    transition: transform 0.4s var(--ease);
  }
  .acard:hover .ainfo {
    transform: none;
  }
  .acat {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold2);
    font-weight: 500;
    margin-bottom: 0.45rem;
    display: block;
  }
  .aname {
    font-family: var(--ff-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--parchment);
    line-height: 1.2;
  }
  .acard.big .aname {
    font-size: 2.1rem;
  }
  .adesc {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.58);
    margin-top: 0.35rem;
    line-height: 1.7;
    font-weight: 300;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease);
  }
  .acard:hover .adesc {
    max-height: 80px;
  }
  .alink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-top: 0.75rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(4px);
    transition:
      opacity 0.4s 0.1s,
      transform 0.4s 0.1s var(--ease);
  }
  .acard:hover .alink {
    opacity: 1;
    transform: none;
  }
  .alink svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
  .aicon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    opacity: 0.1;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .acard.big .aicon {
    font-size: 9rem;
  }
  .acard:hover .aicon {
    opacity: 0.04;
  }
  .c-angkor {
    background: linear-gradient(160deg, #0f1e16, #1b3425 40%, #0a0e0b);
  }
  .c-bayon {
    background: linear-gradient(160deg, #1a1208, #2e2010 50%, #0a0806);
  }
  .c-taprohm {
    background: linear-gradient(160deg, #0c1a10, #1a2e18 50%, #060d07);
  }
  .c-tonle {
    background: linear-gradient(160deg, #080e18, #101828 50%, #040810);
  }
  .c-apsara {
    background: linear-gradient(160deg, #180c18, #2a1228 50%, #0a060a);
  }

  /* ── Food / Activity ── */
  .sec-activity {
    background: var(--parchment);
    color: var(--ink);
    padding: 8rem 4rem;
  }
  .activity-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .activity-stag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 1.2rem;
  }
  .activity-stag::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gold);
  }
  .activity-h2 {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
  }
  .activity-h2 em {
    font-style: italic;
    color: var(--gold);
  }
  .activity-sub {
    font-size: 0.93rem;
    color: rgba(10, 8, 6, 0.48);
    line-height: 1.9;
    font-weight: 300;
    max-width: 460px;
    margin-top: 0.9rem;
  }
  .activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 4rem;
    border: 1px solid rgba(10, 8, 6, 0.07);
  }
  .activity-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin-bottom: 0;
  }
  .acard2 {
    padding: 0;
    border-right: 1px solid rgba(10, 8, 6, 0.07);
    border-bottom: 1px solid rgba(10, 8, 6, 0.07);
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
    display: flex;
    flex-direction: column;
  }
  .acard2:nth-child(2n) {
    border-right: none;
  }
  .acard2:nth-child(3),
  .acard2:nth-child(4) {
    border-bottom: none;
  }
  .acard2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.55s var(--ease);
  }
  .acard2:hover {
    background: rgba(184, 144, 42, 0.04);
  }
  .acard2:hover::after {
    width: 100%;
  }
  .acard2-body {
    padding: 16px 20px 20px;
  }
  .anum {
    font-family: var(--ff-display);
    font-size: 3.2rem;
    font-weight: 400;
    color: rgba(155, 231, 191, 1);
    line-height: 1;
    margin-bottom: 0.6rem;
  }
  .aname2 {
    font-family: var(--ff-display);
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.55rem;
  }
  .adesc2 {
    font-size: 0.83rem;
    color: rgba(10, 8, 6, 0.54);
    line-height: 1.8;
    font-weight: 300;
  }
  .aprice {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    border-bottom: 1px solid rgba(79, 209, 143, 1);
    padding-bottom: 1px;
  }

  /* ── Tips ── */
  .sec-tips {
    padding: 8rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
  }
  .tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 4rem;
    border: 1px solid rgb(155 231 191/24%);
  }
  .tcard {
    padding: 2.2rem 2rem;
    border-right: 1px solid rgb(155 231 191/24%);
    border-bottom: 1px solid rgb(155 231 191/24%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .tcard:nth-child(3n) {
    border-right: none;
  }
  .tcard:nth-child(4),
  .tcard:nth-child(5),
  .tcard:nth-child(6) {
    border-bottom: none;
  }
  .tcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
  }
  .tcard:hover::before {
    transform: scaleX(1);
  }
  .ticon {
    width: 60px;
    height: 60px;
    border: 1px solid rgb(155 231 191/24%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    font-size: 2.4rem !important;
    line-height: 1.1;
    margin-left: auto;
    margin-right: auto;
  }
  .th {
    font-family: var(--ff-display);
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--parchment);
    margin-bottom: 0.6rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .tp {
    font-size: 0.8rem;
    color: rgba(247, 242, 234, 0.48);
    line-height: 1.8;
    font-weight: 300;
  }
  .thl {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgb(155 231 191/24%);
    border-left: 2px solid var(--gold);
    font-size: 0.73rem;
    color: rgba(247, 242, 234, 0.55);
    line-height: 1.6;
    text-align: left;
  }

  /* ── Weather ── */
  .weather-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 4rem;
  }
  .wm {
    padding: 1.4rem 1rem;
    text-align: center;
    border: 1px solid rgb(155 231 191/24%);
    cursor: default;
    transition:
      background 0.3s,
      border-color 0.3s;
  }
  .wm:hover,
  .wm.on {
    background: rgb(155 231 191/24%);
    border-color: rgb(155 231 191/24%);
  }
  .wmn {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
  }
  .wic {
    font-size: 1.5rem;
    margin: 0.55rem 0;
  }
  .wt {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--parchment);
  }
  .wr {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.32);
  }
  .wb {
    font-size: 0.52rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-top: 0.4rem;
  }

  /* ── Map ── */
  .map-wrap {
    display: grid;
    grid-template-columns: 1fr 370px;
    height: auto;
    position: relative;
    isolation: isolate;
  }
  .map-vis {
    background: var(--ink2);
    position: relative;
    height: 100%;
  }
  .map-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.055;
  }
  .angkor-map-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .map-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(184, 144, 42, 0.13) 0%,
      transparent 70%
    );
    animation: gl 4s ease-in-out infinite alternate;
  }
  .map-lbl {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .map-lbl p {
    font-family: var(--ff-display);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--gold2);
  }
  .map-lbl small {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: rgba(247, 242, 234, 0.28);
  }
  .map-side {
    padding: 3.5rem 2.8rem;
    border-left: 1px solid rgb(155 231 191/24%);
  }
  .poi-h {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: 2rem;
    font-weight: 500;
  }
  .poi-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .poi-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.4rem;
    border-bottom: 1px solid rgb(155 231 191/18%);
    cursor: pointer;
    transition: background 0.25s;
  }
  .poi-item:hover {
    background: rgba(184, 144, 42, 0.06);
  }
  .poi-top {
    background: rgba(228, 169, 60, 0.04);
  }
  .poi-top:hover {
    background: rgba(228, 169, 60, 0.09) !important;
  }
  .poi-top .poi-n {
    color: var(--gold2);
  }
  .poi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .poi-top .poi-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 3px rgba(228, 169, 60, 0.22);
  }
  .dt {
    background: #e4a93c;
  }
  .dn {
    background: #2aab6d;
  }
  .dm {
    background: #e0623a;
  }
  .du {
    background: #5a8adf;
  }
  .poi-n {
    font-size: 0.83rem;
    color: rgba(247, 242, 234, 0.65);
  }
  .poi-badge {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold2);
    background: rgba(228, 169, 60, 0.12);
    border: 1px solid rgba(228, 169, 60, 0.28);
    border-radius: 3px;
    padding: 2px 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .poi-d {
    margin-left: auto;
    font-size: 0.68rem;
    color: rgba(247, 242, 234, 0.28);
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .leg {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(155 231 191/24%);
  }
  .li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.32);
  }

  /* ── Gallery ── */
  .sec-gal {
    padding: 8rem 4rem;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    isolation: isolate;
  }
  .gtrack {
    display: flex;
    gap: 2px;
    margin-top: 4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
  }
  .gtrack:active {
    cursor: grabbing;
  }
  .gtrack::-webkit-scrollbar {
    display: none;
  }
  .gi {
    flex-shrink: 0;
    width: 270px;
    height: 390px;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
  }
  .gibg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    image-rendering: auto;
    transition: transform 0.7s var(--ease);
  }
  .gi:hover .gibg {
    transform: scale(1.08);
  }
  .gcap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(10, 8, 6, 0.88), transparent);
    padding: 1.8rem 1.1rem 0.85rem;
    font-size: 0.73rem;
    color: rgba(247, 242, 234, 0.55);
    font-weight: 300;
    letter-spacing: 0.04em;
    transform: translateY(4px);
    transition: transform 0.4s;
  }
  .gi:hover .gcap {
    transform: none;
  }
  .gi.dragging {
    opacity: 0.7;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    transform: scale(1.04) rotate(-2deg);
  }
  .gi.drag-over {
    outline: 2px dashed var(--gold2);
    outline-offset: -4px;
    transform: scale(1.03) rotate(2deg);
  }

  /* ── Newsletter ── */
  .sec-nl {
    padding: 8rem 4rem;
    text-align: center;
    background: rgb(4 32 19/47%);
    position: relative;
    overflow: hidden;
  }
  .nl-orb {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(184, 144, 42, 0.07) 0%,
      transparent 70%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .nl-inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
  }
  .nl-h {
    font-family: var(--ff-display);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 400;
    color: var(--parchment);
    margin: 1.2rem 0 0.8rem;
  }
  .nl-h em {
    font-style: italic;
    color: var(--gold3);
  }
  .nl-p {
    font-size: 0.85rem;
    color: rgba(247, 242, 234, 0.42);
    line-height: 1.85;
    font-weight: 300;
  }
  .nl-form {
    display: flex;
    margin-top: 2.5rem;
    border: 1px solid rgb(155 231 191/24%);
  }
  .nl-inp {
    flex: 1;
    padding: 0.88rem 1.2rem;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--ff-body);
    font-size: 0.83rem;
    color: var(--parchment);
  }
  .nl-inp::placeholder {
    color: rgba(247, 242, 234, 0.28);
  }
  .nl-btn {
    padding: 0.88rem 1.7rem;
    background: var(--gold);
    border: none;
    font-family: var(--ff-body);
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: none;
    font-weight: 500;
    transition: background 0.3s;
  }
  .nl-btn:hover {
    background: var(--gold2);
  }
  .nl-ok {
    display: none;
    margin-top: 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold2);
  }

  /* ── Instagram ── */
  .sec-insta {
    background-color: var(--ink2);
    padding: 5.5rem 0 4.5rem;
  }
  .insta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .insta-hd {
    text-align: center;
    margin-bottom: 2.8rem;
  }
  .insta-hd .stag {
    display: flex;
    justify-content: center;
  }
  .insta-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(247, 242, 234, 0.1);
    border-radius: 50px;
    padding: 0.55rem 1.3rem 0.55rem 0.65rem;
    margin-bottom: 1.6rem;
    text-decoration: none;
    transition:
      background 0.2s,
      border-color 0.2s;
  }
  .insta-brand:hover {
    background: rgba(247, 242, 234, 0.09);
    border-color: rgba(247, 242, 234, 0.22);
  }
  .insta-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .insta-brand-text {
    text-align: left;
  }
  .insta-handle {
    display: block;
    font-weight: 700;
    color: #f7f2ea;
    font-size: 0.92rem;
    font-family: "Jost", sans-serif;
    letter-spacing: 0.02em;
  }
  .insta-followers {
    display: block;
    font-size: 0.73rem;
    color: rgba(247, 242, 234, 0.42);
    font-family: "Jost", sans-serif;
    margin-top: 0.1rem;
  }
  .insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 2.4rem;
  }
  .insta-post {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    background: #111;
  }
  .insta-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
  }
  .insta-post:hover .insta-img {
    transform: scale(1.07);
  }
  .insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0.58);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
    padding: 1rem;
  }
  .insta-post:hover .insta-overlay {
    opacity: 1;
  }
  .insta-stats {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }
  .insta-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #f7f2ea;
    font-size: 1rem;
    font-weight: 700;
    font-family: "Jost", sans-serif;
  }
  .insta-stat svg {
    flex-shrink: 0;
  }
  .insta-cap {
    color: rgba(247, 242, 234, 0.78);
    font-size: 0.8rem;
    text-align: center;
    font-family: "Jost", sans-serif;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .insta-cta {
    text-align: center;
  }
  .insta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: #fff;
    border-radius: 10px;
    padding: 0.9rem 2.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    font-family: "Jost", sans-serif;
    transition:
      opacity 0.2s,
      transform 0.2s;
  }
  .insta-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
  }

  /* ── Reviews ── */
  .sec-reviews {
    padding: 5.5rem 0 4.5rem;
    background-color: var(--ink2);
  }
  .rv-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .rv-hd {
    text-align: center;
    margin-bottom: 2.8rem;
  }
  .rv-hd .stag {
    display: flex;
    justify-content: center;
  }
  .ta-badge {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    background: rgba(28, 181, 109, 0.07);
    border: 1px solid rgba(28, 181, 109, 0.22);
    border-radius: 16px;
    padding: 1.1rem 2.4rem;
    margin: 1.8rem auto 0;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ta-logo-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .ta-owl {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .ta-brand {
    font-size: 1.15rem;
    font-weight: 800;
    color: #34e0a1;
    letter-spacing: 0.04em;
    font-family: "Jost", sans-serif;
  }
  .ta-divider {
    width: 1px;
    height: 40px;
    background: rgba(28, 181, 109, 0.2);
  }
  .ta-score-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }
  .ta-score {
    font-size: 2.6rem;
    font-weight: 800;
    color: #f7f2ea;
    line-height: 1;
    font-family: "Playfair Display", serif;
  }
  .ta-bubs {
    display: flex;
    gap: 0.28rem;
  }
  .ta-bub {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #34e0a1;
    display: inline-block;
  }
  .ta-count {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.42);
    letter-spacing: 0.03em;
    font-family: "Jost", sans-serif;
  }
  .rv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-bottom: 2.6rem;
  }
  .rv-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    padding: 1.7rem 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition:
      border-color 0.2s,
      background 0.2s,
      transform 0.2s;
  }
  .rv-card:hover {
    border-color: rgba(28, 181, 109, 0.32);
    background: rgba(247, 242, 234, 0.07);
    transform: translateY(-4px);
  }
  .rv-card-bubs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.9rem;
  }
  .rv-bub {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #34e0a1;
    display: inline-block;
  }
  .rv-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f7f2ea;
    margin-bottom: 0.6rem;
    font-family: "Playfair Display", serif;
  }
  .rv-card-text {
    font-size: 0.92rem;
    color: rgba(247, 242, 234, 0.68);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1.3rem;
    font-style: italic;
  }
  .rv-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(28, 181, 109, 0.1);
    padding-top: 1rem;
  }
  .rv-user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f7f2ea;
    font-family: "Jost", sans-serif;
  }
  .rv-user-meta {
    font-size: 0.77rem;
    color: rgba(247, 242, 234, 0.38);
    margin-top: 0.15rem;
    font-family: "Jost", sans-serif;
  }
  .rv-ta-pill {
    font-size: 0.7rem;
    font-weight: 700;
    color: #34e0a1;
    background: rgba(52, 224, 161, 0.1);
    border: 1px solid rgba(52, 224, 161, 0.2);
    border-radius: 20px;
    padding: 0.22rem 0.65rem;
    letter-spacing: 0.04em;
    font-family: "Jost", sans-serif;
    white-space: nowrap;
  }
  .rv-cta {
    text-align: center;
    margin-top: 0.4rem;
  }
  .rv-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #34e0a1;
    border: 1.5px solid rgba(52, 224, 161, 0.4);
    border-radius: 10px;
    padding: 0.85rem 2.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition:
      background 0.18s,
      border-color 0.18s,
      color 0.18s;
    font-family: "Jost", sans-serif;
  }
  .rv-btn:hover {
    background: rgba(52, 224, 161, 0.1);
    border-color: #34e0a1;
    color: #f7f2ea;
  }

  /* ── Premium Tours ── */
  .sec-premium-tours {
    background: linear-gradient(120deg, #fffbe6 0%, #f7f3e8 100%);
    padding: 3.5rem 0 2.5rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 32px rgba(184, 144, 42, 0.07);
    position: relative;
    z-index: 1;
  }
  .sec-premium-tours h2,
  .sec-premium-tours .sh2 {
    color: #151a24 !important;
  }
  .premium-hd .stag {
    display: flex;
    justify-content: center;
    color: var(--gold2, #b8902a);
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
  }
  .premium-tour-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  .premium-tour-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-top: 1.5rem;
  }
  .premium-tour-viewall {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
  .premium-tour-viewall-btn {
    background: #151a24;
    color: #e2c16b;
    border: 1.5px solid rgba(226, 193, 107, 0.3);
    border-radius: 10px;
    padding: 0.7em 2.2em;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
      background 0.18s,
      color 0.18s,
      box-shadow 0.18s,
      border-color 0.18s;
    box-shadow: 0 2px 10px rgba(226, 193, 107, 0.1);
    text-decoration: none;
    display: inline-block;
    margin: 0.5em auto 0;
  }
  .premium-tour-viewall-btn:hover {
    background: #1e2739;
    border-color: rgba(226, 193, 107, 0.65);
    color: #f7f2ea;
    box-shadow: 0 4px 20px rgba(226, 193, 107, 0.22);
  }

  /* ptcard (final version) */
  .ptcard {
    background: linear-gradient(120deg, #fffbe6 60%, #f7f3e8 100%);
    border-radius: 20px;
    box-shadow:
      0 4px 32px rgba(184, 144, 42, 0.13),
      0 1.5px 0.5px rgba(0, 0, 0, 0.01);
    overflow: visible;
    width: 340px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s;
  }
  .ptcard:hover {
    transform: translateY(-12px) scale(1.045) rotate(-1deg);
    box-shadow: 0 12px 48px rgba(184, 144, 42, 0.18);
    z-index: 3;
  }
  .ptcard-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #b8902a 60%, #e2c16b 100%);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0.45em 1.2em 0.45em 1.1em;
    border-radius: 0 0 16px 0;
    letter-spacing: 0.08em;
    box-shadow: 0 2px 8px rgba(184, 144, 42, 0.13);
    z-index: 2;
    text-shadow: 0 1px 2px #b8902a44;
  }
  .ptcard.silver .ptcard-badge {
    background: linear-gradient(90deg, #b8b8b8 60%, #e2e2e2 100%);
    color: #444;
  }
  .ptcard.bronze .ptcard-badge {
    background: linear-gradient(90deg, #c9a16b 60%, #e2c16b 100%);
    color: #fff;
  }
  .ptcard-img {
    width: 100%;
    height: 180px;
    background: linear-gradient(120deg, #f7e7b8 0%, #fffbe6 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 20px 20px 0 0;
  }
  .ptcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    filter: brightness(0.97) contrast(1.08) saturate(1.08);
    transition: filter 0.18s;
  }
  .ptcard:hover .ptcard-img img {
    filter: brightness(1.04) contrast(1.13) saturate(1.18);
  }
  .ptcard-icon {
    position: absolute;
    bottom: 1.1em;
    right: 1.1em;
    font-size: 2.2em;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    box-shadow: 0 2px 8px #b8902a22;
    padding: 0.18em 0.28em;
    color: #b8902a;
    z-index: 2;
    pointer-events: none;
  }
  .ptcard-body {
    padding: 1.5rem 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
  }
  .ptcard-title {
    font-family: "Playfair Display", serif;
    font-size: 1.32rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: #b8902a;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 #fffbe6;
  }
  .ptcard-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    color: #6d5c2c;
    font-size: 1.04rem;
    line-height: 1.7;
  }
  .ptcard-list li {
    margin-bottom: 0.2rem;
    position: relative;
    padding-left: 1.3em;
    font-weight: 500;
  }
  .ptcard-list li::before {
    content: "⟡";
    color: #e2c16b;
    position: absolute;
    left: 0;
    font-size: 1.1em;
    top: 0.1em;
  }
  .ptcard-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin-bottom: 1.1rem;
  }
  .ptcard-price {
    font-size: 1.45rem;
    font-weight: 700;
    color: #b8902a;
    letter-spacing: 0.01em;
  }
  .ptcard-label {
    font-size: 1.01rem;
    color: #a89a6a;
  }
  .ptcard-btn {
    margin-top: auto;
    width: 100%;
    text-align: center;
    font-size: 1.09rem;
    padding: 0.8rem 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #b8902a 0%, #e2c16b 100%);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(184, 144, 42, 0.1);
    transition:
      background 0.18s,
      color 0.18s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }
  .ptcard-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    background: rgb(155 231 191/24%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
      width 0.3s,
      height 0.3s;
    z-index: 0;
  }
  .ptcard-btn:hover::after {
    width: 220%;
    height: 220%;
  }
  .ptcard-btn:hover {
    background: linear-gradient(90deg, #e2c16b 0%, #b8902a 100%);
    color: #fffbe6;
  }
  .ptcard.gold {
    border: 2.5px solid #e2c16b;
  }
  .ptcard.silver {
    border: 2.5px solid #b8b8b8;
  }
  .ptcard.bronze {
    border: 2.5px solid #c9a16b;
  }

  /* tourcard */
  .tourcard {
    background: transparent;
    box-shadow:
      0 2px 16px rgba(0, 0, 0, 0.28),
      0 1.5px 0.5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    border: 1.5px solid rgba(184, 144, 42, 0.22);
    transition:
      box-shadow 0.18s,
      transform 0.18s;
    position: relative;
  }
  .tourcard:hover {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.38),
      0 0 0 1.5px rgba(184, 144, 42, 0.38);
    transform: translateY(-6px) scale(1.025);
  }
  .tourcard-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    max-height: 210px;
  }
  .tourcard-content {
    padding: 0.7rem 1rem 0.8rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: #151a24;
  }
  .tourcard-title {
    color: #f7f2ea;
    font-size: 1.22rem;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    margin-bottom: 0.18em;
  }
  .tourcard-location {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.01rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.12em;
    display: flex;
    align-items: center;
    gap: 0.3em;
  }
  .tourcard-price-row {
    color: rgba(247, 242, 234, 0.72);
    font-size: 1.04rem;
    margin-bottom: 0.18em;
  }
  .tourcard-price-row .price {
    color: #e2c16b;
    font-size: 1.13em;
    margin-left: 0.2em;
  }
  .tourcard-meta-row {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.12em;
  }
  .tourcard-meta-row .meta {
    display: flex;
    align-items: center;
    gap: 0.3em;
  }
  .tourcard-rating-row {
    color: rgba(247, 242, 234, 0.82);
    font-size: 1.01rem;
    margin-bottom: 0.12em;
    display: flex;
    align-items: center;
    gap: 0.18em;
  }
  .tourcard-rating-row .star {
    color: #e2c16b;
    font-size: 1.1em;
    margin-right: 0.08em;
  }
  .tourcard-explore-btn {
    margin-top: 0.7em;
    background: transparent;
    color: #f7f2ea;
    border: 1.5px solid rgba(247, 242, 234, 0.2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
      background 0.16s,
      color 0.16s,
      box-shadow 0.16s,
      border-color 0.16s;
    box-shadow: none;
    text-decoration: none;
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .tourcard-explore-btn:hover {
    background: rgba(28, 181, 109, 0.12);
    color: #9be7bf;
    box-shadow: 0 2px 8px rgba(28, 181, 109, 0.12);
    border: 1.5px solid rgba(28, 181, 109, 0.45);
  }
}

/* ================================================================
   PAGE: ABOUT — #page-about
   ================================================================ */
#page-about {
  /* ── Custom Properties ── */
  --tp-bg: #f7faf8;
  --tp-ink: #151a24;
  --tp-accent: #1cb56d;
  --tp-accent-soft: #9be7bf;
  --tp-gold: #b8902a;
  --tp-line: rgba(21, 26, 36, 0.1);

  /* ── Hero Mini ── */
  .hero-mini {
    width: 100%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 3rem;
    background:
      linear-gradient(
        to top,
        rgba(10, 8, 6, 0.92) 0%,
        rgba(10, 8, 6, 0.45) 45%,
        rgba(10, 8, 6, 0.18) 100%
      ),
      linear-gradient(to right, rgba(29, 32, 48, 0.7) 0%, transparent 55%),
      url("../img/banner/banner1.png") center/cover no-repeat;
    color: #fff;
    position: relative;

    .eyebrow-tp {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.6rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: #4fd18f;
      font-weight: 500;
      margin-bottom: 0.7rem;

      &::before {
        content: "";
        width: 32px;
        height: 1px;
        background: #4fd18f;
        flex-shrink: 0;
      }
    }

    h1 {
      margin: 0 0 0.55rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 400;
      line-height: 1.05;
      color: #f7f2ea;
      letter-spacing: -0.01em;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }

    .hero-sub-tp {
      margin: 0;
      font-size: 0.82rem;
      color: rgba(247, 242, 234, 0.52);
      max-width: 480px;
      line-height: 1.75;
      font-weight: 300;
      letter-spacing: 0.01em;
    }
  }

  /* ── Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }
  .sec-about {
    padding: 6rem 0;
  }
  .sec-values {
    padding: 0 0 6rem;
  }
  .sec-team {
    padding: 0 0 6rem;
  }
  .sec-cta-band {
    padding: 0 0 6rem;
  }

  /* ── Section Label ── */
  .stag-ab {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 1rem;

    &::before {
      content: "";
      width: 24px;
      height: 1px;
      background: #4fd18f;
    }
  }

  .sh2-ab {
    margin: 0 0 1.4rem;
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    color: #f7f2ea;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  /* ── Story Grid ── */
  .story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .story-img-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;

    img {
      width: 100%;
      height: 440px;
      object-fit: cover;
      display: block;
      border-radius: 18px;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 18px;
      border: 1px solid rgba(28, 181, 109, 0.18);
      pointer-events: none;
    }
  }

  .story-badge {
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    background: #1cb56d;
    color: #151a24;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .story-copy p {
    color: rgba(247, 242, 234, 0.55);
    font-size: 0.92rem;
    line-height: 1.85;
    margin: 0 0 1.2rem;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .divbar-ab {
    width: 40px;
    height: 2px;
    background: #1cb56d;
    margin-bottom: 1.8rem;
  }

  /* ── Values Grid ── */
  .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }

  .vcard {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    padding: 2rem 1.8rem;
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.22s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(28, 181, 109, 0.1);
    }

    h3 {
      margin: 0 0 0.65rem;
      font-family: "Playfair Display", serif;
      font-size: 1.15rem;
      font-weight: 500;
      color: #f7f2ea;
    }

    p {
      margin: 0;
      font-size: 0.88rem;
      color: rgba(247, 242, 234, 0.48);
      line-height: 1.75;
    }
  }

  .vicon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    display: block;
  }

  /* ── Team Grid ── */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }

  .tcard-ab {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);

    &:hover {
      transform: translateY(-5px);
    }
  }

  .tcard-ab-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  }

  .tcard-ab-body {
    padding: 1.3rem 1.4rem;

    h4 {
      margin: 0 0 0.2rem;
      font-family: "Playfair Display", serif;
      font-size: 1.1rem;
      font-weight: 500;
      color: #f7f2ea;
    }

    p {
      margin: 0;
      font-size: 0.86rem;
      color: rgba(247, 242, 234, 0.45);
      line-height: 1.75;
    }
  }

  .tcard-ab-role {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4fd18f;
    margin-bottom: 0.65rem;
    display: block;
  }

  /* ── Stats Bar ── */
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(28, 181, 109, 0.06);
    border: 1px solid rgba(28, 181, 109, 0.14);
    border-radius: 16px;
    margin-bottom: 5rem;
    overflow: hidden;
  }

  .stat-ab {
    padding: 2rem 1.6rem;
    text-align: center;
    border-right: 1px solid rgba(28, 181, 109, 0.1);

    &:last-child {
      border-right: none;
    }
  }

  .stat-ab-n {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #9be7bf;
    line-height: 1;
    margin-bottom: 0.35rem;
  }

  .stat-ab-l {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.42);
  }

  /* ── CTA Band ── */
  .cta-band {
    background: rgba(28, 181, 109, 0.08);
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 20px;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    h3 {
      margin: 0 0 0.5rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 400;
      color: #f7f2ea;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }

    p {
      margin: 0;
      font-size: 0.9rem;
      color: rgba(247, 242, 234, 0.48);
      max-width: 400px;
      line-height: 1.75;
    }
  }

  .cta-band-btns {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
  }

  .btn-fill-ab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #1cb56d;
    color: #151a24;
    border: none;
    border-radius: 6px;
    padding: 0.8rem 1.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: "Jost", sans-serif;

    &:hover {
      background: #4fd18f;
    }
  }

  .btn-line-ab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #9be7bf;
    border: 1px solid rgba(28, 181, 109, 0.4);
    border-radius: 6px;
    padding: 0.8rem 1.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
      border-color 0.2s,
      background 0.2s;
    font-family: "Jost", sans-serif;

    &:hover {
      background: rgba(28, 181, 109, 0.08);
      border-color: #9be7bf;
    }
  }
}

/* ================================================================
   PAGE: CONTACT — #page-contact
   ================================================================ */
#page-contact {
  /* ── Custom Properties ── */
  --tp-ink: #151a24;
  --tp-accent: #1cb56d;
  --tp-accent-soft: #9be7bf;
  --tp-gold: #b8902a;

  /* ── Hero Mini ── */
  .hero-mini {
    width: 100%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 3rem;
    background:
      linear-gradient(
        to top,
        rgba(10, 8, 6, 0.92) 0%,
        rgba(10, 8, 6, 0.45) 45%,
        rgba(10, 8, 6, 0.18) 100%
      ),
      linear-gradient(to right, rgba(29, 32, 48, 0.7) 0%, transparent 55%),
      url("../img/banner/banner1.png") center/cover no-repeat;
    color: #fff;
    position: relative;

    .eyebrow-tp {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.6rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: #4fd18f;
      font-weight: 500;
      margin-bottom: 0.7rem;

      &::before {
        content: "";
        width: 32px;
        height: 1px;
        background: #4fd18f;
        flex-shrink: 0;
      }
    }

    h1 {
      margin: 0 0 0.55rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(1.8rem, 4vw, 3rem);
      font-weight: 400;
      line-height: 1.05;
      color: #f7f2ea;
      letter-spacing: -0.01em;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }

    .hero-sub-tp {
      margin: 0;
      font-size: 0.82rem;
      color: rgba(247, 242, 234, 0.52);
      max-width: 480px;
      line-height: 1.75;
      font-weight: 300;
      letter-spacing: 0.01em;
    }
  }

  /* ── Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }
  .sec-contact {
    padding: 6rem 0;
  }
  .sec-faq {
    padding: 0 0 6rem;
  }

  /* ── Section Label ── */
  .stag-ct {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 1rem;

    &::before {
      content: "";
      width: 24px;
      height: 1px;
      background: #4fd18f;
    }
  }

  .sh2-ct {
    margin: 0 0 1.4rem;
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    color: #f7f2ea;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  /* ── Contact Layout ── */
  .contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
  }

  /* ── Info Cards ── */
  .info-cards {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .info-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: border-color 0.2s;

    &:hover {
      border-color: rgba(28, 181, 109, 0.35);
    }
  }

  .info-card-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1rem;
  }

  .info-card-body {
    h4 {
      margin: 0 0 0.3rem;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #4fd18f;
      font-weight: 500;
    }

    p {
      margin: 0;
      font-size: 0.9rem;
      color: rgba(247, 242, 234, 0.65);
      line-height: 1.6;
    }

    a {
      color: #9be7bf;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* ── Response Note ── */
  .resp-note {
    margin-top: 1.8rem;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    background: rgba(28, 181, 109, 0.06);
    border-left: 3px solid #1cb56d;
    font-size: 0.84rem;
    color: rgba(247, 242, 234, 0.5);
    line-height: 1.7;

    strong {
      color: #9be7bf;
      font-weight: 600;
    }
  }

  /* ── Contact Form ── */
  .form-panel {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.14);
    border-radius: 20px;
    padding: 2.5rem;

    h3 {
      margin: 0 0 0.4rem;
      font-family: "Playfair Display", serif;
      font-size: 1.5rem;
      font-weight: 400;
      color: #f7f2ea;
    }

    .form-sub {
      margin: 0 0 2rem;
      font-size: 0.88rem;
      color: rgba(247, 242, 234, 0.4);
      line-height: 1.6;
    }
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1rem;

    label {
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(247, 242, 234, 0.45);
      font-weight: 500;
    }

    input,
    select,
    textarea {
      background: rgba(247, 242, 234, 0.06);
      border: 1px solid rgba(28, 181, 109, 0.18);
      border-radius: 8px;
      padding: 0.85rem 1rem;
      font-size: 0.9rem;
      color: #f7f2ea;
      font-family: "Jost", sans-serif;
      outline: none;
      transition:
        border-color 0.2s,
        background 0.2s;
      width: 100%;
      box-sizing: border-box;

      &:focus {
        border-color: #1cb56d;
        background: rgba(28, 181, 109, 0.06);
      }
    }

    select option {
      background: #151a24;
      color: #f7f2ea;
    }
    textarea {
      resize: vertical;
      min-height: 130px;
    }
  }

  .form-submit {
    width: 100%;
    background: #1cb56d;
    color: #151a24;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;

    &:hover {
      background: #4fd18f;
    }
  }

  .form-ok {
    display: none;
    margin-top: 1rem;
    text-align: center;
    color: #9be7bf;
    font-size: 0.88rem;
  }

  /* ── FAQ ── */
  .faq-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .faq-item {
    border-bottom: 1px solid rgba(28, 181, 109, 0.12);
    padding: 1.4rem 0;
    cursor: pointer;
    transition: border-color 0.2s;
  }

  .faq-item:first-child {
    border-top: 1px solid rgba(28, 181, 109, 0.12);
  }

  .faq-item:hover .faq-q {
    color: #4fd18f;
  }

  .faq-item.open .faq-arrow {
    transform: rotate(180deg);
    border-color: #1cb56d;
  }

  .faq-item.open .faq-q {
    color: #4fd18f;
  }

  .faq-item.open .faq-a {
    display: block;
  }

  .faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    font-weight: 500;
    color: #f7f2ea;
    margin-bottom: 0;
    transition: color 0.2s;
  }

  .faq-arrow {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(28, 181, 109, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s, border-color 0.2s;
  }

  .faq-a {
    display: none;
    margin-top: 0.9rem;
    font-size: 0.95rem;
    color: rgba(247, 242, 234, 0.6);
    line-height: 1.8;
  }
}

/* ================================================================
   PAGE: INFORMATION — #page-information
   ================================================================ */
#page-information {
  /* ── Hero Mini ── */
  .hero-mini {
    width: 100%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 3.5rem;
    background:
      linear-gradient(
        to top,
        rgba(10, 8, 6, 0.96) 0%,
        rgba(10, 8, 6, 0.55) 45%,
        rgba(10, 8, 6, 0.2) 100%
      ),
      linear-gradient(to right, rgba(29, 32, 48, 0.72) 0%, transparent 60%),
      url("../img/information/Bon%20Om%20Touk.jpg") center 40% / cover no-repeat;
    color: #fff;
    position: relative;

    h1 {
      margin: 0 0 0.6rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(2.2rem, 5.5vw, 3.8rem);
      font-weight: 400;
      line-height: 1.05;
      color: #f7f2ea;
      letter-spacing: -0.01em;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }
  }

  .eyebrow-tp {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 0.7rem;

    &::before {
      content: "";
      width: 32px;
      height: 1px;
      background: #4fd18f;
      flex-shrink: 0;
    }
  }

  .hero-sub-tp {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(247, 242, 234, 0.52);
    max-width: 560px;
    line-height: 1.8;
    font-weight: 300;
  }

  /* ── Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }
  .sec-blog {
    padding: 6rem 0 8rem;
  }

  /* ── Section Label ── */
  .blog-stag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 1rem;

    &::before {
      content: "";
      width: 24px;
      height: 1px;
      background: #4fd18f;
    }
  }

  .blog-h2 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    color: #f7f2ea;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  .blog-lead {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: rgba(247, 242, 234, 0.45);
    max-width: 560px;
    line-height: 1.85;
  }

  /* ── Filter Tabs ── */
  .filter-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
  }

  .ftab {
    background: transparent;
    border: 1px solid rgba(28, 181, 109, 0.22);
    color: rgba(247, 242, 234, 0.55);
    border-radius: 999px;
    padding: 0.45rem 1.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;

    &:hover {
      border-color: rgba(28, 181, 109, 0.5);
      color: #9be7bf;
    }
    &.on {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
      font-weight: 600;
    }
  }

  /* ── Featured Post ── */
  .featured-post {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(28, 181, 109, 0.14);
    background: rgba(247, 242, 234, 0.03);
    margin-top: 3.2rem;
    cursor: pointer;
    transition:
      box-shadow 0.28s,
      border-color 0.28s,
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);

    &:hover {
      box-shadow: 0 20px 50px rgba(28, 181, 109, 0.15);
      border-color: rgba(28, 181, 109, 0.3);
      transform: translateY(-5px);
    }

    &:hover .fp-img-wrap img {
      transform: scale(1.05);
    }
  }

  .fp-img-wrap {
    position: relative;
    overflow: hidden;
    min-height: 380px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  .fp-tag {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-family: "Jost", sans-serif;
  }

  .fp-featured-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: rgba(10, 8, 6, 0.7);
    backdrop-filter: blur(8px);
    color: rgba(247, 242, 234, 0.6);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.28rem 0.7rem;
    font-family: "Jost", sans-serif;
    border: 1px solid rgba(247, 242, 234, 0.1);
  }

  .fp-body {
    padding: 2.8rem 2.8rem 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fp-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.68rem;
    color: rgba(247, 242, 234, 0.35);
    letter-spacing: 0.06em;
    margin-bottom: 1.2rem;
    font-family: "Jost", sans-serif;
  }

  .fp-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(247, 242, 234, 0.2);
    flex-shrink: 0;
  }

  .fp-title {
    margin: 0 0 1rem;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 500;
    color: #f7f2ea;
    line-height: 1.2;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  .fp-excerpt {
    margin: 0 0 1.8rem;
    font-size: 0.88rem;
    color: rgba(247, 242, 234, 0.48);
    line-height: 1.85;
    flex: 1;
  }

  .fp-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(28, 181, 109, 0.4);
    background: transparent;
    color: #4fd18f;
    border-radius: 8px;
    padding: 0.6rem 1.3rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition:
      background 0.22s,
      color 0.22s,
      border-color 0.22s;
    align-self: flex-start;

    &:hover {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
    }

    svg {
      transition: transform 0.22s;
    }
    &:hover svg {
      transform: translateX(4px);
    }
  }

  /* ── Blog Grid ── */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  /* ── Blog Card ── */
  .blog-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s,
      border-color 0.25s;

    &:hover {
      transform: translateY(-7px);
      box-shadow: 0 16px 40px rgba(28, 181, 109, 0.13);
      border-color: rgba(28, 181, 109, 0.3);
    }

    &[data-hidden="true"] {
      display: none;
    }

    &:hover .bc-img-wrap img {
      transform: scale(1.06);
      filter: brightness(1);
    }
    &:hover .bc-arrow {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
    }
  }

  .bc-img-wrap {
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 210px;
      object-fit: cover;
      display: block;
      filter: brightness(0.85);
      transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s;
    }
  }

  .bc-cat {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.26rem 0.75rem;
    font-family: "Jost", sans-serif;
  }

  .bc-read-time {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(10, 8, 6, 0.65);
    backdrop-filter: blur(6px);
    color: rgba(247, 242, 234, 0.55);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border-radius: 6px;
    padding: 0.26rem 0.6rem;
    font-family: "Jost", sans-serif;
  }

  .bc-body {
    padding: 1.4rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .bc-date {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    margin-bottom: 0.55rem;
  }

  .bc-title {
    margin: 0 0 0.65rem;
    font-family: "Playfair Display", serif;
    font-size: 1.12rem;
    font-weight: 500;
    color: #f7f2ea;
    line-height: 1.3;
  }

  .bc-excerpt {
    margin: 0 0 1.2rem;
    font-size: 0.84rem;
    color: rgba(247, 242, 234, 0.42);
    line-height: 1.78;
    flex: 1;
  }

  .bc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(28, 181, 109, 0.1);
    padding-top: 1rem;
    margin-top: auto;
  }

  .bc-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: rgba(247, 242, 234, 0.35);
    font-family: "Jost", sans-serif;
  }

  .bc-author-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(28, 181, 109, 0.18);
    border: 1px solid rgba(28, 181, 109, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #4fd18f;
    font-weight: 600;
  }

  .bc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(28, 181, 109, 0.22);
    color: rgba(28, 181, 109, 0.5);
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
  }

  /* ── Newsletter Band ── */
  .newsletter-band {
    margin-top: 5rem;
    border-radius: 20px;
    background: linear-gradient(
      135deg,
      rgba(28, 181, 109, 0.1) 0%,
      rgba(28, 181, 109, 0.04) 100%
    );
    border: 1px solid rgba(28, 181, 109, 0.18);
    padding: 3.5rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .nl-text {
    h3 {
      margin: 0 0 0.5rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 400;
      color: #f7f2ea;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }

    p {
      margin: 0;
      font-size: 0.85rem;
      color: rgba(247, 242, 234, 0.42);
      line-height: 1.75;
      max-width: 440px;
    }
  }

  .nl-form {
    display: flex;
    gap: 0.7rem;
    flex-shrink: 0;
  }

  .nl-input {
    background: rgba(247, 242, 234, 0.06);
    border: 1px solid rgba(28, 181, 109, 0.2);
    border-radius: 8px;
    padding: 0.75rem 1.2rem;
    font-size: 0.82rem;
    color: #f7f2ea;
    font-family: "Jost", sans-serif;
    width: 260px;
    outline: none;
    transition: border-color 0.2s;

    &::placeholder {
      color: rgba(247, 242, 234, 0.28);
    }
    &:focus {
      border-color: rgba(28, 181, 109, 0.5);
    }
  }

  .nl-btn {
    background: #1cb56d;
    color: #151a24;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition:
      background 0.2s,
      transform 0.15s;
    white-space: nowrap;

    &:hover {
      background: #4fd18f;
      transform: translateY(-2px);
    }
  }
}

/* ================================================================
   PAGE: INFORMATION DETAIL — #page-information-detail
   ================================================================ */
#page-information-detail {
  /* ── Read Progress Bar ── */
  .read-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, #1cb56d, #9be7bf);
    z-index: 9999;
    width: 0%;
    transition: width 0.1s linear;
  }

  /* ── Article Hero ── */
  .art-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 380px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    h1 {
      margin: 0 0 1rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 400;
      color: #f7f2ea;
      line-height: 1.07;
      max-width: 820px;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }
  }

  .art-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .art-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(10, 8, 6, 1) 0%,
      rgba(10, 8, 6, 0.75) 38%,
      rgba(10, 8, 6, 0.25) 70%,
      rgba(10, 8, 6, 0.1) 100%
    );
  }

  .art-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 4rem 3.5rem;
  }

  .art-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
    font-family: "Jost", sans-serif;

    a {
      color: rgba(247, 242, 234, 0.38);
      text-decoration: none;
      transition: color 0.2s;
    }
    a:hover {
      color: #9be7bf;
    }
    .sep {
      opacity: 0.3;
    }
  }

  .art-cat-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
  }

  .art-cat-pill {
    background: #1cb56d;
    color: #151a24;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-family: "Jost", sans-serif;
  }

  .art-meta-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.7rem;
    color: rgba(247, 242, 234, 0.4);
    font-family: "Jost", sans-serif;
    letter-spacing: 0.05em;
  }

  .art-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(247, 242, 234, 0.22);
    flex-shrink: 0;
  }

  /* ── Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }

  .art-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4rem;
    padding: 5rem 0 8rem;
    align-items: start;
  }

  /* ── Article Body ── */
  .art-body {
    min-width: 0;

    p {
      margin: 0 0 1.6rem;
      font-size: 0.96rem;
      color: rgba(247, 242, 234, 0.65);
      line-height: 2;
      font-weight: 300;
    }

    p:first-of-type::first-letter {
      font-family: "Playfair Display", serif;
      font-size: 3.8rem;
      font-weight: 500;
      color: #4fd18f;
      float: left;
      line-height: 0.78;
      margin: 0.08em 0.14em 0 0;
    }

    h2 {
      margin: 3rem 0 1.1rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(1.5rem, 2.8vw, 2rem);
      font-weight: 500;
      color: #f7f2ea;
      line-height: 1.2;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }

    h3 {
      margin: 2.2rem 0 0.9rem;
      font-family: "Jost", sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: #f7f2ea;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
  }

  .art-divider {
    width: 40px;
    height: 2px;
    background: #1cb56d;
    margin: 0 0 2.8rem;
    border: none;
  }

  /* ── Block Quote ── */
  .art-quote {
    margin: 2.5rem 0;
    padding: 1.8rem 2rem 1.8rem 2.4rem;
    border-left: 3px solid #1cb56d;
    background: rgba(28, 181, 109, 0.06);
    border-radius: 0 12px 12px 0;

    p {
      margin: 0 0 0.6rem;
      font-family: "Playfair Display", serif;
      font-size: 1.22rem;
      font-style: italic;
      color: rgba(247, 242, 234, 0.82);
      line-height: 1.7;

      &:last-of-type {
        margin: 0;
      }
    }

    cite {
      font-size: 0.72rem;
      color: rgba(247, 242, 234, 0.35);
      font-style: normal;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: "Jost", sans-serif;
    }
  }

  /* ── Inline Images ── */
  .art-img-block {
    margin: 2.8rem 0;
    border-radius: 14px;
    overflow: hidden;

    img {
      width: 100%;
      height: 380px;
      object-fit: cover;
      display: block;
    }
  }

  .art-img-caption {
    display: block;
    font-size: 0.72rem;
    color: rgba(247, 242, 234, 0.3);
    letter-spacing: 0.08em;
    margin-top: 0.7rem;
    font-family: "Jost", sans-serif;
    text-align: center;
  }

  .art-img-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.8rem 0;

    .art-img-block {
      margin: 0;
    }
    .art-img-block img {
      height: 240px;
    }
  }

  /* ── Callout ── */
  .art-callout {
    margin: 2.5rem 0;
    padding: 1.8rem 2rem;
    background: rgba(28, 181, 109, 0.07);
    border: 1px solid rgba(28, 181, 109, 0.2);
    border-radius: 14px;
  }

  .art-callout-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
    margin-bottom: 1rem;
  }

  .art-callout ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      font-size: 0.88rem;
      color: rgba(247, 242, 234, 0.6);
      line-height: 1.75;
      margin-bottom: 0.55rem;
      font-weight: 300;

      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #1cb56d;
        flex-shrink: 0;
        margin-top: 0.55em;
      }
    }
  }

  /* ── Month Grid ── */
  .month-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
  }

  .month-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
  }

  .month-name {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
    margin-bottom: 0.45rem;
  }

  .month-desc {
    font-size: 0.8rem;
    color: rgba(247, 242, 234, 0.45);
    line-height: 1.65;
    font-weight: 300;
  }

  /* ── Tags ── */
  .art-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 3.5rem 0 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(28, 181, 109, 0.1);
  }

  .art-tag {
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(28, 181, 109, 0.15);
    color: rgba(247, 242, 234, 0.45);
    border-radius: 999px;
    padding: 0.32rem 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;
    text-decoration: none;

    &:hover {
      background: rgba(28, 181, 109, 0.12);
      color: #9be7bf;
      border-color: rgba(28, 181, 109, 0.35);
    }
  }

  /* ── Author Bio ── */
  .art-author-bio {
    display: flex;
    gap: 1.4rem;
    padding: 2rem;
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.14);
    border-radius: 16px;
    margin-bottom: 4rem;
  }

  .author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      rgba(28, 181, 109, 0.3),
      rgba(28, 181, 109, 0.08)
    );
    border: 2px solid rgba(28, 181, 109, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 1.6rem;
    color: #4fd18f;
    flex-shrink: 0;
  }

  .author-bio-text {
    h4 {
      margin: 0 0 0.3rem;
      font-family: "Jost", sans-serif;
      font-size: 0.9rem;
      font-weight: 600;
      color: #f7f2ea;
    }

    span {
      display: block;
      font-size: 0.7rem;
      color: #4fd18f;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: "Jost", sans-serif;
      margin-bottom: 0.6rem;
    }

    p {
      margin: 0;
      font-size: 0.83rem;
      color: rgba(247, 242, 234, 0.42);
      line-height: 1.75;
    }
  }

  /* ── Prev / Next Navigation ── */
  .art-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 5rem;
  }

  .art-nav-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    transition:
      border-color 0.22s,
      background 0.22s,
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);

    &:hover {
      border-color: rgba(28, 181, 109, 0.3);
      background: rgba(28, 181, 109, 0.05);
      transform: translateY(-3px);
    }

    &.next .art-nav-dir {
      text-align: right;
    }
    &.next .art-nav-title {
      text-align: right;
    }
  }

  .art-nav-dir {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.28);
    font-family: "Jost", sans-serif;
  }

  .art-nav-title {
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    color: #f7f2ea;
    font-weight: 500;
    line-height: 1.3;
  }

  /* ── Related Articles ── */
  .related-h2 {
    margin: 0 0 2rem;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 400;
    color: #f7f2ea;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }

  .rel-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s,
      border-color 0.25s;

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 36px rgba(28, 181, 109, 0.12);
      border-color: rgba(28, 181, 109, 0.28);
    }
    &:hover .rel-img img {
      transform: scale(1.07);
      filter: brightness(1);
    }
  }

  .rel-img {
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 170px;
      object-fit: cover;
      display: block;
      filter: brightness(0.82);
      transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.3s;
    }
  }

  .rel-cat {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.24rem 0.7rem;
    font-family: "Jost", sans-serif;
  }

  .rel-body {
    padding: 1.1rem 1.2rem;
    flex: 1;
  }
  .rel-date {
    font-size: 0.62rem;
    color: rgba(247, 242, 234, 0.28);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    margin-bottom: 0.45rem;
  }
  .rel-title {
    font-family: "Playfair Display", serif;
    font-size: 0.98rem;
    font-weight: 500;
    color: #f7f2ea;
    line-height: 1.35;
  }

  /* ── Sidebar ── */
  .art-sidebar {
    position: sticky;
    top: 100px;
  }

  .sidebar-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    padding: 1.6rem;
    margin-bottom: 1.4rem;
  }

  .sidebar-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
    margin: 0 0 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;

    &::before {
      content: "";
      width: 18px;
      height: 1px;
      background: #1cb56d;
      flex-shrink: 0;
    }
  }

  /* ── Table of Contents ── */
  .toc-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      margin-bottom: 0.1rem;
    }

    a {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: rgba(247, 242, 234, 0.42);
      text-decoration: none;
      padding: 0.45rem 0.5rem;
      border-radius: 7px;
      line-height: 1.4;
      transition:
        background 0.18s,
        color 0.18s;
      font-family: "Jost", sans-serif;

      &:hover {
        background: rgba(28, 181, 109, 0.08);
        color: #9be7bf;
      }
      &.active {
        color: #4fd18f;
        background: rgba(28, 181, 109, 0.1);
      }

      &::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(28, 181, 109, 0.3);
        flex-shrink: 0;
        transition: background 0.18s;
      }

      &.active::before,
      &:hover::before {
        background: #1cb56d;
      }
    }
  }

  /* ── Quick Facts ── */
  .qf-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(28, 181, 109, 0.08);

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .qf-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
  }
  .qf-label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.3);
    font-family: "Jost", sans-serif;
    margin-bottom: 0.15rem;
  }
  .qf-val {
    font-size: 0.82rem;
    color: rgba(247, 242, 234, 0.7);
    font-family: "Jost", sans-serif;
    line-height: 1.4;
  }

  /* ── Share Buttons ── */
  .share-btns {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .share-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(28, 181, 109, 0.15);
    border-radius: 8px;
    padding: 0.6rem 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.45);
    font-family: "Jost", sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;

    &:hover {
      background: rgba(28, 181, 109, 0.12);
      color: #9be7bf;
      border-color: rgba(28, 181, 109, 0.35);
    }
  }

  /* ── Back Link ── */
  .back-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.35);
    font-family: "Jost", sans-serif;
    text-decoration: none;
    transition: color 0.2s;
    margin-bottom: 1.4rem;

    &:hover {
      color: #4fd18f;
    }
    svg {
      transition: transform 0.2s;
    }
    &:hover svg {
      transform: translateX(-4px);
    }
  }
}

/* ================================================================
   PAGE: NOS PROJETS — #page-nos-projets
   ================================================================ */
#page-nos-projets {
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }

  .art-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4rem;
    align-items: start;
  }

  .art-body {
    min-width: 0;
  }

  .art-sidebar {
    position: sticky;
    top: 100px;
  }

  .sidebar-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    padding: 1.6rem;
    margin-bottom: 1.4rem;
  }

  .sidebar-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
    margin: 0 0 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;

    &::before {
      content: "";
      width: 18px;
      height: 1px;
      background: #1cb56d;
      flex-shrink: 0;
    }
  }

  .toc-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      margin-bottom: 0.1rem;
    }

    a {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: rgba(247, 242, 234, 0.42);
      text-decoration: none;
      padding: 0.45rem 0.5rem;
      border-radius: 7px;
      line-height: 1.4;
      transition:
        background 0.18s,
        color 0.18s;
      font-family: "Jost", sans-serif;

      &:hover {
        background: rgba(28, 181, 109, 0.08);
        color: #9be7bf;
      }
      &.active {
        color: #4fd18f;
        background: rgba(28, 181, 109, 0.1);
      }

      &::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(28, 181, 109, 0.3);
        flex-shrink: 0;
        transition: background 0.18s;
      }

      &.active::before,
      &:hover::before {
        background: #1cb56d;
      }
    }
  }

  .qf-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(28, 181, 109, 0.08);

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .qf-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
  }
  .qf-label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.3);
    font-family: "Jost", sans-serif;
    margin-bottom: 0.15rem;
  }
  .qf-val {
    font-size: 0.82rem;
    color: rgba(247, 242, 234, 0.7);
    font-family: "Jost", sans-serif;
    line-height: 1.4;
  }

  .share-btns {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .share-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(28, 181, 109, 0.15);
    border-radius: 8px;
    padding: 0.6rem 0.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.45);
    font-family: "Jost", sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;

    &:hover {
      background: rgba(28, 181, 109, 0.12);
      color: #9be7bf;
      border-color: rgba(28, 181, 109, 0.35);
    }
  }

  .back-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.35);
    font-family: "Jost", sans-serif;
    text-decoration: none;
    transition: color 0.2s;
    margin-bottom: 1.4rem;

    &:hover {
      color: #4fd18f;
    }
    svg {
      transition: transform 0.2s;
    }
    &:hover svg {
      transform: translateX(-4px);
    }
  }
}

/* ================================================================
   PAGE: ACTIVITIES — #page-activities
   ================================================================ */
#page-activities {
  /* ── Hero Mini ── */
  .hero-mini {
    width: 100%;
    min-height: 34vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 3.5rem;
    background:
      linear-gradient(
        to top,
        rgba(10, 8, 6, 0.95) 0%,
        rgba(10, 8, 6, 0.5) 50%,
        rgba(10, 8, 6, 0.2) 100%
      ),
      linear-gradient(to right, rgba(29, 32, 48, 0.75) 0%, transparent 60%),
      url("../img/banner/banner1.png") center/cover no-repeat;
    color: #fff;
    position: relative;

    h1 {
      margin: 0 0 0.6rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 400;
      line-height: 1.05;
      color: #f7f2ea;
      letter-spacing: -0.01em;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }
  }

  .eyebrow-tp {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 0.7rem;

    &::before {
      content: "";
      width: 32px;
      height: 1px;
      background: #4fd18f;
      flex-shrink: 0;
    }
  }

  .hero-sub-tp {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(247, 242, 234, 0.52);
    max-width: 540px;
    line-height: 1.8;
    font-weight: 300;
  }

  /* ── Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }
  .sec-activities {
    padding: 6rem 0 4rem;
  }
  .sec-highlights {
    padding: 0 0 6rem;
  }

  /* ── Section Label ── */
  .stag-td {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 1rem;

    &::before {
      content: "";
      width: 24px;
      height: 1px;
      background: #4fd18f;
    }
  }

  .sh2-td {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    color: #f7f2ea;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  .sp-td {
    margin: 0.9rem 0 0;
    font-size: 0.92rem;
    color: rgba(247, 242, 234, 0.45);
    max-width: 560px;
    line-height: 1.85;
  }

  /* ── Filter Tabs ── */
  .filter-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
  }

  .ftab {
    background: transparent;
    border: 1px solid rgba(28, 181, 109, 0.22);
    color: rgba(247, 242, 234, 0.55);
    border-radius: 999px;
    padding: 0.45rem 1.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;

    &:hover {
      border-color: rgba(28, 181, 109, 0.5);
      color: #9be7bf;
    }
    &.on {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
      font-weight: 600;
    }
  }

  /* ── Activity Grid ── */
  .act-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }

  /* ── Activity Card ── */
  .act-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s,
      border-color 0.25s;
    cursor: pointer;

    &:hover {
      transform: translateY(-7px);
      box-shadow: 0 16px 40px rgba(28, 181, 109, 0.13);
      border-color: rgba(28, 181, 109, 0.3);
    }

    &[data-hidden="true"] {
      display: none;
    }
    &:hover .act-img-wrap img {
      transform: scale(1.06);
    }
  }

  .act-img-wrap {
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  .act-num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(10, 8, 6, 0.65);
    backdrop-filter: blur(6px);
    color: rgba(247, 242, 234, 0.5);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    border-radius: 6px;
    padding: 0.28rem 0.6rem;
    font-family: "Jost", sans-serif;
  }

  .act-cat-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.28rem 0.7rem;
    font-family: "Jost", sans-serif;
  }

  .act-body {
    padding: 1.4rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .act-name {
    margin: 0 0 0.5rem;
    font-family: "Playfair Display", serif;
    font-size: 1.18rem;
    font-weight: 500;
    color: #f7f2ea;
    line-height: 1.25;
  }

  .act-desc {
    margin: 0 0 1.1rem;
    font-size: 0.88rem;
    color: rgba(247, 242, 234, 0.48);
    line-height: 1.75;
    flex: 1;
  }

  .act-meta {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;

    span {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.72rem;
      color: rgba(247, 242, 234, 0.4);
      letter-spacing: 0.04em;

      svg {
        opacity: 0.5;
        flex-shrink: 0;
      }
    }
  }

  .act-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(28, 181, 109, 0.1);
    padding: 1rem 1.5rem;
    margin-top: auto;
  }

  .act-price {
    font-size: 1rem;
    font-weight: 600;
    color: #4fd18f;
    font-family: "Jost", sans-serif;

    small {
      font-size: 0.68rem;
      font-weight: 400;
      color: rgba(247, 242, 234, 0.35);
      margin-left: 0.3rem;
    }
  }

  .act-btn {
    border: 1px solid rgba(28, 181, 109, 0.45);
    background: transparent;
    color: #9be7bf;
    border-radius: 6px;
    padding: 0.45rem 1.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.22s,
      color 0.22s,
      border-color 0.22s;
    text-decoration: none;
    display: inline-block;

    &:hover {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
    }
  }

  /* ── No Results ── */
  .no-results {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 0;
    color: rgba(247, 242, 234, 0.3);
    font-size: 0.95rem;
    font-style: italic;
  }

  /* ── Result Count ── */
  .result-count {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.3);
    letter-spacing: 0.08em;
    margin-top: 1rem;

    span {
      color: #4fd18f;
    }
  }

  /* ── Highlights Strip ── */
  .highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
  }

  .hl-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 14px;
    padding: 1.8rem 1.5rem;
    text-align: center;

    h4 {
      margin: 0 0 0.4rem;
      font-family: "Playfair Display", serif;
      font-size: 1rem;
      font-weight: 500;
      color: #f7f2ea;
    }

    p {
      margin: 0;
      font-size: 0.84rem;
      color: rgba(247, 242, 234, 0.42);
      line-height: 1.7;
    }
  }

  .hl-icon {
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
    display: block;
  }

  /* ── CTA Band ── */
  .cta-band {
    background: rgba(28, 181, 109, 0.08);
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 20px;
    padding: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 5rem;

    h3 {
      margin: 0 0 0.5rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 400;
      color: #f7f2ea;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }

    p {
      margin: 0;
      font-size: 0.9rem;
      color: rgba(247, 242, 234, 0.45);
      max-width: 420px;
      line-height: 1.75;
    }
  }

  .cta-btns {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
  }

  .btn-fill-td {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #1cb56d;
    color: #151a24;
    border: none;
    border-radius: 6px;
    padding: 0.85rem 2rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: "Jost", sans-serif;

    &:hover {
      background: #4fd18f;
    }
  }

  .btn-line-td {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #9be7bf;
    border: 1px solid rgba(28, 181, 109, 0.4);
    border-radius: 6px;
    padding: 0.85rem 2rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
      border-color 0.2s,
      background 0.2s;
    font-family: "Jost", sans-serif;

    &:hover {
      background: rgba(28, 181, 109, 0.08);
      border-color: #9be7bf;
    }
  }
}

/* ================================================================
   PAGE: ACTIVITIES DETAIL  — #page-activities-detail
   PAGE: CIRCUIT DETAIL     — #page-les-circuit-detail
   ================================================================ */
#page-activities-detail,
#page-les-circuit-detail {
  /* ── Detail Hero (draggable slider) ── */
  .detail-hero {
    position: relative;
    width: 100%;
    height: 48vh;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    user-select: none;
  }

  /* ── Slider ── */
  .hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .hero-slides {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

    &.dragging {
      transition: none;
    }
  }

  .hero-slide {
    flex: 0 0 calc(100% / 3);
    height: 100%;
    position: relative;
    padding: 0 3px;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      pointer-events: none;
    }
  }

  .detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(10, 8, 6, 0.95) 0%,
      rgba(10, 8, 6, 0.65) 38%,
      rgba(10, 8, 6, 0.25) 70%,
      rgba(10, 8, 6, 0.1) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* ── Hero Arrows ── */
  .hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10, 8, 6, 0.55);
    border: 1px solid rgba(247, 242, 234, 0.15);
    color: #f7f2ea;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background 0.2s,
      border-color 0.2s;
    padding: 0;

    &:hover {
      background: #1cb56d;
      border-color: #1cb56d;
    }
    &.prev {
      left: 1.5rem;
    }
    &.next {
      right: 1.5rem;
    }
  }

  /* ── Slide Dots ── */
  .hero-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 0.45rem;
    align-items: center;
  }

  .hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(247, 242, 234, 0.35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
      background 0.2s,
      transform 0.2s;

    &.on {
      background: #1cb56d;
      transform: scale(1.45);
    }
  }

  /* ── Slide Counter ── */
  .hero-counter {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 4;
    background: rgba(10, 8, 6, 0.55);
    border: 1px solid rgba(247, 242, 234, 0.12);
    border-radius: 999px;
    padding: 0.28rem 0.85rem;
    font-size: 0.68rem;
    color: rgba(247, 242, 234, 0.6);
    letter-spacing: 0.1em;
    font-family: "Jost", sans-serif;
  }

  .detail-hero-content {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 4rem 2.5rem;
    pointer-events: none;

    a,
    button {
      pointer-events: auto;
    }

    h1 {
      margin: 0 0 0.6rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 400;
      color: #f7f2ea;
      line-height: 1.05;
      max-width: 700px;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }
  }

  /* ── Breadcrumb ── */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    margin-bottom: 1.4rem;
    flex-wrap: wrap;

    a {
      color: rgba(247, 242, 234, 0.38);
      text-decoration: none;
      transition: color 0.2s;
    }
    a:hover {
      color: #9be7bf;
    }
    .sep {
      opacity: 0.3;
    }
    .current {
      color: #4fd18f;
    }
  }

  .hero-cat-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
  }

  .hero-cat-pill {
    background: #1cb56d;
    color: #151a24;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.28rem 0.9rem;
    font-family: "Jost", sans-serif;
  }

  .hero-rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.55);

    .stars {
      color: #ffb400;
      letter-spacing: 0.05em;
    }
    strong {
      color: #f7f2ea;
    }
  }

  .detail-hero-sub {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(247, 242, 234, 0.5);
    max-width: 540px;
    line-height: 1.8;
    font-weight: 300;
  }

  /* ── Quick Info Strip ── */
  .info-strip {
    background: rgba(247, 242, 234, 0.04);
    border-bottom: 1px solid rgba(28, 181, 109, 0.1);
  }

  .info-strip-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
    display: flex;
    align-items: stretch;
    gap: 0;
  }

  .istrip-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.2rem 2rem 1.2rem 0;
    margin-right: 2rem;
    border-right: 1px solid rgba(28, 181, 109, 0.1);
    flex-shrink: 0;

    &:last-child {
      border-right: none;
      margin-right: 0;
    }
  }

  .istrip-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .istrip-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .istrip-label {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.35);
    font-weight: 500;
  }
  .istrip-val {
    font-size: 0.88rem;
    color: #f7f2ea;
    font-weight: 500;
  }

  .istrip-item--loc {
    flex-shrink: 1;
    min-width: 0;
    max-width: 28rem;
  }
  .loc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
  }
  .loc-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #f7f2ea;
    background: rgba(28, 181, 109, 0.12);
    border: 1px solid rgba(28, 181, 109, 0.28);
    border-radius: 20px;
    padding: 0.18rem 0.65rem;
    white-space: nowrap;
    line-height: 1.4;
  }

  /* ── Page Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }

  .detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 3.5rem;
    align-items: start;
    padding: 4rem 0 6rem;
  }

  /* ── Content Labels ── */
  .content-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 1rem;

    &::before {
      content: "";
      width: 20px;
      height: 1px;
      background: #4fd18f;
    }
  }

  .content-block {
    margin-bottom: 3.5rem;
  }

  /* ── Overview ── */
  .overview-text p {
    font-size: 0.95rem;
    color: rgba(247, 242, 234, 0.6);
    line-height: 1.9;
    margin: 0 0 1.1rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* ── Highlights List ── */
  .highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;

    li {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      font-size: 0.92rem;
      color: rgba(247, 242, 234, 0.62);
      line-height: 1.6;
    }
  }

  .hl-check {
    width: 22px;
    height: 22px;
    background: rgba(28, 181, 109, 0.15);
    border: 1px solid rgba(28, 181, 109, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;

    svg {
      display: block;
    }
  }

  /* ── Gallery Mosaic ── */
  .gallery-mosaic {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    grid-template-rows: 198px 198px;
    gap: 5px;
    border-radius: 18px;
    overflow: hidden;
  }

  .gm-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: rgba(247, 242, 234, 0.04);

    &.gm-main {
      grid-row: 1 / 3;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s;
      filter: brightness(0.88);
    }

    &:hover img {
      transform: scale(1.07);
      filter: brightness(1.02);
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(28, 181, 109, 0.1);
      pointer-events: none;
      z-index: 2;
    }
  }

  .gm-badge {
    position: absolute;
    bottom: 1.1rem;
    left: 1.1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(10, 8, 6, 0.58);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(247, 242, 234, 0.14);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(247, 242, 234, 0.85);
    letter-spacing: 0.07em;
    font-family: "Jost", sans-serif;

    svg {
      opacity: 0.7;
    }
  }

  .gm-tag {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 3;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.28rem 0.75rem;
    font-family: "Jost", sans-serif;
  }

  .gm-viewall {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(10, 8, 6, 0.52);
    backdrop-filter: blur(3px);
    transition: background 0.25s;

    &:hover {
      background: rgba(10, 8, 6, 0.64);
    }

    span {
      font-size: 0.72rem;
      font-weight: 600;
      color: #f7f2ea;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-family: "Jost", sans-serif;
    }

    svg {
      opacity: 0.75;
    }
  }

  /* ── Itinerary ── */
  .itinerary {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .itin-step {
    display: flex;
    gap: 1.4rem;
    padding-bottom: 1.8rem;
    position: relative;

    &:last-child {
      padding-bottom: 0;
    }

    &:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 15px;
      top: 32px;
      bottom: 0;
      width: 1px;
      background: rgba(28, 181, 109, 0.2);
    }
  }

  .itin-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(28, 181, 109, 0.12);
    border: 2px solid rgba(28, 181, 109, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
    z-index: 1;
    position: relative;
  }

  .itin-body {
    flex: 1;
  }
  .itin-time {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 0.25rem;
  }
  .itin-title {
    font-family: "Playfair Display", serif;
    font-size: 1.02rem;
    font-weight: 500;
    color: #f7f2ea;
    margin-bottom: 0.4rem;
  }
  .itin-desc {
    font-size: 0.86rem;
    color: rgba(247, 242, 234, 0.45);
    line-height: 1.75;
    margin: 0;
  }

  /* ── Included / Not Included ── */
  .incl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }

  .incl-col {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 14px;
    padding: 1.6rem;

    h4 {
      margin: 0 0 1rem;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 600;
      font-family: "Jost", sans-serif;
    }

    &.yes h4 {
      color: #4fd18f;
    }
    &.no h4 {
      color: rgba(247, 100, 80, 0.8);
    }
  }

  .incl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;

    li {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      font-size: 0.86rem;
      color: rgba(247, 242, 234, 0.52);
      line-height: 1.55;
    }
  }

  .dot-yes {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(28, 181, 109, 0.18);
    border: 1px solid #1cb56d;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
  }

  .dot-no {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(247, 100, 80, 0.12);
    border: 1px solid rgba(247, 100, 80, 0.5);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
  }

  /* ── Meeting Point ── */
  .meet-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 14px;
    padding: 1.8rem;
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
  }

  .meet-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
  }

  .meet-body {
    h4 {
      margin: 0 0 0.35rem;
      font-family: "Playfair Display", serif;
      font-size: 1rem;
      font-weight: 500;
      color: #f7f2ea;
    }

    p {
      margin: 0;
      font-size: 0.88rem;
      color: rgba(247, 242, 234, 0.48);
      line-height: 1.7;
    }

    .map-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
      color: #4fd18f;
      text-decoration: none;
      margin-top: 0.55rem;
      letter-spacing: 0.06em;
      transition: color 0.2s;

      &:hover {
        color: #9be7bf;
      }
    }
  }

  /* ── Reviews ── */
  .reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .review-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.1);
    border-radius: 14px;
    padding: 1.6rem;
  }

  .review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
  }

  .reviewer {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .reviewer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(28, 181, 109, 0.18);
    border: 1px solid rgba(28, 181, 109, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    color: #9be7bf;
    font-weight: 700;
    flex-shrink: 0;
  }

  .reviewer-info {
    h5 {
      margin: 0 0 0.15rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: #f7f2ea;
    }
    span {
      font-size: 0.72rem;
      color: rgba(247, 242, 234, 0.35);
    }
  }

  .review-stars {
    color: #ffb400;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
  }

  .review-text {
    font-size: 0.88rem;
    color: rgba(247, 242, 234, 0.52);
    line-height: 1.78;
    margin: 0;
    font-style: italic;

    &::before {
      content: "\201C";
      color: #1cb56d;
      font-size: 1.2rem;
      line-height: 0;
      vertical-align: -0.25em;
      margin-right: 0.2rem;
    }
    &::after {
      content: "\201D";
      color: #1cb56d;
      font-size: 1.2rem;
      line-height: 0;
      vertical-align: -0.25em;
      margin-left: 0.2rem;
    }
  }

  /* ── Sidebar ── */
  .detail-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }

  /* ── Booking Card ── */
  .book-card {
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(28, 181, 109, 0.2);
    border-radius: 18px;
    overflow: hidden;
  }

  .book-card-top {
    padding: 1.6rem 1.8rem 1.4rem;
    border-bottom: 1px solid rgba(28, 181, 109, 0.1);
  }

  .book-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .book-price {
    font-family: "Playfair Display", serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #4fd18f;
    line-height: 1;
  }

  .book-price-from {
    font-size: 0.75rem;
    color: rgba(247, 242, 234, 0.35);
    letter-spacing: 0.06em;
  }
  .book-price-per {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.4);
    margin-left: auto;
  }

  .book-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.45);

    .stars {
      color: #ffb400;
    }
    strong {
      color: #f7f2ea;
    }
  }

  .book-card-form {
    padding: 1.4rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .bform-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    label {
      font-size: 0.62rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(247, 242, 234, 0.4);
      font-weight: 500;
    }

    input,
    select {
      background: rgba(247, 242, 234, 0.07);
      border: 1px solid rgba(28, 181, 109, 0.18);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-size: 0.88rem;
      color: #f7f2ea;
      font-family: "Jost", sans-serif;
      outline: none;
      transition:
        border-color 0.2s,
        background 0.2s;
      width: 100%;
      box-sizing: border-box;

      &:focus {
        border-color: #1cb56d;
        background: rgba(28, 181, 109, 0.06);
      }
    }

    select option {
      background: #151a24;
    }
  }

  /* ── Guest Counter ── */
  .guest-counter-wrap {
    background: rgba(247, 242, 234, 0.06);
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 8px;
    overflow: hidden;
  }

  .guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    gap: 0.75rem;

    & + .guest-row {
      border-top: 1px solid rgba(28, 181, 109, 0.1);
    }
  }

  .guest-info {
    flex: 1;
    min-width: 0;
  }

  .guest-type {
    font-size: 0.86rem;
    font-weight: 500;
    color: #f7f2ea;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
  }

  .guest-age {
    font-size: 0.7rem;
    color: rgba(247, 242, 234, 0.32);
    margin-top: 0.12rem;
    letter-spacing: 0.03em;
  }

  .guest-stepper {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
  }

  .gs-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(28, 181, 109, 0.35);
    background: transparent;
    color: rgba(247, 242, 234, 0.7);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background 0.18s,
      border-color 0.18s,
      color 0.18s;
    padding: 0;
    font-family: "Jost", sans-serif;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      background: #1cb56d;
      border-color: #1cb56d;
      color: #151a24;
    }
    &:disabled {
      opacity: 0.28;
      cursor: not-allowed;
    }
  }

  .gs-count {
    min-width: 28px;
    text-align: center;
    font-size: 0.98rem;
    font-weight: 600;
    color: #f7f2ea;
    font-family: "Jost", sans-serif;
    line-height: 1;
  }

  .guest-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    background: rgba(28, 181, 109, 0.06);
    border-top: 1px solid rgba(28, 181, 109, 0.1);
  }

  .guest-total-label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    font-family: "Jost", sans-serif;
  }
  .guest-total-val {
    font-size: 0.8rem;
    font-weight: 600;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
  }

  .book-submit {
    width: 100%;
    background: #1cb56d;
    color: #151a24;
    border: none;
    border-radius: 10px;
    padding: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.6rem;

    &:hover {
      background: #4fd18f;
    }
  }

  .book-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: rgba(247, 242, 234, 0.55);
    border: 1px solid rgba(28, 181, 109, 0.2);
    border-radius: 10px;
    padding: 0.78rem 1rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.55rem;
    transition:
      border-color 0.2s,
      color 0.2s;

    &:hover {
      border-color: #25d366;
      color: #25d366;
    }
  }

  .book-note {
    font-size: 0.72rem;
    color: rgba(247, 242, 234, 0.28);
    text-align: center;
    line-height: 1.6;
  }
  .book-ok {
    display: none;
    text-align: center;
    color: #9be7bf;
    font-size: 0.85rem;
    padding: 0.5rem 0;
  }

  /* ── Facts Card ── */
  .facts-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    padding: 1.5rem 1.6rem;

    h4 {
      margin: 0 0 1rem;
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #4fd18f;
      font-weight: 600;
    }
  }

  .facts-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .fact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(28, 181, 109, 0.07);

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .fact-key {
    color: rgba(247, 242, 234, 0.38);
    flex-shrink: 0;
  }
  .fact-val {
    color: #f7f2ea;
    text-align: right;
    font-weight: 500;
  }

  /* ── Guide Card ── */
  .guide-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .guide-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(28, 181, 109, 0.3);

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

  .guide-info {
    h5 {
      margin: 0 0 0.15rem;
      font-family: "Playfair Display", serif;
      font-size: 0.98rem;
      font-weight: 500;
      color: #f7f2ea;
    }
    span {
      font-size: 0.7rem;
      color: rgba(247, 242, 234, 0.38);
      letter-spacing: 0.06em;
    }

    .guide-rating {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      margin-top: 0.3rem;
      font-size: 0.76rem;
      color: rgba(247, 242, 234, 0.5);

      .stars {
        color: #ffb400;
      }
    }
  }

  /* ── Related Activities ── */
  .sec-related {
    padding: 0 0 6rem;
  }

  .stag-rel {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.63rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 1rem;

    &::before {
      content: "";
      width: 24px;
      height: 1px;
      background: #4fd18f;
    }
  }

  .sh2-rel {
    margin: 0 0 2.5rem;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    color: #f7f2ea;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
  }

  .rel-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s,
      border-color 0.25s;

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 36px rgba(28, 181, 109, 0.12);
      border-color: rgba(28, 181, 109, 0.3);
    }
    &:hover .rel-img-wrap img {
      transform: scale(1.07);
    }
  }

  .rel-img-wrap {
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 190px;
      object-fit: cover;
      display: block;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  .rel-cat {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 0.22rem 0.6rem;
    font-family: "Jost", sans-serif;
  }

  .rel-body {
    padding: 1.2rem 1.3rem;
    flex: 1;
    display: flex;
    flex-direction: column;

    h3 {
      margin: 0 0 0.45rem;
      font-family: "Playfair Display", serif;
      font-size: 1.05rem;
      font-weight: 500;
      color: #f7f2ea;
    }
    p {
      margin: 0 0 1rem;
      font-size: 0.84rem;
      color: rgba(247, 242, 234, 0.44);
      line-height: 1.7;
      flex: 1;
    }
  }

  .rel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(28, 181, 109, 0.1);
    padding: 0.9rem 1.3rem;
    margin-top: auto;
  }

  .rel-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4fd18f;
  }

  .rel-link {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.4);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .rel-card:hover .rel-link {
    color: #9be7bf;
  }

  /* ── Lightbox ── */
  .lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(5, 4, 3, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;

    &.open {
      opacity: 1;
      pointer-events: all;
    }
  }

  .lb-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    z-index: 4;
    background: linear-gradient(
      to bottom,
      rgba(5, 4, 3, 0.7) 0%,
      transparent 100%
    );
  }

  .lb-counter-text {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.45);
    font-family: "Jost", sans-serif;
  }

  .lb-caption-top {
    font-size: 0.82rem;
    color: rgba(247, 242, 234, 0.55);
    font-family: "Jost", sans-serif;
    font-weight: 300;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
  }

  .lb-close {
    background: rgba(247, 242, 234, 0.08);
    border: 1px solid rgba(247, 242, 234, 0.14);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(247, 242, 234, 0.7);
    transition:
      background 0.2s,
      color 0.2s;
    flex-shrink: 0;

    &:hover {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
    }
  }

  .lb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4rem 6rem;
    box-sizing: border-box;
    position: relative;
  }

  .lb-img-wrap {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lb-img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);

    &.switching {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  .lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(247, 242, 234, 0.07);
    border: 1px solid rgba(247, 242, 234, 0.12);
    color: rgba(247, 242, 234, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background 0.2s,
      border-color 0.2s,
      color 0.2s;
    padding: 0;

    &:hover {
      background: #1cb56d;
      border-color: #1cb56d;
      color: #151a24;
    }
    &.lb-prev {
      left: 1.2rem;
    }
    &.lb-next {
      right: 1.2rem;
    }
  }

  .lb-thumbs-wrap {
    width: 100%;
    padding: 0 1.5rem 1.4rem;
    box-sizing: border-box;
    background: linear-gradient(
      to top,
      rgba(5, 4, 3, 0.8) 0%,
      transparent 100%
    );
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .lb-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.3rem 0.2rem;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .lb-thumb {
    flex: 0 0 64px;
    height: 46px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
      border-color 0.2s,
      opacity 0.2s;
    opacity: 0.45;
    padding: 0;
    background: none;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    &.on {
      border-color: #1cb56d;
      opacity: 1;
    }
    &:hover {
      opacity: 0.85;
    }
  }
}

/* ================================================================
   PAGE: LES CIRCUIT — #page-les-circuit
   ================================================================ */
#page-les-circuit {
  /* ── Hero Mini ── */
  .hero-mini {
    width: 100%;
    min-height: 36vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 3.5rem;
    background:
      linear-gradient(
        to top,
        rgba(10, 8, 6, 0.96) 0%,
        rgba(10, 8, 6, 0.5) 50%,
        rgba(10, 8, 6, 0.18) 100%
      ),
      linear-gradient(to right, rgba(29, 32, 48, 0.75) 0%, transparent 60%),
      url("../img/banner/banner1.png") center/cover no-repeat;
    position: relative;

    h1 {
      margin: 0 0 0.6rem;
      font-family: "Playfair Display", serif;
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 400;
      line-height: 1.05;
      color: #f7f2ea;
      letter-spacing: -0.01em;

      em {
        font-style: italic;
        color: #9be7bf;
      }
    }
  }

  .eyebrow-tp {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #4fd18f;
    font-weight: 500;
    margin-bottom: 0.7rem;

    &::before {
      content: "";
      width: 32px;
      height: 1px;
      background: #4fd18f;
      flex-shrink: 0;
    }
  }

  .hero-sub-tp {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(247, 242, 234, 0.5);
    max-width: 520px;
    line-height: 1.8;
    font-weight: 300;
  }

  /* ── Layout ── */
  .sec-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4rem;
  }

  .page-wrap {
    display: grid;
    grid-template-columns: 284px 1fr;
    gap: 2.8rem;
    padding: 4rem 0 7rem;
    align-items: start;
  }

  /* ── Filter Sidebar ── */
  .filter-sidebar {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .fs-panel {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.13);
    border-radius: 16px;
    overflow: hidden;

    &.open .fs-chevron {
      transform: rotate(180deg);
    }
    &.open .fs-body {
      display: block;
    }
  }

  .fs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem 0.9rem;
    cursor: pointer;
    user-select: none;
  }

  .fs-head-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4fd18f;
    font-family: "Jost", sans-serif;
    display: flex;
    align-items: center;
    gap: 0.55rem;

    &::before {
      content: "";
      width: 14px;
      height: 1px;
      background: #1cb56d;
      flex-shrink: 0;
    }
  }

  .fs-chevron {
    width: 16px;
    height: 16px;
    color: rgba(247, 242, 234, 0.3);
    transition: transform 0.25s;
    flex-shrink: 0;
  }

  .fs-body {
    padding: 0 1.4rem 1.3rem;
    display: none;
  }

  /* ── Search Box ── */
  .search-wrap {
    position: relative;
    margin-bottom: 0.2rem;

    svg {
      position: absolute;
      left: 0.9rem;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(28, 181, 109, 0.5);
      pointer-events: none;
    }
  }

  .search-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 10px;
    padding: 0.7rem 0.9rem 0.7rem 2.4rem;
    font-size: 0.82rem;
    color: #f7f2ea;
    font-family: "Jost", sans-serif;
    outline: none;
    transition: border-color 0.2s;

    &::placeholder {
      color: rgba(247, 242, 234, 0.25);
    }
    &:focus {
      border-color: rgba(28, 181, 109, 0.5);
    }
  }

  /* ── Price Range ── */
  .price-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
  }

  .price-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    label {
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(247, 242, 234, 0.3);
      font-family: "Jost", sans-serif;
    }

    input {
      background: rgba(247, 242, 234, 0.05);
      border: 1px solid rgba(28, 181, 109, 0.18);
      border-radius: 8px;
      padding: 0.55rem 0.75rem;
      font-size: 0.82rem;
      color: #f7f2ea;
      font-family: "Jost", sans-serif;
      outline: none;
      width: 100%;
      box-sizing: border-box;
      transition: border-color 0.2s;

      &:focus {
        border-color: rgba(28, 181, 109, 0.5);
      }
    }
  }

  .price-slider-wrap {
    margin-top: 0.3rem;
  }

  .price-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: linear-gradient(
      to right,
      #1cb56d var(--pct, 100%),
      rgba(28, 181, 109, 0.18) var(--pct, 100%)
    );
    border-radius: 999px;
    outline: none;
    cursor: pointer;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #1cb56d;
      border: 2px solid rgba(10, 8, 6, 0.8);
      box-shadow: 0 0 0 3px rgba(28, 181, 109, 0.2);
      cursor: pointer;
      transition: box-shadow 0.18s;
    }

    &::-webkit-slider-thumb:hover {
      box-shadow: 0 0 0 5px rgba(28, 181, 109, 0.25);
    }
  }

  /* ── Location Select ── */
  .filter-select {
    width: 100%;
    box-sizing: border-box;
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #f7f2ea;
    font-family: "Jost", sans-serif;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234fd18f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    cursor: pointer;
    transition: border-color 0.2s;

    &:focus {
      border-color: rgba(28, 181, 109, 0.5);
    }
    option {
      background: #151a24;
      color: #f7f2ea;
    }
  }

  /* ── Checkbox Group ── */
  .cb-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .cb-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.42rem 0.3rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;

    &:hover {
      background: rgba(28, 181, 109, 0.06);
    }
    input[type="checkbox"] {
      display: none;
    }
  }

  .cb-box {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid rgba(28, 181, 109, 0.3);
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.18s,
      border-color 0.18s;
  }

  .cb-item input:checked ~ .cb-box {
    background: #1cb56d;
    border-color: #1cb56d;

    &::after {
      content: "";
      width: 9px;
      height: 5px;
      border-left: 2px solid #151a24;
      border-bottom: 2px solid #151a24;
      transform: rotate(-45deg) translateY(-1px);
      display: block;
    }
  }

  .cb-label {
    font-size: 0.8rem;
    color: rgba(247, 242, 234, 0.55);
    font-family: "Jost", sans-serif;
    line-height: 1;
    flex: 1;
    transition: color 0.15s;
  }

  .cb-item:has(input:checked) .cb-label {
    color: #f7f2ea;
  }

  .cb-count {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.25);
    font-family: "Jost", sans-serif;
    background: rgba(247, 242, 234, 0.06);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    min-width: 22px;
    text-align: center;
  }

  /* ── Star Rating Filter ── */
  .star-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .star-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.38rem 0.3rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;

    &:hover {
      background: rgba(28, 181, 109, 0.06);
    }
    input[type="radio"] {
      display: none;
    }

    .stars {
      color: rgba(255, 180, 0, 0.35);
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      transition: color 0.18s;
    }
    input:checked ~ .stars {
      color: #ffb400;
    }
  }

  .star-row-label {
    font-size: 0.75rem;
    color: rgba(247, 242, 234, 0.35);
    font-family: "Jost", sans-serif;
    transition: color 0.18s;
  }

  .star-row input:checked ~ .stars + .star-row-label {
    color: rgba(247, 242, 234, 0.7);
  }

  /* ── Clear Button ── */
  .clear-btn {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(247, 242, 234, 0.1);
    color: rgba(247, 242, 234, 0.35);
    border-radius: 9px;
    padding: 0.65rem 1rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition:
      border-color 0.2s,
      color 0.2s;
    margin-top: 0.4rem;

    &:hover {
      border-color: rgba(247, 242, 234, 0.25);
      color: rgba(247, 242, 234, 0.6);
    }
  }

  /* ── Results Area ── */
  .results-area {
    min-width: 0;
  }

  .results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
  }

  .results-count {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.38);
    font-family: "Jost", sans-serif;

    strong {
      color: #f7f2ea;
      font-weight: 600;
    }
  }

  /* ── Sort Tabs ── */
  .sort-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .sort-tab {
    background: transparent;
    border: 1px solid rgba(28, 181, 109, 0.2);
    color: rgba(247, 242, 234, 0.45);
    border-radius: 999px;
    padding: 0.38rem 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.18s,
      color 0.18s,
      border-color 0.18s;
    white-space: nowrap;

    &:hover {
      border-color: rgba(28, 181, 109, 0.4);
      color: #9be7bf;
    }
    &.on {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
      font-weight: 600;
    }
  }

  /* ── View Toggle ── */
  .view-toggle {
    display: flex;
    gap: 0.3rem;
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.13);
    border-radius: 9px;
    padding: 0.25rem;
  }

  .vt-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(247, 242, 234, 0.3);
    cursor: pointer;
    transition:
      background 0.18s,
      color 0.18s;

    &.on {
      background: rgba(28, 181, 109, 0.18);
      color: #4fd18f;
    }
    &:hover:not(.on) {
      color: rgba(247, 242, 234, 0.6);
    }
  }

  /* ── Cards Grid ── */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;

    &.list-mode {
      grid-template-columns: 1fr;
    }
  }

  /* ── No Results ── */
  .no-results-msg {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(247, 242, 234, 0.3);
    font-family: "Jost", sans-serif;
    font-size: 0.9rem;

    svg {
      opacity: 0.2;
      margin-bottom: 1rem;
    }
  }

  /* ── Grid Card (gc) ── */
  .gc {
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(28, 181, 109, 0.12);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s,
      border-color 0.25s;

    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 48px rgba(28, 181, 109, 0.14);
      border-color: rgba(28, 181, 109, 0.32);
    }

    &[data-hidden="true"] {
      display: none;
    }
    &:hover .gc-img img {
      transform: scale(1.07);
      filter: brightness(0.95);
    }
  }

  .gc-img {
    position: relative;
    overflow: hidden;

    img {
      width: 100%;
      height: 195px;
      object-fit: cover;
      display: block;
      filter: brightness(0.8);
      transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s;
    }
  }

  .gc-badge-day {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    background: #1cb56d;
    color: #151a24;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-family: "Jost", sans-serif;
  }

  .gc-badge-pop {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: rgba(10, 8, 6, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(247, 242, 234, 0.1);
    color: rgba(247, 242, 234, 0.65);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.25rem 0.65rem;
    font-family: "Jost", sans-serif;

    &.hot {
      border-color: rgba(255, 100, 60, 0.3);
      color: #ff7a54;
    }
    &.new {
      border-color: rgba(28, 181, 109, 0.3);
      color: #4fd18f;
    }
  }

  .gc-rating-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(to top, rgba(10, 8, 6, 0.75), transparent);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .gc-stars {
    color: #ffb400;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .gc-rating-num {
    font-size: 0.72rem;
    font-weight: 600;
    color: #f7f2ea;
    font-family: "Jost", sans-serif;
  }
  .gc-review-count {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.38);
    font-family: "Jost", sans-serif;
  }

  .gc-body {
    padding: 1.15rem 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .gc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .gc-chips span {
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    border-radius: 999px;
    background: rgba(28, 181, 109, 0.12);
    color: #9be7bf;
    padding: 0.18rem 0.6rem;
    font-family: "Jost", sans-serif;
  }

  .gc-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #f7f2ea;
    line-height: 1.25;

    em {
      font-style: italic;
      color: #9be7bf;
    }
  }

  .gc-desc {
    font-size: 0.8rem;
    color: rgba(247, 242, 234, 0.4);
    line-height: 1.7;
    font-weight: 300;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .gc-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .gc-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: rgba(247, 242, 234, 0.35);
    font-family: "Jost", sans-serif;

    svg {
      opacity: 0.5;
    }
  }

  .gc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(28, 181, 109, 0.1);
    padding: 0.9rem 1.2rem;
    margin-top: auto;
  }

  .gc-price {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;

    span {
      font-size: 0.58rem;
      color: rgba(247, 242, 234, 0.28);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-family: "Jost", sans-serif;
    }
    strong {
      font-size: 1.05rem;
      font-weight: 600;
      color: #4fd18f;
      font-family: "Jost", sans-serif;
    }
  }

  .gc-btn {
    border: 1px solid rgba(28, 181, 109, 0.4);
    background: transparent;
    color: #9be7bf;
    border-radius: 7px;
    padding: 0.42rem 1rem;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.2s,
      color 0.2s,
      border-color 0.2s;

    &:hover {
      background: #1cb56d;
      color: #151a24;
      border-color: #1cb56d;
    }
  }

  /* ── List Mode ── */
  .list-mode {
    .gc {
      flex-direction: row;
      border-radius: 16px;
    }

    .gc-img {
      flex: 0 0 260px;

      img {
        width: 100%;
        height: 100%;
        min-height: 200px;
      }
    }

    .gc-body {
      padding: 1.4rem 1.5rem;
      gap: 0.5rem;
      flex: 1;
    }

    .gc-desc {
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }

    .gc-title {
      font-size: 1.18rem;
    }

    .gc-foot {
      flex: 0 0 160px;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 0.7rem;
      border-top: none;
      border-left: 1px solid rgba(28, 181, 109, 0.1);
      padding: 1.6rem 1.4rem;
      margin-top: 0;
    }

    .gc-price {
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
      text-align: center;

      span {
        display: block;
      }
      strong {
        font-size: 1.75rem;
        line-height: 1;
      }
    }

    .gc-btn {
      width: 100%;
      text-align: center;
      justify-content: center;
    }
    .gc-btn-book {
      display: block;
    }
  }

  .gc-btn-book {
    background: #1cb56d;
    color: #151a24;
    border: none;
    border-radius: 7px;
    padding: 0.55rem 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition:
      background 0.2s,
      transform 0.15s;
    display: none;
    width: 100%;
    text-align: center;

    &:hover {
      background: #4fd18f;
      transform: translateY(-1px);
    }
  }

  /* ── Active Filter Chips ── */
  .active-filters {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
  }

  .af-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(28, 181, 109, 0.1);
    border: 1px solid rgba(28, 181, 109, 0.22);
    color: #9be7bf;
    border-radius: 999px;
    padding: 0.28rem 0.75rem 0.28rem 0.85rem;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    font-family: "Jost", sans-serif;

    button {
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(28, 181, 109, 0.55);
      padding: 0;
      display: flex;
      align-items: center;
      transition: color 0.15s;
      font-size: 0.85rem;
      line-height: 1;

      &:hover {
        color: #4fd18f;
      }
    }
  }
}

/* ════════════════════════════════════════
   customize-tour.html
   ════════════════════════════════════════ */
#page-customize-tour {
  /* Hero */
  .itnb-hero {
    padding: 5rem 1.5rem 3rem;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;

    .eyebrow {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #4fd18f;
      margin-bottom: 1rem;
    }
    h1 {
      font-family: "Playfair Display", serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      line-height: 1.15;
      margin-bottom: 1rem;
    }
    h1 em {
      color: #4fd18f;
      font-style: italic;
    }
    p {
      font-size: 0.92rem;
      color: rgba(247, 242, 234, 0.6);
      line-height: 1.7;
      max-width: 520px;
      margin: 0 auto;
    }
  }

  /* Layout */
  .itnb-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
    align-items: start;
  }

  /* Picker — left */
  .itnb-section {
    margin-bottom: 2.2rem;
  }

  .itnb-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    &::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 1.5px;
      background: #1cb56d;
    }
  }

  /* Day buttons */
  .day-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .day-btn {
    padding: 0.45rem 1.05rem;
    border-radius: 8px;
    background: transparent;
    border: 1.5px solid rgba(247, 242, 234, 0.12);
    color: rgba(247, 242, 234, 0.45);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s;
    &:hover {
      border-color: rgba(247, 242, 234, 0.3);
      color: rgba(247, 242, 234, 0.8);
    }
    &.on {
      background: rgba(28, 181, 109, 0.13);
      border-color: #1cb56d;
      color: #4fd18f;
    }
  }

  /* Filter tabs */
  .itnb-filters {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
  }
  .itnb-ftab {
    padding: 0.38rem 0.9rem;
    border-radius: 20px;
    background: transparent;
    border: 1.5px solid rgba(247, 242, 234, 0.1);
    color: rgba(247, 242, 234, 0.4);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    &:hover {
      border-color: rgba(247, 242, 234, 0.25);
      color: rgba(247, 242, 234, 0.7);
    }
    &.on {
      background: rgba(247, 242, 234, 0.08);
      border-color: rgba(247, 242, 234, 0.3);
      color: rgba(247, 242, 234, 0.9);
    }
  }

  /* Activities grid */
  .itnb-acts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  .itnb-act {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(247, 242, 234, 0.08);
    background: rgba(247, 242, 234, 0.03);
    cursor: pointer;
    transition:
      border-color 0.15s,
      background 0.15s;
    position: relative;
    &:hover {
      border-color: rgba(247, 242, 234, 0.2);
      background: rgba(247, 242, 234, 0.06);
    }
    &.added {
      border-color: rgba(28, 181, 109, 0.5);
      background: rgba(28, 181, 109, 0.06);
    }
    &.added .itnb-act-check {
      background: #1cb56d;
      border-color: #1cb56d;
    }
    &.added .itnb-act-check svg {
      opacity: 1;
    }
    .itnb-act-img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      display: block;
    }
    .itnb-act-check {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(15, 20, 30, 0.7);
      border: 1.5px solid rgba(247, 242, 234, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      svg {
        opacity: 0;
        transition: opacity 0.15s;
      }
    }
    .itnb-act-body {
      padding: 0.6rem 0.65rem 0.7rem;
    }
    .itnb-act-cat {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #4fd18f;
      margin-bottom: 0.25rem;
    }
    .itnb-act-name {
      font-size: 0.78rem;
      font-weight: 600;
      color: rgba(247, 242, 234, 0.9);
      line-height: 1.3;
      margin-bottom: 0.25rem;
    }
    .itnb-act-dur {
      font-size: 0.65rem;
      color: rgba(247, 242, 234, 0.35);
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
    .itnb-act-price {
      font-size: 0.65rem;
      font-weight: 700;
      color: #4fd18f;
      margin-top: 0.18rem;
    }
  }
  .itnb-item-price {
    font-size: 0.6rem;
    font-weight: 700;
    color: #4fd18f;
    margin-left: 0.35rem;
  }

  /* Panel — right */
  .itnb-panel {
    position: sticky;
    top: 90px;
    border: 1.5px solid rgba(247, 242, 234, 0.1);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(247, 242, 234, 0.02);
  }
  .itnb-panel-head {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(247, 242, 234, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .itnb-panel-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.7);
  }
  .itnb-count-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(28, 181, 109, 0.15);
    border: 1px solid rgba(28, 181, 109, 0.3);
    color: #4fd18f;
    border-radius: 20px;
    padding: 0.18rem 0.6rem;
  }
  .itnb-panel-days {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(247, 242, 234, 0.06);
    flex-wrap: wrap;
  }
  .itnb-pday-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.28);
    margin-right: 0.2rem;
    white-space: nowrap;
  }
  .itnb-pday-tab {
    padding: 0.28rem 0.7rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(247, 242, 234, 0.1);
    color: rgba(247, 242, 234, 0.38);
    font-family: inherit;
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
    &:hover {
      border-color: rgba(247, 242, 234, 0.22);
      color: rgba(247, 242, 234, 0.65);
    }
    &.on {
      background: rgba(28, 181, 109, 0.12);
      border-color: rgba(28, 181, 109, 0.4);
      color: #4fd18f;
    }
  }
  .itnb-panel-body {
    padding: 0.6rem 0.9rem;
    min-height: 160px;
  }
  .itnb-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(247, 242, 234, 0.25);
    font-size: 0.78rem;
    line-height: 1.6;
    svg {
      display: block;
      margin: 0 auto 0.6rem;
      opacity: 0.3;
    }
  }

  /* Day groups */
  .itnb-day-group {
    margin-bottom: 0.9rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .itnb-day-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.1rem;
    border-bottom: 1px solid rgba(247, 242, 234, 0.07);
    margin-bottom: 0.45rem;
  }
  .itnb-day-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #4fd18f;
  }
  .itnb-day-group-count {
    font-size: 0.62rem;
    color: rgba(247, 242, 234, 0.28);
  }
  .itnb-day-clear {
    background: none;
    border: none;
    color: rgba(247, 242, 234, 0.22);
    cursor: pointer;
    padding: 0.15rem 0.2rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.12s;
    margin-left: 0.4rem;
    &:hover {
      color: rgba(247, 100, 80, 0.75);
    }
  }
  .itnb-empty-day {
    font-size: 0.72rem;
    color: rgba(247, 242, 234, 0.2);
    padding: 0.3rem 0.1rem 0.4rem;
    font-style: italic;
  }

  /* Items */
  .itnb-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.5rem;
    border-radius: 8px;
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(247, 242, 234, 0.07);
    margin-bottom: 0.45rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .itnb-item-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .itnb-item-prov {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(28, 181, 109, 0.12);
    border: 1px solid rgba(28, 181, 109, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4fd18f;
  }
  .itnb-item-info {
    flex: 1;
    min-width: 0;
  }
  .itnb-item-name {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(247, 242, 234, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .itnb-item-dur {
    font-size: 0.62rem;
    color: rgba(247, 242, 234, 0.32);
  }
  .itnb-item-rm {
    background: none;
    border: none;
    color: rgba(247, 242, 234, 0.25);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.12s;
    flex-shrink: 0;
    &:hover {
      color: rgba(247, 100, 80, 0.8);
    }
  }

  /* Panel footer & editor */
  .itnb-panel-foot {
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(247, 242, 234, 0.07);
  }
  .itnb-editor {
    border: 1.5px solid rgba(247, 242, 234, 0.1);
    border-radius: 9px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
    &:focus-within {
      border-color: rgba(28, 181, 109, 0.42);
    }
    .itnb-editor-toolbar {
      display: flex;
      align-items: center;
      gap: 0.1rem;
      padding: 0.38rem 0.5rem;
      background: rgba(247, 242, 234, 0.04);
      border-bottom: 1px solid rgba(247, 242, 234, 0.07);
      flex-wrap: wrap;
    }
    .itnb-tb-btn {
      background: none;
      border: none;
      color: rgba(247, 242, 234, 0.45);
      cursor: pointer;
      padding: 0.22rem 0.42rem;
      border-radius: 4px;
      font-family: inherit;
      font-size: 0.73rem;
      line-height: 1;
      transition:
        background 0.12s,
        color 0.12s;
      min-width: 24px;
      text-align: center;
      &:hover {
        background: rgba(247, 242, 234, 0.1);
        color: rgba(247, 242, 234, 0.9);
      }
    }
    .itnb-tb-sep {
      width: 1px;
      height: 13px;
      background: rgba(247, 242, 234, 0.1);
      margin: 0 0.25rem;
      flex-shrink: 0;
    }
    .itnb-editor-body {
      min-height: 72px;
      padding: 0.6rem 0.75rem;
      color: rgba(247, 242, 234, 0.8);
      font-family: inherit;
      font-size: 0.76rem;
      line-height: 1.6;
      outline: none;
      &:empty::before {
        content: attr(data-placeholder);
        color: rgba(247, 242, 234, 0.22);
        pointer-events: none;
        display: block;
      }
      ul,
      ol {
        padding-left: 1.3rem;
        margin: 0.2rem 0;
      }
      b,
      strong {
        color: rgba(247, 242, 234, 0.95);
      }
      a {
        color: #4fd18f;
      }
    }
    .itnb-resize-handle {
      height: 9px;
      background: rgba(247, 242, 234, 0.02);
      border-top: 1px solid rgba(247, 242, 234, 0.07);
      cursor: ns-resize;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        content: "";
        display: block;
        width: 28px;
        height: 2.5px;
        border-radius: 2px;
        background: rgba(247, 242, 234, 0.14);
        transition: background 0.15s;
      }
      &:hover::after {
        background: rgba(247, 242, 234, 0.38);
      }
    }
  }
  .itnb-summary {
    font-size: 0.72rem;
    color: rgba(247, 242, 234, 0.35);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    span {
      color: #4fd18f;
      font-weight: 600;
    }
  }
  .itnb-cta-row {
    display: flex;
    gap: 0.5rem;
  }
  .itnb-btn-send {
    flex: 1;
    padding: 0.65rem 0.8rem;
    border-radius: 9px;
    background: #1cb56d;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s;
    &:hover {
      background: #18a460;
    }
  }
  .itnb-btn-reset {
    padding: 0.65rem 0.8rem;
    border-radius: 9px;
    background: transparent;
    border: 1.5px solid rgba(247, 242, 234, 0.12);
    color: rgba(247, 242, 234, 0.4);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    &:hover {
      border-color: rgba(247, 100, 80, 0.4);
      color: rgba(247, 100, 80, 0.7);
    }
  }

  /* Province explorer */
  .itnb-prov-hint {
    font-size: 0.72rem;
    color: rgba(247, 242, 234, 0.3);
    margin-bottom: 0.9rem;
    line-height: 1.5;
  }
  .itnb-prov-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 1rem;
  }
  .prov-card {
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1.5px solid rgba(247, 242, 234, 0.08);
    background: rgba(247, 242, 234, 0.03);
    cursor: pointer;
    transition:
      border-color 0.15s,
      background 0.15s;
    position: relative;
    &:hover {
      border-color: rgba(247, 242, 234, 0.22);
      background: rgba(247, 242, 234, 0.07);
    }
    &.selected {
      border-color: #1cb56d;
      background: rgba(28, 181, 109, 0.07);
    }
    &.selected .prov-card-added {
      display: block;
    }
    .prov-card-name {
      font-size: 0.75rem;
      font-weight: 600;
      color: rgba(247, 242, 234, 0.85);
      margin-bottom: 0.18rem;
    }
    .prov-card-region {
      font-size: 0.6rem;
      letter-spacing: 0.05em;
      color: rgba(247, 242, 234, 0.3);
      text-transform: uppercase;
    }
    .prov-card-added {
      position: absolute;
      top: 5px;
      right: 6px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #1cb56d;
      display: none;
    }
  }

  /* Places timeline */
  .prov-places-wrap {
    border: 1.5px solid rgba(247, 242, 234, 0.08);
    border-radius: 12px;
    margin-top: 0.6rem;
    overflow: hidden;
  }
  .prov-places-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem 0.5rem;
    border-bottom: 1px solid rgba(247, 242, 234, 0.07);
  }
  .prov-places-pname {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(247, 242, 234, 0.88);
  }
  .prov-places-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.28);
  }
  .prov-places-timeline {
    padding: 0.5rem 0.9rem 0.7rem;
    position: relative;
  }
  .prov-place-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0;
    position: relative;
    &:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 7px;
      top: 22px;
      bottom: -10px;
      width: 1.5px;
      background: rgba(247, 242, 234, 0.08);
    }
    &.added .prov-place-dot {
      background: #1cb56d;
      border-color: #1cb56d;
    }
    &.added .prov-place-add {
      border-color: rgba(28, 181, 109, 0.5);
      background: rgba(28, 181, 109, 0.12);
      color: #4fd18f;
    }
    &.added .prov-place-name {
      color: rgba(247, 242, 234, 0.95);
    }
  }
  .prov-place-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(247, 242, 234, 0.18);
    background: rgba(247, 242, 234, 0.05);
    flex-shrink: 0;
    margin-top: 3px;
    transition: all 0.18s;
  }
  .prov-place-info {
    flex: 1;
    min-width: 0;
  }
  .prov-place-name {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(247, 242, 234, 0.82);
    margin-bottom: 0.18rem;
    line-height: 1.3;
  }
  .prov-place-desc {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.35);
    line-height: 1.4;
  }
  .prov-place-add {
    flex-shrink: 0;
    padding: 0.26rem 0.65rem;
    border-radius: 6px;
    border: 1.5px solid rgba(247, 242, 234, 0.14);
    background: transparent;
    color: rgba(247, 242, 234, 0.45);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    &:hover {
      border-color: rgba(28, 181, 109, 0.45);
      color: #4fd18f;
      background: rgba(28, 181, 109, 0.07);
    }
  }
  .prov-place-time {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(247, 242, 234, 0.38);
    background: rgba(247, 242, 234, 0.06);
    border-radius: 4px;
    padding: 0.1rem 0.42rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    white-space: nowrap;
    &.matin {
      color: #f9c74f;
      background: rgba(249, 199, 79, 0.08);
    }
    &.soir {
      color: #a78bfa;
      background: rgba(167, 139, 250, 0.08);
    }
    &.journee {
      color: #4fd18f;
      background: rgba(28, 181, 109, 0.08);
    }
    &.aprem {
      color: #f4845f;
      background: rgba(244, 132, 95, 0.08);
    }
  }
  .prov-place-pin {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid rgba(247, 242, 234, 0.1);
    background: transparent;
    color: rgba(247, 242, 234, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-right: 0.25rem;
    &:hover {
      border-color: rgba(66, 153, 225, 0.5);
      color: #63b3ed;
      background: rgba(66, 153, 225, 0.08);
    }
  }
  .prov-place-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.2rem;
  }

  /* Map modal */
  .map-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .map-modal-panel {
    background: #0f141e;
    border: 1.5px solid rgba(247, 242, 234, 0.12);
    border-radius: 16px;
    overflow: hidden;
    width: min(580px, 94vw);
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px #000c;
    animation: modalIn 0.18s ease;
  }
  @keyframes modalIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .map-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(247, 242, 234, 0.08);
    flex-shrink: 0;
  }
  .map-modal-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(247, 242, 234, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    svg {
      color: #63b3ed;
      flex-shrink: 0;
    }
  }
  .map-modal-close {
    background: none;
    border: none;
    color: rgba(247, 242, 234, 0.35);
    cursor: pointer;
    padding: 0.28rem;
    border-radius: 6px;
    line-height: 0;
    transition: color 0.12s;
    &:hover {
      color: rgba(247, 242, 234, 0.9);
    }
  }
  .map-modal-frame {
    width: 100%;
    height: 360px;
    border: none;
    display: block;
    filter: invert(92%) hue-rotate(180deg) brightness(0.85) saturate(0.85);
  }
  .map-modal-sub {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.38);
    margin-top: 0.15rem;
  }
  .map-modal-foot {
    padding: 0.55rem 1rem;
    border-top: 1px solid rgba(247, 242, 234, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .map-modal-foot-note {
    font-size: 0.6rem;
    color: rgba(247, 242, 234, 0.25);
  }
  .map-modal-gmaps {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border-radius: 7px;
    background: #1a73e8;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    &:hover {
      background: #1557b0;
    }
  }
}

/* ════════════════════════════════════════
   les-circuit-detail.html
   ════════════════════════════════════════ */
#page-les-circuit-detail {
  /* Group type picker */
  .group-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-top: 0.5rem;
  }
  .gtype-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    padding: 0.65rem 0.3rem 0.6rem;
    background: rgba(247, 242, 234, 0.04);
    border: 1.5px solid rgba(247, 242, 234, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition:
      background 0.15s,
      border-color 0.15s;
    color: var(--parchment, #f7f2ea);
    font-family: inherit;
    text-align: center;
    &:hover {
      background: rgba(247, 242, 234, 0.09);
      border-color: rgba(247, 242, 234, 0.22);
    }
    &.on {
      background: rgba(28, 181, 109, 0.13);
      border-color: #1cb56d;
    }
  }
  .gtype-icon {
    font-size: 1.35rem;
    line-height: 1;
  }
  .gtype-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.78);
    line-height: 1.2;
  }
  .gtype-price {
    font-size: 0.66rem;
    color: #4fd18f;
    font-weight: 500;
  }

  /* Count wrap */
  .group-count-wrap {
    display: none;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    background: rgba(247, 242, 234, 0.05);
    border: 1px solid rgba(247, 242, 234, 0.1);
    border-radius: 9px;
    padding: 0.6rem 1rem;
    &.show {
      display: flex;
    }
  }
  .group-count-label {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.55);
  }
  .group-count-hint {
    font-size: 0.65rem;
    color: rgba(247, 242, 234, 0.28);
    display: block;
    margin-top: 0.1rem;
  }
  .group-count-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  /* Price summary */
  .group-price-summary {
    display: none;
    margin-top: 0.75rem;
    background: rgba(28, 181, 109, 0.07);
    border: 1px solid rgba(28, 181, 109, 0.18);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    &.show {
      display: block;
    }
  }
  .gps-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: rgba(247, 242, 234, 0.6);
    padding: 0.18rem 0;
  }
  .gps-total {
    margin-top: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(28, 181, 109, 0.18);
    font-weight: 700;
    font-size: 0.96rem;
    color: #f7f2ea;
    span:last-child {
      color: #4fd18f;
      font-size: 1.08rem;
    }
  }

  /* Date range */
  .date-range-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    width: 100%;
    box-sizing: border-box;
  }
  .date-field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    input[type="date"] {
      width: 100%;
      min-width: 0;
      background: rgba(247, 242, 234, 0.05);
      border: 1.5px solid rgba(247, 242, 234, 0.12);
      border-radius: 8px;
      padding: 0.6rem 0.4rem;
      font-family: inherit;
      font-size: 0.78rem;
      color: #f7f2ea;
      cursor: pointer;
      box-sizing: border-box;
      &:focus {
        outline: none;
        border-color: rgba(28, 181, 109, 0.5);
      }
      &::-webkit-calendar-picker-indicator {
        filter: invert(0.6);
        flex-shrink: 0;
      }
    }
  }
  .date-field-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.38);
    font-weight: 500;
  }
  .date-range-arrow {
    color: rgba(247, 242, 234, 0.3);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1.1rem;
  }
  .date-duration {
    display: none;
    margin-top: 0.6rem;
    background: rgba(226, 193, 107, 0.08);
    border: 1px solid rgba(226, 193, 107, 0.22);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    color: #e2c16b;
    font-weight: 600;
    text-align: center;
    &.show {
      display: block;
    }
  }

  /* Transport select */
  .transport-wrap {
    margin-top: 0.5rem;
    position: relative;
  }
  .transport-select {
    width: 100%;
    background: rgba(247, 242, 234, 0.05);
    border: 1.5px solid rgba(247, 242, 234, 0.12);
    border-radius: 9px;
    padding: 0.72rem 2.4rem 0.72rem 0.9rem;
    font-family: inherit;
    font-size: 0.84rem;
    color: #f7f2ea;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(247,242,234,.45)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    &:focus {
      outline: none;
      border-color: rgba(28, 181, 109, 0.5);
    }
    option {
      background: #151a24;
      color: #f7f2ea;
    }
  }
  .transport-suggest {
    font-size: 0.68rem;
    color: #4fd18f;
    margin-top: 0.35rem;
    min-height: 1.1em;
    letter-spacing: 0.02em;
  }

  /* Add-on items */
  .addon-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.72rem;
    background: rgba(247, 242, 234, 0.04);
    border: 1px solid rgba(247, 242, 234, 0.1);
    border-radius: 8px;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
  }
  .addon-item-name {
    flex: 1;
    color: #f7f2ea;
  }
  .addon-item-price {
    color: #4fd18f;
    font-weight: 600;
    white-space: nowrap;
  }
  .addon-remove-btn {
    background: none;
    border: none;
    color: rgba(247, 242, 234, 0.28);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
    flex-shrink: 0;
    &:hover {
      color: rgba(247, 100, 80, 0.75);
    }
  }
  .addon-empty {
    font-size: 0.78rem;
    color: rgba(247, 242, 234, 0.28);
    margin: 0.3rem 0 0.5rem;
    display: block;
  }
  .addon-browse {
    display: block;
    font-size: 0.71rem;
    color: rgba(247, 242, 234, 0.28);
    text-decoration: none;
    margin-top: 0.45rem;
    letter-spacing: 0.04em;
    transition: color 0.15s;
    &:hover {
      color: #4fd18f;
    }
  }

  /* Activity add-on section */
  .sec-addon-acts {
    padding: 3.5rem 0 4rem;
    border-top: 1px solid rgba(247, 242, 234, 0.07);
  }
  .addon-acts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 1.2rem;
  }
  .addon-card {
    background: rgba(247, 242, 234, 0.04);
    border: 1.5px solid rgba(247, 242, 234, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition:
      border-color 0.15s,
      background 0.15s;
    &:hover {
      border-color: rgba(247, 242, 234, 0.18);
    }
    &.added {
      border-color: rgba(28, 181, 109, 0.45);
      background: rgba(28, 181, 109, 0.05);
    }
    &:hover .addon-card-img img {
      transform: scale(1.06);
    }
    &.added .act-check {
      background: #1cb56d;
      border-color: #1cb56d;
    }
    &.added .act-check .ck-plus {
      display: none;
    }
    &.added .act-check .ck-tick {
      display: block;
    }
  }
  .addon-card-img {
    position: relative;
    height: 120px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s;
    }
  }
  .addon-card-body {
    padding: 0.65rem 0.85rem 0.8rem;
  }
  .addon-card-name {
    font-size: 0.79rem;
    font-weight: 600;
    color: #f7f2ea;
    margin: 0 0 0.18rem;
    line-height: 1.35;
  }
  .addon-card-price {
    font-size: 0.68rem;
    color: #4fd18f;
    margin: 0;
  }

  /* Circle checkbox */
  .act-check {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 4;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(15, 20, 30, 0.72);
    border: 2px solid rgba(247, 242, 234, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      background 0.18s,
      border-color 0.18s,
      transform 0.12s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
    &:hover {
      border-color: #4fd18f;
      background: rgba(28, 181, 109, 0.28);
      transform: scale(1.1);
    }
    .ck-plus {
      display: block;
    }
    .ck-tick {
      display: none;
    }
  }

  /* Day-accordion itinerary */
  .itin-day-tabs {
    display: none;
  }
  .itin-day-panel {
    display: block;
    border: 1.5px solid rgba(247, 242, 234, 0.08);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    &:last-child {
      margin-bottom: 0;
    }
    &.closed .itin-day-chevron {
      transform: rotate(-90deg);
    }
    &.closed .itin-day-body {
      display: none;
    }
  }
  .itin-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    user-select: none;
    background: rgba(247, 242, 234, 0.03);
    transition: background 0.15s;
    &:hover {
      background: rgba(247, 242, 234, 0.07);
    }
  }
  .itin-day-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4fd18f;
    background: rgba(28, 181, 109, 0.1);
    border: 1.5px solid rgba(28, 181, 109, 0.28);
    border-radius: 7px;
    padding: 0.3rem 0.85rem;
  }
  .itin-day-chevron {
    font-size: 0.75rem;
    color: rgba(247, 242, 234, 0.35);
    transition: transform 0.22s;
    line-height: 1;
  }
  .itin-day-body {
    padding: 1.2rem 1rem;
  }

  .itin-period {
    margin-bottom: 1.8rem;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .itin-period-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(247, 242, 234, 0.08);
  }
  .itin-period-icon {
    line-height: 0;
    color: rgba(247, 242, 234, 0.38);
  }
  .itin-period-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.42);
  }
  .itin-period .itinerary {
    margin-top: 0;
  }
}

/* ════════════════════════════════════════
   Theme switch — dark / light
   ════════════════════════════════════════ */

/* Light mode variable overrides */
html[data-theme="light"] {
  --ink: #f5f0e8;
  --ink2: #ede6d8;
  --parchment: #1a1e2e;
  --parchment2: #2a2e40;
  --color-footer-bg: #e0d9cc;
  --color-footer-link: rgba(26, 30, 46, 0.42);
  --color-footer-link-hover: var(--color-accent);
  --color-footer-desc: rgba(26, 30, 46, 0.45);
  --color-footer-bot: rgba(26, 30, 46, 0.18);
}

/* Nav overrides (hardcoded colours) */
html[data-theme="light"] nav.solid {
  background: rgba(245, 240, 232, 0.96);
  border-bottom-color: rgba(28, 181, 109, 0.18);
}
html[data-theme="light"] .dropdown-menu {
  background: rgba(248, 244, 237, 0.98);
  border-color: rgba(28, 181, 109, 0.18);
  box-shadow: 0 8px 24px rgba(26, 30, 46, 0.1);
}
html[data-theme="light"] .nav-links a {
  color: rgba(26, 30, 46, 0.55);
}
html[data-theme="light"] .nav-cta {
  color: rgba(26, 30, 46, 0.75);
  border-color: rgba(26, 30, 46, 0.3);
}
html[data-theme="light"] .nav-cta:hover {
  background: #1a1e2e;
  color: #f5f0e8;
  border-color: #1a1e2e;
}
html[data-theme="light"] .nav-links a:hover {
  color: var(--gold);
}
html[data-theme="light"] .nav-links a.active { color: var(--gold); }
html[data-theme="light"] .dropdown-menu a {
  color: rgba(26, 30, 46, 0.82);
}
html[data-theme="light"] .dropdown-menu a:hover {
  background: rgba(28, 181, 109, 0.1);
}
html[data-theme="light"] .burger span {
  background: var(--parchment);
}

/* Theme toggle button */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(247, 242, 234, 0.22);
  color: rgba(247, 242, 234, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.3s,
    color 0.3s,
    background 0.3s;
  flex-shrink: 0;
  margin-left: 0.25rem;
  padding: 0;
  line-height: 0;
}
.theme-toggle:hover {
  border-color: var(--gold2);
  color: var(--gold2);
  background: rgba(28, 181, 109, 0.08);
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(26, 30, 46, 0.22);
  color: rgba(26, 30, 46, 0.55);
}
html[data-theme="light"] .theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(28, 181, 109, 0.08);
}
html[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}
html[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

/* ════════════════════════════════════════
   Light mode — text readability overrides
   ════════════════════════════════════════ */

/* ── Global: social icon default text (footer) ── */
html[data-theme="light"] .social-icon {
  color: rgba(26, 30, 46, 0.42);
}

/* ── Shared detail pages: info strip ── */
html[data-theme="light"] #page-activities-detail .istrip-label,
html[data-theme="light"] #page-les-circuit-detail .istrip-label {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-activities-detail .istrip-val,
html[data-theme="light"] #page-les-circuit-detail .istrip-val {
  color: #1a1e2e;
}
html[data-theme="light"] #page-les-circuit-detail .loc-tag {
  color: #1a1e2e;
  background: rgba(28, 181, 109, 0.10);
  border-color: rgba(28, 181, 109, 0.30);
}

/* ── Shared detail pages: hero rating ── */
html[data-theme="light"] #page-activities-detail .hero-rating,
html[data-theme="light"] #page-les-circuit-detail .hero-rating {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-activities-detail .hero-rating strong,
html[data-theme="light"] #page-les-circuit-detail .hero-rating strong {
  color: #1a1e2e;
}

/* ── Shared detail pages: overview & highlights ── */
html[data-theme="light"] #page-activities-detail .overview-text p,
html[data-theme="light"] #page-les-circuit-detail .overview-text p {
  color: rgba(26, 30, 46, 0.62);
}
html[data-theme="light"] #page-activities-detail .highlights-list li,
html[data-theme="light"] #page-les-circuit-detail .highlights-list li {
  color: rgba(26, 30, 46, 0.65);
}

/* ── Shared detail pages: itinerary steps ── */
html[data-theme="light"] #page-activities-detail .itin-title,
html[data-theme="light"] #page-les-circuit-detail .itin-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .itin-desc,
html[data-theme="light"] #page-les-circuit-detail .itin-desc {
  color: rgba(26, 30, 46, 0.5);
}

/* ── Shared detail pages: incl/excl list ── */
html[data-theme="light"] #page-activities-detail .incl-list li,
html[data-theme="light"] #page-les-circuit-detail .incl-list li {
  color: rgba(26, 30, 46, 0.58);
}

/* ── Shared detail pages: meet card ── */
html[data-theme="light"] #page-activities-detail .meet-body h4,
html[data-theme="light"] #page-les-circuit-detail .meet-body h4 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .meet-body p,
html[data-theme="light"] #page-les-circuit-detail .meet-body p {
  color: rgba(26, 30, 46, 0.52);
}

/* ── Shared detail pages: review cards ── */
html[data-theme="light"] #page-activities-detail .reviewer-avatar,
html[data-theme="light"] #page-les-circuit-detail .reviewer-avatar {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.1);
  border-color: rgba(26, 30, 46, 0.2);
}
html[data-theme="light"] #page-activities-detail .reviewer-info h5,
html[data-theme="light"] #page-les-circuit-detail .reviewer-info h5 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .reviewer-info span,
html[data-theme="light"] #page-les-circuit-detail .reviewer-info span {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-activities-detail .review-text,
html[data-theme="light"] #page-les-circuit-detail .review-text {
  color: rgba(26, 30, 46, 0.55);
}

/* ── Shared detail pages: facts card ── */
html[data-theme="light"] #page-activities-detail .fact-key,
html[data-theme="light"] #page-les-circuit-detail .fact-key {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-activities-detail .fact-val,
html[data-theme="light"] #page-les-circuit-detail .fact-val {
  color: #1a1e2e;
}

/* ── Shared detail pages: guide card ── */
html[data-theme="light"] #page-activities-detail .guide-body h4,
html[data-theme="light"] #page-les-circuit-detail .guide-body h4 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .guide-body p,
html[data-theme="light"] #page-les-circuit-detail .guide-body p {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-activities-detail .guide-card,
html[data-theme="light"] #page-les-circuit-detail .guide-card {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}
html[data-theme="light"] #page-activities-detail .guide-info h5,
html[data-theme="light"] #page-les-circuit-detail .guide-info h5 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .guide-info span,
html[data-theme="light"] #page-les-circuit-detail .guide-info span {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-activities-detail .guide-rating,
html[data-theme="light"] #page-les-circuit-detail .guide-rating {
  color: rgba(26, 30, 46, 0.55);
}

/* ── Shared detail pages: booking card ── */
html[data-theme="light"] #page-activities-detail .book-price-from,
html[data-theme="light"] #page-les-circuit-detail .book-price-from,
html[data-theme="light"] #page-activities-detail .book-price-per,
html[data-theme="light"] #page-les-circuit-detail .book-price-per {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-activities-detail .book-rating-row,
html[data-theme="light"] #page-les-circuit-detail .book-rating-row {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-activities-detail .book-rating-row strong,
html[data-theme="light"] #page-les-circuit-detail .book-rating-row strong {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .bform-group label,
html[data-theme="light"] #page-les-circuit-detail .bform-group label {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-activities-detail .bform-group input,
html[data-theme="light"] #page-les-circuit-detail .bform-group input,
html[data-theme="light"] #page-activities-detail .bform-group select,
html[data-theme="light"] #page-les-circuit-detail .bform-group select {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.05);
}
html[data-theme="light"]
  #page-activities-detail
  .bform-group
  input::placeholder,
html[data-theme="light"]
  #page-les-circuit-detail
  .bform-group
  input::placeholder {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-activities-detail .guest-type,
html[data-theme="light"] #page-les-circuit-detail .guest-type {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .guest-age-hint,
html[data-theme="light"] #page-les-circuit-detail .guest-age-hint {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-activities-detail .gs-count,
html[data-theme="light"] #page-les-circuit-detail .gs-count {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .gs-btn,
html[data-theme="light"] #page-les-circuit-detail .gs-btn {
  color: rgba(26, 30, 46, 0.7);
  border-color: rgba(26, 30, 46, 0.25);
}
html[data-theme="light"] #page-activities-detail .gs-btn:hover,
html[data-theme="light"] #page-les-circuit-detail .gs-btn:hover {
  background: rgba(26, 30, 46, 0.08);
  border-color: rgba(26, 30, 46, 0.4);
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .book-note,
html[data-theme="light"] #page-les-circuit-detail .book-note {
  color: rgba(26, 30, 46, 0.35);
}

/* ── Shared detail pages: related cards ── */
html[data-theme="light"] #page-activities-detail .rel-body h3,
html[data-theme="light"] #page-les-circuit-detail .rel-body h3 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities-detail .rel-body p,
html[data-theme="light"] #page-les-circuit-detail .rel-body p {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-activities-detail .rel-link,
html[data-theme="light"] #page-les-circuit-detail .rel-link {
  color: rgba(26, 30, 46, 0.42);
}

/* ── Les-circuit-detail: booking form specifics ── */
html[data-theme="light"] #page-les-circuit-detail .gtype-label {
  color: rgba(26, 30, 46, 0.78);
}
html[data-theme="light"] #page-les-circuit-detail .group-count-label {
  color: rgba(26, 30, 46, 0.58);
}
html[data-theme="light"] #page-les-circuit-detail .group-count-hint {
  color: rgba(26, 30, 46, 0.32);
}
html[data-theme="light"] #page-les-circuit-detail .gps-row {
  color: rgba(26, 30, 46, 0.62);
}
html[data-theme="light"] #page-les-circuit-detail .gps-total {
  color: #1a1e2e;
}
html[data-theme="light"]
  #page-les-circuit-detail
  .date-field
  input[type="date"] {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.05);
}
html[data-theme="light"] #page-les-circuit-detail .transport-select {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.05);
}
html[data-theme="light"] #page-les-circuit-detail .addon-item-name {
  color: #1a1e2e;
}
html[data-theme="light"] #page-les-circuit-detail .addon-empty {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-les-circuit-detail .addon-browse {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-les-circuit-detail .addon-card-name {
  color: #1a1e2e;
}
html[data-theme="light"] #page-les-circuit-detail .itin-period-label {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-les-circuit-detail .itin-day-chevron {
  color: rgba(26, 30, 46, 0.4);
}

/* ── Home page body-level text ── */
html[data-theme="light"] #page-home .sp {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-home .alist li {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-home .tab {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-home .stat-l {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-home .bt {
  color: rgba(26, 30, 46, 0.45);
}

/* ── Home page tips section ── */
html[data-theme="light"] #page-home .tp {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-home .thl {
  color: rgba(26, 30, 46, 0.58);
  background: rgba(26, 30, 46, 0.06);
  border-left-color: var(--gold);
}

/* ── Home page weather section ── */
html[data-theme="light"] #page-home .wmn {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-home .wr {
  color: rgba(26, 30, 46, 0.38);
}

/* ── Home page map section ── */
html[data-theme="light"] #page-home .poi-n {
  color: rgba(26, 30, 46, 0.65);
}
html[data-theme="light"] #page-home .poi-d {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-home .li {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-home .map-lbl small {
  color: rgba(26, 30, 46, 0.32);
}

/* ── Home page map section ── */
/* Keep .map-vis dark so the SVG map (designed for dark bg) stays readable */
html[data-theme="light"] #page-home .map-vis {
  background: #1a1e2e;
}
/* Sidebar on light bg: darken dividers and hover state */
html[data-theme="light"] #page-home .map-side {
  border-left-color: rgba(26, 30, 46, 0.12);
}
html[data-theme="light"] #page-home .poi-item {
  border-bottom-color: rgba(26, 30, 46, 0.08);
}
html[data-theme="light"] #page-home .poi-item:hover {
  background: rgba(26, 30, 46, 0.05);
}
html[data-theme="light"] #page-home .poi-top {
  background: rgba(26, 30, 46, 0.04);
}
html[data-theme="light"] #page-home .leg {
  border-top-color: rgba(26, 30, 46, 0.1);
}

/* ── Home page newsletter section ── */
html[data-theme="light"] #page-home .nl-p {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-home .nl-inp::placeholder {
  color: rgba(26, 30, 46, 0.38);
}

/* ── Home page instagram section (on --ink2 bg = light) ── */
html[data-theme="light"] #page-home .insta-handle {
  color: #1a1e2e;
}
html[data-theme="light"] #page-home .insta-followers {
  color: rgba(26, 30, 46, 0.48);
}

/* ── Home page reviews section (on --ink2 bg = light) ── */
html[data-theme="light"] #page-home .ta-score {
  color: #1a1e2e;
}
html[data-theme="light"] #page-home .ta-count {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-home .rv-card-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-home .rv-user-name {
  color: #1a1e2e;
}
html[data-theme="light"] #page-home .rv-card {
  color: rgba(26, 30, 46, 0.58);
}
html[data-theme="light"] #page-home .rv-card-text {
  color: rgba(26, 30, 46, 0.62);
}
html[data-theme="light"] #page-home .rv-user-meta {
  color: rgba(26, 30, 46, 0.42);
}

/* ── Home page sec-activity (--parchment bg becomes dark in light mode → keep light text) ── */
html[data-theme="light"] #page-home .activity-sub {
  color: rgba(247, 242, 234, 0.6);
}
html[data-theme="light"] #page-home .adesc2 {
  color: rgba(247, 242, 234, 0.62);
}

/* ── About page body text ── */
html[data-theme="light"] #page-about .sh2-ab {
  color: #1a1e2e;
}
html[data-theme="light"] #page-about .story-body p {
  color: rgba(26, 30, 46, 0.55);
}
html[data-theme="light"] #page-about .sp-ab {
  color: rgba(26, 30, 46, 0.52);
}

/* ── Les-circuit listing page: filter sidebar & cards ── */
html[data-theme="light"] #page-les-circuit .hero-sub-tp {
  color: rgba(26, 30, 46, 0.55);
}
html[data-theme="light"] #page-les-circuit .fs-chevron {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-les-circuit .cb-label {
  color: rgba(26, 30, 46, 0.65);
}
html[data-theme="light"] #page-les-circuit .cb-count {
  color: rgba(26, 30, 46, 0.38);
}

/* ── Activities listing page ── */
html[data-theme="light"] #page-activities .hero-sub-tp {
  color: rgba(26, 30, 46, 0.55);
}

/* ── Information detail page ── */
html[data-theme="light"] #page-information-detail .overview-text p {
  color: rgba(26, 30, 46, 0.62);
}
html[data-theme="light"] #page-information-detail .highlights-list li {
  color: rgba(26, 30, 46, 0.65);
}
html[data-theme="light"] #page-information-detail .itin-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .itin-desc {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-information-detail .fact-key {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-information-detail .fact-val {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .rel-body h3 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .rel-body p {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-information-detail .rel-link {
  color: rgba(26, 30, 46, 0.42);
}

/* ── Customize tour page card/panel text ── */
html[data-theme="light"] #page-customize-tour .itnb-section-label {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-customize-tour .itnb-panel-title {
  color: rgba(26, 30, 46, 0.7);
}
html[data-theme="light"] #page-customize-tour .itnb-act-name {
  color: rgba(26, 30, 46, 0.9);
}
html[data-theme="light"] #page-customize-tour .itnb-act-dur {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-customize-tour .itnb-item-name {
  color: rgba(26, 30, 46, 0.85);
}
html[data-theme="light"] #page-customize-tour .itnb-item-dur {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-customize-tour .itnb-empty {
  color: rgba(26, 30, 46, 0.28);
}
html[data-theme="light"] #page-customize-tour .itnb-empty-day {
  color: rgba(26, 30, 46, 0.22);
}
html[data-theme="light"] #page-customize-tour .itnb-day-group-count {
  color: rgba(26, 30, 46, 0.32);
}
html[data-theme="light"] #page-customize-tour .itnb-summary {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-customize-tour .itnb-prov-hint {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-customize-tour .prov-card-name {
  color: rgba(26, 30, 46, 0.85);
}
html[data-theme="light"] #page-customize-tour .prov-card-region {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-customize-tour .prov-places-pname {
  color: rgba(26, 30, 46, 0.88);
}
html[data-theme="light"] #page-customize-tour .prov-places-label {
  color: rgba(26, 30, 46, 0.32);
}
html[data-theme="light"] #page-customize-tour .prov-place-name {
  color: rgba(26, 30, 46, 0.82);
}
html[data-theme="light"] #page-customize-tour .prov-place-desc {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-customize-tour .itnb-editor-body {
  color: rgba(26, 30, 46, 0.8);
}
html[data-theme="light"] #page-customize-tour .itnb-tb-btn {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-customize-tour .itnb-panel {
  background: rgba(26, 30, 46, 0.03);
  border-color: rgba(26, 30, 46, 0.1);
}
html[data-theme="light"] #page-customize-tour .prov-places-wrap {
  border-color: rgba(26, 30, 46, 0.1);
}
html[data-theme="light"] #page-customize-tour .itnb-item {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.08);
}
html[data-theme="light"] #page-customize-tour .prov-place-dot {
  border-color: rgba(26, 30, 46, 0.2);
  background: rgba(26, 30, 46, 0.05);
}
html[data-theme="light"] #page-customize-tour .itnb-editor {
  border-color: rgba(26, 30, 46, 0.12);
}
html[data-theme="light"] #page-customize-tour .itnb-editor-toolbar {
  background: rgba(26, 30, 46, 0.04);
  border-bottom-color: rgba(26, 30, 46, 0.08);
}
html[data-theme="light"] #page-customize-tour .itnb-btn-reset {
  border-color: rgba(26, 30, 46, 0.15);
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-customize-tour .day-btn {
  border-color: rgba(26, 30, 46, 0.15);
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-customize-tour .itnb-ftab {
  border-color: rgba(26, 30, 46, 0.12);
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-customize-tour .itnb-ftab.on {
  background: rgba(26, 30, 46, 0.08);
  border-color: rgba(26, 30, 46, 0.28);
  color: rgba(26, 30, 46, 0.9);
}
html[data-theme="light"] #page-customize-tour .itnb-act {
  border-color: rgba(26, 30, 46, 0.1);
  background: rgba(26, 30, 46, 0.03);
}
html[data-theme="light"] #page-customize-tour .itnb-act:hover {
  border-color: rgba(26, 30, 46, 0.22);
  background: rgba(26, 30, 46, 0.07);
}
html[data-theme="light"] #page-customize-tour .prov-card {
  border-color: rgba(26, 30, 46, 0.1);
  background: rgba(26, 30, 46, 0.03);
}
html[data-theme="light"] #page-customize-tour .prov-card:hover {
  border-color: rgba(26, 30, 46, 0.22);
  background: rgba(26, 30, 46, 0.07);
}
html[data-theme="light"] #page-customize-tour .prov-place-add {
  border-color: rgba(26, 30, 46, 0.18);
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-customize-tour .prov-place-pin {
  border-color: rgba(26, 30, 46, 0.18);
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-customize-tour .prov-place-pin:hover {
  border-color: rgba(66, 153, 225, 0.5);
  color: #2b6cb0;
  background: rgba(66, 153, 225, 0.1);
}
html[data-theme="light"] #page-customize-tour .itnb-pday-tab {
  border-color: rgba(26, 30, 46, 0.12);
  color: rgba(26, 30, 46, 0.4);
}

/* ════════════════════════════════════════════════════════════════════
   Light mode — text readability overrides — ROUND 2
   Fixes remaining white-on-light and uncovered elements across all pages
   ════════════════════════════════════════════════════════════════════ */

/* ── #page-about — correct story copy class (Round 1 used wrong name) ── */
html[data-theme="light"] #page-about .story-copy p {
  color: rgba(26, 30, 46, 0.58);
}

/* ── #page-about — values & team cards ── */
html[data-theme="light"] #page-about .vcard h3 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-about .vcard p {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-about .vcard {
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.12);
}
html[data-theme="light"] #page-about .tcard-ab-body h4 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-about .tcard-ab-body p {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-about .tcard-ab {
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-about — stats bar & CTA band ── */
html[data-theme="light"] #page-about .stat-ab-l {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-about .cta-band h3 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-about .cta-band p {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-about .btn-line-ab {
  color: rgba(26, 30, 46, 0.65);
  border-color: rgba(26, 30, 46, 0.28);
}
html[data-theme="light"] #page-about .btn-line-ab:hover {
  background: #1a1e2e;
  color: #f5f0e8;
  border-color: #1a1e2e;
}

/* ── #page-contact — section heading ── */
html[data-theme="light"] #page-contact .sh2-ct {
  color: #1a1e2e;
}

/* ── #page-contact — info cards ── */
html[data-theme="light"] #page-contact .info-card-body p {
  color: rgba(26, 30, 46, 0.65);
}
html[data-theme="light"] #page-contact .resp-note {
  color: rgba(26, 30, 46, 0.55);
}

/* ── #page-contact — contact form (CRITICAL: form fields invisible without this) ── */
html[data-theme="light"] #page-contact .form-panel h3 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-contact .form-panel .form-sub {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-contact .form-group label {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-contact .form-group input,
html[data-theme="light"] #page-contact .form-group select,
html[data-theme="light"] #page-contact .form-group textarea {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.18);
}
html[data-theme="light"] #page-contact .form-group input::placeholder,
html[data-theme="light"] #page-contact .form-group textarea::placeholder {
  color: rgba(26, 30, 46, 0.38);
}

/* ── #page-contact — FAQ ── */
html[data-theme="light"] #page-contact .faq-q {
  color: #1a1e2e;
}
html[data-theme="light"] #page-contact .faq-a {
  color: rgba(26, 30, 46, 0.55);
}
html[data-theme="light"] #page-contact .faq-item {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-information — section header & filter tabs ── */
html[data-theme="light"] #page-information .blog-h2 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information .blog-lead {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-information .ftab {
  color: rgba(26, 30, 46, 0.52);
}

/* ── #page-information — featured post ── */
html[data-theme="light"] #page-information .fp-meta {
  color: rgba(26, 30, 46, 0.4);
}
html[data-theme="light"] #page-information .fp-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information .fp-excerpt {
  color: rgba(26, 30, 46, 0.52);
}

/* ── #page-information — blog cards ── */
html[data-theme="light"] #page-information .bc-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information .bc-excerpt {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-information .bc-date {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-information .bc-author {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-information .blog-card {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-information-detail — article body (CRITICAL) ── */
html[data-theme="light"] #page-information-detail .art-body p {
  color: rgba(26, 30, 46, 0.65);
}
html[data-theme="light"] #page-information-detail .art-body h2 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .art-body h3 {
  color: #1a1e2e;
}

/* ── #page-information-detail — blockquote ── */
html[data-theme="light"] #page-information-detail .art-quote p {
  color: rgba(26, 30, 46, 0.72);
}
html[data-theme="light"] #page-information-detail .art-quote cite {
  color: rgba(26, 30, 46, 0.42);
}

/* ── #page-information-detail — captions, callout, tags ── */
html[data-theme="light"] #page-information-detail .art-img-caption {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-information-detail .art-callout ul li {
  color: rgba(26, 30, 46, 0.62);
}
html[data-theme="light"] #page-information-detail .month-desc {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-information-detail .art-tag {
  color: rgba(26, 30, 46, 0.5);
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.14);
}

/* ── #page-information-detail — author bio ── */
html[data-theme="light"] #page-information-detail .author-bio-text h4 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .author-bio-text p {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-information-detail .art-author-bio {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-information-detail — prev/next nav ── */
html[data-theme="light"] #page-information-detail .art-nav-dir {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-information-detail .art-nav-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .art-nav-card {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-information-detail — sidebar TOC, quick facts, share ── */
html[data-theme="light"] #page-information-detail .toc-list a {
  color: rgba(26, 30, 46, 0.48);
}
html[data-theme="light"] #page-information-detail .qf-label {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-information-detail .qf-val {
  color: rgba(26, 30, 46, 0.72);
}
html[data-theme="light"] #page-information-detail .share-btn {
  color: rgba(26, 30, 46, 0.5);
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.14);
}
html[data-theme="light"] #page-information-detail .back-link {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-information-detail .sidebar-card {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-information-detail — related articles section ── */
html[data-theme="light"] #page-information-detail .related-h2 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .rel-date {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-information-detail .rel-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-information-detail .rel-card {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-activities — section headings & filter tabs ── */
html[data-theme="light"] #page-activities .sh2-td {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities .sp-td {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-activities .ftab {
  color: rgba(26, 30, 46, 0.52);
}

/* ── #page-activities — activity cards ── */
html[data-theme="light"] #page-activities .act-name {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities .act-desc {
  color: rgba(26, 30, 46, 0.52);
}
html[data-theme="light"] #page-activities .act-meta span {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-activities .act-price small {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-activities .act-card {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}
html[data-theme="light"] #page-activities .act-btn {
  color: rgba(26, 30, 46, 0.65);
  border-color: rgba(26, 30, 46, 0.28);
}
html[data-theme="light"] #page-activities .act-btn:hover {
  background: #1a1e2e;
  color: #f5f0e8;
  border-color: #1a1e2e;
}
html[data-theme="light"] #page-activities .btn-line-td {
  color: rgba(26, 30, 46, 0.65);
  border-color: rgba(26, 30, 46, 0.28);
}
html[data-theme="light"] #page-activities .btn-line-td:hover {
  background: #1a1e2e;
  color: #f5f0e8;
  border-color: #1a1e2e;
}

/* ── #page-activities — highlights & CTA band ── */
html[data-theme="light"] #page-activities .hl-card h4 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities .hl-card p {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-activities .hl-card {
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.12);
}
html[data-theme="light"] #page-activities .cta-band h3 {
  color: #1a1e2e;
}
html[data-theme="light"] #page-activities .cta-band p {
  color: rgba(26, 30, 46, 0.52);
}

/* ── #page-les-circuit — filter sidebar form fields ── */
html[data-theme="light"] #page-les-circuit .search-input {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.18);
}
html[data-theme="light"] #page-les-circuit .search-input::placeholder {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-les-circuit .price-field label {
  color: rgba(26, 30, 46, 0.38);
}
html[data-theme="light"] #page-les-circuit .price-field input {
  color: #1a1e2e;
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.18);
}
html[data-theme="light"] #page-les-circuit .filter-select {
  color: #1a1e2e;
  background-color: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.18);
}
html[data-theme="light"] #page-les-circuit .star-row-label {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-les-circuit .clear-btn {
  color: rgba(26, 30, 46, 0.42);
  border-color: rgba(26, 30, 46, 0.15);
}
html[data-theme="light"] #page-les-circuit .fs-panel {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ── #page-les-circuit — results area & sort tabs ── */
html[data-theme="light"] #page-les-circuit .results-count {
  color: rgba(26, 30, 46, 0.45);
}
html[data-theme="light"] #page-les-circuit .results-count strong {
  color: #1a1e2e;
}
html[data-theme="light"] #page-les-circuit .sort-tab {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-les-circuit .vt-btn {
  color: rgba(26, 30, 46, 0.35);
}
html[data-theme="light"] #page-les-circuit .no-results-msg {
  color: rgba(26, 30, 46, 0.35);
}

/* ── #page-les-circuit — circuit grid cards ── */
html[data-theme="light"] #page-les-circuit .gc-title {
  color: #1a1e2e;
}
html[data-theme="light"] #page-les-circuit .gc-desc {
  color: rgba(26, 30, 46, 0.5);
}
html[data-theme="light"] #page-les-circuit .gc-meta-item {
  color: rgba(26, 30, 46, 0.42);
}
html[data-theme="light"] #page-les-circuit .gc-price span {
  color: rgba(26, 30, 46, 0.4);
}
html[data-theme="light"] #page-les-circuit .gc-chips span {
  color: rgba(26, 30, 46, 0.7);
  background: rgba(26, 30, 46, 0.08);
}
html[data-theme="light"] #page-les-circuit .gc-foot {
  border-top-color: rgba(26, 30, 46, 0.1);
}
html[data-theme="light"] #page-les-circuit .gc-btn {
  color: rgba(26, 30, 46, 0.65);
  border-color: rgba(26, 30, 46, 0.25);
}
html[data-theme="light"] #page-les-circuit .gc-btn:hover {
  background: #1a1e2e;
  color: #f5f0e8;
  border-color: #1a1e2e;
}
html[data-theme="light"] #page-les-circuit .gc {
  background: rgba(26, 30, 46, 0.04);
  border-color: rgba(26, 30, 46, 0.12);
}

/* ════════════════════════════════════════════════════════════════════
   Typography scale — description / paragraph text size boost
   Base html raised 16px → 17px; these rules further boost body copy
   ════════════════════════════════════════════════════════════════════ */

/* ── Global footer description ── */
.fdesc2 {
  font-size: 0.9rem;
}

/* ── Home page — hero & section body copy ── */
#page-home .sp {
  font-size: 1.03rem;
}
#page-home .hero-sub {
  font-size: 1.07rem;
}
#page-home .alist li {
  font-size: 0.96rem;
}
#page-home .adesc {
  font-size: 0.9rem;
}
#page-home .adesc2 {
  font-size: 0.93rem;
}
#page-home .activity-sub {
  font-size: 1.03rem;
}
#page-home .nl-p {
  font-size: 0.96rem;
}
#page-home .rv-card-text {
  font-size: 1.02rem;
}
#page-home .rv-user-meta {
  font-size: 0.87rem;
}
#page-home .thl {
  font-size: 0.84rem;
}

/* ── About page ── */
#page-about .story-copy p {
  font-size: 1.02rem;
}
#page-about .vcard p {
  font-size: 0.98rem;
}
#page-about .tcard-ab-body p {
  font-size: 0.96rem;
}
#page-about .cta-band p {
  font-size: 1rem;
}

/* ── Contact page ── */
#page-contact .info-card-body p {
  font-size: 1rem;
}
#page-contact .resp-note {
  font-size: 0.94rem;
}
#page-contact .form-panel .form-sub {
  font-size: 0.98rem;
}
#page-contact .faq-a {
  font-size: 0.98rem;
}
#page-contact .ct-intro {
  margin-top: 1rem;
  font-size: 0.97rem;
  line-height: 1.75;
  opacity: 0.82;
}
#page-contact .ct-info-panel {
  margin-top: 1.8rem;
  border: 1px solid rgba(28, 181, 109, 0.15);
  border-radius: 16px;
  background: rgba(247, 242, 234, 0.03);
  overflow: hidden;
}
#page-contact .ct-info-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(28, 181, 109, 0.08);
}
#page-contact .ct-info-row:last-child {
  border-bottom: none;
}
#page-contact .ct-info-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
#page-contact .ct-info-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4fd18f;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
#page-contact .ct-info-val {
  font-size: 0.95rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
#page-contact a.ct-info-val:hover {
  color: #1cb56d;
  text-decoration: underline;
}
#page-contact .ct-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}
#page-contact .ct-tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(28, 181, 109, 0.35);
  color: #1cb56d;
  background: rgba(28, 181, 109, 0.07);
  white-space: nowrap;
}

/* ── Information listing page ── */
#page-information .blog-lead {
  font-size: 1rem;
}
#page-information .fp-excerpt {
  font-size: 0.98rem;
}
#page-information .bc-excerpt {
  font-size: 0.94rem;
}

/* ── Information detail page — article body ── */
#page-information-detail .art-body p {
  font-size: 1.06rem;
}

/* ── Activities listing page ── */
#page-activities .sp-td {
  font-size: 1.02rem;
}
#page-activities .act-desc {
  font-size: 0.98rem;
}
#page-activities .hl-card p {
  font-size: 0.94rem;
}
#page-activities .cta-band p {
  font-size: 1rem;
}

/* ── Activities-detail & Les-circuit-detail (shared) — body content ── */
#page-activities-detail .overview-text p,
#page-les-circuit-detail .overview-text p {
  font-size: 1.05rem;
}
#page-activities-detail .highlights-list li,
#page-les-circuit-detail .highlights-list li {
  font-size: 1.02rem;
}
#page-activities-detail .itin-desc,
#page-les-circuit-detail .itin-desc {
  font-size: 0.96rem;
}
#page-activities-detail .review-text,
#page-les-circuit-detail .review-text {
  font-size: 0.98rem;
}
#page-activities-detail .meet-body p,
#page-les-circuit-detail .meet-body p {
  font-size: 0.98rem;
}

/* ── Les-circuit listing page — cards ── */
#page-les-circuit .gc-desc {
  font-size: 0.92rem;
}