/* ==========================================================================
   BASE
   Reset, typography, buttons, focus, and the whole motion system.
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* The hidden attribute means "not rendered", and it has to win over any
   display an author rule sets — the UA's [hidden]{display:none} loses to any
   author declaration, so a filtered-out card that happens to be display:flex
   stays in the layout and keeps its grid cell. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--ink);
  background:#0B1219;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
/* the bar turns cream when stuck */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* --- Buttons ------------------------------------------------------------ */
.btn{
  --btn-gap:.7em;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);
  font-size:clamp(.75rem,.82vw,.8125rem);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:5px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn svg{flex:0 0 auto;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{
  padding:1.3em 2.15em;
  color:var(--white);border-color:rgba(255,255,255,.72);background:transparent;
}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--solid{
  padding:1.25em 2em;
  background:var(--cream);color:var(--ink);border-color:var(--cream);
}
.btn--solid:hover{background:#fff;border-color:#fff}
select.field__control option{background:#14171A;color:#fff}
@media (prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
.reveal--1{animation-delay:.08s}
.reveal--2{animation-delay:.18s}
.reveal--3{animation-delay:.28s}
.reveal--4{animation-delay:.38s}
.reveal--5{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:no-preference){
html.js [data-anim]{opacity:0}
html.js [data-anim].is-in{
    animation:a-rise .82s var(--ease) both;
    animation-delay:calc(var(--i,0) * var(--stagger,80ms));
  }
html.js [data-anim="fade"].is-in{animation-name:a-fade;animation-duration:1s}
html.js [data-anim="left"].is-in{animation-name:a-left}
html.js [data-anim="right"].is-in{animation-name:a-right}
html.js [data-anim="zoom"].is-in{animation-name:a-zoom;animation-duration:.95s}
html.js [data-anim="pop"].is-in{animation-name:a-pop;animation-duration:.5s;
                                    animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
html.js [data-anim="mask"].is-in{animation-name:a-mask;animation-duration:1.15s}
html.js [data-anim="line"].is-in{animation-name:a-line;animation-duration:.8s}
html.js [data-anim="line"]{transform-origin:left center}
/* Cleared once it has played, so the element's own hover/focus transform is
     free again and the compositor layer is released. This has to sit AFTER the
     variant rules above: a filled animation outranks any normal declaration,
     so the only way to hand transform back is to drop animation-name itself,
     and the last matching rule of equal specificity wins. */
html.js [data-anim].anim-done{opacity:1;animation:none}
/* ...except on a control that is disabled: that opacity is state, not
     motion, and the reset above must not light a dead arrow back to full
     strength once its reveal has played. */
html.js [data-anim].anim-done:disabled{opacity:.3}
@keyframes a-rise{from{opacity:0;transform:translate3d(0,26px,0)} to{opacity:1;transform:none}}
@keyframes a-fade{from{opacity:0} to{opacity:1}}
@keyframes a-left{from{opacity:0;transform:translate3d(-30px,0,0)} to{opacity:1;transform:none}}
@keyframes a-right{from{opacity:0;transform:translate3d(30px,0,0)}  to{opacity:1;transform:none}}
@keyframes a-zoom{from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none}}
@keyframes a-pop{from{opacity:0;transform:scale(.5)}  to{opacity:1;transform:none}}
@keyframes a-line{from{opacity:1;transform:scaleX(0)}  to{opacity:1;transform:scaleX(1)}}
@keyframes heroSettle{from{transform:scale(1.075)} to{transform:scale(1)}}
/* --- Portrait: rounded wipe, with the photo easing out of a slight zoom - */
html.js .host-card[data-anim]{clip-path:inset(0 0 0 0 round clamp(16px,1.7vw,28px))}
html.js .host-card[data-anim].is-in img{animation:a-imgSettle 1.6s var(--ease) both}
html.js .host-card[data-anim].anim-done{clip-path:none}
@keyframes a-mask{
    from{opacity:1;clip-path:inset(0 0 100% 0 round clamp(16px,1.7vw,28px))}
    to  {opacity:1;clip-path:inset(0 0 0 0 round clamp(16px,1.7vw,28px))}
  }
@keyframes a-imgSettle{from{transform:scale(1.13)} to{transform:scale(1)}}
/* --- Benefit chips pop in just behind their row ------------------------- */
html.js .dest__item[data-anim] .dest__chip{opacity:0}
html.js .dest__item[data-anim].is-in .dest__chip{
    animation:a-pop .5s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:calc(var(--i,0) * var(--stagger,80ms) + 160ms);
  }
/* --- Stars land one after another once their card is in ----------------- */
html.js .rev-card[data-anim] .rev-card__stars svg{opacity:0}
html.js .rev-card[data-anim].is-in .rev-card__stars svg{
    animation:a-pop .45s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:calc(var(--i,0) * var(--stagger,80ms) + 200ms + var(--sd,0ms));
  }
/* --- Decorative artwork breathes. `translate`, not `transform`, so it does
         not fight the scaleX(-1) that mirrors the second leaf cluster. ------ */
@keyframes a-drift{
    0%,100%{translate:0 0}
    50%    {translate:0 -14px}
  }
@keyframes a-answer{from{opacity:0;transform:translate3d(0,-8px,0)} to{opacity:1;transform:none}}
}
@media (min-width:701px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
@keyframes ctaSettle{
      from{transform:scale(1.11)}
      to  {transform:scale(1)}
    }
}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
/* 6% of the image's own height each way = ~116px of travel, well inside
       the ~9% of slack, so no edge is ever exposed. */
@keyframes destDrift{
      from{transform:translate3d(0,6%,0)}
      to  {transform:translate3d(0,-6%,0)}
    }
}
}