/* The Launch Era homepage only: full-bleed photo becomes a rounded editorial card.
   Uses native sticky layout + a single numeric scroll custom property; no animation library.
   Loaded after the site theme so existing hero dimensions cannot defeat the sticky stage. */
.sales-home .hero-scroll {
  --hero-scroll-progress: 0;
  position: relative;
  height: 180vh;
  height: 180svh;
  background: #FAF8F3;
}
.sales-home .hero-scroll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 106%, #D7EFFF 0%, #FAF8F3 58%);
}
.sales-home .hero-scroll .hero-scroll-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  border: 0;
  border-radius: calc(24px * var(--hero-scroll-progress, 0));
  transform-origin: 50% 40%;
  transform: scale(calc(1 - .3 * var(--hero-scroll-progress, 0)));
  will-change: transform;
  overflow: hidden;
  perspective: none;
  box-shadow: 0 18px 45px rgba(25, 25, 25, .06);
}
/* The scale belongs on the wrapper, not on the image. */
.sales-home .hero-scroll .hero-photo > img.hero-main-image {
  transform: none !important;
  object-position: center 47%;
}
.sales-home .hero-scroll .hero-photo::after {
  opacity: clamp(.35, calc(1 - .6 * var(--hero-scroll-progress, 0)), 1);
}
.sales-home .hero-scroll .hero-photo .hero-intro {
  flex: none;
  padding: clamp(38px, 7vh, 86px) 22px 0;
  opacity: clamp(0, calc(1 - 2 * var(--hero-scroll-progress, 0)), 1);
  transform: none !important;
  will-change: opacity;
}
.sales-home .hero-scroll .hero-photo .hero-intro .hero-cta-row {
  display: flex;
  justify-content: center;
  margin: clamp(17px, 3vh, 28px) auto 0;
}
.sales-home .hero-scroll .hero-photo .hero-intro .cta-button {
  min-height: 48px;
  height: auto;
  padding: 12px 22px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.35;
  text-align: center;
  max-width: 100%;
  white-space: normal;
}
.sales-home .hero-scroll .hero-photo .hero-intro .demo-delivery-note {
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 1.45;
  color: #394A57;
}
.sales-home .hero-scroll .hero-photo .hero-notice-flow {
  position: absolute !important;
  inset: auto auto clamp(44px, 8vh, 76px) max(5%, 24px) !important;
  align-self: auto;
  width: min(310px, calc(100% - 48px));
  margin: 0 !important;
  opacity: clamp(0, calc(1 - 2 * var(--hero-scroll-progress, 0)), 1);
  transform: none !important;
  pointer-events: none;
  will-change: opacity;
}
.sales-home .hero-scroll .hero-photo .foam-wave { display: none; }
/* This hint is BEHIND the photo. It emerges only into the space freed by the card. */
.sales-home .hero-scroll-reveal {
  position: absolute;
  z-index: 1;
  inset: auto 16px clamp(17px, 3.5vh, 36px);
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
  opacity: clamp(0, calc((var(--hero-scroll-progress, 0) - .6) * 4), 1);
  transform: translateY(calc(12px - 12px * var(--hero-scroll-progress, 0)));
  visibility: hidden;
  pointer-events: none;
}
.sales-home .hero-scroll.hero-scroll-revealed .hero-scroll-reveal {
  visibility: visible;
  pointer-events: auto;
}
.sales-home .hero-scroll-reveal > span {
  font: 600 10px/1.3 'Prompt', 'DM Sans', sans-serif;
  letter-spacing: .11em;
  color: #527D96;
}
.sales-home .hero-scroll-reveal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  color: #191919;
  font: 500 clamp(14px, 1.4vw, 17px)/1.4 'Prompt', 'DM Sans', sans-serif;
  text-decoration: none;
  border-bottom: 1px solid #9FC7E1;
}
.sales-home .hero-scroll-reveal a:focus-visible {
  outline: 3px solid #5F9FC6;
  outline-offset: 3px;
  border-radius: 5px;
}
.sales-home #hero-next {
  scroll-margin-top: 18px;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .sales-home .hero-scroll .hero-scroll-frame {
    box-shadow: 0 14px 30px rgba(25,25,25,.06);
  }
  .sales-home .hero-scroll .hero-photo .hero-intro {
    padding: clamp(22px, 5.2vh, 42px) 16px 0;
  }
  .sales-home .hero-scroll .hero-photo .hero-intro h1 {
    font-size: clamp(28px, 7.6vw, 38px);
    margin: 12px auto 11px;
  }
  .sales-home .hero-scroll .hero-photo .hero-intro p:not(.demo-delivery-note) {
    font-size: clamp(13px, 3.65vw, 14.5px);
    line-height: 1.48;
  }
  .sales-home .hero-scroll .hero-photo .hero-intro .hero-cta-row {
    margin-top: clamp(14px, 2.6vh, 20px);
  }
  .sales-home .hero-scroll .hero-photo .hero-intro .cta-button {
    font-size: 14px;
    padding: 11px 18px;
  }
  .sales-home .hero-scroll .hero-photo .hero-intro .demo-delivery-note {
    font-size: 11px;
  }
  .sales-home .hero-scroll .hero-photo .hero-notice-flow {
    inset: auto auto clamp(35px, 8vh, 62px) 15px !important;
    width: min(285px, calc(100% - 30px));
  }
  .sales-home .hero-scroll-reveal {
    bottom: clamp(12px, 3vh, 25px);
    gap: 1px;
  }
  .sales-home .hero-scroll-reveal > span { font-size: 9px; }
  .sales-home .hero-scroll-reveal a { padding-block: 3px; font-size: 13px; }
}
@media (max-width: 420px) and (max-height: 650px) {
  /* On compact phones preserve the full headline + working CTA, not overlapping cards. */
  .sales-home .hero-scroll .hero-photo .hero-notice-flow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sales-home .hero-scroll { height: auto; padding: 16px clamp(12px, 3vw, 28px) 0; }
  .sales-home .hero-scroll-stage {
    position: relative;
    top: auto;
    height: clamp(540px, 85svh, 740px);
    overflow: visible;
    background: transparent;
  }
  .sales-home .hero-scroll .hero-scroll-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    transform: none !important;
    border-radius: 24px !important;
    will-change: auto;
  }
  .sales-home .hero-scroll .hero-photo .hero-intro,
  .sales-home .hero-scroll .hero-photo .hero-notice-flow {
    opacity: 1 !important;
    will-change: auto;
  }
  .sales-home .hero-scroll-reveal { display: none; }
}


/* 2026 split-hero extension: retain the established desktop scroll-to-card motion,
   while revealing the photograph from the right independently, once per view. */
@media (min-width:768px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
    gap:clamp(22px,4vw,70px);
    padding:clamp(32px,5vw,80px) clamp(26px,6vw,105px) !important;
    background:#FAF8F3;
  }
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro {
  position:relative;
  z-index:3;
  flex:none;
  align-self:center;
  width:100%;
  margin:0;
  padding:0;
  text-align:left;
  will-change:auto;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro .hero-cta-row {
  justify-content:flex-start;
  margin:26px 0 0;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro .demo-delivery-note {
  margin:11px 0 0;
  max-width:46ch;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow {
  position:absolute !important;
  inset:auto auto 24px 22px !important;
  z-index:4;
  width:min(295px,calc(100% - 44px));
  margin:0 !important;
  opacity:1;
  transform:none !important;
  pointer-events:none;
  will-change:auto;
}
@media (prefers-reduced-motion:no-preference) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro {
    opacity:0;
    transform:translate3d(-12px,0,0) !important;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split[data-wipe-visible="true"] .hero-intro {
    opacity:1;
    transform:translate3d(0,0,0) !important;
  }
}
@media (max-width:767px) {
  .sales-home .hero-scroll {
    height:auto;
    padding:0;
  }
  .sales-home .hero-scroll-stage {
    position:relative;
    top:auto;
    height:auto;
    overflow:visible;
    background:#FAF8F3;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    padding:2px 18px 45px !important;
    border-radius:0;
    box-shadow:none;
    transform:none !important;
    overflow:visible;
    gap:25px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro {
    padding:0 2px;
    width:100%;
    max-width:560px;
    margin:0 auto;
    text-align:left;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1 {
    margin:12px 0 13px;
    text-align:left;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro .hero-cta-row {
    margin:19px 0 0;
    justify-content:flex-start;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow {
    inset:auto auto 15px 13px !important;
    width:min(250px,calc(100% - 26px));
  }
  .sales-home .hero-scroll-reveal,
  .sales-home .hero-scroll.hero-scroll-revealed .hero-scroll-reveal {
    position:relative;
    inset:auto;
    padding:0 16px 5px;
    margin:0 auto;
    opacity:1;
    transform:none;
    visibility:visible;
    pointer-events:auto;
  }
}
/* Reduced motion keeps both columns (or mobile image first) immediately visible. */
@media (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll {
    height:auto;
    padding:0;
  }
  .sales-home .hero-scroll-stage {
    position:relative;
    height:auto;
    overflow:visible;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    position:relative;
    inset:auto;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    padding:clamp(30px,5vw,80px) clamp(24px,6vw,100px) !important;
    border-radius:0 !important;
    transform:none !important;
    box-shadow:none;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro {
    opacity:1 !important;
    transform:none !important;
    padding:0;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow {
    opacity:1 !important;
  }
  .sales-home .hero-scroll-reveal { display:none; }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    padding:2px 18px 45px !important;
  }
}


/* The booking-flow hint beneath the homepage logo: overlapping clipped text
   halves, genuine native hash anchor, no new floating layer or page overflow. */
.sales-home .hero-scroll-reveal a.tle-hero-split-link {
  display:inline-grid;
  place-items:center;
  min-height:44px;
  max-width:100%;
  padding:7px 8px;
  font-weight:600;
  touch-action:manipulation;
}
.sales-home .hero-scroll-reveal .tle-hero-split-stack {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  position:relative;
  max-width:100%;
  white-space:nowrap;
  isolation:isolate;
}
.sales-home .hero-scroll-reveal .tle-hero-split-stack > span {
  font:inherit;
  grid-area:1 / 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  line-height:1.4;
  letter-spacing:-.01em;
}
.sales-home .hero-scroll-reveal .tle-hero-split-stack svg {
  flex:none;
  width:1.1em;
  height:1.1em;
  stroke-width:2;
}
.sales-home .hero-scroll-reveal .tle-hero-split-front {
  z-index:2;
  color:#191919;
  transform:translate3d(0,0,0);
  transition:transform 587ms linear(0,0.094 5.6%,0.455 16.7%,0.726 27.8%,0.873 38.9%,0.944 50%,0.985 66.7%,1 100%);
}
.sales-home .hero-scroll-reveal .tle-hero-split-upper {clip-path:inset(0 0 50% 0)}
.sales-home .hero-scroll-reveal .tle-hero-split-lower {clip-path:inset(50% 0 0 0)}
.sales-home .hero-scroll-reveal .tle-hero-split-reveal {
  z-index:1;
  color:#406D88; /* WCAG AA text contrast on ivory and powder blue */
  font-weight:600;
  font-size:.79em;
  letter-spacing:0;
  opacity:0;
  transform:scale(.88);
  transition:transform 587ms cubic-bezier(.32,.72,0,1), opacity 320ms ease;
}
@media (hover:hover) and (pointer:fine) {
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-upper {
    transform:translate3d(0,-.30em,0);
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-lower {
    transform:translate3d(0,.30em,0);
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-reveal {
    opacity:1;
    transform:scale(1);
  }
}
.sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-upper,
.sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-upper {transform:translate3d(0,-.30em,0)}
.sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-lower,
.sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-lower {transform:translate3d(0,.30em,0)}
.sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-reveal,
.sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-reveal {opacity:1;transform:scale(1)}
@media (max-width:767px) {
  .sales-home .hero-scroll-reveal a.tle-hero-split-link {padding:5px 8px;font-size:clamp(13px,3.4vw,15px)}
}
@media (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll-reveal .tle-hero-split-front,
  .sales-home .hero-scroll-reveal .tle-hero-split-reveal {transition:none!important}
  .sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-front,
  .sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-front {
    transform:none!important;
    opacity:0;
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-reveal,
  .sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-reveal {
    transform:none!important;
    opacity:1;
  }
}
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine) {
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-front {
    transform:none!important;
    opacity:0;
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-reveal {
    transform:none!important;
    opacity:1;
  }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce) {
  /* Keep the useful in-page link visible even when page-scale motion is off. */
  .sales-home .hero-scroll .hero-scroll-reveal {display:grid}
}


/* v3 / 2026-10-16: legible slower split-word treatment.
   Previous .30em travel left less room than the reveal's line-height, so the
   black and blue words overlapped during touch, as seen in mobile screenshots.
   Scope everything to the existing link; do not enlarge or shift the hero. */
.sales-home .hero-scroll-reveal a.tle-hero-split-link {
  min-height: 104px;
  width: min(100%, 480px);
  padding: 12px clamp(12px, 2vw, 24px);
  font-size: clamp(20px, 1.95vw, 24px);
  line-height: 1.16;
  letter-spacing: -.02em;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.sales-home .hero-scroll-reveal .tle-hero-split-stack {
  align-self: center;
  overflow: visible;
}
.sales-home .hero-scroll-reveal .tle-hero-split-front {
  transition: transform 1080ms cubic-bezier(.32,.72,0,1);
}
.sales-home .hero-scroll-reveal .tle-hero-split-reveal {
  color: #275F81;
  font-size: .94em;
  opacity: 0;
  transform: scale(.90);
  transition: transform 1000ms cubic-bezier(.32,.72,0,1), opacity 160ms ease;
}
@media (hover:hover) and (pointer:fine) {
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-upper {
    transform: translate3d(0,-1.10em,0);
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-lower {
    transform: translate3d(0,1.10em,0);
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:hover .tle-hero-split-reveal {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s, 260ms;
    transition-duration: 1000ms, 520ms;
  }
}
.sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-upper {
  transform: translate3d(0,-1.10em,0);
}
.sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-lower {
  transform: translate3d(0,1.10em,0);
}
.sales-home .hero-scroll-reveal .tle-hero-split-link:focus-visible .tle-hero-split-reveal {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s, 260ms;
  transition-duration: 1000ms, 520ms;
}
@media (max-width:767px) {
  .sales-home .hero-scroll-reveal {
    gap: 8px;
  }
  .sales-home .hero-scroll-reveal a.tle-hero-split-link {
    min-height: 90px;
    width: min(100%, 420px);
    padding: 12px 9px;
    font-size: clamp(17px,4.6vw,19px);
  }
}
@keyframes tle-word-peek-upper {
  0%,13%,88%,100% {transform:translate3d(0,0,0)}
  34%,68% {transform:translate3d(0,-1.10em,0)}
}
@keyframes tle-word-peek-lower {
  0%,13%,88%,100% {transform:translate3d(0,0,0)}
  34%,68% {transform:translate3d(0,1.10em,0)}
}
@keyframes tle-word-peek-reveal {
  0%,23%,83%,100% {opacity:0;transform:scale(.9)}
  37%,67% {opacity:1;transform:scale(1)}
}
/* Touch screens have no hover. Demonstrate the effect once, slowly, without
   requiring a long press or intercepting the native first-tap navigation. */
@media (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference) {
  .sales-home .hero-scroll-reveal .tle-hero-split-upper {
    animation:tle-word-peek-upper 8.2s ease-in-out .8s 1 both;
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-lower {
    animation:tle-word-peek-lower 8.2s ease-in-out .8s 1 both;
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-reveal {
    animation:tle-word-peek-reveal 8.2s ease-in-out .8s 1 both;
  }
  .sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-upper,
  .sales-home .hero-scroll-reveal .tle-hero-split-link:active .tle-hero-split-lower {
    /* Never collapse into the old .3em overlapping press state. */
    transform:none;
  }
}
/* Motion-reduction means the simple, original readable link stays in place. */
@media (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll-reveal .tle-hero-split-upper,
  .sales-home .hero-scroll-reveal .tle-hero-split-lower,
  .sales-home .hero-scroll-reveal .tle-hero-split-reveal {
    animation:none !important;
    transition:none !important;
  }
}

/* 2026-10-16 iPad/tablet parity: portrait is a reading layout, not a squeezed
   desktop split. Keep the original scroll-to-card and photo wipe intact. */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    align-items:stretch;
    align-content:stretch;
    gap:clamp(16px,2vh,25px);
    padding:clamp(18px,2.5vw,28px) clamp(18px,3.2vw,34px) clamp(42px,5.5vh,70px) !important;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    grid-column:1;
    grid-row:1;
    align-self:stretch;
    height:100%;
    min-height:0;
    max-height:none;
    width:100%;
    border-radius:22px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro {
    grid-column:1;
    grid-row:2;
    align-self:end;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    text-align:left;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1 {
    max-width:24ch;
    margin:10px 0 11px;
    font-size:clamp(34px,4.7vw,45px);
    line-height:1.12;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro p:not(.demo-delivery-note) {
    max-width:62ch;
    font-size:clamp(14px,1.75vw,16px);
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro .hero-cta-row {
    margin:16px 0 0;
    justify-content:flex-start;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro .demo-delivery-note {
    margin:8px 0 0;
    font-size:11px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow {
    inset:auto auto 20px 20px !important;
    width:min(300px,calc(100% - 40px));
  }
}
/* Landscape iPads keep text beside the photo, but allocate the image more
   room and remove desktop-sized outer gutters. */
@media (min-width:768px) and (max-width:1180px) and (orientation:landscape) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(16px,2.5vw,32px);
    padding:clamp(22px,3vw,42px) clamp(20px,3.2vw,40px) !important;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    height:clamp(415px,70svh,560px);
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1 {
    font-size:clamp(34px,3.7vw,46px);
  }
}
/* On a touch iPad the scroll hint appears later. Begin the slow split-word
   demonstration when it actually becomes visible, not on the first page paint. */
@media (min-width:768px) and (max-width:1180px) and (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference) {
  .sales-home .hero-scroll .hero-scroll-reveal .tle-hero-split-upper,
  .sales-home .hero-scroll .hero-scroll-reveal .tle-hero-split-lower,
  .sales-home .hero-scroll .hero-scroll-reveal .tle-hero-split-reveal {
    animation:none;
  }
  .sales-home .hero-scroll.hero-scroll-revealed .hero-scroll-reveal .tle-hero-split-upper {
    animation:tle-word-peek-upper 8.2s ease-in-out .25s 1 both;
  }
  .sales-home .hero-scroll.hero-scroll-revealed .hero-scroll-reveal .tle-hero-split-lower {
    animation:tle-word-peek-lower 8.2s ease-in-out .25s 1 both;
  }
  .sales-home .hero-scroll.hero-scroll-revealed .hero-scroll-reveal .tle-hero-split-reveal {
    animation:tle-word-peek-reveal 8.2s ease-in-out .25s 1 both;
  }
}
/* No scroll reveal on reduced motion: show a full-sized photo, with readable
   text following in document flow; never reserve an empty fractional track. */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait) and (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    grid-template-rows:auto auto;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    height:clamp(440px,72vw,680px);
  }
}

/* Enlarged booking-flow hint; scoped to the original native in-page link.
   Wider lettering, improved breathing room, no overlap during the split reveal. */
.sales-home .hero-scroll-reveal { gap: 10px; }
.sales-home .hero-scroll-reveal > span {
  font-size: clamp(11px, 1.08vw, 13px);
  font-weight: 700;
  letter-spacing: .13em;
}
.sales-home .hero-scroll-reveal .tle-hero-split-stack > span {
  line-height: 1.18;
  letter-spacing: -.018em;
}
@media (min-width: 768px) and (max-width: 1100px) {
  .sales-home .hero-scroll-reveal a.tle-hero-split-link {
    font-size: clamp(20px, 2.3vw, 23px);
  }
}
@media (max-width: 767px) {
  .sales-home .hero-scroll-reveal { gap: 4px; }
  .sales-home .hero-scroll-reveal > span { font-size: 11px; }
}


/* Soft blue gradient is confined to the SAME shrinking hero card as the
   approved photo and main heading. Outer dotted/connection background is
   unchanged. The mesh has no input handling, overlay or new scroll logic. */
@media (min-width:1024px) {
  /* Change ONLY the interior ivory surface, never the dotted scroll backdrop.
     This powder-blue base remains visible even before the blobs drift. */
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    background:linear-gradient(116deg,#E9F5FE 0%,#F3F9FF 38%,#EAF4FD 73%,#F7FAFE 100%);
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .tle-hero-soft-mesh {
    position:absolute;inset:0;z-index:0;overflow:hidden;
    pointer-events:none;border-radius:inherit;background:transparent;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    z-index:2; /* Photo and overlays always paint above the mesh. */
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .tle-hero-soft-mesh > span {
    position:absolute;display:block;aspect-ratio:1;border-radius:50%;
    pointer-events:none;transform:translate3d(0,0,0);will-change:transform;
  }
  .sales-home .tle-hero-soft-mesh > span:nth-child(1) {
    width:clamp(360px,45vw,740px);left:-13%;top:-31%;
    background:radial-gradient(circle,rgba(160,212,244,.62) 0%,rgba(167,216,245,0) 68%);
    animation:tle-hero-mesh-a 9.5s ease-in-out infinite alternate;
  }
  .sales-home .tle-hero-soft-mesh > span:nth-child(2) {
    width:clamp(330px,40vw,650px);left:12%;top:54%;
    background:radial-gradient(circle,rgba(195,229,249,.72) 0%,rgba(207,234,250,0) 68%);
    animation:tle-hero-mesh-b 11.7s ease-in-out infinite alternate;
  }
  .sales-home .tle-hero-soft-mesh > span:nth-child(3) {
    width:clamp(330px,42vw,680px);left:43%;top:-23%;
    background:radial-gradient(circle,rgba(139,194,230,.43) 0%,rgba(127,186,225,0) 68%);
    animation:tle-hero-mesh-c 8.6s ease-in-out infinite alternate;
  }
  .sales-home .tle-hero-soft-mesh > span:nth-child(4) {
    width:clamp(270px,30vw,520px);left:52%;top:66%;
    background:radial-gradient(circle,rgba(223,242,253,.80) 0%,rgba(233,245,252,0) 68%);
    animation:tle-hero-mesh-d 10.8s ease-in-out infinite alternate;
  }
}
@keyframes tle-hero-mesh-a {
  from { transform:translate3d(-3%,0,0) scale(.95); }
  to { transform:translate3d(18%,9%,0) scale(1.12); }
}
@keyframes tle-hero-mesh-b {
  from { transform:translate3d(8%,-8%,0) scale(1.04); }
  to { transform:translate3d(-15%,6%,0) scale(.9); }
}
@keyframes tle-hero-mesh-c {
  from { transform:translate3d(2%,8%,0) scale(.92); }
  to { transform:translate3d(-16%,-8%,0) scale(1.09); }
}
@keyframes tle-hero-mesh-d {
  from { transform:translate3d(-4%,4%,0) scale(.98); }
  to { transform:translate3d(14%,-15%,0) scale(1.12); }
}
/* One authoritative desktop first-fold alignment. The matching photo and
   heading stay inside the initial laptop viewport; keep the scroll scaling
   wrapper, original photo wipe and outer dotted stage unchanged. */
@media (min-width:1181px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro,
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    top:-72px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    height:min(clamp(465px,42vw,590px),calc(100svh - 265px));
  }
}
@media (max-width:1023px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .tle-hero-soft-mesh {
    display:none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .tle-hero-soft-mesh > span {
    animation:none!important;transform:none!important;will-change:auto;
  }
}


/* tle-desktop-hero-blue-surface-20261016
   The ambient blue belongs to the ENTIRE original photo+heading card on first
   paint, not to the dotted outer scroll stage. It is always under the copy,
   image and demo button. No edits to image wipe or scroll-transform logic. */
@media (min-width:1024px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    background:linear-gradient(118deg,#E3F2FE 0%,#EFF8FE 43%,#DDEFFF 100%);
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .tle-hero-soft-mesh {
    isolation:isolate;
  }
}
/* Extra-short laptop windows: keep the photo fully visible without
   placing it on top of the headline or changing tablet/phone layouts. */
@media (min-width:1181px) and (max-height:640px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    height:min(60svh,430px);
    top:-40px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro {
    top:-40px;
  }
}

/* tle-home-notification-bob-v1: localized illustrative UI, no live transactions.
   Two layers of animation: the card enters via opacity/individual translate+scale,
   then floats using transform; no JS/parallax or external motion library. */
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow {
  position:absolute !important;
  inset:0 !important;
  display:block;
  width:100% !important;
  height:100%;
  margin:0 !important;
  opacity:1;
  pointer-events:none;
  transform:none !important;
  z-index:4;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification {
  position:absolute;
  box-sizing:border-box;
  width:min(225px,calc(100% - 36px));
  max-width:calc(100% - 28px);
  min-height:0;
  margin:0;
  padding:9px 11px;
  grid-template-columns:31px minmax(0,1fr);
  gap:9px;
  border:1px solid rgba(210,227,239,.94);
  border-radius:17px;
  background:rgba(255,255,255,.97);
  box-shadow:0 12px 26px rgba(25,48,65,.17),0 2px 6px rgba(25,48,65,.07),inset 0 1px 0 #fff;
  opacity:1;
  transform:none;
  animation:none;
  pointer-events:none;
  will-change:auto;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-icon {
  width:31px;height:31px;border-radius:10px;
  background:#dceffd;color:#356b8a;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-icon svg {
  width:17px;height:17px;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-meta {
  font-size:8px;gap:6px;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification strong {
  font-size:12px;line-height:1.18;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification p {
  font-size:10px;line-height:1.25;margin-top:2px;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-1 {
  inset:18px auto auto 15px;--tle-bob-duration:3.2s;--tle-bob-delay:-.9s;--tle-enter-delay:0ms;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-2 {
  inset:auto auto 17px 23px;--tle-bob-duration:3.9s;--tle-bob-delay:-2.3s;--tle-enter-delay:100ms;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-3 {
  inset:116px 13px auto auto;--tle-bob-duration:4.1s;--tle-bob-delay:-1.5s;--tle-enter-delay:200ms;
}
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-4 {
  inset:auto 12px 109px auto;--tle-bob-duration:3.6s;--tle-bob-delay:-3.1s;--tle-enter-delay:300ms;
}
@keyframes tle-home-notification-bob {
  from { transform:translate3d(0,4px,0) rotate(-1.2deg); }
  to { transform:translate3d(0,-6px,0) rotate(1.2deg); }
}
@keyframes tle-home-notification-enter {
  0% { opacity:0; translate:0 13px; scale:.88; }
  70% { opacity:1; translate:0 -3px; scale:1.025; }
  100% { opacity:1; translate:0 0; scale:1; }
}
@media (prefers-reduced-motion:no-preference) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split.hero-media-ready[data-wipe-visible="true"] .hero-split-visual .hero-notice-flow .notification {
    animation:
      tle-home-notification-enter 680ms cubic-bezier(.2,1,.32,1) var(--tle-enter-delay,0ms) both,
      tle-home-notification-bob var(--tle-bob-duration,3.6s) ease-in-out var(--tle-bob-delay,-1s) infinite alternate;
    will-change:transform;
  }
}
@media (max-width:767px) {
  /* Phone photo keeps its two original notices; the added ones stay on tablet/desktop. */
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-3,
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-4 {
    display:none;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification {
    width:min(238px,calc(100% - 35px));
    max-width:calc(100% - 35px);
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-1 {
    inset:auto auto 99px 13px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-2 {
    inset:auto auto 16px 20px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification {
    opacity:1;animation:none !important;transform:none !important;
    translate:none;scale:1;will-change:auto;
  }
}

/* tle-mobile-hero-photo-balance-20261017
   More photo, less blank space after the animated booking-flow link.
   All overrides are mobile-only and preserve the native word-split animation,
   hero wipe, scroll motion, and separately animated floating UI cards. */
@media (max-width:767px) {
  .sales-home .hero-scroll .hero-scroll-reveal,
  .sales-home .hero-scroll.hero-scroll-revealed .hero-scroll-reveal {
    padding:0 12px;
    gap:2px;
  }
  .sales-home .hero-scroll .hero-scroll-reveal a.tle-hero-split-link {
    min-height:90px;
    padding:7px 8px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    padding:0 18px 36px !important;
    gap:19px;
    margin-top:-14px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    width:calc(100% + 16px);
    max-width:none;
    height:clamp(340px,100vw,430px);
    min-height:0;
    margin-inline:-8px;
    border-radius:20px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual > img.hero-main-image {
    object-position:52% 43%;
  }
  /* Size the pills themselves; do not scale their transform, which is owned
     by the existing bob animation and would trigger a visual glitch. */
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification {
    width:min(208px,calc(100% - 32px));
    max-width:calc(100% - 32px);
    padding:7px 8px;
    grid-template-columns:27px minmax(0,1fr);
    gap:7px;
    border-radius:14px;
    box-shadow:0 8px 18px rgba(25,48,65,.14),0 2px 5px rgba(25,48,65,.06);
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-icon {
    width:27px;height:27px;border-radius:9px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-icon svg {
    width:15px;height:15px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-meta {
    font-size:7px;gap:4px;margin-bottom:2px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification strong {
    font-size:10.5px;line-height:1.2;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notification p {
    font-size:9px;line-height:1.25;margin-top:2px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-1 {
    inset:auto auto 88px 12px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual .hero-notice-flow .notice-2 {
    inset:auto auto 13px 17px;
  }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    padding:0 18px 36px !important;
  }
}

/* tle-home-hero-text-shine-20261017
   Native EN/ES homepage h1 only. Wider letterforms / more useful line length,
   decorative ink-blue-white sweep with solid-ink fallback. No JS, overlays or
   transforms; the hero/photo/scroll/chips animations remain independent. */
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1.tle-hero-heading-shine {
  color:#191919;
  width:100%;
  max-width:none;
  font-weight:620;
  letter-spacing:-.018em;
  line-height:1.14;
  text-wrap:wrap;
  overflow-wrap:normal;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1.tle-hero-heading-shine {
    background-image:linear-gradient(105deg,#191919 43%,#5686A1 48.6%,#FFFFFF 50%,#5686A1 51.4%,#191919 57%);
    background-size:260% 100%;
    background-position:130% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}
@keyframes tle-home-hero-ink-shine {
  0% {background-position:130% 0}
  70%,100% {background-position:-30% 0}
}
@media (prefers-reduced-motion:no-preference) {
  @supports ((-webkit-background-clip:text) or (background-clip:text)) {
    .sales-home .hero-scroll .hero-scroll-frame.hero-split.hero-media-ready[data-wipe-visible="true"] .hero-intro h1.tle-hero-heading-shine {
      animation:tle-home-hero-ink-shine 3.8s linear infinite;
    }
  }
}
@media (max-width:767px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1.tle-hero-heading-shine {
    /* Use more of the phone width rather than balancing text into a narrow block. */
    width:calc(100% + 12px);
    margin-left:-6px;
    max-width:none;
    font-size:clamp(29px,7.5vw,38px);
    line-height:1.16;
    letter-spacing:-.018em;
  }
}
@media (prefers-reduced-motion:reduce) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1.tle-hero-heading-shine {
    animation:none !important;
    background-position:50% 0 !important;
    background-image:none !important;
    -webkit-text-fill-color:#191919;
    color:#191919;
  }
}

/* tle-home-heading-horizontal-flow-20261017
   Do not force a break between the two sentences. Let real text wrap naturally
   as a long editorial heading, not four short heavy lines. Keep the existing
   background-position shine and every other hero layer unchanged. */
.sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1.tle-hero-heading-shine {
  max-width:none;
  font-weight:540;
  letter-spacing:-.012em;
  line-height:1.18;
  text-wrap:wrap;
}
@media (max-width:767px) {
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-intro h1.tle-hero-heading-shine {
    width:calc(100% + 18px);
    max-width:none;
    margin-left:-9px;
    font-size:clamp(24px,6.35vw,29px);
    font-weight:540;
    letter-spacing:-.013em;
    line-height:1.24;
  }
}

/* 2026-10-18: One continuous starfield across the whole first screen.
   This overlay sits on the public hero stage (not inside the photo) so it
   keeps covering the photograph as the card shrinks on desktop scroll.
   Screen blend removes the scene's black canvas backdrop without changing
   the original bright photo, copy, native scroll, or working booking CTA. */
.sales-home .hero-scroll .hero-scroll-stage--starfield > .tle-starfield-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  opacity: .60;
  border-radius: 0;
  background: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 64%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 64%);
  pointer-events: none;
}
/* On phones, remove the extra link above the photo and give the image the
   first fold. Keep the image aspect/crop, swipe/scroll and cards intact. */
@media (max-width: 767px) {
  .sales-home .hero-scroll .hero-scroll-stage--starfield {
    position: relative;
    overflow: hidden;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split {
    margin-top: 0;
    padding: 0 12px 30px !important;
    gap: 18px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual {
    width: 100%;
    max-width: none;
    height: clamp(390px, 72svh, 620px);
    min-height: 0;
    margin-inline: 0;
    border-radius: 22px;
  }
  .sales-home .hero-scroll .hero-scroll-frame.hero-split .hero-split-visual > img.hero-main-image {
    object-position: 52% 28%;
  }
  .sales-home .hero-scroll .hero-scroll-stage--starfield > .tle-starfield-accent {
    opacity: .70;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 96%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sales-home .hero-scroll .hero-scroll-stage--starfield > .tle-starfield-accent {
    display: none;
  }
}