/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#0B315B;
  --ink-2:#41618A;
  --muted:#7B92AC;
  --line:#E4EAF1;
  --bg:#FAF8F3;
  --bg-soft:#EAF2F8;
  --brand:#0B315B;
  --brand-dark:#07213E;
  --brand-soft:#EAF2F8;
  --accent:#F36A21;
  --accent-dark:#D4520F;
  --sun:#f9b826;
  --plum:#7b4ea8;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(12,27,35,.06),0 2px 10px rgba(12,27,35,.05);
  --shadow:0 6px 18px rgba(12,27,35,.09),0 16px 40px rgba(12,27,35,.08);
  --shadow-lg:0 22px 60px rgba(12,27,35,.20);
  --max:1180px;
  --display:"Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Jost","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --script:"Cormorant Garamond",ui-serif,Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);line-height:1.16;letter-spacing:-.005em;font-weight:700}
p{margin:0}
[hidden]{display:none !important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px;width:100%}
svg{flex:0 0 auto}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid transparent;border-radius:999px;padding:12px 24px;
  font-weight:600;font-size:15.5px;cursor:pointer;transition:.18s ease;
  background:var(--brand);color:#fff;white-space:nowrap;letter-spacing:.005em;
}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:17px;height:17px;stroke-width:2}
.btn--accent{background:var(--accent)}
.btn--accent:hover{background:var(--accent-dark)}
.btn--ghost{background:#fff;color:var(--brand);border-color:var(--line)}
.btn--ghost:hover{background:var(--brand-soft);border-color:var(--brand-soft)}
.btn--sm{padding:9px 16px;font-size:14px}
.btn--lg{padding:15px 28px;font-size:16px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.pill{
  display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);color:var(--brand-dark);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;
}
.pill .ico{width:14px;height:14px;stroke-width:2}
.pill--sun{background:#fff3d4;color:#8a5c00}
.pill--grey{background:var(--bg-soft);color:var(--ink-2)}
.pill--glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px)}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.site-head__in{display:flex;align-items:center;gap:16px;height:84px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em}
.logo__img{height:clamp(46px,4.4vw,62px);width:auto;display:block;transition:height .3s var(--ease)}
.site-foot .logo__img{height:58px;margin-bottom:2px}
@media (max-width:860px){.logo__img{height:48px}}
@media (max-width:520px){.logo__img{height:42px}}
.logo__mark{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--brand) 0%,#17a89b 55%,var(--sun) 135%);
  display:grid;place-items:center;color:#fff;
}
.logo__mark .ico{width:19px;height:19px}
.nav{display:flex;align-items:center;gap:0;margin-left:38px}
.nav a{padding:9px 8px;border-radius:10px;font-size:14.2px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav a:hover{background:var(--bg-soft);color:var(--ink)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.head-phone{font-size:14px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:7px;white-space:nowrap}
.head-phone .ico{width:16px;height:16px;color:var(--brand)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:40px;height:40px;cursor:pointer;place-items:center}
.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:8px 20px 16px}
.mobile-nav a{display:block;padding:11px 4px;border-bottom:1px solid var(--line);font-weight:600}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;background:#000}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hero__img{animation:none}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(102deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 38%,rgba(0,0,0,.52) 66%,rgba(0,0,0,.34) 100%),
    radial-gradient(880px 460px at 88% 96%,rgba(0,0,0,.42),transparent 66%);
}
.hero__in{padding:64px 20px 68px}
.hero__layout{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,428px);
  gap:48px;align-items:center;
}
.hero__copy{max-width:620px}
.hero h1{font-size:clamp(31px,4.5vw,53px);letter-spacing:-.012em;font-weight:700;margin-top:14px;line-height:1.13}
.hero h1 em{font-style:italic;font-weight:600;color:var(--sun)}
.hero__kicker{display:block;font-family:var(--script);font-style:italic;font-size:clamp(27px,3.1vw,38px);color:var(--sun);margin-bottom:6px;font-weight:600;letter-spacing:.008em;line-height:1.08}
.hero__sub{margin-top:15px;font-size:clamp(15px,1.6vw,17.5px);color:rgba(255,255,255,.9);max-width:520px}
.hero__rating{margin-top:22px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:999px;font-size:14px;backdrop-filter:blur(8px);flex-wrap:nowrap;max-width:100%}
.hero__rating .ico{flex:0 0 auto}
.hero__rating > span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stars{display:inline-flex;gap:2px;color:var(--sun)}
.stars .ico{width:15px;height:15px;fill:currentColor;stroke:none}

.who{margin-top:30px}
.who__label{font-size:14px;font-weight:700;color:rgba(255,255,255,.86);margin-bottom:11px}
.who__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.who__card{
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);
  border-radius:var(--radius);padding:11px 6px;text-align:center;cursor:pointer;
  transition:.18s ease;color:#fff;backdrop-filter:blur(8px);
}
.who__card:hover,.who__card:focus-visible{background:rgba(255,255,255,.24);transform:translateY(-3px);outline:none}
.who__card svg{margin:0 auto;width:100%;max-width:78px;height:48px}
.illo{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.who__card .illo{color:#fff}
.opt--illo .illo{color:var(--brand-dark,#062f6e)}
.opt.is-on .illo{color:var(--accent,#f0592b)}
.who__card b{display:block;margin-top:5px;font-size:13.5px;font-weight:700}

.searchcard{
  background:#fff;color:var(--ink);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:20px;width:100%;
}
.searchcard__title{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:14px}
.searchcard__title small{display:block;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);margin-top:4px;line-height:1.45}
.searchgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.searchgrid .field--wide,.searchgrid .btn{grid-column:1/-1}
.searchgrid .btn{width:100%;margin-top:2px}
.searchfoot{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:var(--muted);font-weight:600}
.searchfoot span{display:inline-flex;align-items:center;gap:6px}
.searchfoot .ico{width:14px;height:14px;color:var(--brand);stroke-width:2.2}
.herosearch .searchfoot .ico{color:var(--sun)}
.field{border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;background:#fff;min-width:0}
.field label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.field label .ico{width:13px;height:13px;stroke-width:2.2;color:var(--brand)}
.field select,.field input{width:100%;max-width:100%;border:0;outline:0;padding:3px 0 0;font-size:15px;font-weight:600;background:transparent}
.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{background:var(--brand-dark);color:#fff;border-bottom:3px solid var(--accent)}
.trustbar__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 26px;padding:20px 20px}
.tstat{display:flex;align-items:center;gap:13px;padding:6px 0;min-width:0}
.tstat__ico{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;background:rgba(242,101,34,.16);color:var(--sun)}
.tstat__ico .ico{width:20px;height:20px}
.tstat b{display:block;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.005em;line-height:1.2}
.tstat span{display:block;font-size:12.8px;color:#a8c0c8;font-weight:600;line-height:1.35}
.tstat + .tstat{position:relative}
.tstat + .tstat::before{content:"";position:absolute;left:-13px;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.12)}
/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:66px 0}
.section--soft{background:var(--bg-soft)}
.section__head{max-width:660px;margin-bottom:26px}
.section__head--wide{max-width:none}
.section__head--wide > div{max-width:660px}
.section__head h2{font-size:clamp(26px,3.6vw,36px)}
.section__head p{margin-top:11px;color:var(--muted);font-size:16px}
.section__flex{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.16s}
.tab:hover{border-color:var(--brand);color:var(--brand)}
.tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:22px}
/* On phones these two grids get long, so they scroll sideways like the
   trending rail rather than stacking into a very tall column. */
@media (max-width:720px){.cust-head{min-height:240px}.cust-head .wrap{padding-top:30px;padding-bottom:30px}
  .dest-grid{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:minmax(268px,86%);gap:16px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    padding:4px 20px 12px;margin:0 -20px;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .dest-grid::-webkit-scrollbar{display:none;width:0;height:0}
  .dest-grid > *{scroll-snap-align:start}
  .dest-grid .empty{grid-column:auto;width:86vw;white-space:normal}
  .swipehint{
    display:flex;align-items:center;gap:7px;margin-top:-4px;margin-bottom:10px;
    font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  }
  .swipehint .ico{width:15px;height:15px;color:var(--accent)}
}
@media (min-width:721px){ .swipehint{display:none} }
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.22s ease;box-shadow:var(--shadow-sm)}
.dcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.dcard__media{position:relative;height:182px;overflow:hidden;background:linear-gradient(135deg,var(--c1,#0a4fa8),var(--c2,#f26522))}
.dcard__media img:not(.flagimg){width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.dcard:hover .dcard__media img:not(.flagimg){transform:scale(1.07)}
.dcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.18) 100%)}
.dcard__tag{position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.95);color:var(--brand-dark);padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700}
img.flagimg{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:22px;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.85)}
.dcard__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:10px}
.dcard__name{font-family:var(--display);font-size:20px;font-weight:700}
.dcard__name small{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--muted);margin-top:3px}
.dcard__blurb{font-size:14px;color:var(--ink-2)}
.dcard__meta{display:flex;flex-wrap:wrap;gap:6px}
.dcard__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.price small{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.price b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.price{min-width:0}
.price span{display:block;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);grid-column:1/-1}

.ticker{overflow:hidden;position:relative;padding:4px 0}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.ticker__track{display:flex;gap:16px;width:max-content;animation:slide 48s linear infinite}
.ticker--soft::before{background:linear-gradient(90deg,var(--bg-soft),transparent)}
.ticker--soft::after{background:linear-gradient(270deg,var(--bg-soft),transparent)}
.ticker__track--slow{animation-duration:76s}
.ticker__track--slow .qcard{width:340px;max-width:84vw;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;width:268px;max-width:82vw;flex:0 0 auto;box-shadow:var(--shadow-sm)}
.bcard__top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:600;line-height:1.35}
.av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;overflow:hidden;box-shadow:0 2px 6px rgba(12,27,35,.14)}
.av svg{width:100%;height:100%}
.bcard__trip{margin-top:10px;font-family:var(--display);font-weight:700;font-size:15.5px}
.bcard__row{margin-top:8px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-2)}

.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:20px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;transition:.2s}
.tcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.tcard__ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;background:var(--brand-soft);color:var(--brand-dark)}
.tcard__ico .ico{width:23px;height:23px}
.tcard__ico--sun{background:#fff3d4;color:#8a5c00}
.tcard__ico--accent{background:#ffe9e1;color:var(--accent-dark)}
.tcard__ico--plum{background:#f1e9f9;color:var(--plum)}
.tcard h3{font-size:18px}
.tcard p{margin-top:8px;font-size:14.5px;color:var(--ink-2)}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:20px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column}
.qcard p{margin-top:12px;color:var(--ink-2);font-family:var(--display);font-weight:500;font-size:16.5px;line-height:1.55;font-style:italic}
.qcard__who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:700;line-height:1.3}
.qcard__who i{display:block;font-style:normal;color:var(--muted);font-weight:500;font-size:12.5px}
/* the booking ticker wants a slightly smaller portrait than the quotes */
.bcard__top .av{width:30px;height:30px}
.qcard__who .av{width:36px;height:36px}
.qmark{font-family:var(--display);font-size:40px;line-height:.6;color:var(--accent);opacity:.45}
a.bcard{display:block;text-decoration:none;color:inherit}
a.bcard:hover{border-color:var(--accent)}

.themes{display:flex;gap:10px;flex-wrap:wrap}
.theme{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14.5px;cursor:pointer;transition:.16s;color:var(--ink-2)}
.theme .ico{width:16px;height:16px;color:var(--brand)}
.theme:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.theme.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.theme.is-on .ico{color:#fff}

.band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:46px 40px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:#07403c}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,0,0,.84),rgba(0,0,0,.62) 55%,rgba(0,0,0,.34))}
.band > *{position:relative;z-index:2}
.band h2{font-size:clamp(24px,3.2vw,32px)}
.band p{margin-top:9px;color:rgba(255,255,255,.88);max-width:520px}

/* ============================================================
   HORIZONTAL RAILS (trending / any scroller)
   ============================================================ */
.railwrap{position:relative}
.rail-scroll{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:18px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:6px 4px 10px;margin:0 -4px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.rail-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.rail-nav{display:flex;gap:9px}
.rnav{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-2);flex:0 0 auto;transition:.18s ease}
.rnav:disabled{opacity:.35;cursor:default}
.rnav:hover:not(:disabled){border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow-sm)}
.rnav .ico{width:16px;height:16px;stroke-width:2.4}

.tcity{
  position:relative;display:block;width:100%;padding:0;border:0;margin:0;
  border-radius:22px;overflow:hidden;aspect-ratio:4/5;min-height:296px;
  background:#0b191f;color:#fff;text-align:left;cursor:pointer;
  scroll-snap-align:start;isolation:isolate;
  box-shadow:0 8px 26px rgba(9,26,32,.14);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease;
}
.tcity__bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.tcity__shade{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.62) 24%,rgba(0,0,0,.26) 48%,rgba(0,0,0,.05) 70%,rgba(0,0,0,0) 84%),
    linear-gradient(to bottom,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 30%);
}
.tcity__tag{
  position:absolute;top:15px;left:15px;z-index:3;max-width:calc(100% - 30px);
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);border-radius:999px;padding:6px 13px;
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tcity__body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 19px 19px}
.tcity__name{
  display:block;font-family:var(--display);font-size:25px;font-weight:700;
  letter-spacing:-.005em;line-height:1.14;text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.tcity__sub{
  display:block;margin-top:5px;font-size:12.6px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.78);text-transform:uppercase;
}
.tcity__rule{display:block;height:1px;background:rgba(255,255,255,.24);margin:13px 0 12px}
.tcity__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tcity__price{display:block;min-width:0}
.tcity__price em{
  display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:1px;
}
.tcity__price b{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.1}
.tcity__price i{display:block;font-style:normal;font-size:11.8px;font-weight:500;color:rgba(255,255,255,.72);margin-top:2px}
.tcity__go{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.36);
  backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff;
  transition:.26s cubic-bezier(.2,.7,.2,1);
}
.tcity__go .ico{width:17px;height:17px;stroke-width:2.2}
.tcity:hover,.tcity:focus-visible{transform:translateY(-6px);box-shadow:0 20px 46px rgba(9,26,32,.28)}
.tcity:hover .tcity__bg{transform:scale(1.07)}
.tcity:hover .tcity__go{background:var(--accent);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .tcity,.tcity__bg,.tcity__go{transition:none}
  .tcity:hover{transform:none}
  .tcity:hover .tcity__bg{transform:none}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px;align-items:start}
.faq-aside{position:sticky;top:96px}
.faq-aside .helpcard{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm)}
.faq-aside .helpcard b{font-family:var(--display);font-size:17px;display:block}
.faq-aside .helpcard p{font-size:14px;color:var(--ink-2);margin-top:7px}
.faq-aside .helpcard .btn{margin-top:14px}
.faq{display:grid;gap:10px}
.faq__i{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s}
.faq__i[open]{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:15px 18px;cursor:pointer;font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  list-style:none;color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--brand-dark)}
.faq__sign{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;margin-top:1px;transition:.2s}
.faq__sign .ico{width:13px;height:13px;stroke-width:2.8}
.faq__i[open] .faq__sign{background:var(--brand);color:#fff;transform:rotate(180deg)}
.faq__a{padding:0 18px 17px;font-size:14.6px;color:var(--ink-2);line-height:1.6}
.faq__a p + p{margin-top:9px}

/* ============================================================
   MOBILE ACTION BAR
   ============================================================ */
.mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  gap:10px;box-shadow:0 -6px 24px rgba(12,27,35,.1);
}
.mbar .btn{flex:1 1 auto}
.mbar__call{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--brand-dark);display:grid;place-items:center;
}
.mbar__call .ico{width:19px;height:19px}

.site-foot{background:linear-gradient(180deg,#07213f,#041428);color:#b9c8d8;padding:40px 0 18px;font-size:14.2px;border-top:3px solid var(--accent)}
.foot-grid{display:grid;grid-template-columns:minmax(230px,1.3fr) repeat(4,minmax(118px,.8fr));gap:26px 28px;align-items:start}
.site-foot h4{color:var(--sun);font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.site-foot a:hover{color:#fff}
.site-foot .logo{color:#fff}
.foot-contact{display:grid;gap:7px;margin-top:12px}
.foot-contact span{display:flex;align-items:center;gap:9px}
.foot-contact .ico{width:16px;height:16px;color:var(--accent)}
.foot-legal{display:inline-flex;gap:16px;flex-wrap:wrap}
.foot-legal a{color:#b9c8d8}
.foot-legal a:hover{color:var(--sun)}
.foot-note{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#87a0aa}
.disclaimer{margin-top:26px;font-size:12.5px;color:#87a0aa;max-width:820px}
.foot-dests{margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.foot-dests h4{margin-bottom:12px}
.foot-chips{display:flex;flex-wrap:wrap;gap:8px}
.foot-chips a{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:#c6d7de;transition:.16s}
.foot-chips a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);color:#fff}
.foot-pay{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:22px}
.foot-pay span:first-child{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#87a0aa;margin-right:4px}
.paychip{border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:5px 11px;font-size:12px;font-weight:800;letter-spacing:.03em;color:#c6d7de;background:rgba(255,255,255,.05)}
/* card footer: keep the price and the button off each other's toes */
.dcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dcard__foot .price{min-width:0;flex:1 1 auto}
.dcard__foot .price span{display:block;white-space:normal;line-height:1.3}
.dcard__foot .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:420px){
  .dcard__foot{flex-direction:column;align-items:stretch}
  .dcard__foot .btn{justify-content:center}
}
.pkg__flag{display:block;margin-top:6px;font-size:12px;color:var(--accent-dark);font-weight:700}
/* the planner head: stop the title and the status pill drifting apart */
.cust-head__top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1100px}
.cust-head__top > div{flex:1 1 360px;min-width:0}
.cust-head__top .pill{flex:0 0 auto;margin-top:4px}
/* the closing call to action, balanced rather than stranded left */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta > div{flex:1 1 420px;min-width:0}
.cta .btn{flex:0 0 auto}
@media (max-width:640px){ .cta .btn{width:100%;justify-content:center} }
/* ---------- ready packages on a destination page ---------- */
.pkg{
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:24px;margin-bottom:22px;box-shadow:0 1px 2px rgba(9,26,32,.04);
}
.pkg__hd{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.pkg__badge{
  display:inline-block;background:var(--brand-soft);color:var(--brand-dark);
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;margin-bottom:9px;
}
.pkg__hd h3{font-family:var(--display);font-size:clamp(20px,2.4vw,25px);line-height:1.2;margin:0}
.pkg__route{color:var(--ink-2);margin-top:6px;font-size:14.5px}
.pkg__price{text-align:right;flex:0 0 auto}
.pkg__price b{display:block;font-family:var(--display);font-size:clamp(24px,3vw,31px);color:var(--accent-dark);line-height:1}
.pkg__price span{display:block;color:var(--muted);font-size:12.5px;margin-top:5px}
.pkg__facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:20px 0 4px;padding:16px;border-radius:var(--r);background:var(--bg-soft);
}
.pkg__facts > div{display:flex;gap:10px;align-items:flex-start}
.pkg__facts .ico{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:2px}
.pkg__facts b{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pkg__facts > div > div{font-size:13.6px;color:var(--ink-2);line-height:1.45}
.pkg__h4{font-family:var(--display);font-size:17.5px;margin:24px 0 12px}
.pkg__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.ticks .ico{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:#0f7a4f}
.ticks--no .ico{color:#b0424a}
.pkg__foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pagehead.pagehead--plain{background:linear-gradient(150deg,var(--c1,#0a4fa8) 0%,#0b3d91 60%,var(--c2,#f26522) 210%)}
.pagehead.pagehead--plain::after{background:linear-gradient(100deg,rgba(3,14,30,.52) 0%,rgba(3,14,30,.24) 100%)}
@media (max-width:820px){
  .pkg{padding:18px}
  .pkg__facts{grid-template-columns:1fr;gap:12px}
  .pkg__cols{grid-template-columns:1fr;gap:18px}
  .pkg__price{text-align:left}
  .pkg__foot .btn{width:100%;justify-content:center}
}
/* solo-column planner (package enquiry and the blank sheet) */
.cust-layout.is-solo{grid-template-columns:minmax(0,860px);justify-content:center}
.pkgsum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.pkgsum > div{background:var(--bg-soft);border-radius:var(--r);padding:12px 14px}
.pkgsum small{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pkgsum b{font-size:14.6px;line-height:1.3;display:block}
.themechip{cursor:pointer;border:1px solid var(--line);background:#fff;font-weight:600}
.themechip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.themechip.is-on .ico{color:#fff}
@media (max-width:760px){ .pkgsum{grid-template-columns:1fr 1fr} }
.dcard__media.dcard__media--plain,.tcity__bg.tcity__bg--plain{
  background:linear-gradient(150deg,var(--c1,#0a4fa8) 0%,#0b3d91 55%,var(--c2,#f26522) 190%);
}
.tcity__bg.tcity__bg--plain{position:absolute;inset:0;display:block}
.plainmark{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--display);font-size:clamp(22px,3.4vw,32px);font-weight:700;
  color:#fff;letter-spacing:-.01em;padding:18px;text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.foot-social{display:flex;gap:9px;margin-top:14px}
.foot-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#c6d7de;transition:.16s}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.foot-social .ico{width:17px;height:17px}
.foot-hours{font-size:13.4px;color:#87a0aa;margin-top:12px;line-height:1.5}
.totop{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:#87a0aa}
.totop:hover{color:#fff}
.totop .ico{width:14px;height:14px;stroke-width:2.4}

/* ============================================================
   CUSTOMISE PAGE
   ============================================================ */
.cust-head{background:#07131d;color:#fff;padding:0;position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center}
.cust-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;z-index:0}
.cust-head::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,12,20,.86) 0%,rgba(4,12,20,.66) 48%,rgba(4,12,20,.44) 100%);z-index:1}
.cust-head > *{position:relative;z-index:2;width:100%}
.cust-head .wrap{padding-top:40px;padding-bottom:40px}
.cust-head .back-link{margin-bottom:18px;display:inline-flex}
.cust-head__top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cust-head h1{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.012em}
.cust-head p{color:#d6e2e8;font-size:15px;margin-top:10px;max-width:56ch}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:#b3c6cd;cursor:pointer;background:none;border:0;padding:0;margin-bottom:12px}
.back-link .ico{width:16px;height:16px}
.back-link:hover{color:#fff}

.stepper{display:flex;gap:6px;margin-top:26px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stepper::-webkit-scrollbar{display:none}
.stepper__i{
  flex:1 1 0;min-width:132px;padding:12px 4px 14px;border:0;border-bottom:3px solid rgba(255,255,255,.18);
  color:#93aab3;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px;
  background:none;cursor:pointer;text-align:left;
}
.stepper__i b{width:23px;height:23px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:12px}
.stepper__i b .ico{width:13px;height:13px;stroke-width:2.6}
.stepper__i.is-done{color:#7fd8cf;border-bottom-color:rgba(127,216,207,.5)}
.stepper__i.is-done b{background:var(--brand);color:#fff}
.stepper__i.is-active{color:#fff;border-bottom-color:var(--sun)}
.stepper__i.is-active b{background:var(--sun);color:#452f00}

.cust-body{background:var(--bg-soft);padding:30px 0 70px;min-height:60vh}
.cust-layout{display:grid;grid-template-columns:1fr 344px;gap:26px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm)}
.panel + .panel{margin-top:20px}
.panel h2{font-size:23px}
.panel__sub{color:var(--muted);font-size:14.5px;margin-top:8px}
.block{margin-top:24px}
.block__label{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));gap:12px}
.opt{border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;padding:15px 14px;cursor:pointer;text-align:left;transition:.16s ease;position:relative;overflow:hidden}
.opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.opt.is-on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(14,125,114,.13)}
.opt__ico{color:var(--brand-dark)}
.opt__ico .ico{width:24px;height:24px}
.opt__name{font-weight:700;font-size:15px;margin-top:9px;letter-spacing:-.01em}
.opt__note{font-size:13px;color:var(--muted);margin-top:3px}
.opt__price{font-size:13px;font-weight:700;color:var(--brand-dark);margin-top:7px;white-space:nowrap}
.opt__check{position:absolute;top:9px;right:10px;color:var(--brand);opacity:0;transition:.16s}
.opt__check .ico{width:17px;height:17px;stroke-width:3}
.opt.is-on .opt__check{opacity:1}
.opt__flag{width:30px;height:21px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px rgba(12,27,35,.22)}
.opt--illo{text-align:center;padding:12px 10px}
.opt--illo svg{width:80px;height:54px;margin:0 auto}
.opt--illo .opt__name{margin-top:4px}

.counter{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.counter__t{font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px}
.counter__t .ico{width:19px;height:19px;color:var(--brand)}
.counter__t small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.counter__ctrl{display:flex;align-items:center;gap:12px}
.rnd{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--brand-dark)}
.rnd .ico{width:15px;height:15px;stroke-width:2.6}
.rnd:hover:not([disabled]){border-color:var(--brand);background:var(--brand-soft)}
.rnd[disabled]{opacity:.35;cursor:not-allowed}
.counter__n{min-width:22px;text-align:center;font-weight:800;font-size:16px}

.rowgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.inp{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;background:#fff}
.inp label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.inp label .ico{width:13px;height:13px;stroke-width:2.2;color:var(--brand)}
.inp input,.inp select,.inp textarea{width:100%;border:0;outline:0;background:transparent;font-size:15px;font-weight:600;padding:3px 0 0}
.inp textarea{resize:vertical;min-height:72px;font-weight:500}
.inp:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

.slider-row{display:flex;align-items:center;gap:16px}
input[type=range]{flex:1;accent-color:var(--brand)}
.nights-pill{background:var(--ink);color:#fff;border-radius:999px;padding:7px 15px;font-weight:700;font-size:14px;white-space:nowrap}

.hint,.err{margin-top:14px;border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.hint{background:#fff8e8;border:1px solid #ffe2a3;color:#7a5600}
.err{background:#fdeeea;border:1px solid #f6c6b8;color:#a13512}
.hint .ico,.err .ico{width:16px;height:16px;margin-top:2px}

.step-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

.tl{margin-top:6px;position:relative;padding-left:36px}
.tl::before{content:"";position:absolute;left:11px;top:8px;bottom:14px;width:2px;background:var(--line)}
.day{position:relative;padding:0 0 22px}
.day__dot{position:absolute;left:-36px;top:0;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:800}
.day__hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.day__hd b{font-family:var(--display);font-size:16.5px}
.day__hd span{font-size:13px;color:var(--muted);font-weight:600}
.day__city{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--brand-dark)}
.day__city .ico{width:13px;height:13px;stroke-width:2.2}
.day__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.day__list li{font-size:14.2px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.day__list .ico{width:15px;height:15px;margin-top:3px;color:var(--brand);stroke-width:2.2}

.rail{position:sticky;top:90px}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.summary__hd{position:relative;overflow:hidden;color:#fff;padding:18px 20px;background:#000;min-height:88px;display:flex;flex-direction:column;justify-content:center}
.summary__hd img:not(.flagimg){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68;z-index:0}
.summary__hd::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.76),rgba(0,0,0,.44));z-index:1}
.summary__hd > *{position:relative;z-index:2}
.summary__hd b{font-family:var(--display);font-size:17px;display:flex;align-items:center;gap:9px}
.summary__hd p{font-size:13px;color:#c8d8de;margin-top:4px}
.summary__hd .flagimg{position:static;width:26px;height:18px;box-shadow:none;z-index:3}
.summary__body{padding:18px 20px}
.sline{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14px;padding:7px 0;color:var(--ink-2)}
.sline > span:first-child{flex:0 0 auto}
.sline b{font-weight:700;color:var(--ink);min-width:0;text-align:right;overflow-wrap:anywhere;word-break:break-word}
.sline--sub{font-size:12.5px;color:var(--muted);padding:2px 0 6px}
.stotal{border-top:1px dashed var(--line);margin-top:10px;padding-top:14px;display:flex;justify-content:space-between;align-items:flex-end}
.stotal small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.stotal .big{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.01em}
.summary__foot{padding:0 20px 20px}
.summary__note{font-size:12px;color:var(--muted);margin-top:10px}
.chipset{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}

.done{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px 32px;box-shadow:var(--shadow)}
.done__ico{width:68px;height:68px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;margin:0 auto 18px}
.done__ico .ico{width:32px;height:32px;stroke-width:2.4}
.done h2{font-size:28px}
.done p{color:var(--ink-2);margin-top:12px}
.recap{text-align:left;background:var(--bg-soft);border-radius:var(--radius);padding:18px;margin-top:24px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .hero__layout{grid-template-columns:minmax(0,1fr) minmax(0,384px);gap:34px}
  .faq-layout{gap:32px}
}
@media (max-width:1000px){
  .cust-layout{grid-template-columns:1fr}
  .rail{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 28px}
  .faq-layout{grid-template-columns:1fr;gap:24px}
  .faq-aside{position:static}
  .faq-aside .helpcard{max-width:520px}
}
@media (max-width:940px){
  .hero__layout{grid-template-columns:1fr;gap:30px;align-items:start}
  .hero__copy{max-width:none}
  .hero__sub{max-width:640px}
  .who__row{max-width:600px}
  .searchcard{max-width:580px}
  .trustbar__in{grid-template-columns:1fr 1fr;gap:22px 20px;padding:24px 20px;align-items:start}
  /* the four cells wrap to different heights on a phone, so top-align
     them and drop the dividers — a rule beside a two-line cell and a
     four-line cell looks broken however you size it */
  .tstat{align-items:flex-start;gap:12px;padding:0}
  .tstat__ico{margin-top:1px}
  .tstat + .tstat::before{display:none}
}
@media (max-width:560px){
  /* label above value: nothing can be pushed off the edge */
  .sline{display:block;padding:8px 0}
  .sline b{display:block;text-align:left;margin-top:3px}
  .recap{padding:16px 14px}
  .trustbar__in{gap:20px 16px;padding:22px 18px}
  .tstat{gap:10px}
  .tstat b{font-size:15.5px;line-height:1.25}
  .tstat span{font-size:11.8px}
  .tstat__ico{width:34px;height:34px}
  .tstat__ico .ico{width:17px;height:17px}
}
@media (max-width:820px){
  .nav,.head-phone{display:none}
  .burger{display:grid}
  .site-head__in{gap:12px}
  .head-right{gap:8px}
  .hero__in{padding:50px 20px 56px}
  .band{padding:30px 24px;text-align:left}
  .band .btn{width:100%}
  .panel{padding:20px}
  .section{padding:54px 0}
  .section__head{margin-bottom:22px}
  .mbar{display:flex}
  #view-home{padding-bottom:74px}
  .head-cta{display:none}
  html{scroll-padding-top:74px}
  .rail-scroll{grid-auto-columns:minmax(240px,1fr)}
}
@media (max-width:640px){
  .searchgrid{grid-template-columns:1fr}
  .tabs,.themes{flex-wrap:nowrap;overflow-x:auto;padding:0 20px 8px;margin-left:-20px;margin-right:-20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs{margin-bottom:20px}
  .tab,.theme{flex:0 0 auto}
  .tabs::-webkit-scrollbar,.themes::-webkit-scrollbar{display:none}
  .section__flex{align-items:flex-start;gap:14px}
  .rail-nav{display:none}
  .who__card svg{height:42px}
  .faq__q{font-size:15px;padding:14px 15px}
  .faq__a{padding:0 15px 15px}
  .dest-grid{gap:18px}
  .quotes,.trust-grid{gap:16px}
  .band{padding:26px 20px;border-radius:var(--radius)}
  .stotal .big{font-size:24px}
  .done{padding:32px 20px}
  .step-nav{flex-direction:column-reverse}
  .step-nav .btn{width:100%}
}
@media (max-width:560px){
  .head-right .btn{padding:9px 14px;font-size:13.5px}
  .site-head__in{height:72px}
  .logo{font-size:19px}
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .foot-note{flex-direction:column;gap:8px}
  .section{padding:44px 0}
  .trustbar__in{gap:10px 18px}
  .tstat__ico{width:36px;height:36px}
  .tstat__ico .ico{width:18px;height:18px}
  .tstat b{font-size:16.5px}
  .tstat span{font-size:12.2px}
  .hero__rating{font-size:clamp(11.2px,3.05vw,13.4px);padding:7px 13px;gap:8px}
  .searchcard{padding:16px;border-radius:var(--radius)}
  .dcard__media{height:168px}
  .counter{flex-direction:column;align-items:flex-start;gap:12px}
  .counter__ctrl{width:100%;justify-content:space-between}
  .tcity{min-height:268px;border-radius:18px}
}
@media (max-width:420px){
  .who__row{grid-template-columns:1fr 1fr}
  .who__card svg{height:50px}
  .rail-scroll{grid-auto-columns:minmax(218px,1fr)}
  .tcity__name{font-size:22px}
  .tcity__price b{font-size:21px}
}
/* ============================================================
   DELIVERY — send status, WhatsApp action, required marks
   ============================================================ */
.req{color:var(--accent);font-weight:800;margin-left:2px}
.ok{margin-top:14px;border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;background:#e9f7f0;border:1px solid #b4e3ce;color:#0a5c40}
.ok .ico{width:16px;height:16px;margin-top:2px}
.sendto{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.sendto span{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.sendto span .ico{width:13px;height:13px;stroke-width:2.2;color:var(--brand)}
.btn--wa{background:#1faa53;color:#fff}
.btn--wa:hover{background:#178c43}
.done__acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.done .ok,.done .err,.done .hint{text-align:left;margin-top:20px}
.done__ico--wait{background:#fff8e8;color:#7a5600}
.done__ico--fail{background:#fdeeea;color:#a13512}

@media (max-width:1400px){.head-phone{display:none}}
@media (max-width:1180px){.nav a{font-size:13.6px;padding:9px 6px}.nav{margin-left:18px}}
@media (max-width:1120px){.nav a{padding:9px 8px;font-size:14px}}

/* ============================================================
   MULTIPAGE ADDITIONS — inner page heads, detail pages, forms
   ============================================================ */
.pagehead{position:relative;overflow:hidden;background:#000;color:#fff;isolation:isolate}
.pagehead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.72}
.pagehead::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.42) 100%)}
.pagehead .wrap{position:relative;z-index:2;padding:58px 20px 54px}
.pagehead--tall .wrap{padding:82px 20px 72px}
.pagehead h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.012em}
.pagehead h1 em{font-style:italic;color:var(--sun);font-weight:600}
.pagehead p{margin-top:12px;font-size:clamp(14.5px,1.5vw,17px);color:rgba(255,255,255,.9);max-width:640px}
.pagehead .pill{margin-top:16px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:14px}
.crumbs a{color:rgba(255,255,255,.86);font-weight:600}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}
.headstats{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.headstat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:9px 14px;backdrop-filter:blur(8px);font-size:13.5px}
.headstat b{display:block;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.2}
.headstat span{color:rgba(255,255,255,.78)}

.dsplit{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,360px);gap:30px;align-items:start}
.dside{position:sticky;top:88px;display:grid;gap:16px}
.sidecard{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.sidecard__hd{background:#000;color:#fff;padding:16px 18px}
.sidecard__hd b{font-family:var(--display);font-size:17px;display:block}
.sidecard__hd span{font-size:13px;color:#b9c6cc}
.sidecard__body{padding:16px 18px 18px;display:grid;gap:11px}
.sidecard .btn{width:100%;justify-content:center}
.prow{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.prow b{font-weight:700}
.prow--total{border-top:1px solid var(--line);padding-top:11px;margin-top:3px;font-size:15px}
.prow--total b{font-family:var(--display);font-size:21px}

.blockhead{margin:34px 0 16px}
.blockhead h2{font-size:clamp(21px,2.4vw,27px)}
.blockhead p{color:var(--ink-2);margin-top:7px;font-size:14.5px;max-width:660px}
.citygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.citycard{border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;background:#fff}
.citycard b{display:block;font-family:var(--display);font-size:17px}
.citycard span{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
.actlist{display:grid;gap:10px}
.actrow{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;background:#fff}
.actrow__t b{display:block;font-size:15px;font-weight:700}
.actrow__t span{color:var(--muted);font-size:13px}
.actrow__p{font-weight:700;white-space:nowrap}
.ptable{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ptable th,.ptable td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
.ptable th{background:#f4f7f8;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ptable tr:last-child td{border-bottom:0}
.ptable td:last-child,.ptable th:last-child{text-align:right;font-weight:700}
.tablewrap{overflow-x:auto}
.daylist{display:grid;gap:10px;counter-reset:day}
.dayrow{display:flex;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;background:#fff}
.dayrow__n{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#000;color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
.dayrow__t b{display:block;font-size:15px}
.dayrow__t span{color:var(--muted);font-size:13.5px}
.notebox{border:1px solid var(--line);border-left:3px solid var(--sun);border-radius:var(--radius);background:#fffaf0;padding:14px 16px;font-size:14px;color:var(--ink-2);display:flex;gap:10px}
.notebox .ico{flex:0 0 auto;color:var(--accent-dark);width:18px;height:18px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.infocard{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:20px 20px 22px;box-shadow:var(--shadow-sm)}
.infocard .ico{width:22px;height:22px;color:var(--brand)}
.infocard h3{font-size:18px;margin-top:12px}
.infocard p{color:var(--ink-2);font-size:14.5px;margin-top:8px}
.form{display:grid;gap:14px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.form textarea{min-height:118px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--brand);outline-offset:1px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.revgrid .qcard{margin:0}
.linklist{display:grid;gap:8px;margin-top:10px}
.linklist a{font-weight:600;display:flex;align-items:center;gap:8px}
.linklist .ico{width:15px;height:15px;color:var(--brand)}
.nav a.is-here,.mobile-nav a.is-here{color:var(--brand);font-weight:700}
@media (max-width:980px){
  .dsplit{grid-template-columns:1fr}
  .dside{position:static}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .form .row2{grid-template-columns:1fr}
  .pagehead .wrap{padding:34px 20px 32px}
}

/* anchors that took over from buttons — keep their own colours */
a.dcard__media,a.who__card,a.tcity,a.citycard{display:block;text-decoration:none}
a.tcity,a.tcity .tcity__name,a.tcity .tcity__price b{color:#fff}
a.who__card{color:#fff}
a.citycard{color:var(--ink)}
.dcard__name a{color:inherit}
.dcard__name a:hover{color:var(--brand)}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */
.ty{padding:72px 0 90px;background:linear-gradient(180deg,#f2f8f7,#fff 55%)}
.ty__card{max-width:720px;margin:0 auto}
.ty__card h1{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.18;margin:14px 0 10px}
.ty__lead{color:#4b5b58;font-size:1.02rem;line-height:1.62;margin:0 0 18px}
.ty__next{margin-top:26px;padding:22px 22px 18px;border:1px solid #e3ebe9;border-radius:16px;background:#fbfdfc;text-align:left}
.ty__next h2{font-size:1.05rem;margin:0 0 12px}
.ty__steps{margin:0 0 10px;padding-left:20px;display:grid;gap:10px}
.ty__steps li{color:#4b5b58;line-height:1.55}
.ty__steps li b{color:#12312d}
.ty__acts{margin-top:24px;justify-content:center;flex-wrap:wrap;gap:10px}
.ty__home{margin:16px 0 0;text-align:center}
.ty__home a{color:#5a6b68;font-size:.9rem;text-decoration:underline}
@media(max-width:640px){.ty{padding:44px 0 64px}.ty__next{padding:18px 16px 14px}}

/* ============================================================
   MOTION — page transitions, scroll reveals, micro-interactions
   Everything here yields to prefers-reduced-motion at the end.
   ============================================================ */
:root{--ease:cubic-bezier(.22,.72,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* route transitions */
#app{animation:pageIn .52s var(--ease-out) both}
#app.is-leaving{animation:pageOut .2s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pageOut{to{opacity:0;transform:translateY(-8px)}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal--left{transform:translateX(-30px)}
.reveal--right{transform:translateX(30px)}
.reveal--zoom{transform:scale(.94)}
.reveal--blur{filter:blur(7px)}
.reveal--blur.is-in{filter:none}

/* hero entrance */
.hero__copy > *,.searchcard,.hero__layout .who{animation:heroUp .9s var(--ease-out) both}
.hero__copy > *:nth-child(1){animation-delay:.05s}
.hero__copy > *:nth-child(2){animation-delay:.14s}
.hero__copy > *:nth-child(3){animation-delay:.23s}
.hero__copy > *:nth-child(4){animation-delay:.32s}
.hero__copy > *:nth-child(5){animation-delay:.41s}
.searchcard{animation-delay:.2s;animation-name:heroCard}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroCard{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
.hero__kicker{background:linear-gradient(92deg,var(--sun),#ffd98a 45%,var(--sun));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.who__card{animation:heroUp .7s var(--ease-out) both}
.who__card:nth-child(1){animation-delay:.42s}.who__card:nth-child(2){animation-delay:.5s}
.who__card:nth-child(3){animation-delay:.58s}.who__card:nth-child(4){animation-delay:.66s}
.who__card .illo path,.who__card .illo circle,.who__card .illo rect{stroke-dasharray:180;stroke-dashoffset:180;animation:draw 1.1s var(--ease-out) forwards}
.who__card:nth-child(1) .illo *{animation-delay:.5s}.who__card:nth-child(2) .illo *{animation-delay:.58s}
.who__card:nth-child(3) .illo *{animation-delay:.66s}.who__card:nth-child(4) .illo *{animation-delay:.74s}
@keyframes draw{to{stroke-dashoffset:0}}

/* page heads */
.pagehead__img{transform:scale(1.06);animation:phZoom 1.4s var(--ease-out) both}
@keyframes phZoom{from{opacity:0;transform:scale(1.14)}to{opacity:.72;transform:scale(1.06)}}
.pagehead .wrap > *{animation:heroUp .8s var(--ease-out) both}
.pagehead .crumbs{animation-delay:.06s}
.pagehead h1{animation-delay:.14s}
.pagehead p{animation-delay:.22s}
.pagehead .headstats{animation-delay:.3s}
.headstat{transition:transform .3s var(--ease),background .3s ease}
.headstat:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}

/* sticky header */
.site-head{transition:box-shadow .3s ease,background .3s ease}
.site-head.is-stuck{box-shadow:0 8px 30px rgba(0,0,0,.10);background:rgba(255,255,255,.97)}
.site-head__in{transition:height .3s var(--ease)}
.site-head.is-stuck .site-head__in{height:68px}
.site-head.is-stuck .logo__img{height:clamp(40px,3.6vw,50px)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a.is-here::after{transform:scaleX(1)}
.logo__mark{transition:transform .5s var(--ease)}
.logo:hover .logo__mark{transform:rotate(-18deg) scale(1.08)}

/* buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn > *{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0 auto 0 -140%;width:55%;z-index:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg)}
.btn:hover::after{animation:shine .8s var(--ease-out)}
@keyframes shine{to{left:150%}}
.btn:active{transform:translateY(1px) scale(.985)}
.rnd{transition:transform .18s var(--ease),background .18s ease}
.rnd:not(:disabled):hover{transform:scale(1.12)}
.rnd:not(:disabled):active{transform:scale(.9)}

/* cards */
.dcard,.tcity,.infocard,.citycard,.actrow,.dayrow,.qcard,.bcard,.tcard{transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s ease}
.infocard:hover,.citycard:hover,.actrow:hover,.dayrow:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.dcard__tag,.tcity__tag{transition:transform .3s var(--ease)}
.dcard:hover .dcard__tag{transform:translateY(-2px) scale(1.03)}
.tcity__go{transition:transform .3s var(--ease),background .3s ease,border-color .3s ease}
.tcity:hover .tcity__go{transform:translateX(4px)}
.dayrow__n{transition:transform .3s var(--ease),background .3s ease}
.dayrow:hover .dayrow__n{transform:rotate(-6deg) scale(1.08)}
.theme{transition:transform .22s var(--ease),background .22s ease,border-color .22s ease,color .22s ease}
.theme:hover{transform:translateY(-2px)}
.opt{transition:transform .26s var(--ease),border-color .26s ease,background .26s ease,box-shadow .26s ease}
.opt:hover{transform:translateY(-3px)}
.opt.is-on{animation:pop .34s var(--ease-out)}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.025)}100%{transform:scale(1)}}
.opt__check .ico{animation:tick .34s var(--ease-out) both}
@keyframes tick{from{opacity:0;transform:scale(.4) rotate(-18deg)}to{opacity:1;transform:none}}

/* planner */
#stepPanel{animation:stepIn .44s var(--ease-out) both}
@keyframes stepIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.stepper__i{transition:color .3s ease,border-color .3s ease}
.summary{animation:heroUp .5s var(--ease-out) both}
.sflash{animation:flash .55s ease}
@keyframes flash{0%{background:rgba(249,184,38,.28)}100%{background:transparent}}
.done__ico{animation:popIn .6s var(--ease-out) both}
@keyframes popIn{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}

/* counters + misc */
.counter{transition:box-shadow .3s ease,border-color .3s ease}
.counter:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,125,114,.12)}
.fixedrow{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;background:var(--bg-soft)}
.fixedrow .ico{width:19px;height:19px;color:var(--brand);flex:0 0 auto;margin-top:2px}
.fixedrow b{font-weight:700}
.fixedrow span{color:var(--muted);font-size:13.5px;display:block;margin-top:2px}
.foot-chips a{transition:transform .22s var(--ease),background .22s ease,border-color .22s ease,color .22s ease}
.foot-chips a:hover{transform:translateY(-2px)}
.faq__i{transition:border-color .3s ease,background .3s ease}
.faq__a{animation:faqIn .34s var(--ease-out) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.totop{transition:transform .24s var(--ease)}
.totop:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .pagehead__img{transform:none;opacity:.72}
  .hero__kicker{-webkit-text-fill-color:currentColor;background:none;color:var(--sun)}
}

/* ============================================================
   FORM VALIDATION — inline field state
   ============================================================ */
.fieldmsg{display:flex;align-items:flex-start;gap:7px;margin-top:7px;font-size:13px;line-height:1.45;animation:faqIn .26s var(--ease-out) both}
.fieldmsg .ico{width:15px;height:15px;flex:0 0 auto;margin-top:2px;stroke-width:2.2}
.fieldmsg--bad{color:#c23c1e}
.fieldmsg--warn{color:#9a6b0c}
.inp.is-bad input,.inp.is-bad textarea,.formfield.is-bad input,.formfield.is-bad select,.formfield.is-bad textarea{border-color:#e0623f;background:#fff8f6}
.inp.is-bad input:focus,.formfield.is-bad input:focus{outline-color:#e0623f}
.inp.is-warn input,.formfield.is-warn input{border-color:#e5b25b}
.inp.is-good input,.formfield.is-good input,.formfield.is-good select{border-color:#67b6ab}
.formfield{position:relative}
.req-dot{color:var(--accent);font-weight:800}
#contactStatus:empty{display:none}
#contactStatus{margin-top:4px}
#contactStatus .ok,#contactStatus .err{align-items:flex-start}

/* ============================================================
   AMBIENCE PILL — bottom-left, destination pages only
   Orange, muted by default. One tap unmutes.
   ============================================================ */
.amb{
  position:fixed;left:18px;bottom:18px;z-index:118;
  display:flex;align-items:center;
  max-width:calc(100vw - 36px);
  background:var(--accent);
  border:1px solid rgba(0,0,0,.06);border-radius:999px;
  padding:5px;box-shadow:0 10px 26px rgba(240,89,43,.34);
  transition:background .26s ease,box-shadow .26s var(--ease),transform .26s var(--ease);
  animation:ambIn .5s var(--ease-out) both;
}
.amb:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(240,89,43,.42)}
@keyframes ambIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.amb__b{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;
  transition:background .24s ease,transform .24s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.amb__b .ico{width:19px;height:19px;stroke-width:2}
.amb__b:hover{background:rgba(255,255,255,.32)}
.amb__b:active{transform:scale(.92)}
.amb__b:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* sound on — the button goes solid white and breathes */
.amb.is-on{background:var(--accent-dark)}
.amb.is-on .amb__b{background:#fff;color:var(--accent-dark);animation:ambPulse 2.4s ease-out infinite}
@keyframes ambPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

.amb__lbl{
  color:#fff;font:700 12.5px/1.2 var(--sans);letter-spacing:.02em;
  padding:0 15px 0 11px;white-space:nowrap;
}
@media (max-width:980px){
  .amb{left:14px;bottom:14px;padding:5px}
  .amb__b{width:36px;height:36px}
  .amb__lbl{font-size:12px;padding:0 13px 0 10px}
}
@media (prefers-reduced-motion:reduce){
  .amb,.amb.is-on .amb__b{animation:none}
  .amb:hover{transform:none}
}

/* ============================================================
   FLOATING ACTIONS — right rail on tablet and mobile
   Replaces the old full-width bottom bar.
   ============================================================ */
.fab{display:none}
.fab__b{
  position:relative;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 22px rgba(9,26,32,.26);color:#fff;background:var(--ink);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),background .26s ease;
  -webkit-tap-highlight-color:transparent;
}
.fab__b .ico{width:22px;height:22px;stroke-width:2}
.fab__b:active{transform:scale(.92)}
.fab__b:hover{transform:translateX(-3px);box-shadow:0 12px 28px rgba(9,26,32,.32)}
.fab__b--call{background:var(--brand)}
.fab__b--wa{background:#25d366;color:#08331b;border-color:rgba(0,0,0,.08)}
.fab__b--plan{background:var(--accent);width:58px;height:58px}
.fab__b--plan .ico{width:24px;height:24px}
.fab__lbl{
  position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(8px);
  background:rgba(12,27,35,.94);color:#fff;font:600 12.5px/1 var(--sans);
  padding:8px 11px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.fab__lbl::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;background:inherit;transform:translateY(-50%) rotate(45deg)}
.fab__b:hover .fab__lbl,.fab__b:focus-visible .fab__lbl{opacity:1;transform:translateY(-50%) translateX(0)}
.fab__b--plan::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);
  opacity:.55;animation:fabPulse 2.6s var(--ease-out) infinite;
}
@keyframes fabPulse{0%{transform:scale(.86);opacity:.5}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}

@media (max-width:980px){
  .mbar{display:none!important}
  #view-home,#app{padding-bottom:0}
  .fab{
    display:grid;gap:12px;justify-items:end;
    position:fixed;right:14px;z-index:80;
    bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .fab__b{animation:fabIn .5s var(--ease-out) both}
  .fab__b:nth-child(1){animation-delay:.28s}
  .fab__b:nth-child(2){animation-delay:.36s}
  .fab__b:nth-child(3){animation-delay:.44s}
  html{scroll-padding-top:74px}
}
@keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
@media (max-width:420px){
  .fab{right:12px;gap:10px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .fab__b{width:48px;height:48px}
  .fab__b--plan{width:54px;height:54px}
}
/* out of the way while the planner's own step buttons are on screen */
.fab.is-planner .fab__b--plan{display:none}
@media (prefers-reduced-motion:reduce){ .fab__b--plan::after{animation:none;opacity:0} }

/* anchors that took over from buttons */
a.dcard__media,a.who__card,a.tcity,a.citycard{display:block;text-decoration:none}
a.tcity,a.tcity .tcity__name,a.tcity .tcity__price b{color:#fff}
a.who__card{color:#fff}
a.citycard{color:var(--ink)}
.dcard__name a{color:inherit}
.dcard__name a:hover{color:var(--brand)}

/* ============================================================
   EXPLORE KARO — included with every journey, impact & rewards
   ============================================================ */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.perk{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 24px;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.perk:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.perk::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--brand)}
.perk__ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;
  background:var(--brand-soft);color:var(--brand-dark);
}
.perk__ico .ico{width:23px;height:23px}
.perk h3{font-size:19px;margin-bottom:8px}
.perk p{color:var(--ink-2);font-size:15px;line-height:1.68}
.perk__tag{
  display:inline-block;margin-top:14px;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-dark);
  background:#fff1e8;border-radius:999px;padding:5px 11px;
}
.perks-note{
  margin-top:24px;text-align:center;font-family:var(--script);font-style:italic;
  font-size:23px;color:var(--ink-2);line-height:1.5;
}
.impact{display:grid;grid-template-columns:1.05fr 1fr;gap:22px}
.impact__card{
  border-radius:var(--radius);padding:30px 28px;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.impact__card--refer{background:var(--brand-dark);color:#fff;border-color:transparent}
.impact__card--refer h3,.impact__card--give h3{font-size:22px;margin-bottom:9px}
.impact__card--refer p{color:rgba(255,255,255,.88)}
.impact__ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px}
.impact__card--refer .impact__ico{background:rgba(255,255,255,.16);color:#fff}
.impact__card--give .impact__ico{background:#fff1e8;color:var(--accent-dark)}
.impact__ico .ico{width:22px;height:22px}
.impact__amt{font-family:var(--display);font-size:42px;font-weight:700;line-height:1.05;margin:16px 0 4px}
.impact__amt small{display:block;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;opacity:.8;margin-top:6px}
.impact__card--give p{color:var(--ink-2);font-size:15.5px;line-height:1.7}
.impact__stamp{
  margin-top:auto;padding-top:18px;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dark);
}
.promise{
  margin-top:22px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;
}
.promise h3{font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.promise h3 .ico{width:21px;height:21px;color:var(--brand)}
.promise ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 22px}
.promise li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--ink-2)}
.promise li .ico{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:3px}
@media (max-width:960px){
  .perks{grid-template-columns:1fr}
  .impact{grid-template-columns:1fr}
  .promise ul{grid-template-columns:repeat(2,1fr)}
  .perks-note{font-size:20px}
}
@media (max-width:560px){ .promise ul{grid-template-columns:1fr} }

/* ============================================================
   HERO SEARCH BAR — styles
   ============================================================ */
.herosearch{position:relative;width:100%;max-width:640px;z-index:30}
.herosearch__lbl{
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:10px;
}
.herosearch__box{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:999px;
  padding:5px 6px 5px 22px;border:2px solid transparent;
  box-shadow:0 0 0 5px rgba(242,101,34,.16), 0 18px 46px rgba(6,20,48,.42);
  transition:box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.herosearch__box:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 7px rgba(242,101,34,.26), 0 22px 56px rgba(6,20,48,.5);
}
.herosearch__ico{display:grid;place-items:center;color:var(--brand);flex:0 0 auto}
.herosearch__ico .ico{width:22px;height:22px;stroke-width:2.2}
.herosearch input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);padding:17px 0;
}
.herosearch input::placeholder{color:#8aa0ad;font-weight:500}
.herosearch__go{
  flex:0 0 auto;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;transition:transform .2s var(--ease),filter .2s var(--ease);
}
.herosearch__go:hover{transform:scale(1.06);filter:brightness(1.07)}
.herosearch__go .ico{width:21px;height:21px;stroke-width:2.4}

.herocount{
  margin-top:13px;font-size:14px;font-weight:600;color:rgba(255,255,255,.88);
  min-height:21px;display:flex;align-items:center;gap:8px;
}
.herocount b{color:var(--sun)}
.herocount a{color:var(--sun);text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){
  .herosearch input{font-size:16px;padding:15px 0}
  .herosearch__box{padding-left:17px;gap:9px}
  .herosearch__go{width:45px;height:45px}
}

/* ============================================================
   CREATOR CLUB
   ============================================================ */
.whoyou{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.whoyou span{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 16px;font-size:14.5px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),border-color .25s ease}
.whoyou span:hover{transform:translateY(-2px);border-color:var(--brand)}
.whoyou span .ico{width:17px;height:17px;color:var(--brand);flex:0 0 17px}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px 24px 26px;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tier--mid{border-color:var(--brand);box-shadow:0 18px 42px rgba(10,79,168,.14)}
.tier__n{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tier h3{font-size:20px;margin-top:8px}
.tier > p{color:var(--ink-2);font-size:14.5px;margin-top:9px}
.tier ul{margin-top:16px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;list-style:none}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.tier li .ico{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--brand)}

.ckcheck{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.ckcheck label{display:flex;align-items:center;gap:10px;margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.ckcheck input{width:17px;height:17px;flex:0 0 17px;accent-color:var(--brand);margin:0;cursor:pointer}
.ckcheck label:hover{border-color:var(--brand)}
.ckcheck label:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}

@media(max-width:880px){
  .tiers{grid-template-columns:1fr}
  .whoyou span{font-size:13.5px;padding:9px 14px}
}

/* ------------------------------------------------------------
   HEADER — the number is there to be rung, so show it
   ------------------------------------------------------------
   It used to disappear below 1400px, which on a normal laptop
   meant never. It now sits beside the nav from 1060px up, and
   below that the burger menu carries its own tap-to-call row.
   ------------------------------------------------------------ */
@media (max-width:1400px){ .head-phone{display:flex} }
@media (max-width:1240px){ .nav{margin-left:16px} .nav a{padding:9px 6px;font-size:13.5px} .head-phone{font-size:13.4px} }
@media (max-width:1059px){ .head-phone{display:none} }
.mobile-nav__call{display:flex;align-items:center;gap:10px;margin-top:12px;border-bottom:0;
  background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--radius);
  padding:13px 14px;font-weight:700}
.mobile-nav__call .ico{width:18px;height:18px}

/* ============================================================
   HEADER — frosted, and split into two clusters
   ------------------------------------------------------------
   The bar is now mostly glass: whatever scrolls underneath it
   shows through, softened. The pages behind are light, so the
   dark nav text stays readable throughout.

   The right-hand cluster — Join Creator Club, Instagram, the
   phone number — is the "reach us" group, and a hairline rule
   holds it apart from the page navigation in the middle.
   ============================================================ */
.site-head{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  border-bottom:1px solid rgba(226,234,238,.72);
}
.site-head.is-stuck{
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 30px rgba(8,26,34,.10);
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  /* no blur support — fall back to something solid enough to read */
  .site-head, .site-head.is-stuck{background:rgba(255,255,255,.95)}
}

.head-right{margin-left:auto;display:flex;align-items:center;gap:13px}
.head-right::before{
  content:"";flex:0 0 auto;width:1px;height:26px;
  background:var(--line);margin-right:3px;
}

.head-cc{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:13.6px;font-weight:700;color:var(--brand-dark);
  border:1.5px solid var(--brand);border-radius:999px;padding:9px 17px;
  transition:background .18s ease,color .18s ease,transform .18s var(--ease);
}
.head-cc:hover{background:var(--brand);color:#fff;transform:translateY(-1px)}
.head-cc.is-here{background:var(--brand);border-color:var(--brand);color:#fff}

.head-ig{
  flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line);color:var(--ink-2);
  background:rgba(255,255,255,.6);transition:.18s;
}
.head-ig .ico{width:18px;height:18px}
.head-ig:hover{
  color:#fff;border-color:transparent;
  background:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 52%,#6228d7 100%);
}

@media (max-width:1240px){ .head-right{gap:10px} .head-cc{padding:8px 14px;font-size:13px} }
@media (max-width:820px){
  /* the burger menu is unchanged — everything else in the bar stands down */
  .head-cc,.head-ig{display:none}
  .head-right::before{display:none}
}

/* ============================================================
   HERO SEARCH — glass, so the lagoon behind it still reads
   ============================================================ */
.herosearch__box{
  /* a dark tint rather than a light one: the lagoon behind it is bright,
     and white type has to stay readable over whatever is back there */
  background:rgba(7,38,43,.34);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1.5px solid rgba(255,255,255,.46);
  box-shadow:0 0 0 5px rgba(242,101,34,.14), 0 18px 46px rgba(6,20,48,.42);
}
.herosearch__box:focus-within{
  background:rgba(7,38,43,.44);
  border-color:var(--accent);
  box-shadow:0 0 0 7px rgba(242,101,34,.26), 0 22px 56px rgba(6,20,48,.5);
}
.herosearch__ico{color:#fff}
.herosearch input{color:#fff}
.herosearch input::placeholder{color:rgba(255,255,255,.74);font-weight:500}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .herosearch__box{background:rgba(8,42,52,.78)}
}

/* ============================================================
   TRUST STRIP — the hero's own water, taken down to a dark
   ocean green so the band reads as a continuation of the
   photograph above it rather than a separate blue block.
   ============================================================ */
:root{ --ocean:#0a3a34; }
.trustbar{background:var(--ocean)}
.tstat__ico{background:rgba(249,184,38,.15);color:var(--sun)}
.tstat span{color:#9fc0b7}
.tstat + .tstat::before{background:rgba(255,255,255,.14)}

/* ============================================================
   DESIGN BRIEF — navy, cream, forest green, explore orange
   ------------------------------------------------------------
   Cream is the page; white is the card. Everything that used to
   float on white now has an edge, which is what makes the
   editorial layout in the brief hold together.
   ============================================================ */
:root{ --forest:#063F38; --ocean:#063F38; --cream:#FAF8F3; }
body{background:var(--cream)}
.trustbar{background:var(--forest)}

/* the little orange rule + uppercase label used all through the brief */
.eyebrow{
  display:flex;align-items:center;gap:12px;font-family:var(--sans);
  font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-dark);margin-bottom:14px;
}
.eyebrow i{display:block;width:34px;height:2px;background:var(--accent);flex:0 0 auto}
.eyebrow--light{color:var(--sun)}
.eyebrow--light i{background:var(--sun)}

/* ---------- hero ---------- */
.nhero{position:relative;overflow:hidden;isolation:isolate;background:var(--cream)}
.nhero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.nhero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(250,248,243,.985) 0%, rgba(250,248,243,.955) 34%,
    rgba(250,248,243,.80) 54%, rgba(250,248,243,.60) 76%, rgba(250,248,243,.52) 100%);
}
.nhero__in{padding:54px 20px 86px}
.nhero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:center}
.nhero__copy h1{
  font-size:clamp(34px,4.5vw,58px);line-height:1.05;color:var(--ink);letter-spacing:-.02em;
}
.nhero__copy h1 em{font-style:italic;color:var(--accent);font-weight:700}
.nhero__lead{
  margin-top:16px;font-family:var(--sans);font-weight:600;color:var(--ink);
  font-size:clamp(17px,1.9vw,22px);line-height:1.42;max-width:560px;
}
.nhero__sub{margin-top:14px;color:var(--ink-2);font-size:15.5px;line-height:1.7;max-width:520px}
.nhero__cta{margin-top:26px}

/* ---------- the polaroid stack ---------- */
.polas{position:relative;min-height:330px;display:flex;justify-content:center;align-items:center}
.pola{
  position:absolute;margin:0;background:#fff;padding:9px 9px 34px;border-radius:4px;
  box-shadow:0 18px 44px rgba(11,49,91,.22);width:150px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pola img{display:block;width:100%;height:150px;object-fit:cover;border-radius:2px;background:var(--brand-soft)}
.pola figcaption{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-family:var(--script);font-style:italic;font-size:17px;color:var(--ink);
}
.pola--1{transform:rotate(-10deg) translate(-186px,14px);z-index:1}
.pola--2{transform:rotate(-4deg)  translate(-62px,-14px);z-index:2}
.pola--3{transform:rotate(4deg)   translate(62px,-8px);z-index:3}
.pola--4{transform:rotate(11deg)  translate(186px,20px);z-index:4}
.polas:hover .pola--1{transform:rotate(-12deg) translate(-196px,6px)}
.polas:hover .pola--4{transform:rotate(13deg)  translate(196px,12px)}
.polas__note{
  position:absolute;top:-4px;left:-10px;z-index:6;max-width:130px;
  font-family:var(--script);font-style:italic;font-weight:600;
  font-size:24px;line-height:1.1;color:var(--ink);transform:rotate(-7deg);
}
.polas__note::after{
  content:"";display:block;width:74px;height:2px;margin-top:6px;
  background:var(--accent);border-radius:2px;transform:rotate(4deg);
}

/* ---------- the one search card ---------- */
.searchband{background:var(--cream);padding:0 0 34px}
.searchband .wrap{position:relative}
.scard{
  margin-top:-52px;position:relative;z-index:5;background:#fff;border:1px solid var(--line);
  border-radius:22px;box-shadow:0 22px 60px rgba(11,49,91,.13);
  padding:22px 26px;display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start;
}
.scard__who{border-left:1px solid var(--line);padding-left:26px}
.scard__lbl{
  display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;
}
.scard__lbl .ico{width:15px;height:15px;color:var(--accent)}
.scard .herosearch{max-width:none}
.scard .herocount{margin-top:10px;color:var(--ink-2);min-height:0}
.scard .herocount:empty{display:none}
.scard .herocount b{color:var(--accent-dark)}

/* the box is on white now, so it goes back to ink on a soft ground */
.herosearch__box{
  background:#fff;border:1.5px solid var(--line);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;padding:4px 5px 4px 18px;
}
.herosearch__box:focus-within{
  background:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(243,106,33,.14);
}
.herosearch__ico{color:var(--ink-2)}
.herosearch input{color:var(--ink);font-size:16px;padding:14px 0}
.herosearch input::placeholder{color:var(--muted);font-weight:500}
.herosearch__go{width:44px;height:44px}
.herosearch__go .ico{width:19px;height:19px}

/* traveller-type pills, light version */
.who__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.who__card{
  border:1.5px solid var(--line);background:var(--brand-soft);color:var(--ink);
  border-radius:14px;padding:11px 6px 9px;backdrop-filter:none;
}
a.who__card{color:var(--ink)}
a.who__card:hover,a.who__card:focus-visible{color:var(--accent-dark)}
.who__card .illo{color:var(--ink)}
.who__card svg{height:34px;max-width:56px}
.who__card b{font-size:13px;margin-top:2px}
.who__card:hover,.who__card:focus-visible{
  background:#fff;border-color:var(--accent);color:var(--accent-dark);transform:translateY(-3px);
}
.who__card:hover .illo,.who__card:focus-visible .illo{color:var(--accent)}

/* ---------- flight / packages / support ---------- */
.tribar{
  margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;padding:4px 10px;
}
.tri{display:flex;align-items:center;gap:14px;padding:10px 14px;min-width:0;position:relative}
.tri + .tri::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--line)}
.tri__ico{
  width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  background:#FDEEE4;color:var(--accent-dark);
}
.tri__ico .ico{width:22px;height:22px}
.tri > div b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.25}
.tri > div span{display:block;font-size:13px;color:var(--ink-2);font-weight:500;margin-top:2px}

/* ---------- forest-green benefits band ---------- */
.greenband{background:var(--forest);color:#fff;padding:44px 0 46px}
.greenband .eyebrow{margin-bottom:20px}
.gb__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gb{min-width:0}
.gb__hd{display:flex;align-items:flex-start;gap:12px}
.gb__ico{
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:rgba(249,184,38,.16);color:var(--sun);
}
.gb__ico .ico{width:20px;height:20px}
.gb__hd > div b{display:block;font-family:var(--display);font-size:16.5px;font-weight:700;line-height:1.25}
.gb__hd > div span{display:block;margin-top:4px;font-size:12.8px;color:#A9C7BF;font-weight:600}
.gb img{
  display:block;width:100%;height:104px;object-fit:cover;border-radius:12px;margin-top:14px;
  border:1px solid rgba(255,255,255,.14);
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nhero__grid{grid-template-columns:1fr;gap:8px}
  .polas{display:block;position:relative;min-height:268px;margin-top:18px;padding-top:66px}
  .pola{width:126px;top:66px;left:50%;margin-left:-63px}
  .pola img{height:126px}
  .pola--1{transform:rotate(-10deg) translate(-146px,12px)}
  .pola--2{transform:rotate(-4deg)  translate(-49px,-10px)}
  .pola--3{transform:rotate(4deg)   translate(49px,-4px)}
  .pola--4{transform:rotate(11deg)  translate(146px,16px)}
  .polas__note{
    position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(-3deg);
    max-width:none;white-space:nowrap;text-align:center;
  }
  .polas__note::after{margin:6px auto 0;transform:none}
  .scard{grid-template-columns:1fr;gap:18px;margin-top:-34px}
  .scard__who{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
  .gb__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:760px){
  .nhero__in{padding:34px 20px 70px}
  .tribar{grid-template-columns:1fr;gap:0;padding:4px 0}
  .tri + .tri::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}
  .tri{padding:13px 14px}
}
@media (max-width:520px){
  .polas{min-height:240px}
  .pola{width:100px;padding:6px 6px 26px;margin-left:-50px}
  .pola img{height:100px}
  .pola figcaption{font-size:13.5px;bottom:6px}
  .pola--1{transform:rotate(-10deg) translate(-114px,10px)}
  .pola--2{transform:rotate(-4deg)  translate(-38px,-8px)}
  .pola--3{transform:rotate(4deg)   translate(38px,-4px)}
  .pola--4{transform:rotate(11deg)  translate(114px,14px)}
  .polas__note{font-size:20px}
  .gb__grid{grid-template-columns:1fr}
  .gb img{height:120px}
}

/* ============================================================
   MOBILE ACTION BAR — Menu · WhatsApp · Send Query · Call
   ------------------------------------------------------------
   Fixed to the bottom of the phone viewport at every scroll
   position. The desktop floating buttons stand down when it is
   on screen, so only one of the two is ever present.
   ============================================================ */
.mbar2{display:none}
@media (max-width:820px){
  .mbar2{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(11,49,91,.10);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar2__b{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px 8px;background:none;border:0;cursor:pointer;color:var(--ink-2);
    font-family:var(--sans);-webkit-tap-highlight-color:transparent;
  }
  .mbar2__b .ico{width:22px;height:22px;stroke-width:1.9}
  .mbar2__b small{font-size:11.5px;font-weight:700;letter-spacing:.01em}
  .mbar2__b:active{background:var(--brand-soft)}
  .mbar2__b--wa{color:#128C4B}
  /* the bar must never sit on top of the last line of the footer */
  body{padding-bottom:64px}
  .fab{display:none!important}
}

/* Desktop has no bottom bar, so it keeps one floating WhatsApp button —
   fixed bottom-right, clear of the footer, at every scroll position. */
@media (min-width:821px){
  .fab{
    display:grid;justify-items:end;gap:12px;
    position:fixed;right:22px;bottom:26px;z-index:80;
  }
  .fab .fab__b--call,.fab .fab__b--plan{display:none}
  .fab__b--wa{width:58px;height:58px}
  .fab__b--wa .ico{width:26px;height:26px}
}

/* ============================================================
   INCLUDED SPECIALTY — shown, never chosen
   ============================================================ */
.segrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.seg{
  border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 6px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink-2);cursor:pointer;
  transition:.16s ease;
}
.seg:hover{border-color:var(--accent);color:var(--accent-dark)}
.seg.is-on{border-color:var(--accent);background:#FDEEE4;color:var(--accent-dark)}
.spec{
  margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--brand-soft);padding:14px 16px;
}
.spec__tag{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-dark);background:#FDEEE4;border-radius:999px;padding:4px 10px;margin-bottom:10px;
}
.spec__row{display:flex;gap:12px;align-items:flex-start}
.spec__ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:#fff;color:var(--brand);border:1px solid var(--line);
}
.spec__ico .ico{width:19px;height:19px}
.spec__row > div b{display:block;font-family:var(--display);font-size:16px;color:var(--ink)}
.spec__row > div span{display:block;margin-top:3px;font-size:13.8px;color:var(--ink-2);line-height:1.55}
@media (max-width:520px){ .segrow{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* two numbers in one footer line — never break one of them in half */
.foot-contact a{white-space:nowrap}
.foot-contact span{line-height:1.7}

/* ============================================================
   ICON CENTRING
   ------------------------------------------------------------
   An injected <svg> is an inline element, so it sits on the text
   baseline and leaves descender space beneath it — which reads as
   the glyph sitting a few pixels high inside its chip. Making the
   svg a block removes the baseline, and wrapping every bare
   [data-icon] span in a centred flex box puts the glyph on the
   exact middle of whatever is holding it.

   Both rules are written with :where() so they carry no
   specificity: any component that sets its own display — the grid
   chips, the FAB buttons — still wins, and simply inherits the
   corrected baseline.
   ============================================================ */
:where(svg.ico){display:block}
:where(span[data-icon]){
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;vertical-align:middle;
}
/* an icon beside a paragraph belongs on the first line, not the
   middle of the block */
.notebox > span[data-icon],.hint > span[data-icon]{align-self:flex-start;margin-top:1px}
/* a row that is icon-then-text: size the icon box to the glyph so it
   cannot drift inside an inherited line box */
li > span[data-icon],.pkg__facts > div > span[data-icon],.linklist > a > span[data-icon]{
  height:auto;align-self:center;
}
.tri__ico,.gb__ico,.spec__ico,.perk__ico,.impact__ico,.tstat__ico,.tcard__ico{
  display:grid;place-items:center;
}

/* ============================================================
   INCLUDED / IMPACT / STORIES — the rest of the brief's layout
   ============================================================ */
.perk{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ico pic" "h pic" "p pic" "tag pic";column-gap:18px;align-content:start}
.perk__ico{grid-area:ico}
.perk h3{grid-area:h}
.perk p{grid-area:p}
.perk__tag{grid-area:tag;justify-self:start}
.perk__pic{
  grid-area:pic;align-self:center;width:104px;height:118px;object-fit:cover;
  border-radius:14px;border:1px solid var(--line);background:var(--brand-soft);
}

.impact__card--give{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ico pic" "h pic" "p pic" "cta pic";column-gap:20px;align-content:start}
.impact__card--give .impact__ico{grid-area:ico}
.impact__card--give h3{grid-area:h}
.impact__card--give p{grid-area:p}
.impact__pic{
  grid-area:pic;align-self:center;width:132px;height:150px;object-fit:cover;
  border-radius:16px;border:1px solid var(--line);background:var(--brand-soft);
}
.impact__cta{
  grid-area:cta;justify-self:start;margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sun);
}
.impact__cta .ico{width:15px;height:15px}
.impact__cta:hover{gap:12px}
.impact__cta--give{color:var(--accent-dark)}

.section__flex,.section__head--wide{position:relative}
.headlink{
  position:absolute;right:0;top:4px;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--brand);
}
.headlink .ico{width:15px;height:15px}
.headlink:hover{gap:12px;color:var(--accent-dark)}

@media (max-width:900px){
  .perk{grid-template-columns:1fr;grid-template-areas:"pic" "ico" "h" "p" "tag";row-gap:4px}
  .perk__pic{width:100%;height:150px;margin-bottom:14px}
  .impact__card--give{grid-template-columns:1fr;grid-template-areas:"pic" "ico" "h" "p" "cta"}
  .impact__pic{width:100%;height:170px;margin-bottom:16px}
  .headlink{position:static;margin-top:10px}
}

/* the thumbnail rides beside the copy, not floating in the middle of it */
.perk__pic{align-self:start;margin-top:2px;width:98px;height:112px}
.impact__pic{align-self:start;margin-top:2px}
@media (max-width:900px){ .perk__pic,.impact__pic{align-self:stretch} }

/* ============================================================
   BUTTONS — the arrow belongs on the label's line
   ------------------------------------------------------------
   Making every icon an inline-flex box fixed its centring but
   turned it into an atomic inline: on a narrow button it could no
   longer sit beside the last word and dropped to a line of its
   own. Laying the button out as a nowrap flex row puts it back
   where it belongs, and the label still wraps inside its own item.
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-wrap:nowrap}
.btn > span{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-wrap:nowrap;min-width:0}
.btn span[data-icon]{flex:0 0 auto}

/* ============================================================
   USP CARDS — the picture is a column, not a floating thumbnail.
   It spans every row of the card (icon -> tag) and stretches to
   the exact height of the text beside it. Images only: no video
   affordance, no play badge.
   ============================================================ */
.perk{grid-template-columns:1fr 116px;grid-template-rows:auto auto auto 1fr;grid-template-areas:"ico ico" "h pic" "p pic" "tag tag";column-gap:18px}
.perk__tag{white-space:nowrap;align-self:end}
.perk__media{
  grid-area:pic;align-self:stretch;justify-self:stretch;
  position:relative;display:block;width:116px;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--brand-soft);
}
.perk__pic{
  grid-area:auto;align-self:auto;margin-top:0;
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
  border:0;border-radius:0;
}

/* ============================================================
   IMPACT PAIR
   ============================================================ */
.impact__card--refer{position:relative;overflow:hidden;padding:0;display:block}
.impact__bg{
  position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;object-position:center;
  opacity:.5;
}
.impact__card--refer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,var(--brand-dark) 0%,var(--brand-dark) 36%,rgba(7,33,62,.80) 58%,rgba(7,33,62,.34) 100%);
}
.impact__body{position:relative;z-index:2;padding:30px 28px;max-width:62%}
.impact__card--refer .impact__amt{margin-top:6px}
.impact__script{
  position:absolute;right:26px;top:26px;z-index:3;text-align:right;
  font-family:var(--script);font-style:italic;font-weight:600;font-size:23px;line-height:1.1;
  color:#fff;transform:rotate(-7deg);
}
.impact__script--dark{color:var(--ink);right:18px;top:14px;text-shadow:0 1px 10px rgba(255,255,255,.85),0 0 22px rgba(255,255,255,.7)}
.impact__btn{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  border:1.5px solid var(--accent);border-radius:999px;padding:10px 20px;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sun);
  transition:background .18s ease,color .18s ease;
}
.impact__btn .ico{width:15px;height:15px}
.impact__btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.impact__card--give{position:relative;overflow:hidden}
.impact__card--give .impact__pic{width:150px;height:100%;min-height:150px;border-radius:16px}

@media (max-width:900px){
  .perk{grid-template-columns:1fr;grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"pic" "ico" "h" "p" "tag"}
  .perk__tag{white-space:normal;align-self:start}
  .perk__media{width:100%;height:170px;min-height:0;margin-bottom:14px}
  .impact__body{max-width:none;padding:26px 22px}
  .impact__bg{width:100%;opacity:.28}
  .impact__card--refer::after{background:linear-gradient(180deg,rgba(7,33,62,.92),rgba(7,33,62,.97))}
  .impact__script{right:16px;top:16px;font-size:19px}
  .impact__card--give .impact__pic{width:100%;height:170px;min-height:0}
}

/* An icon injected straight into a button — no wrapper span — was being
   made a block by the centring rule and dropping to a line of its own.
   Inline-block keeps it beside the label; the icon chips, whose svg is the
   only thing in the box, still get the block treatment they need. */
:where(svg.ico){display:inline-block;vertical-align:middle}
:where(span[data-icon]) > svg.ico,
:where(.tri__ico,.gb__ico,.spec__ico,.perk__ico,.impact__ico,.tstat__ico,.tcard__ico) > svg.ico{display:block}
.btn svg.ico{display:inline-block;vertical-align:middle;flex:0 0 auto}


/* ============================================================
   v14 — IMPACT PAIR
   ------------------------------------------------------------
   v12 gave every .impact__card--refer / --give a full-bleed
   background treatment, which quietly wrecked the plain text
   versions of the same cards on /rewards (padding:0 plus a
   gradient painted straight over the copy). The photo treatment
   now belongs to .impact__card--photo, which only the two
   homepage cards carry; everything else goes back to a normal
   padded card.

   The photo is a real panel down the right of the card, with the
   gradient sitting on the panel rather than on the whole card,
   so the same rule works when the panel moves to the top on a
   phone. Both cards zoom their photo on hover.
   ============================================================ */
.impact__script{display:none !important}

.impact__card--refer{position:static;overflow:visible;padding:30px 28px;display:block}
.impact__card--refer::after{content:none}
.impact__card--give{display:block;padding:30px 28px;position:relative;overflow:visible}

.impact__card--photo{
  position:relative;overflow:hidden;padding:0;display:block;
  min-height:330px;isolation:isolate;
}
.impact__ph{
  position:absolute;inset:0;z-index:0;
  display:block;width:100%;height:100%;overflow:hidden;
}
.impact__ph img.impact__bg{
  position:static;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:1;
  transform:scale(1);transform-origin:center;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.impact__card--photo:hover .impact__ph img.impact__bg{transform:scale(1.09)}
.impact__ph::after{content:"";position:absolute;inset:0;pointer-events:none}
.impact__ph::after{background:rgba(0,0,0,.58)}
.impact__card--photo .impact__body{
  position:relative;z-index:2;padding:34px 30px;max-width:56%;
}
.impact__card--photo .impact__cta,
.impact__card--photo .impact__btn{position:relative;z-index:2}

/* A flat black scrim darkens both cards, so both read as light-on-dark. */
.impact__card--give.impact__card--photo{background:var(--brand-dark)}
.impact__card--photo,
.impact__card--photo h3,
.impact__card--photo p,
.impact__card--give.impact__card--photo p,
.impact__card--photo .impact__amt{color:#fff}
.impact__card--photo .impact__amt small{color:rgba(255,255,255,.82);opacity:1}
.impact__card--photo .impact__ico{background:rgba(255,255,255,.18);color:#fff}
.impact__card--photo .impact__stamp{position:relative;z-index:2;color:var(--sun);display:inline-block;margin-top:16px;padding-top:0}
.impact__card--photo .impact__amt + p{margin-top:14px}
.impact__card--give.impact__card--photo .impact__cta--give{color:var(--sun)}

/* ============================================================
   v14 — USP CARD IMAGES
   One size for all three cards (the Discover hidden gems
   proportion), pinned to the top of the headline, zooming on
   hover.
   ============================================================ */
.perk__media{align-self:start;height:178px;min-height:0}
.perk__pic{transform:scale(1);transform-origin:center;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.perk:hover .perk__pic{transform:scale(1.09)}

@media (max-width:900px){
  .impact__card--photo{min-height:0}
  .impact__ph{position:relative;inset:auto;width:100%;height:180px}
  .impact__ph img.impact__bg{object-position:center}
  .impact__card--photo .impact__body{max-width:none;padding:24px 22px}
  .perk__media{height:170px}
}


/* ============================================================
   v15 — MOBILE OVERFLOW
   ============================================================ */

/* 1. a grid item may never widen the container it sits in */
.scard,.scard>*,.dsplit,.dsplit>*,.tribar>*,.who__row>*{min-width:0}
.herosearch,.herosearch__box,.herosearch input{min-width:0}
.herosearch input{width:100%}

/* 2. explicit zero-minimum tracks, restated after the duplicates */
.scard{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.dsplit{grid-template-columns:minmax(0,1.55fr) minmax(0,360px)}

@media (max-width:980px){
  .dsplit{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .scard{grid-template-columns:minmax(0,1fr)}
}

/* 3. four chips do not fit one row on a phone — 2x2, as intended */
@media (max-width:420px){
  .who__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who__card svg{height:50px}
}

/* 4. keep the placeholder from running under the go button */
@media (max-width:520px){
  .herosearch__box{gap:10px;padding-right:6px}
  .herosearch input{padding-right:4px}
  .scard__lbl{align-items:flex-start}
  .scard__lbl .ico{margin-top:2px}
}

/* 5. the destination-sound pill sat on top of the mobile bottom bar,
      covering Menu and WhatsApp — lift it clear of the bar */
@media (max-width:820px){
  .amb{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}

/* 6. the page-head photo was 11px wider than the viewport on each side */
.pagehead__img{max-width:100%}


/* ============================================================
   v16 — HERO POLAROIDS: 2x2 ON A PHONE
   ============================================================ */

/* >1000px: the outer pair sat exactly on the end of the caption
   behind it — give the fan 8px more reach on each side. */
@media (min-width:1001px){
  .pola--1{transform:rotate(-10deg) translate(-194px,14px)}
  .pola--4{transform:rotate(11deg)  translate(194px,20px)}
  .polas:hover .pola--1{transform:rotate(-12deg) translate(-204px,6px)}
  .polas:hover .pola--4{transform:rotate(13deg)  translate(204px,12px)}
}

/* 521px - 1000px: the fan stays, but it was packed too tightly —
   each card covered the tail of the caption on the card behind it
   ("Thailand" read as "Thailanc").  Narrower cards, wider spread. */
@media (min-width:521px) and (max-width:1000px){
  .pola{width:118px}
  .pola img{height:118px}
  .pola--1{transform:rotate(-9deg)  translate(-162px,12px)}
  .pola--2{transform:rotate(-3.5deg)translate(-54px,-10px)}
  .pola--3{transform:rotate(3.5deg) translate(54px,-4px)}
  .pola--4{transform:rotate(9deg)   translate(162px,16px)}
  .polas:hover .pola--1{transform:rotate(-11deg) translate(-170px,6px)}
  .polas:hover .pola--4{transform:rotate(11deg)  translate(170px,10px)}
}
@media (max-width:520px){
  .polas{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 14px;min-height:0;
    padding-top:64px;padding-bottom:8px;
    width:100%;max-width:322px;justify-self:center;margin-left:auto;margin-right:auto;
    justify-items:center;align-items:start;
  }
  .pola{
    position:static;top:auto;left:auto;margin:0;
    width:100%;max-width:148px;padding:7px 7px 27px;
    box-shadow:0 12px 30px rgba(11,49,91,.20);
  }
  .pola img{height:116px}
  .pola figcaption{font-size:15px;bottom:7px}

  .pola--1{transform:rotate(-5deg)}
  .pola--2{transform:rotate(4deg)}
  .pola--3{transform:rotate(3.5deg)}
  .pola--4{transform:rotate(-4.5deg)}
  .polas:hover .pola--1{transform:rotate(-5deg)}
  .polas:hover .pola--4{transform:rotate(-4.5deg)}

  .polas__note{top:0}
}


/* ============================================================
   v17 — CREATOR CLUB APPLICATION WIZARD
   Five steps with a rail down the side, and a collaboration
   step where the three cards are the control: tick one, two or
   all three.
   ============================================================ */
.wiz{display:grid;grid-template-columns:minmax(0,252px) minmax(0,1fr);gap:26px;align-items:start}

.wiz__rail{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:sticky;top:92px}
.wiz__st{
  display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;
  cursor:pointer;transition:background .2s ease;-webkit-tap-highlight-color:transparent;
}
.wiz__st:hover{background:rgba(234,242,248,.7)}
.wiz__st.is-on{background:var(--brand-soft)}
.wiz__n{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:800 12.5px/1 var(--sans);background:#fff;border:1px solid var(--line);color:var(--ink-2);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.wiz__st.is-on .wiz__n{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.wiz__st.is-done .wiz__n{background:var(--brand);border-color:var(--brand);color:#fff}
.wiz__t{display:block;min-width:0}
.wiz__t b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25}
.wiz__t small{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.35}

.wiz__panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px 22px;box-shadow:0 18px 46px rgba(11,49,91,.08);min-width:0;
}
.wstep{display:none}
.wstep.is-on{display:block;animation:wstepIn .32s var(--ease-out) both}
@keyframes wstepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wstep__hd{margin-bottom:20px}
.wstep__hd h3{font-family:var(--display);font-size:27px;line-height:1.18;letter-spacing:-.012em;margin:10px 0 7px}
.wstep__hd p{color:var(--ink-2);font-size:15px;line-height:1.6}

.wiz__foot{
  display:flex;align-items:center;gap:14px;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
}
.wbtn{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font:700 12.5px/1 var(--sans);letter-spacing:.04em;color:var(--ink-2);padding:11px 2px;
  transition:color .2s ease;
}
.wbtn:hover{color:var(--brand)}
.wbtn .ico{width:16px;height:16px}
.wiz__count{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.wiz__foot .btn{margin-left:14px}
.wiz__foot [hidden]{display:none !important}

/* ---------- the three collaboration cards ---------- */
.collab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.form .collab__c,.collab__c{
  position:relative;display:flex;flex-direction:column;min-width:0;
  border:1.5px solid var(--line);border-radius:18px;background:#fff;
  padding:18px 18px 0;margin-bottom:0;cursor:pointer;overflow:hidden;
  font-size:14px;font-weight:400;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.collab__c:hover{border-color:#b7d0e6;box-shadow:0 12px 30px rgba(11,49,91,.10);transform:translateY(-2px)}
.collab__c input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.collab__c.is-picked{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,95,163,.14)}

.collab__tick{
  position:absolute;right:16px;top:16px;width:22px;height:22px;border-radius:6px;
  border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease;
}
.collab__tick::after{
  content:"";width:10px;height:5.5px;margin-top:-3px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .16s ease,transform .16s ease;
}
.collab__c.is-picked .collab__tick{background:var(--brand);border-color:var(--brand)}
.collab__c.is-picked .collab__tick::after{opacity:1;transform:rotate(-45deg) scale(1)}
.collab__c input:focus-visible ~ .collab__tick{outline:2px solid var(--brand);outline-offset:2px}

.collab__ico{
  width:40px;height:40px;border-radius:11px;background:var(--brand-soft);
  color:var(--brand-dark);display:grid;place-items:center;margin-bottom:14px;
}
.collab__ico .ico{width:20px;height:20px}
.collab__c h4{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.25;margin-bottom:8px;color:var(--ink)}
.collab__c > p{color:var(--ink-2);font-size:13.6px;font-weight:400;line-height:1.6;margin-bottom:13px}
.collab__c ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.collab__c li{display:grid;grid-template-columns:15px 1fr;gap:9px;align-items:start;font-size:13.2px;font-weight:500;line-height:1.5;color:var(--ink)}
.collab__c li > span[data-icon]{display:grid;place-items:center;margin-top:2px}
.collab__c li .ico{width:14px;height:14px;color:var(--brand);stroke-width:2.6}

.collab__pic{margin:auto -18px 0;position:relative;display:block;height:116px;overflow:hidden}
.collab__pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.collab__c:hover .collab__pic img{transform:scale(1.07)}
.collab__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.55) 100%)}
.collab__script{
  position:absolute;left:15px;bottom:12px;z-index:2;
  color:#fff;font-family:var(--script);font-style:italic;font-weight:600;
  font-size:19px;line-height:1.06;transform:rotate(-4deg);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.collab__script::after{content:"";display:block;width:56px;height:2.5px;margin-top:5px;background:var(--accent);border-radius:2px}

.hint--blue{background:var(--brand-soft);border-color:#c9dded;color:var(--brand-dark)}
.hint--blue .ico{color:var(--brand)}

@media (max-width:1080px){
  .collab{grid-template-columns:1fr}
  .collab__pic{height:150px}
}
@media (max-width:900px){
  .wiz{grid-template-columns:minmax(0,1fr);gap:16px}
  .wiz__rail{position:static;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
  .wiz__rail::-webkit-scrollbar{display:none}
  .wiz__st{flex:0 0 auto;padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;gap:9px;align-items:center}
  .wiz__st.is-on{background:var(--brand-soft);border-color:#c6dcee}
  .wiz__n{width:23px;height:23px;font-size:11.5px}
  .wiz__t small{display:none}
  .wiz__t b{font-size:13px;white-space:nowrap}
  .wiz__panel{padding:20px 18px 18px}
  .wstep__hd h3{font-size:23px}
}
@media (max-width:560px){
  .wiz__panel{padding:18px 15px 16px}
  .wstep__hd h3{font-size:21px}
  .wiz__foot{flex-wrap:wrap;gap:10px}
  .wiz__count{order:3;margin-left:0;width:100%;text-align:center}
  .wiz__foot .btn{margin-left:auto}
  .collab__c{padding:16px 16px 0}
  .collab__pic{margin:auto -16px 0;height:132px}
}


/* ============================================================
   v18 — THE COLLABORATION STEP, MATCHED TO THE COMP
   ============================================================ */

/* the rail and the watermark share a column */
.wiz__side{display:block}
@media (min-width:901px){ .wiz__side{position:sticky;top:92px} }
.wiz__rail{position:relative;top:auto}

/* 1. the line that runs down between the numbered circles */
.wiz__rail::before{
  content:"";position:absolute;left:29px;top:24px;bottom:24px;width:2px;
  background:#D3E1EE;border-radius:2px;z-index:0;
}
.wiz__st{position:relative;z-index:1}
.wiz__n{box-shadow:0 0 0 4px var(--cream)}
.wiz__st.is-on .wiz__n{box-shadow:0 0 0 4px var(--brand-soft)}

/* 2. no counter in the footer: Back on the left, Next on the right */
.wiz__count{display:none !important}
.wiz__foot .btn{margin-left:auto}

/* 3. the filled badge on the note */
.hint--badge{align-items:center}
.hint--badge .hint__b{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:var(--brand);display:grid;place-items:center;margin-top:0;
}
.hint--badge .hint__b .ico{width:13px;height:13px;stroke-width:2.6;margin-top:0;color:#fff}

@media (max-width:1080px){
  .collab__pic{margin-top:16px}
}

@media (max-width:900px){
  .wiz__rail::before{display:none}
  .wiz__n{box-shadow:none}
  .wiz__st.is-on .wiz__n{box-shadow:none}
}