/* Saffron Wings · concept by Brand Evolution */
:root{
  --indigo:#17183B; --indigo2:#23255A; --saffron:#F08A24; --saffron-soft:#FFE2BE; --saffron-deep:#A84F08; --cream:#FBF3E4; --paper:#FFFAF2;
  --peacock:#0F6E6A; --ink:#1E1B2E; --ink-soft:#56506A; --gold:#F6C27E;
  --display:"Playfair Display", Georgia, serif; --body:"Sora", system-ui, sans-serif; --r:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:400 1rem/1.65 var(--body); color:var(--ink); background:var(--cream); overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display); line-height:1.06; margin:0 0 .45em; font-weight:700; letter-spacing:-.01em}
h1 em,h2 em{font-style:italic; color:var(--saffron-deep)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--saffron); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:10px; z-index:100}
.skip:focus{left:12px}
.wrap{width:min(1180px, 100% - 32px); margin:0 auto; position:relative}
.two{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,72px); align-items:center}
.display{font-size:clamp(2.1rem, 4.6vw, 3.9rem)}
.kicker{font:700 .76rem/1.3 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--saffron-deep); margin-bottom:1rem}
.lead{font-size:clamp(1.02rem,1.3vw,1.14rem); max-width:34em; color:var(--ink-soft)}
.tiny{font-size:.88rem; color:var(--ink-soft); margin-top:1.4rem}

/* buttons */
.btn{display:inline-flex; align-items:center; font:700 .98rem var(--body); text-decoration:none; color:#fff; background:var(--indigo); border:0; cursor:pointer;
  padding:.85em 1.55em; border-radius:999px; box-shadow:0 10px 24px rgba(23,24,59,.22); transition:background .2s; will-change:transform}
.btn:hover{background:#2B2D6E}
.btn-ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor}
.btn-ghost:hover{background:rgba(23,24,59,.06)}
.btn-dark{background:var(--indigo)}
.btn-small{padding:.58em 1.1em; font-size:.88rem; background:var(--saffron); color:var(--indigo); box-shadow:none}
.btn-small:hover{background:#F59B42}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem}

/* nav: glass tinted to the section beneath */
.nav{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 24px); z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:8px 8px 8px 14px; border-radius:999px; color:var(--ink);
  background:var(--navbg, rgba(251,243,228,.78)); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 6px 24px rgba(23,24,59,.1), inset 0 0 0 1px rgba(23,24,59,.08); transition:background .35s, color .35s}
.nav[data-tone="dark"]{color:var(--cream); box-shadow:0 6px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(251,243,228,.14)}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font:700 1.14rem var(--display)}
.logo svg{width:32px; height:32px}
.nav nav{display:flex; gap:2px}
.nav nav a{text-decoration:none; font-weight:600; font-size:.9rem; padding:7px 13px; border-radius:999px}
.nav nav a:hover{background:rgba(127,127,127,.18)}

.sec{scroll-margin-top:80px; position:relative; padding:clamp(92px,10vw,140px) 0 clamp(80px,9vw,120px)}

/* hero */
.sw-hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px;
  background:radial-gradient(70% 60% at 85% 35%, #FFE2BE, transparent 70%), var(--cream)}
.sw-hero-copy > *{animation:rise .6s cubic-bezier(.2,.8,.3,1) both}
.sw-hero-copy > :nth-child(2){animation-delay:.05s} .sw-hero-copy > :nth-child(3){animation-delay:.12s}
.sw-hero-copy > :nth-child(4){animation-delay:.18s} .sw-hero-copy > :nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0; transform:translateY(22px)}}
.sw-hero-art{position:relative; justify-self:center; width:min(36vw, 400px)}
.sw-window{width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(23,24,59,.18))}
.sw-par{transition:transform .5s cubic-bezier(.2,.8,.3,1); will-change:transform}
.sw-cloud{animation:drift 14s linear infinite alternate}
.sw-cloud.c2{animation-duration:19s; animation-direction:alternate-reverse}
.sw-cloud.c3{animation-duration:11s}
@keyframes drift{to{transform:translateX(-46px)}}
.sw-blink{animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sw-pass{position:absolute; left:-14%; bottom:4%; display:grid; grid-template-columns:auto 60px auto; align-items:center; gap:8px 12px; padding:14px 18px 10px;
  background:var(--paper); border-radius:16px; box-shadow:0 14px 30px rgba(23,24,59,.16); transform:rotate(-5deg);
  animation:rise .7s .5s cubic-bezier(.2,.8,.3,1) both}
.sw-pass::before,.sw-pass::after{content:""; position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--cream); transform:translateY(-50%)}
.sw-pass::before{left:-7px} .sw-pass::after{right:-7px}
.sw-pass small{display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.sw-pass b{display:block; font:700 1.5rem/1 var(--display); color:var(--indigo)}
.sw-pass span{font-size:.72rem; color:var(--ink-soft)}
.sw-pass svg{width:60px; height:20px}
.sw-pass p{grid-column:1/-1; margin:4px 0 0; padding-top:6px; border-top:1.5px dashed #D9CCB6; font-size:.72rem; font-weight:600; color:var(--saffron-deep)}
.sw-hello{position:absolute; right:-6%; top:2%; border:0; padding:0; background:none; cursor:pointer; color:var(--ink)}
.sw-bubble{display:block; font:700 clamp(.9rem,1.3vw,1.04rem)/1.2 var(--body); background:#fff; padding:12px 16px; border-radius:18px 18px 18px 4px; white-space:nowrap;
  box-shadow:0 10px 26px rgba(23,24,59,.16); transform-origin:0 100%; animation:pop .55s cubic-bezier(.3,1.7,.5,1) .8s backwards}
.sw-hello.again .sw-bubble{animation:pop2 .5s cubic-bezier(.3,1.7,.5,1) backwards}
@keyframes pop{from{opacity:0; transform:scale(0) rotate(-8deg)}}
@keyframes pop2{from{opacity:0; transform:scale(0) rotate(-8deg)}}

/* route section */
.sw-route{background:radial-gradient(60% 40% at 20% 30%, #262863, transparent 70%), var(--indigo); color:var(--cream)}
.sw-route .kicker{color:var(--gold)}
.sw-route h2 em{color:var(--saffron)}
.sw-route .lead{color:#CFCBE0}
.sw-head{max-width:720px; margin-bottom:clamp(20px,4vw,48px)}
.sw-jr{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,60px)}
.sw-map{position:sticky; top:86px; align-self:start; height:calc(100vh - 110px); max-height:820px; display:flex; flex-direction:column; justify-content:center; z-index:2}
#map{width:100%; height:100%; max-height:calc(100% - 30px); overflow:visible}
.sw-sea{font:italic 600 13px var(--display); fill:#9B98C4; letter-spacing:.08em}
.sw-note{font:600 11px var(--body); fill:#8D8AB8; letter-spacing:.06em}
.sw-seg{stroke:#FBF3E4; stroke-opacity:.5; stroke-width:2.6; stroke-dasharray:.1 8}
.sw-tr{stroke:var(--saffron); stroke-width:3}
.sw-pin{cursor:pointer; outline:none}
.sw-pin .dot{fill:var(--cream); stroke:var(--indigo); stroke-width:2.5; transition:fill .3s}
.sw-pin .halo{fill:url(#swPinG); opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .3s}
.sw-pin text{font:700 15px var(--body); fill:var(--cream); paint-order:stroke; stroke:var(--indigo); stroke-width:4px; stroke-linejoin:round}
.sw-pin.done .dot{fill:var(--saffron)}
.sw-pin.on .dot{fill:var(--saffron)}
.sw-pin.on .halo{opacity:1; animation:halo 1.8s ease-out infinite}
.sw-pin:hover .dot,.sw-pin:focus-visible .dot{fill:var(--gold)}
.sw-pin:focus-visible text{text-decoration:underline}
@keyframes halo{from{transform:scale(.4); opacity:1} to{transform:scale(1.5); opacity:0}}
.sw-maplegend{margin:6px 0 0; font-size:.78rem; color:#B4B0D0; display:flex; align-items:center; gap:8px}
.sw-maplegend span{display:inline-block; width:22px; height:3px; border-radius:2px}
.lg-a{background:var(--saffron)} .lg-b{background:repeating-linear-gradient(90deg, #FBF3E4 0 3px, transparent 3px 8px); opacity:.6; margin-left:10px}

.sw-cards{position:relative; z-index:1}
.sw-tour{min-height:86vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0}
.sw-tour > *{max-width:470px}
.sw-tour{--k:1}
.sw-tour .sw-stopno{font:700 .74rem var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem}
.sw-tour h3{font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:.5em}
.sw-meta{list-style:none; padding:0; margin:0 0 1rem; display:flex; gap:12px; flex-wrap:wrap}
.sw-meta li{padding:12px 16px; border-radius:16px; background:rgba(251,243,228,.08); box-shadow:inset 0 0 0 1px rgba(251,243,228,.16)}
.sw-meta b{display:block; font:700 1.5rem/1.1 var(--display); color:var(--cream)}
.sw-meta li:last-child b{color:var(--saffron)}
.sw-meta span{font-size:.8rem; color:#CFCBE0}
.sw-hi{list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:8px}
.sw-hi li{position:relative; padding-left:26px; color:#E4E0F0; font-size:.96rem}
.sw-hi li::before{content:""; position:absolute; left:2px; top:.62em; width:12px; height:2px; background:var(--saffron); border-radius:2px}
.sw-add{align-self:flex-start; font:700 .9rem var(--body); border:0; cursor:pointer; padding:.7em 1.2em; border-radius:999px; color:var(--indigo); background:var(--cream); transition:background .2s, transform .2s}
.sw-add[aria-pressed="true"]{background:var(--saffron)}
.sw-add[aria-pressed="true"]::before{content:"✓ "}
.sw-add:hover{transform:translateY(-2px)}
.sw-foot{font-size:.8rem; color:#A9A5C8; max-width:470px; padding-bottom:20px}
/* with JS: cards dim and slide while the plane is in the air, slide in when it lands */
html.js .sw-tour > *{transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1)}
html.js .sw-tour:not(.on) > *{opacity:.28; transform:translateX(36px)}
html.js .sw-tour:not(.on) > :nth-child(2){transform:translateX(52px)}
html.js .sw-tour:not(.on) > :nth-child(3){transform:translateX(66px)}
html.js .sw-tour.on > :nth-child(2){transition-delay:.05s} html.js .sw-tour.on > :nth-child(3){transition-delay:.1s}
html.js .sw-tour.on > :nth-child(4){transition-delay:.15s} html.js .sw-tour.on > :nth-child(5){transition-delay:.2s}

/* how */
.sw-how{background:var(--paper)}
.sw-how-grid{align-items:start}
.sw-steps{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:12px; counter-reset:s}
.sw-steps li{counter-increment:s; position:relative; padding:16px 18px 14px 66px; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(23,24,59,.07)}
.sw-steps li::before{content:counter(s, decimal-leading-zero); position:absolute; left:18px; top:15px; font:italic 700 1.4rem/1 var(--display); color:var(--saffron-deep)}
.sw-steps b{display:block; font-weight:700}
.sw-steps span{font-size:.93rem; color:var(--ink-soft)}
.sw-incl{display:grid; gap:14px}
.sw-box{padding:22px; border-radius:var(--r); background:var(--indigo); color:var(--cream)}
.sw-box h3{font-size:1.35rem}
.sw-box-b{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px #E8DCC8}
.sw-tick,.sw-cross{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:.92rem}
.sw-tick li::before{content:"✓"; color:var(--saffron); font-weight:700; margin-right:8px}
.sw-cross{grid-template-columns:1fr}
.sw-cross li::before{content:"–"; color:var(--saffron-deep); font-weight:700; margin-right:8px}
.sw-stats{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.sw-stats li{padding:14px; border-radius:18px; background:var(--saffron-soft)}
.sw-stats b{display:block; font:700 clamp(1.5rem,2.6vw,2.1rem)/1 var(--display); color:var(--indigo)}
.sw-stats span{font-size:.8rem; font-weight:600; color:#5A3A12}

/* trip builder */
.sw-plan{background:linear-gradient(180deg, var(--cream), #FFE9CC)}
.sw-plan-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,40px); align-items:start; margin-top:1.6rem}
.sw-form{display:grid; gap:16px; padding:24px; border-radius:26px; background:var(--paper); box-shadow:0 18px 40px rgba(23,24,59,.1)}
.sw-form label{display:grid; gap:6px; font-weight:600; font-size:.88rem}
.sw-form input:not([type="checkbox"]),.sw-form select{font:500 1rem var(--body); color:var(--ink); padding:11px 12px; border-radius:12px; border:1.5px solid #DCCDB4; background:#fff; width:100%; min-width:0}
.sw-form input:focus,.sw-form select:focus{border-color:var(--indigo); outline:2px solid rgba(240,138,36,.35)}
.sw-row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.sw-chips{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.sw-chips legend{font-weight:600; font-size:.88rem; margin-bottom:8px; padding:0}
.sw-chips label{display:block; cursor:pointer}
.sw-chips input{position:absolute; opacity:0; width:1px; height:1px}
.sw-chips span{display:block; padding:8px 14px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1.5px #DCCDB4; font-weight:600; font-size:.92rem; transition:background .2s, color .2s}
.sw-chips i{font-style:normal; font-size:.74rem; opacity:.7; margin-left:3px}
.sw-chips input:checked + span{background:var(--indigo); color:var(--cream); box-shadow:none}
.sw-chips input:focus-visible + span{outline:3px solid var(--saffron); outline-offset:2px}
.sw-step{display:grid; gap:6px; font-weight:600; font-size:.88rem}
.sw-step small{font-weight:400; color:var(--ink-soft)}
.sw-step > div{display:flex; align-items:center; justify-content:space-between; border:1.5px solid #DCCDB4; border-radius:12px; background:#fff; padding:4px}
.sw-step button{width:38px; height:38px; border:0; border-radius:9px; background:var(--cream); font:700 1.2rem var(--body); color:var(--indigo); cursor:pointer}
.sw-step button:hover{background:var(--saffron-soft)}
.sw-step output{font:700 1.15rem var(--body)}
.sw-toggle{display:flex !important; grid-template-columns:none; align-items:center; gap:12px !important; cursor:pointer; font-weight:600}
.sw-toggle small{font-weight:400; color:var(--ink-soft)}
.sw-toggle input{position:absolute; opacity:0; width:1px; height:1px}
.sw-sw{flex:none; width:46px; height:26px; border-radius:99px; background:#D6CBB8; position:relative; transition:background .25s}
.sw-sw::after{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .3s cubic-bezier(.4,1.6,.5,1)}
.sw-toggle input:checked + .sw-sw{background:var(--peacock)}
.sw-toggle input:checked + .sw-sw::after{transform:translateX(20px)}
.sw-toggle input:focus-visible + .sw-sw{outline:3px solid var(--saffron); outline-offset:2px}
.sw-form .btn{justify-self:start}
.sw-msg{margin:0; font-weight:600; color:var(--peacock); min-height:1.2em}

.sw-est{position:sticky; top:96px; padding:24px; border-radius:26px; background:var(--indigo); color:var(--cream); box-shadow:0 24px 50px rgba(23,24,59,.28)}
.sw-est-k{font:700 .74rem var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem}
.sw-est-route{font:700 1.3rem/1.3 var(--display); margin-bottom:.8rem}
.sw-stamps{display:flex; flex-wrap:wrap; gap:8px; min-height:46px; margin-bottom:12px}
.sw-stamp{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:2px dashed var(--saffron); color:var(--saffron); font:700 .66rem var(--body); letter-spacing:.06em; transform:rotate(var(--r,-8deg))}
.sw-stamp.new{animation:stamp .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes stamp{from{transform:scale(2.2) rotate(20deg); opacity:0}}
.sw-est-dl{margin:0 0 14px; display:grid; gap:8px}
.sw-est-dl div{display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid rgba(251,243,228,.12); font-size:.92rem}
.sw-est-dl dt{color:#B9B5D6} .sw-est-dl dd{margin:0; font-weight:600; text-align:right}
.sw-total{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; padding:14px 16px; border-radius:16px; background:var(--saffron); color:var(--indigo)}
.sw-total span{font-weight:700; font-size:.9rem}
.sw-total b{font:800 1.9rem/1 var(--display)}
.sw-tip{margin:14px 0 0; font-size:.88rem; color:#E4E0F0; min-height:1.4em}
.sw-fine{margin:10px 0 0; font-size:.76rem; color:#A9A5C8}

/* footer */
.sw-footer{background:var(--saffron); color:var(--indigo); padding-bottom:90px}
.sw-foot-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.sw-footer .display{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.sw-fmeta{font-size:.94rem}
.copy{text-align:center; font-size:.84rem; margin:48px 0 0; opacity:.85}
.badge{position:fixed; left:12px; bottom:12px; z-index:70; font:600 .76rem var(--body); text-decoration:none; color:#fff; background:rgba(23,24,59,.92); padding:7px 12px; border-radius:999px}
.badge:hover{background:var(--saffron-deep)}

@media (max-width:860px){
  .nav nav{display:none}
  .two,.sw-foot-grid,.sw-plan-grid{grid-template-columns:1fr}
  .sw-hero{min-height:auto; padding-top:110px}
  .sw-hero-art{width:min(68vw, 300px); margin:30px auto 0}
  .sw-pass{left:-8%; bottom:2%; padding:10px 12px 8px; gap:4px 8px}
  .sw-pass b{font-size:1.15rem}
  .sw-hello{right:-12%; top:-4%}
  .sw-jr{grid-template-columns:1fr; gap:0}
  .sw-map{top:64px; height:40vh; background:linear-gradient(180deg, var(--indigo) 88%, rgba(23,24,59,0)); padding-bottom:14px; margin:0 -16px; padding-left:16px; padding-right:16px}
  .sw-maplegend{display:none}
  #map{max-height:100%}
  .sw-tour{min-height:64vh; justify-content:flex-start; padding-top:3vh}
  .sw-hi li{font-size:.9rem}
  .sw-tick{grid-template-columns:1fr}
  .sw-stats{gap:8px} .sw-stats li{padding:10px}
  .sw-row2{grid-template-columns:1fr}
  .sw-form,.sw-est{padding:18px}
  .sw-est{position:relative; top:0}
}
@media (max-width:420px){
  .btn-small{font-size:.8rem; padding:.5em .85em}
  .logo{font-size:1rem}
  .logo svg{width:28px; height:28px}
  .sw-bubble{white-space:normal; width:150px}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }
/* phone: the soft sea glows reach past the map's edge and widened the page; clip them */
@media (max-width:860px){#map{overflow:hidden}}
/* phone: tour cards slide in from the right; clip them so the page never widens */
@media (max-width:860px){.sw-cards{overflow-x:clip}}
@media (max-width:860px){.sw-pin text{font-size:25px;stroke-width:6px}.sw-sea{font-size:20px}}

/* stop photos */
.sw-tour .sw-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-bottom:1.1rem;box-shadow:0 12px 30px rgba(0,0,0,.28);background:#2a2b5c}