/* ─────────────────────────────────────────────────────────────
   Tripsy · shared design tokens
   Palette: #00175a navy · #006fcf azure · #007cbc ocean · #6eade4 sky · #53575a slate · #fff
   ───────────────────────────────────────────────────────────── */
:root {
  --navy: #00175a;
  --navy-2: #0a2470;
  --azure: #006fcf;
  --azure-2: #1f84e0;
  --ocean: #007cbc;
  --sky: #6eade4;
  --mist: #e8f1fb;
  --mist-2: #f3f7fd;
  --slate: #53575a;
  --ink: #0b1640;
  --ink-2: #3b4566;
  --muted: #7d869f;
  --line: #e3e9f3;
  --line-2: #eef2f8;
  --white: #fff;
  --champagne: #b8955a;
  --champagne-2: #f5ecdc;
  --ok: #138a5e;  --ok-bg: #e5f6ee;
  --warn: #b26a00; --warn-bg: #fff3df;
  --bad: #c03a3a;  --bad-bg: #fdecec;

  --sans: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --hand: 'Caveat', 'Instrument Serif', cursive;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(0, 23, 90, .05), 0 1px 1px rgba(0, 23, 90, .03);
  --shadow: 0 1px 2px rgba(0, 23, 90, .04), 0 8px 24px -8px rgba(0, 23, 90, .10);
  --shadow-lg: 0 2px 4px rgba(0, 23, 90, .04), 0 24px 60px -16px rgba(0, 23, 90, .22);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0; }
.ic { flex: none; display: inline-block; vertical-align: -0.2em; overflow: visible; }
/* Icons inside round/square buttons are always optically centred */
.iconbtn > .ic, [class*="-ic"] > .ic, .chip-ic > .ic, .tico > .ic, .dot > .ic { display: block; margin: auto; }
.nav-a > .ic { display: block; }

/* Moment type colours */
:root { --t-flight: #4256d0; --t-transfer: #0e9c8c; --t-stay: #c08a3e; --t-activity: #006fcf; --t-dining: #d4613a; --t-cruise: #0a9fc0; --t-train: #7a5cf0; --t-note: #a1824f; }
.t-flight { --tc: var(--t-flight); } .t-transfer { --tc: var(--t-transfer); } .t-stay { --tc: var(--t-stay); } .t-activity { --tc: var(--t-activity); }
.t-dining { --tc: var(--t-dining); } .t-cruise { --tc: var(--t-cruise); } .t-train { --tc: var(--t-train); } .t-note { --tc: var(--t-note); }
[class*="t-"] { --tc-soft: color-mix(in srgb, var(--tc, #006fcf) 11%, #fff); --tc-mid: color-mix(in srgb, var(--tc, #006fcf) 24%, #fff); --tc-deep: color-mix(in srgb, var(--tc, #006fcf) 78%, #00175a); }
.serif { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; }
.eyebrow { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--azure); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Elegant image fallback: a gradient seascape shows if a photo is missing or can't load. */
.ph { position: relative; overflow: hidden; background:
  radial-gradient(120% 70% at 80% 0%, rgba(255,255,255,.55), transparent 60%),
  linear-gradient(180deg, #cfe3f7 0%, #9cc6ec 38%, #4f95d3 62%, #1a5fa8 82%, #0b3a7a 100%); }
.ph::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(170deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px); opacity: .7; }
.ph > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .9s var(--ease); }
.ph > img.fail { opacity: 0; }
.ph.alt { background: linear-gradient(160deg, #e9eef7 0%, #c9d8ee 45%, #8eb2dc 100%); }
.ph.warm { background: linear-gradient(170deg, #f6ead7 0%, #e7c9a1 50%, #a3784a 100%); }

/* Brand mark */
.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: -.045em; color: var(--navy); }
.brand .ic { color: var(--azure); }

/* Map pins (shared) — SVG teardrop, tip = exact coordinate, label centred in the head */
.tpin { background: none; border: 0; }
.tpin-shape { position: absolute; inset: 0; filter: drop-shadow(0 6px 8px rgba(0, 23, 90, .35)); transition: transform .25s var(--ease); transform-origin: 20px 51px; }
.tpin:hover .tpin-shape { transform: scale(1.12); }
.tdot { background: none; border: 0; }
.tdot span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--azure); box-shadow: 0 2px 8px rgba(0, 23, 90, .35); }
.leaflet-tile-pane { filter: saturate(.72) contrast(1.04) brightness(1.02) hue-rotate(-4deg); }
.leaflet-container { font-family: var(--sans); background: #e9f0f8; isolation: isolate; z-index: 0; }
.leaflet-tooltip.ttip { background: var(--navy); color: #fff; border: 0; border-radius: 10px; padding: 7px 11px; font-size: 12px; box-shadow: 0 10px 24px -8px rgba(0,23,90,.5); }
.leaflet-tooltip.ttip span { display: block; opacity: .7; font-size: 11px; margin-top: 2px; }
.leaflet-tooltip.ttip::before { border-top-color: var(--navy); }
.leaflet-control-zoom { border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 8px; }
.leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 36px !important; text-align: center; display: block; border-radius: 12px !important; border: 1px solid var(--line) !important; color: var(--navy) !important; box-shadow: var(--shadow); font-weight: 400; }
.leaflet-control-attribution { font-size: 9.5px; background: rgba(255,255,255,.7) !important; border-radius: 6px 0 0 0; }

/* Department logo + "Tripsy by KYVERNITIS" signature on client pages */
.dept-mark { display: inline-flex; align-items: center; line-height: 0; }
.dept-mark img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.dept-mark.t-dark img { filter: drop-shadow(0 2px 14px rgba(0, 10, 40, .35)); }
.tripsy-mark { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .02em; text-transform: none; font-weight: 500; white-space: nowrap; line-height: 1; }
.tripsy-mark .tm-pre, .tripsy-mark .tm-by { font-family: var(--serif); font-style: italic; font-size: 16px; opacity: .7; letter-spacing: 0; }
.tripsy-mark .tm-logo { height: 26px; }
.tripsy-mark .klogo { height: 20px; }
.tripsy-mark.t-light { color: #00175a; }
.tripsy-mark.t-dark { color: #fff; }

/* Tripsy + KYVERNITIS logos */
.tlogo, .klogo { display: inline-block; height: 1em; width: auto; flex: none; vertical-align: middle; user-select: none; }
.tlogo.tl-logo { height: 1em; } .tlogo.tl-symbol { height: 1em; }
.nf-logo { height: 38px !important; margin: 0 auto; }
.sign-kyv { height: 13px !important; display: block; margin-top: 6px; opacity: .85; }
.dept-mark > .tlogo { height: 100%; }

/* Smooth Ken Burns: photo motion runs on its own GPU layer, zoom only (no sub-pixel panning) → no trembling */
@keyframes kb-zoom { from { transform: translate3d(0, 0, 0) scale3d(1.12, 1.12, 1); } to { transform: translate3d(0, 0, 0) scale3d(1.02, 1.02, 1); } }
@keyframes kb-zoom-soft { from { transform: translate3d(0, 0, 0) scale3d(1.06, 1.06, 1); } to { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } }
@keyframes kb-breathe { from { transform: translate3d(0, 0, 0) scale3d(1.04, 1.04, 1); } to { transform: translate3d(0, 0, 0) scale3d(1.12, 1.12, 1); } }
.kb-layer { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) { .kb-layer, .kb-layer img { animation: none !important; } }

/* Photo banner (dark headers): real photograph, washed in brand navy → azure */
.night { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--navy); }
.nsky.pband { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, #00175a 0%, #0a2f86 60%, #006fcf 130%); }
.pband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pb-pos, center 55%); filter: saturate(.85) contrast(1.02); animation: pbIn 1.2s ease both; }
.pband img.swap { animation: pbIn 1s ease both; }
@keyframes pbIn { from { opacity: 0; } }
.pb-wash { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,23,90,.96) 0%, rgba(0,23,90,.86) 34%, rgba(0,36,112,.55) 66%, rgba(0,60,150,.28) 100%),
              linear-gradient(0deg, rgba(0,14,52,.6) 0%, rgba(0,14,52,0) 50%); }
.pb-wash::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(110,173,228,.0), rgba(110,173,228,.55), rgba(110,173,228,0)); }

/* KYVERNITIS circle mark — used as the Travel Designer's portrait on client pages */
.kx-mark { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
:where(span, div):has(> .kx-mark) { background: none !important; padding: 0 !important; overflow: visible; color: transparent; box-shadow: 0 0 0 1px rgba(217, 195, 154, .9), 0 0 0 3px #fff; }