/* Orbitz Holidays design tokens — Cerulean scheme
Ivory ground, deep-teal ink, single gold accent.
Type scale: Major Third 1.25. Spacing base: 8px. */
:root {
/* The palette is light-only. Declaring the scheme stops mobile browsers
force-darkening the ivory ground into a muddy grey of their own. */
color-scheme: light;
/* Ink */
--color-ink: #06202b;
--color-ink-soft: #1b4552;
/* Ground */
--color-paper: #f2ede4;
--color-surface: #e9e2d5;
--color-surface-strong: #ddd3c1;
/* Teal */
--color-brand: #1b4552;
--color-brand-deep: #06202b;
--color-brand-light: #d8e0e2;
/* Single gold accent — used for both Domestic and International */
--color-accent: #c8a96a;
--color-accent-ink: #6f5318;
--color-accent-soft: #efe4cd;
--color-domestic: var(--color-accent);
--color-domestic-soft: var(--color-accent-soft);
--color-international: var(--color-accent);
--color-international-soft: var(--color-accent-soft);
--color-highlight: var(--color-accent);
/* Neutrals and lines */
--color-white: #fdfcf8;
--color-black: #06202b;
--color-line: #cdc3b2;
--color-rule: #1b4552;
--color-placeholder: #ded7ca;
--color-placeholder-ink: #1b4552;
/* Status */
--color-success: #1b4552;
--color-warning: #6f5318;
--color-caution: #8a4a3a;
--color-focus: #6f5318;
/* Depth */
--color-overlay: rgba(0, 0, 0, 0.72);
--color-overlay-soft: rgba(0, 0, 0, 0.24);
--color-shadow: rgba(20, 16, 12, 0.18);
/* Type */
--font-display: "Newsreader", Georgia, "Times New Roman", serif;
--font-body: "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.25rem;
--text-lg: 1.563rem;
--text-xl: 1.953rem;
--text-2xl: clamp(2.75rem, 6vw, 5.96rem);
--text-display: 3.052rem;
/* Space — 8px rhythm */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 2.5rem;
--space-6: 3rem;
--space-8: 4rem;
--space-10: 5rem;
--space-12: 6rem;
--section-space: clamp(4rem, 8vw, 8rem);
/* Form */
--radius-sm: 0.25rem;
--radius-md: 0.25rem;
--radius-lg: 0.5rem;
--radius-pill: 999rem;
/* Media depth — photographs are cut into their plate rather than laid on it.
Radii are concentric: plate radius = media radius + the plate's padding. */
--radius-media: 1rem;
--radius-plate: 1.625rem;
--shadow-well: inset 0 2px 5px rgba(6, 32, 43, 0.34), inset 0 -1px 0 rgba(253, 252, 248, 0.35);
--edge-media: inset 0 0 0 1px rgba(6, 32, 43, 0.09);
--lip-plate: inset 0 1px 0 rgba(253, 252, 248, 0.9);
--shadow-sm: 0 0.5rem 2rem var(--color-shadow);
--shadow-lg: 0 2rem 5rem var(--color-shadow);
--container: 82rem;
--container-narrow: 54rem;
--touch: 2.75rem;
--line: 0.0625rem;
--line-strong: 0.125rem;
/* Motion. --duration is for scene changes (slides, panels, reveals);
--duration-fast is for direct feedback on controls the reader touches
constantly (button and card hover, arrow colour), where anything over
~200ms reads as lag rather than response. */
--duration: 0.55s;
--duration-fast: 0.18s;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}html.gsap-enhanced{scroll-behavior:auto}/* ScrollTrigger measures with instant jumps; see gsap-scroll.js */body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--text-base)/1.65 var(--font-body)}body.nav-open{overflow:hidden}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-underline-offset:.2em}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}h1,h2,h3,p{margin-block-start:0}h1,h2,h3{font-family:var(--font-display);line-height:1.08;text-wrap:balance}h1{font-size:var(--text-2xl);font-weight:500;letter-spacing:-.035em}h2{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:500;letter-spacing:-.02em}h3{font-size:var(--text-lg);font-weight:600}p{max-width:68ch;color:var(--color-ink-soft)}:focus-visible{outline:var(--line-strong) solid var(--color-focus);outline-offset:.25rem}.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}.skip-link{position:fixed;z-index:100;top:-5rem;left:var(--space-2);background:var(--color-highlight);color:var(--color-ink);padding:var(--space-1) var(--space-2);font-weight:700}.skip-link:focus{top:var(--space-2)}.shell{width:min(calc(100% - 2rem),var(--container));margin-inline:auto}.narrow-shell{width:min(calc(100% - 2rem),var(--container-narrow));margin-inline:auto}.section{padding-block:var(--section-space)}.section-tint{background:var(--color-surface)}.eyebrow{margin-bottom:var(--space-2);color:var(--color-international);font-size:var(--text-xs);font-weight:800;letter-spacing:.15em;text-transform:uppercase}.section-heading{margin-bottom:var(--space-5)}.section-heading>:last-child{margin-bottom:0}.section-heading.inverse h2,.section-heading.inverse p{color:var(--color-white)}.placeholder-copy{padding:var(--space-3);border:var(--line) dashed var(--color-ink-soft);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-placeholder-ink);font-weight:700}.button{min-height:var(--touch);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:.75rem 1.25rem;border:var(--line-strong) solid transparent;border-radius:var(--radius-pill);text-decoration:none;font-weight:800;cursor:pointer;transition:transform var(--duration-fast) var(--ease),background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease)}@media(hover:hover) and (pointer:fine){.button:hover{transform:translateY(-.125rem)}}.button-primary{background:var(--color-highlight);color:var(--color-brand-deep)}.button-secondary{border-color:transparent;background:var(--color-brand-deep);color:var(--color-white)}
.button-secondary:hover,.button-secondary:focus-visible{background:var(--color-brand)}.text-link{font-weight:800;color:var(--color-international)}
.site-header{position:relative;z-index:30;border-bottom:var(--line) solid var(--color-line);background:var(--color-paper)}.nav-row{min-height:5rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.brand{min-height:var(--touch);display:inline-flex;align-items:center;gap:.65rem;color:var(--color-brand);text-decoration:none}.brand-mark{width:2.55rem;height:2.55rem;display:grid;place-items:center;border-radius:50%;background:var(--color-brand);color:var(--color-highlight);font:700 1.5rem/1 var(--font-display)}.brand strong,.brand small{display:block;line-height:1}.brand strong{font:700 1.3rem/1 var(--font-display)}.brand small{margin-top:.25rem;font-size:.64rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.nav-toggle{min-width:var(--touch);min-height:var(--touch);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-brand);font-weight:800;cursor:pointer}.primary-nav{position:fixed;inset:5rem 0 0;display:none;overflow-y:auto;padding:var(--space-3) var(--space-2) var(--space-8);background:var(--color-paper)}.primary-nav.is-open{display:block}.primary-nav>a,.nav-branch>a{min-height:var(--touch);display:flex;align-items:center;border-bottom:var(--line) solid var(--color-line);text-decoration:none;font-weight:800}.primary-nav a[aria-current=page]{color:var(--color-international)}.nav-contact{color:var(--color-international)}.mega-menu{display:grid;gap:var(--space-3);padding:var(--space-2) 0 var(--space-3) var(--space-2);border-left:.25rem solid var(--color-international)}.domestic-menu{border-color:var(--color-domestic)}.mega-menu>div{display:grid;gap:.25rem}.mega-menu strong{margin-bottom:.35rem;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase}.mega-menu a{min-height:var(--touch);display:flex;align-items:center;color:var(--color-ink-soft);text-decoration:none}
.breadcrumbs{padding-block:var(--space-2);font-size:var(--text-sm)}.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.4rem;color:var(--color-line)}.breadcrumbs [aria-current=page]{font-weight:800}.destination-hero{position:relative;min-height:42rem;display:grid;align-items:end;isolation:isolate;background:var(--color-brand-deep);color:var(--color-white)}.destination-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 18%,var(--color-overlay) 88%)}.hero-media{position:absolute;inset:0;z-index:-2}.hero-placeholder{background:var(--color-placeholder);color:var(--color-placeholder-ink)}.image-placeholder{display:grid;place-items:center;overflow:hidden;background:repeating-linear-gradient(135deg,var(--color-placeholder),var(--color-placeholder) 1rem,var(--color-surface-strong) 1rem,var(--color-surface-strong) 2rem);color:var(--color-placeholder-ink)}.image-placeholder span{max-width:90%;padding:.5rem .75rem;border-radius:var(--radius-sm);background:var(--color-paper);font-size:var(--text-xs);font-weight:800;text-align:center}.ratio-landscape{aspect-ratio:4/3}.ratio-wide{aspect-ratio:16/9}.hero-content{padding-block:var(--space-8)}.hero-kicker{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}.category-badge,.info-badge{display:inline-flex;align-items:center;min-height:2rem;padding:.3rem .75rem;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800;letter-spacing:.07em;text-transform:uppercase}.category-badge{background:var(--color-international);color:var(--color-white)}.info-badge{border:var(--line) solid currentColor}.hero-content h1{max-width:12ch;margin-bottom:var(--space-2)}.hero-location{margin-bottom:var(--space-3);color:var(--color-white);font-size:var(--text-md)}.hero-facts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0 0 var(--space-4);padding:0;list-style:none}.hero-facts strong,.hero-facts span{display:block}.hero-facts span{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.hero-facts strong{font-size:var(--text-lg)}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.overview-aside{padding:var(--space-3);border-top:.3rem solid var(--color-international);background:var(--color-international-soft)}.overview-aside strong{display:block;margin-bottom:var(--space-1)}.highlights-grid{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr))}.highlight-item{min-height:9rem;padding:var(--space-2);border:var(--line) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-paper)}.highlight-item p{margin:0;font-weight:700}.places-grid,.gallery-grid,.related-grid{display:grid;gap:var(--space-3)}.place-card,.destination-card{overflow:hidden;border:var(--line) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-paper);box-shadow:var(--shadow-sm)}.place-copy,.card-copy{padding:var(--space-3)}.place-meta{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}.place-copy p:last-child{margin-bottom:0}.draft-ribbon{display:inline-flex;margin-bottom:var(--space-4);padding:.5rem 1rem;background:var(--color-highlight);color:var(--color-brand-deep);font-weight:800;transform:rotate(-1deg)}.timeline{position:relative;max-width:58rem;margin:0;padding:0 0 0 var(--space-4);list-style:none}.timeline::before{content:"";position:absolute;top:0;bottom:0;left:.6rem;width:var(--line-strong);background:var(--color-international)}.timeline li{position:relative;padding:0 0 var(--space-4) var(--space-2)}.timeline li::before{content:"";position:absolute;top:.35rem;left:-1.75rem;width:1rem;height:1rem;border:.25rem solid var(--color-paper);border-radius:50%;background:var(--color-international);box-shadow:0 0 0 var(--line-strong) var(--color-international)}.timeline small{display:block;margin-bottom:.35rem;color:var(--color-international);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.month-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-1)}.month{min-height:5.5rem;display:grid;place-items:center;padding:.5rem;border-radius:var(--radius-sm);background:var(--color-placeholder);text-align:center}.month strong,.month span{display:block}.month span{font-size:var(--text-xs)}.month.peak{background:var(--color-success);color:var(--color-white)}.month.shoulder{background:var(--color-highlight)}.month.avoid{background:var(--color-international);color:var(--color-white)}.status-key{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-sm)}.status-key span::before{content:"";width:.7rem;height:.7rem;display:inline-block;margin-right:.35rem;border-radius:50%;background:var(--color-placeholder)}.status-key .key-peak::before{background:var(--color-success)}.status-key .key-shoulder::before{background:var(--color-highlight)}.status-key .key-avoid::before{background:var(--color-international)}
.reach-grid,.essentials-grid{display:grid;gap:var(--space-2)}.fact-card{padding:var(--space-3);border-top:.25rem solid var(--color-international);background:var(--color-surface)}.fact-card h3{margin-bottom:var(--space-1)}.fact-card p{margin-bottom:0}.visa-note{padding:var(--space-3);border-left:.3rem solid var(--color-warning);background:var(--color-domestic-soft)}.visa-note strong{display:block;color:var(--color-warning)}.split-copy{display:grid;gap:var(--space-4)}.tips-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none;counter-reset:tips}.tips-list li{position:relative;min-height:4rem;padding:var(--space-2) var(--space-2) var(--space-2) 4rem;border-bottom:var(--line) solid var(--color-line)}.tips-list li::before{counter-increment:tips;content:counter(tips);position:absolute;left:0;top:var(--space-1);width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:var(--color-international-soft);color:var(--color-international);font-weight:800}.gallery-button{position:relative;min-height:13rem;padding:0;border:0;border-radius:var(--radius-md);overflow:hidden;cursor:pointer}.gallery-button .image-placeholder{width:100%;height:100%}.gallery-button::after{content:"Open";position:absolute;right:var(--space-1);bottom:var(--space-1);padding:.4rem .7rem;border-radius:var(--radius-pill);background:var(--color-brand-deep);color:var(--color-white);font-weight:800}.accordion-item{border-bottom:var(--line) solid var(--color-line)}.accordion-trigger{width:100%;min-height:var(--touch);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) 0;border:0;background:transparent;color:var(--color-ink);text-align:left;font-weight:800;cursor:pointer}.accordion-trigger::after{content:"+";font-size:var(--text-xl)}.accordion-trigger[aria-expanded=true]::after{content:"−"}.accordion-panel{padding-bottom:var(--space-2)}.accordion-panel[hidden]{display:none}
.enquiry-section{background:var(--color-brand)}.enquiry-layout{display:grid;gap:var(--space-5)}.direct-contact{display:grid;gap:var(--space-1);color:var(--color-white);font-weight:800}.enquiry-form{padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-paper);box-shadow:var(--shadow-lg)}.form-grid{display:grid;gap:var(--space-2)}.enquiry-form label{display:grid;gap:.4rem;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:800}.enquiry-form input,.enquiry-form select,.enquiry-form textarea{width:100%;min-height:var(--touch);padding:.75rem;border:var(--line) solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-ink)}.form-status{min-height:1.5rem;margin:var(--space-2) 0 0;color:var(--color-success);font-weight:800}.related-note{margin-bottom:var(--space-3);padding:var(--space-2);border-left:.3rem solid var(--color-international);background:var(--color-international-soft)}
.site-footer{padding-top:var(--space-10);background:var(--color-brand-deep);color:var(--color-white)}.site-footer p,.site-footer a{color:var(--color-white)}.footer-grid{display:grid;gap:var(--space-4)}.footer-grid>div{display:grid;align-content:start;gap:.6rem}.footer-grid h2{margin:0 0 var(--space-1);font:800 var(--text-sm)/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase}.footer-brand strong,.footer-brand small{color:var(--color-white)}.footer-brand .brand-mark{background:var(--color-highlight);color:var(--color-brand-deep)}.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-8);padding-block:var(--space-3);border-top:var(--line) solid var(--color-ink-soft);font-size:var(--text-sm)}.whatsapp-float{position:fixed;z-index:50;right:var(--space-2);bottom:var(--space-2);min-height:var(--touch);display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:var(--radius-pill);background:var(--color-success);color:var(--color-white);box-shadow:var(--shadow-lg);text-decoration:none;font-size:var(--text-sm);font-weight:800}.whatsapp-float span:first-child{width:1.8rem;height:1.8rem;display:grid;place-items:center;border-radius:50%;background:var(--color-white);color:var(--color-success);font-size:var(--text-xs)}
body.lightbox-open{overflow:hidden}.gallery-button{width:100%;background:var(--color-brand-deep)}.gallery-button::after{pointer-events:none}.gallery-button[disabled]{cursor:not-allowed;opacity:.65}.gallery-button[disabled]::after{content:"Photo unavailable"}.lightbox{position:fixed;z-index:90;inset:0;display:grid;place-items:center;padding:clamp(.5rem,2vw,var(--space-2));border:0;background:rgba(20,16,12,.94)}.lightbox[hidden]{display:none}.lightbox-content{width:min(80rem,100%);height:min(92dvh,60rem);display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-md);background:var(--color-paper)}.lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.lightbox-counter{margin:0;color:var(--color-ink);font-size:var(--text-sm);font-weight:800}.lightbox-close,.lightbox-control{min-width:var(--touch);min-height:var(--touch);display:inline-grid;place-items:center;border:var(--line) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink);font-weight:800;cursor:pointer}.lightbox-close{padding-inline:var(--space-2)}.lightbox-viewer{min-height:0;display:grid;grid-template-columns:var(--touch) minmax(0,1fr) var(--touch);align-items:center;gap:var(--space-1)}.lightbox-control{font-size:var(--text-xl)}.lightbox-control[hidden]{display:none}.lightbox-stage{height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;margin:0}.lightbox-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(92dvh - 9rem);object-fit:contain}.lightbox-caption{width:100%;padding-top:var(--space-1);color:var(--color-ink);font-size:var(--text-sm);text-align:center}.lightbox-error{align-self:center;margin:0;padding:var(--space-3);color:var(--color-warning);font-weight:800;text-align:center}.review-launcher{min-height:100svh;min-height:100dvh;display:grid;place-items:center;padding:var(--space-4);background:var(--color-brand-deep)}.review-card{width:min(46rem,100%);padding:clamp(2rem,6vw,5rem);border-radius:var(--radius-lg);background:var(--color-paper);box-shadow:var(--shadow-lg)}.review-card h1{font-size:clamp(2.4rem,7vw,4.8rem)}.review-card .button{margin-right:var(--space-1);margin-bottom:var(--space-1)}.report-table{overflow-x:auto;margin-bottom:var(--space-5)}.report-table table{width:100%;border-collapse:collapse;background:var(--color-white)}.report-table th,.report-table td{padding:var(--space-1);border:var(--line) solid var(--color-line);text-align:left;vertical-align:top}.report-table th{background:var(--color-brand);color:var(--color-white)}
@media(min-width:40rem){.shell,.narrow-shell{width:min(calc(100% - 3rem),var(--container))}.narrow-shell{max-width:var(--container-narrow)}.highlights-grid{grid-template-columns:repeat(3,1fr)}.places-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.reach-grid{grid-template-columns:repeat(3,1fr)}.essentials-grid{grid-template-columns:repeat(2,1fr)}.month-strip{grid-template-columns:repeat(6,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(min-width:40rem) and (max-width:63.99rem){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.nav-toggle{display:none}.primary-nav{position:static;display:flex;align-items:center;gap:var(--space-3);overflow:visible;padding:0}.primary-nav>a,.nav-branch>a{min-height:var(--touch);border:0}.nav-branch{position:relative}.mega-menu{position:absolute;top:calc(100% + .5rem);left:50%;width:min(58rem,92vw);display:none;grid-template-columns:repeat(4,1fr);padding:var(--space-3);border:var(--line) solid var(--color-line);border-top:.3rem solid var(--color-international);border-radius:var(--radius-md);background:var(--color-paper);box-shadow:var(--shadow-lg);transform:translateX(-50%)}.domestic-menu{border-top-color:var(--color-domestic)}.compact-menu{width:36rem;grid-template-columns:repeat(2,1fr)}.nav-branch:hover .mega-menu,.nav-branch:focus-within .mega-menu{display:grid}.places-grid{grid-template-columns:repeat(3,1fr)}.places-grid .place-card:nth-child(4n+1){grid-column:span 2}.month-strip{grid-template-columns:repeat(12,1fr)}.essentials-grid{grid-template-columns:repeat(3,1fr)}.split-copy{grid-template-columns:repeat(2,1fr)}.gallery-grid{grid-template-columns:repeat(3,1fr)}.gallery-button:first-child{grid-column:span 2;grid-row:span 2;min-height:29rem}.enquiry-layout{grid-template-columns:.8fr 1.2fr;align-items:start}.related-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:39.99rem){.whatsapp-float span:last-child{display:none}.destination-hero{min-height:36rem}.lightbox{padding:0}.lightbox-content{height:100dvh;border-radius:0;padding:var(--space-1)}.lightbox-viewer{gap:.25rem}.lightbox-close{padding-inline:var(--space-1)}.lightbox-image{max-height:calc(100dvh - 9rem)}.lightbox-caption{padding-inline:.25rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Full-site pages */
.home-hero{min-height:42rem;display:grid;align-items:center;padding-block:var(--space-8);background:var(--color-brand-deep);color:var(--color-white)}.home-hero p{color:var(--color-white)}.home-hero-grid{display:grid;gap:var(--space-5);align-items:center}.home-hero-grid h1{max-width:13ch}.home-hero-art{min-height:20rem;display:grid;place-items:center;border:var(--line) dashed var(--color-highlight);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-brand),var(--color-brand-deep));color:var(--color-highlight);font-weight:800}.domestic-entry{background:var(--color-domestic-soft)}.international-entry{background:var(--color-international-soft)}.domestic-entry .category-badge,.destination-card.domestic .category-badge,.domestic-hero .category-badge,.domestic-listing-intro .category-badge{background:var(--color-domestic);color:var(--color-white)}.domestic-text,.destination-card.domestic .text-link{color:var(--color-domestic)}.inline-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-3)}.card-rail{display:flex;gap:var(--space-3);overflow-x:auto;padding:.2rem .2rem var(--space-3);scroll-snap-type:x mandatory}.card-rail .destination-card{flex:0 0 min(85%,22rem);scroll-snap-align:start}.card-badges{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-2)}.card-region{font-size:var(--text-sm)}.card-facts{display:grid;gap:.25rem;margin-block:var(--space-2);font-weight:800}.promise-band{background:var(--color-brand);color:var(--color-white)}.promise-band p,.promise-band h2,.promise-band h3{color:var(--color-white)}.promise-grid{display:grid;gap:var(--space-4)}.promise-grid>div:not(:first-child){padding-left:var(--space-3);border-left:.25rem solid var(--color-highlight)}.testimonials-placeholder{text-align:center}.testimonials-placeholder h2{font-size:clamp(1.5rem,4vw,2.5rem)}.closing-cta{background:var(--color-brand-deep);color:var(--color-white)}.closing-cta .shell{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-4)}.closing-cta h2,.closing-cta p{color:var(--color-white)}
.page-intro{padding-block:clamp(4rem,8vw,7rem);background:var(--color-surface)}.page-intro h1{max-width:15ch}.page-intro p{font-size:var(--text-md)}.hub-split{display:grid}.hub-panel{position:relative;min-height:32rem;display:grid;align-items:end;isolation:isolate;overflow:hidden}.hub-panel>.hub-image{position:absolute;inset:0;z-index:-2;height:100%;aspect-ratio:auto}.hub-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--color-overlay)}.hub-panel-copy{padding:var(--space-5);color:var(--color-white)}.hub-panel-copy p,.hub-panel-copy h2{color:var(--color-white)}.domestic-panel .category-badge{background:var(--color-domestic)}.international-panel .category-badge{background:var(--color-international)}.hero-media>div,.hero-image-frame{width:100%;height:100%;aspect-ratio:auto}.place-card>.image-placeholder,.place-card>.ratio-landscape{width:100%;aspect-ratio:4/3}
.filter-panel{display:grid;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm)}.filter-field{display:grid;gap:.35rem}.filter-field label{font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.filter-field select{width:100%;min-height:var(--touch);padding:.65rem;border:var(--line) solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-white)}.clear-filters{align-self:end;border-color:var(--color-brand);background:transparent}.results-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}.results-toolbar p{margin:0}.data-note{font-size:var(--text-sm)}.listing-grid{display:grid;gap:var(--space-3)}.destination-card[hidden]{display:none}.empty-results{padding:var(--space-5);border:var(--line) dashed var(--color-line);text-align:center}.domestic-listing-intro{border-bottom:.4rem solid var(--color-domestic)}.international-listing-intro{border-bottom:.4rem solid var(--color-international)}
.service-card-grid,.walkthrough-grid,.contact-grid{display:grid;gap:var(--space-3)}.service-card,.walkthrough-card,.contact-grid article{padding:var(--space-3);border-top:.3rem solid var(--color-international);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm)}.service-card h2,.walkthrough-card h2,.contact-grid h2{font-size:var(--text-xl)}.service-grid{display:grid;gap:var(--space-4)}.walkthrough-status,.status-pill{display:inline-flex;padding:.25rem .6rem;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:800;text-transform:uppercase}.walkthrough-status,.status-pill.pass{background:var(--color-brand-light);color:var(--color-success)}.status-pill.fail{background:var(--color-international-soft);color:var(--color-international)}.report-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-5)}.report-summary article{padding:var(--space-2);background:var(--color-surface)}.report-summary strong,.report-summary span{display:block}.report-summary strong{font:600 var(--text-xl)/1 var(--font-display);color:var(--color-brand)}
@media(min-width:40rem){.home-hero-grid,.hub-split,.service-grid{grid-template-columns:repeat(2,1fr)}.promise-grid{grid-template-columns:1.3fr repeat(3,1fr)}.listing-grid{grid-template-columns:repeat(2,1fr)}.filter-panel{grid-template-columns:repeat(3,1fr)}.service-card-grid,.walkthrough-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}.report-summary{grid-template-columns:repeat(4,1fr)}}
@media(min-width:64rem){.home-hero-grid{grid-template-columns:1.05fr .95fr}.home-hero-art{min-height:34rem}.card-rail .destination-card{flex-basis:24rem}.listing-grid{grid-template-columns:repeat(3,1fr)}.filter-panel{grid-template-columns:repeat(6,1fr);align-items:end}.service-card-grid{grid-template-columns:repeat(3,1fr)}.walkthrough-grid{grid-template-columns:repeat(3,1fr)}.contact-grid{grid-template-columns:repeat(3,1fr)}}
/* ============================================================
Cerulean alignment layer
Applies the reference template's colour scheme and form
language across every generated page. Loaded last so it
overrides the base rules above without touching them.
============================================================ */
/* Typography — Newsreader display, Plus Jakarta Sans text */
h1,h2,h3{font-weight:500;line-height:1.02}
h1{letter-spacing:-.01em}
h2{font-size:clamp(2.441rem,4vw,3.052rem);letter-spacing:-.01em}
h3{font-size:var(--text-lg);font-weight:500}
.eyebrow{color:var(--color-accent-ink);font-weight:700;letter-spacing:.16em}
/* Accent legibility — gold is a surface colour, accent-ink is the text colour */
.text-link,.domestic-text,.destination-card.domestic .text-link,.nav-contact,
.primary-nav a[aria-current=page],.timeline small,.report-summary strong{color:var(--color-accent-ink)}
.category-badge{background:var(--color-accent);color:var(--color-brand-deep)}
.tips-list li::before{background:var(--color-accent-soft);color:var(--color-accent-ink)}
.status-pill.fail{background:var(--color-accent-soft);color:var(--color-caution)}
.month.avoid{background:var(--color-caution);color:var(--color-white)}
.status-key .key-avoid::before{background:var(--color-caution)}
.month.shoulder{background:var(--color-accent);color:var(--color-brand-deep)}
.status-key .key-shoulder::before{background:var(--color-accent)}
/* Controls — squared, gold fill, teal hover */
.button{border-radius:var(--radius-sm);border-width:var(--line);font-weight:800}
.button-primary{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-brand-deep)}
.button-primary:hover{background:var(--color-brand);border-color:var(--color-brand);color:var(--color-white)}
.button:active{transform:scale(.98)}
.nav-toggle{border-radius:var(--radius-sm)}
/* Surfaces — flat, hairline-ruled, low shadow */
.place-card,.destination-card,.service-card,.walkthrough-card,.contact-grid article,
.highlight-item,.enquiry-form,.filter-panel,.review-card,.lightbox-content{
border-radius:var(--radius-md);box-shadow:none}
.place-card,.destination-card{border-color:var(--color-line)}
.enquiry-form{border:var(--line) solid var(--color-line);box-shadow:var(--shadow-lg)}
.service-card,.walkthrough-card,.contact-grid article,.fact-card{border-top-color:var(--color-accent)}
.overview-aside{border-top-color:var(--color-accent);background:var(--color-accent-soft)}
.related-note,.mega-menu{border-left-color:var(--color-accent)}
.timeline::before,.timeline li::before{background:var(--color-accent)}
.timeline li::before{box-shadow:0 0 0 var(--line-strong) var(--color-accent)}
.domestic-listing-intro,.international-listing-intro{border-bottom-color:var(--color-accent)}
.domestic-entry,.international-entry{background:var(--color-accent-soft)}
.promise-grid>div:not(:first-child){border-left-color:var(--color-accent)}
/* Editorial rules — crisp teal hairlines, as in the reference */
.site-header{border-bottom-color:var(--color-rule)}
.breadcrumbs{border-bottom:var(--line) solid var(--color-line)}
.accordion-item,.tips-list li{border-bottom-color:var(--color-line)}
.footer-base{border-top-color:var(--color-ink-soft)}
/* Dark bands — deep teal ground, ivory text */
.home-hero,.closing-cta,.site-footer{background:var(--color-brand-deep)}
.enquiry-section,.promise-band{background:var(--color-brand)}
.home-hero-art{border-color:var(--color-accent);color:var(--color-accent);
background:linear-gradient(135deg,var(--color-brand),var(--color-brand-deep))}
.destination-hero::after{background:linear-gradient(to top,var(--color-overlay),var(--color-overlay-soft))}
.hub-panel::after{background:linear-gradient(to top,var(--color-overlay),var(--color-overlay-soft))}
/* Motion — the reference's slow, settling ease */
.destination-card,.place-card,.gallery-button{overflow:hidden}
.destination-card img,.place-card img,.gallery-button img{
transition:transform var(--duration) var(--ease)}
.destination-card:hover img,.place-card:hover img,
.gallery-button:hover img{transform:scale(1.04)}
@media(min-width:64rem){
.mega-menu{border-radius:var(--radius-md);border-top-color:var(--color-accent)}
.domestic-menu{border-top-color:var(--color-accent)}
}
/* Reading-progress bar. Stays collapsed until scripts/gsap-scroll.js binds it
to the document scroll position. */
.scroll-progress{position:fixed;z-index:1000;inset:0 0 auto;height:.2rem;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.gsap-enhanced .destination-hero{overflow:hidden}
/* Destination rail — drag-to-explore + gentle autoplay marquee */
.card-rail{cursor:grab;scroll-behavior:auto}
.card-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.card-rail.is-dragging .destination-card{pointer-events:none}
@media(prefers-reduced-motion:reduce){
.scroll-progress{display:none}
}
/* ============================================================
Home hero rotator
Auto-cycling featured journeys: full-bleed stage, oversized
display headline, left dot rail, right preview queue, bottom
controls and an autoplay progress bar. Progressive
enhancement — with no JS the first slide renders in full and
every link still works.
============================================================ */
.hero-rotator{--hero-dwell:6.5s;position:relative;min-height:44rem;min-height:100svh;display:grid;align-items:center;isolation:isolate;overflow:hidden;background:var(--color-brand-deep);color:var(--color-white)}
/* No scrim over the photograph: any overlay, teal or black, read as the
photo being tinted once it loaded. Legibility of the copy comes from
text-shadow instead (see .hero-copy below). */
/* Stage: every slide stacked, only the active one at full opacity */
.hero-stage{position:absolute;inset:0;z-index:-2}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero-slide.is-active{opacity:1}
.hero-slide-frame{width:100%;height:100%;aspect-ratio:auto;transform-origin:center}
.hero-slide-frame img{width:100%;height:100%;object-fit:cover}
/* Per-photo focal points. The Thailand hero is two-thirds sky with the
temples along the bottom edge, so a centred cover crop lost the subject at
every viewport; anchor it to the bottom instead. */
[data-slug="thailand"] .hero-slide-frame img,[data-slug="thailand"] .hero-media img{object-position:50% 100%}
@keyframes hero-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
/* Ken Burns: each photograph zooms in slowly for as long as it is on screen.
It rides on .is-active, which the rotator toggles at the moment the new
slide is committed, so the zoom starts exactly when the picture arrives.
Runs a little past the dwell so it is still moving when the next slide
wipes over it. */
.hero-slide.is-active .hero-slide-frame{animation:hero-kenburns calc(var(--hero-dwell) + 1.5s) cubic-bezier(.22,.61,.36,1) both}
/* Inner layout */
.hero-rotator-inner{position:relative;z-index:1;display:grid;gap:var(--space-5);align-content:center;padding-block:calc(var(--space-12) + var(--space-6)) var(--space-12)}
.hero-copy{max-width:34rem;text-shadow:0 1px 3px rgba(0,0,0,.9),0 4px 16px rgba(0,0,0,.6)}
.hero-rotator .eyebrow{display:flex;align-items:center;gap:var(--space-1);color:var(--color-white);margin-bottom:var(--space-3)}
.hero-rotator h1{max-width:none;margin-bottom:var(--space-2);font-size:clamp(3rem,8vw,7rem);line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.hero-price{margin-top:var(--space-1);margin-bottom:var(--space-4);color:var(--color-accent);font-weight:800}
.hero-rotator .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* Staggered copy entrance, replayed on every slide change */
.hero-copy.is-entering>*{animation:hero-copy-in .7s var(--ease) both}
.hero-copy.is-entering>:nth-child(1){animation-delay:.05s}
.hero-copy.is-entering>:nth-child(2){animation-delay:.14s}
.hero-copy.is-entering>:nth-child(3){animation-delay:.23s}
.hero-copy.is-entering>:nth-child(4){animation-delay:.32s}
.hero-copy.is-entering>:nth-child(5){animation-delay:.41s}
@keyframes hero-copy-in{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
/* Left rail: slide dots + counter */
.hero-rail{display:flex;align-items:center;gap:var(--space-2);order:-1}
.hero-dots{display:flex;gap:var(--space-1)}
.hero-dot{width:var(--touch);height:.75rem;min-height:auto;padding:0;border:0;border-radius:var(--radius-pill);background:rgba(253,252,248,.32);cursor:pointer;transition:background-color var(--duration) var(--ease)}
.hero-dot:hover{background:rgba(253,252,248,.6)}
.hero-dot.is-active{background:var(--color-accent)}
.hero-counter{margin:0;color:var(--color-white);font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;font-variant-numeric:tabular-nums}
/* Bottom controls */
.hero-controls{position:absolute;z-index:2;left:50%;bottom:var(--space-5);display:flex;gap:var(--space-1);transform:translateX(-50%)}
.hero-arrow,.hero-toggle{width:var(--touch);height:var(--touch);display:grid;place-items:center;border:var(--line) solid rgba(253,252,248,.45);border-radius:50%;background:rgba(6,32,43,.5);color:var(--color-white);font-size:var(--text-md);line-height:1;cursor:pointer;transition:background-color var(--duration) var(--ease),border-color var(--duration) var(--ease)}
.hero-toggle{font-size:var(--text-xs)}
.hero-arrow:hover,.hero-toggle:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-brand-deep)}
/* Autoplay progress */
.hero-progress{position:absolute;z-index:2;inset:auto 0 0;height:.1875rem;background:rgba(253,252,248,.22)}
.hero-progress>span{display:block;width:0;height:100%;background:var(--color-accent)}
.hero-rotator.is-playing .hero-progress>span{animation:hero-progress var(--hero-dwell) linear forwards}
.hero-rotator.is-paused .hero-progress>span{animation-play-state:paused}
@keyframes hero-progress{from{width:0}to{width:100%}}
/* Home page only: the header floats over the hero */
.home-page .site-header{position:absolute;inset:0 0 auto;z-index:30;background:transparent;border-bottom-color:transparent}
.home-page .site-header .brand{color:var(--color-white)}
.home-page .site-header .primary-nav>a,.home-page .site-header .nav-branch>a{color:var(--color-white)}
.home-page .nav-contact{color:var(--color-accent)}
@media(min-width:64rem){
.hero-rotator-inner{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;column-gap:var(--space-6)}
.hero-rail{position:absolute;left:calc(var(--space-3) * -1);top:50%;flex-direction:column;order:0;transform:translateY(-50%)}
.hero-dots{flex-direction:column}
.hero-dot{width:.75rem;height:var(--touch)}
.hero-counter{writing-mode:vertical-rl}
.hero-controls{left:auto;right:var(--space-3);transform:none}
}
@media(max-width:63.99rem){
/* Safari/iOS fails to paint backdrop-filter across the full box of a
position:fixed element that also scrolls (overflow-y:auto) — it only
blurs as far down as the content's own height, leaving the rest of the
drawer transparent and the page behind it visible, unblurred, once
scrolled. A separate, non-scrolling ::before carries the blur instead,
sized to the full drawer independently of its scrollable content. */
.home-page .primary-nav{position:fixed;background:transparent}
.home-page .primary-nav::before{
content:"";
position:fixed;
inset:5rem 0 0;
z-index:-1;
background:rgba(6,32,43,.82);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
}
@media(prefers-reduced-motion:reduce){
.hero-slide.is-active .hero-slide-frame,.hero-rotator.is-playing .hero-progress>span,.hero-copy.is-entering>*{animation:none!important}
.hero-copy.is-entering>*{opacity:1;transform:none}
.hero-progress{display:none}
}
/* --- Hero rotator layout corrections --- */
/* Scrim behind the floating header so nav stays legible over pale imagery */
/* Controls sit bottom-centre so they never collide with the WhatsApp float */
.hero-controls{left:50%;right:auto;bottom:var(--space-4);transform:translateX(-50%)}
/* Mobile/tablet: the hero is scrolled past like any other section, so the
prev/pause/next buttons are redundant with the swipe/scroll gesture
visitors already use — remove them rather than compete for the same job. */
@media(max-width:63.99rem){.hero-controls{display:none}}
@media(min-width:64rem){
/* Rail becomes a real grid column instead of an absolute overlay, so it can
never crowd the headline at any width. */
.hero-rotator-inner{grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--space-5)}
.hero-rail{position:static;transform:none;align-self:center}
.hero-controls{left:50%;right:auto;transform:translateX(-50%)}
}
@media(min-width:64rem){.home-page .primary-nav{background:transparent}}
/* --- Cinematic cycle + full-width location strip --- */
.hero-rotator{--hero-dwell:5.8s}
.hero-slide{transition:opacity .55s var(--ease)}
.hero-copy.is-entering>*{animation-duration:.45s}
.hero-copy.is-entering>:nth-child(1){animation-delay:.02s}
.hero-copy.is-entering>:nth-child(2){animation-delay:.08s}
.hero-copy.is-entering>:nth-child(3){animation-delay:.14s}
.hero-copy.is-entering>:nth-child(4){animation-delay:.2s}
.hero-copy.is-entering>:nth-child(5){animation-delay:.26s}
/* The strip carries every location, so it scrolls instead of tapering off */
@media(min-width:64rem){
}
/* --- Hero: hard column separation + right-bleeding card strip ---
The copy and the strip are given their own grid columns with a fixed
gutter, so no headline length can ever run into the cards. The strip
then breaks out of the centred shell to the viewport edge, so cards
sit hard right and visibly continue off-screen. */
@media(min-width:64rem){
.hero-rotator-inner{grid-template-columns:auto minmax(0,34rem) 1fr;column-gap:var(--space-6)}
.hero-copy{max-width:100%}
/* Cards fade out as they leave, so the off-screen run reads as intentional */
}
@media(min-width:100rem){
.hero-rotator-inner{grid-template-columns:auto minmax(0,38rem) 1fr}
}
/* ============================================================
Popular destinations — 3D coverflow
Replicates the motion of the carousel on the current Orbitz
site: a sharp, raised centre card with side cards rotated
away, scaled down and blurred. Built on CSS 3D transforms,
no carousel library. Only a window of cards around the centre
is rendered, so a 27-card reel stays cheap.
============================================================ */
.coverflow-section{overflow:hidden}
.coverflow-head{text-align:center;margin-inline:auto}
.coverflow-head p{margin-inline:auto}
.coverflow{position:relative;height:32rem;perspective:75rem;perspective-origin:50% 50%}
.cf-stage{position:relative;height:100%;transform-style:preserve-3d}
.cf-card{position:absolute;top:0;left:50%;width:20rem;height:28rem;margin-left:-10rem;
overflow:hidden;border-radius:var(--radius-lg);background:var(--color-surface-strong);
box-shadow:var(--shadow-sm);backface-visibility:hidden;
transition:transform .62s var(--ease),opacity .62s var(--ease),filter .62s var(--ease),box-shadow .62s var(--ease)}
.cf-card.is-center{box-shadow:var(--shadow-lg)}
.cf-frame,.cf-image{display:block;width:100%;height:100%}
.cf-image{aspect-ratio:auto}
.cf-image img{width:100%;height:100%;object-fit:cover}
.cf-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,32,43,.85) 0%,rgba(6,32,43,.25) 45%,transparent 70%)}
.cf-copy{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;
gap:var(--space-2);padding:var(--space-3);color:var(--color-white)}
.cf-text{display:grid;gap:.15rem;min-width:0}
.cf-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;line-height:1.15}
.cf-count{font-size:var(--text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
/* Only the centre card offers its call to action */
.cf-link{opacity:0;transform:translateY(.5rem);pointer-events:none;white-space:nowrap;
transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cf-card.is-center .cf-link{opacity:1;transform:none;pointer-events:auto}
/* Side cards read as one tappable target that brings them to the centre */
.cf-card:not(.is-center){cursor:pointer}
.cf-arrow{position:absolute;top:50%;z-index:60;width:var(--touch);height:var(--touch);display:grid;place-items:center;
border:var(--line) solid var(--color-line);border-radius:50%;background:var(--color-paper);color:var(--color-ink);
font-size:var(--text-md);line-height:1;cursor:pointer;transform:translateY(-50%);
transition:background-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease)}
.cf-arrow:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-brand-deep)}
/* The stage is full-bleed but the fan of cards is not: the arrows hug the
fan rather than the viewport edge, so they read as part of the control. */
.cf-prev{left:max(var(--space-2),calc(50% - 34rem))}
.cf-next{right:max(var(--space-2),calc(50% - 34rem))}
/* On touch layouts the cards themselves are the carousel control. */
@media(max-width:63.99rem){
.coverflow{touch-action:pan-y}
.cf-arrow{display:none}
.coverflow.is-swiping{cursor:grabbing;user-select:none}
.coverflow.is-swiping .cf-card{pointer-events:none}
}
/* No JS: the reel degrades to a plain readable row of the first few cards */
.cf-stage:not([data-cf-ready]) .cf-card{position:relative;left:auto;margin-left:0;display:none}
.cf-stage:not([data-cf-ready]) .cf-card:first-child{display:block;margin-inline:auto}
.cf-stage:not([data-cf-ready]) .cf-card:first-child .cf-link{opacity:1;transform:none;pointer-events:auto}
@media(min-width:48rem){.coverflow{height:34rem}.cf-card{width:23rem;margin-left:-11.5rem;height:30rem}
.cf-prev{left:max(var(--space-4),calc(50% - 34rem))}.cf-next{right:max(var(--space-4),calc(50% - 34rem))}}
@media(max-width:47.99rem){.coverflow{height:27rem}.cf-card{width:15rem;margin-left:-7.5rem;height:23rem}
.cf-name{font-size:var(--text-md)}.cf-copy{padding:var(--space-2);flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.cf-card{transition:none}}
/* ============================================================
Featured rails — seamless marquee, compact cards
Cards are slimmed so six or seven read at once instead of
three, and the two rails drift in opposite directions. The
set is duplicated in JS and the pair shifted by exactly one
set width, so the loop never seams or snaps back.
============================================================ */
.card-rail.is-marquee{overflow:hidden;scroll-snap-type:none;cursor:default;padding-bottom:var(--space-2)}
.rail-track{display:flex;gap:var(--space-3);padding-right:var(--space-3);flex:0 0 auto;
animation:rail-drift var(--rail-duration,45s) linear infinite;will-change:transform}
.card-rail.is-reverse .rail-track{animation-direction:reverse}
.card-rail.is-marquee:hover .rail-track,
.card-rail.is-marquee:focus-within .rail-track,
.card-rail.is-offscreen .rail-track{animation-play-state:paused}
@keyframes rail-drift{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* Compact card: more of them visible, and the hovered one lifts clear */
.card-rail .destination-card{transition:transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
@media(hover:hover) and (pointer:fine){.card-rail.is-marquee .destination-card:hover{transform:translateY(-.5rem);box-shadow:var(--shadow-lg)}}
.card-rail .card-copy{padding:var(--space-2)}
.card-rail .destination-card h3{font-size:var(--text-md)}
.card-rail .card-facts{margin-block:var(--space-1);gap:.1rem;font-size:var(--text-sm)}
.card-rail .card-region{font-size:var(--text-xs)}
.card-rail .card-badges{margin-bottom:var(--space-1)}
.card-rail .destination-card .ratio-landscape,
.card-rail .destination-card .image-placeholder{aspect-ratio:3/2}
@media(min-width:64rem){
.card-rail .destination-card{flex-basis:17rem}
}
@media(min-width:100rem){
.card-rail .destination-card{flex-basis:18rem}
}
@media(prefers-reduced-motion:reduce){
.rail-track{animation:none}
}
/* Coverflow: the empty space either side is a click target that steps the reel */
.coverflow{cursor:pointer}
.cf-card.is-center{cursor:default}
.coverflow:focus-visible{outline:var(--line-strong) solid var(--color-focus);outline-offset:.35rem}
/* ============================================================
Header: persistent, and a mega menu you can actually reach
============================================================ */
/* 1. The menu sat 0.5rem below its trigger, so the pointer crossed
un-hovered space on the way down and the menu closed. The visual gap
is kept, but an invisible bridge now spans it so the hover is
continuous. */
@media(min-width:64rem){
.mega-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:.9rem}
/* 2. Columns top-align and pack from the top, so location names line
up across all four columns regardless of how many each holds. */
.mega-menu{align-items:start}
.mega-menu>div{align-content:start}
.mega-menu a{min-height:2.25rem}
}
/* 3. The header now travels with the page instead of scrolling away. */
.site-header{position:sticky;top:0;z-index:40}
.site-header.is-stuck{box-shadow:0 .5rem 1.5rem rgba(20,16,12,.12)}
.site-header,.site-header .nav-row{transition:background-color .35s var(--ease)}
/* On the home page it starts transparent over the hero, then takes a solid
ground once you scroll, so nav stays legible over every section below. */
.home-page .site-header{position:sticky;inset:0 auto auto;background:transparent}
.home-page .hero-rotator{margin-top:calc(var(--header-h, 5rem) * -1)}
.home-page .site-header.is-stuck{background:var(--color-brand-deep);border-bottom-color:rgba(253,252,248,.16)}
/* The panel was centred on its trigger, so the right-hand menus ran off the
edge of the viewport. Anchoring to the trigger's right edge keeps every
panel on screen at any width, and keeps it inside .nav-branch so the
hover bridge above still holds. */
@media(min-width:64rem){
.mega-menu{left:auto;right:0;transform:none;width:min(48rem,calc(100vw - 3rem))}
.compact-menu{width:min(34rem,calc(100vw - 3rem))}
}
/* Reviews + Google map
Stacked on mobile, map beside the reviews from 64rem up. The iframe is
lazy-loaded and given a fixed aspect ratio so it costs nothing until it
scrolls into view and reserves its own space (no layout shift). */
.reviews-map-grid{display:grid;gap:var(--space-4)}
.reviews-panel{display:flex;flex-direction:column;gap:var(--space-2)}
.rating-display{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2);margin:0}
.rating-stars{position:relative;display:inline-block;font-size:var(--text-md);line-height:1;white-space:nowrap}
.rating-stars-base{color:var(--color-line);letter-spacing:.1em}
.rating-stars-fill{position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden;color:var(--color-accent);letter-spacing:.1em}
.rating-value{font-family:var(--font-display);font-size:var(--text-xl);line-height:1}
.rating-count{color:var(--color-ink-soft);font-size:var(--text-sm)}
.rating-pending,.testimonial-pending{margin:0}
.reviews-note{margin:0;max-width:44ch;color:var(--color-ink-soft)}
.reviews-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.map-panel{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-top:.25rem solid var(--color-accent);background:var(--color-surface)}
.map-heading{margin:0;font-size:var(--text-md)}
.map-frame{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--color-placeholder);aspect-ratio:4/3}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.map-address{margin:0;font-style:normal;line-height:1.6}
.map-hours{margin:0;color:var(--color-ink-soft);font-size:var(--text-sm)}
@media(min-width:64rem){
.reviews-map-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.map-frame{aspect-ratio:1/1}
}
/* Social icon row
Icon-only links, so each carries an .sr-only text label. The tap target is a
full 44px (--touch) even though the glyph is 20px, per the accessibility
checklist; the visible disc is drawn with a background, not by shrinking the
hit area. Colours are inherited via currentColor so the same markup works on
the dark footer and the light contact page. */
.social-row{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
.social-row li{margin:0}
/* Each platform in its own brand colour. The glyph sits on a light disc rather
than directly on the background: LinkedIn (#0A66C2) on the deep-teal footer
is only ~2.9:1, under the 3:1 WCAG non-text minimum, and X's brand black is
invisible there outright. A white disc gives every mark the contrast its own
colour was designed for, and works unchanged on the ivory contact page. */
.social-link{width:var(--touch);height:var(--touch);display:grid;place-items:center;border-radius:50%;background:var(--color-white);color:var(--color-brand);text-decoration:none;transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}
.social-glyph{display:block;width:1.25rem;height:1.25rem}
/* Doubled class selector: the footer's own `.site-footer a{color:white}` rule
outranks a single class, which painted every glyph white on a white disc. */
.social-link.social-instagram{color:#E4405F}
.social-link.social-facebook{color:#0866FF}
.social-link.social-whatsapp{background:#1F8F5F;color:#FFFFFF}
.social-link.social-linkedin{color:#0A66C2}
.social-link.social-x{color:#000}
.social-link.social-youtube{color:#FF0000}
.social-link.social-tripadvisor{color:#00AA6C}
.social-link:hover,.social-link:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.footer-follow h2{margin-bottom:var(--space-2)}
/* The footer's Follow column is ~262px at desktop, too narrow for seven
44px targets in a row — flex-wrap left a ragged 5+2. A fixed 4-column
grid reads as a deliberate block at every width instead. */
.site-footer .social-row{display:grid;grid-template-columns:repeat(4,var(--touch));gap:var(--space-1);justify-content:start}
/* The floating button now shows the real WhatsApp mark instead of "WA" text. */
.whatsapp-float{min-width:var(--touch);padding:0;width:3.25rem;height:3.25rem;justify-content:center;gap:0;border-radius:50%;background:#1F8F5F;box-shadow:0 6px 18px rgba(6,32,43,.28)}
.whatsapp-float .whatsapp-float-icon{width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:0;background:transparent;color:#FFFFFF}
.whatsapp-float-icon .social-glyph{width:1.75rem;height:1.75rem}
/* The enquiry block's WhatsApp link carries the same green circle as the
float, so the two read as one control wherever it appears. */
.whatsapp-link{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--touch)}
.whatsapp-link-icon{width:2.25rem;height:2.25rem;flex:none;display:grid;place-items:center;border-radius:50%;background:#1F8F5F;color:#FFFFFF;box-shadow:0 4px 12px rgba(6,32,43,.28)}
.whatsapp-link-icon .social-glyph{width:1.25rem;height:1.25rem}
@media(prefers-reduced-motion:reduce){
.social-link{transition:none}
.social-link:hover,.social-link:focus-visible{transform:none}
}
/* Google review cards */
.review-list{display:grid;gap:var(--space-2);margin:var(--space-2) 0 0;padding:0;list-style:none}
.review-card{padding:var(--space-3);border:var(--line) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-paper)}
.review-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}
.review-when{color:var(--color-ink-soft);font-size:var(--text-sm)}
.review-body{margin:0}
.review-body p{margin:0}
.review-author{margin:var(--space-1) 0 0;font-weight:700}
.review-reply{margin:var(--space-2) 0 0;padding-left:var(--space-2);border-left:.2rem solid var(--color-accent);color:var(--color-ink-soft);font-size:var(--text-sm)}
.review-more{white-space:nowrap}
@media(min-width:48rem){
.review-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:64rem){
.review-list{grid-template-columns:1fr}
}
/* Hero places panel — rebuilt by the rotator on every slide change. */
.hero-places{align-self:end}
.hero-places-label{margin:0 0 var(--space-1);color:var(--color-white);font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-shadow:0 1px 3px rgba(6,32,43,.95),0 4px 14px rgba(6,32,43,.65);text-transform:uppercase}
.hero-places-list{display:flex;flex-wrap:wrap;gap:.35rem var(--space-2);margin:0;padding:0;list-style:none;color:var(--color-white);font-weight:600;text-shadow:0 1px 3px rgba(6,32,43,.95),0 4px 14px rgba(6,32,43,.65)}
.hero-places-list li{position:relative}
.hero-places-list li+li::before{content:"";position:absolute;left:calc(var(--space-2) / -2);top:50%;width:.25rem;height:.25rem;margin-top:-.125rem;border-radius:50%;background:currentColor;opacity:.65}
.hero-places.is-empty{display:none}
@media(min-width:64rem){
.hero-places{max-width:34rem;justify-self:end}
}
/* Enquiry form status + honeypot */
.form-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.form-status[data-state="ok"]{color:var(--color-success);font-weight:700}
.form-status[data-state="warn"]{color:var(--color-warning);font-weight:700}
.form-status[data-state="error"]{color:var(--color-caution);font-weight:700}
/* Map section (now /contact/ only) */
.map-layout{display:grid;gap:var(--space-4)}
.map-links{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-2) 0 0}
@media(min-width:64rem){
.map-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
}
/* Brand logo. Replaces the text lockup. Intrinsic width/height are on the
so the header reserves its space before the file arrives (no CLS);
the height here drives the displayed size and width:auto keeps the ratio. */
.brand-logo{display:block;width:auto;height:2.6rem}
.footer-brand .brand-logo{height:3rem}
@media(max-width:39.99rem){
.brand-logo{height:2.2rem}
}
/* ---------------------------------------------------------------------------
Photograph integration.
Responsive images ship as . A
is display:inline by default and has no box of its own, so an inner
img{height:100%} has nothing to resolve against and the frame collapses.
Making picture a block that fills its parent restores the previous geometry
for the hero, place cards, gallery and destination cards alike.
--------------------------------------------------------------------------- */
picture{display:block;width:100%;height:100%}
/* A place may carry up to two photographs. One fills the card frame as before;
two share it as an equal pair, so neither is cropped harder than the other. */
.place-media{display:grid;width:100%;aspect-ratio:4/3;gap:2px}
.place-media-pair{grid-template-columns:1fr 1fr}
.place-media>div{width:100%;height:100%;aspect-ratio:auto}
@media(max-width:39.99rem){
/* Side-by-side halves get too narrow to read on a phone, so they stack. The
container's fixed ratio is dropped here — with two stacked rows it fights
the content height — and each photograph keeps its own 4:3 frame instead. */
.place-media-pair{grid-template-columns:1fr;aspect-ratio:auto}
.place-media-pair>div{aspect-ratio:4/3}
}
/* ---------------------------------------------------------------------------
"Choose your direction" — Domestic/International toggle over two full grids.
Card language is borrowed from the coverflow further down the page
(photograph filling the card, dark gradient at the foot, gold place count
above a white name) but flat: no 3D transform, no blur, every card legible.
4:5 rather than 3:4. The heroes these cards reuse are 16:9 landscape, so the
taller the portrait frame the more of each photograph object-fit discards —
4:5 keeps more of the picture, and over five rows it also saves roughly a
card's worth of page height.
--------------------------------------------------------------------------- */
/* Tab strip on the left, "View All Destinations" on the same line at the
right; the pair wraps onto two lines when the row runs out of room. */
.direction-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.direction-tablist{position:relative;display:inline-flex;gap:.25rem;padding:.25rem;border:var(--line) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface);background:color-mix(in srgb,var(--color-paper) 72%,transparent);-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem)}
/* Intentional width transition: the thumb is absolutely positioned inside the
strip, so resizing it between the two tab widths reflows nothing else. */
.direction-thumb{position:absolute;z-index:0;top:.25rem;bottom:.25rem;left:0;border-radius:var(--radius-pill);background:var(--color-brand-deep);pointer-events:none;transition:transform var(--duration) var(--ease),width var(--duration) var(--ease)}
.direction-tab{position:relative;z-index:1;min-height:var(--touch);min-width:var(--touch);padding:.5rem 1.5rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink);font-weight:800;white-space:nowrap;cursor:pointer;transition:color var(--duration) var(--ease)}
.direction-tab[aria-selected="true"]{background:var(--color-brand-deep);color:var(--color-white)}
.direction-tablist.has-thumb .direction-tab[aria-selected="true"]{background:transparent}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.direction-tablist{background:var(--color-surface)}
}
@media(prefers-reduced-motion:reduce){
.direction-thumb,.direction-tab{transition:none}
}
.direction-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:0;padding:0;list-style:none}
.direction-card{margin:0}
.direction-card-link{position:relative;display:block;overflow:hidden;border-radius:var(--radius-md);background:var(--color-brand-deep);color:var(--color-white);text-decoration:none}
/* The media box owns the card's height, so a placeholder card is exactly as
tall as a photographed one and the grid stays even either way. */
.direction-card-media{position:absolute;inset:0;aspect-ratio:auto}
.direction-card-media img{width:100%;height:100%;object-fit:cover}
.direction-card-link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 26%,rgba(6,32,43,.62) 46%,rgba(6,32,43,.93) 66%,rgba(6,32,43,.97) 100%)}
.direction-card-count{font-size:var(--text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent)}
.direction-card-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;line-height:1.15}
.direction-all{display:inline-flex;align-items:center;gap:.35em;min-height:var(--touch);font-weight:800;color:var(--color-accent);text-decoration:none;white-space:nowrap;transition:color var(--duration) var(--ease)}
.direction-all:hover,.direction-all:focus-visible{color:var(--color-white);text-decoration:underline;text-underline-offset:.2em}
/* The header is sticky, so a #international deep link would otherwise drop
the heading and tab strip underneath it. */
.direction-section{scroll-margin-top:6rem}
/* The card clips its photograph, so give focus an inset ring that cannot be
trimmed by the rounded corner. */
.direction-card-link:focus-visible{outline:var(--line-strong) solid var(--color-focus);outline-offset:-.25rem}
.direction-panel:focus-visible{outline:var(--line-strong) solid var(--color-focus);outline-offset:.5rem}
@media(min-width:40rem){
.direction-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:64rem){
.direction-grid{grid-template-columns:repeat(3,1fr)}
}
/* A restrained lift only, and only when motion is welcome. */
.motion-armed .direction-card-link{transition:transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease)}
@media(hover:hover) and (pointer:fine){.motion-armed .direction-card-link:hover{transform:translateY(-.25rem);box-shadow:var(--shadow-lg)}}
@media(prefers-reduced-motion:reduce){
.direction-card-link,.motion-armed .direction-card-link{transition:none}
.motion-armed .direction-card-link:hover{transform:none}
}
/* The destination decision sits in a single deep, cinematic field. The
existing deep-brand token is deliberately close to the supplied navy
reference while keeping this one-section refinement inside Orbitz's visual
system. Cards retain their original image-led contrast and proportions. */
/* "Horizon": the sweep runs on the same 165deg axis as the hero's scrim, so
the two dark sections read as lit from the same direction. The two mid
stops are steps along the brand teal that no token names. */
/* The whole section is the deep field, rounded at the corners and pulled in
a hair from the viewport edges so the beige page shows around it and the
corners read as deliberate. */
.direction-section{
position:relative;
/* Breathing room below as well as at the sides: the next section is the same
deep teal, and without a gap the rounded bottom corners pinched into it. */
margin:0 clamp(.5rem,1.5vw,1.5rem) var(--space-5);
border-radius:var(--radius-plate);
background:linear-gradient(165deg,var(--color-brand-deep) 0%,var(--color-brand) 46%,#245263 78%,#1a4250 100%);
color:var(--color-white);
box-shadow:0 1.75rem 3.5rem -1.25rem rgba(6,32,43,.45),0 .25rem .75rem rgba(6,32,43,.12);
}
/* Gold hairline along the top edge, where it catches the light. */
.direction-section::before{
content:"";
position:absolute;
inset:0 0 auto;
height:1px;
border-radius:inherit;
background:linear-gradient(90deg,transparent,rgba(200,169,106,.55) 32%,rgba(200,169,106,.55) 68%,transparent);
}
.direction-section .section-heading h2{color:var(--color-white)}
.direction-section .section-heading .eyebrow{color:var(--color-accent)}
.direction-section .direction-tablist{
border-color:rgba(253,252,248,.2);
background:rgba(253,252,248,.12);
}
.direction-section .direction-thumb{background:var(--color-accent)}
.direction-section .direction-tab{color:rgba(253,252,248,.88)}
.direction-section .direction-tab[aria-selected="true"]{background:var(--color-accent);color:var(--color-brand-deep)}
.direction-section .direction-panel :focus-visible{outline-color:var(--color-accent)}
.direction-section .direction-card-link{
border:var(--line) solid rgba(253,252,248,.22);
border-radius:1rem;
background:rgba(253,252,248,.08);
box-shadow:0 .75rem 2rem rgba(6,32,43,.28);
}
.direction-section .direction-card-link::before{
content:"";
position:absolute;
z-index:1;
inset:0;
border-radius:inherit;
background:linear-gradient(135deg,rgba(253,252,248,.16),transparent 42%);
pointer-events:none;
}
.direction-section .direction-card-link::after{z-index:0}
.direction-section .direction-card-copy{z-index:2}
/* ============================================================================
Cerulean theme rolled out site-wide (2026-08-30)
Previously the theme's structural treatment existed only on the home page:
a dark hero with the header floating over it, then the deep bands below.
Every other page opened on a flat ivory `.page-intro` with a solid header.
Now every page opens on a dark hero. Destination pages keep their own
location photograph; every other page gets `.page-hero`, a deep-teal band in
the same proportions. No page borrows a photograph of somewhere it is not
about, and nothing rotates outside the home hero.
The overlay-header rules were scoped to `.home-page`; they are re-scoped
here to `.hero-header`, which every page now carries.
============================================================================ */
/* --- Header over the hero, on every page --- */
/* No hairline under the transparent header: over the photograph it read as a
seam between the bar and the hero. The stuck state brings its own rule back. */
.hero-header .site-header{position:sticky;inset:0 auto auto;z-index:40;background:transparent;border-bottom-color:transparent}
.hero-header .site-header .brand{color:var(--color-white)}
.hero-header .site-header .primary-nav>a,.hero-header .site-header .nav-branch>a{color:var(--color-white)}
.hero-header .nav-contact{color:var(--color-accent)}
/* Over a photograph the toggle needs its own ground: on a bright frame a bare
white "Menu" vanished on phones. Same smoked pill as the hero arrows. */
.hero-header .nav-toggle{color:var(--color-white)}
.hero-header .site-header:not(.is-stuck) .brand-logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.25))}
.hero-header .site-header.is-stuck{background:var(--color-brand-deep);border-bottom-color:rgba(253,252,248,.16)}
/* Pull the hero up under the floating header — the home rotator already did
this; the same offset now applies to both other hero types. */
.hero-header .destination-hero,.hero-header .page-hero{margin-top:calc(var(--header-h, 5rem) * -1)}
@media(max-width:63.99rem){
.hero-header .primary-nav{position:fixed;background:transparent}
.hero-header .primary-nav::before{
content:"";
position:fixed;
inset:5rem 0 0;
z-index:-1;
background:rgba(6,32,43,.82);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
}
@media(min-width:64rem){.hero-header .primary-nav{background:transparent}}
@media(max-width:63.99rem){
/* With the menu open, the header strip sits directly above the drawer and
must read as one continuous surface — match its glass background to the
drawer's regardless of scroll position, instead of staying transparent
over whatever hero image happens to be behind it. Applied via ::before
(not directly on .site-header) because backdrop-filter on the header
itself would make it the containing block for its position:fixed
.primary-nav child, collapsing the drawer to the header's own height. */
body.nav-open.home-page .site-header::before,
body.nav-open.hero-header .site-header::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:rgba(6,32,43,.82);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
}
/* --- The teal hero for pages with no location of their own --- */
.page-hero{
position:relative;display:grid;grid-template-rows:auto 1fr;
min-height:32rem;isolation:isolate;
background:var(--color-brand);color:var(--color-white);
}
/* A single soft wash keeps the flat teal from reading as a solid colour block
at large viewport heights, without introducing imagery. */
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,var(--color-brand) 0%,var(--color-brand-deep) 78%)}
.page-hero>.breadcrumbs{align-self:start;padding-top:calc(var(--header-h, 5rem) + var(--space-2));border-bottom:0;color:var(--color-white)}
.page-hero>.breadcrumbs a{color:var(--color-white)}
.page-hero>.breadcrumbs li:not(:last-child)::after{color:rgba(253,252,248,.5)}
.page-hero-copy{align-self:end;padding-block:var(--space-5) var(--space-8)}
.page-hero .eyebrow{color:var(--color-accent)}
.page-hero-copy.narrow-shell{max-width:68rem}
.page-hero h1{max-width:22ch;margin-bottom:var(--space-2);color:var(--color-white);font-size:clamp(2.75rem,4.25vw,4.75rem)}
.page-hero.domestic-listing-intro h1,.page-hero.international-listing-intro h1{max-width:26ch}
.page-hero p{color:var(--color-white);font-size:var(--text-md)}
/* Without breadcrumbs the grid loses its top row, so the copy would ride up
under the floating header. */
.page-hero>.page-hero-copy:first-child{padding-top:calc(var(--header-h, 5rem) + var(--space-8))}
/* Destination heroes gain the same in-hero breadcrumb row. */
.destination-hero{grid-template-rows:auto 1fr}
.destination-hero h1{max-width:14ch;font-size:clamp(2.5rem,3.75vw,4.5rem)}
.destination-hero>.breadcrumbs{align-self:start;padding-top:calc(var(--header-h, 5rem) + var(--space-2));border-bottom:0;color:var(--color-white)}
.destination-hero>.breadcrumbs a{color:var(--color-white)}
.destination-hero>.breadcrumbs li:not(:last-child)::after{color:rgba(253,252,248,.5)}
.destination-hero>.hero-content{align-self:end}
@media(max-width:47.99rem){
.page-hero{min-height:25rem}
.page-hero-copy{padding-block:var(--space-3) var(--space-6)}
.page-hero h1{font-size:clamp(2.25rem,10vw,2.75rem)}
}
/* Mobile navigation: one main trigger, followed by nested destination lists. */
/* Mobile menu/close toggle is a bare icon + label: no border or fill box,
so it reads as part of the header rather than a button chrome. Focus keeps a
visible ring for keyboard users. */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.65rem .25rem .65rem 1rem;border:0;background:transparent;box-shadow:none}
.nav-toggle:focus-visible{outline:var(--line-strong) solid var(--color-focus);outline-offset:.25rem}
.nav-toggle-icon{position:relative;width:1.15rem;height:.8rem;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.nav-toggle-icon::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:translateY(-50%)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon{border-color:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before,.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{transform:rotate(-45deg)}
.nav-branch-toggle{display:none}
.nav-branch-overview{display:none}
@media(max-width:63.99rem){
.primary-nav{overscroll-behavior:contain}
.primary-nav>a,.nav-branch-toggle{width:100%;min-height:var(--touch);display:flex;align-items:center;border:0;background:transparent;color:var(--color-ink);text-align:left;text-decoration:none;font-weight:800;cursor:pointer}
.nav-branch>.nav-branch-link{display:none}
.nav-branch-toggle{justify-content:space-between;gap:var(--space-2);padding:0}
.nav-branch-icon{position:relative;width:1.1rem;height:1.1rem;flex:0 0 1.1rem}
.nav-branch-icon::before,.nav-branch-icon::after{content:"";position:absolute;inset:50% 0 auto;border-top:2px solid currentColor;transition:transform var(--duration) var(--ease)}
.nav-branch-icon::after{transform:rotate(90deg)}
.nav-branch-toggle[aria-expanded="true"] .nav-branch-icon::after{transform:rotate(0)}
.nav-branch .mega-menu{display:none}
.nav-branch-toggle[aria-expanded="true"] + .mega-menu{display:grid}
.mega-menu{gap:var(--space-2);padding:var(--space-2) 0 var(--space-3) var(--space-2)}
.mega-menu>div{gap:0}
.mega-menu strong{padding-top:.35rem;color:var(--color-accent)}
.mega-menu .nav-branch-overview{min-height:var(--touch);display:flex;align-items:center;color:var(--color-ink);font-weight:800;text-decoration:underline}
.hero-header .site-header .nav-branch-toggle{color:var(--color-white);border-bottom-color:rgba(253,252,248,.18)}
.hero-header .mega-menu .nav-branch-overview{color:var(--color-white)}
.hero-header .mega-menu a{color:rgba(253,252,248,.82)}
}
@media(min-width:64rem){
.nav-toggle,.nav-branch-toggle{display:none}
.nav-branch-overview{display:none!important}
}
/* Desktop scroll state: the header starts as the full-width hero overlay and
settles into a centred, restrained travel-editorial pill after the visitor
moves beyond the opening scene. The nav remains normal HTML/CSS; JavaScript
only publishes the existing .is-stuck state. */
@media(min-width:64rem){
.site-header{
width:100%;
max-width:none;
margin-inline:auto;
/* Intentional layout transition: the bar morphs into a floating pill on
scroll. It is sticky, so its width change reflows nothing else. */
transition:top 220ms var(--ease),width 220ms var(--ease),max-width 220ms var(--ease),border-radius 220ms var(--ease),background-color 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease);
}
.site-header.is-stuck{
top:var(--space-1);
width:calc(100% - 1rem);
max-width:84rem;
border:var(--line) solid rgba(253,252,248,.16);
border-radius:var(--radius-pill);
background:rgba(6,32,43,.78);
box-shadow:0 .75rem 2.5rem rgba(6,32,43,.2);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
.hero-header .site-header.is-stuck,
.home-page .site-header.is-stuck{
background:rgba(6,32,43,.78);
border-color:rgba(253,252,248,.16);
}
.site-header.is-stuck .nav-row{
width:100%;
padding-inline:var(--space-2);
}
.site-header.is-stuck .primary-nav>a,
.site-header.is-stuck .nav-branch>a{color:var(--color-white)}
.site-header.is-stuck .nav-contact{color:var(--color-accent)}
.site-header.is-stuck .mega-menu{
border-color:rgba(253,252,248,.16);
background:rgba(6,32,43,.78);
box-shadow:0 .75rem 2.5rem rgba(6,32,43,.2);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
.site-header.is-stuck .mega-menu strong{color:var(--color-white)}
.site-header.is-stuck .mega-menu a{color:rgba(253,252,248,.9)}
.site-header.is-stuck .mega-menu a:hover,
.site-header.is-stuck .mega-menu a:focus-visible{color:var(--color-accent)}
.hero-header .site-header:not(.is-stuck) .mega-menu{
border-color:rgba(253,252,248,.16);
background:rgba(6,32,43,.78);
box-shadow:0 .75rem 2.5rem rgba(6,32,43,.2);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
.hero-header .site-header:not(.is-stuck) .mega-menu strong{color:var(--color-white)}
.hero-header .site-header:not(.is-stuck) .mega-menu a{color:rgba(253,252,248,.9)}
.hero-header .site-header:not(.is-stuck) .mega-menu a:hover,
.hero-header .site-header:not(.is-stuck) .mega-menu a:focus-visible{color:var(--color-accent)}
}
/* Mobile scroll state: the home/hero headers currently drop to a flat, fully
opaque bar once stuck (see the base rules above), unlike the frosted glass
the same headers get from 64rem up. Give the full-width mobile bar the
same translucent, blurred treatment instead of a solid fill.
The blur is carried by a ::before, not background/backdrop-filter on
.site-header itself: backdrop-filter on an ancestor becomes the CSS
containing block for any position:fixed descendant, and .primary-nav
(the mobile drawer, itself fixed) lives inside .site-header — putting
the filter there collapsed the drawer down to the header's own ~80px
instead of the full viewport.
Do NOT add isolation:isolate to this rule (or to .primary-nav): an
isolated element is a backdrop root, and a backdrop-filter can only
sample pixels painted inside its own backdrop root — so isolating the
header traps its ::before blur and it degrades to a flat tint. The
z-index:-1 ::before is already contained by the header's own
position:sticky + z-index:40 stacking context, so isolation buys
nothing here and costs the glass. */
@media(max-width:63.99rem){
.home-page .site-header.is-stuck,
.hero-header .site-header.is-stuck{
background:transparent;
}
.home-page .site-header.is-stuck::before,
.hero-header .site-header.is-stuck::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:rgba(6,32,43,.82);
-webkit-backdrop-filter:blur(.75rem);
backdrop-filter:blur(.75rem);
}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
@media(max-width:63.99rem){
.home-page .site-header.is-stuck::before,
.hero-header .site-header.is-stuck::before,
.home-page .primary-nav::before,
.hero-header .primary-nav::before{background:var(--color-brand-deep)}
body.nav-open.home-page .site-header::before,
body.nav-open.hero-header .site-header::before{background:var(--color-brand-deep)}
}
.hero-copy .button-secondary{background:rgba(6,32,43,.78)}
}
/* ---------------------------------------------------------------------------
Places to visit — the recessed well.
The plate stays flush with the page and the photograph is cut into it, so
depth reads as a carve rather than as a card lifted off the paper. The
one-pixel top lip is what sells it: without that highlight the well is just
a dark rectangle instead of a cut edge.
The inset shadow must live on an ::after overlay. On a replaced element an
inset box-shadow paints beneath the bitmap and never shows.
--------------------------------------------------------------------------- */
.place-card{
padding:.625rem;
border:var(--line) solid var(--color-surface-strong);
border-radius:var(--radius-plate);
background:var(--color-surface);
box-shadow:var(--lip-plate),0 1px 2px rgba(6,32,43,.05);
transition:box-shadow var(--duration) var(--ease)}
.place-card:hover{
box-shadow:var(--lip-plate),0 2px 4px rgba(6,32,43,.06),
0 1rem 1.875rem -1.125rem rgba(6,32,43,.22)}
.place-card>.place-media,
.place-card>.ratio-landscape,
.place-card>.image-placeholder{
position:relative;
border-radius:var(--radius-media);
overflow:hidden}
.place-card>.place-media::after,
.place-card>.ratio-landscape::after,
.place-card>.image-placeholder::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
box-shadow:var(--shadow-well),var(--edge-media)}
/* The plate already carries .625rem, so the copy keeps its 1.5rem inset. */
.place-copy{padding:1.25rem .875rem 1.375rem}
/* ---------------------------------------------------------------------------
Overview — a full-width lead paragraph.
The branch-note aside that used to sit beside it is gone, so the copy runs
the width of the shell. Set larger than body text: at this measure 1rem
would give a punishing line length.
Bottom padding is dropped because Overview reads as the opening of the page
rather than a band of its own — the following section's own top padding is
the whole gap.
--------------------------------------------------------------------------- */
.overview-section{padding-bottom:0}
/* Paragraphs are capped at 68ch site-wide. Rather than break that measure to
fill the line, size the lead so 68 characters span the 82rem shell exactly —
full width, and not one character looser than the rest of the site. The vw
term keeps it honest on narrower viewports, where the shell shrinks too. */
.overview-lead{font-size:clamp(1rem,1.85vw,1.65rem);line-height:1.5;text-wrap:pretty}
/* ============================================================
Hero: full-bleed destination wordmark + frosted places panel
The name is the hero's subject, set edge-to-edge across the
photograph; the supporting copy sits bottom-left and the
places to visit read from a small glass panel bottom-right.
============================================================ */
/* Sized from its own character count so every name — four letters or
twenty-five — spans the same width on one line. 0.66em is the average
uppercase advance in Newsreader; main.js measures the rendered line and
corrects --hero-len, so this only has to be close. The cap stops short
names from growing past the fold. */
.hero-rotator .hero-wordmark{
--hero-gutter:var(--space-3);
width:100vw;
max-width:100vw;
margin-inline:calc(50% - 50vw);
margin-bottom:0;
padding-inline:var(--hero-gutter);
font-size:min(16rem,26svh,calc((100vw - var(--hero-gutter) * 2) / (var(--hero-len,7) * 0.66)));
font-weight:600;
line-height:.9;
letter-spacing:var(--hero-track,-.015em);
/* Tracking leaves dead space after the last glyph, which pulls a centred
line off-centre by half of it. An indent of the same size cancels it. */
text-indent:var(--hero-track,0px);
text-align:center;
text-transform:uppercase;
white-space:nowrap;
color:var(--color-white);
text-shadow:0 .25rem 1.25rem rgba(6,32,43,.45);
animation:none;
}
@keyframes hero-word-in{from{opacity:0;transform:translateY(.75rem) scale(.985)}to{opacity:1;transform:none}}
/* Glass panel. The rotator isolates its own stacking context, so the
backdrop being blurred is the photograph plus its scrim. */
.hero-places,
.hero-copy{
align-self:end;
padding:var(--space-3);
border:var(--line) solid rgba(253,252,248,.3);
border-radius:var(--radius-plate);
/* Neutral smoked glass: a dark, colourless layer over the blur so the white
copy stays legible over bright skies and snow without tinting the panel. */
background:rgba(12,14,16,.36);
-webkit-backdrop-filter:blur(1.125rem);
backdrop-filter:blur(1.125rem);
box-shadow:0 1.5rem 3rem rgba(6,32,43,.3),inset 0 1px 0 rgba(253,252,248,.35);
}
/* The copy sits on the same glass as the places panel, so it no longer needs
the text-shadow it carried when it sat straight on the photograph. */
.hero-copy{text-shadow:none}
/* Inside the glass panel the secondary button stays translucent, so it reads
as part of the panel rather than a solid block punched into it. Elsewhere
(beige sections, destination pages) .button-secondary is solid brand-deep,
because a 40% tint over paper left white text below AA contrast. */
.hero-copy .button-secondary{background:rgba(6,32,43,.55);-webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem)}
.hero-copy .eyebrow{margin-bottom:var(--space-2)}
.hero-copy .hero-price{margin-bottom:var(--space-3)}
.hero-places-label{margin-bottom:var(--space-2);color:var(--color-accent);text-shadow:none}
.hero-places-list{display:grid;gap:.5rem;font-size:var(--text-sm);font-weight:500;text-shadow:none}
.hero-places-list li+li{padding-top:.5rem;border-top:var(--line) solid rgba(253,252,248,.18)}
.hero-places-list li+li::before{content:none}
/* Wordmark centred in the free space, everything else pinned to the
bottom row: rail | copy | glass panel. */
/* The hero is the one section that ignores the centred 82rem measure: the
copy is pinned to the left edge of the frame and the glass panel to the
right, with the free space between them as a third, elastic column. */
@media(min-width:64rem){
.hero-rotator-inner{
width:100%;
max-width:none;
margin-inline:0;
padding-inline:var(--space-5);
/* The bottom row sits as low as the controls allow, so the frame reads as
one composition rather than a band of copy floating above dead space. */
padding-block:calc(var(--space-12) + var(--space-6)) var(--space-5);
grid-template-columns:auto minmax(0,34rem) 1fr minmax(0,21rem);
grid-template-rows:1fr auto;
align-self:stretch;
align-content:stretch;
column-gap:var(--space-4);
row-gap:var(--space-4);
}
.hero-rotator .hero-wordmark{grid-column:1/-1;grid-row:1;align-self:center}
.hero-rail{grid-column:1;grid-row:2;align-self:end}
/* Sized to its content, not the column: with the teaser sentence gone the
panel only needs to hold the eyebrow, price and two buttons. */
.hero-copy{grid-column:2;grid-row:2;justify-self:start;width:max-content;max-width:100%}
.hero-places{grid-column:4;grid-row:2;max-width:none;justify-self:end}
}
@media(min-width:100rem){
.hero-rotator-inner{grid-template-columns:auto minmax(0,38rem) 1fr minmax(0,23rem)}
}
@media(max-width:63.99rem){
/* 0.72em per glyph, not 0.66: the display face's capitals run wider than the
old estimate, so the pre-JS size overflowed on phones until fitName()
corrected it. The script still spends any slack on tracking. */
.hero-rotator .hero-wordmark{--hero-gutter:var(--space-2);font-size:min(7rem,18svh,calc((100vw - var(--hero-gutter) * 2) / (var(--hero-len,7) * 0.72)))}
}
@media(prefers-reduced-motion:reduce){
.hero-rotator .hero-wordmark{animation:none!important}
}
/* ============================================================
Direction cards — tall portrait plates
The photograph fills the whole card and is graded down into the
copy, so the card's lower half takes its colour from its own
image. Card height is driven by min-height rather than an
aspect ratio: the grid row still stretches every card to match,
and a long teaser lengthens the plate instead of overflowing it.
============================================================ */
.direction-grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-4)}
.direction-card{display:grid}
.direction-card-link{
display:flex;
flex-direction:column;
justify-content:flex-end;
min-height:29rem;
max-width:20rem;
width:100%;
border-radius:var(--radius-plate);
isolation:isolate;
}
.direction-card-body{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap:var(--space-2);
padding:var(--space-3);
}
/* Two lines are reserved whether or not the name needs them, so a card titled
"Jammu & Kashmir" keeps its teaser, tags and button on the same lines as its
single-line neighbours. */
.direction-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2);min-height:2.875rem}
.direction-card-head .direction-card-name{font-size:var(--text-md);font-weight:600}
.direction-card-price{
flex:none;
padding:.3rem .7rem;
border:var(--line) solid rgba(253,252,248,.24);
border-radius:var(--radius-pill);
background:rgba(6,32,43,.55);
-webkit-backdrop-filter:blur(.5rem);
backdrop-filter:blur(.5rem);
font-size:var(--text-xs);
font-weight:800;
white-space:nowrap;
}
.direction-card-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.direction-card-tag{
padding:.3rem .6rem;
border:var(--line) solid rgba(253,252,248,.18);
border-radius:var(--radius-pill);
background:rgba(6,32,43,.5);
font-size:var(--text-xs);
font-weight:600;
}
.direction-card-cta{
display:grid;
place-items:center;
min-height:var(--touch);
margin-top:.25rem;
border-radius:var(--radius-pill);
background:var(--color-white);
color:var(--color-brand-deep);
font-weight:800;
transition:background-color var(--duration) var(--ease),color var(--duration) var(--ease);
}
.direction-card-link:hover .direction-card-cta{background:var(--color-accent);color:var(--color-brand-deep)}
/* The plate is the photograph itself, so it carries a shadow rather than the
outline and glass sheen the flat card needed. */
.direction-section .direction-card-link{
border:0;
border-radius:var(--radius-plate);
background:var(--color-brand-deep);
box-shadow:0 1.25rem 2.5rem rgba(6,32,43,.45);
}
.direction-section .direction-card-link::before{content:none}
@media(prefers-reduced-motion:reduce){
.direction-card-cta{transition:none}
}
/* ---- Itinerary: pinned aside and day tracker -------------------------
The day list keeps its single-column flow on small screens. From 64rem the
heading, draft ribbon and progress tracker move into their own column that
holds position while the days scroll past — position:sticky here is the
fallback, and scripts/gsap-scroll.js swaps in a ScrollTrigger pin once it
takes over, so only one mechanism is ever holding the column. */
.itinerary-shell{display:grid;gap:var(--space-4)}
.itinerary-aside .section-heading{margin-bottom:var(--space-2)}
.itinerary-tracker{display:none}
@media(min-width:64rem){
.itinerary-shell{
grid-template-columns:minmax(16rem,20rem) minmax(0,1fr);
gap:var(--space-6);
align-items:start;
}
.itinerary-shell .timeline{max-width:none}
.itinerary-aside{position:sticky;top:calc(var(--header-h, 5rem) + var(--space-3))}
/* gsap-scroll.js adds .is-pinned only when it actually takes the column
over, so sticky stays in charge on the itineraries too short to pin. */
.itinerary-aside.is-pinned{position:static;top:auto}
/* The tracker is driven by scroll position, so it shows whenever the GSAP
layer is live - pinned column or sticky one. */
.gsap-enhanced .itinerary-tracker{
display:flex;
align-items:center;
gap:var(--space-2);
margin-top:var(--space-4);
}
.itinerary-progress{
display:block;
flex:none;
width:.25rem;
height:6rem;
border-radius:var(--radius-pill);
background:var(--color-line);
overflow:hidden;
}
.itinerary-progress-bar{
display:block;
width:100%;
height:100%;
border-radius:inherit;
background:var(--color-international);
transform:scaleY(0);
transform-origin:top center;
will-change:transform;
}
.itinerary-count{font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase}
.itinerary-count strong{font-size:var(--text-lg);margin-right:.15rem}
/* Current day. Emphasis rides on the marker rather than on opacity, which
GSAP is already writing to during the day entrance. */
.gsap-enhanced .timeline li::before{
transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.gsap-enhanced .timeline li.is-current::before{
transform:scale(1.3);
box-shadow:0 0 0 .4rem var(--color-international-soft);
}
}
/* ---- Destination hero: scrubbed pin ----------------------------------
scripts/gsap-scroll.js drives --hero-scrim from 0 to 1 across the pin, so the
frame deepens as the overview section rises over it. The variable defaults to
0, leaving the hero unchanged when the script does not run. */
.gsap-enhanced .destination-hero::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:var(--color-brand-deep);
opacity:calc(var(--hero-scrim, 0) * .55);
pointer-events:none;
}
.gsap-enhanced .destination-hero .hero-media,
.gsap-enhanced .destination-hero .hero-content{will-change:transform}
@media(prefers-reduced-motion:reduce){
.itinerary-progress-bar{transform:none}
.gsap-enhanced .timeline li::before{transition:none}
}
/* ---- FAQ accordion --------------------------------------------------
The trigger already reserves space at its right edge, so the marker is drawn
rather than added to the markup. scripts/gsap-ui.js animates the panel
height; the panel itself needs no state here beyond hiding its overflow
while that runs, which the animation sets inline. */
.accordion-trigger::after{
content:"";
flex:none;
width:.6rem;
height:.6rem;
margin-right:.2rem;
border-right:.16rem solid currentColor;
border-bottom:.16rem solid currentColor;
transform:rotate(45deg);
transform-origin:60% 60%;
transition:transform var(--duration) var(--ease);
}
.accordion-trigger[aria-expanded="true"]::after{transform:rotate(-135deg)}
/* ---- Enquiry submit button ------------------------------------------
The request can take a moment, and a disabled button on its own reads as an
unresponsive form rather than as work in progress. */
.button.is-busy{cursor:progress}
.button.is-busy::before{
content:"";
flex:none;
width:1rem;
height:1rem;
border:.15rem solid currentColor;
border-top-color:transparent;
border-radius:50%;
animation:orbitz-spin .7s linear infinite;
}
@keyframes orbitz-spin{to{transform:rotate(360deg)}}
/* ---- Listing filters ------------------------------------------------
Flip positions the moving cards absolutely for the length of the tween, so
the grid needs a positioning context and the cards need a paint order that
keeps a card being animated above its settled neighbours. */
.listing-grid{position:relative}
.gsap-ui .listing-grid .destination-card{will-change:transform}
/* Only while cards are in flight, so their transforms cannot widen the page.
overflow:clip rather than hidden, so no scroll container is created; the
clip margin leaves room for the card shadows. */
.listing-grid.is-reflowing{overflow:clip;overflow-clip-margin:2rem}
/* ---- Lightbox -------------------------------------------------------
The dialog and its panel are transformed on open and close, so the panel
needs its own compositing layer; the image is faded through src swaps. */
.gsap-ui .lightbox-content{transform-origin:center center}
.gsap-ui .lightbox-image{will-change:opacity,transform}
@media(prefers-reduced-motion:reduce){
.accordion-trigger::after{transition:none}
.button.is-busy::before{animation:none}
}
/* ---- Hero rotator: GSAP takes over the change ------------------------
scripts/gsap-ui.js runs the photograph, the name and the copy on one
timeline. These three animations were independent and would fight it for
the same properties — a CSS animation beats an inline style, so the name
in particular has to give up its keyframes or GSAP cannot move it at all.
All of it stays in place when gsap-ui.js is absent. */
.gsap-ui .hero-slide{transition:none}
.gsap-ui .hero-copy.is-entering>*{animation:none}
.gsap-ui .hero-rotator .hero-wordmark{animation:none}
.gsap-ui .hero-rotator.is-transitioning .hero-slide,
.gsap-ui .hero-rotator.is-transitioning .hero-slide-frame,
.gsap-ui .hero-rotator.is-transitioning .hero-wordmark,
.gsap-ui .hero-rotator.is-transitioning .hero-copy,
.gsap-ui .hero-rotator.is-transitioning .hero-places{will-change:transform,opacity,clip-path}
.gsap-ui .hero-rotator.is-transitioning .hero-progress>span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
.hero-slide{transition:none!important}
}
/* Mobile viewport and input hardening (A2–A5). */
.lightbox-content{height:min(92dvh,60rem)}
.lightbox-image{max-height:calc(92dvh - 9rem)}
.review-launcher{min-height:100svh;min-height:100dvh}
@media(max-width:63.99rem){
.primary-nav{inset:var(--header-h,5rem) 0 0;max-height:calc(100dvh - var(--header-h,5rem))}
.home-page .primary-nav::before,.hero-header .primary-nav::before{inset:var(--header-h,5rem) 0 0}
.coverflow.is-swiping .cf-card{transition:none}
}
@media(min-width:48rem) and (max-width:63.99rem) and (orientation:portrait){
.hero-controls{display:flex}
}
@media(min-width:64rem){.mega-menu a{min-height:var(--touch)}}
.hero-dot{position:relative;width:var(--touch);height:var(--touch);min-height:var(--touch);background:transparent}
.hero-dot::before{content:"";position:absolute;inset:calc(50% - .375rem) 0;border-radius:var(--radius-pill);background:rgba(253,252,248,.32);transition:background-color var(--duration) var(--ease)}
.hero-dot:hover,.hero-dot.is-active{background:transparent}
.hero-dot:hover::before{background:rgba(253,252,248,.6)}
.hero-dot.is-active::before{background:var(--color-accent)}
@media(min-width:64rem){
.hero-dot{width:var(--touch);height:var(--touch)}
.hero-dot::before{inset:0 calc(50% - .375rem)}
}
.skip-link,.cf-link,.direction-panel-more a,.site-footer a:not(.social-link){min-height:var(--touch);display:inline-flex;align-items:center}
.lightbox-image{aspect-ratio:3/2}
.filter-search input,.site-search input{width:100%;min-height:var(--touch);padding:.75rem;border:var(--line) solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-ink)}
/* ---- Listing filter panel: one row on a deep-brand ground -------------
Search | Sort | Price | Duration | Region | Trip type | Clear all, all on
one line from the desktop breakpoint. The search field takes the widest
column, the button sizes to its label. Below that the fields wrap onto a
3-up grid as before. */
.filter-panel{
border-radius:var(--radius-plate);
background:linear-gradient(165deg,var(--color-brand-deep) 0%,var(--color-brand) 60%,#245263 100%);
color:var(--color-white);
box-shadow:0 1.25rem 2.5rem -1rem rgba(6,32,43,.4);
}
.filter-panel .filter-field label{color:var(--color-accent)}
/* Same vertical padding on the text input as the selects, so the labels
across the row sit on one baseline. */
.filter-panel .filter-field select,.filter-panel .filter-search input{padding:.65rem;border-color:transparent}
/* "Clear all" is a quiet, borderless frosted button on the deep ground so it
does not compete with the selects above it; the accent fill on hover/focus
still marks it as actionable. */
.filter-panel .clear-filters{border-color:transparent;background:rgba(253,252,248,.14);color:var(--color-white)}
.filter-panel .clear-filters:hover,.filter-panel .clear-filters:focus-visible{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-brand-deep)}
@media(min-width:64rem){
.filter-panel{grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr)) auto;align-items:end}
.filter-panel .clear-filters{min-height:var(--touch);white-space:nowrap}
}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1)}
.compare-button{min-width:var(--touch);min-height:var(--touch);padding:.5rem .75rem;border:var(--line) solid var(--color-brand);border-radius:var(--radius-sm);background:transparent;color:var(--color-brand-deep);font-weight:800;cursor:pointer}
.compare-button[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent)}
.compare-tray{position:fixed;z-index:70;inset:auto 1rem 1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);padding:var(--space-2);border:var(--line) solid var(--color-line);background:var(--color-paper);box-shadow:var(--shadow-lg)}
.compare-tray[hidden]{display:none}.compare-tray>div{display:grid}.compare-tray ul{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}.compare-tray li{display:flex;align-items:center;border:var(--line) solid var(--color-line)}
.compare-tray li a,.compare-tray li button{min-height:var(--touch);display:inline-flex;align-items:center;padding:.5rem;border:0;background:transparent;color:var(--color-ink);font-weight:700}.compare-tray li button{min-width:var(--touch);justify-content:center;cursor:pointer}
.site-search{display:grid;gap:var(--space-1);margin-bottom:var(--space-2)}.site-search>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1)}
.search-results{display:grid;gap:var(--space-2);padding:0;list-style:none}.search-results a{display:grid;gap:.25rem;padding:var(--space-2);border:var(--line) solid var(--color-line);background:var(--color-white);text-decoration:none}.search-results span{color:var(--color-accent-ink);font-size:var(--text-xs);font-weight:800;text-transform:uppercase}.search-results p{margin:0}
@media(min-width:64rem){.compare-tray{left:50%;right:auto;width:min(60rem,calc(100% - 2rem));transform:translateX(-50%)}}
/* ---- Browser surfaces -----------------------------------------------------
Selection, caret and scrollbar ship with browser defaults that belong to no
palette; theming them from the brand is the cheapest tell that the page was
designed rather than assembled. */
::selection{background:var(--color-accent);color:var(--color-brand-deep)}
input,textarea,select{caret-color:var(--color-brand);accent-color:var(--color-brand)}
@supports (scrollbar-color:auto){html{scrollbar-color:var(--color-brand) var(--color-paper)}}
/* Entry requirements beside traveller tips: two columns from 64rem via
.split-copy, each column topped by its own heading. */
.visa-tips{align-items:start}
.visa-tips .visa-block>p{margin-bottom:var(--space-2)}
/* Count beside a listing heading, set small and in the accent so the heading
still leads. */
.heading-count{margin-left:.35em;font-size:.5em;font-weight:800;vertical-align:.35em;color:var(--color-accent-ink)}
/* Reviewed line under a section heading: small, quiet, one line. */
.meta-line{margin-top:calc(var(--space-1) * -1);margin-bottom:0;font-size:var(--text-sm);color:var(--color-ink-soft)}
.meta-line time{font-variant-numeric:tabular-nums}
/* "At a glance" table under the overview. Row headings sit in the accent ink
so the labels read as labels; the table matches the essentials cards in
surface and rule colour rather than introducing a new panel style. */
.glance-table{width:100%;max-width:var(--container-narrow);margin-top:var(--space-4);border-collapse:collapse;border-top:.25rem solid var(--color-accent);background:var(--color-surface);font-size:var(--text-sm)}
.glance-table th,.glance-table td{padding:var(--space-2);border-bottom:var(--line) solid var(--color-line);text-align:left;vertical-align:top}
.glance-table th{width:11rem;color:var(--color-accent-ink);font-weight:800;letter-spacing:.02em}
.glance-table tr:last-child th,.glance-table tr:last-child td{border-bottom:0}
@media(max-width:40rem){.glance-table th{width:8rem}}
/* Official resources under How to reach: a short link list, not a card. */
.official-links{margin-top:var(--space-4)}
.official-links h3{margin-bottom:var(--space-1);font-size:var(--text-base)}
.official-links ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
/* Service pages: long-form sections in the left column, the two asides
stacked on the right. */
.service-sections{display:grid;gap:var(--space-5)}
.service-section h2{margin-bottom:var(--space-2);font-size:clamp(1.6rem,3vw,2.2rem)}
.service-section p+p{margin-top:var(--space-2)}
.service-side{display:grid;gap:var(--space-3);align-content:start}
.service-share ul{margin:0;padding-left:1.1em}
.service-share li{margin-bottom:var(--space-1)}
@media(min-width:40rem){.service-page .service-grid{grid-template-columns:1.6fr 1fr;align-items:start}}
/* Homepage entity statement under the promise heading. */
.promise-lead{margin-top:var(--space-2);margin-bottom:0;max-width:52ch}