/* ==========================================================================
   Seasons Find — extended motion layer
   Page transitions, loader, animated logo, liquid morphing, scrollytelling,
   skeleton loading, animated icons, glassmorphism.
   Every effect is disabled under prefers-reduced-motion at the foot of file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25. LOADING ANIMATION — brand loader on first paint
   -------------------------------------------------------------------------- */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--navy-950);
  display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__mark{width:76px;height:76px;animation:loaderPulse 1.5s ease-in-out infinite}
.loader__mark polygon{opacity:0;animation:loaderPiece .9s var(--ease-out) forwards}
.loader__mark polygon:nth-child(1){animation-delay:.05s}
.loader__mark polygon:nth-child(2){animation-delay:.16s}
.loader__mark polygon:nth-child(3){animation-delay:.27s}
.loader__mark polygon:nth-child(4){animation-delay:.38s}
.loader__mark polygon:nth-child(5){animation-delay:.49s}
@keyframes loaderPiece{
  from{opacity:0;transform:translateY(16px) scale(.86)}
  to{opacity:1;transform:none}
}
@keyframes loaderPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.loader__bar{
  position:absolute;bottom:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400),var(--sky-400));
  animation:loaderBar 1.1s var(--ease-out) forwards;
}
@keyframes loaderBar{to{width:100%}}

/* --------------------------------------------------------------------------
   22. PAGE TRANSITION — fade/lift the document in, wipe out on navigate
   -------------------------------------------------------------------------- */
.pt{animation:ptIn .65s var(--ease-out) both}
@keyframes ptIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
body.is-leaving .pt{animation:ptOut .32s var(--ease) forwards}
@keyframes ptOut{
  to{opacity:0;transform:translateY(-10px)}
}

/* --------------------------------------------------------------------------
   10. ANIMATED LOGO — pieces stagger in, then react to hover
   -------------------------------------------------------------------------- */
.brand__mark{overflow:visible}
.brand:hover .brand__mark{animation:logoSpin .9s var(--ease-out)}
@keyframes logoSpin{
  0%{transform:rotate(0) scale(1)}
  45%{transform:rotate(-9deg) scale(1.1)}
  100%{transform:rotate(0) scale(1)}
}

/* --------------------------------------------------------------------------
   17. LIQUID MOTION — organic blob that morphs behind dark sections
   -------------------------------------------------------------------------- */
.blob{
  position:absolute;z-index:-1;pointer-events:none;
  width:clamp(260px,34vw,460px);aspect-ratio:1;
  background:linear-gradient(135deg,rgba(46,159,224,.34),rgba(212,168,67,.26));
  filter:blur(8px);opacity:.6;
  border-radius:38% 62% 57% 43% / 47% 38% 62% 53%;
  animation:blobMorph 16s ease-in-out infinite,blobDrift 22s ease-in-out infinite alternate;
}
.blob--a{top:-6%;right:-6%}
.blob--b{bottom:-10%;left:-8%;animation-delay:-7s;opacity:.45}
@keyframes blobMorph{
  0%,100%{border-radius:38% 62% 57% 43% / 47% 38% 62% 53%}
  25%    {border-radius:62% 38% 42% 58% / 56% 61% 39% 44%}
  50%    {border-radius:45% 55% 63% 37% / 38% 52% 48% 62%}
  75%    {border-radius:58% 42% 35% 65% / 63% 44% 56% 37%}
}
@keyframes blobDrift{
  from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  to  {transform:translate3d(-7%,6%,0) rotate(22deg) scale(1.12)}
}

/* --------------------------------------------------------------------------
   2. SCROLLYTELLING — sticky panel, steps advance as you scroll past
   -------------------------------------------------------------------------- */
.scrolly{display:grid;gap:var(--sp-6);position:relative}
@media(min-width:960px){
  .scrolly{grid-template-columns:.95fr 1.05fr;gap:var(--sp-8);align-items:start}
}
.scrolly__sticky{position:relative}
@media(min-width:960px){
  .scrolly__sticky{position:sticky;top:calc(var(--header-h) + 2.5rem)}
}
.scrolly__visual{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow-lg);background:var(--navy-850);
}
.scrolly__visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);
  transition:opacity .8s var(--ease-out),transform 1.2s var(--ease-out);
}
.scrolly__visual img.is-active{opacity:1;transform:scale(1)}
.scrolly__steps{display:grid;gap:var(--sp-4)}
.scrolly__step{
  position:relative;padding:var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-6) + 1rem);
  border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;opacity:.5;
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.scrolly__step::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--line);
  transition:background .5s var(--ease),transform .5s var(--ease);
  transform:scaleY(.4);transform-origin:center;
}
.scrolly__step.is-active{
  opacity:1;transform:translateX(5px);
  box-shadow:var(--shadow);border-color:rgba(28,42,94,.14);
}
.scrolly__step.is-active::before{background:var(--gold-500);transform:scaleY(1)}
.scrolly__step h3{font-size:var(--step-1);margin-bottom:.45rem}
.scrolly__step p{font-size:.93rem;color:var(--muted);margin:0}
.scrolly__num{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);
  display:block;margin-bottom:.4rem;
}

/* --------------------------------------------------------------------------
   24. SKELETON SCREENS — shown while imagery decodes
   -------------------------------------------------------------------------- */
.skel{
  position:relative;overflow:hidden;background:var(--surface-2);
}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);
  animation:skelSweep 1.5s ease-in-out infinite;
}
.skel.is-loaded::after{animation:none;opacity:0}
@keyframes skelSweep{to{transform:translateX(100%)}}

/* --------------------------------------------------------------------------
   11. ANIMATED ICONS — gentle life on hover
   -------------------------------------------------------------------------- */
.herorail__item:hover .herorail__icon svg{animation:iconNudge .7s var(--ease)}
.dropdown__link:hover .dropdown__icon svg{animation:iconNudge .7s var(--ease)}
@keyframes iconNudge{
  0%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-4px) rotate(-8deg)}
  70%{transform:translateY(1px) rotate(4deg)}
  100%{transform:translateY(0) rotate(0)}
}
.card__link:hover svg{animation:arrowRun .6s var(--ease)}
@keyframes arrowRun{
  0%{transform:translateX(0)}
  40%{transform:translateX(7px)}
  100%{transform:translateX(4px)}
}

/* --------------------------------------------------------------------------
   28. GLASSMORPHISM — frosted panels, only ever over imagery
   -------------------------------------------------------------------------- */
.glass{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-radius:var(--radius);
}

/* --------------------------------------------------------------------------
   9. MORPHING — shape-shifting section divider
   -------------------------------------------------------------------------- */
.morph-divider{display:block;width:100%;height:clamp(40px,6vw,80px);line-height:0}
.morph-divider path{
  fill:currentColor;
  animation:morphWave 14s ease-in-out infinite alternate;
}
@keyframes morphWave{
  from{d:path("M0,40 C240,80 480,0 720,30 C960,60 1200,10 1440,40 L1440,80 L0,80 Z")}
  to  {d:path("M0,30 C240,0 480,70 720,50 C960,25 1200,65 1440,25 L1440,80 L0,80 Z")}
}

/* --------------------------------------------------------------------------
   Reduced motion — switch all of the above off
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .loader{display:none}
  .pt,.brand:hover .brand__mark{animation:none}
  .blob,.morph-divider path{animation:none}
  .skel::after{animation:none;opacity:0}
  .scrolly__visual img{opacity:1;transition:none}
  .scrolly__visual img:not(:first-child){display:none}
  .scrolly__step{opacity:1}
  .herorail__item:hover .herorail__icon svg,
  .dropdown__link:hover .dropdown__icon svg,
  .card__link:hover svg{animation:none}
}

/* ==========================================================================
   EXPLODED SYSTEM DIAGRAM
   Parts separate and label themselves as the figure scrolls into view.
   ========================================================================== */
.exploded{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:clamp(1rem,3vw,2.25rem);
}
.exploded svg{width:100%;height:auto;overflow:visible}

/* every part drifts outward from its seated position */
.exp-part{
  transform:translate(0,0);
  transition:transform 1.1s var(--ease-out);
  transition-delay:var(--d,0s);
}
.exploded.is-apart .exp-part{
  transform:translate(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px));
}

.exp-shell{fill:rgba(255,255,255,.05)}
.exp-shell-line{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.5}
.exp-unit__name{
  fill:var(--gold-400);font-family:var(--font-display);font-weight:800;
  font-size:12px;letter-spacing:2.4px;text-anchor:middle;
}

.exp-coil{fill:rgba(46,159,224,.2);stroke:var(--sky-400);stroke-width:1.5}
.exp-evap{fill:rgba(95,187,70,.18);stroke:var(--green-500);stroke-width:1.5}
.exp-fins line,.exp-mesh line,.exp-blower-slots line{stroke:rgba(255,255,255,.35);stroke-width:1}
.exp-ring{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.3);stroke-width:1.5}
.exp-blades{fill:rgba(242,167,27,.4);transform-origin:228px 128px}
.exploded.is-apart .exp-blades{animation:expSpin 3.4s linear infinite}
@keyframes expSpin{to{transform:rotate(360deg)}}
.exp-hub{fill:var(--amber-500)}
.exp-comp{fill:rgba(230,51,41,.3);stroke:var(--red-500);stroke-width:1.5}
.exp-comp-top{fill:rgba(230,51,41,.5);stroke:var(--red-500);stroke-width:1.5}
.exp-filter{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.4);stroke-width:1.5}
.exp-blower{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.3);stroke-width:1.5}

.exp-label{
  fill:#C3CCE4;font-family:var(--font-body);font-size:11.5px;
  text-anchor:middle;opacity:0;transition:opacity .6s ease;
  transition-delay:calc(var(--d,0s) + .35s);
}
.exploded.is-apart .exp-label{opacity:1}
.exp-label--line{fill:#8E9BBD;font-size:10.5px}

/* refrigerant lines draw themselves */
.exp-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s var(--ease-out) .5s}
.exploded.is-apart .exp-line{stroke-dashoffset:0}
.exp-line--hot{stroke:var(--red-500)}
.exp-line--cold{stroke:var(--sky-400)}

/* cold air puffs */
.exp-air path{
  fill:none;stroke:var(--sky-300);stroke-width:2;stroke-linecap:round;
  opacity:0;
}
.exploded.is-apart .exp-air path{animation:expAir 2.6s ease-in-out infinite}
.exploded.is-apart .exp-air path:nth-child(2){animation-delay:.3s}
.exploded.is-apart .exp-air path:nth-child(3){animation-delay:.6s}
.exploded.is-apart .exp-air path:nth-child(4){animation-delay:.9s}
.exploded.is-apart .exp-air path:nth-child(5){animation-delay:1.2s}
@keyframes expAir{
  0%{opacity:0;transform:translateY(0)}
  30%{opacity:.75}
  100%{opacity:0;transform:translateY(26px)}
}

.exploded__notes{
  display:grid;gap:var(--sp-4);margin-top:var(--sp-6);
  padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.1);
}
@media(min-width:760px){.exploded__notes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.exploded__notes{grid-template-columns:repeat(4,1fr)}}
.exploded__note strong{
  display:block;color:#fff;font-family:var(--font-display);
  font-size:.95rem;margin-bottom:.35rem;
}
.exploded__note span{color:#9BA7C7;font-size:.86rem;line-height:1.6}

@media(prefers-reduced-motion:reduce){
  .exp-part{transform:translate(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px)) !important;transition:none}
  .exp-label{opacity:1;transition:none}
  .exp-line{stroke-dashoffset:0;transition:none}
  .exp-blades,.exp-air path{animation:none !important}
  .exp-air path{opacity:.5}
}
/* ==========================================================================
   HORIZONTAL SCROLL SHOWCASE
   Pinned section whose inner track translates sideways as you scroll down.
   Falls back to a normal swipeable row where position:sticky is unsupported
   or motion is reduced.
   ========================================================================== */
.hscroll{position:relative;background:var(--navy-900)}
.hscroll__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.hscroll__track{
  display:flex;gap:var(--sp-5);padding-inline:6vw;
  will-change:transform;transform:translate3d(0,0,0);
}
.hscroll__intro{
  flex:none;width:min(84vw,420px);align-self:center;
  padding-right:var(--sp-5);
}
.hscroll__intro h2{color:#fff;margin-bottom:var(--sp-4)}
.hscroll__intro p{color:#9BA7C7;font-size:var(--step-1);margin-bottom:var(--sp-5)}

.hcard{
  flex:none;width:min(78vw,420px);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:var(--navy-850);box-shadow:var(--shadow-lg);
}
.hcard img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.hcard__cap{
  position:absolute;inset:auto 0 0 0;padding:var(--sp-5);
  background:linear-gradient(to top,rgba(8,12,30,.94),rgba(8,12,30,.65) 55%,transparent);
  color:#fff;
}
.hcard__cap strong{
  display:block;font-family:var(--font-display);font-size:1.08rem;
  letter-spacing:-.02em;margin-bottom:.3rem;
}
.hcard__cap span{color:#A9B5D4;font-size:.86rem;line-height:1.55}
.hcard__n{
  position:absolute;top:var(--sp-4);left:var(--sp-4);
  width:34px;height:34px;border-radius:10px;
  background:rgba(8,12,30,.72);border:1px solid rgba(212,168,67,.4);
  color:var(--gold-400);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  backdrop-filter:blur(6px);
}

/* progress rail under the pinned area */
.hscroll__rail{
  position:absolute;left:6vw;right:6vw;bottom:7vh;height:3px;
  background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden;
}
.hscroll__rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-500),var(--sky-400));border-radius:3px}

.hscroll__hint{
  position:absolute;right:6vw;bottom:calc(7vh + 18px);
  color:#8E9BBD;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;display:flex;align-items:center;gap:.5rem;
}
.hscroll__hint svg{width:16px;height:16px;animation:hintNudge 1.8s ease-in-out infinite}
@keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* Fallback: plain horizontal swipe row */
@supports not (position:sticky){
  .hscroll__pin{position:static;height:auto;padding-block:var(--sp-8)}
  .hscroll__track{overflow-x:auto;transform:none !important}
  .hscroll__rail,.hscroll__hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hscroll__pin{position:static;height:auto;padding-block:var(--sp-8)}
  .hscroll__track{overflow-x:auto;transform:none !important;scroll-snap-type:x mandatory}
  .hcard{scroll-snap-align:center}
  .hscroll__rail,.hscroll__hint{display:none}
}
@media(max-width:640px){
  .hscroll__pin{position:static;height:auto;padding-block:var(--sp-7)}
  .hscroll__track{overflow-x:auto;transform:none !important;scroll-snap-type:x mandatory;padding-inline:1rem}
  .hcard{scroll-snap-align:center;width:82vw}
  .hscroll__intro{width:82vw}
  .hscroll__rail,.hscroll__hint{display:none}
}
/* ---- diagram v2: shading, circuit, leaders, legend ---- */
.exp-stroke{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5}
.exp-stroke-hot{fill:none;stroke:var(--red-500);stroke-width:1.5;opacity:.85}
.exp-stroke-green{fill:none;stroke:var(--green-500);stroke-width:1.5;opacity:.85}
.exp-stroke-amber{fill:none;stroke:var(--amber-500);stroke-width:1.5;opacity:.9}
.exp-divider{stroke:rgba(255,255,255,.14);stroke-width:1.5;fill:none}
.exp-valve{fill:rgba(242,167,27,.6);stroke:var(--amber-500);stroke-width:1.5}

.exp-leader{stroke:rgba(255,255,255,.32);stroke-width:1;fill:none;stroke-dasharray:3 3}
.exp-sub{fill:#7E8CB0;font-family:var(--font-body);font-size:10.5px;text-anchor:middle;opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--d,0s) + .45s)}
.exploded.is-apart .exp-sub{opacity:1}
.exp-label--l,.exp-sub--l{text-anchor:start}
.exp-leader--r{}

/* refrigerant circuit */
.exp-pipe{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:900;stroke-dashoffset:900;
  transition:stroke-dashoffset 1.8s var(--ease-out) .45s;opacity:.9}
.exploded.is-apart .exp-pipe{stroke-dashoffset:0}
.exp-pipe--hot{stroke:var(--red-500)}
.exp-pipe--liq{stroke:var(--amber-500)}
.exp-pipe--cold{stroke:var(--sky-400)}

.exp-flow{opacity:0;transition:opacity .5s ease 1.6s}
.exploded.is-apart .exp-flow{opacity:1}
.exp-flow--hot{fill:#FF6B5E}
.exp-flow--liq{fill:#FFC85C}
.exp-flow--cold{fill:#8FD3FF}

/* legend */
.exp-legend text{fill:#9BA7C7;font-family:var(--font-body);font-size:11px}
.exp-legend .lg-note{fill:#6F7C9E;font-style:italic}
.lg-hot{fill:var(--red-500)}
.lg-liq{fill:var(--amber-500)}
.lg-cold{fill:var(--sky-400)}

@media(prefers-reduced-motion:reduce){
  .exp-pipe{stroke-dashoffset:0;transition:none}
  .exp-flow{display:none}
  .exp-sub{opacity:1;transition:none}
}
/* ==========================================================================
   HORIZONTAL SHOWCASE v2
   Cinematic, warmer, with real depth. Replaces the flat first pass.
   ========================================================================== */
.hscroll{
  position:relative;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(46,159,224,.12), transparent 60%),
    radial-gradient(800px 600px at 85% 85%, rgba(217,160,23,.12), transparent 62%),
    linear-gradient(170deg, #0D1430 0%, #141D42 55%, #0D1430 100%);
}
.hscroll::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent);
}
.hscroll__pin{z-index:1}
.hscroll__track{gap:clamp(1.25rem,2.4vw,2rem);align-items:center}

/* ---- intro panel ---- */
.hscroll__intro{
  width:min(86vw,440px);
  padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;
}
.hscroll__intro .eyebrow{color:var(--gold-400)}
.hscroll__intro .eyebrow::before{background:linear-gradient(90deg,var(--gold-400),transparent)}
.hscroll__intro h2{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.035em}
.hscroll__intro p{font-size:1.02rem;line-height:1.65;color:#A4B0D0}

/* ---- cards ---- */
.hcard{
  width:min(80vw,400px);
  border-radius:20px;
  background:#141D42;
  box-shadow:0 24px 70px rgba(4,8,22,.6), 0 2px 0 rgba(255,255,255,.06) inset;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.hcard::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.hcard:hover{transform:translateY(-8px);box-shadow:0 34px 90px rgba(4,8,22,.72)}
.hcard img{
  aspect-ratio:3/4;
  filter:saturate(1.05) contrast(1.03);
  transition:transform .9s var(--ease);
}
.hcard:hover img{transform:scale(1.045)}

.hcard__cap{
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:linear-gradient(to top,
    rgba(10,15,36,.97) 0%,
    rgba(10,15,36,.88) 42%,
    rgba(10,15,36,.35) 78%,
    transparent 100%);
}
.hcard__cap strong{
  font-size:1.18rem;letter-spacing:-.028em;margin-bottom:.45rem;
  color:#fff;
}
.hcard__cap span{color:#AFBBD9;font-size:.88rem;line-height:1.6}

/* step badge: gold rule + number, not a floating chip */
.hcard__n{
  top:auto;bottom:calc(100% - 0px);left:var(--sp-5);
  position:absolute;
  width:auto;height:auto;background:none;border:0;backdrop-filter:none;
  display:flex;align-items:center;gap:.6rem;
  transform:translateY(-100%);
}
.hcard__n::before{content:"";width:26px;height:2px;background:var(--gold-500);border-radius:2px}
.hcard__n{
  color:var(--gold-400);font-size:.74rem;font-weight:800;letter-spacing:.18em;
}

/* ---- progress rail + hint ---- */
.hscroll__rail{
  left:50%;transform:translateX(-50%);width:min(420px,70vw);
  right:auto;bottom:6vh;height:4px;
  background:rgba(255,255,255,.1);
}
.hscroll__rail i{background:linear-gradient(90deg,var(--gold-500),var(--sky-400));box-shadow:0 0 14px rgba(217,160,23,.5)}
.hscroll__hint{
  left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(6vh + 20px);
  color:#8E9BBD;font-size:.72rem;letter-spacing:.18em;
}

@media(max-width:640px){
  .hscroll__intro{width:84vw;padding:var(--sp-5) 0}
  .hcard{width:84vw}
  .hcard img{aspect-ratio:4/3}
}

/* ==========================================================================
   FOOTER CTA on mobile - the full-width gold button was overflowing its column
   ========================================================================== */
@media(max-width:640px){
  .footer .btn--gold.btn--block{
    width:100%;max-width:100%;
    padding:1rem 1rem;font-size:.92rem;
    white-space:normal;line-height:1.3;
    text-align:center;
  }
  .footer__grid{gap:var(--sp-6)}
  .footer__nap div{align-items:flex-start}
  .footer__nap span{min-width:0;overflow-wrap:break-word}
  .footer a{overflow-wrap:anywhere}
}