/* Hero: bespoke multi-breakpoint absolute-positioned composition (logo,
   search, 3D carousel, person cutout, copy, info card). Kept as hand-written
   CSS instead of Tailwind utilities/arbitrary values — the geometry here is
   unique to this one section and reused nowhere else, so a scoped component
   class stays far more readable than five breakpoints of arbitrary-value
   classes repeated inline. Everything else on the page (timeline, footer,
   buttons, info-card content) is styled with Tailwind utility classes
   directly in the markup.
   Rules that react to a class toggled by JS use Tailwind's group/arbitrary-
   variant selectors in the HTML instead (search open/close, carousel-card
   focus, timeline reveal, footer quote crossfade) — the only JS-driven state
   left here is the timeline dot's blink keyframe. */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 52% 12%,rgba(255,196,140,.6),transparent 30%),radial-gradient(circle at 86% 14%,rgba(255,163,110,.55),transparent 38%),linear-gradient(135deg,#fff8ee 0%,#ffedd8 35%,#ffe1bd 62%,#ffd6a8 100%)}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.92) 58%,#fff);pointer-events:none;z-index:7}
.hero-shell{position:relative;padding:18px 14px 32px}
.site-logo{position:absolute;z-index:20;top:18px;left:14px}
.site-logo img{height:60px}
.site-search{position:absolute;z-index:21;top:18px;right:14px}
.site-search-form{width:0;height:38px;overflow:hidden;transition:width .35s cubic-bezier(.22,.61,.36,1)}
.site-search.open .site-search-form{width:200px;margin-right:8px}
.site-search-toggle{width:38px;height:38px}
.carousel-stage{position:absolute;z-index:4;left:0;right:0;top:24px;height:410px;perspective:1400px;transform-style:preserve-3d;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.travel-card{width:150px;height:193px;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease,filter .8s ease,box-shadow .8s ease;transform-origin:50% 50%;will-change:transform,filter,opacity}
.person-wrap{position:absolute;z-index:9;left:50%;top:195px;transform:translateX(-50%);height:58vh;min-height:420px;width:min(72vw,540px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 97%,transparent 100%);mask-image:linear-gradient(to bottom,#000 97%,transparent 100%)}
.person{position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);height:118%;width:auto;max-width:none;filter:drop-shadow(0 25px 30px rgba(39,58,67,.12))}
.copy{position:relative;z-index:12;margin-top:24px;max-width:390px}
.info-card{position:relative;z-index:12;margin:650px 0 0 auto;width:min(100%,290px)}

@media (min-width:576px){
  .hero-shell{padding-left:28px;padding-right:28px}.site-logo{top:22px;left:28px}.site-logo img{height:64px}.site-search{top:22px;right:28px}.carousel-stage{top:28px;height:440px}.travel-card{width:165px;height:212px}.person-wrap{top:205px;height:59vh;width:520px}.info-card{margin-top:725px}.copy h1{font-size:50px}
}
@media (min-width:768px){
  .hero-shell{padding:24px 44px 34px;min-height:800px}.site-logo{top:26px;left:44px}.site-logo img{height:72px}.site-search{top:26px;right:44px}.site-search-toggle{width:42px;height:42px}.site-search-form{height:42px}.carousel-stage{top:30px;height:490px}.travel-card{width:185px;height:238px}.person-wrap{top:185px;height:590px;width:560px}.person{height:115%;bottom:-19%}.copy{position:absolute;left:0;bottom:8px;padding:0;width:390px}.copy h1{font-size:46px}.info-card{position:absolute;right:0;bottom:30px;margin:0;width:270px}
}
@media (min-width:992px){
  .hero-shell{min-height:860px}.site-logo img{height:76px}.carousel-stage{top:26px;height:540px}.travel-card{width:205px;height:264px}.person-wrap{top:170px;height:665px;width:610px}.person{height:117%;bottom:-20%}.copy{bottom:15px;left:0}.copy h1{font-size:52px}.info-card{right:0;bottom:40px;width:290px}
}
@media (min-width:1200px){
  .hero-shell{min-height:900px}.site-logo img{height:84px}.carousel-stage{top:30px;height:600px}.travel-card{width:230px;height:296px}.person-wrap{top:175px;height:695px;width:660px}.person{height:120%;bottom:-22%}.copy{left:0;bottom:15px}.copy h1{font-size:58px}.info-card{right:0;bottom:45px}
}

.timeline-dot.blink{animation:timelineDotBlink .7s ease-out}
@keyframes timelineDotBlink{
  0%{box-shadow:0 0 0 2px #2454e0}
  35%{box-shadow:0 0 0 10px rgba(36,84,224,.3)}
  70%{box-shadow:0 0 0 4px rgba(36,84,224,.45)}
  100%{box-shadow:0 0 0 2px #2454e0}
}
.timeline-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.timeline-dot.search-glow{animation:timelineDotGlow 2.2s ease-out}
@keyframes timelineDotGlow{
  0%{box-shadow:0 0 0 2px #2454e0}
  15%{box-shadow:0 0 0 2px #2454e0,0 0 25px 10px rgba(255,233,78,.9)}
  50%{box-shadow:0 0 0 2px #2454e0,0 0 14px 5px rgba(255,233,78,.5)}
  75%{box-shadow:0 0 0 2px #2454e0,0 0 25px 10px rgba(255,233,78,.75)}
  100%{box-shadow:0 0 0 2px #2454e0}
}
.next-section-bg-wrap{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 96%);mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 96%)}

@media (prefers-reduced-motion:reduce){.travel-card{transition:none!important}.timeline-dot.blink{animation:none!important}.timeline-dot.search-glow{animation:none!important}.hero *{scroll-behavior:auto!important}}