/* =========================================================================
   FRIENDS TAXI — bright luxury frontend
   Warm ivory + gold. Space Grotesk + Manrope. Premium & cinematic.
   ========================================================================= */

:root {
  --gold: #FFC107;
  --gold-2: #FFD35A;
  --gold-deep: #E0A800;
  --gold-ink: #B07C00;          /* darker gold for text on light */
  --bg: #faf8f3;                /* warm ivory */
  --bg-2: #f1ece1;              /* alt section */
  --panel: #ffffff;
  --card: #ffffff;
  --card-2: #fbfaf6;
  --text: #16150f;              /* near-black warm */
  --muted: #5f5d55;
  --muted-2: #918e83;
  --success: #21b45e;
  --line: rgba(20, 18, 10, 0.10);
  --line-2: rgba(20, 18, 10, 0.16);
  --glass: rgba(255, 255, 255, 0.6);
  --glass-2: rgba(255, 255, 255, 0.82);

  --grad-gold: linear-gradient(135deg, #FFD35A 0%, #FFC107 45%, #E0A800 100%);
  --glow-gold: 0 20px 55px -18px rgba(255, 193, 7, 0.6);

  --radius: 22px;
  --radius-sm: 14px;
  --container: 1240px;
  --nav-h: 78px;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(48% 40% at 84% 6%, rgba(255, 193, 7, 0.14), transparent 60%),
    radial-gradient(42% 42% at 8% 88%, rgba(255, 193, 7, 0.08), transparent 60%),
    var(--bg);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--gold); color: #1a1400; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.section { padding: 140px 0; position: relative; }
.section--tight { padding: 96px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.eyebrow.center::before, .eyebrow.center::after { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.eyebrow.center::after { background: linear-gradient(90deg, var(--gold-deep), transparent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.display { font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.98; letter-spacing: -0.03em; font-weight: 700; }
.grad-text { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head { max-width: 620px; margin-bottom: 64px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 18px 0 18px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.lead { color: var(--muted); font-size: 1.1rem; }

/* ---------- buttons ---------- */
.btn {
  --pad: 17px 30px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
  padding: var(--pad); border-radius: 100px; position: relative; isolation: isolate; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s ease, color 0.3s ease;
  will-change: transform;
}
.btn svg { width: 20px; height: 20px; }
.btn--gold { background: var(--grad-gold); color: #1a1400; box-shadow: var(--glow-gold); }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-130%);
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent);
}
.btn--gold:hover { transform: translateY(-4px); box-shadow: 0 28px 66px -18px rgba(255, 193, 7, 0.75); }
.btn--gold:hover::after { transform: translateX(130%); transition: transform 0.8s var(--ease); }
.btn--glass { background: var(--glass); color: var(--text); border: 1px solid var(--line-2); backdrop-filter: blur(14px); }
.btn--glass:hover { transform: translateY(-4px); background: var(--glass-2); }
.btn--whats { background: linear-gradient(135deg, #2fd35a, #1faf54); color: #fff; box-shadow: 0 18px 45px -16px rgba(46, 204, 113, 0.55); }
.btn--whats:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -16px rgba(46, 204, 113, 0.7); }
.btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: #1a1400; }
.btn--dark { background: #16150f; color: #fff; }
.btn--dark:hover { transform: translateY(-4px); box-shadow: 0 24px 55px -20px rgba(0,0,0,0.5); }
.btn--lg { --pad: 20px 38px; font-size: 1rem; }
.btn--block { width: 100%; }

/* =========================================================================
   NAV — bright glass
   ========================================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s ease, height 0.4s ease, box-shadow 0.4s ease;
}
.nav::before { /* soft top fade so the logo/links read over any photo */
  content: ""; position: absolute; inset: 0; bottom: -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.12) 55%, transparent);
  transition: opacity 0.5s ease;
}
.nav.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); box-shadow: 0 10px 30px -22px rgba(0,0,0,0.35); height: 66px; }
.nav.scrolled::before { opacity: 0; }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: 46px; width: auto; transition: transform 0.4s var(--ease); }
.nav__logo .logo-dark { display: none; }
.nav.scrolled .logo-light2 { display: none; }
.nav.scrolled .logo-dark { display: block; }
.nav__logo:hover img { transform: scale(1.05); }
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__links a { padding: 9px 16px; border-radius: 100px; font-size: 0.92rem; color: rgba(255,255,255,0.9); transition: color 0.25s, background 0.25s; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.nav__links a:hover { color: #fff; background: rgba(255,255,255,0.16); }
.nav.scrolled .nav__links a { color: var(--muted); text-shadow: none; }
.nav.scrolled .nav__links a:hover { color: var(--text); background: rgba(20,18,10,0.05); }
.nav__cta { display: flex; align-items: center; gap: 16px; }
.nav__phone { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.nav__phone svg { width: 18px; height: 18px; color: var(--gold); }
.nav__phone:hover { color: var(--gold); }
.nav.scrolled .nav__phone { color: var(--text); text-shadow: none; }
.nav.scrolled .nav__phone svg { color: var(--gold-deep); }
.nav.scrolled .nav__phone:hover { color: var(--gold-ink); }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.4); flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); }
.burger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.2s; }
.nav.scrolled .burger { border-color: var(--line-2); background: rgba(255,255,255,0.6); }
.nav.scrolled .burger span { background: var(--text); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* when the mobile menu is open, the nav sits on the light overlay -> dark logo + dark X */
.menu-open .nav__logo .logo-light2 { display: none; }
.menu-open .nav__logo .logo-dark { display: block; }
.menu-open .nav::before { opacity: 0; }
.menu-open .burger { border-color: var(--line-2); background: rgba(20,18,10,0.04); }
.menu-open .burger span { background: var(--text); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95; background: rgba(250, 248, 243, 0.97); backdrop-filter: blur(22px);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 100px 32px 44px;
  transform: translateY(-100%); transition: transform 0.55s var(--ease); visibility: hidden;
}
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu a { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.mobile-menu a:last-of-type { border: none; }
.mobile-menu .btn { margin-top: 22px; }

/* =========================================================================
   HERO — photo slider (text stays light over photo; card is bright white)
   ========================================================================= */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 40px) 0 60px; overflow: hidden; }
.hero__slider { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__slide.active { opacity: 1; }
.hero__slide.active .hero__slide-img { animation: kenburns 8s ease-out forwards; }
.hero__slide-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.16) translate(-1.5%, -1%); } }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.18) 46%, rgba(10,10,10,0.30) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.28) 0%, rgba(10,10,10,0.08) 38%, rgba(10,10,10,0.42) 100%);
}
.hero__orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; mix-blend-mode: screen; }
.hero__orb--1 { width: 44vw; height: 44vw; left: -10vw; top: -12vw; background: radial-gradient(circle, rgba(255,193,7,0.4), transparent 70%); animation: orbFloat 16s ease-in-out infinite; }
.hero__orb--2 { width: 34vw; height: 34vw; right: -6vw; bottom: -10vw; background: radial-gradient(circle, rgba(255,193,7,0.28), transparent 70%); animation: orbFloat 20s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4%, 6%); } }
#heroParticles { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.7; }

.hero .container { position: relative; z-index: 3; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; width: 100%; }
.hero .container.hero--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--solo .hero__copy { max-width: 800px; }
.hero--solo .hero__actions { justify-content: center; }
.hero--solo .hero__trust { justify-content: center; }
.hero--solo .hero__sub { margin-left: auto; margin-right: auto; }
.hero__copy { max-width: 620px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(12px);
  font-size: 0.82rem; color: #fff; margin-bottom: 26px;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #34e07f; box-shadow: 0 0 0 0 rgba(52,224,127,0.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,224,127,0.55); } 70% { box-shadow: 0 0 0 11px rgba(52,224,127,0); } 100% { box-shadow: 0 0 0 0 rgba(52,224,127,0); } }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.hero__sub { color: rgba(255,255,255,0.9); font-size: 1.18rem; max-width: 30rem; margin: 26px 0 34px; text-shadow: 0 1px 16px rgba(0,0,0,0.35); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 34px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.hero__trust svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

.hero__dots { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; }
.hero__dots button { width: 30px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.4); transition: background 0.3s, width 0.3s; }
.hero__dots button.active { width: 46px; background: var(--gold); }

/* floating bright booking card */
.book-card {
  position: relative; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 26px; padding: 30px;
  box-shadow: 0 44px 100px -34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: cardFloat 7s ease-in-out infinite;
}
@keyframes cardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.book-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.book-card__head h3 { font-size: 1.4rem; }
.book-card__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; color: var(--muted); background: rgba(20,18,10,0.04); border: 1px solid var(--line); padding: 6px 12px; border-radius: 100px; }
.book-card__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* form fields (bright) */
.field { position: relative; margin-bottom: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label {
  position: absolute; left: 16px; top: 15px; font-size: 0.95rem; color: var(--muted-2);
  pointer-events: none; transition: transform 0.2s var(--ease), color 0.2s, font-size 0.2s; transform-origin: left;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 22px 16px 10px; border: 1px solid var(--line-2); border-radius: 14px;
  background: #fbfaf7; color: var(--text); font-family: var(--font-body); font-size: 0.98rem;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.field select { padding-top: 20px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f5d55' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field textarea { min-height: 74px; resize: vertical; padding-top: 22px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.16);
}
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field.filled label {
  transform: translateY(-11px) scale(0.78); color: var(--gold-ink);
}
.field select + label { transform: translateY(-11px) scale(0.78); color: var(--muted-2); }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 14px; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* booking success */
.booking-success { text-align: center; padding: 10px 4px; }
.booking-success__badge { width: 72px; height: 72px; border-radius: 50%; margin: 6px auto 18px; display: grid; place-items: center; background: rgba(33,180,94,0.12); color: var(--success); border: 1px solid rgba(33,180,94,0.4); animation: pop 0.5s var(--ease) both; }
.booking-success__badge svg { width: 34px; height: 34px; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.booking-success h3 { font-size: 1.4rem; margin-bottom: 6px; }
.booking-success .hint { color: var(--muted); font-size: 0.9rem; }
.booking-ref { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.1em; color: var(--gold-ink); background: rgba(255,193,7,0.12); border: 1px dashed rgba(224,168,0,0.6); border-radius: 14px; padding: 15px; margin: 16px 0 20px; }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee { border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding: 22px 0; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 34s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 56px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--muted-2); text-transform: uppercase; }
.marquee__track span::after { content: "✦"; color: var(--gold-deep); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================================
   STATS
   ========================================================================= */
.stats { background: var(--bg-2); border-block: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.stat { position: relative; padding: 14px 8px; text-align: center; }
.stat::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--line); }
.stat:first-child::before { display: none; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; }
.stat__lab { margin-top: 12px; font-size: 0.9rem; letter-spacing: 0.02em; color: var(--muted); }

/* =========================================================================
   SERVICES — editorial photo bento
   ========================================================================= */
.svc-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 212px; gap: 16px; }
.svc-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); color: #fff;
  isolation: isolate; box-shadow: 0 30px 60px -46px rgba(0,0,0,0.5);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease; }
.svc-tile__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform 0.6s var(--ease); }
.svc-tile__grad { position: absolute; inset: 0; z-index: 1; transition: background 0.4s ease;
  background: linear-gradient(to top, rgba(8,8,6,0.94) 0%, rgba(8,8,6,0.6) 34%, rgba(8,8,6,0.14) 64%, rgba(8,8,6,0) 100%); }
.svc-tile__content { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 24px 26px 22px; }
.svc-tile__cat { display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.svc-tile h3 { font-size: 1.34rem; line-height: 1.14; margin: 0 0 9px; color: #fff; }
.svc-tile p { color: rgba(255,255,255,0.76); font-size: 0.94rem; line-height: 1.5; margin: 0 0 15px; max-width: 40ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-tile__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display);
  font-weight: 600; font-size: 0.84rem; color: #fff; }
.svc-tile__link svg { width: 16px; height: 16px; color: var(--gold); transition: transform 0.35s var(--ease); }
/* optional CMS price — only rendered when the client sets one */
.svc-tile__price { margin-left: 10px; color: var(--gold); font-weight: 700; font-size: 0.82rem; }
.svc-tile:hover { transform: translateY(-4px); box-shadow: 0 46px 80px -44px rgba(0,0,0,0.62); }
.svc-tile:hover .svc-tile__media { transform: scale(1.05); }
.svc-tile:hover .svc-tile__link svg { transform: translateX(5px); }
.svc-tile:hover .svc-tile__grad { background: linear-gradient(to top, rgba(8,8,6,0.95) 0%, rgba(24,19,4,0.62) 40%, rgba(24,19,4,0.16) 78%, rgba(8,8,6,0) 100%); }
.svc-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Size is chosen per card in the admin (Services → Card size), so placement is
   driven by a class rather than by position. Every tile is half the 12-column
   grid by default, which keeps each column edge on the same gutter no matter
   what mix of sizes the client picks. "dense" backfills any hole a tall tile
   would otherwise leave, so the block never shows a gap. */
.svc-bento { grid-auto-flow: dense; }
.svc-tile { grid-column: span 6; grid-row: span 1; }
.svc-tile--tall { grid-row: span 2; }              /* double height, half width */
.svc-tile--wide { grid-column: span 12; }          /* full width, single height */
.svc-tile--large { grid-column: span 12; grid-row: span 2; }  /* full width, double */
/* Bigger cards get room for bigger type. */
.svc-tile--tall .svc-tile__content,
.svc-tile--large .svc-tile__content { padding: 32px 34px 28px; }
.svc-tile--tall .svc-tile__cat,
.svc-tile--large .svc-tile__cat { font-size: 0.74rem; }
.svc-tile--tall h3,
.svc-tile--large h3 { font-size: 1.85rem; }
.svc-tile--tall p,
.svc-tile--large p { font-size: 1rem; -webkit-line-clamp: 3; max-width: 46ch; }

/* section header — scoped to services only (does not touch global h2 / other sections) */
#services .section-head { margin-bottom: 46px; }
#services .section-head h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }

/* delivery callout */
.delivery { margin-top: 16px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center;
  background:
    linear-gradient(100deg, #16150e 0%, #16150e 50%, rgba(18,17,11,0.94) 72%, rgba(18,17,11,0.9) 100%),
    url('https://images.pexels.com/photos/8989470/pexels-photo-8989470.jpeg?auto=compress&cs=tinysrgb&w=1100') center right / cover no-repeat,
    #14130d;
  color: #fff; border-radius: var(--radius); padding: 29px 46px;
  position: relative; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(0,0,0,0.6); }
.delivery::before { content: ""; position: absolute; width: 320px; height: 320px; right: -70px; top: -90px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,193,7,0.25), transparent 66%); }
.delivery > * { position: relative; }
.delivery__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.delivery__eyebrow svg { width: 18px; height: 18px; }
.delivery__text h3 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin: 12px 0 10px; color: #fff; }
.delivery__text p { color: rgba(255,255,255,0.72); font-size: 0.96rem; max-width: 46ch; }
.delivery__action { text-align: right; }
.delivery__num { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.6rem; color: #fff; transition: color 0.25s; }
.delivery__num svg { width: 20px; height: 20px; color: var(--gold); }
.delivery__num b { font-weight: inherit; }
.delivery__num:hover { color: var(--gold); }
.delivery__btns { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .delivery { grid-template-columns: 1fr; gap: 22px; padding: 32px 26px; }
  .delivery__action { text-align: left; }
  .delivery__num { font-size: 1.5rem; }
  .delivery__btns { justify-content: flex-start; flex-direction: column; }
  .delivery__btns .btn { width: 100%; flex: none; }
}

/* =========================================================================
   FLEET — carousel
   ========================================================================= */
.fleet { background: var(--bg-2); }
.fleet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; }
.fleet__nav { display: flex; gap: 12px; }
.fleet__nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--text); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s, transform 0.25s, color 0.25s; }
.fleet__nav button:hover { background: var(--gold); color: #1a1400; border-color: var(--gold); transform: scale(1.05); }
.fleet__nav button svg { width: 22px; height: 22px; }
/* overflow-y is pinned to hidden on purpose: setting overflow-x to auto makes
   the other axis compute to auto too, which let the carousel scroll ~26px
   vertically inside itself. The padding leaves room for the hover lift so
   clipping the Y axis does not cut the top of a raised card. */
.fleet__track { display: flex; align-items: stretch; gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 10px 0 16px; scrollbar-width: none; }
.fleet__track::-webkit-scrollbar { display: none; }
.fleet-card2 { position: relative; flex: 0 0 380px; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform 0.45s var(--ease), box-shadow 0.45s ease; box-shadow: 0 24px 46px -34px rgba(0,0,0,0.3); }
.fleet-card2:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 44px 70px -40px rgba(0,0,0,0.35); }
/* optional CMS duration/price chips — only rendered when the client sets them */
.fleet-card2__meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
/* Placeholder chip for a tour with no duration/price — holds the row open so
   every description starts on the same line (see renderTours). */
.fleet-card2__meta-i--ghost { visibility: hidden; }
.fleet-card2__meta-i { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.fleet-card2__meta-i--price { color: var(--gold-ink); border-color: rgba(255,193,7,0.45); }
.fleet-card2__img { height: 240px; overflow: hidden; position: relative; }
.fleet-card2__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.55)); }
.fleet-card2__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.fleet-card2:hover .fleet-card2__img img { transform: scale(1.08); }
.fleet-card2__seats { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; padding: 6px 12px; border-radius: 100px; background: rgba(12,12,12,0.55); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); }
/* Column layout so every card in the row lines up: the description takes the
   slack and the button is pinned to the bottom, so cards with a price/duration
   row and cards without still have their buttons on the same line. */
.fleet-card2 { display: flex; flex-direction: column; }
.fleet-card2__body { padding: 22px 24px 26px; position: relative; display: flex; flex-direction: column; flex: 1; }
.fleet-card2__body h3 { font-size: 1.3rem; margin-bottom: 8px; }
.fleet-card2__body p { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; flex: 1; }
.fleet-card2__body .btn { margin-top: auto; }

/* =========================================================================
   STORY (why choose us)
   ========================================================================= */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 120px; }
.story:last-child { margin-bottom: 0; }
.story--rev .story__media { order: 2; }
.story__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.2; box-shadow: 0 50px 90px -46px rgba(0,0,0,0.45); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.story:hover .story__media img { transform: scale(1.06); }
.story__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,193,7,0.1), transparent 55%); }
.story__badge { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: rgba(255,255,255,0.9); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.4); }
.story__badge .n { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--gold-ink); line-height: 1; }
.story__badge .t { font-size: 0.8rem; color: var(--muted); }
/* Story headings are <h3> (they are sub-headings of the section's own <h2>),
   so they need the h2 type scale restored — h3 has no size of its own. These
   two declarations reproduce the previous look exactly. */
.story__body h3 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 18px 0 20px; }
.story__body p { color: var(--muted); font-size: 1.05rem; margin-bottom: 18px; }
.story__list { display: grid; gap: 12px; margin-top: 22px; }
.story__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); }
.story__list svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; margin-top: 1px; }

/* feature list (from CMS) — borderless, editorial */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 52px; margin-top: 86px; padding-top: 64px; border-top: 1px solid var(--line); }
.feat { display: flex; gap: 18px; align-items: flex-start; background: none; border: none; box-shadow: none; padding: 0; }
.feat__ic { width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold-deep); background: none; border: none; flex: none; }
.feat__ic svg { width: 30px; height: 30px; }
.feat__body h3 { font-size: 1.1rem; margin-bottom: 7px; }
.feat__body p { color: var(--muted); font-size: 0.92rem; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.tst { background: var(--bg-2); }
/* A wrapping grid, not a carousel. This used to be a horizontal scroller with
   fixed 420px cards, a hidden scrollbar and — unlike Tours — no arrow buttons,
   so the last review was sliced off at the viewport edge with no way to reach
   it. Cards now share the row and wrap, so nothing is ever cut off however many
   reviews the client adds: three across on desktop, two on tablet, one on a
   phone, all handled by auto-fit with no breakpoints to maintain. */
.tst__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; padding: 10px 0 16px; align-items: stretch; }
.tst-card { padding: 34px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 46px -34px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
/* pushes the reviewer's name to the bottom so it lines up across the row even
   when the quotes are different lengths */
.tst-card p { flex: 1; }
.tst-card__stars { display: flex; gap: 3px; color: var(--gold-deep); margin-bottom: 18px; font-size: 1.2rem; }
.tst-card p { font-size: 1.1rem; line-height: 1.6; color: var(--text); margin-bottom: 26px; }
.tst-card__who { display: flex; align-items: center; gap: 14px; }
.tst-card__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.tst-card__who b { font-family: var(--font-display); font-size: 1rem; display: block; }
.tst-card__who span { font-size: 0.85rem; color: var(--muted); }

/* =========================================================================
   CTA — bright gold
   ========================================================================= */
.cta-final { position: relative; overflow: hidden; background: var(--grad-gold); }
.cta-final__bg { display: none; }
.cta-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.4), transparent 60%); pointer-events: none; }
.cta-final .container { position: relative; z-index: 1; text-align: center; }
.cta-final .eyebrow { color: #6b4e00; }
.cta-final .eyebrow::before, .cta-final .eyebrow::after { background: linear-gradient(90deg, transparent, #6b4e00); }
.cta-final h2 { font-size: clamp(2.6rem, 7vw, 5.5rem); margin-bottom: 22px; color: #1a1400; }
.cta-final .grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
.cta-final p { color: rgba(26,20,0,0.72); font-size: 1.2rem; max-width: 40rem; margin: 0 auto 40px; font-weight: 500; }
.cta-final__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   FOOTER — light
   ========================================================================= */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 90px 0 32px; }
.footer__logo img { height: 66px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: var(--muted); font-size: 0.96rem; max-width: 28rem; }
/* The column titles are <h3> (an <h4> after the page's last <h2> would skip a
   heading level). Same declarations as before, so the footer looks identical. */
.footer h3 { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); margin-bottom: 20px; }
.footer__links { display: grid; gap: 12px; }
.footer__links a, .footer__links span { color: var(--muted); font-size: 0.95rem; transition: color 0.25s; }
.footer__links a:hover { color: var(--gold-ink); }
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--text); transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.socials a:hover { transform: translateY(-4px); background: var(--gold); color: #1a1400; }
.socials svg { width: 19px; height: 19px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted-2); }
.footer__bottom a { color: var(--muted-2); }
.footer__bottom a:hover { color: var(--gold-ink); }

/* sticky mobile call bar */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; box-shadow: 0 -10px 30px -12px rgba(0,0,0,0.25); }
.callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; }
.callbar a svg { width: 19px; height: 19px; }
.callbar .c-call { background: var(--grad-gold); color: #1a1400; }
.callbar .c-whats { background: linear-gradient(135deg, #2fd35a, #1faf54); color: #fff; }

/* =========================================================================
   REVEAL
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal[data-anim="left"] { transform: translateX(-48px); }
.reveal[data-anim="right"] { transform: translateX(48px); }
.reveal[data-anim="scale"] { transform: scale(0.92); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero__book { max-width: 480px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  /* tablet bento: 2 columns. The client's size choice still applies, but the
     "wide" sizes now mean both columns rather than 12 of 12. */
  .svc-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
  .svc-tile { grid-column: span 1; grid-row: span 1; }
  .svc-tile--tall { grid-row: span 2; }
  .svc-tile--wide { grid-column: 1 / -1; }
  .svc-tile--large { grid-column: 1 / -1; grid-row: span 2; }
  .svc-tile--tall h3, .svc-tile--large h3 { font-size: 1.7rem; }
  .story { grid-template-columns: 1fr; gap: 32px; }
  .story--rev .story__media { order: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; }
@media (max-width: 860px) {
  .nav__links, .nav__phone { display: none; }
  .burger { display: flex; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .stat:nth-child(-n+2)::before { display: none; }
  .section { padding: 96px 0; }
}
@media (max-width: 620px) {
  .container { padding: 0 20px; }
  .section { padding: 78px 0; }
  .feat-grid { grid-template-columns: 1fr; }
  /* mobile bento: one column, every tile full width and one row tall. Sizes
     chosen in the admin are intentionally ignored here — on a phone there is
     only one sensible layout. */
  .svc-bento { grid-template-columns: 1fr; grid-auto-rows: 224px; gap: 14px; }
  .svc-tile, .svc-tile--tall, .svc-tile--wide, .svc-tile--large { grid-column: 1 / -1; grid-row: span 1; }
  .svc-tile--tall h3, .svc-tile--large h3 { font-size: 1.7rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1; }
  .field-row { grid-template-columns: 1fr; }
  .fleet-card2 { flex-basis: 82vw; }   /* Tours is still a carousel; Reviews is a grid */
  .callbar { display: flex; }
  body { padding-bottom: 56px; }
  .nav__cta .btn:not(.burger) { display: none; }
  .footer__bottom { justify-content: center; text-align: center; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__slide.active .hero__slide-img { animation: none !important; }
}