/* BlueZone ULTRA layer: cinematic photo banners, destination photo cards, ribbon, smooth reveals.
   Loaded after style.css / pro.css. Photos come from images/photos/<key>.jpg (see tools/get-photos.js);
   if a photo is missing, an animated illustrated scene is shown instead, so nothing ever looks empty. */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- page fade-in ---------- */
@keyframes ufade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main{animation:ufade .6s var(--ease) both}

/* ---------- cinematic banner (replaces plain tinted hero on inner pages) ---------- */
.hero.ub{background:#14163f;color:#fff;min-height:380px;display:flex;align-items:flex-end;padding-bottom:120px!important;isolation:isolate}
.hero.ub>.w{position:relative;z-index:3;width:100%}
.hero.ub h1,.hero.ub p,.hero.ub .upd{color:#fff}
.hero.ub h1{text-shadow:0 4px 30px rgba(0,0,0,.45);letter-spacing:-.02em}
.hero.ub p{opacity:.92}
.hero.ub a:not(.btn){color:#fff!important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.hero.ub .btn{background:var(--gold);color:#1f1f1f;border-color:var(--gold)}
.ub-bg{position:absolute;inset:-8% 0;z-index:0;will-change:transform}
.ub-scene,.ub-photo{position:absolute;inset:0;background-size:cover;background-position:center}
.ub-scene svg{width:100%;height:100%;display:block}
.ub-photo{opacity:0;transition:opacity 1.2s ease;animation:kb 26s ease-in-out infinite alternate}
.ub-photo.on{opacity:1}
.ub-ov{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(14,16,60,.82) 0%,rgba(14,16,60,.55) 48%,rgba(14,16,60,.15) 100%),
  linear-gradient(to top,rgba(10,12,45,.65),transparent 55%)}
.hero.ub:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:54px;z-index:2;background:var(--bg);
  clip-path:ellipse(60% 100% at 50% 100%)}
.ub-badge{position:absolute;right:20px;bottom:76px;z-index:3;font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.8;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);padding:6px 12px;border-radius:99px}
@keyframes kb{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.2) translate3d(-2%,-1.5%,0)}}
.hero.ub .w>div>*{animation:ufade .9s var(--ease) both}
.hero.ub .w>div>*:nth-child(2){animation-delay:.1s}.hero.ub .w>div>*:nth-child(3){animation-delay:.2s}
.hero.ub .w>div>*:nth-child(4){animation-delay:.3s}.hero.ub .w>div>*:nth-child(5){animation-delay:.4s}
.facts{z-index:4}

/* ---------- generated scene motion ---------- */
.sc-l1{animation:drift 90s linear infinite alternate}.sc-l2{animation:drift 140s linear infinite alternate-reverse}
.sc-cl{animation:cloud 120s linear infinite}.sc-cl2{animation:cloud 180s linear infinite;animation-delay:-60s}
.sc-st{animation:tw 4s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-90px)}}
@keyframes cloud{from{transform:translateX(-300px)}to{transform:translateX(1900px)}}
@keyframes tw{from{opacity:.3}to{opacity:1}}

/* ---------- destination cards (.dc) with photo layer ---------- */
.dc{box-shadow:0 12px 30px rgba(20,22,70,.18);transition:transform .45s var(--ease),box-shadow .45s}
.dc:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(20,22,70,.32)}
.dc .u-ph{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.dc .u-ph .ub-scene,.dc .u-ph .ub-photo{transition:transform 1.4s var(--ease),opacity 1s}
.dc .u-ph .ub-photo{animation:none}
.dc:hover .u-ph .ub-scene,.dc:hover .u-ph .ub-photo{transform:scale(1.12)}
.dc .u-ph:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,45,.85) 0%,rgba(10,12,45,.15) 60%,rgba(10,12,45,.1) 100%)}
.dc>*:not(.u-ph):not(.in){position:relative;z-index:1}
.dc .in{z-index:2}

/* ---------- thumbnails on blog / guide cards ---------- */
.u-th{position:relative;height:150px;margin:-26px -26px 18px;border-radius:10px 10px 0 0;overflow:hidden;background:#14163f}
.u-th .ub-photo{animation:none}
.u-th .ub-scene,.u-th .ub-photo{transition:transform 1.2s var(--ease),opacity 1s}
.card:hover .u-th .ub-scene,.card:hover .u-th .ub-photo{transform:scale(1.1)}
.u-th:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,45,.35),transparent 60%)}
.card{transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
a.card:hover,.bc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,22,70,.16)}

/* ---------- article featured image ---------- */
.u-fig{position:relative;height:340px;border-radius:20px;overflow:hidden;margin:20px 0 6px;box-shadow:0 24px 60px rgba(20,22,70,.25);isolation:isolate}
.u-fig .ub-bg{inset:0}
@media(max-width:700px){.u-fig{height:210px}}

/* ---------- home: destination photo ribbon ---------- */
.rib{padding:64px 0 30px;overflow:hidden}
.rib .hd{max-width:1120px;margin:0 auto 26px;padding:0 20px}
.rib-t{display:flex;gap:18px;width:max-content;animation:rib 70s linear infinite;padding:6px 0 26px}
.rib:hover .rib-t{animation-play-state:paused}
@keyframes rib{to{transform:translateX(-50%)}}
.rib-c{position:relative;flex:0 0 280px;height:360px;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none;box-shadow:0 14px 34px rgba(20,22,70,.22);transition:transform .5s var(--ease),box-shadow .5s;isolation:isolate}
.rib-c:nth-child(even){margin-top:26px;height:334px}
.rib-c:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 28px 60px rgba(20,22,70,.38)}
.rib-c .ub-scene,.rib-c .ub-photo{transition:transform 1.4s var(--ease),opacity 1s}
.rib-c .ub-photo{animation:none}
.rib-c:hover .ub-scene,.rib-c:hover .ub-photo{transform:scale(1.14)}
.rib-c:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,45,.88),transparent 58%)}
.rib-c div{position:absolute;left:18px;right:18px;bottom:18px;z-index:2}
.rib-c strong{display:block;font:800 22px Outfit,sans-serif}
.rib-c span{font-size:12.5px;opacity:.85}
.rib-c i{position:absolute;right:14px;top:14px;z-index:2;font:700 11px Inter,sans-serif;font-style:normal;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);padding:4px 10px;border-radius:99px}
@media(max-width:560px){.rib-c{flex-basis:220px;height:300px}.rib-c:nth-child(even){height:280px}}

/* ---------- home hero polish ---------- */
.art img.ph{animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* ---------- scroll reveal ---------- */
.u-r{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.u-r.u-in{opacity:1;transform:none}
h2{position:relative}
.u-ul:after{content:"";display:block;width:0;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--navy));margin-top:10px;transition:width .9s var(--ease) .2s}
.u-ul.u-in:after{width:64px}
.fc,.band>.w>div{transition:transform .4s var(--ease),box-shadow .4s}
.fc:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,22,70,.22)}

@media(prefers-reduced-motion:reduce){
  main,.hero.ub .w>div>*,.ub-photo,.sc-l1,.sc-l2,.sc-cl,.sc-cl2,.sc-st,.rib-t,.art img.ph{animation:none!important}
  .u-r{opacity:1;transform:none;transition:none}
  .ub-bg{transform:none!important}
}


/* ================= IDP-style split banner: text on solid colour, photo in its own curved panel ================= */
.ub-scene{background:linear-gradient(110deg,#1b1d5e 30%,#2f3198 50%,#1b1d5e 70%);background-size:220% 100%;animation:shim 1.8s linear infinite}
@keyframes shim{to{background-position:-220% 0}}
.ub-photo.on~*,.ub-photo.on{--x:0}
.hero.ub{background:linear-gradient(115deg,#171a55 0%,#23267f 55%,#2b2d91 100%);min-height:420px;align-items:center;padding:56px 0 110px!important}
.ub-ov{display:none}
.hero.ub>.ub-bg{position:absolute;inset:0 0 0 auto;width:44%;border-radius:340px 0 0 0;overflow:hidden;transform:none!important;box-shadow:-30px 0 80px rgba(0,0,0,.25)}
.hero.ub:before{content:"";position:absolute;z-index:2;right:calc(44% - 1px);bottom:0;width:170px;height:96px;background:var(--gold);border-radius:170px 0 0 0;opacity:.95}
.hero.ub .w>div{max-width:52%}
.hero.ub h1{max-width:none!important;text-shadow:none}
.hero.ub p{max-width:560px}
.ub-badge{display:none}
@media(max-width:860px){
  .hero.ub{display:block;min-height:0;padding:0 0 84px!important}
  .hero.ub>.ub-bg{position:relative;inset:auto;width:100%;height:230px;border-radius:0 0 0 110px;box-shadow:none}
  .hero.ub:before{display:none}
  .hero.ub>.w{padding-top:26px}
  .hero.ub .w>div{max-width:none}
}

/* =====================================================================================================
   IDP-STYLE SOFT THEME: IDP's palette (mint-cyan, grey bands, green + blue buttons, orange accent, charcoal footer),
   soft rounded cards, pill buttons, clean white header. Overrides the older navy/gold tokens.
   ===================================================================================================== */
:root{--navy:#0a66d1;--navy2:#084fa3;--gold:#e07b00;--green:#0a7f62;--green2:#086650;--lime:#54c21f;--deepblue:#1e4b7e;
  --bg:#fff;--alt:#f2f2f2;--hero:#effcff;--card:#fff;--text:#3b3b3b;--head:#262626;--line:#d9d9d9;--dark:#333;--pale:#fff1dc}
body{color:var(--text);background:var(--bg)}
h1,h2,h3{color:var(--head)}

/* header: clean white like idp.com */
header{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(0,0,0,.07)}
nav>div>a:after{background:var(--gold)}

/* buttons: green primary, outlined pill secondary */
.btn,.btn.g,.hero.ub .btn{background:var(--green);border-color:var(--green);color:#fff;box-shadow:none;padding:12px 26px;font-weight:600}
.btn:hover,.btn.g:hover,.hero.ub .btn:hover{background:var(--green2);border-color:var(--green2);box-shadow:0 10px 24px rgba(10,127,98,.3)}
.btn.o{background:transparent;color:var(--head);border-color:var(--head)}
.btn.o:hover{background:var(--head);color:var(--bg);border-color:var(--head);box-shadow:none}
.top b{background:#ff5a1f;color:#fff}

/* sections: white / grey / mint rhythm */
.alt{background:var(--alt)}
#dest,#steps,#offices,.cta,.nl{background:var(--hero)}
.cta,.nl{color:var(--head)}.nl h3{color:var(--head)}.nl p{opacity:1}.nl #nm{color:var(--green)}
.hero{background:var(--hero)}
.band{background:linear-gradient(115deg,#17375e,var(--deepblue))}
.band b{color:#ffb454}

/* soft cards */
.card,.fc,.sc,.sv div,.pills a{border:0;border-radius:16px;box-shadow:0 2px 18px rgba(25,45,80,.08)}
.fc{box-shadow:0 14px 40px rgba(25,45,80,.14)}
.card:hover,.pills a:hover{box-shadow:0 14px 36px rgba(25,45,80,.14)}
.ic{background:var(--hero);color:var(--navy);border-radius:14px}
.sc{border-radius:22px;box-shadow:0 18px 50px rgba(25,45,80,.14)}
.tabs button{border:1px solid transparent!important;color:var(--head)}
.tabs button.on{background:var(--hero)!important;color:var(--navy)!important;border-color:var(--navy)!important}
.a2 .card{background:var(--hero);box-shadow:none}

/* forms: crisp outlined fields */
input,select,textarea,.sf input,.sf select{border:1px solid #6b6b6b;border-radius:8px;min-height:46px;background:#fff;color:#262626}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,102,209,.18)}

/* tables + chips */
th{background:var(--deepblue)}
tbody tr:hover{background:var(--hero)}
.dtabs button{border:1px solid #7a7a7a;border-radius:99px}.dtabs button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* section headings get IDP's short orange bar */
.u-ul:after{background:var(--gold);width:0}.u-ul.u-in:after,h2.u-ul:after{width:36px}
.u-th{background:var(--deepblue);border-radius:16px 16px 0 0}
.card{overflow:hidden}

/* banner re-coloured: deep IDP blue panel, blue quarter-shape beside photo, no curved bottom (flat like idp.com) */
.hero.ub{background:linear-gradient(105deg,#122d4f 0%,#1a3f6d 55%,var(--deepblue) 100%)}
.hero.ub:after{display:none}
.hero.ub:before{background:var(--navy);width:190px;height:110px;border-radius:190px 0 0 0;opacity:1}
.ub-scene{background:linear-gradient(110deg,#122d4f 30%,#2a5e9c 50%,#122d4f 70%);background-size:220% 100%}

/* home hero blobs in IDP colours */
.art .a{background:var(--lime)}.art .b{background:var(--gold)}
.chip{box-shadow:0 10px 26px rgba(25,45,80,.16)}

/* footer: charcoal like idp.com */
footer{background:#333}footer hr{border-top-color:#555}footer .cols a{color:#e6e6e6;font-size:13px}footer .cols a:hover{text-decoration:underline}

/* ---------- "BlueZone can help you" counselling block (IDP's mint form section) ---------- */
.help{background:var(--hero);padding:80px 0}
.help .w{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.help h2{font-size:34px;margin-bottom:12px}
.help h2:after{content:"";display:block;width:36px;height:4px;border-radius:4px;background:var(--gold);margin-top:12px}
.help p.lead{margin:0 0 24px;max-width:520px}
.help form{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.help label{font-weight:500;font-size:14px;gap:6px}
.help label.full{grid-column:1/-1}
.help .ph2{display:grid;grid-template-columns:78px 1fr;gap:10px}
.help .ph2 input:first-child{text-align:center}
.help .btn{grid-column:1/-1;justify-self:start;padding:13px 40px}
.help .ok{grid-column:1/-1;color:var(--green);font-weight:600;min-height:22px}
.help-r{position:relative;height:520px}
.help-r i{position:absolute;display:block}
.help-r .g1{left:4%;top:12%;width:76%;height:72%;background:var(--lime);border-radius:0 0 50% 50% / 0 0 40% 40%;border-top-left-radius:0}
.help-r .o1{right:0;bottom:12%;width:110px;height:110px;background:var(--gold);border-radius:110px 0 0 0;z-index:2}
.help-r .b1{left:28%;bottom:-2%;width:56%;height:90px;background:var(--navy);border-radius:90px 90px 0 0;z-index:0}
.help-ph{position:absolute;left:12%;top:0;width:78%;height:92%;border-radius:160px 0 160px 0;overflow:hidden;z-index:1;box-shadow:0 24px 60px rgba(25,45,80,.25)}
.help-ph .ub-bg-in{position:absolute;inset:0}
@media(max-width:900px){.help .w{grid-template-columns:1fr;gap:30px}.help-r{height:340px;order:-1}.help form{grid-template-columns:1fr}.help h2{font-size:28px}}

/* =================== CLEAN IDP-STYLE DESTINATION TILES =================== */
/* ribbon: uniform tiles, never pauses, click always opens */
.rib{padding:60px 0 24px;background:var(--alt)}
.rib-t{gap:20px;animation:rib 55s linear infinite!important;animation-play-state:running!important;padding:6px 0 10px}
.rib:hover .rib-t,.rib-t:hover{animation-play-state:running!important}
.rib{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rib .hd{position:relative;z-index:2}
.rib-c,.rib-c:nth-child(even){flex:0 0 232px;height:300px;margin-top:0;border-radius:16px;box-shadow:0 6px 22px rgba(25,45,80,.14);-webkit-user-drag:none;user-select:none}
.rib-c:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(25,45,80,.26)}
.rib-c:after{background:linear-gradient(to top,rgba(10,20,40,.55),rgba(10,20,40,.05) 55%)}
.rib-c .rt{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px}
.rib-c strong{font:800 22px Outfit,sans-serif;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.rib-c .ub-bg-in{position:absolute;inset:0}
@media(max-width:560px){.rib-c,.rib-c:nth-child(even){flex-basis:180px;height:240px}}

/* destination grid cards: photo + centred name only (details appear on hover, like idp.com) */
.dc{border-radius:16px;box-shadow:0 6px 22px rgba(25,45,80,.14);align-items:center;justify-content:center;text-align:center}
.dc:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(25,45,80,.26)}
.dc>*:not(.u-ph):not(.in):not(strong){display:none!important}
.dc strong{font:800 24px Outfit,sans-serif;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.dc .u-ph:after{background:linear-gradient(to top,rgba(10,20,40,.5),rgba(10,20,40,.05) 60%)}
.dc .in{border:0;border-radius:16px;box-shadow:inset 0 0 0 2px var(--navy)}


/* =================== ALWAYS LIGHT (desktop look on every phone, even in dark mode) =================== */
:root{color-scheme:light only}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]),:root[data-theme="dark"]{--navy:#0a66d1;--navy2:#084fa3;--gold:#e07b00;--green:#0a7f62;--bg:#fff;--alt:#f2f2f2;--hero:#effcff;--card:#fff;--text:#3b3b3b;--head:#262626;--line:#d9d9d9;--dark:#333;--pale:#fff1dc}}
:root[data-theme="dark"]{--navy:#0a66d1;--navy2:#084fa3;--gold:#e07b00;--green:#0a7f62;--bg:#fff;--alt:#f2f2f2;--hero:#effcff;--card:#fff;--text:#3b3b3b;--head:#262626;--line:#d9d9d9;--dark:#333;--pale:#fff1dc}
html,body{background:#fff;color:var(--text)}

/* =================== HOME: old destination grid is hidden (the photo ribbon replaces it) =================== */
#dest{display:none!important}
.rib .rib-lead{max-width:1120px;margin:-8px auto 22px;padding:0 20px}.rib .rib-lead p{margin:0;max-width:780px}
.rib .dlinks{max-width:1120px;margin:26px auto 0;padding:0 20px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px}
.rib .dlinks b{margin-right:6px}.rib .dlinks a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ribbon edge fades without mask-image (mask + animation renders blank on some iPhones) */
.rib{-webkit-mask-image:none!important;mask-image:none!important;position:relative}
.rib:before,.rib:after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:3;pointer-events:none}
.rib:before{left:0;background:linear-gradient(90deg,var(--alt),rgba(242,242,242,0))}
.rib:after{right:0;background:linear-gradient(270deg,var(--alt),rgba(242,242,242,0))}

/* Safari: keep rounded corners clipped while photos animate inside */
.rib-c,.help-ph,.hero.ub>.ub-bg,.u-fig,.u-th,.dc{-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}
.rib-c:hover{transform:translateY(-6px) translateZ(0)}

/* =================== PHONE POLISH =================== */
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:700px){
  body{font-size:15.5px}
  section{padding:46px 0}
  h2{font-size:24px!important;line-height:1.22}
  .hero h1,.hero.ub h1{font-size:clamp(26px,7.6vw,34px)!important;line-height:1.14;letter-spacing:-.01em}
  .hero p,.hero.ub p{font-size:15.5px;line-height:1.6}
  .hero.ub>.w{padding-top:22px}
  .hero.ub>.ub-bg{height:210px;border-radius:0 0 0 90px}
  .facts{grid-template-columns:1fr 1fr;gap:12px;margin-top:-46px}
  .fc{padding:14px 15px;border-radius:14px}.fc b{font-size:22px!important;line-height:1.15}.fc span{font-size:12.5px;line-height:1.45}
  .band b{font-size:32px}.band span{font-size:13px}
  .btn{padding:12px 22px;font-size:14.5px}
  .a2 h1{font-size:26px!important;line-height:1.2}.a2 p.b{font-size:16.5px;line-height:1.75}
  .u-fig{height:200px;border-radius:16px}
  .rib{padding:40px 0 14px}.rib .hd h2{font-size:23px!important}
  .rib:before,.rib:after{width:30px}
  .help{padding:52px 0}.help-r{height:300px}
  .ub-photo{animation:none!important}          /* no heavy zoom on phones */
  .tw{margin:0 -4px}
  footer{padding-top:40px}
}
@media(max-width:380px){.facts{grid-template-columns:1fr}}