/* ============================================================
   Israel Jeep Tour — site stylesheet
   Design tokens + page styles. Edit colors/type here; edit copy
   in index.html.
   ============================================================ */


/* ===== fonts.css ===== */
/* ============================================================
   FONTS — Israel Jeep Tour
   Three voices, each with one job:
   - Anton        → cinematic poster display (all-caps impact)
   - Newsreader   → rooted editorial / story body + quotes
   - Space Mono   → expedition-tag utility (eyebrows, labels, buttons)

   Served from Google Fonts. These are deliberate type CHOICES,
   not substitutions. If you want self-hosted binaries, drop the
   .woff2 files in assets/fonts/ and replace the @import below
   with local @font-face rules.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');


/* ===== colors.css ===== */
/* ============================================================
   COLORS — Israel Jeep Tour
   Land-derived. Every value is pulled from the real Israeli
   terrain Mendel drives: basalt rock, desert bone, sun-baked
   clay, scrub olive, midday ochre. Warm, rooted, cinematic.
   ============================================================ */

:root {
  /* --- BASALT (warm near-black ink — volcanic rock, the jeep) --- */
  --basalt-900: #1A160F;   /* deepest ink, hero overlays */
  --basalt-800: #241F16;
  --basalt-700: #322B1F;
  --basalt-600: #423A2A;
  --basalt-500: #564B37;

  /* --- SAND (warm neutral ramp — bone, dune, dust, stone) --- */
  --sand-50:  #F6EFE3;   /* paper / bone — primary light surface */
  --sand-100: #EFE5D4;
  --sand-200: #E4D5BE;   /* dune */
  --sand-300: #D3BE9E;   /* dust */
  --sand-400: #BBA078;   /* stone */
  --sand-500: #9C815C;   /* clay-grey */
  --sand-600: #7C6549;

  /* --- CLAY (primary — sun-baked rust, the "hot" younger sibling) --- */
  --clay-100: #F2D2C0;
  --clay-300: #E0926E;
  --clay-500: #BC4424;   /* PRIMARY brand color */
  --clay-600: #A4391C;
  --clay-700: #842C14;

  /* --- OLIVE (secondary — scrub, forest, wadi green) --- */
  --olive-100: #DCDCBE;
  --olive-300: #9DA06A;
  --olive-500: #5C6B3D;
  --olive-600: #4A5730;
  --olive-700: #39431F;

  /* --- OCHRE (accent — midday sun, dust in the light) --- */
  --ochre-100: #F6E2B0;
  --ochre-300: #E6BC5E;
  --ochre-500: #D99A2B;
  --ochre-600: #B97D17;

  /* --- SPRING (rare cool relief — water of the springs/wadis) --- */
  --spring-500: #2F6E66;
  --spring-300: #5E9C92;

  /* --- WHATSAPP (the one borrowed brand color, button only) --- */
  --whatsapp: #25D366;
  --whatsapp-ink: #075E54;

  /* ---------- SEMANTIC ALIASES ---------- */

  /* Surfaces */
  --surface-page:       var(--sand-50);    /* default page bg */
  --surface-raised:     #FFFFFF;           /* lifted card on sand */
  --surface-sunken:     var(--sand-100);   /* recessed wells, inputs */
  --surface-ink:        var(--basalt-900); /* dark cinematic sections */
  --surface-ink-soft:   var(--basalt-800);
  --surface-card:       var(--sand-50);

  /* Text */
  --text-strong:    var(--basalt-900);   /* headlines on light */
  --text-body:      var(--basalt-700);   /* body on light */
  --text-muted:     var(--sand-600);     /* captions, meta */
  --text-on-ink:    var(--sand-50);      /* body on dark */
  --text-on-ink-muted: var(--sand-400);
  --text-on-clay:   var(--sand-50);

  /* Brand / interactive */
  --brand:          var(--clay-500);
  --brand-hover:    var(--clay-600);
  --brand-press:    var(--clay-700);
  --brand-soft:     var(--clay-100);
  --accent:         var(--ochre-500);
  --accent-natural: var(--olive-500);

  /* Lines & borders */
  --border-hair:    rgba(26, 22, 15, 0.14);  /* hairline on light */
  --border-strong:  rgba(26, 22, 15, 0.32);  /* utility 1–2px rule */
  --border-on-ink:  rgba(246, 239, 227, 0.18);
  --border-brand:   var(--clay-500);

  /* Focus */
  --focus-ring:     var(--ochre-500);

  /* Cinematic image overlays (protection gradients over photos) */
  --scrim-bottom:   linear-gradient(180deg, transparent 0%, rgba(26,22,15,0.05) 40%, rgba(26,22,15,0.82) 100%); /* @kind other */
  --scrim-full:     linear-gradient(180deg, rgba(26,22,15,0.45) 0%, rgba(26,22,15,0.25) 45%, rgba(26,22,15,0.80) 100%); /* @kind other */
  --scrim-clay:     linear-gradient(160deg, rgba(132,44,20,0.30) 0%, rgba(26,22,15,0.78) 100%); /* @kind other */
}


/* ===== typography.css ===== */
/* ============================================================
   TYPOGRAPHY — Israel Jeep Tour
   Three voices:
   - Anton      → DISPLAY. Cinematic poster impact, all-caps.
   - Newsreader → STORY. Warm editorial serif for reading + quotes.
   - Space Mono → UTILITY. Expedition tags, eyebrows, buttons, labels.
   ============================================================ */

:root {
  /* ---------- FAMILIES ---------- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-serif:   'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* No separate UI sans — Space Mono carries utility, Newsreader carries reading */

  /* ---------- TYPE SCALE (fluid, cinematic top end) ---------- */
  --text-2xs:  0.6875rem;  /* 11px — micro mono labels */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1.0625rem;  /* 17px — serif body baseline */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.75rem;    /* 44px */
  --text-4xl:  clamp(2.75rem, 6vw, 4.5rem);   /* big section display */
  --text-5xl:  clamp(3.5rem, 9vw, 7rem);      /* hero poster display */
  --text-6xl:  clamp(4.5rem, 13vw, 11rem);    /* monumental */

  /* ---------- WEIGHTS ---------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- LINE HEIGHTS ---------- */
  --leading-none:    0.92;   /* stacked Anton display */
  --leading-tight:   1.05;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;   /* serif long-form reading */

  /* ---------- TRACKING ---------- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-label:  0.18em;   /* mono eyebrows / tags */
  --tracking-mega:   0.02em;   /* Anton display, slight open */
}

/* ---------- SEMANTIC ROLE CLASSES (optional helpers) ---------- */

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
}

.t-headline {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.t-headline-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.t-body {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.t-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}


/* ===== spacing.css ===== */
/* ============================================================
   SPACING — Israel Jeep Tour
   8px base grid. Generous, cinematic section rhythm.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6.5rem;   /* 104 */
  --space-12:  8rem;     /* 128 */

  /* Section vertical rhythm */
  --section-y:        clamp(4rem, 9vw, 8rem);    /* @kind spacing */
  --section-y-tight:  clamp(2.5rem, 5vw, 4rem);  /* @kind spacing */

  /* Page gutters / content width */
  --gutter:       clamp(1.25rem, 5vw, 5rem);  /* @kind spacing */
  --content-max:  1280px;  /* @kind spacing */
  --measure:      62ch;    /* @kind other */
}


/* ===== radius.css ===== */
/* ============================================================
   RADIUS — Israel Jeep Tour
   Rugged & utilitarian: corners stay sharp. Tiny radius for
   touchable controls, a pill reserved for tags & the WhatsApp
   button. Photography is never rounded (cinematic, full-bleed).
   ============================================================ */

:root {
  --radius-none: 0;
  --radius-sm:   2px;     /* buttons, inputs — barely there */
  --radius-md:   4px;     /* cards, media frames where used */
  --radius-lg:   8px;     /* dialogs, large panels */
  --radius-pill: 999px;   /* tags, WhatsApp button, avatars */
}


/* ===== elevation.css ===== */
/* ============================================================
   ELEVATION — Israel Jeep Tour
   Earthy and restrained. We lean on hairline borders and honest
   overlap, not floaty drop-shadows. Shadows are warm (basalt-
   tinted), low, and used only where something truly floats
   (sticky contact, dialogs, lifted cards on hover).
   ============================================================ */

:root {
  /* Warm, basalt-tinted shadows — never neutral grey */
  --shadow-xs:  0 1px 2px rgba(26, 22, 15, 0.10);
  --shadow-sm:  0 2px 6px rgba(26, 22, 15, 0.12);
  --shadow-md:  0 8px 20px -6px rgba(26, 22, 15, 0.22);
  --shadow-lg:  0 18px 40px -12px rgba(26, 22, 15, 0.34);
  --shadow-float: 0 10px 30px -8px rgba(26, 22, 15, 0.40);  /* sticky WhatsApp */

  /* Inset for sunken inputs/wells */
  --shadow-inset: inset 0 1px 2px rgba(26, 22, 15, 0.10);

  /* Border weights (rugged utility rules) */
  --border-1: 1px;  /* @kind spacing */
  --border-2: 2px;  /* @kind spacing */
  --border-3: 3px;  /* @kind spacing */

  /* Ring used for focus (paired with --focus-ring color) */
  --ring-width: 3px;  /* @kind spacing */
}


/* ===== motion.css ===== */
/* ============================================================
   MOTION — Israel Jeep Tour
   Grounded and weighty. Movement feels like settling dust or
   cresting a ridge: confident ease-out, slight upward drift,
   no bounce, no spring. Imagery reveals slow; UI responds fast.
   ============================================================ */

:root {
  /* Durations */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   240ms;   /* @kind other */
  --dur-slow:   520ms;   /* @kind other */
  --dur-cinema: 900ms;   /* @kind other */

  /* Easings — all ease-out family, grounded */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-ridge:  cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */

  /* Canonical reveal distance (upward drift) */
  --drift: 18px;  /* @kind other */
}

/* Reusable cinematic reveal: settle up from below + fade.
   Gate with [data-active] / IntersectionObserver in markup. */
@keyframes ijt-settle {
  from { opacity: 0; transform: translateY(var(--drift)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ijt-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slow ken-burns push for hero photography */
@keyframes ijt-ridge {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ===== base.css ===== */
/* ============================================================
   BASE — Israel Jeep Tour
   Light reset + page defaults + a couple of brand texture
   utilities (grain, topographic strata). Kept minimal.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-strong); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--clay-500); color: var(--sand-50); }

:focus-visible {
  outline: var(--ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Brand textures ---------------------------------------- */

/* Fine film grain overlay — drop on dark cinematic sections.
   Pure CSS noise, no asset needed. */
.ijt-grain { position: relative; }
.ijt-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Topographic strata — faint horizontal contour lines, a quiet
   map/expedition motif for dividers and well backgrounds. */
.ijt-strata {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 11px,
    var(--border-hair) 11px,
    var(--border-hair) 12px
  );
}



/* ============================================================
   PAGE STYLES — Israel Jeep Tour landing site
   ============================================================ */

/* No-flash reveal: crawlers + no-JS see everything; JS arms the
   entrance drift before first paint (html.js set by inline script). */
html.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; } }

.wrap { max-width: var(--content-max); margin: 0 auto; }
.section { padding: var(--section-y) var(--gutter); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--clay-600); }
.eyebrow .num { color: var(--text-muted); }
.eyebrow .rule { flex: 1; min-width: 32px; height: 1px; background: var(--border-strong); }
.eyebrow.on-ink { color: var(--ochre-300); }
.eyebrow.on-ink .num { color: var(--sand-400); }
.eyebrow.on-ink .rule { background: var(--border-on-ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; line-height: 1; border-radius: var(--radius-sm); border: 2px solid transparent; padding: 13px 22px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 17px 30px; font-size: 13px; gap: 11px; }
.btn-lg svg { width: 19px; height: 19px; }
.btn-sm { padding: 8px 14px; font-size: 11px; gap: 7px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-primary { background: var(--clay-500); color: var(--sand-50); border-color: var(--clay-500); }
.btn-primary:hover { background: var(--clay-600); border-color: var(--clay-600); }
.btn-primary:active { background: var(--clay-700); border-color: var(--clay-700); }

/* WhatsApp */
.wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; padding: 17px 28px; border-radius: var(--radius-pill); line-height: 1; white-space: nowrap; background: var(--whatsapp); color: #0B3D2E; border: 2px solid var(--whatsapp); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.wa svg { width: 22px; height: 22px; }
.wa:hover { background: #1EBE5B; }
.wa:active { transform: translateY(1px); }
.wa-full { width: 100%; }

/* NAV */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); }
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-logo img { height: 30px; width: auto; }
.nav-word { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--sand-50); font-size: 17px; line-height: 0.92; }
.nav-word span { color: var(--clay-300); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-100); text-decoration: none; }
.nav-links a:hover { color: var(--sand-50); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: rgba(246,239,227,0.12); color: var(--sand-50); border: 2px solid var(--border-on-ink); cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; }
#nav-menu { display: none; }
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  #nav-menu:checked ~ .nav-drawer { display: flex; }
  .nav-drawer { display: none; position: absolute; top: 72px; right: var(--gutter); flex-direction: column; gap: 4px; background: var(--basalt-900); border: 1px solid var(--border-on-ink); border-radius: var(--radius-md); padding: 10px; min-width: 180px; box-shadow: var(--shadow-lg); }
  .nav-drawer a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-100); text-decoration: none; padding: 11px 14px; border-radius: var(--radius-sm); }
  .nav-drawer a:hover { background: rgba(246,239,227,0.08); color: var(--sand-50); }
}
@media (min-width: 821px) { .nav-drawer { display: none; } }

/* HERO */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; background-image: url(assets/photos/hero-mendel.jpg); background-size: cover; background-position: center 42%; animation: ijt-ridge-strong 17s var(--ease-ridge) both; }
@keyframes ijt-ridge-strong { from { transform: scale(1.16); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,22,15,0.5) 0%, rgba(26,22,15,0) 16%), linear-gradient(0deg, rgba(26,22,15,0.82) 0%, rgba(26,22,15,0.30) 46%, rgba(26,22,15,0) 72%), linear-gradient(90deg, rgba(26,22,15,0.55) 0%, rgba(26,22,15,0.12) 40%, rgba(26,22,15,0) 70%); }
.hero-inner { position: relative; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(3rem, 7vw, 6rem); }
.hero h1 { font-family: var(--font-display); text-transform: uppercase; color: var(--sand-50); font-size: var(--text-5xl); line-height: 0.9; letter-spacing: 0.01em; margin: 0 0 22px; text-shadow: 0 2px 30px rgba(26,22,15,0.4); }
.hero h1 span { color: var(--clay-300); }
.hero-sub { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.45; color: var(--sand-100); max-width: 34ch; margin: 0 0 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* generic dark/light section heads */
.sec-h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-4xl); line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
.sec-h2 em { font-style: italic; font-weight: 500; }
.ink { background: var(--surface-ink); color: var(--text-on-ink); }
.ink .sec-h2 { color: var(--sand-50); }
.ink .sec-h2 em { color: var(--clay-300); }

/* EXPERIENCE / split layouts */
.split { display: grid; gap: clamp(2rem,5vw,5rem); align-items: start; }
.split-exp { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); }
.prose { display: flex; flex-direction: column; gap: 20px; max-width: 54ch; }
.prose p { font-family: var(--font-serif); margin: 0; }
.lead { font-size: var(--text-lg); line-height: 1.6; }
.ink .lead, .ink .prose p { color: var(--sand-100); }
.media { position: relative; min-height: 440px; border-radius: var(--radius-md); overflow: hidden; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ABOUT */
.split-about { grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); align-items: center; }
.about .prose p { color: var(--text-body); }
.about .sec-h2 { color: var(--text-strong); }
.about .sec-h2 em { color: var(--clay-600); }
.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 5px 11px; color: var(--text-body); }
.tag svg { width: 13px; height: 13px; }
.tag-clay { color: var(--clay-700); background: var(--clay-100); border-color: var(--clay-300); }
.tag-olive { color: var(--olive-700); background: var(--olive-100); border-color: var(--olive-300); }

/* TOURS */
.tours-head { margin-bottom: clamp(2rem,4vw,3.5rem); }
.tours-head .sec-h2 { color: var(--text-strong); max-width: 18ch; margin-top: 20px; }
.tour-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.25rem,2.5vw,2rem); }
.card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border-hair); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card-media .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--dur-cinema) var(--ease-ridge); }
.card:hover .card-media .img { transform: scale(1.05); }
.card-media .scrim { position: absolute; inset: 0; background: var(--scrim-bottom); }
.card-eyebrow { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ochre-300); }
.card-body { display: flex; flex-direction: column; gap: 13px; padding: 20px 20px 22px; }
.card-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
.card-body p { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-600); }
.card-cta svg { width: 15px; height: 15px; }

/* BOOKING */
.book-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr); gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.book h2 { margin: 0 0 14px; }
.book-sub { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.55; color: var(--text-on-ink-muted); max-width: 50ch; margin: 0 0 32px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sand-100); }
.field label .req { color: var(--clay-500); }
.field input, .field select, .field textarea { font-family: var(--font-serif); font-size: var(--text-base); color: var(--sand-50); background: rgba(246,239,227,0.06); border: 1.5px solid var(--border-on-ink); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%; outline: none; box-sizing: border-box; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.field textarea { resize: vertical; line-height: var(--leading-normal); }
.field input::placeholder, .field textarea::placeholder { color: var(--sand-500); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ochre-500); background: rgba(246,239,227,0.10); }
.field .hint { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.04em; color: var(--text-on-ink-muted); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-wrap { position: relative; }
.select-wrap .chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-on-ink-muted); }
.form-actions { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.form-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-on-ink-muted); }
.rail { border: 1px solid var(--border-on-ink); border-radius: var(--radius-md); padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 18px; background: rgba(246,239,227,0.03); }
.rail-h { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre-300); }
.rail-sep { height: 1px; background: var(--border-on-ink); margin: 4px 0; }
.contact-row { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.contact-row svg { width: 20px; height: 20px; color: var(--ochre-300); flex-shrink: 0; }
.contact-row .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-ink-muted); }
.contact-row .val { font-family: var(--font-serif); font-size: var(--text-base); color: var(--sand-50); white-space: nowrap; }

/* FOOTER */
.footer { background: var(--basalt-900); color: var(--sand-200); padding: clamp(3rem,6vw,5rem) var(--gutter) clamp(5rem,8vw,6.5rem); }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(2rem,4vw,3rem); }
.footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 18px; }
.footer-logo img { height: 40px; width: auto; }
.footer-logo .nav-word { font-size: 20px; line-height: 0.9; }
.footer-blurb { font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.6; color: var(--text-on-ink-muted); max-width: 34ch; margin: 0; }
.footer h4 { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-400); margin: 0 0 16px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sand-200); font-family: var(--font-serif); font-size: var(--text-base); white-space: nowrap; }
.footer-links a svg { width: 17px; height: 17px; color: var(--sand-400); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-pill); background: rgba(246,239,227,0.12); color: var(--sand-50); border: 2px solid var(--border-on-ink); }
.footer-social a svg { width: 20px; height: 20px; }
.footer-base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: clamp(2.5rem,5vw,4rem); padding-top: 20px; border-top: 1px solid var(--border-on-ink); }
.footer-base span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--sand-500); }

/* FLOATING WHATSAPP */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--whatsapp); color: #0B3D2E; border-radius: var(--radius-pill); box-shadow: var(--shadow-float); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); }
.fab svg { width: 28px; height: 28px; }
.fab:hover { transform: translateY(-2px); }
.fab .pulse { position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--whatsapp); opacity: 0.6; animation: ijt-fab-ring 2.4s var(--ease-out) infinite; }
@keyframes ijt-fab-ring { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fab .pulse { animation: none; } }

/* responsive */
@media (max-width: 860px) {
  .split-exp, .split-about, .book-grid, .footer-grid { grid-template-columns: 1fr; }
  .media { min-height: 320px; }
  .split-exp .media { order: -1; }
}
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }