:root{
  /* — KAYAK modern-minimal palette — */
  --color-bg:        oklch(100% 0 0);          /* white paper            */
  --color-bg-alt:    oklch(98% 0 0);           /* very-light grey (alt)  */
  --color-text:      oklch(26% 0.006 250);      /* near-black ink         */
  --color-muted:     oklch(52% 0.006 250);      /* grey                   */
  --color-border:    oklch(91% 0.003 250);      /* hairline               */
  --color-primary:   oklch(70% 0.200 47);       /* KAYAK orange (#FF690F) */
  --color-primary-dk:oklch(63% 0.190 45);       /* orange hover           */
  --color-secondary: oklch(70% 0.200 47);

  /* — new Hallmark tokens — */
  --hm-band:        oklch(96.5% 0 0);           /* hero light-grey band   */
  --hm-surface:     oklch(100% 0 0);            /* card surface           */
  --hm-accent:      oklch(70% 0.200 47);
  --hm-accent-dk:   oklch(63% 0.190 45);
  --hm-accent-ink:  oklch(99% 0.01 60);         /* text on orange         */
  --hm-accent-tint: oklch(96.5% 0.035 60);      /* orange wash            */
  --hm-danger:      oklch(58% 0.150 28);
  --hm-danger-tint: oklch(96% 0.030 30);
  --hm-success:     oklch(58% 0.110 150);
  --hm-success-tint:oklch(96% 0.028 150);

  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --hm-pill:   999px;
  --shadow-sm: 0 1px 2px oklch(20% 0 0 / .05);
  --shadow-md: 0 4px 16px oklch(20% 0 0 / .07);
  --shadow-lg: 0 12px 36px oklch(20% 0 0 / .10);
}

body{ background: var(--color-bg); color: var(--color-text); }
::selection{ background: var(--hm-accent-tint); color: var(--hm-accent-dk); }

/* — Display type: heavy bold sans, tight tracking — */
.hero h1,
.section__header h2{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

/* — Header: clean white, orange hover — */
.site-header{
  background: oklch(100% 0 0 / .9);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}
.site-header__tagline{ color: var(--color-muted); }
.site-nav__link:hover{ color: var(--color-primary); }

/* — Hero: light-grey search band, heavy headline w/ orange period — */
.hero{
  background: var(--hm-band);
  border-bottom: 1px solid var(--color-border);
}
.hero h1{
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  margin-bottom: .9rem;
}
.hero h1::after{ content:"."; color: var(--color-primary); }
.hero__intro p:first-child{ font-size: 1.15rem; line-height: 1.6; }
.rm-label{ color: var(--color-primary); font-weight:600; }
.rm-label span{ color: var(--color-primary); }
.hero__intro{ color: var(--color-text); }
.hero__intro p{ color: var(--color-text); }
.hero__intro::before{
  background: var(--hm-band);
  bottom: -16px;
}

/* — Booking form = KAYAK search module — */
.booking-form{
  background: var(--hm-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.booking-form__submit{
  background: var(--color-primary); color: var(--hm-accent-ink);
  border-radius: var(--hm-pill); font-weight:700;
  transition: background .18s ease, transform .18s ease;
}
.booking-form__submit:hover{ background: var(--color-primary-dk); transform: translateY(-1px); }
.booking-form__checkbox-box{ border-radius: 5px; }

/* — Booking benefits: clean white cards — */
body .booking-benefit{
  background: var(--hm-surface); border:1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .25rem 1rem;
  background: #fff;
}
body .booking-benefits{
  padding: 0px;
  gap: 12px;
}
.booking-benefit__icon{ color: var(--color-primary); }

/* — Sections: generous, left-biased, clean labels — */
.section--alt{ background: var(--color-bg-alt); }
.section__header{ text-align:left; max-width: 60ch; }
.eyebrow{
  color: var(--color-muted); font-weight:700;
  text-transform: uppercase; letter-spacing:.10em; font-size:.72rem;
}
.section__header h2{ font-size: clamp(1.7rem, 3.7vw, 2.5rem); margin-top:.4rem; }

/* — Prose — */
.prose h3{ color: var(--color-text); font-weight:700; letter-spacing:-.01em; }
.prose strong{ color: oklch(22% 0.006 250); }
.prose a{ color: var(--color-primary); text-underline-offset: 2px; }
.section-image figure,
figure.section-image{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); box-shadow: var(--shadow-sm); }

/* — Lists: orange markers — */
.bullet-list > li{ position:relative; padding-left:1.5rem; }
.bullet-list > li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:50%; background: var(--color-primary);
}
.num-list{ counter-reset: hm; }
.num-list > li{ position:relative; padding-left:2.4rem; }
.num-list > li::before{
  counter-increment: hm; content: counter(hm);
  position:absolute; left:0; top:.05em;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background: var(--hm-accent-tint); color: var(--hm-accent-dk);
  font-weight:800; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* — Data tables: rounded shell, light header — */
.table-wrap{
  border:1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow:auto; box-shadow: var(--shadow-sm); background: var(--hm-surface);
}
.data-table thead th{
  background: oklch(97% 0 0); color: var(--color-text);
  font-weight:700; text-align:left;
  border-bottom:1px solid var(--color-border); padding:.85rem 1rem;
}
.data-table td{ border-bottom:1px solid var(--color-border); padding:.8rem 1rem; vertical-align: top; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background: oklch(98.5% 0.01 60); }
.data-table td:first-child{ color: var(--color-text); font-weight:600; }

/* — Callouts: rounded flat cards — */
.callout{ border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.callout--note{ background: var(--hm-accent-tint); border-left:4px solid var(--color-primary); }
.callout--note .callout__icon{ color: var(--color-primary); }
.callout--danger{ background: var(--hm-danger-tint); border-left:4px solid var(--hm-danger); }
.callout--danger .callout__icon{ color: var(--hm-danger); }
.callout--success{ background: var(--hm-success-tint); border-left:4px solid var(--hm-success); }
.callout--success .callout__icon{ color: var(--hm-success); }
.callout__brand{ color: var(--hm-success); font-weight:700; }
.callout__body h3{ color: var(--color-text); }

/* — Aside CTA: clean promo card + orange pill — */
.aside-cta__inner{
  background: var(--hm-surface);
  color: var(--color-text);
  border:1px solid var(--color-border);
  /* border-radius: var(--radius-xl); */
  box-shadow: var(--shadow-lg);
}
.aside-cta__icon{ color: var(--color-primary); }
.aside-cta__kicker{ color: var(--color-primary); letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.aside-cta__title{ color: var(--color-text); font-weight:800; letter-spacing:-.02em; }
.aside-cta__desc{ color: var(--color-muted); }
.aside-cta__trust li{ color: var(--color-text); }
.aside-cta__trust li i{ color: var(--color-primary); }
.aside-cta__btn{
  background: var(--color-primary); color: var(--hm-accent-ink);
  border-radius: var(--hm-pill); font-weight:700;
  box-shadow: 0 6px 18px oklch(70% 0.18 47 / .30);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.aside-cta__btn:hover{
  background: var(--color-primary-dk); transform: translateY(-2px);
  box-shadow: 0 10px 26px oklch(70% 0.18 47 / .40); text-decoration:none;
}
.aside-cta__note{ color: var(--color-muted); }

/* — Carousels: white rounded cards, orange step badges — */
.carousel-card{
  background: var(--hm-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.airport-step__num,
.booking-step__num{
  background: var(--color-primary); color: var(--hm-accent-ink);
  box-shadow: 0 2px 8px oklch(70% 0.18 47 / .30);
}
.airport-step__title,
.booking-step__title{ color: var(--color-text); font-weight:700; }
.airport-step__chip{
  background: var(--hm-accent-tint); color: var(--hm-accent-dk);
  border:1px solid oklch(90% 0.04 60);
}
.booking-carousel-intro,
.booking-carousel-caption{ color: var(--color-muted); }
.carousel-progress__bar{ background: var(--color-primary); }
.carousel-btn{ border-color: var(--color-border); color: var(--color-primary); border-radius: var(--hm-pill); }
.carousel-btn:hover{ border-color: var(--color-primary); color: var(--color-primary); }

/* — Tabbed routes: KAYAK pill tabs (active = orange fill) — */
.tab-btn{ color: var(--color-text); border-radius: var(--hm-pill); border:1px solid transparent; font-weight:600; }
.tab-btn:hover{ color: var(--color-primary); }
.tab-btn.is-active,
.tab-btn[aria-selected="true"]{
  background: var(--color-primary); color: var(--hm-accent-ink); border-color: var(--color-primary);
}
.tab-btn.is-active i,
.tab-btn[aria-selected="true"] i{ color: var(--hm-accent-ink); }
.tab-btn i{ color: var(--color-primary); }

/* — Image-split highlights — */
.image-split__highlights li i{ color: var(--color-primary); }
.image-split__source{ color: var(--color-muted); }

/* — Office maps — */
.office-map__caption{ color: var(--color-text); }
.office-map__caption strong{ color: var(--color-primary); }

/* — FAQ accordion: clean rounded cards — */
.faq-item{
  background: var(--hm-surface); border:1px solid var(--color-border);
  border-radius: var(--radius); margin-bottom:.6rem; overflow:hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-item:hover{ border-color: oklch(85% 0.02 60); box-shadow: var(--shadow-sm); }
.faq-btn{ color: var(--color-text); font-weight:700; }
.faq-btn .chevron{ color: var(--color-primary); }
.faq-item[data-open="true"],
.faq-item.is-open{ border-left:3px solid var(--color-primary); }
.faq-answer p{ color: var(--color-muted); }

/* — Footer: clean light band — */
.site-footer{
  background: var(--color-bg-alt); color: var(--color-muted);
  border-top:1px solid var(--color-border);
}
.site-footer a{ color: var(--color-text); }
.site-footer a:hover{ color: var(--color-primary); }
.site-footer__sep{ color: var(--color-border); }
.site-footer__fineprint{ color: var(--color-muted); }

/* — Focus ring — */
:focus-visible{ outline-color: var(--color-primary); }

/* — Mobile guards (320 / 375 / 414 / 768) — */
html, body{ overflow-x: clip; }
@media (max-width: 768px){
  .section__header{ max-width: none; }
  .hero h1{ font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
}
@media (prefers-reduced-motion: reduce){
  .booking-form__submit, .aside-cta__btn, .faq-item{ transition: none; }
  .booking-form__submit:hover, .aside-cta__btn:hover{ transform:none; }
}