/* =========================================================
   INDIAN EXCURSIONS — Field Journal / Expedition Atlas theme
   Mobile-first responsive system
   ========================================================= */

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

:root{
  /* Brand palette drawn from the compass badge */
  --navy: #15233e;
  --navy-2: #1f3057;
  --navy-3: #0e1728;
  --amber: #fba319;
  --amber-2: #d98a00;
  --amber-light: #ffd68a;
  --cream: #f4f3ee;
  --paper: #ffffff;
  --ink: #16182a;
  --ink-soft: #57596b;
  --line: rgba(22,35,63,0.13);
  --white: #ffffff;

  --font-display: 'Archivo', -apple-system, sans-serif;
  --font-body: 'Archivo', -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* fluid type scale */
  --fs-h1: clamp(2.4rem, 5vw + 1rem, 4.6rem);
  --fs-h2: clamp(1.9rem, 3.4vw + 1rem, 3.4rem);
  --fs-h3: clamp(1.35rem, 1.6vw + 1rem, 1.9rem);
  --fs-lead: clamp(1.05rem, 1vw + 0.8rem, 1.35rem);
  --fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.08rem);
  --fs-small: clamp(0.82rem, 0.3vw + 0.75rem, 0.92rem);

  /* container + section rhythm */
  --container: 1280px;
  --container-narrow: 860px;
  --pad-inline: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(3.5rem, 9vw, 8.5rem);

  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-x: none;
  max-width: 100vw;
}
/* locks background scroll while the mobile nav is open — body is pinned in
   place (via top offset set in JS) instead of relying on overflow:hidden,
   which mobile Safari ignores for touch-scroll purposes */
body.nav-lock{
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; font-size:1rem; }

:where(a, button, input, select, textarea, summary):focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); font-weight:800; letter-spacing:-0.02em; line-height:1.08; }
h3{ font-weight:700; }

.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--pad-inline); }
.container-narrow{ width:100%; max-width: var(--container-narrow); margin-inline:auto; padding-inline: var(--pad-inline); }

section{ padding-block: var(--section-pad); position:relative; }

/* subtle paper grain + topo texture background */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22,35,63,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--amber-2);
  font-weight:700;
}
.kicker::before{
  content:"";
  width:26px; height:1px; background: var(--amber-2);
  display:inline-block;
  transform-origin:left;
  transition: transform .6s var(--ease);
}
.reveal .kicker::before{ transform: scaleX(0); }
.reveal.in .kicker::before{ transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 0.95em 1.8em;
  border-radius: 999px;
  font-weight:600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
  min-height:48px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left .65s var(--ease);
  z-index:1; pointer-events:none;
}
.btn:hover::after{ left:130%; }
.btn-primary{
  background: var(--amber);
  color: var(--navy-3);
  box-shadow: 0 8px 24px -8px rgba(242,167,41,0.55);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(242,167,41,0.65); }
.btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  color: var(--white);
}
.btn-outline:hover{ background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-dark{
  background: var(--navy);
  color: var(--white);
}
.btn-dark:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(22,35,63,0.5); }
.btn-sm{ padding: 0.7em 1.3em; font-size:0.88rem; min-height:40px; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index:350;
  background: rgba(244,243,238,0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 1px 0 rgba(22,35,63,0.08),
    0 10px 28px -20px rgba(14,23,40,0.55);
  transition: background .3s, box-shadow .3s;
}
.site-header.scrolled{
  background: rgba(244,243,238,0.9);
  box-shadow:
    0 1px 0 rgba(22,35,63,0.1),
    0 16px 36px -18px rgba(14,23,40,0.62);
}
.site-header.compact .nav{ padding-block: 0.55rem; }
.site-header.compact .brand img{ height:56px; width:56px; }
.site-header .brand img{ transition: height .35s var(--ease), width .35s var(--ease), transform .45s var(--ease); }
.brand:hover img{ transform: rotate(-10deg) scale(1.06); }
.nav{ transition: padding-block .35s var(--ease); }
.nav-links a.current::after{ width:100% !important; }
.nav-links a.current{ color: var(--amber) !important; }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 0.9rem;
  gap: 1.25rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--navy);
}
.brand img{ height:68px; width:68px; flex-shrink:0; }
@media (min-width:1024px){ .brand img{ height:76px; width:76px; } }
.brand small{
  display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; color:var(--ink-soft); font-weight:400; text-transform:uppercase;
}

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:1px solid rgba(22,35,63,0.25); border-radius:10px;
  background: rgba(255,255,255,0.7);
  z-index: 210;
}
.nav-toggle span{
  width:20px; height:2px; background: var(--navy); margin-inline:auto; transition: all .3s var(--ease);
}
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1023px){
  .nav-toggle.active{
    position:fixed;
    top:1rem;
    right:var(--pad-inline);
    z-index:220;
  }
}

.nav-links{
  position: fixed; inset: 0 0 0 auto;
  width: min(85vw, 380px);
  height: 100dvh;
  background: var(--navy);
  color: var(--white);
  display:flex; flex-direction:column;
  padding: 6rem 2rem 2rem;
  gap: 0.3rem;
  /* clip-path (not transform) hides the panel — its box never leaves the
     0–100vw range, so it can't be panned into via a mobile edge-swipe */
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
  visibility:hidden;
  transition: clip-path .45s var(--ease), visibility 0s linear .45s;
  z-index:200;
  overflow-y:auto;
}
.nav-links.open{
  clip-path: inset(0 0 0 0%);
  pointer-events:auto;
  visibility:visible;
  transition-delay:0s;
}
.nav-links a{
  font-family: var(--font-display);
  font-size:1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
}
.nav-links a.nav-cta{ margin-top:1.5rem; color: var(--navy-3); }
.nav-scrim{
  position:fixed; inset:0; background: rgba(14,23,40,0.5); opacity:0; pointer-events:none; transition: opacity .4s; z-index:150;
}
.nav-scrim.open{ opacity:1; pointer-events:auto; }

.nav-actions{ display:flex; align-items:center; gap:.75rem; }
.nav-actions .btn{ display:none; }

/* Desktop nav */
@media (min-width: 1024px){
  .nav-toggle{ display:none; }
  .nav-links{ order:2; }
  .nav-actions{ order:3; flex-shrink:0; }
  .brand{ flex-shrink:0; }
  .nav-links{
    position: static; width:auto; height:auto; background:transparent; color:inherit;
    flex-direction:row; align-items:center; padding:0; transform:none;
    gap: clamp(0.9rem, 1.6vw, 2.1rem);
    overflow: visible;
    flex-wrap: nowrap;
    min-width:0;
    clip-path: none;
    pointer-events: auto;
    visibility:visible;
  }
  .nav-links a{
    font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.96rem); font-weight:600; color: var(--navy);
    border-bottom:none; padding:0; position:relative;
    white-space: nowrap; flex-shrink:0;
  }
  .nav-links a:not(.btn):hover{ color: var(--navy-2); }
  .nav-links a:not(.btn)::after{
    content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--amber-2);
    transition: width .3s var(--ease);
  }
  .nav-links a:not(.btn):hover::after{ width:100%; }
  .nav-links .nav-cta{ display:none; }
  .nav-scrim{ display:none; }
  .nav-actions .btn{ display:inline-flex; white-space:nowrap; }
}
@media (min-width: 1024px) and (max-width: 1220px){
  .brand small{ display:none; }
  .brand img{ height:64px; width:64px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: visible;
  background:
    radial-gradient(circle at 78% 12%, rgba(251,163,25,.34), transparent 24rem),
    radial-gradient(circle at 10% 78%, rgba(251,163,25,.16), transparent 22rem),
    linear-gradient(135deg, var(--cream) 0%, #fff8e8 48%, rgba(251,163,25,.38) 100%);
  border-bottom: 1px solid rgba(21,35,62,.08);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(21,35,62,.06) 1px, transparent 0);
  background-size:24px 24px;
  opacity:.45;
}
.hero > *{ position:relative; z-index:1; }
.hero-grid{
  display:grid;
  gap: 2.5rem;
  align-items:center;
}
.hero-copy .kicker{ margin-bottom:1.2rem; }
.hero h1{ font-size: var(--fs-h1); line-height:1.02; }
@media (max-width: 767px){
  .hero h1{ font-size:2rem; }
}
.hero h1 em{ font-style:italic; color: var(--amber-2); }
.hero p.lead{
  font-size: var(--fs-lead); color: var(--ink-soft); max-width:46ch; margin-top:1.4rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.2rem;
}
@media (min-width:480px){
  .hero-stats{ grid-template-columns: repeat(3, auto); gap: clamp(1.5rem,4vw,3rem); }
}

/* hero entrance — cascades in on page load, no scroll needed */
.hero-copy > *{ animation: heroRise .9s var(--ease) both; }
.hero-copy > .kicker{ animation-delay: .05s; }
.hero-copy > h1{ animation-delay: .16s; }
.hero-copy > p.lead{ animation-delay: .3s; }
.hero-copy > .hero-actions{ animation-delay: .44s; }
.hero-grid > .hero-stats{ animation: heroRise .9s .56s var(--ease) both; }
.hero-visual{ animation: heroRiseVisual 1.1s .3s var(--ease) both; }
@keyframes heroRise{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes heroRiseVisual{
  from{ opacity:0; transform: translateY(30px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-copy > *, .hero-visual, .hero-grid > .hero-stats{ animation:none; }
}
.hero-stats div{ padding-left: .8rem; border-left: 2px solid var(--line); min-width:0; }
.hero-stats div strong{ font-family:var(--font-display); font-weight:800; font-size: clamp(1.3rem, 5vw, 2rem); color:var(--navy); display:block; letter-spacing:-0.02em; white-space:nowrap; }
.hero-stats div span{ font-size:.8rem; color:var(--ink-soft); }
@media (min-width:480px){
  .hero-stats div{ padding-left: 1.1rem; }
}

/* stacked hero image cards */
.hero-visual{
  position:relative;
  height: clamp(340px, 60vw, 440px);
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
  perspective: 1400px;
}
@media (min-width: 1024px){
  .hero-visual{ max-width: none; margin-inline: 0; }
}
.hero-visual-inner{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform .4s var(--ease);
}

.stack-card{
  position:absolute;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(14,23,40,0.35);
  border: 6px solid var(--paper);
  display:flex; align-items:flex-end;
  animation: floatCard 7s ease-in-out infinite;
}
.stack-card .tag{
  padding: 1rem 1.2rem; color:#fff; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  background: linear-gradient(0deg, rgba(14,23,40,0.75), transparent);
  width:100%;
}
.stack-card.card-1{ width:62%; aspect-ratio: 4/5; left:0; top:6%; z-index:3; background: linear-gradient(155deg,#1f3057,#15233e 55%,#0e1728); animation-delay:0s;}
.stack-card.card-2{ width:52%; aspect-ratio: 4/5; right:0; top:0; z-index:2; background: linear-gradient(155deg,#fba319,#d98a00 60%,#a86a10); animation-delay:.6s;}
.stack-card.card-3{ width:46%; aspect-ratio: 5/4; left:20%; bottom:0; z-index:4; background: linear-gradient(155deg,#fbf7ee,#f2e6c8); border-color:var(--navy); animation-delay:1.2s;}
.stack-card.card-3 .tag{ color: var(--navy); background: linear-gradient(0deg, rgba(251,247,238,0.9), transparent); }
.stack-card svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.stack-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stack-card .tag{ position:relative; z-index:2; }

@keyframes floatCard{
  0%, 100%{ transform: translateY(0) rotate(var(--r,0)); }
  50%{ transform: translateY(-14px) rotate(var(--r,0)); }
}
.stack-card.card-1{ --r:-2deg; }
.stack-card.card-2{ --r:1.5deg; }
.stack-card.card-3{ --r:-1deg; }

@media (min-width: 1024px){
  .hero-grid{
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-areas:
      "copy visual"
      "stats visual";
    column-gap:3.5rem;
    row-gap:3rem;
  }
  .hero-copy{ grid-area:copy; align-self:end; }
  .hero-visual{ grid-area:visual; height:560px; align-self:center; }
  .hero-stats{ grid-area:stats; align-self:start; }
}

/* highlight-marker text accent (replaces italic emphasis) */
.mark{
  position:relative; display:inline-block; color: var(--navy); font-weight:800; white-space:nowrap;
}
.mark::after{
  content:""; position:absolute; left:-3%; right:-3%; bottom:0.08em; height:0.32em; z-index:-1;
  background: var(--amber); transform: skewX(-8deg);
  transition: height .3s var(--ease);
}

/* =========================================================
   MARQUEE TICKER
   ========================================================= */
.marquee-strip{
  background: var(--navy); overflow:hidden; padding-block: 1.1rem; position:relative;
}
.marquee-strip::before, .marquee-strip::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.marquee-strip::before{ left:0; background: linear-gradient(90deg, var(--navy), transparent); }
.marquee-strip::after{ right:0; background: linear-gradient(-90deg, var(--navy), transparent); }
.marquee-track{
  display:flex; width:max-content; gap: 3rem;
  animation: marqueeScroll 32s linear infinite;
}
.marquee-strip:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color: rgba(255,255,255,0.75); display:flex; align-items:center; gap: 3rem; white-space:nowrap;
}
.marquee-track span i{ color: var(--amber); font-style:normal; margin-right:3rem; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* =========================================================
   STAT COUNTERS
   ========================================================= */
.stat-count{ font-variant-numeric: tabular-nums; }

/* =========================================================
   TILT (pointer-interactive cards)
   ========================================================= */
.tilt{ transform-style: preserve-3d; will-change: transform; }

/* =========================================================
   BENTO GRID (trip types)
   ========================================================= */
.bento{
  display:grid; gap: 1rem; grid-template-columns: 1fr;
}
.bento-tile{
  position:relative; border-radius: var(--radius); overflow:hidden; color:#fff;
  min-height: 260px; display:flex; align-items:flex-end;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.bento-tile:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(14,23,40,0.5); }
.bento-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.bento-tile:hover img{ transform: scale(1.07); }
.bento-tile .scrim{
  position:absolute; inset:0; background: linear-gradient(0deg, rgba(14,23,40,0.9) 0%, rgba(14,23,40,0.25) 55%, rgba(14,23,40,0.05) 100%);
}
.bento-tile .content{ position:relative; z-index:2; padding: 1.6rem; width:100%; }
.bento-tile .content .index{ font-family: var(--font-mono); font-size:.78rem; color: var(--amber); display:block; margin-bottom:.5rem; }
.bento-tile .content h3{ color:#fff; font-size:1.4rem; margin-bottom:.4rem; }
.bento-tile .content p{ color: rgba(255,255,255,0.8); font-size:.92rem; max-width:34ch; }
.bento-tile .content .tag-pill{
  display:inline-flex; align-items:center; gap:.4em; margin-top:.9rem; font-size:.8rem; font-weight:600; color:#fff;
  opacity:0; transform: translateY(6px); transition: all .3s var(--ease);
}
.bento-tile:hover .content .tag-pill{ opacity:1; transform:none; }
.bento-tile.featured{ min-height: 360px; }
.bento-tile.featured .content h3{ font-size:1.9rem; }
.bento-tile.featured .content p{ max-width:42ch; font-size:1rem; }
.bento-tile:not(.featured) .content h3{ font-size:1.1rem; }

@media (min-width: 700px){
  .bento{ grid-template-columns: repeat(2, 1fr); }
  .bento-tile.featured{ grid-column: span 2; }
}
@media (min-width: 1024px){
  .bento{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; }
  .bento-tile.featured{ grid-column: span 2; grid-row: span 2; min-height:auto; }
  .bento-tile:not(.featured){ min-height:auto; }
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-head{ max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:.9rem; }
.section-head p{ color: var(--ink-soft); margin-top:1rem; font-size: var(--fs-lead); }

/* =========================================================
   GRID / CARD SYSTEMS
   ========================================================= */
.grid{ display:grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
@media (min-width:480px){ .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:1024px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

.card{
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(22,35,63,0.25); border-color: transparent; }
.card .icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: var(--cream); color: var(--amber-2); margin-bottom:1.2rem; font-size:1.4rem;
}
.card h3{ font-size:1.25rem; margin-bottom:.6rem; }
.card p{ color: var(--ink-soft); font-size:.96rem; }

/* trip-type card with number */
.trip-card{
  position:relative;
  background: var(--navy);
  color:#fff;
  border-radius: var(--radius);
  padding: clamp(1.6rem,3vw,2.4rem);
  overflow:hidden;
  min-height:230px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .4s var(--ease);
}
.trip-card:hover{ transform: translateY(-6px); }
.trip-card .num{
  position:absolute; top:1.2rem; right:1.4rem;
  font-family:var(--font-mono); font-size:.85rem; color: rgba(255,255,255,0.4);
}
.trip-card h3{ color:#fff; font-size:1.35rem; margin-bottom:.5rem; }
.trip-card p{ color: rgba(255,255,255,0.72); font-size:.92rem; }
.trip-card::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, rgba(242,167,41,0.35), transparent 70%);
}

/* alternating split section */
.split{
  display:grid; gap: 2.5rem; align-items:center;
}
@media (min-width:1024px){
  .split{ grid-template-columns: 1fr 1fr; gap: 5rem; }
  .split.reverse > *:first-child{ order:2; }
}
.split-visual{
  border-radius: var(--radius);
  aspect-ratio: 4/3.4;
  background: linear-gradient(155deg, var(--navy), var(--navy-3));
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.split-visual.amber{ background: linear-gradient(155deg, var(--amber), var(--amber-2)); }
.split-visual.paper{ background: linear-gradient(155deg, #fff, var(--cream)); border:1px solid var(--line); }
.split-visual .glyph{ width:38%; opacity:.9; }
.split-visual img{ width:100%; height:100%; object-fit:cover; }
.split-visual{ box-shadow: 0 30px 60px -24px rgba(14,23,40,0.35); }

/* photo cards */
.photo-card{
  position:relative; border-radius: var(--radius); overflow:hidden; min-height: 320px;
  display:flex; align-items:flex-end; color:#fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.photo-card:hover{ transform: translateY(-6px); box-shadow: 0 28px 56px -22px rgba(14,23,40,0.45); }
.photo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.photo-card:hover img{ transform: scale(1.06); }
.photo-card .overlay{
  position:relative; z-index:2; width:100%; padding:1.6rem;
  background: linear-gradient(0deg, rgba(14,23,40,0.88) 0%, rgba(14,23,40,0.35) 60%, transparent);
}
.photo-card .overlay h3{ color:#fff; font-size:1.35rem; margin-bottom:.4rem; }
.photo-card .overlay p{ color:rgba(255,255,255,0.82); font-size:.92rem; }
.photo-card .num{
  position:absolute; top:1.2rem; right:1.4rem; z-index:2;
  font-family:var(--font-mono); font-size:.8rem; color:#fff;
  background: rgba(14,23,40,0.55); padding:.25em .7em; border-radius:999px; backdrop-filter: blur(4px);
}
.journey-gallery{ display:grid; grid-template-columns:1fr; gap:1rem; }
.journey-gallery .photo-card{ min-height:0; aspect-ratio:4/3; }
@media (min-width:480px){ .journey-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .journey-gallery{ grid-template-columns:repeat(3,1fr); } }

/* card with top image */
.card.has-img{ padding:0; overflow:hidden; }
.card.has-img .card-img{ aspect-ratio: 16/10; overflow:hidden; }
.card.has-img .card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.card.has-img:hover .card-img img{ transform: scale(1.06); }
.card.has-img .card-body{ padding: 1.5rem 1.6rem 1.8rem; }

/* Feature list */
.feature-list{ margin-top:1.8rem; display:flex; flex-direction:column; gap:1rem; }
.feature-list li{ display:flex; gap:.9rem; align-items:flex-start; color: var(--ink-soft); }
.feature-list li .dot{
  flex:none; width:22px; height:22px; border-radius:50%; background: var(--amber); color:var(--navy-3);
  display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; margin-top:2px;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonial-track{ display:grid; gap:1.5rem; }
@media (min-width:900px){ .testimonial-track{ grid-template-columns: repeat(3,1fr);} }
.testimonial{
  background: var(--white); border-radius: var(--radius); padding: 2rem; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:1.2rem;
}
.testimonial .stars{ color: var(--amber-2); letter-spacing:2px; }
.testimonial p{ font-family:var(--font-display); font-size:1.1rem; color: var(--navy); font-style:italic; }
.testimonial .who{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.testimonial .avatar{
  width:42px; height:42px; border-radius:50%; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600;
}
.testimonial .who span{ display:block; font-size:.82rem; color:var(--ink-soft); }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  background: var(--navy);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 6vw, 5rem);
  color:#fff;
  position:relative; overflow:hidden;
  text-align:center;
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(242,167,41,0.25), transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(242,167,41,0.18), transparent 45%);
}
.cta-banner::after{
  content:""; position:absolute; top:50%; right:-120px; width:320px; height:320px; margin-top:-160px;
  border:1.5px dashed rgba(242,167,41,0.3); border-radius:50%;
  animation: slowSpin 40s linear infinite;
}
@keyframes slowSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .cta-banner::after{ animation:none; } }
.cta-banner > *{ position:relative; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: rgba(255,255,255,0.75); max-width:52ch; margin-inline:auto; margin-top:1rem; font-size: var(--fs-lead); }
.cta-banner .hero-actions{ justify-content:center; margin-top:2.2rem; }

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.page-header{
  padding-block: clamp(3rem,7vw,5.5rem) clamp(2rem,5vw,3rem);
  background:
    radial-gradient(circle at 84% 18%, rgba(251,163,25,.28), transparent 24rem),
    radial-gradient(circle at 10% 82%, rgba(251,163,25,.12), transparent 22rem),
    linear-gradient(135deg, var(--cream) 0%, #fff8e8 52%, rgba(251,163,25,.32) 100%);
  border-bottom: 1px solid rgba(21,35,62,.08);
  overflow:hidden;
}
.breadcrumb{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); margin-bottom:1rem; letter-spacing:.06em;}
.breadcrumb a{ color: var(--amber-2); display:inline-block; padding:.3rem .1rem; }
.page-header h1{ font-size: clamp(2.1rem, 5vw, 3.6rem); }
.page-header p{ margin-top:1rem; color:var(--ink-soft); font-size:var(--fs-lead); max-width:62ch; }

/* =========================================================
   ACCORDION (FAQ)
   ========================================================= */
.accordion{ display:flex; flex-direction:column; gap:.9rem; }
.accordion-item{ background:var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.accordion-item summary{
  list-style:none; cursor:pointer; padding: 1.2rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--font-display); font-size:1.05rem; color:var(--navy);
}
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary .plus{
  flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; transition: transform .3s var(--ease);
  color: var(--amber-2); font-weight:700;
}
.accordion-item[open] summary .plus{ transform: rotate(45deg); }
.accordion-item .accordion-body{ padding: 0 1.4rem 1.4rem; color: var(--ink-soft); }

/* =========================================================
   TIMELINE (process steps)
   ========================================================= */
.timeline{ display:grid; gap:1.6rem; counter-reset: step; }
@media (min-width:900px){ .timeline{ grid-template-columns: repeat(4,1fr); } }
.timeline-step{ position:relative; padding-top:2.6rem; }
.timeline-step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size:.85rem; color:#fff;
  width:44px; height:44px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0;
}
.timeline-step h3{ font-size:1.1rem; margin-bottom:.5rem; }
.timeline-step p{ color:var(--ink-soft); font-size:.94rem; }

/* =========================================================
   FORMS
   ========================================================= */
.form-card{
  background:#fff; border-radius: var(--radius); border:1px solid var(--line); padding: clamp(1.6rem, 4vw, 3rem);
}
.form-row{ display:grid; gap:1.1rem; margin-bottom:1.1rem; }
@media (min-width:640px){ .form-row.cols-2{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:.45rem; }
.field input, .field select, .field textarea{
  width:100%; padding: 0.9em 1em; border-radius: 10px; border:1.5px solid var(--line); background: var(--paper);
  transition: border-color .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--amber-2); background:#fff; }
.field textarea{ min-height:130px; resize:vertical; }
.form-note{
  color:var(--ink-soft);
  font-size:.86rem;
  margin:-.5rem 0 1.2rem;
}
.hp-field{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.form-status{ min-height:1.5rem; margin-top:1rem; font-size:.88rem; font-weight:600; }
.form-status.success{ color:#13734a; }
.form-status.error{ color:#b42318; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: #fba319; color: var(--navy-3); padding-block: clamp(3rem,6vw,5rem) 2rem; margin-top: clamp(3rem,8vw,6rem); }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns: 1fr; }
@media (min-width:768px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand{ display:flex; align-items:center; margin-bottom:1rem; }
.footer-brand img{
  width:min(100%, 300px);
  height:auto;
  display:block;
  border-radius:var(--radius-sm);
}
@media (min-width:768px){
  .footer-grid > div:first-child{
    justify-self:start;
    text-align:left;
    width:100%;
  }
  .footer-brand{
    justify-content:flex-start;
  }
  .footer-brand img{
    margin:0;
  }
}
.footer-brand span{ font-family:var(--font-display); color:var(--navy-3); font-size:1.15rem; font-weight:700; }
.footer-col h4{ color:var(--navy-3); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:.25rem;
}
.footer-col a:hover{ color: var(--navy); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{
  border-top:1px solid rgba(14,23,40,0.18); margin-top: 3rem; padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem;
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:1rem; }
.footer-legal a{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 639px){
  .site-footer{ padding-bottom: 5rem; }
}
@media (max-width: 767px){
  .footer-grid{ text-align:center; }
  .footer-brand{ justify-content:center; }
  .footer-brand img{ margin-inline:auto; }
  .footer-grid > div:first-child > p{ margin-inline:auto; }
  .footer-col ul{ align-items:center; }
  .social-row{ justify-content:center; }
  .footer-bottom{ justify-content:center; text-align:center; }
}
.social-row{ display:flex; gap:.7rem; }
.social-row a, .social-row .social-disabled{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(14,23,40,0.3); display:flex; align-items:center; justify-content:center;
  transition: background .3s, border-color .3s;
}
.social-row a:hover{ background: var(--amber); border-color: var(--amber); color:var(--navy-3); }
.social-row .social-disabled{ opacity:.58; cursor:not-allowed; }

/* =========================================================
   FLOATING WHATSAPP CTA
   ========================================================= */
.whatsapp-float{
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 300;
  display:flex; align-items:center; gap:.7rem;
  background: #25D366; color:#fff; border-radius:999px;
  padding: 0.85em 1em; box-shadow: 0 12px 30px -8px rgba(37,211,102,0.6);
  transition: transform .3s var(--ease), box-shadow .3s;
  font-weight:600; font-size:.9rem;
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 36px -8px rgba(37,211,102,0.75); }
.whatsapp-float svg{ width:24px; height:24px; flex:none; }
.whatsapp-float .wa-label{ display:none; }
@media (min-width:640px){ .whatsapp-float .wa-label{ display:inline; } }
.whatsapp-float .pulse{
  position:absolute; inset:0; border-radius:999px; border:2px solid #25D366; animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.35); opacity:0; } }

/* back to top */
.back-top{
  position:fixed; left: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index:290;
  width:44px; height:44px; border-radius:50%; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px); transition: all .35s var(--ease);
}
.back-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center{ text-align:center; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap; border:0;
}
.visually-hidden:focus{
  position:fixed;
  top:1rem;
  left:1rem;
  z-index:500;
  width:auto;
  height:auto;
  margin:0;
  padding:.75rem 1rem;
  overflow:visible;
  clip:auto;
  white-space:normal;
  border-radius:var(--radius-sm);
  background:var(--navy);
  color:var(--white);
  box-shadow:0 10px 24px rgba(14,23,40,.25);
}
.mt-0{ margin-top:0 !important; }
.bg-cream{ background: var(--cream); }
.bg-navy{ background: var(--navy); color:#fff; }
.bg-navy h2, .bg-navy h3{ color:#fff; }
.bg-cream-amber{
  background:
    radial-gradient(circle at 86% 18%, rgba(251,163,25,.24), transparent 24rem),
    radial-gradient(circle at 12% 88%, rgba(251,163,25,.13), transparent 22rem),
    linear-gradient(135deg, var(--paper) 0%, var(--cream) 44%, rgba(251,163,25,.26) 100%);
  border-block:1px solid rgba(21,35,62,.08);
}
.bg-amber{
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.34), transparent 22rem),
    linear-gradient(135deg, #fba319, #f7b842);
  color: var(--navy-3);
}
.bg-amber h2, .bg-amber h3{ color: var(--navy-3); }
.bg-amber .kicker{ color: var(--navy); }
.bg-amber .kicker::before{ background: var(--navy); }
.safety-panel{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--navy);
  color:#fff;
  padding:clamp(2rem, 5vw, 4rem);
  box-shadow:0 28px 70px -38px rgba(14,23,40,.72);
}
.safety-panel::before{
  content:"";
  position:absolute;
  inset:auto -12% -38% auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(251,163,25,.22);
}
.safety-panel > *{ position:relative; }
.safety-panel h2, .safety-panel h3{ color:#fff; }
.safety-panel p, .safety-panel li{ color:rgba(255,255,255,.82); }
.safety-chip-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:2rem;
}
.safety-chip{
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm);
  padding:1.1rem;
  background:rgba(255,255,255,.07);
}
.safety-chip strong{ display:block; color:var(--amber); margin-bottom:.35rem; }
@media (min-width:720px){
  .safety-chip-grid{ grid-template-columns:repeat(3,1fr); }
}
.divider{ height:1px; background: var(--line); width:100%; }

/* reveal-on-scroll */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* stagger children */
.stagger > *{ transition-delay: calc(var(--i,0) * 80ms); }

/* auto-stagger for common repeating containers: cascading reveal */
.grid > .reveal:nth-child(1), .bento > .reveal:nth-child(1), .testimonial-track > .reveal:nth-child(1), .timeline > .reveal:nth-child(1), .accordion > .reveal:nth-child(1){ transition-delay: 0ms; }
.grid > .reveal:nth-child(2), .bento > .reveal:nth-child(2), .testimonial-track > .reveal:nth-child(2), .timeline > .reveal:nth-child(2), .accordion > .reveal:nth-child(2){ transition-delay: 90ms; }
.grid > .reveal:nth-child(3), .bento > .reveal:nth-child(3), .testimonial-track > .reveal:nth-child(3), .timeline > .reveal:nth-child(3), .accordion > .reveal:nth-child(3){ transition-delay: 180ms; }
.grid > .reveal:nth-child(4), .bento > .reveal:nth-child(4), .timeline > .reveal:nth-child(4){ transition-delay: 270ms; }
.grid > .reveal:nth-child(5){ transition-delay: 360ms; }
.grid > .reveal:nth-child(6){ transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce){
  .grid > .reveal, .bento > .reveal, .testimonial-track > .reveal, .timeline > .reveal, .accordion > .reveal{ transition-delay:0ms !important; }
}

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--amber-2), var(--amber));
  z-index: 400; pointer-events:none;
  transition: width .1s linear;
}

/* image settle-in (subtle Ken Burns on scroll reveal) */
.split-visual img, .card-img img{ transition: transform 1.1s var(--ease); transform: none; }
.js .split-visual img, .js .card-img img{ transform: scale(1.08); }
.js .split-visual.reveal.in img, .js .reveal.in .card-img img{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .split-visual img, .card-img img{ transition:none; transform:none !important; }
}

@media (max-width: 640px){
  section{ padding-block: clamp(2.6rem, 12vw, 4rem); }
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-hero{
  padding:clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 85% 20%, rgba(251,163,25,.3), transparent 30rem),
    radial-gradient(circle at 12% 84%, rgba(251,163,25,.13), transparent 22rem),
    linear-gradient(135deg, var(--cream) 0%, #fff8e8 52%, rgba(251,163,25,.34) 100%);
  border-bottom: 1px solid rgba(21,35,62,.08);
  text-align:center;
}
.gallery-hero h1{
  max-width:13ch;
  margin:.75rem auto 0;
  font-size:clamp(2.5rem, 7vw, 5.8rem);
  line-height:.96;
}
.gallery-hero p{
  max-width:62ch;
  margin:1.5rem auto 0;
  color:var(--ink-soft);
  font-size:var(--fs-lead);
}
.gallery-section{ padding:clamp(3rem, 7vw, 6rem) 0; }
.gallery-toolbar{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:2rem;
}
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.65rem; }
.gallery-filter{
  min-height:44px;
  padding:.65rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--navy);
  font:600 .86rem/1 var(--font-body);
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.gallery-filter:hover{ border-color:var(--amber); transform:translateY(-1px); }
.gallery-filter.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.gallery-count{ color:var(--ink-soft); font-size:.86rem; }
.gallery-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-auto-rows:300px;
  gap:1rem;
}
.gallery-card{
  position:relative;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:var(--radius);
  background:var(--navy);
  color:#fff;
  text-align:left;
  box-shadow:0 18px 45px -24px rgba(14,23,40,.55);
  cursor:zoom-in;
}
.gallery-card::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:inherit;
  pointer-events:none;
}
.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease), filter .7s var(--ease);
}
.gallery-card:hover img{ transform:scale(1.045); filter:saturate(1.08); }
.gallery-card-overlay{
  position:absolute;
  inset:auto 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  padding:4.5rem 1.25rem 1.25rem;
  background:linear-gradient(0deg, rgba(8,15,28,.92), rgba(8,15,28,0));
}
.gallery-card-category{
  color:var(--amber);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.gallery-card strong{ font-size:clamp(1.15rem, 3vw, 1.6rem); line-height:1.05; }
.gallery-card-meta{ color:rgba(255,255,255,.75); font-size:.78rem; }
.gallery-message{
  grid-column:1 / -1;
  padding:2rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  text-align:center;
}
.gallery-cta{ padding:0 0 clamp(4rem, 8vw, 7rem); }

.gallery-lightbox{
  width:min(94vw, 1100px);
  max-width:none;
  max-height:92vh;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:var(--radius);
  background:#08101e;
  color:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.gallery-lightbox::backdrop{
  background:rgba(4,9,18,.84);
  backdrop-filter:blur(8px);
}
.gallery-lightbox figure{
  display:grid;
  max-height:92vh;
  margin:0;
}
.gallery-lightbox img{
  width:100%;
  max-height:72vh;
  object-fit:contain;
  border-radius:var(--radius) var(--radius) 0 0;
  background:#050a12;
}
.gallery-lightbox figcaption{ padding:1.25rem 1.5rem 1.5rem; }
.gallery-lightbox figcaption > span{
  color:var(--amber);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.gallery-lightbox h2{ margin:.35rem 0; font-size:clamp(1.35rem, 3vw, 2rem); }
.gallery-lightbox p{ color:rgba(255,255,255,.68); font-size:.86rem; }
.gallery-lightbox-close{
  position:absolute;
  top:-.8rem;
  right:-.8rem;
  z-index:2;
  width:44px;
  height:44px;
  border:2px solid rgba(255,255,255,.45);
  border-radius:50%;
  background:var(--paper);
  color:var(--navy);
  font-size:1.6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
@media (min-width:640px){
  .gallery-toolbar{ flex-direction:row; justify-content:space-between; align-items:center; }
  .gallery-count{ flex-shrink:0; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:340px; }
}
@media (min-width:1024px){
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:320px; }
  .gallery-card.featured{ grid-column:span 2; }
}
@media (max-width:767px){
  .gallery-hero h1{ font-size:2.5rem; }
  .gallery-card-overlay{ padding-inline:1rem; }
  .gallery-lightbox-close{ top:.65rem; right:.65rem; }
}

/* analytics consent */
.cookie-banner{
  position:fixed;
  z-index:450;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(5rem,9vw,6.5rem);
  width:min(430px, calc(100% - 2rem));
  padding:1.1rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  background:rgba(14,23,40,.96);
  color:#fff;
  box-shadow:0 24px 60px rgba(14,23,40,.35);
  backdrop-filter:blur(14px);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0 0 .9rem; color:rgba(255,255,255,.86); font-size:.86rem; }
.cookie-banner > div{ display:flex; flex-wrap:wrap; gap:.6rem; }