/* =============================================================
   VanLimo — Design Tokens
   Colors, typography, spacing, radii, shadows, motion
   Bilingual (English / Spanish) — luxury travel, navy + gold
   ============================================================= */

/* ---- Webfonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLOR — Navy (primary) ---------- */
  --navy-900: #081119;                        /* darkest */
  --navy-800: #0E1B2A;                        /* BRAND PRIMARY — deep navy */
  --navy-700: #16293C;
  --navy-600: #21384F;
  --navy-500: #365069;
  --navy-400: #5C7488;
  --navy-300: #8FA2B2;
  --navy-200: #C2CCD6;
  --navy-100: #E2E7EC;
  --navy-50: #F2F5F7;

  /* ---------- COLOR — Slate (secondary) ---------- */
  --slate-700: #1E3A5F;                       /* BRAND SECONDARY — slate blue */
  --slate-500: #3E5C80;
  --slate-300: #8CA0B8;
  --slate-100: #E1E7EF;

  /* ---------- COLOR — Gold (accent) ---------- */
  --gold-900: #7A5F22;
  --gold-700: #A6822F;                        /* eyebrow / gold text */
  --gold-600: #C8A24B;                        /* BRAND ACCENT — gold */
  --gold-500: #D4B366;
  --gold-400: #E0C689;
  --gold-300: #EAD6A8;
  --gold-100: #F6EDD7;                        /* badge bg */

  /* ---------- COLOR — Sand / neutral (page bg) ---------- */
  --sand-500: #E8E1D3;
  --sand-400: #EFE9DE;
  --sand-300: #F3EEE5;                        /* bg-sunk */
  --sand-200: #F7F5F0;                        /* BRAND NEUTRAL — page background */
  --sand-100: #FBFAF6;                        /* bg-elevated */
  --sand-50: #FDFCF9;                         /* surface-warm */

  /* ---------- COLOR — Ink / text ---------- */
  --ink-900: #14181C;
  --ink-800: #232A33;                         /* body text */
  --ink-700: #3A424C;
  --ink-600: #565F6A;                         /* secondary text */
  --ink-500: #7A828D;                         /* tertiary text */
  --ink-400: #9CA3AD;
  --ink-300: #C4C9D0;                         /* hairlines */
  --ink-200: #DFE2E6;
  --ink-100: #EEF0F2;

  /* ---------- COLOR — Semantic ---------- */
  --c-success: #2F7D4F;
  --c-warning: #C8A24B;
  --c-danger: #B1442F;
  --c-info: #2E6C8E;

  /* ---------- Semantic surface / text aliases ---------- */
  --bg: var(--sand-200);
  --bg-elevated: var(--sand-100);
  --bg-sunk: var(--sand-300);
  --bg-contrast: var(--navy-800);
  --surface: #FFFFFF;                         /* cards only */
  --surface-warm: var(--sand-50);
  --fg: var(--ink-800);
  --fg-muted: var(--ink-600);
  --fg-subtle: var(--ink-500);
  --fg-invert: var(--sand-100);
  --fg-brand: var(--navy-800);
  --fg-gold: var(--gold-700);
  --border: rgba(14,27,42,0.12);
  --border-strong: rgba(14,27,42,0.24);
  --border-hair: rgba(35,42,51,0.08);

  /* ---------- TYPE — Families (EN/ES, Latin) ---------- */
  --font-display-en: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-serif-en: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-display-en);
  --font-serif: var(--font-serif-en);
  --font-sans: var(--font-sans-en);
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE — Scale, line-height, tracking ---------- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 84px;
  --lh-tight: 1.15;                           /* @kind font */
  --lh-snug: 1.3;                             /* @kind font */
  --lh-normal: 1.55;                          /* @kind font */
  --lh-relaxed: 1.7;                          /* @kind font */
  --lh-loose: 2;                              /* @kind font */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.18em;                  /* all-caps gold eyebrows */

  /* ---------- SPACING — 4px grid ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADIUS ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;                          /* standard cards */
  --radius-xl: 20px;                          /* hero/panels */
  --radius-2xl: 28px;
  --radius-pill: 999px;                       /* buttons/nav */

  /* ---------- SHADOWS — navy-tinted, never harsh ---------- */
  --shadow-xs: 0 1px 2px rgba(14,27,42,0.05);
  --shadow-sm: 0 2px 6px rgba(14,27,42,0.07), 0 1px 2px rgba(14,27,42,0.05);
  --shadow-md: 0 8px 22px rgba(14,27,42,0.10), 0 2px 6px rgba(14,27,42,0.06); /* card default */
  --shadow-lg: 0 22px 44px rgba(14,27,42,0.12), 0 8px 16px rgba(14,27,42,0.07);
  --shadow-xl: 0 40px 80px rgba(14,27,42,0.16), 0 16px 32px rgba(14,27,42,0.09);
  --shadow-inset: inset 0 1px 2px rgba(14,27,42,0.09); /* pressed */

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-gentle: cubic-bezier(0.33, 1, 0.68, 1); /* @kind other */
  --dur-fast: 140ms;                          /* @kind other */
  --dur-base: 220ms;                          /* @kind other */
  --dur-slow: 420ms;                          /* @kind other */
  --dur-ambient: 900ms;                       /* @kind other */

  /* ---------- LAYOUT ---------- */
  --content-width: 1200px;
  --prose-width: 680px;
  --gutter: 24px;
}

/* =============================================================
   Semantic element defaults
   ============================================================= */
html { color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-6xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--navy-800); }
h3, .h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--navy-800); }
h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--ink-900); }
h5, .h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-base); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-700); }

p, .p { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--ink-800); }
.lede { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--ink-700); }
.eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-700); }
.caption { font-size: var(--fs-sm); color: var(--fg-muted); }

a { color: var(--navy-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--navy-900); }

.hr-hair { height: 1px; background: var(--border-hair); border: 0; }
.hr-navy { height: 1px; background: var(--border); border: 0; }
.rule-gold { width: 48px; height: 2px; background: var(--gold-600); border: 0; }
.pullquote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--slate-700); }

/* ================= VanLimo site v4 — simple · clean · sharp ================= */
*{box-sizing:border-box} body{margin:0}
.wrap{max-width:var(--content-width);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--space-20) 0}
img{max-width:100%;display:block}

/* ---- nav (overlay -> solid on scroll; hamburger on mobile) ---- */
.nav2{position:fixed;top:0;left:0;width:100%;z-index:60;transition:background .3s ease,box-shadow .3s ease}
.nav2 .in{max-width:var(--content-width);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:20px}
.nav2 .logo{height:64px;width:auto;display:block}
.nav2 .lk{display:flex;gap:18px;margin-left:6px}
.nav2 .lk a{font:500 14px var(--font-sans);color:#fff;text-decoration:none;opacity:.92}
.nav2 .lk a:hover{opacity:1}
.nav2 .sp{flex:1}
/* destinations dropdown */
.nav2 .dd{position:relative}
.nav2 .ddb{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:500 14px var(--font-sans);color:#fff;opacity:.92;padding:0}
.nav2 .ddb:hover,.nav2 .dd:focus-within .ddb{opacity:1}
.nav2 .ddb svg{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .2s ease}
.nav2 .dd:hover .ddb svg,.nav2 .dd:focus-within .ddb svg{transform:rotate(180deg)}
.nav2 .ddm{position:absolute;top:100%;left:-14px;margin-top:14px;min-width:300px;background:#fff;border:1px solid var(--border-hair);border-radius:4px;box-shadow:0 24px 50px rgba(10,25,40,.20);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
.nav2 .dd:hover .ddm,.nav2 .dd:focus-within .ddm{opacity:1;visibility:visible;transform:translateY(0)}
.nav2 .ddm::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav2 .ddm a{display:block;padding:10px 14px;border-radius:3px;text-decoration:none;transition:background .15s ease;font:500 14px var(--font-sans);color:var(--navy-900)}
.nav2 .ddm a:hover{background:var(--sand-200);color:var(--navy-900)}
.nav2 .ddm{min-width:240px}
.nav2 .ddm b{display:block;font:600 14.5px var(--font-sans);color:var(--navy-900)}
.nav2 .ddm i{display:block;font:400 12.5px var(--font-sans);font-style:normal;color:var(--ink-500);margin-top:2px}
/* currency toggle */
.nav2 .curt{display:flex;border:1px solid rgba(255,255,255,.4);border-radius:2px;overflow:hidden}
.nav2 .curt button{background:none;border:0;cursor:pointer;padding:7px 9px;font:600 11.5px var(--font-sans);color:#fff;opacity:.8}
.nav2 .curt button.on{background:#fff;color:var(--navy-900);opacity:1}
.fxnote{display:none;font:400 11.5px var(--font-sans);color:var(--ink-500);margin-top:6px}
.mcur{display:flex;gap:0;margin-top:22px;border:1px solid rgba(255,255,255,.3);border-radius:2px;width:fit-content;overflow:hidden}
.mcur button{background:none;border:0;cursor:pointer;padding:9px 16px;font:600 13px var(--font-sans);color:#fff;opacity:.8}
.mcur button.on{background:#fff;color:var(--navy-900);opacity:1}
.mmenu .mhead{display:block;font:600 11px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);padding:16px 0 6px}
.mmenu a.msub{padding-left:14px;font-size:15.5px}
.nav2 .rate{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-left:18px;border-left:1px solid rgba(255,255,255,.35);text-decoration:none}
.nav2 .rate .r1{font:600 12px var(--font-sans);color:var(--gold-400);letter-spacing:1px}
.nav2 .rate .r2{font:400 11px var(--font-sans);color:rgba(255,255,255,.85)}
.nav2 .lang{display:flex;border:1px solid rgba(255,255,255,.4);border-radius:2px;overflow:hidden;font:600 12px var(--font-sans)}
.nav2 .lang a{padding:7px 11px;color:#fff;text-decoration:none;opacity:.85}
.nav2 .lang a.on{background:#fff;color:var(--navy-900);opacity:1}
.nav2 .cta{background:var(--gold-600);color:var(--navy-900);font:600 13px var(--font-sans);padding:11px 20px;border-radius:2px;text-decoration:none;white-space:nowrap}
.nav2 .cta:hover{background:var(--gold-500)}
@media(max-width:1240px){.nav2 .rate{display:none}}
.nav2.solid{background:rgba(9,19,31,.95);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,.18)}
body.solid-nav .nav2{position:sticky;background:var(--navy-900)}
body.solid-nav .firstwrap{padding-top:96px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}
.mmenu{display:none}
#mnav{position:absolute;opacity:0;pointer-events:none}
@media(max-width:940px){
  .nav2 .lk{display:none}
  .nav2 .curt{display:none}
  .burger{display:block}
  .mmenu{display:block;position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);background:var(--navy-900);z-index:70;padding:84px 28px 28px;transform:translateX(100%);transition:transform .28s var(--ease-out);box-shadow:-20px 0 60px rgba(0,0,0,.35)}
  #mnav:checked ~ .mmenu{transform:translateX(0)}
  .mmenu a{display:block;font:500 17px var(--font-sans);color:#fff;text-decoration:none;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .mmenu .tel{color:var(--gold-400)}
  .mclose{position:absolute;top:20px;right:20px;font:400 26px var(--font-sans);color:#fff;cursor:pointer}
}

/* ---- buttons (square, republic-sharp) ---- */
.btn{cursor:pointer;border:0;font-family:var(--font-sans);font-weight:600;text-decoration:none;display:inline-block;transition:all var(--dur-fast) var(--ease-out);text-align:center}
.btn-gold{background:var(--gold-600);color:var(--navy-900);padding:14px 26px;border-radius:2px;font-size:15px}
.btn-gold:hover{background:var(--gold-500)}
.btn-primary{background:var(--navy-800);color:var(--sand-100);padding:14px 26px;border-radius:2px;font-size:15px}
.btn-primary:hover{background:var(--navy-900)}
.btn-outline-w{background:transparent;color:#fff;padding:13px 25px;border-radius:2px;font-size:15px;border:1px solid rgba(255,255,255,.55)}
.btn-outline{background:transparent;color:var(--navy-800);padding:13px 25px;border-radius:2px;font-size:15px;border:1px solid var(--navy-700)}

/* ---- hero (full-viewport video slideshow, centered, crisp — republic-style) ---- */
.hero-full{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--navy-900)}
.herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.4s ease}
.herovid.on{opacity:1}
.hero-full .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,25,34,.34) 0%,rgba(8,25,34,.16) 45%,rgba(8,25,34,.40) 100%)}
.hero-full::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;background:linear-gradient(180deg,rgba(6,16,24,.55),rgba(6,16,24,0));pointer-events:none}
.hero-full::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:1;background:linear-gradient(180deg,rgba(247,245,240,0),var(--sand-200));pointer-events:none}
.hero-full .in{position:relative;z-index:2;max-width:var(--content-width);margin:0 auto;padding:80px var(--gutter) 60px;width:100%}
.hero-full h1{color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(42px,6.2vw,84px);line-height:1.05;margin:0 0 34px;letter-spacing:-.03em;max-width:15ch;text-shadow:0 2px 28px rgba(4,12,18,.45)}
.hero-full .cta{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.btn-hero{background:#0B2A33;color:#fff;padding:16px 32px;border-radius:2px;font:600 15px var(--font-sans);text-decoration:none;transition:background var(--dur-fast) var(--ease-out)}
.btn-hero:hover{background:#123A45}
.linkcta{font:600 15px var(--font-sans);color:#fff;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.85);padding-bottom:3px;text-shadow:0 1px 12px rgba(4,12,18,.5)}
.linkcta:hover{border-color:#fff}
.trustline{margin-top:24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:500 13.5px var(--font-sans);color:var(--sand-200)}
.trustline a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.trustline .stars{color:var(--gold-500);letter-spacing:2px}
.trustline .dot{opacity:.4}

/* ---- quiet reassurance strip + end CTA (simplified home) ---- */
.qstrip{display:flex;gap:44px;flex-wrap:wrap;justify-content:center;padding:24px 0;border-top:1px solid var(--border-hair);border-bottom:1px solid var(--border-hair)}
.qstrip div{font:400 14.5px var(--font-sans);color:var(--ink-700);display:flex;align-items:center;gap:8px}
.qstrip b{color:var(--navy-800);font-weight:600}
.qstrip .g{color:var(--gold-600);font-weight:700}
.endcta{text-align:center;padding:var(--space-16) 0}
.endcta h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;color:var(--navy-900);margin:0 0 8px}
.endcta p{color:var(--ink-600);margin:0 0 22px}
.endcta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- section head ---- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:var(--space-8);flex-wrap:wrap}
.sec-head h2{margin:8px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.2vw,38px);letter-spacing:-.03em;color:var(--navy-900)}
.sec-head p{color:var(--ink-600);max-width:52ch;margin:8px 0 0}
.eyebrow-g{font:600 11px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700)}

/* ---- tour cards (photo-first, flat) ---- */
.tours{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--surface);border:1px solid var(--border-hair);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);display:flex;flex-direction:column}
.tcard:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(14,27,42,.10)}
.tcard .img{height:194px;background-size:cover;background-position:center;background-color:var(--navy-200)}
.tcard .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tcard h3{font-family:var(--font-display);font-weight:600;font-size:20px;margin:0;color:var(--navy-900);line-height:1.28;letter-spacing:-.012em}
.tmeta{font:400 13px var(--font-sans);color:var(--ink-600)}
.tfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border-hair)}
.tprice{font:600 15px var(--font-sans);color:var(--navy-800)} .tprice span{font-weight:400;color:var(--ink-500);font-size:12px}
.tgo{font:600 12.5px var(--font-sans);color:var(--gold-700)}

/* ---- why band (dark, compact) ---- */
.band-navy{background:var(--navy-800);color:var(--sand-100);border-radius:14px}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.why h4{color:#fff;margin:0 0 8px;font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.why p{color:var(--navy-200);font-size:13.5px;margin:0;line-height:1.55}
.why .ic{width:28px;height:2px;background:var(--gold-500);margin-bottom:14px}

/* ---- photo band (shore) ---- */
.band-img{position:relative;min-height:340px;display:flex;align-items:center;background:var(--navy-900) no-repeat center/cover;border-radius:14px;overflow:hidden}
.band-img .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,14,22,.72),rgba(6,14,22,.26))}
.band-img .in{position:relative;z-index:2;padding:52px;max-width:60ch}
.band-img h2{color:#fff;margin:8px 0 12px;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.band-img p{color:var(--sand-200);font-size:15.5px;line-height:1.6;margin:0 0 20px}

/* ---- vehicle strip (demoted, flat) ---- */
.vstrip{display:flex;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--border-hair);border-radius:10px;padding:20px 24px}
.vstrip .pic{width:190px;height:110px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0}
.vstrip h3{margin:0 0 4px;font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em}
.vstrip p{margin:0;font:400 14px var(--font-sans);color:var(--ink-600)}
.vstrip .go{margin-left:auto;flex-shrink:0}

/* ---- reviews (flat) ---- */
.rev-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-6);flex-wrap:wrap}
.rev-stars{color:var(--gold-600);font-size:19px;letter-spacing:2px}
.rev-rate{font:700 16px var(--font-sans);color:var(--navy-800)}
.rev-cnt{font:400 14px var(--font-sans)} .rev-cnt a{color:var(--ink-600)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--surface);border:1px solid var(--border-hair);border-radius:10px;padding:22px}
.rev .q{font-family:var(--font-sans);font-size:14.5px;color:var(--ink-700);line-height:1.6}
.rev .who{font:600 12.5px var(--font-sans);color:var(--navy-800);margin-top:14px}
.rev .plat{font:400 11.5px var(--font-sans);color:var(--ink-500)} .rev .plat a{color:var(--ink-500)}
.platrow{display:flex;gap:18px;align-items:center;margin-top:var(--space-6);font:500 12px var(--font-sans);color:var(--ink-500);flex-wrap:wrap}
.platrow a{color:var(--navy-700);text-decoration:none;border-bottom:1px solid var(--border)}

/* ---- FAQ ---- */
.faq-list{max-width:780px}
.faq-item{border-top:1px solid var(--border-hair);padding:20px 0;display:flex;gap:16px;align-items:flex-start}
.faq-item:last-child{border-bottom:1px solid var(--border-hair)}
.faq-item .ic{flex-shrink:0;width:40px;height:40px;border-radius:4px;background:var(--navy-800);display:flex;align-items:center;justify-content:center;margin-top:2px}
.faq-item .ic svg{width:20px;height:20px;stroke:var(--gold-400);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.faq-item .tx{flex:1}
.faq-item b{font:600 16px var(--font-sans);color:var(--navy-800);display:block;margin-bottom:7px}
.faq-item p{font:400 15px var(--font-sans);color:var(--ink-600);margin:0;line-height:1.65}
.faq-teaser{background:var(--surface);border:1px solid var(--border-hair);border-radius:14px;padding:38px 40px}

/* ---- page hero (interior pages; supports video band) ---- */
.tp-hero-full{position:relative;min-height:46vh;display:flex;align-items:flex-end;background:var(--navy-800) no-repeat center/cover;overflow:hidden}
.bandvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tp-hero-full .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,25,34,.16),rgba(8,25,34,.44))}
.tp-hero-full::before{content:"";position:absolute;left:0;right:0;top:0;height:130px;z-index:1;background:linear-gradient(180deg,rgba(6,16,24,.55),rgba(6,16,24,0));pointer-events:none}
.tp-hero-full::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;z-index:1;background:linear-gradient(180deg,rgba(247,245,240,0),var(--sand-200));pointer-events:none}
.tp-hero-full .in{position:relative;z-index:2;max-width:var(--content-width);margin:0 auto;padding:0 var(--gutter) 64px;width:100%}
.tp-hero-full .eyebrow{color:var(--gold-400)}
.tp-hero-full h1{color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.2vw,48px);margin:10px 0 10px;letter-spacing:-.03em;text-shadow:0 2px 26px rgba(4,12,18,.5)}
.tp-hero-full .eyebrow{text-shadow:0 1px 14px rgba(4,12,18,.55)}
.tp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tp-badges span{font:500 11px var(--font-sans);letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:6px}

/* ---- tour page ---- */
.strip{display:flex;gap:24px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--border-hair)}
.strip div{font:400 14px var(--font-sans);color:var(--ink-700)} .strip b{color:var(--navy-800)}
.tp-cols{display:flex;gap:44px;align-items:flex-start;padding-top:var(--space-8)}
.tp-main{flex:1;min-width:0}
.tp-side{width:320px;flex-shrink:0;position:sticky;top:96px}
.eb{font:600 11px var(--font-sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-700);margin:var(--space-8) 0 14px}
.eb:first-child{margin-top:0}
.tp-lead{font-family:var(--font-sans);font-size:18px;color:var(--ink-700);line-height:1.65;max-width:62ch}
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--navy-200)}
.stop{position:relative;margin-bottom:18px}
.stop::before{content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:999px;background:var(--gold-600);border:2px solid var(--sand-200)}
.stop .t{font:600 13px var(--font-sans);color:var(--navy-800)} .stop .s{font:600 16px var(--font-display);color:var(--navy-900);letter-spacing:-.01em} .stop .n{font:400 14px var(--font-sans);color:var(--ink-600)}
.incl{columns:2;column-gap:28px;font:400 15px var(--font-sans);color:var(--ink-700);line-height:2}
.excl{font:400 14px var(--font-sans);color:var(--ink-500);margin-top:8px}
.bk{background:var(--surface);border:1px solid var(--border-hair);border-radius:12px;box-shadow:var(--shadow-md);padding:24px}
.bk .from{font:400 13px var(--font-sans);color:var(--ink-500)}
.bk .price{font-family:var(--font-display);font-weight:700;font-size:32px;color:var(--navy-800);line-height:1.1;letter-spacing:-.02em}
.bk .per{font:400 13px var(--font-sans);color:var(--ink-500)}
.bk .cancel{font:400 12.5px var(--font-sans);color:var(--c-success);margin-top:8px}
.bk .btn{width:100%;margin-top:14px}
.bk .call{display:block;text-align:center;font:600 14px var(--font-sans);color:var(--navy-800);margin-top:12px;text-decoration:none}
.bk .pb{font:400 11px var(--font-sans);color:var(--ink-400);text-align:center;margin-top:10px}
.mobilebar{display:none}
@media(max-width:900px){
  .tp-cols{flex-direction:column}.tp-side{width:100%;position:static}
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;border-top:1px solid var(--border-hair);box-shadow:0 -8px 24px rgba(14,27,42,.12);padding:10px 16px;gap:12px;align-items:center}
  .mobilebar .p{font:700 15px var(--font-sans);color:var(--navy-800)} .mobilebar .p span{font-weight:400;font-size:11px;color:var(--ink-500)}
  .mobilebar .btn{margin-left:auto;padding:11px 18px;font-size:14px;border-radius:8px}
  body.has-mobilebar{padding-bottom:64px}
}

/* ---- tours index ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.routelinks{display:flex;flex-wrap:wrap;gap:10px}
.routelinks a{display:inline-block;padding:10px 16px;border:1px solid var(--border-hair);border-radius:3px;background:var(--surface);font:500 14px var(--font-sans);color:var(--navy-800);text-decoration:none;transition:border-color .15s ease,color .15s ease}
.routelinks a:hover{border-color:var(--gold-600);color:var(--gold-700)}
/* travel concierge */
.askcard{background:var(--surface);border:1px solid var(--border-hair);border-radius:8px;box-shadow:var(--shadow-md);padding:26px;max-width:760px;margin-top:var(--space-6)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.chip{cursor:pointer;background:var(--sand-200);border:1px solid var(--border-hair);border-radius:6px;padding:8px 13px;font:500 13px var(--font-sans);color:var(--navy-800);transition:border-color .15s ease,color .15s ease}
.chip:hover{border-color:var(--gold-600);color:var(--gold-700)}
.askcard .frow{display:flex;gap:12px}.askcard .frow input{flex:1}
@media(max-width:560px){.askcard .frow{flex-direction:column}}
.cnote{display:flex;gap:10px;align-items:flex-start;font:400 14px var(--font-sans);color:var(--ink-600);margin-top:12px;line-height:1.55}
.cnote .ci{font-size:16px;line-height:1.4}
a.cell{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .2s ease}
a.cell:hover{border-color:var(--gold-600);transform:translateY(-2px)}
a.cell .go{font:600 12.5px var(--font-sans);color:var(--gold-700);margin-top:10px;display:inline-block}
.qlist{columns:2;column-gap:32px;max-width:820px;padding-left:18px}
.qlist li{font:400 15px var(--font-sans);color:var(--ink-700);line-height:1.7;margin-bottom:6px;break-inside:avoid}
.article p{max-width:68ch;color:var(--ink-700);font-size:17px;line-height:1.75;margin:0 0 18px}
@media(max-width:600px){.qlist{columns:1}}
/* concierge demo bubble (site-wide preview; real cytoworld replaces it when CYTO_UNIVERSE set) */
.cw-btn{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:8px;background:var(--gold-600);color:#fff;border:0;border-radius:999px;padding:12px 18px;font:600 14px var(--font-sans);cursor:pointer;box-shadow:0 10px 30px rgba(10,25,40,.28)}
.cw-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8}
.cw-btn:hover{background:var(--gold-500)}
.cw-panel{position:fixed;right:20px;bottom:20px;z-index:81;width:min(380px,92vw);height:min(560px,82vh);background:#fff;border:1px solid var(--border-hair);border-radius:12px;box-shadow:0 30px 70px rgba(10,25,40,.30);display:flex;flex-direction:column;overflow:hidden}
.cw-panel[hidden]{display:none}
.cw-head{display:flex;align-items:center;gap:8px;padding:13px 15px;background:var(--navy-900);color:#fff}
.cw-head b{font:700 14px var(--font-sans)}
.cw-tag{font:600 9.5px var(--font-sans);letter-spacing:.09em;text-transform:uppercase;background:var(--gold-500);color:var(--navy-900);padding:3px 7px;border-radius:4px}
.cw-x{margin-left:auto;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1;opacity:.85}
.cw-body{flex:1;overflow-y:auto;padding:16px;background:var(--sand-200)}
.cw-msgs{display:flex;flex-direction:column;gap:10px}
.cw-msg{max-width:86%;padding:10px 13px;border-radius:12px;font:400 13.5px var(--font-sans);line-height:1.5}
.cw-a{background:#fff;border:1px solid var(--border-hair);color:var(--ink-800);align-self:flex-start;border-bottom-left-radius:3px}
.cw-u{background:var(--gold-600);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.cw-cta{display:inline-block;margin-top:8px;font:600 12.5px var(--font-sans);color:var(--gold-700);text-decoration:none;border-bottom:1px solid currentColor}
.cw-chips{display:flex;gap:7px;overflow-x:auto;padding:9px 12px;border-top:1px solid var(--border-hair);background:#fff}
.cw-chips button{white-space:nowrap;background:var(--sand-200);border:1px solid var(--border-hair);border-radius:6px;padding:7px 11px;font:500 12px var(--font-sans);color:var(--navy-800);cursor:pointer;flex-shrink:0}
.cw-chips button:hover{border-color:var(--gold-600);color:var(--gold-700)}
.cw-inrow{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border-hair);background:#fff}
.cw-inrow input{flex:1;border:1px solid var(--border);border-radius:6px;padding:9px 11px;font:400 13.5px var(--font-sans)}
.cw-inrow button{background:var(--navy-800);color:#fff;border:0;border-radius:6px;width:40px;font-size:17px;cursor:pointer}
.cw-foot{font:400 10.5px var(--font-sans);color:var(--ink-400);text-align:center;padding:7px}
.bokun-wrap{min-height:340px;background:var(--sand-100);border:1px solid var(--border-hair);border-radius:10px;padding:10px}
.tailor{text-align:center;background:var(--navy-800);color:#fff;border-radius:14px;padding:44px}
.tailor h2{color:#fff;margin:0 0 8px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em} .tailor p{color:var(--navy-200);margin:0 0 20px}

/* ---- rates / vehicles / contact / about ---- */
.rates{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border-hair);border-radius:10px;overflow:hidden}
.rates th,.rates td{text-align:left;padding:13px 16px;font:400 14px var(--font-sans);border-bottom:1px solid var(--border-hair)}
.rates th{background:var(--navy-800);color:var(--sand-100);font-weight:600}
.rates tr:nth-child(even) td{background:var(--sand-100)}
.rates td b{color:var(--navy-800)}
.veh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.veh{background:#fff;border:1px solid var(--border-hair);border-radius:10px;overflow:hidden}
.veh .pic{height:150px;background-size:cover;background-position:center}
.veh .b{padding:15px 16px} .veh h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em} .veh p{font:400 13px var(--font-sans);color:var(--ink-600);margin:5px 0 0}
.contact{display:flex;gap:44px;flex-wrap:wrap} .contact .info{width:300px} .contact .form{flex:1;min-width:280px}
.info .line{margin:0 0 16px} .info .k{font:600 11px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700)} .info .v{font:400 16px var(--font-sans);color:var(--navy-800)} .info .v a{color:var(--navy-800)}
.form label{display:block;font:600 11px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin:14px 0 6px}
.form input,.form select,.form textarea{width:100%;box-sizing:border-box;background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 14px;font:400 15px var(--font-sans);color:var(--ink-800)}
.form .submit{margin-top:18px}
.prose p{max-width:66ch;color:var(--ink-700);font-size:16px;line-height:1.7}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--surface);border:1px solid var(--border-hair);border-radius:10px;padding:24px}
.step .n{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--gold-600);line-height:1}
.step h4{margin:12px 0 6px;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em} .step p{font:400 14px var(--font-sans);color:var(--ink-600);margin:0;line-height:1.6}
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.about-grid .cell{background:var(--surface);border:1px solid var(--border-hair);border-radius:10px;padding:22px}
.about-grid h4{margin:0 0 6px;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em} .about-grid p{font:400 14px var(--font-sans);color:var(--ink-600);margin:0;line-height:1.6}
.credits{font:400 11px var(--font-sans);color:var(--ink-400);line-height:1.7;margin-top:var(--space-8)}
.credits a{color:var(--ink-500)}

/* ---- footer ---- */
footer{background:var(--navy-900);color:var(--navy-200);margin-top:var(--space-20)}
.foot{display:flex;gap:40px;flex-wrap:wrap;padding:var(--space-16) 0}
.foot .bname{font:800 20px var(--font-display);color:#fff;letter-spacing:-.01em}
.foot .col{min-width:170px}
.foot h5{color:var(--gold-400);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.foot a,.foot p{display:block;color:var(--navy-200);font:400 14px var(--font-sans);text-decoration:none;margin:6px 0}
.foot a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font:400 12px var(--font-sans);color:var(--navy-300)}

@media(max-width:900px){.tours,.tgrid,.rev-grid{grid-template-columns:1fr 1fr}.why,.steps,.about-grid{grid-template-columns:1fr 1fr}.veh-grid{grid-template-columns:1fr 1fr}.vstrip{flex-wrap:wrap}.vstrip .go{margin-left:0}}
@media(max-width:600px){.tours,.tgrid,.rev-grid,.why,.steps,.about-grid,.veh-grid{grid-template-columns:1fr}.band-img .in{padding:32px}}

/* ================= v4 type: Inter Tight display (sans, sharp) ================= */
:root{ --font-display:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
h1,.h1,h2,.h2,.h-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em}
h3,.h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.012em}
.lede,.pullquote{font-style:normal}

/* ================= v11 palette: blue + white + grey (client: easy on eyes, no yellow) ================= */
:root{
  --gold-900:#0F4C74; --gold-700:#17608F; --gold-600:#1D6FB8; --gold-500:#2B82D4;
  --gold-400:#8FBEE4; --gold-300:#B7D5EC; --gold-100:#E7F1F9;
  --sand-500:#DCE3E9; --sand-400:#E5EAEF; --sand-300:#ECF0F4; --sand-200:#F4F6F8; --sand-100:#F9FAFC; --sand-50:#FCFDFE;
}
.btn-hero{background:#fff;color:var(--navy-900)}
.btn-hero:hover{background:#E8EEF4}