*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* Legacy variable names — reassigned to the new Top Notch Cancún identity.
       Kept for compatibility with any component still referencing the old names. */
    --obsidian: #2E2B27; --surface: #F7F2E8; --surface-2: #EFE7D8;
    --gold: #8C6A43; --gold-light: #A88457; --gold-dim: #6F5435;
    --sand: #F8F4EC; --sand-dim: #EEE5D7; --stone: #5F6A5C;
    --turquoise: #4F6F5D; --turquoise-dim: #3E5B4B;

    /* Official brand palette */
    --brand-ivory: #F7F2E8; --brand-ivory-soft: #FBF8F1;
    --brand-charcoal: #2E2B27; --brand-charcoal-soft: #3A3631;
    --brand-bronze: #8C6A43; --brand-bronze-hover: #A88457; --brand-bronze-deep: #6F5435;
    --brand-green: #4F6F5D; --brand-green-hover: #3E5B4B;
    --brand-stone: #E9E0D0;
    --brand-copy: #4F4A43; --brand-copy-soft: #675F55; --brand-ink-muted: #6B655C;

    /* Secondary surfaces / auxiliary tones */
    --ivory-main: #F7F2E8; --ivory-light: #FBF8F1; --ivory-alt: #F8F4EC;
    --sand-light: #F2EBDD; --sand-medium: #EFE7D8; --sand-warm: #E9E0D0; --sand-muted: #E8DFD2;
    --border-light: #DDD4C7; --border-medium: #D5CCBE; --border-strong: #C9C0B2;
    --bronze-soft: #C4A77F; --bronze-light-alt: #C7A171;
    --text-dark: #2E2B27; --text-medium: #4F4A43; --text-soft: #675F55;
    --text-muted: #6B655C; --text-light-muted: #8A8277; --text-lightest-muted: #8F8677;
    --green-main: #4F6F5D; --green-hover: #3E5B4B; --green-dark: #3A5A3A; --green-soft: #5F6A5C;
    --error: #7D3E34; --error-soft: #E6968C; --success-soft: #A0D0A0;

    /* Accent tones reserved specifically for charcoal (dark) backgrounds,
       where the standard bronze/copy tones read too dull */
    --bronze-on-dark: #E0BB73; --bronze-on-dark-alt: #D9B778;
    --ivory-on-dark: #F7F2E8; --ivory-on-dark-soft: #EEE5D7;
  }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-family: 'Inter', sans-serif; background: var(--brand-ivory); color: var(--brand-copy); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

  /* PAGE SYSTEM */
  .page { display: none; }
  .page.active { display: block; }

  /* NAV */
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; transition: background 0.4s, padding 0.4s; }
  nav.scrolled { background: rgba(46,43,39,0.96); padding: 16px 48px; border-bottom: 1px solid rgba(140,106,67,0.15); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .nav-logo { font-size: 13px; font-weight: 500; letter-spacing: 0.22em; color: var(--bronze-on-dark); text-transform: uppercase; text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
  .nav-logo-mark { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; mix-blend-mode: screen; border-radius: 4px; }
  .nav-links { display: flex; list-style: none; } .nav-links li { margin-right: 36px; } .nav-links li:last-child { margin-right: 0; }
  .nav-links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-dim); text-decoration: none; transition: color 0.2s; cursor: pointer; }
  .nav-links a:hover { color: var(--turquoise); }
  .nav-back { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-dim); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
  .nav-back:hover { color: var(--bronze-on-dark); }
  .nav-cta { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-ivory); background: var(--brand-green); padding: 10px 24px; text-decoration: none; transition: background 0.2s; font-weight: 500; cursor: pointer; }
  .nav-cta:hover { background: var(--brand-green-hover); }
  .lang-switch { display: flex; align-items: center; margin-right: 8px; } .lang-switch > * { margin-right: 2px; } .lang-switch > *:last-child { margin-right: 0; }
  .lang-btn { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-dim); background: none; border: none; cursor: pointer; padding: 6px 9px; font-family: 'Inter', sans-serif; transition: color 0.2s; }
  .lang-btn:hover { color: var(--sand); }
  .lang-btn.active { color: var(--bronze-on-dark); font-weight: 500; }
  .lang-sep { color: rgba(224,187,115,0.3); font-size: 10px; }
  [data-i18n] { }

  /* HERO — LANDING */
  .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 80px; position: relative; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; background: var(--obsidian); }
  .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(140,106,67,0.03) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(140,106,67,0.03) 80px); background-size: 80px 80px; }
  .hero-bg::after { content: none; }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze-on-dark); margin-bottom: 28px; position: relative; display: flex; align-items: center; gap: 16px; }
  .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--turquoise); }
  .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 7vw, 100px); font-weight: 300; line-height: 1.0; color: var(--sand); max-width: 860px; position: relative; margin-bottom: 36px; letter-spacing: -0.01em; }
  .hero h1 em { font-style: italic; color: var(--bronze-on-dark); }
  .hero-sub { font-size: 15px; font-weight: 300; color: var(--sand-dim); max-width: 480px; line-height: 1.7; position: relative; margin-bottom: 48px; }
  .hero-actions { display: flex; gap: 20px; align-items: center; position: relative; }
  .hero-scroll { position: absolute; bottom: 40px; right: 80px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand-dim); display: flex; align-items: center; gap: 12px; }
  .hero-scroll::after { content: ''; display: block; width: 1px; height: 48px; background: var(--sand-dim); }
  .hero-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; gap: 40px; position: relative; }
  .hero-text { order: 1; position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
  .hero-art { order: 2; position: relative; top: auto; right: auto; transform: none; width: 800px; max-width: 54vw; flex: 0 0 auto; margin-left: auto; z-index: 1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 72% 84% at 60% 50%, black 38%, rgba(0,0,0,0.55) 60%, transparent 96%); mask-image: radial-gradient(ellipse 72% 84% at 60% 50%, black 38%, rgba(0,0,0,0.55) 60%, transparent 96%); opacity: 0.95; mix-blend-mode: screen; }
  .hero-art img { width: 100%; display: block; }
  @media (max-width: 1200px) { .hero-art { width: 600px; opacity: 0.6; } }
  @media (max-width: 900px) { .hero-row { flex-direction: column; } .hero-art { order: 1; display: block; width: 100%; max-width: 100%; margin-top: 0; margin-bottom: 24px; margin-left: 0; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 88% 70% at 50% 45%, black 42%, rgba(0,0,0,0.55) 65%, transparent 100%); mask-image: radial-gradient(ellipse 88% 70% at 50% 45%, black 42%, rgba(0,0,0,0.55) 65%, transparent 100%); } .hero-text { order: 2; } }

  /* HERO — INNER PAGES */
  .page-hero { min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 80px 96px; position: relative; overflow: hidden; }
  .page-hero-bg { position: absolute; inset: 0; background: var(--obsidian); }
  .page-hero-bg::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(140,106,67,0.03) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(140,106,67,0.03) 80px); background-size: 80px 80px; }
  .page-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 6.5vw, 92px); font-weight: 300; line-height: 1.0; color: var(--sand); max-width: 860px; position: relative; margin-bottom: 28px; letter-spacing: -0.01em; }
  .page-hero h1 em { font-style: italic; color: var(--bronze-on-dark); }
  .page-hero-sub { font-size: 15px; font-weight: 300; color: var(--sand-dim); max-width: 520px; line-height: 1.7; position: relative; margin-bottom: 48px; }

  /* BUTTONS */
  .btn-primary { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--brand-ivory); background: var(--brand-green); padding: 16px 36px; text-decoration: none; display: inline-block; transition: background 0.2s; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
  .btn-primary:hover { background: var(--brand-green-hover); }
  .btn-ghost { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; color: var(--gold); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color 0.2s; cursor: pointer; }
  .btn-ghost:hover { color: var(--turquoise); }

  /* STRIP — sits on the ivory surface just below the hero */
  .strip { border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 20px 80px; display: flex; justify-content: space-between; align-items: center; background: var(--surface); }
  .strip-item { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-medium); display: flex; align-items: center; gap: 10px; }
  .strip-item span.dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; display: inline-block; }

  /* SECTIONS — defaults assume the ivory surface, which is the majority context */
  section { padding: 120px 80px; }
  .section-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
  .section-label::before { content: ''; width: 24px; height: 1px; background: var(--turquoise); }
  .section-label.center { justify-content: center; }
  .section-label.center::before { display: none; }
  .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 4.5vw, 64px); font-weight: 300; line-height: 1.1; color: var(--text-dark); margin-bottom: 24px; letter-spacing: -0.01em; }
  .section-title em { font-style: italic; color: var(--gold); }
  .body-text { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--text-medium); margin-bottom: 20px; }
  .body-text strong { color: var(--text-dark); font-weight: 400; }
  .divider { border: none; border-top: 1px solid var(--border-light); }

  /* Sections with an explicit charcoal background (inline style="background:var(--obsidian)")
     reuse .section-label / .section-title / .body-text, so restore light text there. */
  section[style*="background:var(--obsidian)"] .section-label,
  .philosophy .section-label,
  .contact-left .section-label { color: var(--bronze-on-dark); }
  section[style*="background:var(--obsidian)"] .section-title,
  .philosophy .section-title,
  .contact-left .section-title { color: var(--ivory-on-dark); }
  section[style*="background:var(--obsidian)"] .section-title em,
  .philosophy .section-title em,
  .contact-left .section-title em { color: var(--bronze-on-dark); }
  section[style*="background:var(--obsidian)"] .body-text,
  .philosophy .body-text { color: var(--ivory-on-dark-soft); }
  section[style*="background:var(--obsidian)"] .body-text strong,
  .philosophy .body-text strong { color: var(--ivory-on-dark); }
  section[style*="background:var(--obsidian)"] .pull-quote { color: var(--ivory-on-dark); border-left-color: var(--bronze-on-dark); }

  /* ORIGIN */
  .origin { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; background: var(--surface); }
  .origin-body { font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--text-medium); margin-bottom: 20px; }
  .origin-body strong { color: var(--text-dark); font-weight: 400; }
  .origin-right { padding-top: 80px; }
  .pull-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.3vw, 30px); font-weight: 300; font-style: italic; line-height: 1.45; color: var(--text-dark); border-left: 1px solid var(--gold); padding-left: 32px; margin-bottom: 40px; }
  .pull-quote em { color: var(--gold); font-style: normal; }
  .pillar { padding: 18px 0; border-bottom: 1px solid var(--border-light); display: flex; align-items: baseline; gap: 16px; }
  .pillar:last-child { border-bottom: none; }
  .pillar-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); min-width: 90px; }
  .pillar-text { font-size: 14px; color: var(--text-medium); font-weight: 300; line-height: 1.5; }
  .text-link { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turquoise); text-decoration: none; border-bottom: 1px solid var(--turquoise-dim); padding-bottom: 4px; display: inline-block; margin-top: 8px; cursor: pointer; }
  .text-link:hover { color: var(--turquoise-dim); }

  /* TWO COL (WHY PAGE) */
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: start; }

  /* CONTRAST */
  .contrast-grid { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 0; margin-top: 64px; }
  .contrast-col-head { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); }
  .contrast-col-head.them { color: var(--text-muted); }
  .contrast-col-head.us { color: var(--gold); }
  .contrast-arrow-head { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); font-size: 18px; color: var(--gold-dim); }
  .contrast-row-them, .contrast-row-us { padding: 22px 0; border-bottom: 1px solid var(--border-light); font-size: 15px; font-weight: 300; }
  .contrast-row-them { color: var(--text-muted); font-style: italic; }
  .contrast-row-us { color: var(--text-dark); }
  .contrast-arrow { display: flex; align-items: center; justify-content: center; padding: 22px 0; border-bottom: 1px solid var(--border-light); color: var(--gold-dim); font-size: 16px; }

  /* Desktop-only: contrast-grid rows sit directly on an obsidian section background here
     (mobile gives each row its own ivory-light card further below, so it must stay untouched). */
  @media (min-width: 901px) {
    section[style*="background:var(--obsidian)"] .contrast-col-head.them { color: var(--ivory-on-dark-soft); }
    section[style*="background:var(--obsidian)"] .contrast-col-head.us { color: var(--bronze-on-dark); }
    section[style*="background:var(--obsidian)"] .contrast-arrow-head,
    section[style*="background:var(--obsidian)"] .contrast-arrow { color: rgba(224,187,115,0.5); }
    section[style*="background:var(--obsidian)"] .contrast-row-them { color: var(--ivory-on-dark-soft); }
    section[style*="background:var(--obsidian)"] .contrast-row-us { color: var(--ivory-on-dark); }
    section[style*="background:var(--obsidian)"] .contrast-col-head,
    section[style*="background:var(--obsidian)"] .contrast-row-them,
    section[style*="background:var(--obsidian)"] .contrast-row-us,
    section[style*="background:var(--obsidian)"] .contrast-arrow-head { border-bottom-color: rgba(247,242,232,0.12); }
  }

  /* EXPERIENCES */
  .experiences { background: var(--surface); }
  .exp-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 80px; align-items: end; }
  .sites-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .site-card { background: var(--surface-2); padding: 48px 40px; position: relative; overflow: hidden; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; cursor: default; display: flex; flex-direction: column; border: 1px solid transparent; }
  .site-hook { font-size: 11px; letter-spacing: 0.06em; color: var(--gold); margin-top: 14px; font-weight: 500; }
  .site-card-clickable { cursor: pointer; transition: background 0.25s ease, box-shadow 0.25s ease; }
  .site-card-clickable:hover, .site-card-clickable:focus { background: rgba(79,111,93,0.14); box-shadow: inset 0 0 0 1px var(--turquoise); outline: none; }
  .site-view-more { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); margin-top: 18px; font-weight: 500; }
  .site-card:hover { background: var(--sand-warm); border-color: var(--turquoise); box-shadow: 0 0 0 1px var(--turquoise), 0 0 24px rgba(79,111,93,0.35); }
  .site-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: var(--text-dark); margin-bottom: 8px; }
  .site-region { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
  .site-desc { font-size: 13px; color: var(--text-medium); line-height: 1.65; font-weight: 300; flex: 1; }
  .site-card[style*="background:var(--obsidian)"] .site-desc { color: var(--ivory-on-dark-soft); }

  /* PHILOSOPHY */
  .philosophy { background: var(--obsidian); text-align: center; padding: 120px 160px; }
  .philosophy-quote { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 3.2vw, 48px); font-weight: 300; font-style: italic; line-height: 1.35; color: var(--sand); max-width: 760px; margin: 0 auto 56px; }
  .philosophy-quote em { color: var(--gold); font-style: normal; }
  .philosophy-attrs { display: flex; justify-content: center; gap: 56px; }
  .attr-num { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 6px; }
  .attr-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-dim); }

  /* Philosophy contrast fix — "No Es Una Promesa. Es Un Estándar." block:
     keeps the charcoal background but guarantees full-opacity, legible text. */
  .philosophy .section-label,
  .philosophy .section-label.center {
    color: #D9B778 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18) !important;
  }
  .philosophy-quote {
    color: #F7F2E8 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16) !important;
  }
  .philosophy-quote em {
    color: #E0BB73 !important;
    opacity: 1 !important;
  }
  .philosophy-attrs .attr-num {
    color: #E0BB73 !important;
    opacity: 1 !important;
  }
  .philosophy-attrs .attr-label {
    color: #EEE5D7 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }

  /* TIERS — PRIVATE & BOUTIQUE */
  .tiers { background: var(--surface); padding: 120px 80px; }
  .tiers-intro { text-align: center; max-width: 720px; margin: 0 auto 64px; }
  .tiers-intro p { font-size: 15px; color: var(--text-medium); line-height: 1.7; font-weight: 300; margin-top: 8px; }
  .tiers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
  .tier-card { background: var(--surface-2); border: 1px solid var(--border-light); padding: 48px 40px; display: flex; flex-direction: column; position: relative; }
  .tier-card.featured { border: 1px solid var(--gold); background: var(--obsidian); }
  .tier-badge { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); border: 1px solid var(--gold-dim); display: inline-block; padding: 6px 14px; margin-bottom: 24px; align-self: flex-start; }
  .tier-card.featured .tier-badge { color: var(--bronze-on-dark); border-color: var(--bronze-on-dark); }
  .tier-name { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; color: var(--text-dark); margin-bottom: 6px; }
  .tier-card.featured .tier-name { color: var(--ivory-on-dark); }
  .tier-sub { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 24px; }
  .tier-card.featured .tier-sub { color: var(--bronze-on-dark-alt); }
  .tier-price { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: var(--gold); margin-bottom: 20px; }
  .tier-card.featured .tier-price { color: var(--bronze-on-dark); }
  .tier-price span { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-soft); letter-spacing: 0.05em; font-style: normal; }
  .tier-card.featured .tier-price span { color: var(--ivory-on-dark-soft); }
  .tier-desc { font-size: 13px; color: var(--text-medium); line-height: 1.7; font-weight: 300; margin-bottom: 28px; }
  .tier-card.featured .tier-desc { color: var(--ivory-on-dark-soft); }
  .tier-features { list-style: none; margin-bottom: 36px; flex: 1; }
  .tier-features li { font-size: 13px; color: var(--text-medium); padding-left: 22px; position: relative; margin-bottom: 14px; line-height: 1.5; font-weight: 300; }
  .tier-card.featured .tier-features li { color: var(--ivory-on-dark-soft); }
  .tier-features li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
  .tier-card.featured .tier-features li::before { color: var(--bronze-on-dark); }
  .tiers-note { text-align: center; max-width: 640px; margin: 56px auto 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; color: var(--text-medium); line-height: 1.6; }
  .tiers-note em { color: var(--gold); font-style: normal; }
  @media (max-width: 900px) {
    .tiers { padding: 80px 24px; }
    .tiers-grid { grid-template-columns: 1fr; gap: 24px; }
  }

  /* CONTACT */
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
  .contact-left { padding: 100px 80px; background: var(--obsidian); border-right: 1px solid rgba(140,106,67,0.15); }
  .contact-right { padding: 100px 80px; background: var(--surface); }
  .contact-body { font-size: 15px; font-weight: 300; color: var(--ivory-on-dark-soft); line-height: 1.8; margin-bottom: 32px; }
  .contact-detail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .contact-detail-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-on-dark); min-width: 70px; padding-top: 2px; }
  .contact-detail-value { font-size: 14px; color: var(--ivory-on-dark); font-weight: 300; }
  .contact-detail-value a { color: var(--ivory-on-dark); text-decoration: none; border-bottom: 1px solid rgba(238,229,215,0.3); transition: color 0.2s, border-color 0.2s; }
  .contact-detail-value a:hover { color: var(--bronze-on-dark); border-color: var(--bronze-on-dark); }
  .form-group { margin-bottom: 20px; }
  .form-label { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-medium); margin-bottom: 8px; }
  .form-input, .form-select, .form-textarea { width: 100%; background: var(--ivory-light); border: 1px solid var(--border-strong); color: var(--text-dark); padding: 14px 16px; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 300; outline: none; transition: border-color 0.2s; appearance: none; }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brand-green); outline: 2px solid rgba(79, 111, 93, 0.25); outline-offset: 1px; }
  .form-input::placeholder, .form-select::placeholder, .form-textarea::placeholder { color: var(--text-light-muted); opacity: 1; }
  .form-textarea { resize: vertical; min-height: 100px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-submit { width: 100%; background: var(--brand-green); color: var(--brand-ivory); border: none; padding: 16px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; margin-top: 6px; }
  .form-submit:hover { background: var(--brand-green-hover); }
  .form-note { font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
  .form-status { font-size: 13px; margin-top: 14px; padding: 12px 14px; line-height: 1.6; border: 1px solid var(--border-medium); }
  .form-status-success { background: rgba(160,208,160,0.25); border-color: rgba(58,90,58,0.35); color: #3A5A3A; }
  .form-status-error { background: rgba(230,150,140,0.2); border-color: rgba(125,62,52,0.35); color: var(--error); }

  /* Destination Accordion Module (Private Transportation SEO panels) */
  .destination-accordion { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
  .destination-panel { background: var(--surface-2); border: 1px solid transparent; transition: border-color 0.25s; }
  .destination-panel[open] { border-color: rgba(140,106,67,0.25); }
  .destination-summary { list-style: none; cursor: pointer; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .destination-summary::-webkit-details-marker { display: none; }
  .destination-summary-text { display: flex; flex-direction: column; gap: 6px; }
  .destination-summary-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: var(--text-dark); }
  .destination-summary-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
  .destination-summary-icon { font-size: 22px; color: var(--gold); flex-shrink: 0; transition: transform 0.25s; }
  .destination-panel[open] .destination-summary-icon { transform: rotate(45deg); }
  .destination-content { padding: 0 28px 40px; }
  .destination-content > p { color: var(--text-medium); font-size: 14px; line-height: 1.8; font-weight: 300; max-width: 720px; margin-bottom: 16px; }
  .destination-drive-time { font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; margin-bottom: 28px; }
  .hotel-transfer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 28px; }
  .hotel-transfer-card { background: var(--ivory-light); border: 1px solid var(--border-light); padding: 20px; display: flex; flex-direction: column; }
  .hotel-transfer-card h4 { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 500; color: var(--text-dark); margin-bottom: 8px; line-height: 1.3; }
  .hotel-transfer-card p { font-size: 12.5px; color: var(--text-medium); line-height: 1.6; font-weight: 300; flex: 1; margin-bottom: 12px; }
  .hotel-transfer-card a { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); text-decoration: none; border-bottom: 1px solid var(--turquoise-dim); padding-bottom: 3px; align-self: flex-start; }
  .hotel-transfer-card a:hover { color: var(--turquoise-dim); border-color: var(--turquoise-dim); }
  .hotel-transfer-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .hotel-transfer-links a { font-size: 10.5px; color: var(--text-medium); text-decoration: none; border: 1px solid var(--border-medium); padding: 4px 8px; white-space: nowrap; align-self: auto; transition: background 0.2s, color 0.2s; }
  .hotel-transfer-links a:hover { background: rgba(140,106,67,0.08); color: var(--gold); border-color: rgba(140,106,67,0.3); }
  .area-specific-cta { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-ivory); background: var(--brand-green); padding: 12px 24px; text-decoration: none; font-weight: 500; margin-bottom: 24px; transition: background 0.2s; }
  .area-specific-cta:hover { background: var(--brand-green-hover); }
  .destination-related-links { margin-bottom: 20px; }
  .destination-related-links-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
  .destination-related-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 0; }
  .destination-related-links a { font-size: 12.5px; color: var(--turquoise); text-decoration: none; border-bottom: 1px solid var(--turquoise-dim); transition: color 0.2s, border-color 0.2s; }
  .destination-related-links a:hover { color: var(--turquoise-dim); border-color: var(--turquoise-dim); }
  .hotel-disclaimer { font-size: 11px; color: var(--text-muted); line-height: 1.6; font-style: italic; margin: 0; }

  /* Inline accordion behavior for the existing "Coverage" zone cards */
  .tnc-zone-card.destination-panel { cursor: default; }
  .destination-card-summary { cursor: pointer; list-style: none; display: block; padding-right: 40px; }
  .destination-card-summary::-webkit-details-marker { display: none; }
  .destination-card-summary::marker { content: ''; }
  .tnc-zone-card .destination-summary-icon { position: absolute; top: 44px; right: 36px; }
  .tnc-zone-card.destination-panel[open] { grid-column: 1 / -1; }
  .tnc-zone-card.destination-panel .destination-content { margin-top: 24px; }
  .tnc-zone-card.destination-panel .destination-content > p:first-child { max-width: 640px; }

  @media (max-width:900px) {
    .tnc-zone-card .destination-summary-icon { top: 28px; right: 20px; }
  }
  @media (max-width:480px) {
    .tnc-zone-card .destination-summary-icon { top: 20px; right: 16px; }
  }
  @media (max-width:700px) {
    .destination-summary { padding: 18px 18px; }
    .destination-summary-title { font-size: 19px; }
    .destination-content { padding: 0 18px 28px; }
    .hotel-transfer-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  }
  @media (max-width:480px) {
    .hotel-transfer-grid { grid-template-columns: 1fr; }
  }
  .tnc-ac-wrap { position: relative; }
  .tnc-page-section { padding: 0 80px 72px; }
  @media (max-width: 900px) { .tnc-page-section { padding: 0 24px 56px; } }
  @media (max-width: 480px) { .tnc-page-section { padding: 0 16px 40px; } }
  @media (max-width: 480px) { .tnc-panel { padding: 24px !important; } }
  .tnc-zone-card { padding: 14px 18px; }
  .tnc-zone-card .site-name { font-size: 16px; margin-bottom: 2px; line-height: 1.25; }
  .tnc-zone-card .site-region { margin-bottom: 4px; }
  .tnc-zone-card .destination-summary-icon { top: 14px; right: 16px; }
  @media (max-width: 900px) { .tnc-zone-card { padding: 22px 18px; } }
  @media (max-width: 480px) { .tnc-zone-card { padding: 18px 14px; } }
  .tnc-extras-list { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border-light); padding: 14px 16px; max-height: 220px; overflow-y: auto; }
  .tnc-extra-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-medium); font-weight: 300; cursor: pointer; }
  .tnc-extra-check input { width: 16px; height: 16px; accent-color: var(--brand-green); flex-shrink: 0; cursor: pointer; }
  .tnc-extra-check:hover { color: var(--text-dark); }
  .tnc-hotel-info { display: none; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 6px 10px; background: var(--surface-2); border: 1px solid rgba(140,106,67,0.2); flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .tnc-hotel-info.open { display: flex; }
  .tnc-hotel-info a { font-size: 11px; color: var(--gold); text-decoration: none; border: 1px solid rgba(140,106,67,0.3); padding: 3px 8px; white-space: nowrap; transition: background 0.2s; }
  .tnc-hotel-info a:hover { background: rgba(140,106,67,0.1); }
  .tnc-route-occasion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  @media (max-width: 900px) {
    .tnc-route-occasion-grid { grid-template-columns: 1fr; }
  }
  .tnc-ac-results { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--surface-2); border: 1px solid rgba(140,106,67,0.3); max-height: 320px; overflow-y: auto; margin-top: 2px; }
  .tnc-ac-results.open { display: block; }
  .tnc-ac-group { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); padding: 10px 16px 4px; }
  .tnc-ac-item { padding: 10px 16px; font-size: 13px; color: var(--text-dark); cursor: pointer; }
  .tnc-ac-item:hover { background: rgba(140,106,67,0.12); }
  .tnc-ac-item-active { background: rgba(140,106,67,0.18); }

  /* Floating transfer contact overlay */
  .tnc-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .tnc-overlay-backdrop { position: absolute; inset: 0; background: rgba(46,43,39,0.75); backdrop-filter: blur(2px); }
  .tnc-overlay-panel { position: relative; background: var(--obsidian); border: 1px solid rgba(140,106,67,0.25); max-width: 480px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
  .tnc-overlay-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--sand-dim); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; transition: color 0.2s; }
  .tnc-overlay-close:hover { color: var(--bronze-on-dark); }
  .tnc-overlay-divider { display: flex; align-items: center; text-align: center; color: var(--sand-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 20px 0; }
  .tnc-overlay-divider::before, .tnc-overlay-divider::after { content: ''; flex: 1; height: 1px; background: rgba(247,242,232,0.12); }
  .tnc-overlay-divider span { padding: 0 14px; }
  .tnc-overlay-whatsapp { display: block; text-align: center; font-size: 13px; letter-spacing: 0.08em; color: var(--brand-ivory); background: var(--brand-green); text-decoration: none; border: 1px solid var(--brand-green); padding: 14px; transition: background 0.2s, border-color 0.2s; font-weight: 500; }
  .tnc-overlay-whatsapp:hover { background: var(--brand-green-hover); border-color: var(--brand-green-hover); }
  .tnc-overlay-mp { display: block; text-align: center; font-size: 13px; letter-spacing: 0.08em; color: var(--sand); text-decoration: none; border: 1px solid rgba(140,106,67,0.3); padding: 14px; margin-top: 10px; transition: background 0.2s, border-color 0.2s; }
  .tnc-overlay-mp:hover { background: rgba(140,106,67,0.1); border-color: var(--gold); }
  @media (max-width:480px) {
    .tnc-overlay-panel { padding: 28px 20px; max-height: 92vh; }
  }

  /* FOOTER */
  footer { background: #2E2B27; padding: 40px 80px; border-top: 1px solid rgba(140,106,67,0.12); display: flex; justify-content: space-between; align-items: center; }
  footer .footer-logo,
  .footer-logo {
    color: #E0BB73 !important;
    opacity: 1 !important;
  }
  .footer-logo { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; text-decoration: none; cursor: pointer; }
  .footer-links { display: flex; gap: 32px; }
  footer .footer-links a,
  footer .footer-links span {
    color: #F7F2E8 !important;
    opacity: 1 !important;
    text-decoration: none !important;
  }
  .footer-links a,
  .footer-links span { font-size: 11px; letter-spacing: 0.08em; cursor: pointer; transition: color 0.2s; }
  footer .footer-links a:hover,
  footer .footer-links a:focus-visible,
  footer .footer-links span:hover,
  footer .footer-links span:focus-visible,
  footer .footer-links .active-page {
    color: #E0BB73 !important;
  }

  /* STICKY CTA — a conversion action, so it uses the brand green rather than bronze */
  .sticky-cta { position: fixed; bottom: 32px; right: 40px; z-index: 200; background: var(--brand-green); color: var(--brand-ivory); padding: 14px 28px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 32px rgba(0,0,0,0.35); transition: background 0.2s, opacity 0.3s, transform 0.3s; opacity: 0; transform: translateY(12px); pointer-events: none; cursor: pointer; }
  .sticky-cta.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
  .sticky-cta:hover { background: var(--brand-green-hover); }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    nav { padding: 20px 24px; } nav.scrolled { padding: 14px 24px; }
    .nav-links { display: none; }
    .hero { padding: 0 24px 72px; } .hero-scroll { display: none; }
    .page-hero { padding: 0 24px 72px; }
    section { padding: 80px 24px; }
    .strip { padding: 16px 24px; flex-wrap: wrap; gap: 12px; }
    .origin { grid-template-columns: 1fr; gap: 56px; }
    .origin-right { padding-top: 0; }
    .two-col { grid-template-columns: 1fr; gap: 56px; }
    .contrast-grid { grid-template-columns: 1fr 40px 1fr; }
    .exp-intro { grid-template-columns: 1fr; gap: 32px; }
    .sites-grid { grid-template-columns: 1fr; }
    .philosophy { padding: 80px 24px; } .philosophy-attrs { gap: 28px; }
    .contact { grid-template-columns: 1fr; }
    .contact-left, .contact-right { padding: 64px 24px; }
    .contact-left { border-right: none; border-bottom: 1px solid rgba(140,106,67,0.15); }
    .form-row { grid-template-columns: 1fr; }
    footer { flex-direction: column; gap: 12px; text-align: center; padding: 32px 24px; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
    .sticky-cta { bottom: 20px; right: 20px; }
  }

  /* Tour itinerary */
  .itinerary-wrap { max-width: 800px; margin: 0 auto; padding: 80px 0 60px; }
  .itinerary-item { display: flex; gap: 36px; padding: 26px 0; border-bottom: 1px solid rgba(140,106,67,0.15); }
  .itinerary-item:last-child { border-bottom: none; }
  .itinerary-time { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600; color: var(--gold); letter-spacing: 0.08em; min-width: 86px; padding-top: 3px; white-space: nowrap; }
  .itinerary-desc { font-size: 15px; line-height: 1.7; color: var(--text-medium); }
  .itinerary-desc strong { color: var(--text-dark); font-weight: 500; }
  .tour-specs { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(140,106,67,0.15); }
  .tour-spec { display: flex; flex-direction: column; gap: 4px; }
  .tour-spec-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
  .tour-spec-value { font-size: 14px; color: var(--text-dark); }
  @media (max-width: 600px) {
    .itinerary-item { flex-direction: column; gap: 6px; }
    .itinerary-time { min-width: unset; }
    .itinerary-wrap { padding: 48px 0 40px; }
  }


  /* SITE CARD IMAGES — multiply (not screen) since cards are now a light ivory surface */
  .site-card { position: relative; overflow: hidden; }
  .site-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; opacity: 0.14; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 82% 75% at 50% 45%, black 32%, rgba(0,0,0,0.5) 55%, transparent 92%);
    mask-image: radial-gradient(ellipse 82% 75% at 50% 45%, black 32%, rgba(0,0,0,0.5) 55%, transparent 92%);
    transition: opacity 0.4s;
  }
  .site-card:hover .site-card-img { opacity: 0.22; }


  /* PAGE-HERO ART — tour images, same style as .hero-art */
  .page-hero { overflow: hidden; }
  .page-hero-art {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 700px;
    max-width: 50vw;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 68% 82% at 58% 50%, black 36%, rgba(0,0,0,0.55) 58%, transparent 95%);
    mask-image: radial-gradient(ellipse 68% 82% at 58% 50%, black 36%, rgba(0,0,0,0.55) 58%, transparent 95%);
    opacity: 0.9;
    mix-blend-mode: screen;
  }
  .page-hero-art img { width: 100%; display: block; }
  @media (max-width: 1200px) { .page-hero-art { width: 520px; opacity: 0.65; } }
  @media (max-width: 900px) {
    .page-hero-art {
      position: relative;
      top: auto; right: auto;
      transform: none;
      width: 100%; max-width: 100%;
      margin-top: 32px;
      opacity: 0.45;
      -webkit-mask-image: radial-gradient(ellipse 88% 68% at 50% 42%, black 42%, rgba(0,0,0,0.55) 65%, transparent 100%);
      mask-image: radial-gradient(ellipse 88% 68% at 50% 42%, black 42%, rgba(0,0,0,0.55) 65%, transparent 100%);
    }
  }



  /* NAV: base styles for logo without image */
  .nav-logo-text {
    font-size: 13px; font-weight: 500; letter-spacing: 0.22em;
    color: var(--bronze-on-dark); text-transform: uppercase;
  }

  /* LANG DROPDOWN (mobile) — hidden on desktop */
  .lang-dropdown-wrap {
    display: none;
    position: relative;
    flex-shrink: 0;
  }
  .lang-dropdown-btn {
    background: none; border: 1px solid rgba(224,187,115,0.35);
    color: var(--bronze-on-dark); font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    padding: 8px 12px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    min-height: 44px; min-width: 60px;
    transition: border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .lang-dropdown-btn svg { transition: transform 0.2s; flex-shrink: 0; stroke: var(--bronze-on-dark); }
  .lang-dropdown-btn.open svg { transform: rotate(180deg); }
  .lang-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: rgba(46,43,39,0.97); border: 1px solid rgba(140,106,67,0.2);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    min-width: 160px; z-index: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  }
  .lang-dropdown-menu.open { display: block; }
  .lang-dropdown-menu button {
    width: 100%; background: none; border: none;
    color: var(--sand-dim); font-family: 'Inter', sans-serif;
    font-size: 12px; letter-spacing: 0.08em;
    padding: 14px 18px; text-align: left; cursor: pointer;
    display: block; transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }
  .lang-dropdown-menu button:hover { color: var(--bronze-on-dark); background: rgba(140,106,67,0.1); }
  .lang-dropdown-menu button.active { color: var(--bronze-on-dark); font-weight: 500; }
  .lang-dropdown-menu button + button { border-top: 1px solid rgba(247,242,232,0.08); }

  /* TG-HUB HERO: flex-start so content shows from top on mobile */
  .tg-hub-hero {
    justify-content: flex-start !important;
    padding-top: 100px !important;
    min-height: auto !important;
  }

  /* ============================================================
     TRAVEL GUIDES — CONTENT HUB EXTENSION (base styles)
     Reuses all design tokens above (--obsidian, --gold, --sand, etc.)
     ============================================================ */

  /* Footer links rendered as <a> on Travel Guides / stub pages (main site uses <span> with onclick);
     color/hover for these is governed by the !important footer rules above (brand section 7). */
  .footer-links a { font-size: 11px; letter-spacing: 0.08em; text-decoration: none; cursor: pointer; transition: color 0.2s; }
  .nav-links a { text-decoration: none; }

  /* Breadcrumb — sits directly under the fixed nav (which uses light text meant for a dark
     backdrop) and directly above .page-hero's own obsidian background. It previously had no
     background of its own, so it exposed the light body surface here and made both the nav
     links and the breadcrumb itself unreadable. Giving it the same obsidian background keeps
     it visually seamless with .page-hero-bg right below and restores contrast for both. */
  .tg-breadcrumb { padding: 110px 80px 0; font-size: 11px; letter-spacing: 0.08em; color: var(--sand-dim); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--obsidian); }
  .tg-breadcrumb a { color: var(--sand-dim); text-decoration: none; transition: color 0.2s; }
  .tg-breadcrumb a:hover { color: var(--turquoise); }
  .tg-inline-link { text-decoration: none; transition: color 0.2s, border-color 0.2s; }
  .tg-inline-link:hover { color: var(--turquoise); border-color: var(--turquoise); }
  .tg-breadcrumb span.sep { color: rgba(224,187,115,0.3); }
  .tg-breadcrumb span.current { color: var(--bronze-on-dark); }

  /* Category badge / pills */
  .tg-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(140,106,67,0.35); padding: 8px 16px; background: rgba(140,106,67,0.06); }
  .tg-pills { display: flex; flex-wrap: wrap; gap: 10px; }
  .tg-pill-btn { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); border: 1px solid var(--border-medium); padding: 10px 18px; background: transparent; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; }
  .tg-pill-btn:hover { color: var(--text-dark); border-color: rgba(140,106,67,0.5); }
  .tg-pill-btn.active { color: var(--brand-ivory); background: var(--gold); border-color: var(--gold); }

  /* Article meta row (reading time, date, category) */
  .tg-meta-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 8px; }
  .tg-meta-item { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
  .tg-meta-item .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); display: inline-block; }

  /* Reading progress bar */
  .tg-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold); z-index: 250; width: 0%; transition: width 0.1s linear; }

  /* Search bar */
  .tg-search-wrap { max-width: 560px; margin: 0 auto 56px; position: relative; }
  .tg-search-input { width: 100%; background: var(--ivory-light); border: 1px solid var(--border-strong); color: var(--text-dark); padding: 18px 22px; font-size: 14px; font-family: 'Inter', sans-serif; font-weight: 300; outline: none; transition: border-color 0.2s; }
  .tg-search-input:focus { border-color: var(--brand-green); }
  .tg-search-input::placeholder { color: var(--text-light-muted); opacity: 1; }

  /* Hub grid of article cards */
  .tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 8px; }
  .tg-card { background: var(--surface-2); padding: 36px 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; border: 1px solid transparent; }
  .tg-card:hover { background: var(--sand-warm); border-color: var(--turquoise); box-shadow: 0 0 0 1px var(--turquoise), 0 0 24px rgba(79,111,93,0.35); }
  .tg-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .tg-card-cat { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
  .tg-card-time { font-size: 11px; color: var(--text-muted); }
  .tg-card-title { font-family: 'Cormorant Garamond', serif; font-size: 23px; font-weight: 400; color: var(--text-dark); line-height: 1.25; margin-bottom: 12px; }
  .tg-card-desc { font-size: 13px; color: var(--text-medium); line-height: 1.6; font-weight: 300; flex: 1; margin-bottom: 20px; }
  .tg-card-link { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise); text-decoration: none; border-bottom: 1px solid var(--turquoise-dim); padding-bottom: 4px; display: inline-block; width: fit-content; }
  .tg-card-link:hover { color: var(--turquoise-dim); }
  .tg-empty { text-align: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; display: none; }
  .tg-empty.visible { display: block; }
  .tg-results-count { font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 24px; text-align: center; }

  /* Article body typography */
  .tg-article-body { max-width: 760px; margin: 0 auto; padding: 0 80px 40px; }
  .tg-article-body h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: var(--text-dark); margin: 56px 0 20px; line-height: 1.2; scroll-margin-top: 100px; }
  .tg-article-body h2 + h3 { margin-top: 0; }
  .tg-article-body h3 { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 500; color: var(--gold); margin: 32px 0 12px; scroll-margin-top: 100px; }
  .tg-article-body p { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--text-medium); margin-bottom: 18px; }
  .tg-article-body ul { margin: 0 0 22px; padding-left: 0; list-style: none; }
  .tg-article-body ul li { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--text-medium); padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--border-light); }
  .tg-article-body ul li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 1px; background: var(--gold); }
  .tg-article-intro { font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 2.2vw, 27px); font-weight: 300; font-style: italic; color: var(--text-dark); border-left: 1px solid var(--gold); padding-left: 28px; margin: 0 0 40px; line-height: 1.45; }

  /* TOC */
  .tg-toc { max-width: 760px; margin: 0 auto 56px; padding: 28px 32px; background: var(--surface); border: 1px solid rgba(140,106,67,0.15); }
  .tg-toc-label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
  .tg-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
  .tg-toc a { font-size: 13px; color: var(--text-medium); text-decoration: none; transition: color 0.2s; }
  .tg-toc a:hover { color: var(--turquoise); }

  /* FAQ accordion */
  .tg-faq { max-width: 760px; margin: 0 auto 56px; padding: 0 80px; }
  .tg-faq-item { border-bottom: 1px solid var(--border-light); }
  .tg-faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 0; font-family: 'Cormorant Garamond', serif; font-size: 19px; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 400; }
  .tg-faq-q .icon { color: var(--gold); font-size: 18px; flex-shrink: 0; transition: transform 0.25s; }
  .tg-faq-item.open .tg-faq-q .icon { transform: rotate(45deg); }
  .tg-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .tg-faq-item.open .tg-faq-a { max-height: 400px; }
  .tg-faq-a p { font-size: 14px; font-weight: 300; color: var(--text-medium); line-height: 1.75; padding-bottom: 22px; margin: 0; }

  /* Related articles */
  .tg-related { background: var(--surface); padding: 96px 80px; }

  /* CTA block (within article) — a light "cuadro informativo" like the rest of the guide content */
  .tg-cta { max-width: 760px; margin: 64px auto; padding: 56px; background: var(--surface-2); border: 1px solid rgba(140,106,67,0.3); text-align: center; }
  .tg-cta h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; color: var(--text-dark); margin-bottom: 14px; }
  .tg-cta p { font-size: 14px; color: var(--text-medium); font-weight: 300; line-height: 1.7; margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
  /* Secondary link under the CTA button (e.g. "See the Chichén Itzá Private Day →").
     Reusable standard: consistent breathing room from the button across all breakpoints,
     replacing a legacy negative margin that left it visually stuck to the button. */
  .tg-cta .tg-cta-secondary { margin-top: 16px; margin-bottom: 0; }

  /* Stub page (private transportation placeholder) */
  .tg-stub-body { max-width: 700px; margin: 0 auto; padding: 0 80px 140px; text-align: center; }
  .tg-stub-body p { font-size: 15px; font-weight: 300; color: var(--text-medium); line-height: 1.85; margin-bottom: 28px; }

  @media (max-width: 900px) {
    .tg-grid { grid-template-columns: 1fr; }
    .tg-breadcrumb { padding: 96px 24px 0; }
    .tg-article-body { padding: 0 24px 24px; }
    .tg-faq { padding: 0 24px; }
    .tg-related { padding: 64px 24px; }
    .tg-stub-body { padding: 0 24px 96px; }
  }

  @media (max-width: 600px) {
    .tg-cta { padding: 36px 24px; margin: 48px auto; }
    .tg-toc { padding: 22px 20px; }
  }

  /* Article comparison table */
  .tg-table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 300; margin: 0; }
  .tg-table th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dark); border-bottom: 1px solid rgba(140,106,67,0.3); padding: 14px 16px; text-align: left; background: var(--surface); font-weight: 400; }
  .tg-table td { color: var(--text-medium); border-bottom: 1px solid var(--border-light); padding: 14px 16px; vertical-align: top; }
  .tg-table tbody tr:hover td { background: rgba(140,106,67,0.05); }
  .tg-table td strong { color: var(--text-dark); font-weight: 400; }

  /* Hospitality Insight callout */
  .tg-insight-box { border-left: 2px solid var(--gold); background: var(--sand-light); padding: 28px 32px; margin: 40px 0; }
  .tg-insight-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .tg-insight-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--text-dark); margin-bottom: 14px; }
  .tg-insight-box p { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--text-medium); margin-bottom: 10px; }
  .tg-insight-box p:last-child { margin-bottom: 0; }
  @media (max-width: 600px) {
    .tg-insight-box { padding: 20px 18px; }
    .tg-table th, .tg-table td { padding: 10px 10px; font-size: 12px; }
  }

  /* ============================================================
     MOBILE — 900px and below
     ============================================================ */
  @media (max-width: 900px) {
    /* Hide desktop lang switch, show dropdown */
    .lang-switch { display: none !important; }
    .lang-dropdown-wrap { display: flex !important; }

    /* nav-cta: hidden */
    .nav-cta { display: none !important; }

    /* nav links hidden */
    .nav-links { display: none !important; }

    nav { padding: 0 20px; height: 60px; flex-wrap: nowrap; gap: 0; }
    nav.scrolled { padding: 0 20px; }

    .nav-logo {
      font-size: 12px; letter-spacing: 0.18em;
      gap: 0; flex: 1 1 auto; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      min-height: 44px; align-items: center;
    }
    /* Hide the image inside nav-logo on mobile */
    .nav-logo .nav-logo-mark { display: none; }

    .nav-back {
      font-size: 11px; min-height: 44px; flex: 0 0 auto;
      white-space: nowrap; gap: 6px;
    }

    /* Hero: clear fixed nav.
       justify-content: flex-start anchors the stack (image first) to the TOP,
       so the cover image sits at the same distance from the top edge in EN/ES/PT.
       With the previous flex-end, shorter English text left a larger gap above the image. */
    .hero { padding: 60px 24px 72px; min-height: 100svh; min-height: 100vh; overflow: hidden; justify-content: flex-start; }
    .hero-scroll { display: none; }
    .hero h1 { font-size: clamp(32px, 9vw, 60px); word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
    .hero-sub { max-width: 100%; font-size: 14px; margin-bottom: 32px; }
    .hero-actions { flex-wrap: wrap; gap: 12px; }
    .hero > * { max-width: 100%; }

    .page-hero { padding: 80px 24px 56px !important; min-height: auto !important; overflow: hidden; }
    .page-hero h1 { font-size: clamp(28px, 7.5vw, 56px); word-break: break-word; overflow-wrap: break-word; }
    .page-hero-sub { font-size: 14px; margin-bottom: 28px; }

    /* tg-hub hero specifically */
    .tg-hub-hero { padding-top: 80px !important; }

    /* Sections */
    section { padding: 64px 24px; }
    .strip { padding: 14px 24px; flex-wrap: wrap; gap: 10px; }
    .philosophy { padding: 64px 24px; }
    .philosophy-attrs { gap: 24px; flex-wrap: wrap; justify-content: center; }

    /* Grids */
    .origin { grid-template-columns: 1fr !important; gap: 48px; }
    .origin-right { padding-top: 0; }
    .two-col { grid-template-columns: 1fr !important; gap: 48px; }
    .exp-intro { grid-template-columns: 1fr !important; gap: 32px; }
    .sites-grid { grid-template-columns: 1fr !important; }
    .contact { grid-template-columns: 1fr !important; }
    .form-row { grid-template-columns: 1fr !important; }
    .contrast-grid { display: block !important; grid-template-columns: none !important; gap: 0 !important; margin-top: 32px; }
    .contrast-arrow-head { display: none !important; }
    .contrast-col-head { display: none !important; }
    .contrast-row-them, .contrast-arrow, .contrast-row-us { border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); background: var(--ivory-light); }
    .contrast-row-them { display: block; margin-top: 24px; padding: 16px 16px 6px; border-top: 1px solid var(--border-light); border-bottom: none; border-radius: 10px 10px 0 0; font-size: 14px; }
    .contrast-arrow { display: flex !important; align-items: center; justify-content: center; transform: rotate(90deg); font-size: 13px; padding: 2px 0; color: var(--gold-dim); border-top: none; border-bottom: none; }
    .contrast-row-us { display: block; padding: 6px 16px 16px; border-top: 1px solid rgba(140,106,67,0.3); border-bottom: 2px solid rgba(140,106,67,0.3); border-radius: 0 0 10px 10px; font-size: 14px; }
    .contrast-row-them::before, .contrast-row-us::before { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; font-style: normal; }
    .contrast-row-them::before { color: var(--text-muted); content: "Other Operators"; }
    .contrast-row-us::before { color: var(--gold); content: "Top Notch Cancún"; }
    html.lang-es .contrast-row-them::before { content: "Otros Operadores"; }
    html.lang-pt .contrast-row-them::before { content: "Outros Operadores"; }

    /* Contact */
    .contact-left { border-right: none; border-bottom: 1px solid rgba(140,106,67,0.15); }
    .contact-left, .contact-right { padding: 52px 24px; }

    /* Footer */
    footer { flex-direction: column; gap: 12px; text-align: center; padding: 32px 24px; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 14px; }

    /* Forms */
    .form-input, .form-select, .form-textarea { font-size: 16px !important; padding: 14px; }
    .form-select {
      -webkit-appearance: none; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A09080' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
    }

    /* Buttons */
    .btn-primary { padding: 14px 24px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
    .btn-ghost { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
    .form-submit { padding: 16px; min-height: 48px; }

    /* Sticky CTA */
    .sticky-cta { bottom: 16px; right: 16px; padding: 13px 22px; min-height: 44px; display: inline-flex; align-items: center; z-index: 300; }

    /* Site cards */
    .site-card { padding: 32px 20px; }

    /* Itinerary */
    .itinerary-wrap { padding: 40px 0 28px; }
    .itinerary-item { flex-direction: column; gap: 4px; }
    .itinerary-time { min-width: unset; font-size: 13px; }
    .itinerary-desc { font-size: 14px; }
    .tour-specs { gap: 20px; flex-wrap: wrap; }

    /* Typography */
    .section-title { font-size: clamp(26px, 7vw, 48px); word-break: break-word; }
    .philosophy-quote { font-size: clamp(20px, 5.5vw, 36px); }
    .pull-quote { font-size: clamp(16px, 4.5vw, 24px); }

    /* ── TRAVEL GUIDES ──────────────────────────────────────── */
    .tg-grid { grid-template-columns: 1fr !important; }
    .tg-card { padding: 28px 20px; }
    .tg-card-title { font-size: 20px; }
    .tg-breadcrumb { padding: 76px 24px 0; font-size: 10px; gap: 6px; }
    .tg-article-body { padding: 0 24px 32px; }
    .tg-article-body h2 { font-size: clamp(22px, 5.5vw, 32px); margin: 40px 0 16px; }
    .tg-article-body h3 { font-size: 18px; }
    .tg-article-body p { font-size: 14px; }
    .tg-article-intro { font-size: clamp(17px, 4.5vw, 22px); padding-left: 20px; }
    .tg-toc { padding: 22px 20px; margin: 0 0 32px; }
    .tg-faq { padding: 0 24px; }
    .tg-faq-q { font-size: 17px; padding: 18px 0; }
    .tg-cta { padding: 36px 20px; margin: 48px 20px; }
    .tg-cta h3 { font-size: clamp(20px, 5vw, 28px); }
    .tg-related { padding: 56px 24px; }
    .tg-stub-body { padding: 0 24px 80px; }

    /* Category pills: horizontal scroll */
    #tgPills {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      justify-content: flex-start !important;
      margin-bottom: 28px !important;
      padding-bottom: 6px;
      gap: 8px !important;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    #tgPills::-webkit-scrollbar { display: none; }
    .tg-pill-btn { white-space: nowrap; flex-shrink: 0; min-height: 44px; padding: 10px 16px; }

    /* Search */
    .tg-search-wrap { max-width: 100%; margin-bottom: 28px; }
    .tg-search-input { font-size: 16px !important; }

    /* Table scroll */
    .tg-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tg-insight-box { padding: 20px 18px; }
  }

  /* ============================================================
     SMALL PHONES — 480px
     ============================================================ */
  @media (max-width: 480px) {
    nav { padding: 0 14px; height: 56px; }
    nav.scrolled { padding: 0 14px; }
    .nav-logo { font-size: 10px; letter-spacing: 0.12em; }
    .lang-dropdown-btn { font-size: 10px; padding: 7px 10px; min-width: 52px; }

    .hero { padding: 56px 16px 64px; }
    .page-hero { padding: 72px 16px 44px !important; }
    .tg-hub-hero { padding-top: 72px !important; }
    .hero h1 { font-size: clamp(28px, 8vw, 44px); }
    .page-hero h1 { font-size: clamp(24px, 7.5vw, 40px); }
    section { padding: 48px 16px; }
    .philosophy { padding: 48px 16px; }
    .contact-left, .contact-right { padding: 40px 16px; }
    footer { padding: 24px 16px; }
    .site-card { padding: 24px 16px; }
    .sticky-cta { right: 12px; bottom: 12px; padding: 11px 16px; font-size: 10px; }
    .tg-card { padding: 22px 16px; }
    .tg-breadcrumb { padding: 68px 16px 0; }
    .tg-article-body { padding: 0 16px 20px; }
    .tg-faq { padding: 0 16px; }
    .tg-related { padding: 40px 16px; }
    .tg-cta { margin: 40px 12px; padding: 28px 16px; }
    .section-title { font-size: clamp(22px, 7vw, 40px); }
  }

  /* ── TOUCH / CURSOR ─────────────────────────────────────────── */
  .nav-logo, .nav-links a, .nav-back,
  .footer-logo, .footer-links span, .footer-links a,
  .text-link, .site-card, .btn-ghost, .btn-primary,
  .sticky-cta, .tg-card, .tg-faq-q, .tg-pill-btn,
  [onclick] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(140,106,67,0.12);
  }
  .form-input, .form-select, .form-textarea, .tg-search-input {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Safari iOS gap fallback ────────────────────────────────── */
  @supports not (gap: 1px) {
    .hero-actions > * + * { margin-left: 20px; }
    .philosophy-attrs > * + * { margin-left: 48px; }
    .footer-links > * + * { margin-left: 28px; }
    .tour-specs > * + * { margin-left: 36px; }
  }


/* ============================================================
   MOBILE HAMBURGER NAVIGATION
   ============================================================ */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 6px;
  margin-left: 4px;
  flex-shrink: 0;
  z-index: 201;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--sand);
  transition: transform 0.25s ease, opacity 0.18s ease;
  transform-origin: center;
}
/* X state when open */
nav.mob-open .nav-hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
nav.mob-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
nav.mob-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Brand hamburger spec (section 10): always-visible ivory square,
   charcoal bars, no scroll dependency, proper focus-visible state. */
@media (max-width: 980px) {
  .nav-hamburger,
  #nav-hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;

    padding: 0 !important;
    margin-left: 10px !important;

    border-radius: 12px !important;

    background: #F7F2E8 !important;
    border: 1px solid #A88457 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important;

    position: relative !important;
    z-index: 99999 !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    mix-blend-mode: normal !important;
    filter: none !important;
  }

  .nav-hamburger span,
  #nav-hamburger span {
    display: block !important;

    width: 27px !important;
    height: 2.5px !important;
    min-height: 2.5px !important;

    background: #2E2B27 !important;
    border-radius: 999px !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-hamburger.open,
  #nav-hamburger.open,
  .nav-hamburger.active,
  #nav-hamburger.active {
    background: #2E2B27 !important;
  }

  .nav-hamburger.open span,
  #nav-hamburger.open span,
  .nav-hamburger.active span,
  #nav-hamburger.active span {
    background: #F7F2E8 !important;
  }
}
.nav-hamburger:focus-visible,
#nav-hamburger:focus-visible {
  outline: 3px solid #A88457 !important;
  outline-offset: 3px !important;
}
/* The open state is toggled via nav.mob-open rather than a .open/.active class on the
   button itself (see JS below) — mirror the X-bar treatment for that state too. */
nav.mob-open .nav-hamburger,
nav.mob-open #nav-hamburger {
  background: #2E2B27 !important;
}
nav.mob-open .nav-hamburger span,
nav.mob-open #nav-hamburger span {
  background: #F7F2E8 !important;
}

/* Mobile dropdown menu */
@media (max-width: 900px) {

  /* Show hamburger on mobile */
  .nav-hamburger { display: flex !important; }

  /* nav needs relative positioning for the dropdown */
  nav { position: relative !important; }

  /* Dropdown — visible when nav has .mob-open */
  nav.mob-open #nav-main {
    display: flex !important;          /* override CSS none AND JS inline none */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(46, 43, 39, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(140,106,67,0.18);
    border-bottom: 1px solid rgba(140,106,67,0.12);
    padding: 4px 0 20px;
    z-index: 200;
    box-shadow: 0 24px 48px rgba(0,0,0,0.7);
    gap: 0;
    animation: mob-menu-in 0.2s ease;
  }

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

  nav.mob-open #nav-main li {
    border-bottom: 1px solid rgba(247,242,232,0.06);
    margin: 0;
    list-style: none;
  }
  nav.mob-open #nav-main li:last-child {
    border-bottom: none;
  }
  nav.mob-open #nav-main a {
    display: block;
    padding: 17px 24px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sand-dim);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
  }
  nav.mob-open #nav-main a:active,
  nav.mob-open #nav-main a:hover {
    color: var(--bronze-on-dark);
    background: rgba(140,106,67,0.08);
  }
}



  /* Mobile refinement layer — preserves SPA/i18n architecture */
  body.mob-nav-open {
    overflow: hidden;
    touch-action: none;
  }
  #mob-nav-backdrop {
    display: none;
  }
  @media (max-width: 900px) {
    nav {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      z-index: 420;
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
      padding-top: env(safe-area-inset-top);
      background: rgba(46,43,39,0.94);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(140,106,67,0.12);
    }
    nav.scrolled {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
      padding-top: env(safe-area-inset-top);
    }
    .nav-logo,
    .nav-back,
    .lang-dropdown-btn,
    .nav-hamburger {
      min-height: 44px;
    }
    nav.mob-open #nav-main {
      position: fixed;
      top: calc(60px + env(safe-area-inset-top));
      left: 0;
      right: 0;
      bottom: auto;
      max-height: calc(100svh - 60px - env(safe-area-inset-top));
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    #mob-nav-backdrop {
      position: fixed;
      inset: 0;
      top: calc(60px + env(safe-area-inset-top));
      background: rgba(0,0,0,0.45);
      z-index: 360;
    }
    body.mob-nav-open #mob-nav-backdrop {
      display: block;
    }
    body.mob-nav-open .sticky-cta {
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
    }
    .tg-breadcrumb {
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-right: 24px;
    }
    .tg-breadcrumb::-webkit-scrollbar {
      display: none;
    }
    .tg-toc {
      margin-left: 0;
      margin-right: 0;
    }
    .tg-faq-q {
      line-height: 1.35;
    }
    .tg-related .tg-grid {
      gap: 12px;
    }
    .tg-card {
      border: 1px solid var(--border-light);
    }
  }
  @media (max-width: 480px) {
    nav {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    nav.scrolled {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    nav.mob-open #nav-main {
      top: calc(56px + env(safe-area-inset-top));
      max-height: calc(100svh - 56px - env(safe-area-inset-top));
    }
    #mob-nav-backdrop {
      top: calc(56px + env(safe-area-inset-top));
    }
    .sticky-cta {
      left: 12px;
      right: 12px;
      width: auto;
      justify-content: center;
      text-align: center;
      bottom: max(12px, env(safe-area-inset-bottom));
    }
  }

/* ==== Privacy / consent components ==== */
.tnc-transport-layout { display: grid; grid-template-columns: 640px 1fr; gap: 48px; align-items: start; }
  .tnc-transport-formcol { min-width: 0; }
  .tnc-transport-privacycol { min-width: 0; padding-top: 4px; }
.tnc-mobility-col, .tnc-privacy-col { min-width: 0; }
.tnc-transport-narrow { max-width: 640px; }
@media (max-width: 1080px) {
  .tnc-transport-layout { grid-template-columns: 1fr; gap: 24px; }
}

.tnc-consent-block { margin: 18px 0; padding: 16px 18px; border: 1px solid rgba(140,106,67,0.25); border-radius: 6px; background: var(--sand-light); }
.tnc-consent-block p { margin: 0 0 10px 0; }
.tnc-consent-row { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; font-size: 12px; line-height: 1.6; color: var(--text-medium); }
.tnc-consent-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-green); }
.tnc-consent-row label { cursor: pointer; }
.tnc-consent-link { color: var(--turquoise); text-decoration: underline; cursor: pointer; font-size: 12px; }
.tnc-mobility-consent { display: none; }
.tnc-mobility-consent.visible { display: flex; }
.tnc-privacy-lang-block { display: none; }
.tnc-privacy-lang-block.active { display: block; }
.tnc-privacy-page section { margin-bottom: 28px; }
.tnc-privacy-page h2 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--gold); margin-bottom: 10px; }
.tnc-privacy-page h1 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 500; color: var(--text-dark); margin-bottom: 6px; }
.tnc-privacy-page p, .tnc-privacy-page li { font-size: 14px; line-height: 1.8; color: var(--text-medium); font-weight: 300; }
.tnc-privacy-page ul { margin: 10px 0 10px 22px; }
.tnc-privacy-page .tnc-privacy-updated { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.tnc-privacy-page .tnc-privacy-body { max-width: 820px; margin: 0 auto; padding: 60px 24px 100px; }
.tnc-privacy-page .tnc-privacy-footnote { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(140,106,67,0.15); font-size: 12px; font-style: italic; }
@media (max-width: 700px) {
  .tnc-consent-block { padding: 14px; }
  .tnc-privacy-page .tnc-privacy-body { padding: 40px 16px 80px; }
}