/* ============================================================
TripSkyWay Public Website - v1.20.0 Design System
Premium, mobile-first, conversion-focused travel agency UI.
============================================================ */
:root{
--tsw-primary:#0B5FFF; --tsw-primary-dark:#0942B8; --tsw-primary-050:#EEF3FF;
--tsw-accent:#F59E0B; --tsw-accent-dark:#D97706;
--tsw-ink:#0F172A; --tsw-body:#334155; --tsw-muted:#64748B; --tsw-line:#E5E9F0;
--tsw-bg:#FFFFFF; --tsw-bg-soft:#F7F9FC; --tsw-white:#FFFFFF;
--tsw-success:#059669; --tsw-danger:#DC2626;
--tsw-radius:16px; --tsw-radius-sm:10px; --tsw-radius-lg:24px;
--tsw-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
--tsw-shadow:0 10px 30px rgba(15,23,42,.10);
--tsw-shadow-lg:0 24px 60px rgba(15,23,42,.16);
--tsw-container:1200px;
--tsw-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.tsw{margin:0;font-family:var(--tsw-font);color:var(--tsw-body);background:var(--tsw-bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
.tsw img{max-width:100%;display:block}
.tsw a{color:var(--tsw-primary);text-decoration:none}
.tsw a:hover{color:var(--tsw-primary-dark)}
.tsw h1,.tsw h2,.tsw h3,.tsw h4{color:var(--tsw-ink);line-height:1.2;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
.tsw h1{font-size:clamp(2rem,5vw,3.25rem)}
.tsw h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
.tsw h3{font-size:1.25rem}
.tsw p{margin:0 0 1rem}
.container{max-width:var(--tsw-container);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-soft{background:var(--tsw-bg-soft)}
.section-head{max-width:720px;margin:0 auto 44px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head p{color:var(--tsw-muted);font-size:1.05rem;margin:0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tsw-primary);background:var(--tsw-primary-050);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.text-center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Buttons
NOTE: selectors are scoped with `.tsw` so button text colours win over the
generic `.tsw a{color:var(--tsw-primary)}` link rule (which previously made
the white-on-primary CTA label invisible). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1rem;padding:13px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s ease;text-align:center;line-height:1.1;text-decoration:none}
.tsw a.btn{text-decoration:none}
.tsw .btn-primary,.tsw a.btn-primary{background:var(--tsw-primary);color:#fff}
.tsw .btn-primary:hover,.tsw a.btn-primary:hover{background:var(--tsw-primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--tsw-shadow)}
.tsw .btn-accent,.tsw a.btn-accent{background:var(--tsw-accent);color:#3a2600}
.tsw .btn-accent:hover,.tsw a.btn-accent:hover{background:var(--tsw-accent-dark);color:#3a2600;transform:translateY(-2px);box-shadow:var(--tsw-shadow)}
.tsw .btn-outline,.tsw a.btn-outline{background:transparent;color:var(--tsw-primary);border-color:var(--tsw-primary)}
.tsw .btn-outline:hover,.tsw a.btn-outline:hover{background:var(--tsw-primary);color:#fff}
.tsw .btn-ghost,.tsw a.btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)}
.tsw .btn-ghost:hover,.tsw a.btn-ghost:hover{background:#fff;color:var(--tsw-ink)}
.tsw .btn-wa,.tsw a.btn-wa{background:#25D366;color:#052e16}
.tsw .btn-wa:hover,.tsw a.btn-wa:hover{background:#1eb257;color:#052e16;transform:translateY(-2px)}
.btn-lg{padding:16px 34px;font-size:1.05rem}
.btn-block{width:100%}
/* Accessibility: visible keyboard focus + skip link */
.tsw a:focus-visible,.tsw button:focus-visible,.tsw input:focus-visible,.tsw select:focus-visible,.tsw textarea:focus-visible,.tsw [tabindex]:focus-visible{outline:3px solid var(--tsw-primary);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tsw-primary);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}
/* Header */
.tsw-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--tsw-line)}
.tsw-header .bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.tsw-logo{display:flex;align-items:center;gap:10px}
.tsw-logo img{height:40px;width:auto}
.tsw-nav{display:flex;align-items:center;gap:26px}
.tsw-nav a{color:var(--tsw-ink);font-weight:600;font-size:.98rem;position:relative;padding:6px 0}
.tsw-nav a:hover{color:var(--tsw-primary)}
.tsw-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--tsw-primary);transition:right .2s ease}
.tsw-nav a:hover::after{right:0}
.header-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--tsw-ink)}
.nav-toggle svg{width:26px;height:26px}
.mobile-nav{display:none;position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.5)}
.mobile-nav.open{display:block}
.mobile-nav .panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:#fff;padding:24px;box-shadow:var(--tsw-shadow-lg);overflow-y:auto;transform:translateX(0)}
.mobile-nav .panel a{display:block;padding:14px 6px;border-bottom:1px solid var(--tsw-line);color:var(--tsw-ink);font-weight:600}
.mobile-nav .panel .btn{margin-top:16px}
.mobile-nav-close{background:none;border:0;font-size:1.6rem;cursor:pointer;float:right;color:var(--tsw-muted)}
/* Hero slider */
.hero{position:relative;overflow:hidden;background:#0b1220}
.hero-track{position:relative;height:clamp(460px,72vh,720px)}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;display:flex;align-items:center}
.hero-slide.active{opacity:1;visibility:visible}
.hero-slide .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,28,.78) 0%,rgba(6,12,28,.45) 45%,rgba(6,12,28,.15) 100%)}
.hero-slide.align-center::after{background:linear-gradient(180deg,rgba(6,12,28,.35),rgba(6,12,28,.65))}
.hero-content{position:relative;z-index:2;color:#fff;max-width:620px}
.hero-slide.align-center .hero-content{margin:0 auto;text-align:center;max-width:760px}
.hero-slide.align-right .hero-content{margin-left:auto;text-align:right}
.hero-badge{display:inline-block;background:var(--tsw-accent);color:#3a2600;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;padding:7px 16px;border-radius:999px;margin-bottom:18px}
.hero h1,.hero h2{color:#fff;margin-bottom:.35em;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero .hero-title{font-size:clamp(2.1rem,5.4vw,3.6rem)}
.hero .hero-sub{font-size:1.35rem;font-weight:700;color:#fff}
.hero .hero-desc{font-size:1.1rem;color:rgba(255,255,255,.92);max-width:520px;margin-bottom:26px}
.hero-slide.align-center .hero-desc{margin-left:auto;margin-right:auto}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-slide.align-center .hero-cta{justify-content:center}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);transition:.18s}
.hero-arrow:hover{background:#fff;color:var(--tsw-ink)}
.hero-arrow.prev{left:20px}.hero-arrow.next{right:20px}
.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.hero-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);border:0;cursor:pointer;padding:0;transition:.2s}
.hero-dot.active{background:#fff;width:30px;border-radius:999px}
/* v1.28.0: Pause/Play control removed from the public hero. The .hero-pause
rule was retained here for backwards-compat but is no longer rendered.
v1.28.1: superseded by refined hero styles below - kept as a no-op class. */
.hero-pause{display:none !important}
/* Quick enquiry bar (lead capture) - v1.28.0 premium, compact, conversion-focused */
.quickbar{background:#fff;border-radius:var(--tsw-radius);box-shadow:var(--tsw-shadow-lg);padding:20px 22px;margin-top:-52px;position:relative;z-index:6;border:1px solid var(--tsw-line)}
.quickbar-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.quickbar-title{font-size:1.15rem;font-weight:800;color:var(--tsw-ink);margin:0;letter-spacing:-.01em}
.quickbar-sub{margin:0;color:var(--tsw-muted);font-size:.9rem;font-weight:600}
.quickbar form{margin:0}
.quickbar-fields{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:12px;align-items:end}
.quickbar .field{margin-bottom:0}
.quickbar .field label{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tsw-muted);display:block;margin-bottom:5px}
.quickbar .field input{padding:12px 14px}
.quickbar-submit{white-space:nowrap;height:48px}
.field-err{color:var(--tsw-danger);font-size:.78rem;font-weight:600;margin-top:5px}
.field input.is-invalid,.field input[aria-invalid="true"]{border-color:var(--tsw-danger);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.field input.is-invalid:focus{border-color:var(--tsw-danger);box-shadow:0 0 0 3px rgba(220,38,38,.18)}
/* Cards */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);overflow:hidden;box-shadow:var(--tsw-shadow-sm);transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--tsw-shadow);border-color:#d7defc}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tsw-bg-soft)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.06)}
.card-tag{position:absolute;top:12px;left:12px;background:var(--tsw-accent);color:#3a2600;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{margin:0}
.card-meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--tsw-muted);font-size:.86rem;font-weight:600}
.card-meta span{display:inline-flex;align-items:center;gap:5px}
.card-desc{color:var(--tsw-body);font-size:.94rem;margin:0}
.card-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--tsw-line)}
.price{color:var(--tsw-ink);font-weight:800;font-size:1.15rem}
.price small{display:block;color:var(--tsw-muted);font-weight:600;font-size:.72rem}
.price .from{color:var(--tsw-muted);font-weight:600;font-size:.78rem}
.dest-card{position:relative;border-radius:var(--tsw-radius);overflow:hidden;aspect-ratio:3/4;display:block;box-shadow:var(--tsw-shadow-sm)}
.dest-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dest-card:hover img{transform:scale(1.08)}
.dest-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72));display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff}
.dest-card .overlay h3{color:#fff;margin:0}
.dest-card .overlay span{opacity:.9;font-size:.85rem}
/* Features / how it works */
.feature{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);padding:26px;box-shadow:var(--tsw-shadow-sm);height:100%}
.feature .ico{width:52px;height:52px;border-radius:14px;background:var(--tsw-primary-050);color:var(--tsw-primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feature .ico svg{width:26px;height:26px}
.feature h3{font-size:1.1rem;margin:0 0 6px}
.feature p{color:var(--tsw-muted);margin:0;font-size:.94rem}
.step{text-align:center;padding:20px}
.step .num{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--tsw-primary);color:#fff;font-weight:800;font-size:1.25rem;display:flex;align-items:center;justify-content:center}
/* Trust badges */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;align-items:center}
.trust .badge{display:flex;align-items:center;gap:10px;color:var(--tsw-body);font-weight:600}
.trust .badge svg{width:22px;height:22px;color:var(--tsw-success)}
/* Testimonials */
.quote-card{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);padding:26px;box-shadow:var(--tsw-shadow-sm);height:100%;display:flex;flex-direction:column;gap:12px}
.stars{color:var(--tsw-accent);letter-spacing:2px;font-size:1.05rem}
.quote-card p{font-size:1rem;color:var(--tsw-body);margin:0}
.quote-author{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote-author .av{width:44px;height:44px;border-radius:50%;background:var(--tsw-primary-050);color:var(--tsw-primary);display:flex;align-items:center;justify-content:center;font-weight:800}
.quote-author strong{color:var(--tsw-ink);display:block}
.quote-author span{color:var(--tsw-muted);font-size:.85rem}
/* FAQ accordion */
.accordion{max-width:820px;margin:0 auto}
.acc-item{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius-sm);margin-bottom:12px;overflow:hidden}
.acc-q{width:100%;text-align:left;background:none;border:0;padding:18px 22px;font-size:1.05rem;font-weight:700;color:var(--tsw-ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.acc-q .chev{transition:transform .2s;flex-shrink:0;color:var(--tsw-primary)}
.acc-item.open .acc-q .chev{transform:rotate(180deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 22px}
.acc-item.open .acc-a{max-height:600px;padding-bottom:20px}
.acc-a p{margin:0;color:var(--tsw-body)}
/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--tsw-primary),#3b76ff);color:#fff;border-radius:var(--tsw-radius-lg);padding:48px;text-align:center;box-shadow:var(--tsw-shadow)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:620px;margin:0 auto 24px;font-size:1.1rem}
.cta-band .hero-cta{justify-content:center}
/* Forms */
.form-card{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);box-shadow:var(--tsw-shadow);padding:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field.full{grid-column:1 / -1}
.field label{font-size:.88rem;font-weight:700;color:var(--tsw-ink)}
.field .req{color:var(--tsw-danger)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius-sm);background:#fff;color:var(--tsw-ink);transition:.15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tsw-primary);box-shadow:0 0 0 3px var(--tsw-primary-050)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute!important;left:-9999px;top:-9999px;height:0;width:0;opacity:0}
.alert{padding:14px 18px;border-radius:var(--tsw-radius-sm);margin-bottom:18px;font-weight:600}
.alert-success{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
.alert-error{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}
/* Breadcrumbs */
.crumbs{padding:16px 0;font-size:.88rem;color:var(--tsw-muted)}
.crumbs a{color:var(--tsw-muted)}
.crumbs a:hover{color:var(--tsw-primary)}
.crumbs .sep{margin:0 8px;opacity:.6}
/* Page hero (interior) */
.page-hero{position:relative;background:var(--tsw-ink);color:#fff;padding:64px 0}
.page-hero.with-img{padding:96px 0}
.page-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.35),rgba(11,18,32,.7))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;margin-bottom:8px}
.page-hero p{color:rgba(255,255,255,.9);max-width:640px;margin:0;font-size:1.1rem}
/* Package detail */
.pkg-layout{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
.pkg-gallery img{border-radius:var(--tsw-radius);width:100%;aspect-ratio:16/9;object-fit:cover}
.pkg-block{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);padding:24px;margin-bottom:20px}
.pkg-block h2{font-size:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--tsw-primary-050);color:var(--tsw-primary-dark);font-weight:600;font-size:.85rem;padding:6px 14px;border-radius:999px}
.list-check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list-check li{position:relative;padding-left:30px;color:var(--tsw-body)}
.list-check li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--tsw-success);-webkit-mask:url("data:image/svg+xml;utf8,") center/70% no-repeat;mask:url("data:image/svg+xml;utf8,") center/70% no-repeat}
.list-cross li::before{background:var(--tsw-danger)}
.itin-day{border-left:3px solid var(--tsw-primary);padding:4px 0 20px 22px;position:relative;margin-left:8px}
.itin-day::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--tsw-primary);border:3px solid #fff;box-shadow:0 0 0 2px var(--tsw-primary)}
.itin-day h4{margin:0 0 4px;color:var(--tsw-ink)}
.itin-day .daynum{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tsw-primary)}
.pkg-aside{position:sticky;top:92px}
.price-box{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);box-shadow:var(--tsw-shadow);padding:24px;margin-bottom:20px}
.price-box .big{font-size:2rem;font-weight:800;color:var(--tsw-ink)}
.price-box .note{color:var(--tsw-muted);font-size:.85rem}
/* Blog */
.article{max-width:820px;margin:0 auto}
.article img{border-radius:var(--tsw-radius);margin:18px 0}
.article h2{margin-top:1.6em}
.prose h2{font-size:1.5rem}.prose h3{font-size:1.2rem}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1rem}
.prose a{text-decoration:underline}
/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--tsw-line);border-radius:10px;color:var(--tsw-ink);font-weight:600;padding:0 12px}
.pagination a:hover{border-color:var(--tsw-primary);color:var(--tsw-primary)}
.pagination .current{background:var(--tsw-primary);color:#fff;border-color:var(--tsw-primary)}
/* Footer */
.tsw-footer{background:#0B1220;color:#B8C2D6;padding:64px 0 28px}
.tsw-footer h4{color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:.02em}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px}
.tsw-footer a{color:#B8C2D6;display:block;padding:5px 0}
.tsw-footer a:hover{color:#fff}
.tsw-footer .brand img{height:42px;margin-bottom:14px;background:#fff;padding:6px 10px;border-radius:10px}
.footer-contact li{list-style:none;display:flex;gap:10px;margin-bottom:10px}
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;padding:0}
.footer-social a:hover{background:var(--tsw-primary)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.86rem}
.newsletter{display:flex;gap:8px;margin-top:12px}
.newsletter input{flex:1;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff}
.newsletter input::placeholder{color:#8b97ad}
/* WhatsApp float */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--tsw-shadow-lg);transition:.2s}
.wa-float:hover{transform:scale(1.08);color:#fff}
.wa-float svg{width:30px;height:30px}
/* Responsive */
@media(max-width:980px){
.grid-4{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(2,1fr)}
.pkg-layout{grid-template-columns:1fr}
.pkg-aside{position:static}
.footer-grid{grid-template-columns:1fr 1fr}
/* Quickbar column stacking intentionally NOT here - see the 900px tier below.
980px is a desktop/laptop width and the lead form must stay horizontal
there (Destination | Your Name | Mobile Number | Get My Quote). */
}
@media(max-width:760px){
.section{padding:48px 0}
.tsw-nav,.header-cta .btn{display:none}
.nav-toggle{display:inline-flex}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.cta-band{padding:32px 22px}
.hero-arrow{display:none}
.quickbar{margin-top:-32px;padding:18px}
.quickbar-fields{grid-template-columns:1fr}
.quickbar-submit{grid-column:1 / -1;width:100%}
.hero-slide.align-right .hero-content{text-align:left}
.footer-grid{grid-template-columns:1fr}
.hero-slide::after{background:linear-gradient(180deg,rgba(6,12,28,.4),rgba(6,12,28,.7))}
}
@media(prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important}
.hero-slide{transition:none}
.card:hover{transform:none}
}
/* v1.21.2 header hardening: text-mark logo fallback + sm-only helpers */
.tsw-logo-mark{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;color:var(--tsw-primary,#0B5FFF);background:#e7f0ff;border-radius:10px}
.tsw-logo-text{font-weight:800;font-size:1.15rem;letter-spacing:.2px;color:var(--tsw-ink,#0f172a)}
.btn.btn-sm{padding:.45rem .7rem;font-size:.86rem}
.header-cta{display:flex;align-items:center;gap:10px}
@media (max-width:900px){ .hide-sm{display:none !important} }
/* ===== v1.24.0 CMS Draft Preview banner ===== */
body.tsw-preview{padding-top:0}
.tsw-preview-banner{position:sticky;top:0;z-index:9999;background:linear-gradient(90deg,#b45309,#d97706);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tsw-preview-banner__inner{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 16px;font-size:.85rem;line-height:1.35}
.tsw-preview-banner__badge{background:#fff;color:#b45309;font-weight:800;letter-spacing:.06em;padding:4px 10px;border-radius:6px;font-size:.72rem;white-space:nowrap}
.tsw-preview-banner__text{flex:1;min-width:220px}
.tsw-preview-banner__exp{display:inline-block;opacity:.9;margin-left:6px}
.tsw-preview-banner__actions{display:flex;gap:8px;flex-wrap:wrap}
.tsw-preview-banner__btn{background:rgba(255,255,255,.18);color:#fff;text-decoration:none;padding:6px 12px;border-radius:6px;font-weight:600;border:1px solid rgba(255,255,255,.35);white-space:nowrap}
.tsw-preview-banner__btn:hover{background:rgba(255,255,255,.3)}
.tsw-preview-banner__btn--live{background:#fff;color:#b45309}
/* ============================================================
v1.28.0 -> v1.28.2 Public homepage polish (retained history)
Consolidated below. Latest wins.
============================================================ */
/* ============================================================
v1.28.2 - PREMIUM HOMEPAGE POLISH
• Compact 36px top information bar (desktop only)
• Clean white main header with left logo / center nav / right CTA
• Reference-quality LEFT-ALIGNED hero (560-600px desktop) with
stronger dark scrim on the left, restrained title (58-68px),
premium badge, subtle divider, refined arrows + bottom-center dots
• Premium overlapping Quickbar (big heading, floating card, blue CTA)
• Refined trust strip
• WhatsApp NOT in header (floating only)
============================================================ */
/* --- Top information bar (v1.28.4 - WHITE contact text via .tsw-topbar-left a)
Root cause of blue text in v1.28.3: the global `.tsw a{color:var(--tsw-primary)}`
link rule (specificity 0,1,1) beat `.tsw-topbar-item{}` (0,1,0). We now use
`.tsw-topbar-left a` and `.tsw-topbar a` (specificity 0,1,1) plus a
compound `.tsw-topbar .tsw-topbar-item` (0,2,0) which decisively wins. */
.tsw-topbar{background:linear-gradient(180deg,#0B1B3A 0%,#0F2452 100%);color:#FFFFFF;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.04)}
.tsw-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:36px;padding-top:5px;padding-bottom:5px}
.tsw-topbar-left{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tsw-topbar a,
.tsw-topbar-left a,
.tsw-topbar .tsw-topbar-item{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;font-weight:500;letter-spacing:.005em;transition:color .15s,opacity .15s;text-decoration:none}
.tsw-topbar a:hover,
.tsw-topbar-left a:hover,
.tsw-topbar .tsw-topbar-item:hover{color:#FFFFFF;opacity:.85}
.tsw-topbar a:visited,
.tsw-topbar-left a:visited{color:#FFFFFF}
.tsw-topbar .tsw-topbar-item svg,
.tsw-topbar-left a svg{color:#FFFFFF;opacity:.9}
.tsw-topbar-right{display:flex;align-items:center;gap:22px}
.tsw-topbar-right a{color:#FFFFFF;font-weight:500;font-size:.8rem;letter-spacing:.005em;transition:opacity .15s;position:relative;text-decoration:none}
.tsw-topbar-right a:hover{color:#FFFFFF;opacity:.85}
.tsw-topbar-right a + a::before{content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(255,255,255,.18)}
@media(max-width:900px){.tsw-topbar{display:none !important}}
/* --- Main header (v1.28.2) --------------------------------- */
.tsw-header{background:#fff;backdrop-filter:none;border-bottom:1px solid #EEF1F6;box-shadow:0 1px 0 rgba(15,23,42,.02);position:sticky;top:0;z-index:50}
.tsw-header .bar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.tsw-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tsw-logo img{height:44px;width:auto}
.tsw-logo-text{font-weight:800;font-size:1.15rem;color:var(--tsw-ink);letter-spacing:-.01em}
.tsw-logo-mark{color:var(--tsw-primary)}
.tsw-nav{display:flex;align-items:center;gap:30px;flex-wrap:nowrap}
.tsw-nav a{color:#0F172A;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:8px;padding:6px 0;position:relative}
.tsw-nav a:hover{color:var(--tsw-primary)}
.tsw-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--tsw-primary);transition:right .2s ease}
.tsw-nav a:hover::after{right:0}
.tsw-nav-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--tsw-accent);color:#3a2600;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;line-height:1;box-shadow:0 4px 10px rgba(245,158,11,.35);transform:translateY(-9px)}
.header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-cta .btn-primary{padding:11px 22px;font-size:.95rem;border-radius:10px;box-shadow:0 6px 18px rgba(11,95,255,.28)}
.header-cta .btn-primary:hover{box-shadow:0 10px 26px rgba(11,95,255,.4)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--tsw-ink)}
@media(max-width:1024px){.tsw-nav{gap:22px}.tsw-nav a{font-size:.9rem}}
@media(max-width:900px){
.tsw-header .bar{height:64px}
.tsw-logo img{height:38px}
.tsw-nav{display:none}
.header-cta .btn-primary{display:none}
.nav-toggle{display:inline-flex}
}
/* --- Hero slider (v1.28.3 genuine left-column composition) - */
.hero{position:relative;overflow:hidden;background:#0a1428}
.hero-track{position:relative;height:clamp(520px,68vh,600px)}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;display:flex;align-items:center}
.hero-slide.active{opacity:1;visibility:visible}
.hero-slide .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right}
/* Wider hero container so content genuinely sits ~10-13% from viewport edge */
.hero-slide > .container{max-width:1600px;width:100%;padding-left:clamp(20px,10vw,180px);padding-right:clamp(20px,6vw,120px);margin:0 auto;position:relative;z-index:2}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,28,.9) 0%,rgba(6,12,28,.72) 32%,rgba(6,12,28,.35) 62%,rgba(6,12,28,.1) 100%)}
.hero-slide.align-center::after{background:linear-gradient(180deg,rgba(6,12,28,.3),rgba(6,12,28,.72))}
.hero-slide.align-right::after{background:linear-gradient(-90deg,rgba(6,12,28,.9) 0%,rgba(6,12,28,.72) 32%,rgba(6,12,28,.35) 62%,rgba(6,12,28,.1) 100%)}
/* LEFT (default) - content anchored to the container's left edge */
.hero-content{position:relative;z-index:2;color:#fff;max-width:620px;margin:0;text-align:left}
/* CENTER - reset container padding + center content */
.hero-slide.align-center > .container{padding-left:20px;padding-right:20px;max-width:900px}
.hero-slide.align-center .hero-content{margin:0 auto;text-align:center;max-width:760px}
/* RIGHT - flip container padding + right-align content */
.hero-slide.align-right > .container{padding-left:clamp(20px,6vw,120px);padding-right:clamp(20px,10vw,180px)}
.hero-slide.align-right .hero-content{margin-left:auto;margin-right:0;text-align:right}
/* Premium badge - shares the same left edge as the content column */
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--tsw-accent);color:#3a2600;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;padding:8px 16px;border-radius:999px;margin:0 0 20px;box-shadow:0 10px 28px rgba(245,158,11,.4)}
.hero-badge::before{content:"\2605";font-size:.9rem;line-height:1;margin-right:2px}
/* Title - constrained max-width so long headlines wrap intentionally */
.hero .hero-title{color:#fff;font-size:clamp(2.1rem,4.6vw,3.9rem);font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:0 0 14px;text-shadow:0 2px 30px rgba(0,0,0,.35);max-width:650px}
.hero-slide.align-center .hero-title{margin-left:auto;margin-right:auto}
.hero-slide.align-right .hero-title{margin-left:auto;margin-right:0}
/* Subtitle */
.hero .hero-sub{font-size:1.05rem;font-weight:600;color:#fff;margin:0 0 12px;max-width:560px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-slide.align-center .hero-sub{margin-left:auto;margin-right:auto}
.hero-slide.align-right .hero-sub{margin-left:auto;margin-right:0}
/* Subtle accent divider between subtitle and description */
.hero-content .hero-sub + .hero-desc,
.hero-content .hero-title + .hero-desc{position:relative}
.hero-content .hero-sub + .hero-desc::before,
.hero-content .hero-title + .hero-desc::before{content:"";display:block;width:64px;height:2px;background:linear-gradient(90deg,var(--tsw-accent),transparent);margin:0 0 16px;border-radius:2px}
.hero-slide.align-center .hero-content .hero-sub + .hero-desc::before,
.hero-slide.align-center .hero-content .hero-title + .hero-desc::before{margin-left:auto;margin-right:auto}
.hero-slide.align-right .hero-content .hero-sub + .hero-desc::before,
.hero-slide.align-right .hero-content .hero-title + .hero-desc::before{margin-left:auto;margin-right:0;background:linear-gradient(-90deg,var(--tsw-accent),transparent)}
/* Description */
.hero .hero-desc{font-size:.98rem;color:rgba(255,255,255,.9);line-height:1.65;max-width:560px;margin:0 0 28px}
.hero-slide.align-center .hero-desc{margin-left:auto;margin-right:auto}
.hero-slide.align-right .hero-desc{margin-left:auto;margin-right:0}
/* CTAs - share the same left edge as the content column */
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:0;justify-content:flex-start}
.hero-slide.align-center .hero-cta{justify-content:center}
.hero-slide.align-right .hero-cta{justify-content:flex-end}
.hero-cta .btn{border-radius:12px;font-weight:700;padding:14px 26px;font-size:1rem}
.hero-cta .btn-accent{box-shadow:0 14px 32px rgba(245,158,11,.42)}
.hero-cta .btn-accent:hover{box-shadow:0 18px 40px rgba(245,158,11,.55)}
.hero-cta .btn-accent .hero-cta-arrow{transition:transform .2s ease}
.hero-cta .btn-accent:hover .hero-cta-arrow{transform:translateX(4px)}
.hero-cta .btn-ghost{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(4px)}
.hero-cta .btn-ghost:hover{background:#fff;color:var(--tsw-ink)}
/* Nav arrows */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:.18s}
.hero-arrow svg{width:18px;height:18px}
.hero-arrow:hover{background:#fff;color:var(--tsw-ink);border-color:#fff;transform:translateY(-50%) scale(1.06)}
.hero-arrow.prev{left:20px}.hero-arrow.next{right:20px}
/* Dots */
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;align-items:center}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.42);border:0;cursor:pointer;padding:0;transition:all .25s ease}
.hero-dot:hover{background:rgba(255,255,255,.7)}
.hero-dot.active{background:#fff;width:28px;border-radius:999px}
/* Play/Pause stays gone */
.hero-pause{display:none !important}
@media(max-width:1200px){
.hero-slide > .container{padding-left:clamp(20px,6vw,80px);padding-right:20px}
}
@media(max-width:900px){
.hero-track{height:clamp(500px,66vh,580px)}
/* v1.28.4: push flex content upward so CTAs don't collide with dots */
.hero-slide{padding-bottom:90px}
.hero-slide > .container{padding-left:20px;padding-right:20px;max-width:100%}
.hero-content{max-width:100%}
.hero .hero-title{font-size:clamp(1.85rem,7vw,2.5rem);max-width:100%}
.hero-arrow{width:38px;height:38px}
.hero-arrow.prev{left:10px}.hero-arrow.next{right:10px}
.hero-dots{bottom:28px}
}
@media(max-width:600px){
.hero-slide{padding-bottom:100px}
.hero-cta{gap:10px;width:100%;flex-direction:column}
.hero-cta .btn{flex:0 0 auto;width:100%;min-width:0;padding:12px 18px;font-size:.95rem;justify-content:center}
.hero-arrow{display:none}
.hero-dots{bottom:24px;gap:6px}
.hero-dot{width:7px;height:7px}
.hero-dot.active{width:24px}
}
/* --- Quickbar (v1.28.4 - compact + STABLE validation slot) ---
Root cause of the v1.28.3 shift: with `align-items:end` on the fields grid,
showing the phone error made the mobile `.field` taller, so its input moved
upward relative to the other inputs. Fix: every `.field` reserves a
consistent 20px slot below the input; the error message uses that slot via
absolute positioning so the input row stays perfectly aligned in both
normal and error states. */
.quickbar-wrap{position:relative;z-index:6;margin-top:-32px}
.quickbar{background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(6,12,28,.2),0 8px 18px rgba(6,12,28,.06);padding:18px 22px;border:1px solid rgba(15,23,42,.05);max-width:1320px;margin:0 auto}
/* Head - inline on wide desktop, stacked on narrow screens */
.quickbar-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.quickbar-title{font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:800;color:var(--tsw-ink);margin:0;letter-spacing:-.015em;line-height:1.2}
.quickbar-sub{margin:0;color:var(--tsw-muted);font-size:.88rem;font-weight:500}
.quickbar form{margin:0}
.quickbar-fields{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:12px;align-items:end}
.quickbar .field{margin-bottom:0;position:relative;padding-bottom:22px}
.quickbar .field label{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#475569;margin-bottom:6px;display:block}
.quickbar .field input{padding:12px 14px;border:1.5px solid #E2E8F0;border-radius:10px;background:#F8FAFC;font-weight:500;font-size:.95rem;color:var(--tsw-ink);transition:.15s;width:100%;height:46px;display:block}
.quickbar .field input::placeholder{color:#94A3B8}
.quickbar .field input:focus{background:#fff;border-color:var(--tsw-primary);box-shadow:0 0 0 3px rgba(11,95,255,.12);outline:none}
.quickbar .field input.is-invalid{border-color:var(--tsw-danger);background:#FFF7F7}
/* Error slot lives in the reserved 22px below the input; absolute so it
NEVER pushes the input upward. In normal state the slot is invisible,
preserving the horizontal alignment of the three inputs. */
.quickbar .field-err{position:absolute;left:0;right:0;bottom:0;color:var(--tsw-danger);font-size:.76rem;font-weight:600;line-height:1.2;margin:0}
.quickbar-submit{height:46px;border-radius:10px;padding:0 24px;font-weight:700;font-size:.95rem;box-shadow:0 10px 22px rgba(11,95,255,.32);white-space:nowrap;margin-bottom:22px}
.quickbar-submit:hover{box-shadow:0 14px 28px rgba(11,95,255,.42);transform:translateY(-1px)}
@media(max-width:1200px){
.quickbar-head{align-items:flex-start;flex-direction:column;gap:2px}
}
@media(max-width:980px){
.quickbar-wrap{margin-top:-28px}
.quickbar{padding:18px 18px;border-radius:18px}
}
/* Quickbar stays a single horizontal row (Destination | Your Name | Mobile
Number | Get My Quote) across the whole desktop/laptop range. It previously
collapsed to two columns at 980px, which is a DESKTOP width - that pushed the
button onto its own full-width row and roughly doubled the card height
(213px -> 430px), producing the tall block of empty space. Stacking now
begins at 900px, the same point at which the site already switches its
desktop chrome (the top information bar hides at 900px), so the whole
desktop-to-tablet transition happens on one coherent line. */
@media(max-width:900px){
.quickbar-fields{grid-template-columns:1fr 1fr;gap:10px}
.quickbar-submit{grid-column:1 / -1;width:100%;margin-top:0}
}
@media(max-width:600px){
.quickbar-wrap{margin-top:-24px;padding-left:12px;padding-right:12px}
.quickbar{padding:16px 16px;border-radius:16px}
.quickbar-head{margin-bottom:12px}
.quickbar-fields{grid-template-columns:1fr;gap:8px}
.quickbar .field{padding-bottom:22px}
.quickbar .field input{padding:12px 14px;height:46px;font-size:1rem}
}
/* --- Trust strip refinement --------------------------------- */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;align-items:center;padding:16px 0}
.trust .badge{display:inline-flex;align-items:center;gap:10px;color:var(--tsw-body);font-weight:600;font-size:.92rem;background:transparent;border:0;padding:0}
.trust .badge svg{width:20px;height:20px;color:var(--tsw-success);flex-shrink:0;background:rgba(5,150,105,.1);border-radius:50%;padding:3px}
@media(max-width:600px){
.trust{gap:10px 20px;justify-content:flex-start;padding:14px 0}
.trust .badge{font-size:.88rem;flex:0 0 calc(50% - 10px)}
}
/* ==========================================================================
Phase 1 - CMS-managed homepage sections (In The News, Trusted Partners,
Career CTA). Reuses the existing tokens, card treatment and breakpoints so
these sections match the rest of the site rather than introducing a new
design language.
========================================================================== */
/* --- In The News --- */
.news-card{background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);box-shadow:var(--tsw-shadow-sm);overflow:hidden;height:100%;display:flex;flex-direction:column}
.news-media{aspect-ratio:16/9;overflow:hidden;background:var(--tsw-primary-050)}
.news-media img{width:100%;height:100%;object-fit:cover;display:block}
.news-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.8rem;color:var(--tsw-muted);text-transform:uppercase;letter-spacing:.04em}
.news-body h3{font-size:1.05rem;margin:0;line-height:1.4}
.news-body p{color:var(--tsw-muted);margin:0;font-size:.94rem}
.news-link{margin-top:auto;font-weight:600;font-size:.92rem}
/* --- Trusted Travel Partners --- */
.partner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:stretch}
.partner-item{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--tsw-line);border-radius:var(--tsw-radius);padding:20px 16px;min-height:92px;box-shadow:var(--tsw-shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
a.partner-item:hover{transform:translateY(-2px);box-shadow:var(--tsw-shadow)}
.partner-item img{max-width:100%;max-height:52px;object-fit:contain;display:block;filter:grayscale(1);opacity:.78;transition:filter .18s ease,opacity .18s ease}
a.partner-item:hover img{filter:grayscale(0);opacity:1}
.partner-name{font-weight:600;color:var(--tsw-muted);text-align:center;font-size:.95rem;line-height:1.3}
/* --- Career / Join Us CTA (softer variant of the closing CTA band) --- */
.cta-band-soft{background:#fff;color:inherit;border:1px solid var(--tsw-line);box-shadow:var(--tsw-shadow-sm)}
.cta-band-soft h2{color:var(--tsw-ink,#0f172a)}
.cta-band-soft p{color:var(--tsw-muted)}
@media(max-width:1200px){
.partner-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:980px){
.partner-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
.partner-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.partner-item{min-height:76px;padding:16px 12px}
.partner-item img{max-height:40px}
.news-body{padding:18px}
}
/* ==========================================================================
TripSkyWay — PHASE 2 PREMIUM HOMEPAGE
APPEND THIS ENTIRE FILE TO THE END OF public/assets/css/website.css
==========================================================================
Every rule below is scoped under .tsw-p2 (the homepage wrapper) so no other
public page — Destinations, Packages, Blog, Contact, FAQ — can be affected.
Nothing above this block in website.css is edited or overridden globally.
Phase 1 CSS is untouched. Phase 1 tokens are reused where they exist.
========================================================================== */
.tsw-p2{
/* Phase 2 editorial tokens — namespaced, cannot collide with --tsw-* */
--p2-ivory:#F8F6F0;
--p2-paper:#FBFAF8;
--p2-sand:#F3F1EC;
--p2-navy:#08152F;
--p2-ink:#071228;
--p2-blue:#111E8E;
--p2-blue-dark:#0E1A79;
--p2-gold:#FFA500;
/* The gold above is decoration - rules, icons, badge grounds - and at
1.97:1 on white it is emphatically not a text colour. This darker tone of
the same hue reaches 5.34:1 on white and stays above 4.5:1 on every light
ground the site uses, and it is what small gold TEXT uses. Kept as a token
because it encodes a contrast decision, not just a colour. */
--p2-gold-text:#946000;
--p2-gold-soft:#8F5C00;
--p2-gold-light:#FFC061; --p2-gold-press:#E08E00;
--p2-body:#5A6472;
--p2-muted:#636D7C;
--p2-line:#E3E1DC;
--p2-line-warm:#E3DBC9;
--p2-line-faint:#EAE3D4;
/* Newsreader is the approved display face. Until it is loaded (see
IMPLEMENTATION-NOTES.md → Fonts) this falls back to Georgia, which is
metrically close and present on every Hostinger-served client. */
--p2-serif:Newsreader,Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
--p2-wrap:1320px;
}
/* ---------- Shared Phase 2 primitives ---------- */
.tsw-p2 .p2-wrap{max-width:var(--p2-wrap);margin:0 auto;padding:0 40px}
.tsw-p2 .p2-sec{padding:100px 0}
.tsw-p2 .p2-sec-ivory{background:var(--p2-ivory)}
.tsw-p2 .p2-sec-sand{background:var(--p2-sand)}
.tsw-p2 .p2-sec-navy{background:var(--p2-navy)}
.tsw-p2 .p2-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.tsw-p2 .p2-eyebrow i{display:block;width:28px;height:1px;background:var(--p2-blue);flex:0 0 28px}
.tsw-p2 .p2-eyebrow span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--p2-blue);font-weight:600;white-space:nowrap;
/* reset the Phase 1 .eyebrow pill treatment if the class is ever combined */
background:none;padding:0;border-radius:0;display:inline}
.tsw-p2 .p2-eyebrow-gold i{background:var(--p2-gold)}
.tsw-p2 .p2-eyebrow-gold span{color:var(--p2-gold-text)}
.tsw-p2 .p2-eyebrow-amber i{background:var(--p2-gold-soft)}
.tsw-p2 .p2-eyebrow-amber span{color:var(--p2-gold-soft)}
.tsw-p2 .p2-eyebrow-onnavy i{background:var(--p2-gold-light)}
.tsw-p2 .p2-eyebrow-onnavy span{color:var(--p2-gold-light);font-weight:500}
.tsw-p2 h2.p2-h2{font-family:var(--p2-serif);font-weight:300;font-size:47px;line-height:1.06;
letter-spacing:-.024em;color:var(--p2-navy);margin:0 0 14px;text-wrap:balance}
.tsw-p2 .p2-sec-navy h2.p2-h2{color:#fff}
.tsw-p2 .p2-lede{margin:0;font-size:16.5px;line-height:1.68;color:var(--p2-body);max-width:52ch;text-wrap:pretty}
.tsw-p2 .p2-sec-navy .p2-lede{color:rgba(255,255,255,.66)}
.tsw-p2 .p2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
margin-bottom:42px;flex-wrap:wrap;text-align:left;max-width:none}
.tsw-p2 .p2-head-col{max-width:560px}
/* Text link with hairline rule — replaces pill buttons in editorial contexts */
.tsw-p2 a.p2-link{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;
color:var(--p2-navy);border-bottom:1px solid #C9C5BC;padding-bottom:3px;white-space:nowrap;
transition:color .16s ease,border-color .16s ease}
.tsw-p2 a.p2-link:hover{color:var(--p2-blue);border-bottom-color:var(--p2-blue)}
.tsw-p2 a.p2-link svg{width:15px;height:15px;flex:0 0 15px}
.tsw-p2 .p2-sec-navy a.p2-link{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.tsw-p2 .p2-sec-navy a.p2-link:hover{color:var(--p2-gold-light);border-bottom-color:var(--p2-gold-light)}
/* Squared editorial buttons — scoped, does not touch Phase 1 .btn */
.tsw-p2 .p2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:inherit;font-size:15px;font-weight:600;padding:16px 30px;border-radius:4px;
border:1px solid transparent;cursor:pointer;line-height:1.1;text-decoration:none;transition:.18s ease}
.tsw-p2 a.p2-btn-primary,.tsw-p2 .p2-btn-primary{background:var(--p2-blue);color:#fff}
.tsw-p2 a.p2-btn-primary:hover{background:var(--p2-blue-dark);color:#fff}
.tsw-p2 a.p2-btn-outline,.tsw-p2 .p2-btn-outline{background:transparent;color:var(--p2-navy);border-color:var(--p2-navy)}
.tsw-p2 a.p2-btn-outline:hover{background:var(--p2-navy);color:#fff}
.tsw-p2 a.p2-btn-onimg{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);font-weight:500}
.tsw-p2 a.p2-btn-onimg:hover{background:rgba(255,255,255,.1);color:#fff}
.tsw-p2 .p2-btn svg{width:16px;height:16px;flex:0 0 16px}
/* CMS content-volume note (dev/QA aid, hidden in production by default) */
.tsw-p2 .p2-note{display:none}
/* ==========================================================================
1. QUICKBAR / PLANNER — Phase 2 presentation of the EXISTING Phase 1 form
--------------------------------------------------------------------------
The form markup, action, CSRF, honeypot and validation are unchanged. Only
presentation is restyled, and only when the homepage carries .tsw-p2.
Production already ships .quickbar-wrap{position:relative;z-index:6}, which
is why the design-frame clipping bug does not exist here — the card already
paints above the hero. The overlap is re-derived below against the real DOM:
-32px on desktop (Phase 1 value, retained), with the heading given enough
top padding that it can never sit inside the overlap band.
========================================================================== */
.tsw-p2 .quickbar-wrap{position:relative;z-index:6;margin-top:-92px}
.tsw-p2 .quickbar{background:#fff;border:1px solid var(--p2-line);border-radius:6px;
box-shadow:0 30px 70px rgba(7,18,40,.14);padding:0;max-width:none;position:relative;z-index:2}
.tsw-p2 .quickbar-head{display:block;padding:26px 34px 20px;margin:0;border-bottom:1px solid #EFEDE8}
.tsw-p2 .quickbar-title{font-family:var(--p2-serif);font-weight:400;font-size:26px;line-height:1.2;
letter-spacing:normal;color:var(--p2-navy);margin:0 0 6px}
.tsw-p2 .quickbar-sub{margin:0;font-size:14px;color:var(--p2-muted);font-weight:400}
.tsw-p2 .quickbar form{padding:26px 34px 30px}
.tsw-p2 .quickbar-fields{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:18px;align-items:end}
.tsw-p2 .quickbar .field{padding-bottom:22px}
.tsw-p2 .quickbar .field label{font-size:11px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--p2-muted);margin-bottom:9px}
.tsw-p2 .quickbar .field input{height:48px;padding:0 14px;border:1px solid #DCD9D2;border-radius:4px;
background:#fff;font-size:15px;font-weight:400;color:var(--p2-navy)}
.tsw-p2 .quickbar .field input:focus{border-color:var(--p2-blue);box-shadow:0 0 0 3px rgba(17,30,142,.12);background:#fff}
.tsw-p2 .quickbar-submit{height:48px;border-radius:4px;padding:0 28px;font-size:15px;font-weight:600;
background:var(--p2-navy);color:#fff;border:0;box-shadow:none;margin-bottom:22px;white-space:nowrap}
.tsw-p2 .quickbar-submit:hover{background:var(--p2-blue);color:#fff;transform:none;box-shadow:none}
.tsw-p2 .p2-planner-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.tsw-p2 .p2-planner-chips b{font-size:12.5px;color:var(--p2-muted);font-weight:400;margin-right:4px}
.tsw-p2 .p2-planner-chips a{background:#F7F5F1;border:1px solid #E8E5DF;border-radius:999px;
padding:7px 15px;font-size:13px;color:#3F4A5A}
.tsw-p2 .p2-planner-chips a:hover{border-color:var(--p2-blue);color:var(--p2-blue)}
/* ==========================================================================
2. TRUST METRICS — five rule-separated figures, no cards
========================================================================== */
.tsw-p2 .p2-trust{padding:86px 0 78px}
.tsw-p2 .p2-trust-grid{display:grid;grid-template-columns:repeat(5,1fr);
border-top:1px solid var(--p2-line);border-bottom:1px solid var(--p2-line)}
.tsw-p2 .p2-trust-cell{padding:36px 30px 34px;border-right:1px solid var(--p2-line)}
.tsw-p2 .p2-trust-cell:last-child{border-right:0}
.tsw-p2 .p2-trust-val{font-family:var(--p2-serif);font-weight:300;font-size:46px;line-height:1;
color:var(--p2-navy);letter-spacing:-.02em;white-space:nowrap}
.tsw-p2 .p2-trust-lab{margin-top:12px;font-size:13px;color:var(--p2-muted);line-height:1.45}
/* ==========================================================================
3. INTERNATIONAL DESTINATIONS — editorial mosaic (1 featured + n tiles)
========================================================================== */
.tsw-p2 .p2-mosaic{display:grid;grid-template-columns:1.55fr 1fr 1fr;grid-auto-rows:270px;gap:18px}
.tsw-p2 .p2-mosaic-feat{grid-row:span 2}
.tsw-p2 .p2-tile{position:relative;overflow:hidden;border-radius:4px;display:block;background:var(--p2-sand)}
.tsw-p2 .p2-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.tsw-p2 .p2-tile:hover img{transform:scale(1.03)}
.tsw-p2 .p2-tile::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,18,40,0) 45%,rgba(7,18,40,.8) 100%)}
.tsw-p2 .p2-mosaic-feat.p2-tile::after{background:linear-gradient(180deg,rgba(7,18,40,0) 42%,rgba(7,18,40,.86) 100%)}
.tsw-p2 .p2-tile-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;display:block}
.tsw-p2 .p2-mosaic-feat .p2-tile-cap{left:32px;right:32px;bottom:30px}
.tsw-p2 .p2-tile-kick{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--p2-gold-light);margin-bottom:12px}
.tsw-p2 .p2-tile-cap h3{font-family:var(--p2-serif);font-weight:400;font-size:24px;line-height:1.15;
margin:0 0 5px;color:#fff;letter-spacing:normal}
.tsw-p2 .p2-mosaic-feat .p2-tile-cap h3{font-size:38px;line-height:1.1;margin-bottom:10px}
.tsw-p2 .p2-tile-meta{display:block;font-size:12.5px;color:rgba(255,255,255,.74)}
.tsw-p2 .p2-mosaic-feat .p2-tile-desc{display:block;margin:0 0 16px;font-size:15px;color:rgba(255,255,255,.8);max-width:380px}
/* ==========================================================================
4. DOMESTIC DESTINATIONS — ranked index beside an image panel
========================================================================== */
.tsw-p2 .p2-dom{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:start}
.tsw-p2 .p2-dom-list{border-top:1px solid rgba(255,255,255,.14)}
.tsw-p2 a.p2-dom-row{display:flex;align-items:center;gap:22px;padding:19px 4px;
border-bottom:1px solid rgba(255,255,255,.14);color:#fff}
.tsw-p2 a.p2-dom-row:hover{background:rgba(255,255,255,.04);color:#fff}
.tsw-p2 .p2-dom-n{font-size:11.5px;color:rgba(255,255,255,.4);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;width:26px;flex:0 0 26px}
.tsw-p2 .p2-dom-name{font-family:var(--p2-serif);font-size:26px;font-weight:400;flex:1;color:#fff;min-width:0}
.tsw-p2 .p2-dom-sub{font-size:13px;color:rgba(255,255,255,.55)}
.tsw-p2 .p2-dom-row svg{width:16px;height:16px;flex:0 0 16px;stroke:rgba(255,255,255,.5)}
.tsw-p2 .p2-dom-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tsw-p2 .p2-dom-panel .p2-tile{height:200px}
.tsw-p2 .p2-dom-panel .p2-dom-lead{grid-column:span 2;height:330px}
/* ==========================================================================
5. CURATED JOURNEYS — horizontal package rail (scroll-snap)
Replaces the alternating editorial rows. Everything is namespaced .p2-cj-*.
========================================================================== */
/* ---- Section shell ------------------------------------------------------ */
.tsw-p2 .p2-cj-section{background:var(--p2-ivory)}
/* The eyebrow keeps its gold rule but takes navy text. Measured on this
section's ivory ground, --p2-gold (#FFA500) as 11px/600 type comes out at
1.83:1 - nowhere near AA - so gold stays decorative here and the word itself
is navy at 16.77:1. Scoped to this section only; the shared .p2-eyebrow
rules are untouched. */
.tsw-p2 .p2-cj-section .p2-eyebrow span{color:var(--p2-navy)}
.tsw-p2 .p2-cj-lede{max-width:390px}
.tsw-p2 .p2-cj{position:relative}
/* ---- The rail ----------------------------------------------------------- *
Native scroll-snap does all the scrolling. JS only decorates it, so with
scripting disabled the rail still swipes, trackpad-scrolls and keyboard-
scrolls exactly the same. overflow-x:auto isolates the horizontal scroll to
this element - the document itself never gains a horizontal scrollbar.
The vertical padding is what keeps the card's hover lift and its inset
focus ring from being clipped by that same overflow. */
.tsw-p2 .p2-cj-track{
list-style:none;margin:0;padding:6px 0 14px;
display:flex;align-items:stretch;gap:28px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;
}
.tsw-p2 .p2-cj-track::-webkit-scrollbar{display:none}
.tsw-p2 .p2-cj-item{flex:0 0 calc((100% - 56px)/3);min-width:0;display:flex;scroll-snap-align:start}
/* ---- Card --------------------------------------------------------------- */
.tsw-p2 a.p2-cj-card{display:flex;flex-direction:column;width:100%;color:inherit;
background:var(--p2-paper);border:1px solid var(--p2-line);border-radius:5px;overflow:hidden;
transition:border-color .2s ease,transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease}
.tsw-p2 a.p2-cj-card:hover{color:inherit;border-color:#D9D2C2;transform:translateY(-3px);
box-shadow:0 14px 34px rgba(8,21,47,.10)}
/* Inset ring: an outset one would be clipped by the rail's own overflow. */
.tsw-p2 a.p2-cj-card:focus-visible{outline:2px solid var(--p2-navy);outline-offset:-2px}
.tsw-p2 .p2-cj-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--p2-sand)}
.tsw-p2 .p2-cj-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.tsw-p2 a.p2-cj-card:hover .p2-cj-media img{transform:scale(1.04)}
/* Deliberate image-less state. A package with no hero_image of its own gets a
typographic panel at the identical ratio - never a stand-in photograph of
somewhere else, and never a layout shift. */
.tsw-p2 .p2-cj-media.is-noimg{background:linear-gradient(155deg,#08152F 0%,#16305C 62%,#1E3E74 100%)}
.tsw-p2 .p2-cj-noimg{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:15px;padding:0 24px;text-align:center}
.tsw-p2 .p2-cj-noimg b{font-family:var(--p2-serif);font-weight:300;font-size:27px;line-height:1.16;
letter-spacing:-.012em;color:#fff}
.tsw-p2 .p2-cj-noimg i{display:block;width:34px;height:1px;background:var(--p2-gold-light)}
.tsw-p2 .p2-cj-content{flex:1;display:flex;flex-direction:column;padding:26px 26px 24px}
.tsw-p2 .p2-cj-dest{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
color:var(--p2-navy);margin-bottom:11px}
.tsw-p2 h3.p2-cj-title{font-family:var(--p2-serif);font-weight:400;font-size:23px;line-height:1.2;
letter-spacing:-.012em;color:var(--p2-navy);margin:0 0 12px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tsw-p2 .p2-cj-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;
font-size:13px;color:var(--p2-body)}
.tsw-p2 .p2-cj-meta i{display:block;width:1px;height:11px;background:#D8D2C4;flex:0 0 1px}
.tsw-p2 .p2-cj-sum{margin:0 0 22px;font-size:14.5px;line-height:1.62;color:var(--p2-body);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tsw-p2 .p2-cj-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--p2-line)}
.tsw-p2 .p2-cj-price{display:flex;flex-direction:column;gap:3px;min-width:0}
.tsw-p2 .p2-cj-price small{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--p2-body)}
.tsw-p2 .p2-cj-price b{font-family:var(--p2-serif);font-weight:400;font-size:24px;line-height:1.08;
letter-spacing:-.01em;color:var(--p2-navy)}
.tsw-p2 .p2-cj-price em{font-style:normal;font-size:12px;color:var(--p2-body)}
/* Gold is load-bearing only as a rule and an arrow here: at #FFA500 it does not
reach AA as small body text, so every label stays navy or --p2-body. */
.tsw-p2 .p2-cj-go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
color:var(--p2-navy);white-space:nowrap;padding-bottom:3px;border-bottom:1px solid var(--p2-gold)}
.tsw-p2 .p2-cj-go svg{width:15px;height:15px;flex:0 0 15px;color:var(--p2-gold);transition:transform .22s ease}
.tsw-p2 a.p2-cj-card:hover .p2-cj-go svg{transform:translateX(3px)}
/* ---- Controls ----------------------------------------------------------- *
Rendered hidden and revealed by initCuratedCarousel(), so a JS-less visitor
is never shown buttons that cannot work. */
.tsw-p2 .p2-cj-bar{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin-top:22px}
.tsw-p2 .p2-cj-bar[hidden]{display:none}
.tsw-p2 .p2-cj-dots{display:flex;align-items:center;gap:2px}
.tsw-p2 button.p2-cj-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.tsw-p2 button.p2-cj-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9C1AE;
transition:background .18s ease,transform .18s ease}
.tsw-p2 button.p2-cj-dot[aria-current="true"]::before{background:var(--p2-gold);transform:scale(1.3)}
.tsw-p2 button.p2-cj-dot:focus-visible{outline:2px solid var(--p2-navy);outline-offset:1px}
.tsw-p2 .p2-cj-nav{display:flex;align-items:center;gap:10px}
.tsw-p2 button.p2-cj-arrow{width:46px;height:46px;padding:0;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;color:var(--p2-navy);border:1px solid var(--p2-line-warm);border-radius:50%;
transition:background .18s ease,border-color .18s ease,color .18s ease}
.tsw-p2 button.p2-cj-arrow svg{width:18px;height:18px}
.tsw-p2 button.p2-cj-arrow:hover:not(:disabled){background:var(--p2-navy);border-color:var(--p2-navy);color:#fff}
.tsw-p2 button.p2-cj-arrow:focus-visible{outline:2px solid var(--p2-navy);outline-offset:2px}
.tsw-p2 button.p2-cj-arrow:disabled{opacity:.38;cursor:default}
.tsw-p2 .p2-cj-cta{margin-top:44px;padding-top:34px;border-top:1px solid var(--p2-line-warm);text-align:center}
/* ==========================================================================
6. TRAVEL STYLES — see the .p2-travel-styles-* block at the end of this file
The old portrait tiles borrowed .p2-tile, which the international and
inbound sections also use, so this section could not be restyled without
reaching into them. The redesign has its own namespace instead; the rules
that lived here are gone because nothing references them any more.
========================================================================== */
/* ==========================================================================
7. WHY TRIPSKYWAY — approved editorial two-column, 43/57
========================================================================== */
.tsw-p2 .p2-why{background:var(--p2-ivory);padding:120px 0 0}
.tsw-p2 .p2-why-grid{display:grid;grid-template-columns:39fr 61fr;gap:96px;align-items:start}
/* ---- Left column: the editorial anchor -------------------------------- */
.tsw-p2 .p2-why-intro{position:sticky;top:120px;display:flex;flex-direction:column;align-items:flex-start}
/* The eyebrow word is navy: --p2-gold measures under AA as 11px type on this
ivory ground, so gold stays on the rule, the lozenge and the numerals. */
.tsw-p2 .p2-why-eyebrow span{color:var(--p2-navy)}
.tsw-p2 h2.p2-why-heading{font-family:var(--p2-serif);font-weight:300;font-size:58px;line-height:1.04;
letter-spacing:-.028em;color:var(--p2-navy);margin:0 0 34px;max-width:12ch;text-wrap:balance}
/* Hairline-and-lozenge rule between the heading and the supporting line. */
.tsw-p2 .p2-why-rule{display:flex;align-items:center;gap:10px;width:210px;
color:var(--p2-gold);margin:0 0 32px}
.tsw-p2 .p2-why-rule i{flex:1 1 auto;height:1px;
background:linear-gradient(90deg,rgba(255,165,0,0) 0%,rgba(255,165,0,.55) 100%)}
.tsw-p2 .p2-why-rule i:last-child{background:linear-gradient(90deg,rgba(255,165,0,.55) 0%,rgba(255,165,0,0) 100%)}
.tsw-p2 .p2-why-rule svg{width:22px;height:11px;flex:0 0 22px;display:block}
.tsw-p2 .p2-why-intro-text{margin:0 0 34px;font-size:17px;line-height:1.72;
color:var(--p2-body);max-width:430px;text-wrap:pretty}
.tsw-p2 a.p2-why-team{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;
color:var(--p2-navy);border-bottom:1px solid var(--p2-gold);padding:6px 16px 9px 0;
transition:color .18s ease,border-color .18s ease}
.tsw-p2 a.p2-why-team:hover{color:var(--p2-gold);border-bottom-color:var(--p2-gold)}
.tsw-p2 a.p2-why-team:focus-visible{outline:2px solid var(--p2-navy);outline-offset:3px}
.tsw-p2 a.p2-why-team svg{width:15px;height:15px;flex:0 0 15px;transition:transform .2s ease}
.tsw-p2 a.p2-why-team:hover svg{transform:translateX(3px)}
/* Line-art landscape. Deliberately faint - it is texture, not content, and
must never compete with the heading above it. */
.tsw-p2 .p2-why-illustration{display:block;width:100%;max-width:500px;height:auto;
margin:56px 0 0;color:#BE9A5C;opacity:.52;pointer-events:none}
/* ---- Right column: the four benefit rows ------------------------------ */
.tsw-p2 .p2-why-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--p2-line-warm)}
.tsw-p2 .p2-why-item{display:grid;grid-template-columns:86px 74px 1fr;align-items:start;
padding:44px 0;border-bottom:1px solid var(--p2-line-warm)}
.tsw-p2 .p2-why-item:last-child{border-bottom:0}
.tsw-p2 .p2-why-mark{display:contents}
/* Measured on this ivory ground: the brand gold #FFA500 is 1.83:1, so it
cannot carry these numerals. They used to use a one-off #A97D28 (3.44:1 -
over the 3:1 large-text bar and nothing more); they now use the shared
--p2-gold-text at 4.94:1, which clears AA outright and is one less private
literal in the stylesheet. The brand gold is unchanged everywhere else and
still carries the rule, the lozenge, the icons and the CTA underline. */
.tsw-p2 .p2-why-number{font-family:var(--p2-serif);font-weight:300;font-size:48px;line-height:.92;
letter-spacing:-.03em;color:var(--p2-gold-text)}
/* Soft disc behind the icon - the reference's quiet badge, built from the
existing paper token rather than a new colour. */
.tsw-p2 .p2-why-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--p2-paper);border:1px solid var(--p2-line-warm);
color:var(--p2-gold);box-shadow:0 6px 18px rgba(8,21,47,.05)}
.tsw-p2 .p2-why-icon svg{width:27px;height:27px;display:block;stroke-width:1.05;fill:none}
.tsw-p2 .p2-why-content{padding-left:34px;border-left:1px solid var(--p2-line-faint);min-width:0}
.tsw-p2 h3.p2-why-title{font-family:var(--p2-serif);font-weight:400;font-size:27px;line-height:1.2;
letter-spacing:-.012em;color:var(--p2-navy);margin:0 0 12px;text-wrap:balance}
.tsw-p2 .p2-why-description{margin:0;font-size:16px;line-height:1.72;color:var(--p2-body);
max-width:52ch;text-wrap:pretty}
/* Closing hairline - articulates the boundary with the ivory Process section
that follows, without touching the Process markup. */
.tsw-p2 .p2-why-close{height:1px;background:var(--p2-line-warm);margin-top:104px}
/* ==========================================================================
8. THE PROCESS — approved five-step continuous timeline
========================================================================== */
.tsw-p2 .p2-process{background:var(--p2-ivory);padding:126px 0 108px}
/* ---- Head -------------------------------------------------------------- */
.tsw-p2 .p2-process-head{max-width:660px;margin-bottom:78px}
/* Navy, not the shared .p2-eyebrow-amber gold. Scoped to this section only, so
Offers and Customer Experiences keep the treatment they have; the gold still
carries the rule beside it. (The 2.74:1 this comment used to cite was
measured against the pre-brand #C08A2E. --p2-gold-soft is now #8F5C00 and
clears AA at 5.25:1 on ivory, so this override is a compositional choice -
navy heads read quieter here - and no longer an accessibility repair.) */
.tsw-p2 .p2-process-eyebrow span{color:var(--p2-navy)}
.tsw-p2 h2.p2-process-h2{font-family:var(--p2-serif);font-weight:300;font-size:58px;line-height:1.04;
letter-spacing:-.028em;color:var(--p2-navy);margin:0 0 20px;max-width:16ch;text-wrap:balance}
.tsw-p2 .p2-process-lede{margin:0;font-size:16.5px;line-height:1.7;
color:var(--p2-body);max-width:56ch;text-wrap:pretty}
/* ---- The timeline ------------------------------------------------------ *
A real . --p2-step-count comes from the markup, so adding or removing a
step in the CMS re-divides the row instead of breaking it. */
.tsw-p2 ol.p2-steps{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(var(--p2-step-count,5),minmax(0,1fr));column-gap:0}
.tsw-p2 .p2-step{min-width:0}
.tsw-p2 .p2-step-mark{position:relative;display:block;height:34px}
.tsw-p2 .p2-step-mark i{position:absolute;display:block}
.tsw-p2 i.p2-step-rail{top:9px;left:6px;width:calc(100% - 6px);height:1px;background:var(--p2-line-warm)}
.tsw-p2 .p2-step.is-last i.p2-step-rail{width:0}
.tsw-p2 i.p2-step-ring{top:3px;left:0;width:13px;height:13px;border-radius:50%;
border:1px solid var(--p2-gold);background:var(--p2-ivory)}
.tsw-p2 i.p2-step-dot{top:8px;left:5px;width:3px;height:3px;border-radius:50%;background:var(--p2-gold)}
.tsw-p2 .p2-step-body{padding:26px 44px 0 0}
.tsw-p2 .p2-step-num{display:block;font-family:var(--p2-serif);font-weight:300;font-size:60px;line-height:1;
letter-spacing:-.03em;color:var(--p2-navy);margin-bottom:18px}
/* The icon sits on a soft disc, the same quiet badge the Why section uses,
built from existing tokens rather than a new colour. */
.tsw-p2 .p2-step-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--p2-paper);border:1px solid var(--p2-line-warm);
color:var(--p2-gold);margin-bottom:24px;box-shadow:0 6px 18px rgba(8,21,47,.05)}
.tsw-p2 .p2-step-icon svg{width:25px;height:25px;display:block;stroke-width:1.05;fill:none}
/* Two lines are reserved so a one-line title ("You travel") does not start its
description a line above its neighbours' - the five descriptions have to
begin on the same baseline for the row to read as a timeline. */
.tsw-p2 h3.p2-step-title{font-family:var(--p2-serif);font-weight:400;font-size:25px;line-height:1.2;
letter-spacing:-.012em;color:var(--p2-navy);margin:0 0 12px;min-height:2.4em;text-wrap:balance}
.tsw-p2 .p2-step-text{margin:0;font-size:15.5px;line-height:1.7;color:var(--p2-body);text-wrap:pretty}
/* ---- Closing rule ------------------------------------------------------- */
.tsw-p2 .p2-process-foot{display:flex;align-items:center;justify-content:flex-end;gap:22px;margin:88px 0 0}
.tsw-p2 i.p2-process-rule{flex:1 1 auto;height:1px;background:var(--p2-line-warm)}
/* Was #8A8579, which measures 3.4:1 on this ground - under AA for 11px type.
--p2-body is 5.55:1 here and is already the section's body colour, so no new
value is introduced. */
.tsw-p2 .p2-process-foot span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
font-weight:600;color:var(--p2-body);white-space:nowrap}
.tsw-p2 .p2-process-foot b{width:3px;height:3px;border-radius:50%;background:var(--p2-gold);flex:0 0 3px}
/* ==========================================================================
9. CURRENT OFFERS — approved premium editorial redesign
==========================================================================
Own .p2-of-* namespace. The retired markup leaned on .p2-offer-kick, which
Customer Experiences also uses (see .p2-wall-quote below), so nothing shared
is restyled here — .p2-offer-kick is left in place further down, now owned
solely by the Customer Experiences quote card.
Gold carries the rules, the badge outline and the icons. It never carries
small body text here: the brand gold measures 1.83:1 on the section's ivory
and 1.97:1 on the white cards, nowhere near AA, so the destination label is
navy (18.12:1) and every metadata line is --p2-body (6:1) instead. */
/* One dominant offer left (~58%), two image-led recommendations right (~42%). */
.tsw-p2 .p2-of-grid{display:grid;grid-template-columns:1.26fr 1fr;gap:42px;align-items:stretch}
.tsw-p2 .p2-of-head{margin-bottom:48px}
/* Navy, not the shared .p2-eyebrow-amber gold - a compositional choice scoped
to this section; the gold rule beside the word is decorative. (--p2-gold-soft
is #8F5C00 since the brand pass and clears AA on ivory at 5.25:1; the
"under AA" this comment used to claim was true only of the old #C08A2E.) */
.tsw-p2 .p2-of-eyebrow span{color:var(--p2-navy)}
.tsw-p2 .p2-of-lede{margin:16px 0 0;max-width:54ch}
/* Shared: the short gold hairline that separates a title block from its
figures, and the small decorative metadata glyph. */
.tsw-p2 i.p2-of-rule{display:block;width:76px;height:1px;background:var(--p2-gold);
margin:0 0 18px;flex:0 0 auto}
.tsw-p2 i.p2-of-rule-light{background:var(--p2-gold-light);margin-bottom:20px}
.tsw-p2 svg.p2-of-i{width:14px;height:14px;flex:0 0 14px;color:var(--p2-gold);
margin-right:8px;vertical-align:-2px}
/* ---- Featured offer ----------------------------------------------------- *
Type sits on the photograph under a vertical ink scrim, so every label is
white on near-opaque #071228 rather than gold on ivory. */
.tsw-p2 a.p2-of-feat{position:relative;display:block;overflow:hidden;border-radius:6px;
min-height:660px;color:#fff;background:var(--p2-ink);isolation:isolate}
.tsw-p2 a.p2-of-feat:hover{color:#fff}
.tsw-p2 .p2-of-feat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.tsw-p2 a.p2-of-feat:hover .p2-of-feat-img{transform:scale(1.035)}
/* The scrim tracks where the type actually sits, in TWO layers.
*
* The previous single vertical ramp was transparent across the top of the
* card, which was fine while the title stayed short - but a long title pushes
* the badge and the first lines up into the bare photograph, and over a bright
* frame (snow, sky, water) they stopped being readable. Measured over a pure
* white photograph the badge fell to 1.07:1 and the title to 4.70:1.
*
* HORIZONTAL layer - the readability layer. Every label on this card sits
* between 6.7% and 60% of the card's width (measured from the rendered
* rects, and the title's own max-width:15ch keeps it there however long the
* package name is). White type needs the ink at ~0.62 alpha to clear AA over
* a white frame, so this layer holds >= 0.74 right across that band and only
* then falls away - the right third of the photograph stays clearly visible.
*
* VERTICAL layer - keeps the existing bottom weight, so the price and CTA
* still sit on ink at the point where the horizontal ramp has thinned.
*
* Navy (--p2-navy #08152F) rather than near-black: it reads as a cinematic
* editorial grade rather than a black filter. */
.tsw-p2 .p2-of-feat-scrim{position:absolute;inset:0;display:block;pointer-events:none;
background:
linear-gradient(180deg,rgba(8,21,47,0) 0%,rgba(8,21,47,0) 46%,
rgba(8,21,47,.16) 76%,rgba(8,21,47,.30) 100%),
linear-gradient(90deg,rgba(8,21,47,.90) 0%,rgba(8,21,47,.84) 34%,
rgba(8,21,47,.74) 58%,rgba(8,21,47,.34) 78%,rgba(8,21,47,.04) 100%)}
/* Image-less fallback: the same proportions, a deep navy ground and a quiet
gold wash — never another destination's photograph. */
.tsw-p2 a.p2-of-feat.is-noimg{background:
radial-gradient(120% 90% at 12% 8%,rgba(255,165,0,.16) 0%,rgba(255,165,0,0) 58%),
linear-gradient(160deg,#0E2145 0%,#071228 62%)}
.tsw-p2 a.p2-of-feat.is-noimg .p2-of-feat-scrim{
background:linear-gradient(180deg,rgba(7,18,40,0) 40%,rgba(7,18,40,.55) 100%)}
.tsw-p2 .p2-of-feat-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
height:100%;justify-content:flex-end;padding:46px 48px 44px;max-width:600px}
/* Restrained: a hairline label, not a promotional chip. No "SALE", no "% off",
and it appears on the featured offer only. */
.tsw-p2 .p2-of-badge{display:inline-flex;align-items:center;margin-bottom:20px;
font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
color:var(--p2-gold-light);border:1px solid rgba(255,192,97,.5);
padding:7px 13px;border-radius:2px}
.tsw-p2 h3.p2-of-feat-title{display:block;font-family:var(--p2-serif);font-weight:300;font-size:44px;
line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0 0 20px;max-width:15ch;text-wrap:balance}
.tsw-p2 .p2-of-feat-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;margin-bottom:18px;
font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.86)}
.tsw-p2 .p2-of-feat-meta > span{display:inline-flex;align-items:center;white-space:nowrap}
.tsw-p2 .p2-of-feat-sum{display:block;font-size:15.5px;line-height:1.68;color:rgba(255,255,255,.82);
margin-bottom:24px;max-width:44ch;text-wrap:pretty}
.tsw-p2 .p2-of-feat-price{display:flex;align-items:baseline;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.tsw-p2 .p2-of-feat-price small{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(255,255,255,.74)}
.tsw-p2 .p2-of-feat-price b{font-family:var(--p2-serif);font-weight:400;font-size:34px;
letter-spacing:-.015em;color:#fff}
.tsw-p2 .p2-of-feat-price em{font-style:normal;font-size:13px;color:rgba(255,255,255,.78)}
/* An outlined affordance rather than a filled button: the same restraint as
the badge, and it reads as a link because it is one. */
.tsw-p2 .p2-of-feat-go{display:inline-flex;align-items:center;gap:12px;font-size:13.5px;font-weight:600;
letter-spacing:.02em;color:#fff;padding:15px 26px;border:1px solid rgba(255,192,97,.55);
border-radius:3px;transition:background-color .25s ease,border-color .25s ease}
.tsw-p2 .p2-of-feat-go svg{width:17px;height:17px;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.tsw-p2 a.p2-of-feat:hover .p2-of-feat-go{border-color:var(--p2-gold-light);background:rgba(255,192,97,.12)}
.tsw-p2 a.p2-of-feat:hover .p2-of-feat-go svg{transform:translateX(5px)}
/* ---- The two supporting offers ------------------------------------------ *
Image-led editorial rows, not boxed cards: no border box, no shadow, no
fill — the hairline alone does the separating. */
.tsw-p2 ul.p2-of-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tsw-p2 .p2-of-row{flex:1;display:flex;min-width:0}
.tsw-p2 .p2-of-row + .p2-of-row{border-top:1px solid var(--p2-line-warm)}
.tsw-p2 a.p2-of-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:30px;
align-items:stretch;width:100%;min-width:0;color:inherit;padding:30px 0}
.tsw-p2 .p2-of-row:first-child a.p2-of-item{padding-top:0}
.tsw-p2 .p2-of-row:last-child a.p2-of-item{padding-bottom:0}
.tsw-p2 a.p2-of-item:hover{color:inherit}
.tsw-p2 .p2-of-thumb{display:block;position:relative;overflow:hidden;border-radius:6px;
min-height:260px;background:var(--p2-ink)}
.tsw-p2 .p2-of-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.tsw-p2 a.p2-of-item:hover .p2-of-thumb img{transform:scale(1.05)}
/* Same designed panel as the featured card, at row scale. */
.tsw-p2 .p2-of-thumb.is-noimg{background:
radial-gradient(120% 90% at 18% 10%,rgba(255,165,0,.18) 0%,rgba(255,165,0,0) 60%),
linear-gradient(160deg,#0E2145 0%,#071228 64%)}
.tsw-p2 .p2-of-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
min-width:0}
.tsw-p2 .p2-of-row:first-child .p2-of-body{border-top:1px solid var(--p2-line-warm);padding-top:26px;
justify-content:flex-start}
/* Navy, not gold: the brand gold measures 1.97:1 against the white this
label actually sits on. Navy is 18.12:1. */
.tsw-p2 .p2-of-dest{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.22em;
text-transform:uppercase;font-weight:600;color:var(--p2-navy)}
.tsw-p2 h3.p2-of-title{display:block;font-family:var(--p2-serif);font-weight:400;font-size:26px;
line-height:1.16;letter-spacing:-.014em;color:var(--p2-navy);margin:0 0 14px;text-wrap:pretty;
transition:opacity .25s ease}
.tsw-p2 a.p2-of-item:hover h3.p2-of-title{opacity:.62}
.tsw-p2 .p2-of-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-bottom:18px;
font-size:13px;letter-spacing:.02em;color:var(--p2-body)}
.tsw-p2 .p2-of-meta > span{display:inline-flex;align-items:center;white-space:nowrap}
.tsw-p2 .p2-of-price{display:flex;align-items:baseline;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.tsw-p2 .p2-of-price small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--p2-body)}
.tsw-p2 .p2-of-price b{font-family:var(--p2-serif);font-weight:400;font-size:26px;
letter-spacing:-.012em;color:var(--p2-navy)}
.tsw-p2 .p2-of-price em{font-style:normal;font-size:12.5px;color:var(--p2-body)}
.tsw-p2 .p2-of-go{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;
letter-spacing:.02em;color:var(--p2-navy);border-bottom:1px solid var(--p2-gold);padding-bottom:5px}
.tsw-p2 .p2-of-go svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.tsw-p2 a.p2-of-item:hover .p2-of-go svg{transform:translateX(5px)}
/* .p2-offer-kick is retained below under Customer Experiences, which is now
its only consumer. */
.tsw-p2 .p2-offer-kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--p2-gold-soft);margin-bottom:16px}
/* ==========================================================================
NEUTRAL NO-IMAGE STATES — package cards, destination cards, interior heroes
==========================================================================
These replace three hard-coded photographic fallbacks that put the wrong
picture in front of the visitor: /assets/images/website/pkg-maldives.jpg (a
blue sports car) stood in for every package without a hero_image, and
/assets/images/website/dest-bali.jpg (a Balinese temple) stood in for every
destination without one - so Kashmir and Kerala both advertised Bali.
Deliberately NOT coupled to the Phase 2 .p2-*-is-noimg panels: those live
under the .tsw-p2 wrapper with their own namespaces, while .card-media and
.dest-card are Phase 1 components. These rules use the Phase 1 tokens and
sit outside the frozen Phase 1 block, so the frozen CSS is untouched and the
existing .card-media (4/3) and .dest-card (3/4) boxes keep their dimensions.
Every glyph is decorative and marked aria-hidden in the markup: the card
link already carries the name in aria-label, the destination overlay in its
and the interior hero in its
. */
.card-media.is-noimg,
.dest-card.is-noimg{
background:
radial-gradient(120% 90% at 22% 12%,rgba(245,158,11,.16) 0%,rgba(245,158,11,0) 60%),
linear-gradient(155deg,#16233D 0%,#0F172A 68%);
}
.tsw-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:rgba(245,158,11,.42);pointer-events:none}
.tsw-noimg svg{width:34%;max-width:96px;height:auto;display:block}
.dest-card.is-noimg .tsw-noimg{align-items:flex-start;padding-top:16%}
/* The overlay gradient exists to lift white type off a photograph; over the
flat panel it only muddies it, so it is softened rather than removed (the
type keeps a ground either way). */
.dest-card.is-noimg .overlay{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
/* Interior hero: .page-hero already paints var(--tsw-ink) and its own scrim,
and the 96px padding lives on .page-hero.with-img, so removing the
costs no height. This only stops the panel reading as a flat accident. */
.page-hero.with-img.is-noimg{
background:
radial-gradient(90% 140% at 12% 0%,rgba(245,158,11,.14) 0%,rgba(245,158,11,0) 62%),
linear-gradient(155deg,#16233D 0%,#0F172A 70%);
}
.page-hero.with-img.is-noimg::after{background:linear-gradient(180deg,rgba(11,18,32,.10),rgba(11,18,32,.45))}
/* ==========================================================================
10b. TRAVELLER STORIES — YouTube videos as portrait cards, played in place
==========================================================================
Own .p2-vr-* namespace. Nothing shared is restyled: .p2-eyebrow-amber,
.p2-cj-*, .p2-process-* and .p2-of-* are all untouched, and the
only shared classes borrowed (.p2-sec, .p2-wrap, .p2-head, .p2-h2, .p2-lede)
are used exactly as every other section uses them.
The page ships with ZERO YouTube players: a card is YouTube's own still plus
a play mark, and the privacy-enhanced player is mounted INTO THAT CARD only
when someone clicks. At most one player exists at a time. YouTube's IFrame
Player API is never loaded, so `script-src 'self'` is unchanged; the only CSP
additions anywhere are `frame-src https://www.youtube-nocookie.com` and
`img-src https://i.ytimg.com`. */
.tsw-p2 .p2-vr-head{margin-bottom:46px}
/* Navy, not the shared .p2-eyebrow-amber gold. Scoped to this section only;
the gold rule beside it is decorative and stays. (--p2-gold-soft measures
5.03:1 on this sand ground since the brand pass moved it to #8F5C00; the
2.69:1 this comment used to cite belonged to the old #C08A2E.) */
.tsw-p2 .p2-vr-eyebrow span{color:var(--p2-navy)}
.tsw-p2 .p2-vr-lede{margin:16px 0 0;max-width:52ch}
/* ---- The rail ------------------------------------------------------------ */
.tsw-p2 .p2-vr-rail{position:relative}
.tsw-p2 ul.p2-vr-track{list-style:none;margin:0;padding:4px 0 6px;display:flex;gap:18px;
overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
overscroll-behavior-x:contain}
.tsw-p2 ul.p2-vr-track::-webkit-scrollbar{display:none}
/* --p2-vr-count comes from the markup: fewer reviews than the rail can show
share the row instead of leaving a gap, the same trick --p2-step-count uses
in The Process. Five across on desktop. */
.tsw-p2 .p2-vr-item{--p2-vr-across:min(var(--p2-vr-count,5),5);
flex:0 0 calc((100% - 18px * (var(--p2-vr-across) - 1)) / var(--p2-vr-across));
min-width:0;scroll-snap-align:start}
/* ---- The card ------------------------------------------------------------ *
Portrait, shortened to 3:4.35 so five of them do not make the section taller
than the rest of the homepage rhythm. The 9:16 video window sits centred
inside it - see "The video window" below. */
/* A