/* ===== iTravel With Miki — homepage sections (dark theme) ===== */
:root{
  --bg:#ffffff;--bg-card:#f5f8fd;--bg-card-hover:#eaf1fc;--border:rgba(13,27,51,.13);
  --text:#0d1b33;--text-muted:#46567a;--accent:#1667d8;--accent-rgb:22,103,216;--accent-2:#d92b3d;--accent-2-rgb:217,43,61;--navy:#173a7a;--teal-2:#0d8a7a;--star:#1667d8;
  --radius:18px;--radius-sm:12px;--max-w:1240px;--font:'Archivo',Arial,Helvetica,sans-serif;
  background:var(--bg);color:var(--text);font-family:var(--font);
}
html,body{background:var(--bg)!important;color:var(--text)}
::selection{background:rgba(var(--accent-rgb),.18)}
body{font-family:var(--font);font-size:18px;line-height:1.6}
/* Keep logo / nav / hero, darkened to sit on the new page */
.brand-band{background:#fff}
.nav-shell{background:var(--navy);border-color:rgba(13,27,51,.2)}
.hero-overlay h1{font-family:var(--font);font-weight:800;letter-spacing:-.03em}
.hero-video-shade{background:linear-gradient(0deg,#fff 0%,rgba(13,27,51,.55) 30%,rgba(13,27,51,.28) 62%,rgba(13,27,51,.12) 100%)}
.hero-button{font-family:var(--font)}

.container{max-width:var(--max-w);margin:0 auto;padding-inline:24px}
.section{padding-block:96px;position:relative;overflow:hidden}
.section h2{font-size:clamp(32px,4.5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 14px;color:var(--text);text-wrap:balance}
.kicker{font-size:16px;letter-spacing:.15em;font-weight:800;color:var(--accent);text-transform:uppercase;margin:0 0 14px;-webkit-text-stroke:3.5px #fff;paint-order:stroke fill;text-shadow:0 0 2px rgba(255,255,255,.9)}
.section-sub{color:var(--text-muted);font-size:18px;margin:0}
.glow-left::before,.glow-right::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(90px);opacity:.14;pointer-events:none;z-index:0}
.glow-left::before{background:var(--accent);left:-260px;top:-120px}
.glow-right::before{background:var(--accent-2);right:-260px;top:10%}
.section>.container{position:relative;z-index:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:16px 30px;border-radius:999px;font:700 18px/1.2 var(--font);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s;letter-spacing:.02em;text-transform:uppercase}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-outline{background:#fff;color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.btn-outline:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:#0f52ad;border-color:#0f52ad}
.btn-white{background:var(--navy);color:#fff}
.btn-white:hover{background:var(--accent);color:#fff}
:where(.btn,.trip-card,.review-card button,.f-link,.site-footer a,.cta-call,.all-list button):focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Stats strip */
.stats-strip{background:var(--bg-card);border-block:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 20px;text-align:center;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--border)}
.stat:first-child{border-left:0}
.stat-num{font-size:clamp(30px,3.2vw,40px);font-weight:800;color:var(--accent);line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{font-size:18px;color:var(--text-muted);line-height:1.4}

/* Section head */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.section-head.centered{justify-content:center;text-align:center}
.section-head.centered .section-sub{max-width:560px;margin-inline:auto}
.view-all-mobile{display:none}

/* Trip cards */
.trip-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trip-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--text);box-shadow:0 8px 24px -18px rgba(13,27,51,.5);text-align:left;padding:0;font:inherit;cursor:pointer;transition:transform .35s,border-color .35s,box-shadow .35s,background .35s}
.trip-card:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 22px 46px -22px rgba(var(--accent-rgb),.75);background:#fff}
.tc-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#dbe6f6,#eef3fb)}
.tc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.trip-card:hover .tc-img img{transform:scale(1.06)}
.badge{position:absolute;top:16px;left:0;background:var(--navy);color:#fff;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:8px 18px 8px 14px;border:1.5px solid var(--accent);border-left:0;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}
.tc-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat{font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cat-motorcoach{color:var(--accent)}.cat-river{color:#0f7aa8}.cat-island{color:#0d8a7a}
.trip-card h3{font-size:24px;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.2}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--text-muted);font-size:17px}
.meta span{display:inline-flex;align-items:center;gap:8px}
.meta svg{width:18px;height:18px;stroke:var(--accent)}
.tc-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tc-price small{font-size:16px;color:var(--text-muted)}
.tc-price strong{font-size:32px;font-weight:800;letter-spacing:-.02em}
.tc-cta{margin-top:12px;width:100%;pointer-events:none}

/* Reviews masonry */
.masonry{columns:4;column-gap:20px}
.review-card{break-inside:avoid;margin-bottom:20px;border-radius:var(--radius);transition:transform .3s,border-color .3s;display:block}
.review-card:hover{transform:translateY(-4px)}
.rv-text{background:#fff;border:1px solid var(--border);padding:24px;box-shadow:0 8px 24px -20px rgba(13,27,51,.55)}
.rv-text:hover{border-color:rgba(var(--accent-rgb),.4)}
.rv-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:17px;background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.35)}
.rv-name{font-weight:700;font-size:18px;line-height:1.3}
.rv-trip{font-size:16px;color:var(--text-muted)}
.stars{color:var(--star);font-size:22px;letter-spacing:2px;line-height:1}
.rv-body{font-size:18px;line-height:1.6;margin:12px 0;color:#1a2a47}
.verified{font-size:16px;color:var(--text-muted)}
.verified b{color:var(--teal-2)}
.rv-quote{background:rgba(var(--accent-2-rgb),.12);border:1px solid rgba(var(--accent-2-rgb),.45);padding:28px 26px}
.rv-quote .qmark{font:800 72px/0.6 Georgia,serif;color:var(--accent-2);display:block;margin:18px 0 8px}
.rv-quote p{font-size:22px;line-height:1.45;font-weight:600;margin:0 0 14px;color:#33101a}
.rv-quote .rv-trip{color:#7a2733}
.rv-media{position:relative;overflow:hidden;padding:0;border:0;width:100%;background:none;color:#fff;cursor:pointer;font:inherit;text-align:left}
.rv-media .ph{aspect-ratio:3/4}
.rv-media.tall .ph{aspect-ratio:9/14}
.rv-media .shade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
.rv-media .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.rv-media .cap span:last-child{font-size:16px;font-weight:600}
.play{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);transition:transform .3s,background .3s}
.play svg{width:26px;height:26px;fill:#fff;stroke:none;margin-left:4px}
.rv-media:hover .play{transform:scale(1.1);background:rgba(255,255,255,.4)}
.rating-row{display:flex;justify-content:center;align-items:center;gap:20px 28px;flex-wrap:wrap;margin-top:28px;text-align:center}
.rating-row p{margin:0;font-size:19px}

/* Placeholder image boxes */
.ph{position:relative;display:block;width:100%;border-radius:inherit;background:linear-gradient(145deg,#e7eefb,#f6f9ff);overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:start center;padding:22px 16px;text-align:center;color:#8492ad;font-size:16px;word-break:break-word;z-index:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* CTA panel */
.cta-panel{display:grid;grid-template-columns:45fr 55fr;min-height:560px;border-radius:28px;overflow:hidden;position:relative;border:1px solid rgba(var(--accent-rgb),.45);background:linear-gradient(160deg,#f2f7ff,#ffffff);box-shadow:0 30px 80px -34px rgba(var(--accent-rgb),.85),-16px 40px 70px -46px rgba(var(--accent-2-rgb),.6)}
.cta-panel::before{content:"";position:absolute;left:-180px;bottom:-220px;width:520px;height:520px;border-radius:50%;background:var(--accent);opacity:.16;filter:blur(100px);pointer-events:none}
.cta-copy{position:relative;z-index:1;padding:64px;display:flex;flex-direction:column;justify-content:center;background-image:linear-gradient(rgba(var(--accent-rgb),.09) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.09) 1px,transparent 1px);background-size:48px 48px}
.cta-title{font-size:clamp(40px,5vw,64px)!important;background:linear-gradient(180deg,#0d1b33 25%,#2a4a86);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.cta-text{font-size:19px;color:var(--text-muted);max-width:460px;margin:0 0 30px}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.cta-call{color:var(--text);font-size:19px;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;gap:6px}
.cta-call strong{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.cta-fine{font-size:16px;color:var(--text-muted);margin:28px 0 0}
.cta-cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 20px;height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.cta-col{position:relative;overflow:hidden;height:100%}
.cta-track{display:flex;flex-direction:column;gap:14px;animation:scroll-up var(--dur,45s) linear infinite}
.cta-col.down .cta-track{animation-name:scroll-down}
.cta-cols:hover .cta-track{animation-play-state:paused}
.cta-track img{width:100%;border-radius:14px;object-fit:cover;display:block}
.cta-track img.r45{aspect-ratio:4/5}.cta-track img.r11{aspect-ratio:1/1}.cta-track img.r34{aspect-ratio:3/4}
@keyframes scroll-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
@keyframes scroll-down{from{transform:translateY(calc(-50% - 7px))}to{transform:translateY(0)}}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding-top:72px;background:#f5f8fd}
.footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.4fr;gap:36px}
.f-brand img{width:120px;height:120px;object-fit:contain;margin-bottom:10px}
.f-brand p{color:var(--text-muted);font-size:18px;margin:0}
.site-footer h3{font-size:18px;font-weight:800;margin:0 0 14px;color:var(--navy);letter-spacing:.02em}
.site-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.site-footer a,.f-link{color:var(--text-muted);font:18px/1.5 var(--font);text-decoration:none;background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;transition:color .2s}
.site-footer a:hover,.f-link:hover{color:var(--accent)}
.f-contact p{margin:0 0 10px;color:var(--text-muted);font-size:18px}
.socials{display:flex;gap:16px;margin-top:14px}
.socials svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7}
.socials a{display:grid;place-items:center;width:44px;height:44px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;border-top:1px solid var(--border);margin-top:56px;padding-block:26px;font-size:16px;color:var(--text-muted)}
.footer-bottom p{margin:0}.footer-bottom a{font-size:16px}

/* Dialogs — dark */
dialog{background:#fff;color:var(--text);border:1px solid var(--border);font-family:var(--font);box-shadow:0 40px 90px -30px rgba(13,27,51,.45)}
.dialog-top{background:#fff;border-color:var(--border)}
.dialog-top .eyebrow{color:var(--accent)}
.close-button{background:#fff;border-color:var(--border);color:var(--navy)}
.detail-date,.detail-help a{color:var(--accent)}
.detail-description,.price-box span,.detail-actions p{color:var(--text-muted)}
.price-box{background:var(--bg-card);border-color:var(--border)}
.departure-box,.confirmation-note{background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);border-radius:12px}
.confirmation-note{padding:4px 20px 12px;margin-top:18px}
.detail-actions{background:#fff;border-color:var(--border)}
.detail-actions .button.primary{background:var(--accent);color:#fff;border-radius:999px}
.all-trips-body{padding:26px 30px 32px}
.all-trips-body h2{font-size:32px;margin:0 0 6px}
.all-note{color:var(--text-muted);font-size:17px}
.all-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.all-list button{width:100%;display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:10px 18px 10px 10px;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s}
.all-list button:hover{border-color:var(--accent)}
.all-list img{width:92px;height:68px;border-radius:10px;object-fit:cover}
.all-list strong{display:block;font-size:19px;line-height:1.3}
.all-list small{font-size:16px;color:var(--text-muted)}
.all-list .p{font-weight:800;font-size:20px;color:var(--accent);white-space:nowrap}
.video-box{width:min(900px,calc(100% - 32px));background:#000;padding:0}
.video-box .close-button{position:absolute;top:12px;right:12px;z-index:2}
.video-box video{display:block;width:100%;max-height:80vh}
.video-empty{padding:70px 30px;text-align:center;color:var(--text-muted);font-size:18px}
.video-empty strong{display:block;color:#fff;font-size:24px;margin-bottom:8px}

/* Scroll reveal */
.will-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0ms)}
.will-reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:1050px){.masonry{columns:2}.footer-cols{grid-template-columns:1fr 1fr 1fr}.f-brand,.f-contact{grid-column:span 3}}
@media(max-width:900px){
  .cta-panel{grid-template-columns:1fr}
  .cta-cols{order:-1;height:340px}
  .cta-copy{padding:40px 28px}
}
@media(max-width:760px){
  .container{padding-inline:16px}
  .section{padding-block:64px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{border-left:0;border-top:1px solid var(--border)}
  .stat:nth-child(-n+2){border-top:0}.stat:nth-child(even){border-left:1px solid var(--border)}
  .section-head{margin-bottom:30px}
  .view-all{display:none}.view-all-mobile{display:flex;width:100%;margin-top:26px}
  .trip-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:10px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .trip-card{flex:0 0 86%;scroll-snap-align:start}
  .tc-cta{font-size:16px;padding:14px 18px;gap:10px}
  .tc-body{padding:20px}
  .masonry{columns:1}
  .footer-cols{grid-template-columns:1fr 1fr}.f-brand,.f-contact{grid-column:span 2}
  .all-list button{grid-template-columns:72px 1fr;padding-right:12px}
  .all-list img{width:72px;height:56px}
  .all-list .p{grid-column:2;font-size:18px}
  .all-trips-body{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  .cta-track{animation:none!important}
  .will-reveal{opacity:1;transform:none;transition:none}
  .trip-card,.tc-img img,.review-card{transition:none}
}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
.about-copy p:not(.kicker){color:var(--text-muted);font-size:18px;max-width:60ch}
.about-copy h2{margin-bottom:20px}
.about-placeholder{border:1px dashed rgba(255,255,255,.25);border-radius:var(--radius-sm);padding:14px 18px}
.about-team{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.about-team div{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;display:flex;flex-direction:column;gap:2px}
.about-team strong{font-size:20px}
.about-team span{color:var(--text-muted);font-size:16px}
.about-team a{color:var(--accent);font-weight:700;font-size:18px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
/* Join */
.join-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:28px;padding:56px}
.join-text{color:var(--text-muted);font-size:19px;max-width:56ch}
.join-roles{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.join-roles li{border:1px solid rgba(var(--accent-2-rgb),.45);background:rgba(var(--accent-2-rgb),.08);border-radius:999px;padding:8px 16px;font-size:16px;color:#8c1c29}
.join-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media(max-width:900px){.about-grid,.join-panel{grid-template-columns:1fr}.about-photo img{aspect-ratio:16/10}.join-panel{padding:32px 24px}}
@media(max-width:500px){.about-team{grid-template-columns:1fr}}
/* Nav fits 8 links */
@media(min-width:1051px){.site-header nav{gap:28px}}

/* Traveler photo cards */
.rv-photo{margin:0 0 20px;overflow:hidden;background:#fff;border:1px solid var(--border)}
.rv-photo img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.rv-photo figcaption{padding:12px 16px 14px;font-size:16px;color:var(--text-muted);line-height:1.4}
.rv-photo.wide img{aspect-ratio:4/3}
/* Trip detail: Learn more + Register */
.detail-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.detail-actions .button.learn-link{background:#fff;color:var(--accent);border:1.5px solid rgba(var(--accent-rgb),.5);border-radius:999px;white-space:nowrap}
.detail-actions .button.learn-link:hover{background:rgba(var(--accent-rgb),.08)}
@media(max-width:760px){.detail-actions{flex-direction:column;align-items:stretch}.detail-btns{flex-direction:column}.detail-btns .button{width:100%}.detail-actions p{max-width:none}}
/* All-trips list: year headers + status */
.all-list .year-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 4px 4px;border-bottom:1px solid var(--border);margin-top:6px}
.all-list .year-head:first-child{padding-top:0;margin-top:0}
.all-list .year-head h3{margin:0;font-size:22px;color:var(--accent)}
.all-list .year-head span{color:var(--text-muted);font-size:16px}
.status-chip{display:inline-block;font-style:normal;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-2);background:rgba(var(--accent-2-rgb),.08);border:1px solid rgba(var(--accent-2-rgb),.55);border-radius:999px;padding:2px 10px;margin:6px 0 0 8px;vertical-align:middle}
.status-note{background:rgba(var(--accent-2-rgb),.12);border:1px solid rgba(var(--accent-2-rgb),.45);border-radius:12px;padding:12px 16px;font-size:17px}
.status-note strong{text-transform:uppercase;letter-spacing:.05em;margin-right:6px;color:var(--accent-2)}

/* ===== Multi-page ===== */
main:focus{outline:none}
#main-nav details.is-current>summary{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.page-hero{position:relative;padding-block:120px 72px;background:linear-gradient(0deg,#fff 0%,rgba(13,27,51,.72) 45%,rgba(13,27,51,.4) 100%),var(--hero) center/cover no-repeat;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(40px,6vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;color:#fff;text-wrap:balance}
.page-sub{font-size:19px;color:#e8eefc;max-width:60ch;margin:0}
.page-sub a{color:var(--accent);font-weight:700}
.page .section{padding-block:56px 96px}
.trip-grid-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.badge-status{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.ext-card{text-decoration:none}
.ext-region{color:var(--accent);font-size:16px;font-weight:700;margin:0}
.ext-desc{color:var(--text-muted);font-size:17px;margin:0;line-height:1.55}
.ext-card .tc-cta{margin-top:auto}
.month-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.35);background:#fff;color:var(--accent);font:600 17px var(--font);cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.empty-note{grid-column:1/-1;text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:56px 24px}
.empty-note h3{font-size:26px;margin:0 0 8px}
.empty-note p{color:var(--text-muted);margin:0;font-size:18px}
.empty-note a{color:var(--accent);font-weight:700}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ins-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:36px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:28px;transition:box-shadow .35s,border-color .35s}
.ins-card h2{font-size:clamp(26px,3vw,34px)!important;margin:0!important}
.ins-points{margin:0;padding-left:20px;color:var(--text-muted);display:flex;flex-direction:column;gap:12px;font-size:17px}
.ins-points strong{color:var(--navy)}
.ins-text{color:var(--text-muted);margin:0;font-size:18px}
.ins-card>.btn{align-self:flex-start;margin-top:auto}
.ins-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.ins-note{grid-column:1/-1;text-align:center;color:var(--text-muted);font-size:18px;margin:8px 0 0}
.ins-note a{color:var(--accent);font-weight:700}
@media(max-width:900px){.ins-grid{grid-template-columns:1fr}.ins-card{padding:26px 22px}}
@media(max-width:760px){.page-hero{padding-block:72px 48px}.trip-grid-page{grid-template-columns:1fr}}

/* ===== Our Story: gate + intro video ===== */
.gate{position:fixed;inset:0;height:100dvh;z-index:1000;display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(rgba(6,8,14,.55),rgba(6,8,14,.85)),url('assets/story-poster.webp') center/cover no-repeat}
.gate-inner{max-width:900px;display:flex;flex-direction:column;align-items:center;gap:8px}
.gate h1{font-size:clamp(36px,6.4vw,76px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff;margin:0 0 26px;text-wrap:balance}
.gate-btn{font-size:20px;min-height:64px;padding:18px 34px}
.intro{position:fixed;inset:0;height:100dvh;z-index:100000;background:#000;opacity:1;transition:opacity .6s ease}
.intro.is-out{opacity:0;pointer-events:none}
.intro-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.skip-btn{position:fixed;right:24px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:100001;min-height:56px;padding:14px 26px;border-radius:999px;background:rgba(8,9,14,.92);color:#fff;border:2px solid rgba(255,255,255,.7);font:700 19px var(--font);cursor:pointer;backdrop-filter:blur(6px)}
.skip-btn:hover{background:var(--accent);color:#04122e;border-color:var(--accent)}
.skip-btn:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:760px){.skip-btn{right:16px;bottom:calc(110px + env(safe-area-inset-bottom,0px));font-size:17px;padding:12px 20px}}
/* Portrait phones: the video is 16:9, the screen is not. Show the WHOLE frame
   (letterboxed on black) instead of cropping the sides off. */
@media (orientation:portrait),(max-width:860px){
  .intro{display:flex;align-items:center;justify-content:center}
  .intro-video{width:100%;height:auto;max-height:100dvh;aspect-ratio:16/9;object-fit:contain}
}

/* Story hero */
.story-hero{padding-block:72px 40px;position:relative}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.story-title{font-size:clamp(44px,6vw,76px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 24px;background:linear-gradient(180deg,#0d1b33 30%,#2a4a86);-webkit-background-clip:text;background-clip:text;color:transparent}
.story-lead{font-size:21px;line-height:1.6;color:var(--text-muted);max-width:60ch}
.story-sign{font-size:22px;font-weight:700;color:var(--accent);margin:0 0 26px}
.story-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fb-line{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:18px;text-decoration:none;max-width:52ch;line-height:1.45}
.fb-line:hover{color:var(--accent)}
.fb-line svg{width:30px;height:30px;stroke:var(--accent);flex-shrink:0}
.story-photos{display:grid;gap:16px}
.miki-photo{margin:0}
.miki-photo .ph{border-radius:220px 220px var(--radius) var(--radius);aspect-ratio:4/5;border:1px solid var(--border)}
.miki-photo figcaption{margin-top:12px;color:var(--text-muted);font-size:17px;text-align:center}
.story-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.story-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.scroll-cue{text-align:center;color:var(--text-muted);letter-spacing:.18em;font-size:15px;text-transform:uppercase;margin:44px 0 0}

/* Contacts band */
.contacts-band{padding-block:0 8px}
.contacts-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-card2{display:flex;align-items:center;gap:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px}
.contact-card2 .contact-icon{width:56px;height:56px;border-radius:50%;background:rgba(var(--accent-rgb),.12);color:var(--accent);display:grid;place-items:center;font-size:26px;flex-shrink:0}
.contact-card2 small{display:block;font-size:14px;letter-spacing:.08em;color:var(--text-muted);font-weight:700}
.contact-card2 strong{display:block;font-size:22px}
.contact-card2 a{font-size:24px;font-weight:800;color:var(--accent);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

/* Testimonials */
.tst-slider{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.tst-quote{margin:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:38px 36px;box-shadow:0 10px 30px -22px rgba(13,27,51,.6)}
.tst-quote .qmark{font:800 76px/0.5 Georgia,serif;color:var(--accent);display:block;margin:20px 0 14px}
.tst-quote p{font-size:22px;line-height:1.55;color:#1a2a47;margin:0 0 18px}
.tst-quote cite{font-style:normal;font-weight:800;font-size:19px;color:var(--accent)}
.tst-photo{margin:0;border-radius:230px 230px var(--radius) var(--radius);overflow:hidden;border:1px solid var(--border)}
.tst-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.tst-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px}
.round-btn{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(var(--accent-rgb),.4);background:#fff;color:var(--accent);font-size:24px;cursor:pointer}
.round-btn:hover{border-color:var(--accent);color:var(--accent)}
.round-btn:focus-visible,.tst-dots button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tst-dots{display:flex;gap:10px}
.tst-dots button{width:14px;height:14px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.5);background:transparent;cursor:pointer;padding:0}
.tst-dots button.is-on{background:var(--accent);border-color:var(--accent)}

/* Photo strip */
.strip-section{padding-block:0 96px}
.photo-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.photo-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--border);scroll-snap-align:start}
@media(max-width:900px){
  .story-grid,.tst-slider,.contacts-row{grid-template-columns:1fr}
  .story-hero{padding-block:48px 24px}
  .tst-photo{border-radius:var(--radius)}
  .tst-photo img{aspect-ratio:3/2}
  .miki-photo .ph{border-radius:var(--radius);aspect-ratio:3/4}
  .tst-quote{padding:28px 22px}
  .tst-quote p{font-size:20px}
}

/* Story panel (About hero, laid out like the Ready-To-Ride panel) */
.story-panel{min-height:620px}
.story-panel .cta-copy{padding:56px}
.miki-row{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.miki-shot{width:120px;height:150px;flex:0 0 120px;border-radius:70px 70px 14px 14px;border:1px solid var(--border);overflow:hidden}
.miki-shot::after{font-size:13px}
.miki-row .cta-title{font-size:clamp(34px,3.6vw,50px)!important;margin:0!important}
.miki-role{margin:6px 0 0;color:var(--accent);font-weight:700;font-size:17px}
.story-panel .story-lead{font-size:19px;line-height:1.6;color:var(--text-muted);max-width:52ch;margin:0 0 16px}
.story-panel .cta-actions{margin-top:12px}
.story-panel .cta-call{font-size:18px}
.story-panel .cta-fine{max-width:46ch}
@media(max-width:900px){.story-panel{min-height:0}.story-panel .cta-copy{padding:32px 24px}.miki-shot{width:92px;height:116px;flex-basis:92px}}

/* Horizontal photo marquee on the bus trip pages */
.marquee{overflow:hidden;padding:18px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee var(--dur,60s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:190px;width:260px;object-fit:cover;border-radius:14px;border:1px solid var(--border);flex:0 0 auto}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:760px){.marquee img{height:140px;width:190px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}}
/* Trip details: photos from past trips */
.detail-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:24px}
.detail-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.contact-card2 div{display:flex;flex-direction:column;align-items:flex-start}
.contact-card2 a.mail{display:block;font-size:16px;font-weight:600;word-break:break-all;line-height:1.3;min-height:auto;margin-top:2px}

/* Email list signup */
.email-cta{padding-block:0 96px}
.email-card{background:var(--bg-card);border:1px solid rgba(var(--accent-rgb),.35);border-radius:28px;padding:56px 40px;text-align:center;box-shadow:0 24px 60px -34px rgba(var(--accent-rgb),.8)}
.email-card h2{font-size:clamp(34px,4.5vw,52px)!important;margin:0 0 16px!important;color:var(--navy)}
.email-card p{font-size:21px;line-height:1.55;color:var(--text-muted);max-width:60ch;margin:0 auto 32px}
.email-btn{min-height:68px;font-size:21px;padding:20px 40px}
@media(max-width:760px){.email-card{padding:36px 22px}.email-card p{font-size:19px}.email-btn{width:100%;font-size:19px}}
/* What's included list in the trip window */
.incl-list{margin:0 0 24px;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:17px;color:var(--text)}
.incl-list li{line-height:1.45}
.incl-list li::marker{color:var(--accent)}
.ins-locator{background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);border-radius:12px;padding:14px 18px;font-size:18px;margin:0;color:var(--text)}
.ins-locator strong{color:var(--accent);font-size:20px;letter-spacing:.02em}
.ins-note strong{color:var(--navy)}
.ins-phone{font-size:18px;margin:0;color:var(--text)}
.ins-phone a{font-weight:800;color:var(--accent);text-decoration:none;white-space:nowrap}
.ins-phone a:hover{text-decoration:underline}
/* Travel Insurance hero uses the brand banner */
.ins-hero,.brand-hero{position:relative;isolation:isolate;background:#fff;border-bottom:1px solid var(--border);overflow:hidden}
.ins-hero::before,.brand-hero::before{content:"";position:absolute;inset:0;background:url('assets/banner.webp') center 26%/cover no-repeat;opacity:.42;z-index:-2}
.ins-hero::after,.brand-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.55) 70%,rgba(255,255,255,.35) 100%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 40%);z-index:-1}
.ins-hero-copy,.brand-hero-copy{padding-block:104px 92px;position:relative}
.ins-hero-copy h1,.brand-hero-copy h1{font-size:clamp(40px,5.5vw,66px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;color:var(--navy)}
.ins-hero-sub,.brand-hero-copy .page-sub{color:var(--text-muted)!important;text-shadow:0 1px 0 #fff}
@media(max-width:760px){.ins-hero::before,.brand-hero::before{opacity:.28}.ins-hero::after,.brand-hero::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.88) 60%,rgba(255,255,255,.6) 100%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 45%)}.ins-hero-copy,.brand-hero-copy{padding-block:56px 48px}}

/* ===== LEGAL PAGES (privacy / terms) ===== */
.legal-wrap{padding-top:clamp(28px,6vw,64px)}
.legal{max-width:780px}
.legal h1{font-size:clamp(32px,5vw,46px);margin:.1em 0 .1em}
.legal .legal-updated{color:var(--text-muted);font-size:16px;margin:0 0 28px}
.legal h2{font-size:clamp(21px,2.6vw,26px);margin:38px 0 10px;color:var(--navy)}
.legal p,.legal li{font-size:18px;line-height:1.7;color:var(--text)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 9px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--accent-2)}
.legal strong{color:var(--navy)}
@media(max-width:640px){.legal p,.legal li{font-size:17px}}


/* Landing highlight when you arrive from an insurance link in the menu */
.ins-card.is-target{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22),0 10px 30px rgba(var(--accent-rgb),.13)}
@media(prefers-reduced-motion:reduce){.ins-card{transition:none}}

.site-footer .f-departs{color:var(--text-muted);font-size:15px;margin-top:-6px}

/* International trips that have already travelled: kept on the page, marked Sold Out */
.ext-card.is-departed .tc-img img{filter:grayscale(.6) brightness(.92)}
.ext-card.is-departed .tc-body h3{color:var(--text-muted)}
.ext-card.is-departed .tc-cta{background:transparent;color:var(--text-muted);border:1.5px solid var(--border)}
.badge-past{background:var(--navy);border-color:var(--navy)}

/* Month picker on the register list — same chips as the 2027 trips page */
.all-filter{margin:20px 0 22px;padding:18px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px}
.all-filter-label{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--navy)}
.all-filter .month-filter{margin-bottom:0}
.all-count{margin:14px 0 0;font-size:17px;color:var(--text-muted)}
.all-empty{margin:24px 0 0;font-size:18px;color:var(--text-muted)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--accent-2)}

/* ===== MOBILE MENU: items flow in when the menu opens =====
   A short stagger so the eye is drawn down the list instead of meeting a
   static block of text. Ends with a small settle rather than a hard stop. */
@media(max-width:900px){
  @keyframes navItemIn{
    0%{opacity:0;transform:translateX(-22px)}
    55%{opacity:1;transform:translateX(5px)}
    78%{transform:translateX(-2px)}
    100%{opacity:1;transform:translateX(0)}
  }
  .site-header #main-nav.is-open>a,
  .site-header #main-nav.is-open>details{
    animation:navItemIn .42s cubic-bezier(.34,1.3,.5,1) both;
  }
  .site-header #main-nav.is-open>*:nth-child(1){animation-delay:.03s}
  .site-header #main-nav.is-open>*:nth-child(2){animation-delay:.08s}
  .site-header #main-nav.is-open>*:nth-child(3){animation-delay:.13s}
  .site-header #main-nav.is-open>*:nth-child(4){animation-delay:.18s}
  .site-header #main-nav.is-open>*:nth-child(5){animation-delay:.23s}
  .site-header #main-nav.is-open>*:nth-child(6){animation-delay:.28s}
  .site-header #main-nav.is-open>*:nth-child(7){animation-delay:.33s}
  .site-header #main-nav.is-open>*:nth-child(8){animation-delay:.38s}
  .site-header #main-nav.is-open>*:nth-child(9){animation-delay:.43s}
  .site-header #main-nav.is-open>*:nth-child(10){animation-delay:.48s}
  /* the links inside an open dropdown get the same treatment */
  .site-header #main-nav details[open] .nav-dropdown-panel a{
    animation:navItemIn .34s cubic-bezier(.34,1.3,.5,1) both;
  }
  .site-header #main-nav details[open] .nav-dropdown-panel a:nth-child(1){animation-delay:.02s}
  .site-header #main-nav details[open] .nav-dropdown-panel a:nth-child(2){animation-delay:.07s}
  .site-header #main-nav details[open] .nav-dropdown-panel a:nth-child(3){animation-delay:.12s}
}
@media(prefers-reduced-motion:reduce){
  .site-header #main-nav.is-open>a,
  .site-header #main-nav.is-open>details,
  .site-header #main-nav details[open] .nav-dropdown-panel a{animation:none}
}

/* ===== ASSOCIATION LOGOS (footer) ===== */
.assoc-row{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 0 8px;border-top:1px solid var(--border);margin-top:34px}
.assoc-label{margin:0;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text-muted)}
.assoc-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px}
.assoc-logos img{height:58px;width:auto;object-fit:contain}
@media(max-width:560px){.assoc-logos{gap:22px}.assoc-logos img{height:46px}}
/* In the footer they sit under Miki's logo, so they line up left with it
   instead of centring across the page. */
.f-brand .assoc-row{align-items:flex-start;border-top:0;margin-top:2px;padding:0;gap:8px}
.f-brand .assoc-label{font-size:13px}
.f-brand .assoc-logos{justify-content:flex-start;gap:16px}
.f-brand .assoc-logos img{height:44px}
@media(max-width:1050px){.f-brand .assoc-logos img{height:46px}}

/* ===== FAQ PAGE ===== */
.faq-tabs{margin-bottom:22px}
.faq-intro{font-size:19px;color:var(--text-muted);max-width:70ch;margin:0 0 26px}
.faq-items{display:flex;flex-direction:column;gap:12px;max-width:900px}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:rgba(var(--accent-rgb),.5);box-shadow:0 8px 26px rgba(var(--accent-rgb),.1)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;font-size:19px;font-weight:700;color:var(--navy);min-height:64px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.faq-mark{position:relative;flex-shrink:0;width:22px;height:22px}
.faq-mark::before,.faq-mark::after{content:'';position:absolute;background:var(--accent);border-radius:2px;transition:transform .25s}
.faq-mark::before{top:9px;left:0;width:22px;height:4px}
.faq-mark::after{left:9px;top:0;width:4px;height:22px}
.faq-item[open] .faq-mark::after{transform:scaleY(0)}
.faq-a{padding:0 22px 22px;max-width:75ch}
.faq-a p{margin:0;font-size:18px;line-height:1.7;color:var(--text)}
/* longer answers are written as several paragraphs; the last one keeps
   margin:0 so the panel padding stays even */
.faq-a p+p{margin-top:15px}
.terms-doc{max-width:80ch;max-height:70vh;overflow-y:auto;padding:26px 28px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px}
.terms-doc p{font-size:16px;line-height:1.72;color:var(--text);margin:0 0 15px}
.terms-doc p:first-child{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:20px}
@media(max-width:640px){.faq-item summary{font-size:17px;padding:17px 18px}.faq-a p{font-size:17px}.terms-doc{padding:18px 16px;max-height:60vh}}

/* ===== FIND MY TRIP ===== */
.steps-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 34px;max-width:900px;margin-inline:auto}
.steps-row li{display:flex;gap:16px;align-items:flex-start}
.step-n{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:19px;color:var(--accent);background:#fff;border:2px solid rgba(var(--accent-rgb),.45);box-shadow:0 0 0 5px rgba(var(--accent-rgb),.09)}
.steps-row h3{margin:6px 0 2px;font-size:19px;color:var(--navy)}
.steps-row p{margin:0;font-size:16px;color:var(--text-muted)}
@media(max-width:700px){.steps-row{grid-template-columns:1fr}}

.quiz-section{background:var(--bg-card);border-block:1px solid var(--border)}
.quiz-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;max-width:820px;margin-inline:auto;box-shadow:0 14px 44px rgba(13,27,51,.07)}
.quiz-progress{height:8px;border-radius:999px;background:rgba(var(--accent-rgb),.14);overflow:hidden;margin-bottom:20px}
.quiz-progress span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .35s cubic-bezier(.22,1,.36,1)}
.quiz-step{margin:0 0 6px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--text-muted)}
.quiz-q{margin:0 0 22px;font-size:clamp(23px,3vw,30px);color:var(--navy);line-height:1.25}
.quiz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.quiz-opt{text-align:left;background:var(--bg-card);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;min-height:76px;cursor:pointer;font:inherit;color:var(--text);display:flex;flex-direction:column;gap:4px;transition:border-color .2s,box-shadow .2s,transform .2s}
.quiz-opt strong{font-size:19px;color:var(--navy)}
.quiz-opt small{font-size:15px;color:var(--text-muted)}
.quiz-opt:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--accent-rgb),.15)}
.quiz-opt.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.quiz-opt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.quiz-nav{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}
.quiz-results{margin-top:10px}
.quiz-again{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:30px}
@media(max-width:700px){.quiz-opts{grid-template-columns:1fr}.quiz-card{padding:22px 18px}}

.path-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.path-row li{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:30px 26px 26px;overflow:hidden}
.path-n{position:absolute;top:6px;right:16px;font-size:74px;font-weight:800;line-height:1;color:rgba(var(--accent-rgb),.09)}
.path-row h3{margin:0 0 10px;font-size:24px;color:var(--navy);position:relative}
.path-row p{font-size:17px;color:var(--text-muted);margin:0 0 20px;position:relative}
@media(max-width:900px){.path-row{grid-template-columns:1fr}}

/* ===== BUTTON RINGS + HOVER GLOW ===== */
.btn,.quiz-opt,.chip,.round-btn,.f-link{position:relative}
.btn{border-radius:999px;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10);transition:box-shadow .28s,transform .2s,background .2s,color .2s}
.btn:hover{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.18),0 12px 34px rgba(var(--accent-rgb),.30);transform:translateY(-2px)}
.btn-accent:hover{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.22),0 14px 40px rgba(var(--accent-rgb),.42)}
.btn-white{box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.btn-white:hover{box-shadow:0 0 0 6px rgba(255,255,255,.34),0 14px 40px rgba(0,0,0,.28)}
.chip{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07);transition:box-shadow .25s,border-color .2s,transform .2s}
.chip:hover{box-shadow:0 0 0 5px rgba(var(--accent-rgb),.16),0 8px 22px rgba(var(--accent-rgb),.20);transform:translateY(-1px)}
.chip.is-on{box-shadow:0 0 0 5px rgba(var(--accent-rgb),.20),0 8px 24px rgba(var(--accent-rgb),.28)}
.round-btn{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.10);transition:box-shadow .25s,transform .2s}
.round-btn:hover{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.20),0 10px 26px rgba(var(--accent-rgb),.26);transform:translateY(-1px)}
.trip-card{transition:transform .22s,box-shadow .22s,border-color .22s}
.trip-card:hover{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14),0 18px 44px rgba(13,27,51,.16)}
@media(prefers-reduced-motion:reduce){.btn:hover,.chip:hover,.round-btn:hover,.quiz-opt:hover,.trip-card:hover{transform:none}}

/* ===== HOME VIDEO: richer colour ===== */
.hero-video{filter:saturate(1.28) contrast(1.10) brightness(1.04)}

/* ===== WHO IT'S FOR band (home) ===== */
.welcome-band{background:var(--bg-card);border-block:1px solid var(--border)}
.welcome-inner{max-width:830px;margin-inline:auto;text-align:center}
.welcome-inner h2{font-size:clamp(27px,3.6vw,40px);color:var(--navy);margin:0 0 16px;text-wrap:balance}
.welcome-text{font-size:19px;line-height:1.72;color:var(--text-muted);margin:0 0 24px}
.welcome-text strong{color:var(--navy)}
/* A plain red line under the headline - not a button, so it reads as a
   welcome rather than one more thing to click. It breathes: the glow is a
   text-shadow rather than a blurred copy of the words, so the letters
   themselves stay perfectly sharp at every point in the cycle. */
.welcome-join{color:var(--accent-2);font-weight:800;font-size:clamp(21px,2.4vw,28px);line-height:1.3;letter-spacing:-.01em;margin:0 0 22px;
  will-change:transform,text-shadow;animation:join-breathe 3.4s ease-in-out infinite}
@keyframes join-breathe{
  0%,100%{transform:scale(1);
    text-shadow:0 0 7px rgba(var(--accent-2-rgb),.22), 0 0 16px rgba(var(--accent-2-rgb),.10)}
  50%{transform:scale(1.025);
    text-shadow:0 0 11px rgba(var(--accent-2-rgb),.50), 0 0 28px rgba(var(--accent-2-rgb),.26)}
}
/* Still glows when motion is turned down - it just holds steady. */
@media(prefers-reduced-motion:reduce){
  .welcome-join{animation:none;text-shadow:0 0 10px rgba(var(--accent-2-rgb),.35)}
}
@media(max-width:640px){.welcome-text{font-size:18px}}

/* Six nav items — a little tighter on smaller laptops */
@media(min-width:901px) and (max-width:1200px){
  .site-header #main-nav{gap:26px;font-size:16px}
}

.rv-hint{display:block;text-align:center;font-size:15px;color:var(--text-muted);margin:2px 0 0}
/* ===== TRAVELLING GLOW: colours run around the edge of the main CTAs ===== */
@property --glow-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.btn-glow{position:relative;isolation:isolate}
.btn-glow::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;pointer-events:none;
  background:conic-gradient(from var(--glow-a),
    rgba(var(--accent-rgb),0) 0deg,
    var(--accent) 45deg,
    #7fb0ff 80deg,
    var(--accent-2) 130deg,
    rgba(var(--accent-rgb),0) 190deg,
    rgba(var(--accent-rgb),0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:glowRun 4.5s linear infinite;
  z-index:1;
}
/* a soft bloom that follows the same sweep */
.btn-glow::after{
  content:"";position:absolute;inset:-7px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--glow-a),
    transparent 0deg, rgba(var(--accent-rgb),.55) 60deg,
    rgba(217,43,61,.45) 130deg, transparent 200deg, transparent 360deg);
  filter:blur(10px);opacity:.75;
  animation:glowRun 4.5s linear infinite;
}
@keyframes glowRun{to{--glow-a:360deg}}
.btn-glow:hover::after{opacity:1;inset:-9px}
/* on white buttons the ring needs to read against a light face */
.btn-white.btn-glow::before{padding:3px}
@media(prefers-reduced-motion:reduce){
  .btn-glow::before,.btn-glow::after{animation:none}
}

/* ===== REVIEW WALL: even squares instead of a ragged masonry ===== */
/* One horizontal slider at every width: four squares on a desktop, two on a
   tablet, one on a phone. Arrows step it; the scrollbar itself stays hidden. */
.rv-wrap{position:relative}
.masonry{columns:auto!important;column-gap:22px;display:flex;flex-wrap:nowrap;align-items:stretch;
  gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;
  padding:6px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.masonry::-webkit-scrollbar{display:none}
.masonry>.review-card{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start}
/* the slider is one block on screen, so don't let the fade-in hide the cards
   that are simply parked off to the right */
.masonry .review-card.will-reveal{opacity:1;transform:none}
.rv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:54px;height:54px;border-radius:50%;border:1px solid var(--border);
  background:rgba(255,255,255,.96);color:var(--navy);font-size:24px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(13,27,51,.45);
  transition:transform .2s,box-shadow .2s,background .2s}
.rv-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.07);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15),0 14px 30px -12px rgba(13,27,51,.5)}
.rv-prev{left:-66px}
.rv-next{right:-66px}
/* once the window stops leaving room beside the container, the arrows tuck
   back over the edge of the slider instead of hanging off the page */
@media(max-width:1400px){.rv-prev{left:-10px}.rv-next{right:-10px}}
.masonry .review-card{margin:0;aspect-ratio:1/1;position:relative;overflow:hidden;border-radius:20px;
  display:flex;flex-direction:column;break-inside:auto;
  box-shadow:0 10px 30px -22px rgba(13,27,51,.7);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s}
.masonry .review-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);}
.masonry .review-card:hover{transform:translateY(-6px);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.13),0 22px 46px -20px rgba(13,27,51,.5)}

/* written reviews */
.masonry .rv-text{background:linear-gradient(160deg,#fff 0%,#fff 55%,rgba(var(--accent-rgb),.07) 100%);
  border:1px solid var(--border);padding:24px 24px 20px;justify-content:flex-start}
.masonry .rv-text .rv-top{margin-bottom:10px}
.masonry .rv-text .avatar{width:44px;height:44px;font-size:16px}
.masonry .rv-text .rv-name{font-size:17px}
.masonry .rv-text .rv-trip{font-size:14px}
.masonry .rv-text .stars{font-size:19px}
.masonry .rv-body{font-size:16px;line-height:1.55;margin:10px 0 12px;
  flex:1 1 auto;min-height:0;overflow:hidden}
.masonry .rv-text .verified{font-size:14px;margin-top:10px}

/* short pull-quotes */
.masonry .rv-quote{background:linear-gradient(155deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.04) 60%,#fff);
  border:1px solid rgba(var(--accent-rgb),.4);padding:26px 24px;justify-content:center;text-align:center;align-items:center}
.masonry .rv-quote .qmark{font:800 64px/0.5 Georgia,serif;color:var(--accent);margin:0 0 14px}
.masonry .rv-quote p{font-size:20px;line-height:1.4;font-weight:700;color:var(--navy);margin:0 0 12px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.masonry .rv-quote .rv-trip{color:var(--text-muted)}

/* photos fill the square, caption sits on the image */
.masonry .rv-photo{padding:0;border:1px solid var(--border);background:#0d1b33}
.masonry .rv-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block}
.masonry .rv-photo figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 18px 16px;
  color:#fff;font-size:15px;line-height:1.35;
  background:linear-gradient(transparent,rgba(5,14,32,.85))}

@media(max-width:1050px){.masonry>.review-card{flex:0 0 calc((100% - 22px)/2)}}
@media(max-width:760px){
  .masonry{gap:16px;margin-inline:-16px;padding:4px 16px 14px}
  .masonry>.review-card{flex:0 0 78vw;max-width:340px;aspect-ratio:1/1;scroll-snap-align:center}
  .rv-arrow{width:44px;height:44px;font-size:20px}
  .rv-prev{left:-2px}.rv-next{right:-2px}
}

/* ===== SIGN-UP FORMS =====
   One set of rules for three placements: the big card on the home page, a
   compact pair-of-fields version on the About page, and a narrow column in
   the footer. Fields are deliberately large — this audience is 50+ and
   mostly on phones, so 16px minimum (which also stops iOS zooming on focus)
   and generous tap targets. */
.signup{display:flex;flex-direction:column;gap:14px;text-align:left;margin:22px auto 0;max-width:560px;width:100%}
.signup .su-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.signup .su-row{grid-template-columns:1fr}}

.su-field{display:flex;flex-direction:column;gap:6px}
.su-field>span{font:600 15px/1.2 var(--font);color:var(--navy);letter-spacing:.01em}
.su-field>span em{font-style:normal;font-weight:500;color:var(--text-muted)}
.su-field input{font:400 17px/1.3 var(--font);color:var(--navy);background:#fff;
  border:2px solid rgba(13,27,51,.18);border-radius:12px;padding:14px 16px;min-height:54px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease}
.su-field input::placeholder{color:rgba(13,27,51,.38)}
.su-field input:hover{border-color:rgba(13,27,51,.32)}
.su-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.su-field input[aria-invalid="true"]{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.14)}

/* The consent tick-box is the legal record, so it gets room to breathe and is
   never pre-ticked. */
.su-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font:400 15px/1.45 var(--font);color:var(--text-muted);padding:2px 0}
.su-check input{appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px;height:24px;margin:0;
  border:2px solid rgba(13,27,51,.28);border-radius:7px;background:#fff;cursor:pointer;position:relative;
  transition:background .14s ease,border-color .14s ease}
.su-check input:checked{background:var(--accent);border-color:var(--accent)}
.su-check input:checked::after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.su-check input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.su-submit{align-self:flex-start;min-height:56px}
.su-submit[disabled]{opacity:.6;cursor:progress}
.su-fine{font:400 13.5px/1.5 var(--font);color:var(--text-muted);margin:0}
.su-lead{font:600 17px/1.4 var(--font);color:var(--navy);margin:0 0 4px}

/* Honeypot — off-screen for people, irresistible to bots. */
.su-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

.su-msg{margin:0;font:600 15px/1.45 var(--font);min-height:0}
.su-msg:empty{display:none}
.su-msg.is-ok{color:#0d7a4f}
.su-msg.is-err{color:#c0392b}

/* About page: the story panel is light, so the form keeps the normal
   navy-on-white treatment and simply sits wider in the column. */
.signup-compact{max-width:none;margin-top:18px}
.signup-compact .su-lead{color:var(--navy)}

/* Footer column */
.f-signup h3{margin-bottom:12px}
.signup-footer{gap:10px;max-width:none;margin:0}
.signup-footer .su-field input{min-height:48px;padding:12px 14px;font-size:16px}
.signup-footer .su-check{font-size:13.5px;color:var(--text-muted)}
.signup-footer .su-check input{flex-basis:20px;width:20px;height:20px;border-radius:6px}
.signup-footer .su-check input:checked::after{left:5px;top:1px;width:5px;height:10px;border-width:0 2.5px 2.5px 0}
.signup-footer .su-submit{min-height:48px;width:100%}
.signup-footer .su-msg{font-size:14px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== JOURNEY GRAPH — the glowing red path across the trip types =====
   The curve is one SVG stretched to the width of the band; the three stop
   cards step up to meet it, so each dot sits on the line at any screen size. */
.journey-band{background:linear-gradient(160deg,#0b1730 0%,#122a55 55%,#0d1b33 100%);color:#fff}
.journey-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 78% 10%,rgba(var(--accent-2-rgb),.30),transparent 70%),
             radial-gradient(45% 45% at 8% 92%,rgba(var(--accent-rgb),.26),transparent 72%)}
.journey-band h2{color:#fff}
.journey-band .kicker{color:#ff8d96;-webkit-text-stroke:0;text-shadow:0 0 18px rgba(255,67,81,.6)}
.journey{position:relative;margin-top:26px}
.journey-line{position:absolute;left:0;top:0;width:100%;height:210px;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(255,67,81,.95)) drop-shadow(0 0 18px rgba(255,67,81,.65)) drop-shadow(0 0 40px rgba(255,67,81,.35))}
.journey-stops{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.journey .stop{position:relative;padding:44px 26px 28px;border-radius:20px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(2px)}
.journey .stop-1{margin-top:196px}
.journey .stop-2{margin-top:104px}
.journey .stop-3{margin-top:14px}
.journey .stop-dot{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;background:#ff4351;border:3px solid #fff2f3;
  box-shadow:0 0 0 6px rgba(255,67,81,.22),0 0 18px 4px rgba(255,67,81,.85)}
.journey .stop-n{display:block;font:800 15px/1 var(--font);letter-spacing:.18em;color:#ff8d96;margin-bottom:10px}
.journey .stop h3{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 10px;color:#fff}
.journey .stop p{margin:0 0 20px;color:rgba(255,255,255,.82);font-size:17px;line-height:1.55}
.journey .stop .btn-outline{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.journey .stop .btn-outline:hover{background:#fff;color:var(--navy);border-color:#fff}
@media(max-width:860px){
  /* the curve becomes a straight glowing rail down the left of the stops */
  .journey-line{display:none}
  .journey-stops{grid-template-columns:1fr;gap:18px;padding-left:26px}
  .journey-stops::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:3px;border-radius:3px;
    background:linear-gradient(#ff4351,rgba(255,67,81,.35));
    box-shadow:0 0 8px rgba(255,67,81,.9),0 0 22px rgba(255,67,81,.5)}
  .journey .stop{margin-top:0!important;padding:26px 20px}
  .journey .stop-dot{top:30px;left:-26px;transform:none;width:18px;height:18px}
}

/* ===== ALL TRIPS PAGE: four stacked filter rows ===== */
.all-filters{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px 8px;margin-bottom:34px}
.all-filters .filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.all-filters .month-filter{margin-bottom:0}
.all-filters [data-filter="month"]{flex:1 1 100%;padding-left:146px}
@media(max-width:760px){.all-filters [data-filter="month"]{padding-left:0}}
.filter-label{font:800 15px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);flex:0 0 130px}
.filter-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--border);margin-top:4px;padding:14px 0 16px}
.filter-foot p{margin:0;font-weight:700;color:var(--navy)}
@media(max-width:760px){
  .all-filters{padding:18px 16px 6px}
  .filter-label{flex:1 0 100%}
}

/* ===== FIRST-VISIT SIGN-UP POPUP ===== */
.signup-pop{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;
  border-radius:24px;overflow:visible}
.signup-pop::backdrop{background:rgba(6,14,30,.62);backdrop-filter:blur(3px)}
.signup-pop .sp-body{position:relative;background:#fff;border-radius:24px;padding:34px 34px 26px;
  box-shadow:0 40px 90px -30px rgba(6,14,30,.6);
  max-height:88vh;overflow:auto}
.signup-pop .sp-body::before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0,rgba(var(--accent-rgb),.10),transparent 70%),
             radial-gradient(60% 50% at 0 100%,rgba(var(--accent-2-rgb),.10),transparent 70%)}
.signup-pop .sp-body>*{position:relative}
.signup-pop h2{font-size:clamp(28px,5vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;color:var(--navy)}
.signup-pop .kicker{-webkit-text-stroke:0;text-shadow:none;margin-bottom:8px}
.signup-pop .sp-sub{margin:0;color:var(--text-muted);font-size:17px;line-height:1.5}
.signup-pop .signup{margin-top:18px}
.signup-pop .close-button{position:absolute;top:10px;right:12px;z-index:3}
.signup-pop .sp-later{display:block;margin:16px auto 0;color:var(--text-muted);font-size:15px}
.signup-pop[open]{animation:sp-in .35s cubic-bezier(.22,1,.36,1)}
.signup-pop.no-anim[open]{animation:none}
@keyframes sp-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:560px){.signup-pop .sp-body{padding:28px 20px 22px}}
.signup-pop .sp-body:focus,.signup-pop .sp-body:focus-visible{outline:none}

/* ===== "HOW DID YOU HEAR ABOUT US?" =====
   Click-only chips so nobody on a phone has to type. Picking "Other" opens
   a single text box; picking anything else closes it again. */
.su-heard{border:0;margin:4px 0 2px;padding:0;min-width:0}
.su-heard legend{padding:0;margin:0 0 10px;font:600 15px/1.2 var(--font);color:var(--navy);letter-spacing:.01em}
.su-heard legend em{font-style:normal;font-weight:500;color:var(--text-muted);font-size:14px}
.su-chips{display:flex;flex-wrap:wrap;gap:10px}
.su-chip{position:relative}
.su-chip input{position:absolute;opacity:0;width:0;height:0}
.su-chip span{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;
  border-radius:999px;border:1px solid rgba(var(--accent-rgb),.35);background:#fff;color:var(--accent);
  font:600 16px/1.2 var(--font);cursor:pointer;user-select:none;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07);
  transition:background .2s,color .2s,border-color .2s,box-shadow .25s,transform .2s}
.su-chip span:hover{transform:translateY(-1px);border-color:var(--accent)}
.su-chip input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 5px rgba(var(--accent-rgb),.20),0 8px 24px rgba(var(--accent-rgb),.28)}
.su-chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.su-heard-other{margin-top:12px}
.su-heard+.su-hp+.su-submit,.su-heard+.su-submit{margin-top:4px}
.su-heard-other[hidden]{display:none}
/* the compact and footer placements get a slightly tighter chip */
.signup-compact .su-chip span{min-height:42px;padding:9px 15px;font-size:15px}
@media(max-width:560px){.su-chips{gap:8px}.su-chip span{padding:9px 15px;font-size:15px}}

/* ===== BANNER DRIFT =====
   The hero banner breathes very slowly — a 50s pan-and-zoom so the page feels
   alive without anything moving fast enough to pull the eye off the heading.
   The ::before is oversized so the zoom never exposes an edge, and the whole
   thing is off for anyone who asks for reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .ins-hero::before,.brand-hero::before{
    inset:-7%;
    animation:banner-drift 50s ease-in-out infinite alternate;
    will-change:transform;
    transform-origin:60% 40%;
  }
}
@keyframes banner-drift{
  from{transform:scale(1.01) translate3d(-1%,.4%,0)}
  to{transform:scale(1.08) translate3d(1.4%,-1%,0)}
}

/* ===== BANNER VEHICLE =====
   Each hero gets the vehicle that matches its page — a ship on the cruise
   pages, a plane on the international ones, none on the bus-trip pages. It
   sits above the white veil but under the heading, so it reads as part of the
   artwork. Same reduced-motion rule as the drift: motion turned down, no
   vehicle at all. The plane climbs; the ship travels level, lower in the
   band. */
.hero-vehicle{display:none}
@media (prefers-reduced-motion: no-preference){
  .hero-vehicle{display:block;position:absolute;z-index:0;left:-16%;
    color:var(--accent);opacity:.5;pointer-events:none}
  .hero-vehicle svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;
    stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}

  .hero-vehicle.is-plane{width:38px;top:32%;animation:hero-fly 18s linear infinite}
  .hero-vehicle.is-plane svg{transform:rotate(45deg)}

  .hero-vehicle.is-ship{width:56px;top:auto;bottom:11%;animation:hero-sail 30s linear infinite}
  .hero-vehicle.is-ship svg{animation:hero-bob 3.4s ease-in-out infinite}

  @keyframes hero-fly{from{left:-14%;top:32%}to{left:114%;top:12%}}
  @keyframes hero-sail{from{left:-18%}to{left:118%}}
  @keyframes hero-bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-2.5px) rotate(1.2deg)}}

  /* the copy wraps to more lines on a phone, so the ship rides right along
     the bottom edge instead of cutting through the paragraph */
  @media(max-width:760px){
    .hero-vehicle{opacity:.42}
    .hero-vehicle.is-plane{width:28px;top:14%}
    .hero-vehicle.is-ship{width:42px;bottom:3%}
    @keyframes hero-fly{from{left:-14%;top:18%}to{left:114%;top:6%}}
  }
}

/* ===== TOUR OPERATOR BADGE =====
   A mirror of the status ribbon on the other side of the photo: status points
   right from the left edge, operator points left from the right edge. White
   plate so both operators' logos sit on the background they were drawn for;
   a drop-shadow rather than a box-shadow, because clip-path crops one. */
.badge-operator{position:absolute;top:16px;right:0;display:flex;align-items:center;
  background:#fff;padding:7px 14px 7px 22px;
  clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);
  filter:drop-shadow(0 7px 16px rgba(13,27,51,.4))}
.badge-operator img{display:block;width:auto;height:auto;max-height:21px;max-width:104px}
@media(max-width:560px){
  .badge-operator{top:12px;padding:6px 10px 6px 18px}
  .badge-operator img{max-height:17px;max-width:84px}
}

/* ===== THE TRAVELER ON THE NAV BAR =====
   Miki's traveler sitting on the top edge of the nav bar with her speech
   bubble, legs dangling over the navy. --seat is how far down the artwork her
   hips are, so the bottom offset below puts that line on the top edge of the
   bar whatever height she is given. She needs real empty space right of the
   last link, so she only appears on wide screens; below that the nav collapses
   to a menu button and she would land on it.

   Hover and she waves. Two drawings of the same pose are stacked and swapped -
   the second was drawn with her arm already raised, so the arm really comes up
   instead of being bent out of a flat image, which leaves no seam behind it.
   Both frames share one crop and one size, so everything but the arm sits
   still through the fade. */
.nav-shell{position:relative}
/* Miki rides the nav bar at every width. On a phone she is smaller and sits
   to the right of the Menu button; taps pass straight through her so she
   can never swallow a tap meant for the bar. The wave is a hover frame, so
   it only exists on a pointer device. */
.nav-miki{--h:104px;--bar:58px;--seat:.609;
  display:block;position:absolute;right:10px;z-index:3;
  height:var(--h);pointer-events:none;
  bottom:calc(var(--bar) - var(--h) * (1 - var(--seat)));
  filter:drop-shadow(0 5px 10px rgba(13,27,51,.22));
  transform-origin:52% 94%;transition:transform .25s ease-out}
.nav-miki img{display:block;height:100%;width:auto}
.nav-miki .nm-wave{display:none}
@media(min-width:520px){.nav-miki{--h:124px;right:16px}}
@media(min-width:900px){.nav-miki{--h:150px;right:22px}}
@media(min-width:1240px){
  .nav-miki{pointer-events:auto}
  .nav-miki .nm-wave{display:block}
  .nav-miki{--h:190px;--bar:64px;--seat:.609;
    display:block;position:absolute;right:30px;z-index:3;
    height:var(--h);
    bottom:calc(var(--bar) - var(--h) * (1 - var(--seat)));
    filter:drop-shadow(0 6px 12px rgba(13,27,51,.22));
    transform-origin:52% 94%;
    transition:transform .25s ease-out}
  .nav-miki img{display:block;height:100%;width:auto;transition:opacity .18s ease-out}
  .nav-miki .nm-wave{position:absolute;top:0;left:0;opacity:0}
  .nav-miki:hover .nm-wave{opacity:1}
  .nav-miki:hover .nm-rest{opacity:0}

  /* the lift is motion, so it goes; the arm coming up is the greeting and
     stays either way */
  @media (prefers-reduced-motion: no-preference){
    .nav-miki:hover{transform:translateY(-4px) rotate(-2deg)}
  }
}
@media(min-width:1240px) and (max-width:1420px){
  .nav-miki{--h:172px;right:20px}
}

/* bullet lists inside an FAQ answer */
.faq-list-items{margin:14px 0 0;padding-left:22px;font-size:18px;line-height:1.7;color:var(--text)}
.faq-list-items li{margin-bottom:8px}
.faq-list-items li:last-child{margin-bottom:0}
.faq-a p+.faq-list-items{margin-top:12px}
.faq-a .faq-list-items+p{margin-top:15px}
@media(max-width:640px){.faq-list-items{font-size:17px}}

/* ===== MIKI'S PACKING LIST =====
   Affiliate cards. Amazon's operating agreement only permits product photos
   served through their Product Advertising API, so every card carries a drawn
   icon on a tinted plate instead - one tint per category, so the grid reads
   as groups at a glance even before you get to the labels. */
/* The affiliate disclosure rides at the end of the filter row: small and out
   of the way, but still directly above the first product card. It stays there
   rather than in a page corner because the FTC asks for the disclosure to be
   near the links it describes, and Amazon can close an account over a buried
   one. Small is fine. Far away is not. */
.pack-bar{display:flex;align-items:center;justify-content:space-between;gap:18px 26px;
  flex-wrap:wrap;margin-bottom:26px}
.pack-bar .month-filter{margin-bottom:0}
.pack-note{font-size:13.5px;line-height:1.5;color:var(--text-muted);margin:0;
  max-width:330px;text-align:right}
@media(max-width:860px){
  .pack-bar{align-items:flex-start}
  .pack-note{text-align:left;max-width:none}
}
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pack-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.pack-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(13,27,51,.5)}
.pack-tile{display:grid;place-items:center;height:148px;background:#eef3fb;color:var(--accent)}
.pack-tile svg{width:64px;height:64px;stroke-width:1.35}
.pack-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.pack-cat{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 8px}
.pack-card h3{font-size:22px;margin:0 0 10px;line-height:1.25}
.pack-why{font-size:16px;color:var(--text-muted);margin:0 0 20px}
/* An item can carry two links: the one Miki actually uses, and a cheaper
   stand-in. The budget one is outlined rather than filled so the pick still
   reads as the recommendation. */
.pack-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:auto}
.pack-cta{min-height:50px;padding:13px 24px;font-size:16px}
.pack-alt{min-height:44px;padding:10px 20px;font-size:15px}
.pack-foot{font-size:14px;color:var(--text-muted);margin:30px 0 0;max-width:760px}

/* one tint per category */
.pack-card[data-cat="bus"] .pack-tile{background:#e9f1fd;color:#1667d8}
.pack-card[data-cat="luggage"] .pack-tile{background:#fdebed;color:#c22234}
.pack-card[data-cat="comfort"] .pack-tile{background:#e3f3f0;color:#0d8a7a}
.pack-card[data-cat="hotel"] .pack-tile{background:#f3eefb;color:#5b3fa8}
.pack-card[data-cat="tech"] .pack-tile{background:#e9edf7;color:#173a7a}
.pack-card[data-cat="daytrips"] .pack-tile{background:#fbf1de;color:#96640a}

@media(max-width:1000px){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:620px){
  .pack-grid{grid-template-columns:1fr}
  .pack-tile{height:124px}
  .pack-tile svg{width:54px;height:54px}
  .pack-body{padding:20px}
  .pack-ctas{align-self:stretch}
  .pack-ctas .btn{width:100%}
}

/* bullet lists inside an FAQ answer */
.faq-list-items{margin:14px 0 0;padding-left:22px;font-size:18px;line-height:1.7;color:var(--text)}
.faq-list-items li{margin-bottom:8px}
.faq-list-items li:last-child{margin-bottom:0}
.faq-a p+.faq-list-items{margin-top:12px}
.faq-a .faq-list-items+p{margin-top:15px}
@media(max-width:640px){.faq-list-items{font-size:17px}}

/* ---- FAQ search + sub-filter ---------------------------------------- */
.faq-search{position:relative;max-width:560px;margin:0 0 18px}
.faq-search input{width:100%;box-sizing:border-box;
  padding:14px 44px 14px 46px;font:inherit;font-size:18px;color:var(--text);
  background:#fff;border:2px solid #d8e0ec;border-radius:999px;
  transition:border-color .15s ease, box-shadow .15s ease}
.faq-search input::placeholder{color:#8695aa}
.faq-search input:focus{outline:none;border-color:var(--brand,#1f5fa9);
  box-shadow:0 0 0 4px rgba(31,95,169,.14)}
.faq-search input::-webkit-search-decoration,
.faq-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.faq-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;fill:none;stroke:#8695aa;stroke-width:2;
  stroke-linecap:round;pointer-events:none}
#faq-q-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;line-height:1;font-size:24px;color:#6b7a90;
  background:none;border:0;border-radius:50%;cursor:pointer}
#faq-q-clear:hover{background:#eef2f7;color:var(--text)}

.faq-subtabs{margin-top:10px}
.faq-subtabs .chip{font-size:16px;padding:8px 16px}

.faq-count{margin:0 0 14px;font-size:17px;color:#5a6a80}

.faq-where{display:inline-block;margin-left:10px;padding:2px 10px;
  font-size:13px;font-style:normal;font-weight:600;letter-spacing:.02em;
  color:#45587a;background:#eef2f8;border-radius:999px;white-space:nowrap}

@media(max-width:640px){
  .faq-search input{font-size:17px;padding:13px 40px 13px 42px}
  .faq-subtabs .chip{font-size:15px;padding:7px 13px}
  .faq-where{display:none}
}

/* A phone number split across two lines reads as two numbers. Never wrap one.
   Email addresses are long enough that forcing them onto one line would
   overflow a narrow screen, so they are allowed to break at the @ instead. */
a[href^="tel:"]{white-space:nowrap}

/* "Call" and "Email" stay glued to the thing they label. On a phone each sits
   on its own line so a wrap can never separate the word from the number. */
.faq-contact{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:19px;line-height:1.5}
.faq-contact a{white-space:nowrap;font-weight:700;text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:1px}
.faq-contact .fc-label{font-weight:600;opacity:.75}
@media(max-width:640px){
  .faq-contact{flex-direction:column;gap:8px;font-size:18px}
  .faq-contact a{white-space:normal}
  .faq-contact a[href^="tel:"]{white-space:nowrap}
}

/* ===== TRIP LEADER APPLICATION =====
   Shares the sign-up field styling, with textareas added and a single column
   that stays comfortable to read and tap at any width. */
.leader-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:28px;padding:48px 56px;max-width:760px;margin-inline:auto}
.leader-panel h2{color:var(--navy);margin:0 0 10px}
.leader-lead{color:var(--text-muted);font-size:18px;margin:0 0 28px}
.leader-form{display:flex;flex-direction:column;gap:24px}

/* The hint sits between the question and the box it explains. */
.lf-hint{font:400 14.5px/1.45 var(--font);color:var(--text-muted);margin:-2px 0 2px}

.lf-field textarea{font:400 17px/1.55 var(--font);color:var(--navy);background:#fff;
  border:2px solid rgba(13,27,51,.18);border-radius:12px;padding:14px 16px;width:100%;
  resize:vertical;min-height:110px;
  transition:border-color .16s ease,box-shadow .16s ease}
.lf-field textarea::placeholder{color:rgba(13,27,51,.38)}
.lf-field textarea:hover{border-color:rgba(13,27,51,.32)}
.lf-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}

/* A fieldset carries the radio group so the question is announced with its
   options; the default border and padding are in the way, so they go. */
.lf-group{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.lf-group legend{padding:0;font:600 15px/1.2 var(--font);color:var(--navy);letter-spacing:.01em}
.lf-group legend em{font-style:normal;font-weight:500;color:var(--text-muted)}

.lf-submit{align-self:flex-start;min-height:56px}
.lf-submit[disabled]{opacity:.6;cursor:progress}
/* The thank-you is the payoff for a long form, so it reads bigger than the
   usual status line. */
.lf-msg{font-size:16.5px;line-height:1.5}

@media(max-width:700px){
  .leader-panel{padding:30px 22px;border-radius:22px}
  .leader-form{gap:20px}
  .lf-submit{width:100%;justify-content:center}
}

/* The file input itself is hidden behind a button-shaped label - the native
   control is small, differently shaped in every browser, and hard to hit. */
.lf-photo{gap:6px}
.lf-drop{display:block;cursor:pointer}
.lf-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.lf-drop-face{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:12px 20px;
  border:2px dashed rgba(13,27,51,.26);border-radius:12px;background:#fff;
  font:600 16px/1.2 var(--font);color:var(--navy);
  transition:border-color .16s ease,background .16s ease}
.lf-drop-face svg{width:20px;height:20px;stroke:var(--accent);stroke-width:2}
.lf-drop:hover .lf-drop-face{border-color:var(--accent);background:rgba(var(--accent-rgb),.04)}
.lf-drop input:focus-visible+.lf-drop-face{outline:3px solid var(--accent);outline-offset:3px}

.lf-preview{display:flex;align-items:center;gap:14px;margin-top:4px}
.lf-preview img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.lf-preview-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.lf-preview-name{font:400 14.5px/1.3 var(--font);color:var(--text-muted);
  max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-remove{border:0;background:none;padding:6px 0;min-height:44px;
  font:600 14.5px/1 var(--font);color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}

/* ===== MIKI ON THE EDGE OF THE APPLICATION PANEL =====
   Same trick as the one perched on the nav bar: --seat is how far down the
   artwork her seat line falls, so she is dropped by the part of her that
   belongs below the edge and the rest sits on top of it. The speech bubble is
   real text rather than part of the picture, so the wording can change and it
   stays sharp at any zoom. Narrow screens have no room beside the panel, so
   she only appears once there is space for her. */
.leader-panel{position:relative}
/* .section clips its children so the background glows stay inside it; this
   section has no glow and does have someone sitting on its edge, so it opts
   out and takes extra headroom instead. */
.leader-sec{overflow:visible}
.lf-miki{display:none}
@media(min-width:1120px){
  .lf-miki{--h:225px;--seat:.524;
    display:block;position:absolute;right:38px;z-index:2;pointer-events:none;
    height:var(--h);top:calc(-1 * var(--h) * var(--seat));
    filter:drop-shadow(0 6px 12px rgba(13,27,51,.2))}
  .lf-miki img{display:block;height:100%;width:auto}

  .leader-sec{padding-top:150px}
  .lf-bubble{position:absolute;right:calc(100% - 44px);bottom:58%;
    width:max-content;max-width:155px;
    background:#fff;color:#111;border:3px solid #111;border-radius:22px;
    padding:11px 16px;text-align:center;
    font:800 17px/1.25 var(--font);letter-spacing:-.01em;
    box-shadow:0 4px 0 rgba(17,17,17,.14)}
  /* the tail: a small square rotated to a diamond, half hidden behind the
     bubble so only a point shows, with the same outline */
  .lf-bubble::after{content:"";position:absolute;right:16px;bottom:-11px;
    width:18px;height:18px;background:#fff;
    border-right:3px solid #111;border-bottom:3px solid #111;
    transform:rotate(35deg) skew(-6deg,-6deg);border-radius:0 0 5px 0}

  /* she settles a touch when the panel scrolls into view */
  @media (prefers-reduced-motion: no-preference){
    .lf-miki{animation:lf-settle .7s cubic-bezier(.22,1,.36,1) both}
    @keyframes lf-settle{from{transform:translateY(-14px) rotate(-3deg);opacity:0}
      to{transform:none;opacity:1}}
  }
}
@media(min-width:1120px) and (max-width:1300px){
  .lf-miki{--h:200px;right:24px}
  .lf-bubble{font-size:16px;max-width:168px}
}

/* ===== WHERE A TALL PHOTO MEETS A WIDE FRAME =====
   Nearly every trip photo is a portrait phone shot, and these frames are
   landscape, so "cover" throws away the top and bottom. Centred, that crop
   lands on people's chests and cuts their heads off. Aligning to the top
   keeps the faces, which is the whole point of the picture. */
.marquee img,.photo-strip img{object-position:50% 0}
/* The exceptions: three where nobody is standing at the top of the frame,
   so the top is roof, ceiling or empty sky. These stay centred. */
.marquee img[src*="mackinac-harbor"],.photo-strip img[src*="mackinac-harbor"],
.marquee img[src*="africa-hut"],.photo-strip img[src*="africa-hut"],
.marquee img[src*="group-lunch"],.photo-strip img[src*="group-lunch"]{object-position:50% 50%}

/* ===== JOIN THE TEAM: what we value ===== */
.values-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;
  padding:34px 40px;margin-top:22px}
.values-panel h3{color:var(--navy);margin:0 0 16px;font-size:clamp(20px,2.2vw,25px)}
.values-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.values-list li{position:relative;padding-left:32px;color:var(--text-muted);font-size:17.5px;line-height:1.55}
/* A drawn tick rather than a bullet - these are qualities, not a shopping list. */
.values-list li::before{content:"";position:absolute;left:4px;top:7px;width:9px;height:15px;
  border:solid var(--accent);border-width:0 3px 3px 0;transform:rotate(45deg)}
@media(min-width:820px){.values-list{grid-template-columns:1fr 1fr;gap:14px 36px}}
@media(max-width:700px){.values-panel{padding:26px 22px;border-radius:20px}}

/* Name/city and email/phone pair up on a wide screen and stack on a narrow one. */
.lf-row{display:grid;gap:24px}
@media(min-width:720px){.lf-row{grid-template-columns:1fr 1fr}}

/* The question number, so the four read as a numbered set at a glance. */
.lf-q{color:var(--accent);font-weight:800;margin-right:4px}

.leader-sign{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--border);
  font:700 17px/1.6 var(--font);color:var(--navy)}
.leader-sign em{display:block;font-style:normal;font-weight:600;color:var(--accent-2);margin-top:2px}

/* ===== TRAVEL INSURANCE: the recommendation =====
   This is the one thing on the page we want nobody to scroll past, so it sits
   beside the heading as its own card rather than as a clause in a sentence.
   Solid white behind it, because the hero artwork underneath is busy. */
@media(min-width:960px){
  .ins-hero-copy{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center}
}
.ins-urge{display:flex;align-items:center;gap:16px;
  background:#fff;border:3px solid var(--accent-2);border-radius:20px;
  padding:22px 24px;box-shadow:0 14px 34px -18px rgba(var(--accent-2-rgb),.75)}
.ins-urge svg{width:38px;height:38px;flex:0 0 38px;stroke:var(--accent-2);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.ins-urge p{margin:0;font:800 20px/1.3 var(--font);color:var(--accent-2);letter-spacing:-.01em}
.ins-urge strong{font-weight:inherit}
@media(max-width:959px){
  .ins-urge{margin-top:26px}
  .ins-urge p{font-size:18px}
}

/* ===== MIKI'S STORY: giving the words some weight =====
   Four paragraphs of the same muted grey read as small print, which is the
   opposite of what this section is for. The opening line becomes a lede, a
   few phrases that carry the message carry the colour, and an accent rule
   down the side marks the whole thing as someone speaking rather than
   boilerplate. */
.story-panel .story-lead{font-size:21px;line-height:1.55;color:var(--navy);font-weight:600;
  max-width:54ch;margin:0 0 20px;position:relative;padding-left:22px}
.story-panel .story-lead::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;
  border-radius:4px;background:linear-gradient(180deg,var(--accent),rgba(var(--accent-2-rgb),.55))}
/* "any age is welcome" and the like keep their extra weight against the rest. */
.story-panel .story-lead strong{font-weight:800}
@media(max-width:700px){
  .story-panel .story-lead{font-size:19px;padding-left:16px}
}

/* The age rule sits between the headline and the red line: quieter than both,
   because it is a condition rather than an invitation. */
.welcome-ages{font-size:17.5px;line-height:1.5;color:var(--text-muted);margin:0 0 14px}

/* A one-line highlight under a trip name - the detail worth knowing before
   anyone opens the card. Optional: trips without one look exactly as before. */
.tc-note{margin:-4px 0 10px;font:700 15px/1.4 var(--font);color:var(--accent-2);
  width:max-content;max-width:100%;
  animation:join-breathe 3.4s ease-in-out infinite;transform-origin:left center}
@media(prefers-reduced-motion:reduce){
  .tc-note{animation:none;text-shadow:0 0 10px rgba(var(--accent-2-rgb),.35)}
}
/* A flag sits above the trip name - for the handful of trips that are a
   different kind of thing, not just a different place. */
.tc-flag{display:inline-block;align-self:flex-start;width:max-content;margin:0 0 8px;padding:5px 11px;border-radius:999px;
  background:rgba(var(--accent-2-rgb),.12);color:var(--accent-2);
  font:800 12.5px/1 var(--font);letter-spacing:.09em}

/* Final payment date in the trip detail panel. Sits with the deposit line
   because together they are the two dates a traveler has to diarise. */
.final-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:14px 0 0;
 padding:12px 16px;border-radius:var(--radius-sm);background:rgba(var(--accent-rgb),.08);
 border:1px solid rgba(var(--accent-rgb),.22);font-size:17px;color:var(--text)}
.final-pay strong{color:var(--navy);font-weight:800}
.final-pay span{font-weight:700}

/* Packing page: the checklist sits beside the product cards on a wide
   screen and above them on a narrow one. */
.pack-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:30px;align-items:start}
.pack-layout .pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pack-checklist{position:sticky;top:96px;background:var(--bg-card);border:1px solid rgba(var(--accent-rgb),.22);
 border-radius:var(--radius);padding:24px 24px 28px}
.pack-checklist h2{font-size:26px;font-weight:800;color:var(--navy);margin:0 0 8px;letter-spacing:-.01em}
.pack-check-sub{font-size:15px;color:var(--text-muted);margin:0 0 18px;line-height:1.5}
.pack-checklist h3{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:var(--accent);margin:20px 0 10px}
.pack-checklist h3:first-of-type{margin-top:0}
.pack-check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pack-check-list label{display:flex;gap:11px;align-items:flex-start;padding:7px 8px;border-radius:9px;
 cursor:pointer;font-size:16px;line-height:1.45;color:var(--text);transition:background .2s}
.pack-check-list label:hover{background:rgba(var(--accent-rgb),.09)}
.pack-check-list input{appearance:none;flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:6px;
 border:2px solid rgba(var(--accent-rgb),.45);background:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.pack-check-list input:checked{background:var(--accent);border-color:var(--accent)}
.pack-check-list input:checked+span{color:var(--text-muted);text-decoration:line-through}
.pack-check-list input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:1000px){
 .pack-layout{grid-template-columns:1fr;gap:24px}
 .pack-checklist{position:static}
 .pack-layout .pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){.pack-layout .pack-grid{grid-template-columns:1fr}}

/* Final payment sits directly under the trip date, in the accent red, because
   it is the one date on the page with money attached to it. */
.final-pay{margin:16px 0 20px;padding:14px 18px;border-radius:var(--radius-sm);
 background:rgba(var(--accent-2-rgb),.07);border:1px solid rgba(var(--accent-2-rgb),.3)}
.final-pay-date{margin:0;font-size:20px;font-weight:800;color:var(--accent-2);letter-spacing:-.01em}
.final-pay-date span{font-weight:800}
.final-pay-note{margin:10px 0 0;padding:11px 14px;border-radius:9px;background:#fff;
 border:1px solid rgba(var(--accent-2-rgb),.2);font-size:15.5px;line-height:1.55;
 font-weight:700;color:var(--text)}

/* "Passport required" beside the International Trips heading. It is the one
   thing that can stop a booking dead, so it rides the title rather than
   waiting in the small print. */
.hero-flag{display:inline-block;vertical-align:middle;transform:translateY(-6px);
 margin-left:16px;padding:9px 17px;border-radius:999px;white-space:nowrap;
 background:var(--accent-2);color:#fff;font:800 15px/1 var(--font);
 letter-spacing:.11em;text-transform:uppercase;
 box-shadow:0 6px 16px -8px rgba(var(--accent-2-rgb),.9)}
@media(max-width:760px){
 .hero-flag{display:block;transform:none;margin:14px 0 0;width:max-content;font-size:13px;padding:8px 14px}
}

/* Our Story gate on a phone. The logo behind it is set to cover, which on a
   tall narrow screen zooms it until you are looking at one corner. Contain
   shows the whole mark the way the desktop does, over a solid base so the
   gradient has something to sit on, and the button stays on one line. */
@media(max-width:760px){
  .gate{background-color:#0b111e;background-size:100% 100%,165% auto;padding:28px 20px}
  .gate h1{font-size:clamp(30px,8.4vw,46px);margin-bottom:22px}
  .gate .kicker{font-size:13px;letter-spacing:.14em}
  .gate-btn{font-size:16px;min-height:56px;padding:16px 24px;white-space:nowrap}
}

/* ===== CINEMATIC INTRO (About page) =====
   A full-screen overlay: the entry panel (which reuses the .gate styling, so
   the logo artwork and the phone sizing above apply to it too), then a dark
   stage where the note from Miki is typed out. The type here is a warm serif
   instead of the site's Archivo - it is the one place on the site that is
   meant to read like a letter, and a serif at this size is easier on older
   eyes. No extra font is downloaded for it. */
.si{position:fixed;inset:0;height:100dvh;z-index:100000;background:#07080e;opacity:1;transition:opacity .8s ease}
.si.is-out{opacity:0;pointer-events:none}
.si-entry{z-index:2}

.si-stage{position:absolute;inset:0;display:grid;place-items:center;
 padding:clamp(22px,5vw,64px) clamp(20px,5vw,56px);overflow:hidden;
 background:radial-gradient(130% 95% at 50% 42%,rgba(22,103,216,.17),transparent 68%)}
.si-wrap{width:min(920px,100%);text-align:center;
 font-family:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif}

/* The one-line opener: this one fades rather than types. */
.si-hello{margin:0;font-size:clamp(25px,4.6vw,46px);line-height:1.3;font-style:italic;
 color:#e7eefb;opacity:0;transform:translateY(10px);transition:opacity 1.1s ease,transform 1.1s ease;text-wrap:balance}
.si-hello.in{opacity:1;transform:none}
.si-hello.out{opacity:0;transform:translateY(-10px);transition-duration:.9s}

.si-title{margin:0 0 clamp(18px,3vw,34px);font-size:clamp(27px,4.4vw,50px);line-height:1.15;
 font-weight:400;letter-spacing:-.01em;color:#fff;transition:opacity .9s ease,font-size .6s ease}
.si-title.dim{opacity:.5}

.si-paras{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,24px);align-items:center}
.si-p{margin:0;font-size:clamp(22px,2.45vw,33px);line-height:1.5;color:#f3f7fd;
 max-width:34ch;text-wrap:pretty;opacity:0;transform:translateY(16px);
 transition:opacity .7s ease,transform .7s ease}
.si-p.in{opacity:1;transform:none}
.si-p.dim{opacity:.34}
.si-p.out{opacity:0;transform:translateY(-20px)}
.si-sign{font-style:italic;color:#ffd9dd;font-size:clamp(23px,2.6vw,35px)}
.si-final{color:#fff;font-size:clamp(24px,2.9vw,38px)}

.si-cur{display:inline-block;color:var(--accent-2);font-weight:400;
 animation:si-blink 1.05s steps(1,end) infinite}
.si-cur::after{content:'|'}
@keyframes si-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Reduced motion: the whole note at once, scrollable, and a size that fits
   more of it on screen. */
.si--all .si-stage{place-items:start center;overflow-y:auto}
.si--all .si-wrap{padding-top:clamp(24px,8vh,72px);padding-bottom:clamp(170px,24vh,240px)}
.si--all .si-p,.si--all .si-hello,.si--all .si-title{opacity:1;transform:none;transition:none}
.si--all .si-p{font-size:clamp(20px,2vw,27px);max-width:40ch}
.si--all .si-hello{margin-bottom:clamp(16px,3vw,28px)}
.si--all .si-cur{display:none}

.si-tools{position:fixed;left:24px;bottom:calc(96px + env(safe-area-inset-bottom,0px));
 z-index:100001;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.si-tool{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:11px 20px;
 border-radius:999px;background:rgba(8,9,14,.92);color:#fff;border:2px solid rgba(255,255,255,.5);
 font:700 16px var(--font);cursor:pointer;backdrop-filter:blur(6px)}
.si-tool .si-ico{font-size:18px;line-height:1}
.si-tool[aria-pressed="false"]{opacity:.72;border-color:rgba(255,255,255,.28)}
.si-tool:hover{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1}
.si-tool:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

@media(max-width:760px){
  .si-tools{left:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));gap:8px}
  .si-tool{min-height:44px;padding:9px 15px;font-size:14px}
  .si-skip{right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));min-height:50px;padding:12px 20px;font-size:17px}
  .si-p{max-width:26ch}
}

/* The sign-off keeps a little more presence than an ordinary faded line. */
.si-p.si-sign.dim{opacity:.68}

/* ===== INTRO: white and red =====
   The note reads like a letter on paper rather than film credits. Body text
   is near-black navy on white (about 15:1 contrast), the brand red carries
   the opener, the heading, the sign-off and the cursor, and the faded
   paragraph behind the live one stays dark enough to still be read. */
.si{background:#fff}
.si-stage{background:
 radial-gradient(118% 88% at 50% 0%,rgba(var(--accent-2-rgb),.1),transparent 62%),
 radial-gradient(100% 70% at 50% 100%,rgba(var(--accent-2-rgb),.055),transparent 72%)}
.si-hello{color:var(--accent-2)}
.si-title{color:var(--accent-2)}
.si-title.dim{opacity:.82}
.si-p{color:#131d33}
.si-p.dim{opacity:.46}
.si-sign{color:var(--accent-2)}
.si-final{color:var(--accent-2);font-weight:700}

.si-tool{background:#fff;color:#131d33;border-color:rgba(var(--accent-2-rgb),.45);
 box-shadow:0 4px 14px -8px rgba(13,27,51,.5)}
.si-tool .si-ico{color:var(--accent-2)}
.si-tool[aria-pressed="false"]{opacity:1;color:#5b6679;border-color:rgba(13,27,51,.2)}
.si-tool[aria-pressed="false"] .si-ico{color:#8a93a5}
.si-tool:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.si-tool:hover .si-ico{color:#fff}
.si-tool:focus-visible{outline-color:var(--accent-2)}

.si-skip{background:var(--accent-2);border-color:var(--accent-2);color:#fff;
 box-shadow:0 8px 20px -10px rgba(var(--accent-2-rgb),.95)}
.si-skip:hover{background:#ab1e2d;border-color:#ab1e2d;color:#fff}
.si-skip:focus-visible{outline-color:var(--accent-2)}

/* The entry panel is dark, so it fades out rather than cutting to white. */
.si-entry{transition:opacity .5s ease}
.si-entry.is-out{opacity:0;pointer-events:none}

/* ===== PHONE SLIDERS: let the thumb actually move them =====
   Two things were stopping the swipe on a phone.

   The review arrows are positioned over the left and right edges of the
   slider. On a wide screen they sit in the margin, but on a phone they land
   right where a thumb starts a swipe, so the button swallowed the gesture
   and the cards never moved. Below they drop under the slider as a pair.

   And both sliders snapped with "mandatory", which drags a short or slow
   swipe straight back to the card it came from - it reads as "stuck".
   "Proximity" still lines the cards up but lets a gentle swipe through. */
@media(max-width:760px){
  .rv-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
  .masonry{order:1;flex:0 0 100%;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .rv-arrow{order:2;position:static;transform:none;width:54px;height:54px;font-size:22px}
  .rv-arrow:hover,.rv-arrow:active{transform:scale(1.05)}
  .rv-prev{left:auto}
  .rv-next{right:auto}
  .rv-hint{margin-top:12px}

  .trip-cards{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
}

/* On a phone a press-and-drag that starts on a photo can turn into the
   browser's own "drag this image" gesture instead of a swipe. */
.trip-card img,.review-card img,.photo-strip img,.marquee img{
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* Links to the plain HTML versions of each section. They exist mainly for
   search engines and the chat assistant, which cannot read a page that
   builds itself with JavaScript, so they sit quietly at the bottom. */
.footer-plain{padding-top:18px;border-top:1px solid var(--border);margin-top:8px}
.footer-plain p{margin:0;font-size:14px;line-height:1.9;color:var(--text-muted)}
.footer-plain a{color:var(--text-muted);text-decoration:none}
.footer-plain a:hover{color:var(--accent);text-decoration:underline}