/* Discrete slide transitions with native scrolling on smaller and touch layouts. */
html { scroll-behavior: auto; }
.slide-deck > .scene[data-scene] { min-height: 100svh; }
.slide-deck .scene__sticky,
.slide-deck .scene--partner .scene__sticky {
  position: relative; box-sizing: border-box; height: auto;
  min-height: 100svh; padding: var(--slide-clearance, 100px) 5vw;
}
.slide-deck .calendar-sticky { position: relative; min-height: 100svh; padding-top: max(100px, calc(var(--slide-clearance, 100px) - 34px)); }
.slide-deck [data-reveal-line] .char { opacity: 1; transform: none; will-change: auto; }
/* Avoid 3D glyph textures and give italic/serif ink room while animated. */
.slide-deck [data-reveal-line] { perspective: none; }
.slide-deck [data-reveal-line] .word { transform-style: flat; overflow: visible; }
.slide-deck [data-reveal-line] .char { padding: .12em; margin: -.12em; }
.snap-enabled .scene[data-revealing] [data-reveal-line] .char,
.slide-deck .hero[data-revealing] [data-reveal-line] .char { will-change: opacity, transform; }
.slide-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  display: grid; gap: 6px; z-index: 60; color: #173d31; pointer-events: none;
}
.slide-nav button {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; pointer-events: auto;
}
.slide-nav button::before {
  content: ''; width: 6px; height: 6px; box-sizing: border-box;
  border: 1px solid currentColor; background: transparent; opacity: .5;
  transform: rotate(45deg);
  transition: background-color .25s ease, opacity .25s ease;
}
.slide-nav button[aria-current]::before {
  width: 7px; height: 7px; background: currentColor; opacity: 1;
  animation: activeDiamondPulse 4s ease-in-out infinite;
}
.slide-nav button:hover::before { opacity: 1; }
.slide-nav[data-on-hero] { color: #f0f3ec; }
.slide-nav button:focus-visible { outline-offset: 0; outline-color: currentColor; }
.slide-deck > section:focus { outline: none; }
.no-motion .slide-nav button[aria-current]::before { animation: none; }
@keyframes activeDiamondPulse {
  0%, 65% { transform: rotate(45deg) scale(1); opacity: 1; }
  82% { transform: rotate(225deg) scale(1.14); opacity: .78; }
  100% { transform: rotate(405deg) scale(1); opacity: 1; }
}
/* The brighter green leads only while the hero backs the header. */
.header[data-on-hero] .btn--forest { background-color: #2c362d; border-color: #2c362d; }
.header[data-on-hero] .btn--forest:hover { background-color: #1c221d; border-color: #1c221d; }
.snap-enabled :is(.scene, .hero) [data-reveal-line] .char { opacity: 0; }
.snap-enabled :is(.scene, .hero)[data-revealed] [data-reveal-line] .char { opacity: 1; }
.snap-enabled .calendar-sticky { height: auto; min-height: 100svh; }
#homepageBooking [data-lenis-prevent], #homepageBooking textarea { overscroll-behavior: contain; }
@media (min-width: 1024px) and (min-height: 700px) {
  /* The rail keeps its position; only cramped cards need this reserved gutter. */
  .slide-deck .calendar-sticky { padding-inline: max(76px, 2.4rem); }
}
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 899px) {
  /* Keep the booking card in one slide instead of a second tiny scroll stop. */
  .slide-deck .calendar-sticky { padding-bottom: 8px; }
  #homepageBooking.booking-embed .booking-shell { padding-bottom: 0; }
  #homepageBooking.booking-embed .booking-steps { margin-bottom: 14px; }
  #homepageBooking.booking-embed .booking-card,
  #homepageBooking.booking-embed .booking-card.details-step,
  #homepageBooking.booking-embed #result:not(:empty):has(+ #picker[hidden]) {
    height: min(560px, calc(100svh - max(100px, calc(var(--slide-clearance, 100px) - 34px)) - 132px));
    min-height: min(560px, calc(100svh - max(100px, calc(var(--slide-clearance, 100px) - 34px)) - 132px));
  }
}
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 740px) {
  #homepageBooking.booking-embed .booking-card.details-step { padding: 8px 24px; }
  #homepageBooking.booking-embed #details-intro { margin-bottom: 8px; }
  #homepageBooking.booking-embed .details-step .selection-card { padding-block: 8px; margin-bottom: 8px; }
  #homepageBooking.booking-embed .required-caption { margin-bottom: 6px; }
  #homepageBooking.booking-embed .details-step label>input,
  #homepageBooking.booking-embed .details-step label>textarea { margin-bottom: 6px; }
  #homepageBooking.booking-embed .details-step textarea { height: 48px; min-height: 48px; }
}
.no-motion .slide-deck .scene__sticky { min-height: 100svh; }
.no-motion .slide-deck .scene--partner .scene__sticky { min-height: 100svh; }
.no-motion .slide-deck .scene--partner .final-footer { opacity: 1; transform: none; }
@media (max-width: 1023px), (max-height: 699px) {
  .slide-deck > .scene[data-scene] { min-height: auto; }
  .slide-deck .scene__sticky { min-height: 85svh; height: auto; padding: 100px 28px 80px; }
  .slide-deck .scene--copy .scene__sticky { min-height: 100svh; }
  .slide-deck .calendar-sticky { min-height: 100svh; padding: 80px 20px 55px; }
  .slide-deck .scene--partner .scene__sticky { min-height: 100svh; padding: 100px 28px 150px; }
  .slide-deck .scene--partner .final-footer { opacity: 1; transform: none; pointer-events: auto; }
  .slide-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide-deck .scene--partner .final-footer { transition: none; }
  .slide-nav button[aria-current]::before { animation: none; }
}
/* Phone touch presentation: each slide fills the measured frame so no neighbor
   shares it. Slides never pan natively (pinch zoom stays available); booking
   and zoomed pages scroll natively. Booking's own wrapper is unchanged. */
.touch-deck { touch-action: pinch-zoom; }
.touch-deck[data-touch-pan], .touch-deck[data-touch-zoomed] { touch-action: manipulation; }
.touch-deck .hero, .touch-deck .hero__card { height: var(--touch-frame, 100dvh); }
.touch-deck .slide-deck > .scene[data-scene] { min-height: var(--touch-frame, 100dvh); }
.touch-deck .slide-deck .scene__sticky,
.touch-deck .slide-deck .scene--copy .scene__sticky,
.touch-deck .slide-deck .scene--partner .scene__sticky { min-height: var(--touch-frame, 100dvh); }
@media (orientation: landscape) and (max-height: 500px) {
  /* Short landscape phones: the copy uses the width and drops excess gaps,
     keeping header clearance, so fitting can stay closer to its original size. */
  .touch-deck .scene--copy .paras { max-width: 660px; }
  .touch-deck .scene--copy .paras p + p { margin-top: 16px; }
  .touch-deck .slide-deck .scene--copy .scene__sticky { padding-bottom: 24px; }
}

/* On the mobile booking slide, the header CTA gives way to the booking itself. */
@media(max-width:767px),(max-height:500px) and (pointer:coarse){
 .header .header__cta-slot{transition:opacity .25s ease,visibility .25s ease}
 .header[data-on-booking] .header__cta-slot{opacity:0!important;visibility:hidden;pointer-events:none}
 .header[data-on-booking]::before{bottom:0}
}

/* Short landscape phones: the statement anchors the left, with one story column on the right. */
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
  .slide-deck #intelligence .scene__sticky {
    min-height: var(--touch-frame, 100svh); height: var(--touch-frame, 100svh);
    padding: 64px 48px 22px; display: flex; justify-content: center; align-items: center;
  }
  .slide-deck #intelligence .paras {
    position: relative; width: 100%; max-width: 900px; display: grid;
    grid-template-columns: minmax(0, 39%) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto); gap: 18px 44px; text-align: left;
  }
  .slide-deck #intelligence .paras::before {
    content: ''; position: absolute; inset-block: 0; left: 39%; width: 1px;
    background: var(--color-gray-300); pointer-events: none;
  }
  .slide-deck #intelligence .paras p { margin: 0; font-size: 15px; line-height: 1.42; }
  .slide-deck #intelligence .paras p:first-child {
    grid-column: 1; grid-row: 1 / 5; align-self: center; padding-right: 24px;
    font-family: Newsreader, Georgia, serif; font-size: 38px; line-height: 1.12;
    color: var(--color-gray-900); text-wrap: balance;
  }
  .slide-deck #intelligence .paras p:nth-child(2) { grid-column: 2; grid-row: 1; }
  .slide-deck #intelligence .paras p:nth-child(3) { grid-column: 2; grid-row: 2; }
  .slide-deck #intelligence .paras p:nth-child(4) { grid-column: 2; grid-row: 3; }
  .slide-deck #intelligence .paras p:nth-child(5) { grid-column: 2; grid-row: 4; }
  .slide-deck #intelligence .intelligence-demand { font-weight: 700; }
  html:has(#intelligence[data-active="true"]) .header,
  .header[data-on-booking] {
    box-sizing: border-box; height: 44px; padding: 6px 22px; background: #fff;
    border-bottom: 1px solid var(--color-gray-300);
  }
  html:has(#intelligence[data-active="true"]) .header::before,
  .header[data-on-booking]::before { display: none; }
  html:has(#intelligence[data-active="true"]) .header .header__logo,
  .header[data-on-booking] .header__logo { font-size: 24px; }
  html:has(#intelligence[data-active="true"]) .header .btn,
  .header[data-on-booking] .btn { height: 32px; min-height: 32px; font-size: 13px; }
}
@media (max-width: 730px) and (orientation: landscape) and (max-height: 500px) {
  .slide-deck #intelligence .scene__sticky { padding: 58px 24px 16px; }
  .slide-deck #intelligence .paras { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 14px 26px; }
  .slide-deck #intelligence .paras::before { left: 34%; }
  .slide-deck #intelligence .paras p { font-size: 14px; line-height: 1.4; }
  .slide-deck #intelligence .paras p:first-child { font-size: 32px; padding-right: 16px; }
}
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 350px) {
  .slide-deck #intelligence .scene__sticky { padding-block: 58px 12px; }
  .slide-deck #intelligence .paras { gap: 10px 26px; }
  .slide-deck #intelligence .paras p { font-size: 14px; line-height: 1.38; }
  .slide-deck #intelligence .paras p:first-child { font-size: 32px; }
}

/* Optional local comparison: automatic text tint, then a single color inversion.
   The color clock overlaps the entrance, starting with the l in deal. */
html[data-demand-color-snap] { --demand-snap-green: #1c3628; }
html[data-demand-color-snap] #no-demand[data-active="true"] {
  animation: demandSnapBackground var(--demand-color-duration, 1.53s) linear var(--demand-tint-delay, 820ms) both;
}
html[data-demand-color-snap] #no-demand[data-active="true"] .statement {
  animation: demandSnapInk var(--demand-color-duration, 1.53s) linear var(--demand-tint-delay, 820ms) both;
}
html[data-demand-color-snap]:has(#no-demand[data-active="true"]) .header::before { display: none; }
html[data-demand-color-snap]:has(#no-demand[data-active="true"]) .header,
html[data-demand-color-snap]:has(#no-demand[data-active="true"]) .slide-nav {
  animation: demandSnapChrome var(--demand-color-duration, 1.53s) linear var(--demand-tint-delay, 820ms) both;
}
html[data-demand-color-snap]:has(#no-demand[data-active="true"]) .header .btn--forest {
  animation: demandSnapButton var(--demand-color-duration, 1.53s) linear var(--demand-tint-delay, 820ms) both;
}
@keyframes demandSnapBackground {
  0%, 99.999% { background-color: #fff; }
  100% { background-color: var(--demand-snap-green); }
}
@keyframes demandSnapInk {
  0% { color: #141414; }
  55.555556%, 99.999% { color: #345f47; }
  100% { color: #fff; }
}
@keyframes demandSnapChrome {
  0%, 99.999% { color: #141414; }
  100% { color: #fff; }
}
@keyframes demandSnapButton {
  0%, 99.999% { background-color: #1c221d; border-color: #1c221d; color: #fff; }
  100% { background-color: #fff; border-color: #fff; color: var(--demand-snap-green); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-demand-color-snap] #no-demand[data-active="true"],
  html[data-demand-color-snap] #no-demand[data-active="true"] .statement,
  html[data-demand-color-snap]:has(#no-demand[data-active="true"]) :is(.header, .slide-nav),
  html[data-demand-color-snap]:has(#no-demand[data-active="true"]) .header .btn--forest { animation: none; }
}

/* In the chase comparison, each glyph owns its color on the shared timeline. */
html[data-demand-color-chase] #no-demand[data-active="true"] .statement { animation: none; }