@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Franklin:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');


:root {
  --forest: #173d33;
  --forest-dark: #102f28;
  --cream: #f5f1e8;
  --paper: #fbfaf6;
  --terracotta: #c86e49;
  --sand: #ddd3c2;
  --ink: #1d2824;
  --muted: #6b756f;
  --line: #d8d9d2;
}


  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
  * { box-sizing: border-box; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img { display: block; }
  ::selection { background: var(--terracotta); color: white; }

.navbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5vw; background: var(--paper); position: relative; z-index: 20; border-bottom: 1px solid rgba(0,0,0,.06); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--forest); font-family: 'Libre Franklin'; font-size: 13px; letter-spacing: .16em; font-weight: 600; white-space: nowrap; }
.brand i { display: block; font-family: 'Playfair Display'; font-size: 11px; letter-spacing: .08em; font-weight: 500; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50% 50% 46% 54%; background: var(--forest); color: white; font-family: 'Playfair Display'; font-size: 20px; font-style: italic; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 13px; transition: color .2s; }
.nav-links a:hover { color: var(--terracotta); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-whatsapp { color: var(--forest); display: grid; place-items: center; padding: 8px; }
.btn { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .2s, background .2s, color .2s; font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--terracotta); color: white; min-height: 44px; padding: 0 21px; }
.btn-primary:hover { background: #b85e3d; }
.btn-outline { background: transparent; color: var(--forest); border: 1px solid var(--forest); min-height: 42px; padding: 0 17px; }
.btn-light { background: rgba(255,255,255,.14); color: white; border: 1px solid rgba(255,255,255,.38); min-height: 52px; padding: 0 22px; backdrop-filter: blur(8px); }
.btn-icon { background: transparent; color: inherit; width: 40px; height: 40px; padding: 0; border: 1px solid currentColor; }
.menu-toggle { display: none; }

.hero { height: calc(100vh - 82px); min-height: 650px; position: relative; color: white; overflow: hidden; }
.hero > img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,31,27,.72) 0%, rgba(9,34,29,.35) 48%, rgba(9,24,21,.1) 75%), linear-gradient(0deg, rgba(0,0,0,.3), transparent 45%); }
.hero-content { position: absolute; left: 8vw; top: 50%; transform: translateY(-51%); max-width: 740px; }
.hero-kicker, .eyebrow { display: block; text-transform: uppercase; letter-spacing: .25em; font-size: 10px; font-weight: 600; margin-bottom: 24px; }
.hero-kicker::before, .eyebrow::before { content: ''; display: inline-block; width: 32px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 13px; }
.hero h1 { font-family: 'Playfair Display'; font-size: clamp(60px, 7.4vw, 112px); line-height: .88; letter-spacing: -.04em; font-weight: 500; margin: 0; }
.hero h1 em { color: #e7cdbd; font-weight: 500; }
.hero-content > p { max-width: 580px; font-size: 17px; line-height: 1.7; margin: 31px 0; color: rgba(255,255,255,.86); }
.hero-buttons { display: flex; gap: 13px; }
.hero-btn { min-height: 52px; }
.hero-note { position: absolute; right: 5.5vw; bottom: 50px; display: flex; align-items: center; gap: 15px; font-size: 12px; }
.hero-note > span { border: 1px solid rgba(255,255,255,.5); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.hero-note div { display: flex; flex-direction: column; gap: 3px; }
.hero-note small { opacity: .7; }
.scroll-hint { position: absolute; left: 5.5vw; bottom: 46px; font-size: 8px; letter-spacing: .24em; display: flex; align-items: center; gap: 12px; }
.scroll-hint span { width: 38px; height: 1px; background: white; }

.trust-strip { background: var(--forest); color: white; min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 8vw; font-size: 12px; }
.trust-strip p { color: rgba(255,255,255,.75); }
.trust-strip b { color: white; }
.trust-strip > div { display: flex; gap: 40px; }
.trust-strip > div span::before { content: '•'; color: #d5b17d; margin-right: 10px; }

.section { padding: 120px 7vw; }
.section-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; }
.section-heading { max-width: 700px; }
.section-heading .eyebrow { color: var(--terracotta); margin-bottom: 20px; }
.section-heading h2, .cta h2, .booking-modal h2 { font-family: 'Playfair Display'; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.03; letter-spacing: -.03em; font-weight: 500; margin: 0; color: var(--forest); }
.section-heading p { color: var(--muted); line-height: 1.75; max-width: 590px; font-size: 14px; margin: 22px 0 0; }
.section-heading.light h2, .section-heading.light p, .section-heading.light .eyebrow { color: white; }
.section-heading.light p { opacity: .72; }
.text-link { color: var(--forest); text-decoration: none; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--forest); padding-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { background: white; box-shadow: 0 13px 45px rgba(24,45,37,.07); transition: transform .3s; }
.service-card:hover { transform: translateY(-7px); }
.card-image { height: 340px; position: relative; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.service-card:hover img { transform: scale(1.04); }
.card-index { position: absolute; top: 18px; left: 18px; background: rgba(16,47,40,.86); color: white; width: 34px; height: 34px; display: grid; place-items: center; font-size: 10px; border-radius: 50%; }
.rating { position: absolute; right: 15px; bottom: 15px; background: rgba(255,255,255,.92); color: var(--forest); font-size: 10px; padding: 7px 10px; display: flex; align-items: center; gap: 5px; }
.rating svg { fill: #d3984e; stroke: #d3984e; }
.card-body { padding: 26px; }
.card-meta { display: flex; justify-content: space-between; text-transform: uppercase; color: var(--terracotta); letter-spacing: .12em; font-size: 8px; font-weight: 600; }
.card-body h3, .fleet-copy h3, .article-grid h3 { font-family: 'Playfair Display'; font-size: 28px; color: var(--forest); font-weight: 500; margin: 13px 0; }
.card-body > p { color: var(--muted); line-height: 1.65; font-size: 12px; min-height: 60px; }
.card-body ul { list-style: none; margin: 22px 0; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 17px; }
.card-body li { font-size: 9px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.card-body li svg { color: var(--terracotta); }
.card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card-footer > div { display: flex; flex-direction: column; }
.card-footer small { color: var(--muted); font-size: 8px; }
.card-footer strong { color: var(--forest); font-family: 'Playfair Display'; font-size: 19px; }

.fleet-section { background: var(--forest-dark); color: white; padding: 110px 7vw; display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; }
.fleet-intro { display: flex; flex-direction: column; justify-content: space-between; }
.fleet-stats { display: flex; gap: 45px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 28px; margin-top: 50px; }
.fleet-stats div { display: flex; flex-direction: column; }
.fleet-stats b { font-family: 'Playfair Display'; font-size: 34px; font-weight: 500; }
.fleet-stats span { font-size: 9px; opacity: .6; }
.fleet-row { display: grid; grid-template-columns: 30px 120px 1fr auto 42px; gap: 22px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.17); }
.fleet-row:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }
.fleet-row > span { font-size: 9px; opacity: .45; align-self: start; }
.fleet-row img { width: 120px; height: 92px; object-fit: cover; }
.fleet-copy small { text-transform: uppercase; letter-spacing: .16em; font-size: 8px; color: #d6ae87; }
.fleet-copy h3 { color: white; font-size: 22px; margin: 7px 0; }
.fleet-copy p { margin: 0; opacity: .6; font-size: 10px; }
.fleet-price { text-align: right; display: flex; flex-direction: column; }
.fleet-price small { font-size: 8px; opacity: .5; }
.fleet-price b { font-family: 'Playfair Display'; font-size: 16px; white-space: nowrap; }
.fleet-row .btn-icon { border-color: rgba(255,255,255,.45); }

.booking-section { background: var(--cream); }
.booking-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 45px; }
.availability { color: var(--muted); font-size: 9px; display: flex; align-items: center; gap: 8px; }
.availability span { width: 7px; height: 7px; background: #5ca276; border-radius: 50%; box-shadow: 0 0 0 4px rgba(92,162,118,.15); }
.booking-layout { display: grid; grid-template-columns: .75fr 1.1fr .75fr; background: white; min-height: 580px; box-shadow: 0 20px 60px rgba(38,52,43,.07); }
.booking-controls { padding: 33px; border-right: 1px solid var(--line); }
.field { display: block; margin-bottom: 26px; }
.field > span { display: block; font-size: 8px; letter-spacing: .15em; font-weight: 600; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice-list button { width: 100%; border: 1px solid var(--line); background: white; padding: 8px; display: grid; grid-template-columns: 46px 1fr 26px; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.choice-list button.selected { border-color: var(--terracotta); background: #fffaf7; }
.choice-list img { width: 46px; height: 42px; object-fit: cover; }
.choice-list span { display: flex; flex-direction: column; gap: 3px; }
.choice-list b { font-size: 11px; color: var(--forest); }
.choice-list small { font-size: 8px; color: var(--muted); }
.choice-list i { width: 21px; height: 21px; display: grid; place-items: center; background: var(--terracotta); color: white; border-radius: 50%; }
.booking-controls select, .booking-modal input, .booking-modal textarea { width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); padding: 13px; outline: none; font-size: 11px; }
.booking-controls select:focus, .booking-modal input:focus, .booking-modal textarea:focus { border-color: var(--terracotta); }
.guest-control { border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 5px; }
.guest-control .btn-icon { border: 0; color: var(--forest); }
.guest-control span { font-size: 11px; }
.guest-control b { font-family: 'Playfair Display'; font-size: 18px; margin-right: 4px; }
.calendar-card { padding: 37px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 21px; margin-bottom: 22px; }
.calendar-head small { font-size: 8px; letter-spacing: .15em; color: var(--muted); }
.calendar-head h3 { font-family: 'Playfair Display'; font-size: 28px; color: var(--forest); font-weight: 500; margin: 6px 0 0; }
.calendar-head .btn-icon { width: 32px; height: 32px; border-color: var(--line); }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.weekdays span { text-align: center; color: var(--muted); font-size: 8px; padding: 8px 0; }
.calendar-grid button, .calendar-empty { aspect-ratio: 1; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; border-radius: 50%; }
.calendar-grid button:hover:not(:disabled) { background: var(--cream); }
.calendar-grid button.active { background: var(--terracotta); color: white; box-shadow: 0 5px 15px rgba(200,110,73,.3); }
.calendar-grid button.blocked { color: #bdc0ba; text-decoration: line-through; cursor: not-allowed; }
.calendar-legend { display: flex; justify-content: center; gap: 20px; padding-top: 25px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 8px; color: var(--muted); }
.calendar-legend span { display: flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line); }
.calendar-legend .selected-dot { background: var(--terracotta); border-color: var(--terracotta); }
.calendar-legend .blocked-dot { background: #d7d9d4; }
.trip-summary { background: var(--forest); color: white; padding: 30px; }
.summary-label { font-size: 8px; letter-spacing: .16em; opacity: .65; display: block; margin-bottom: 18px; }
.trip-summary > img { width: 100%; height: 150px; object-fit: cover; }
.trip-summary > h3 { font-family: 'Playfair Display'; font-weight: 500; font-size: 25px; margin: 20px 0 5px; }
.trip-summary > p { font-size: 9px; display: flex; align-items: center; gap: 6px; opacity: .6; margin: 0; }
.summary-details { margin: 24px 0; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; gap: 14px; }
.summary-details > div { display: flex; align-items: center; gap: 12px; }
.summary-details svg { color: #d6ae87; }
.summary-details span { display: flex; flex-direction: column; }
.summary-details small { opacity: .5; font-size: 8px; }
.summary-details b { font-size: 10px; font-weight: 500; }
.summary-total { display: flex; justify-content: space-between; align-items: flex-end; }
.summary-total > span { display: flex; flex-direction: column; }
.summary-total small { font-size: 7px; opacity: .5; }
.summary-total b { font-family: 'Playfair Display'; font-size: 21px; font-weight: 500; }
.summary-button { width: 100%; margin-top: 20px; }
.whatsapp-help { color: white; opacity: .7; font-size: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; text-decoration: none; margin-top: 16px; }

.gallery-section { background: var(--forest-dark); padding: 105px 0 0; }
.gallery-title { padding: 0 7vw 50px; display: flex; justify-content: space-between; align-items: flex-end; color: white; }
.gallery-title p { font-size: 10px; opacity: .65; }
.gallery-grid { display: grid; grid-template-columns: 1.5fr .75fr .75fr; grid-template-rows: 250px 250px; gap: 5px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: filter .3s; }
.gallery-grid img:hover { filter: saturate(1.15); }
.gallery-grid img:first-child { grid-row: 1 / 3; }
.journal { background: var(--paper); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.article-grid article > div { position: relative; height: 260px; overflow: hidden; }
.article-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.article-grid article:hover img { transform: scale(1.04); }
.article-grid article > div span { position: absolute; left: 0; bottom: 0; background: var(--paper); color: var(--terracotta); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; padding: 10px 15px 5px 0; }
.article-grid article > small { color: var(--muted); font-size: 8px; letter-spacing: .12em; display: block; margin-top: 18px; }
.article-grid h3 { font-size: 25px; min-height: 62px; }
.article-grid a { color: var(--forest); font-size: 10px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--forest); padding-bottom: 5px; }

.cta { padding: 85px 8vw; background: #e4d5c5; display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.cta h2 { font-size: clamp(38px, 4vw, 58px); }
.cta > div:last-child { max-width: 400px; }
.cta p { color: var(--muted); line-height: 1.7; font-size: 13px; margin-bottom: 22px; }
footer { background: #0c2923; color: white; padding: 75px 7vw 25px; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 7vw; padding-bottom: 65px; }
.footer-brand .brand { color: white; }
.footer-brand .brand-mark { background: white; color: var(--forest); }
.footer-brand p { max-width: 350px; font-size: 11px; opacity: .55; line-height: 1.8; margin: 25px 0; }
.socials { display: flex; gap: 9px; }
.socials a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); color: white; display: grid; place-items: center; }
.footer-main > div:not(:first-child) { display: flex; flex-direction: column; gap: 14px; }
.footer-main b { font-family: 'Playfair Display'; font-weight: 500; font-size: 15px; margin-bottom: 10px; }
.footer-main a { color: white; opacity: .55; font-size: 10px; text-decoration: none; }
.footer-main a:hover { opacity: 1; }
.footer-contact a { opacity: .9; font-family: 'Playfair Display'; font-size: 14px; }
.footer-contact small { font-size: 8px; opacity: .4; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; justify-content: space-between; font-size: 8px; opacity: .4; letter-spacing: .07em; }
.floating-wa { position: fixed; right: 24px; bottom: 24px; width: 52px; height: 52px; background: #2aaa62; color: white; display: grid; place-items: center; border-radius: 50%; z-index: 18; box-shadow: 0 7px 24px rgba(0,0,0,.2); transition: transform .2s; }
.floating-wa:hover { transform: scale(1.08); }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(7,25,21,.76); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; }
.booking-modal { background: var(--paper); width: min(680px, 100%); max-height: 92vh; overflow-y: auto; padding: 46px; position: relative; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.modal-close { position: absolute; top: 18px; right: 18px; border-color: var(--line); }
.booking-modal > .eyebrow { color: var(--terracotta); margin-bottom: 16px; }
.booking-modal h2 { font-size: 40px; }
.booking-modal > p, .success-state > p { font-size: 12px; color: var(--muted); line-height: 1.7; }
.modal-trip { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; background: var(--cream); padding: 10px; margin: 24px 0; }
.modal-trip img { width: 74px; height: 60px; object-fit: cover; }
.modal-trip div { display: flex; flex-direction: column; }
.modal-trip b { color: var(--forest); font-family: 'Playfair Display'; font-weight: 500; }
.modal-trip span { font-size: 9px; color: var(--muted); }
.modal-trip strong { font-family: 'Playfair Display'; color: var(--forest); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.booking-modal textarea { resize: vertical; }
.modal-submit { width: 100%; min-height: 50px; }
.success-state { text-align: center; padding: 25px 20px; }
.success-state > span { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 25px; border-radius: 50%; background: var(--forest); color: white; }
.success-state .eyebrow::before { display: none; }
.success-state h2 { margin-bottom: 20px; }
.success-state .btn { margin-top: 18px; }

@media (max-width: 1050px) {
  .nav-links { gap: 17px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .fleet-section { grid-template-columns: 1fr; gap: 45px; }
  .booking-layout { grid-template-columns: 1fr 1fr; }
  .trip-summary { grid-column: span 2; display: grid; grid-template-columns: 220px 1fr 1fr; gap: 20px; align-items: start; }
  .trip-summary > img { grid-row: span 4; height: 100%; }
  .trip-summary > h3 { margin: 0; }
  .summary-details { grid-column: 2; }
  .summary-total, .summary-button, .whatsapp-help { grid-column: 3; }
  .footer-main { grid-template-columns: 2fr 1fr 1fr; }
  .footer-contact { grid-column: 2 / 4; }
}

@media (max-width: 760px) {
  .navbar { height: 68px; padding: 0 20px; position: sticky; top: 0; }
  .nav-links { position: absolute; top: 68px; left: 0; right: 0; background: var(--paper); padding: 24px; display: none; flex-direction: column; align-items: flex-start; box-shadow: 0 15px 25px rgba(0,0,0,.1); }
  .nav-links.open { display: flex; }
  .nav-actions > .btn-primary, .nav-whatsapp { display: none; }
  .menu-toggle { display: grid; border: 0; }
  .hero { height: calc(100vh - 68px); min-height: 600px; }
  .hero-content { left: 22px; right: 22px; }
  .hero h1 { font-size: 56px; }
  .hero-content > p { font-size: 14px; }
  .hero-buttons { flex-direction: column; align-items: flex-start; }
  .hero-note { display: none; }
  .scroll-hint { left: 22px; bottom: 25px; }
  .trust-strip { padding: 18px 22px; flex-direction: column; align-items: flex-start; }
  .trust-strip > div { gap: 10px; flex-wrap: wrap; }
  .section { padding: 80px 20px; }
  .section-top, .booking-heading, .gallery-title, .cta { align-items: flex-start; flex-direction: column; }
  .section-top { gap: 25px; }
  .section-heading h2 { font-size: 42px; }
  .service-grid { grid-template-columns: 1fr; }
  .card-image { height: 300px; }
  .fleet-section { padding: 75px 20px; }
  .fleet-row { grid-template-columns: 22px 82px 1fr 36px; gap: 12px; }
  .fleet-row img { width: 82px; height: 82px; }
  .fleet-price { display: none; }
  .fleet-copy h3 { font-size: 18px; }
  .booking-layout { display: block; }
  .booking-controls { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px; }
  .calendar-card { padding: 24px 15px; }
  .trip-summary { display: block; padding: 24px; }
  .trip-summary > img { height: 180px; }
  .summary-total, .summary-button, .whatsapp-help { margin-top: 18px; }
  .gallery-section { padding-top: 75px; }
  .gallery-title { padding: 0 20px 35px; gap: 20px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 280px 180px 180px; }
  .gallery-grid img:first-child { grid-column: span 2; grid-row: auto; }
  .article-grid { grid-template-columns: 1fr; gap: 45px; }
  .cta { padding: 70px 20px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 45px 30px; }
  .footer-brand { grid-column: span 2; }
  .footer-contact { grid-column: span 2; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .booking-modal { padding: 42px 22px 25px; }
  .booking-modal h2 { font-size: 34px; }
  .form-grid { grid-template-columns: 1fr; }
  .modal-trip { grid-template-columns: 58px 1fr; }
  .modal-trip img { width: 58px; }
  .modal-trip strong { grid-column: 2; }
}

/* Vanilla CMS additions */
.btn, button, .admin-button { cursor:pointer; }
.article-card { color:inherit; text-decoration:none; display:block; }
.article-card p {font-size:12px; color:var(--muted); line-height:1.7}
.admin-body {background:#f4f6f4; min-height:100vh; font-family:Arial,sans-serif}
.admin-shell {display:grid;grid-template-columns:245px 1fr;min-height:100vh}
.admin-sidebar {background:#173d33;color:white;padding:28px 18px}
.admin-sidebar h2 {font-size:18px;margin:0 0 28px}
.admin-sidebar a {display:block;color:#dce8e1;text-decoration:none;padding:12px 14px;border-radius:8px;margin:4px 0;font-size:14px}
.admin-sidebar a:hover,.admin-sidebar a.active {background:#2b574a;color:white}
.admin-main {padding:30px;min-width:0}
.admin-top {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.admin-main h1 {margin:0;color:#173d33;font-size:28px}
.admin-panel {background:white;border:1px solid #e2e8e3;border-radius:12px;padding:22px;margin-bottom:22px;overflow-x:auto}
.admin-table {width:100%;border-collapse:collapse;font-size:13px}
.admin-table th,.admin-table td {padding:13px 10px;border-bottom:1px solid #edf0ed;text-align:left;vertical-align:top}
.admin-table th {color:#64736a;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.admin-table img {width:68px;height:48px;object-fit:cover;border-radius:5px}
.admin-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-form label {font-size:12px;color:#506158;display:flex;flex-direction:column;gap:7px}
.admin-form input,.admin-form textarea,.admin-form select {width:100%;padding:11px;border:1px solid #d7dfd9;border-radius:6px;background:white;color:#1d2824}
.admin-form textarea {min-height:110px;resize:vertical}
.admin-form .full {grid-column:1/-1}
.admin-button {display:inline-block;background:#173d33;color:white;padding:10px 15px;border:0;border-radius:6px;text-decoration:none;font-size:12px}
.admin-button.secondary {background:#e9efeb;color:#173d33}
.admin-button.danger {background:#a63d36}
.admin-button + .admin-button {margin-left:5px}
.admin-alert {padding:12px 15px;border-radius:7px;background:#e4f4e8;color:#205c32;margin-bottom:18px;font-size:13px}
.admin-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.admin-stat {background:white;padding:22px;border:1px solid #e2e8e3;border-radius:12px}
.admin-stat span {font-size:12px;color:#718077}.admin-stat b {display:block;font-size:28px;color:#173d33;margin-top:8px}
.login-wrap {min-height:100vh;display:grid;place-items:center;background:#102f28;padding:20px}
.login-card {background:#fbfaf6;width:min(420px,100%);padding:36px;border-radius:14px}
.login-card h1 {font-family:'Playfair Display',serif;color:#173d33;font-weight:500}
.login-card label {display:block;font-size:12px;margin:16px 0;color:#59675e}
.login-card input {width:100%;padding:13px;margin-top:7px;border:1px solid #d8d9d2}
.article-content {max-width:820px;margin:50px auto 100px;padding:0 24px;line-height:1.9}
.article-content img {width:100%;max-height:500px;object-fit:cover;margin:25px 0}
.article-content h1 {font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,62px);line-height:1.1;color:var(--forest)}
@media(max-width:800px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{padding:16px}.admin-sidebar nav{display:flex;flex-wrap:wrap}.admin-sidebar a{padding:9px}.admin-main{padding:18px}.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-form{grid-template-columns:1fr}.admin-form .full{grid-column:auto}}

/* Logo gambar (navbar & footer) */
.brand-logo{height:38px;width:auto;max-width:170px;object-fit:contain;display:block}
.footer-brand .brand-logo{height:46px;max-width:200px}
/* Admin: halaman Gambar Website */
.img-section-title{margin:28px 0 6px;font-size:16px;color:#173d33}
.img-hint{font-size:12px;color:#758078;margin:0 0 14px}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:10px}
.img-card{background:white;border:1px solid #e2e8e3;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.img-card b{font-size:13px;color:#173d33}.img-card small{font-size:11px;color:#758078;line-height:1.5}
.img-preview{height:120px;border-radius:8px;background:#e9efeb;display:grid;place-items:center;overflow:hidden}
.img-preview.dark{background:#173d33}
.img-preview img{max-width:100%;max-height:100%;object-fit:contain}
.img-preview.cover img{width:100%;height:100%;object-fit:cover}
.img-empty{font-size:11px;color:#8a958e}
.img-card input[type=text]{width:100%;padding:8px;border:1px solid #d7dfd9;border-radius:6px;font-size:12px}
.img-card input[type=file]{font-size:11px;width:100%}
.img-actions{display:flex;gap:6px;margin-top:2px}
.img-actions .admin-button{padding:8px 12px;margin-left:0}

/* ===== Pemesanan mobil ===== */
.service-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-grid .card-image { height: 200px; }
.service-grid .card-body { padding: 22px; display: flex; flex-direction: column; }
.service-grid .card-body h3 { font-size: 24px; margin: 12px 0 4px; }
.service-grid .card-body > p { min-height: 0; flex: 1; }
.service-grid .card-meta { font-size: 9px; }
.tagline { display: block; font-family: 'Playfair Display'; font-size: 14px; color: var(--terracotta); margin-bottom: 10px; }
.service-grid .card-body ul { margin: 18px 0; }
.service-grid .card-footer .btn { padding: 0 16px; }
.ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--forest) 0%, #2c6554 100%); color: rgba(255,255,255,.8); }
.fleet-row .ph { width: 120px; height: 92px; }
.booking-layout.cars { grid-template-columns: 1.7fr .8fr; }
.booking-layout.cars .booking-controls { border-right: 1px solid var(--line); padding: 36px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.form-grid .field.full { grid-column: 1 / -1; }
.booking-layout.cars select, .booking-layout.cars input, .booking-layout.cars textarea { width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); padding: 13px; outline: none; font-size: 12px; }
.booking-layout.cars select:focus, .booking-layout.cars input:focus, .booking-layout.cars textarea:focus { border-color: var(--terracotta); }
.booking-layout.cars textarea { min-height: 96px; resize: vertical; }
#bookingFeedback { font-size: 12px; color: var(--muted); min-height: 18px; }
.summary-note { font-size: 10px; opacity: .6; line-height: 1.6; margin: 14px 0 0; }
.trip-summary { display: flex; flex-direction: column; }
.trip-summary .whatsapp-help { margin-top: auto; padding-top: 22px; }
@media (max-width: 1300px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1050px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
  .booking-layout.cars { grid-template-columns: 1fr; }
  .booking-layout.cars .booking-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .trip-summary { display: block; grid-column: auto; }
}
@media (max-width: 760px) {
  .service-grid { grid-template-columns: 1fr; }
  .booking-layout.cars .booking-controls { padding: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .fleet-row .ph { width: 82px; height: 82px; }
}
.wa-widget{position:fixed;right:20px;bottom:20px;z-index:60;font-family:'DM Sans',sans-serif}
.wa-fab{width:84px;height:84px;padding:0;border:0;background:transparent;cursor:pointer;display:block;transition:transform .2s;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.wa-fab img{width:100%;height:100%;object-fit:contain;display:block}
.wa-fab:hover{transform:scale(1.07)}
.wa-popup{bottom:96px}
@media (max-width:760px){.wa-fab{width:68px;height:68px}.wa-popup{bottom:80px}}
.wa-popup{position:absolute;right:0;bottom:72px;width:320px;max-width:calc(100vw - 40px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.25)}
.wa-popup[hidden]{display:none}
.wa-head{background:#075e54;color:#fff;padding:14px 40px 14px 16px;position:relative;display:flex;flex-direction:column;gap:2px}
.wa-head small{opacity:.75;font-size:11px}
.wa-head button{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.wa-body{background:#ece5dd;padding:16px}
.wa-bubble{background:#fff;padding:10px 12px;border-radius:0 10px 10px 10px;font-size:13px;line-height:1.5;color:#1d2824;max-width:90%}
.wa-form{display:flex;gap:8px;padding:10px;background:#f6f6f6}
.wa-form input{flex:1;min-width:0;border:1px solid #ddd;border-radius:20px;padding:10px 14px;font-size:13px;outline:none}
.wa-form button{border:0;background:#25d366;color:#fff;font-weight:600;border-radius:20px;padding:0 16px;cursor:pointer}
.wa-say{position:absolute;right:6px;bottom:96px;width:max-content;max-width:190px;background:#fff;color:#1d2824;font-size:13px;font-weight:600;line-height:1.35;padding:11px 28px 11px 14px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:waSayIn .5s .8s both,waSayFloat 3s 1.3s ease-in-out infinite}
.wa-say::after{content:"";position:absolute;bottom:-9px;right:44px;width:18px;height:18px;background:#fff;border-radius:0 0 6px 0;transform:rotate(45deg);box-shadow:4px 4px 8px rgba(0,0,0,.08)}
.wa-say button{position:absolute;top:4px;right:8px;background:none;border:0;color:#999;font-size:16px;line-height:1;cursor:pointer;padding:0}
.wa-say[hidden]{display:none}
@keyframes waSayIn{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes waSayFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:760px){.wa-say{bottom:80px;right:2px;max-width:160px;font-size:12px}.wa-say::after{right:34px}}