/* Vasco Study Abroad - site stylesheet Hand-written. No framework, no build step required to read it. Sections: tokens, base, layout, components, destination pages, utilities. Images live in assets/img and are referenced by URL, never inlined. */ :root{ --fd:"Outfit",system-ui,-apple-system,sans-serif; --fb:"Manrope",system-ui,-apple-system,sans-serif; --blue:#2b7fbd; --blue-d:#1c5c8c; --blue-xd:#0f3457; --blue-l:#e4f1fa; --blue-ll:#f2f9fd; --green:#219415; --green-d:#166b0f; --green-l:#e7f6e4; --green-ll:#f3fbf2; --amber:#c9781a; --amber-l:#fdf1e0; --violet:#0d8a9c; /* teal. named "violet" only for historic token compatibility; the agreed palette has no purple */ --violet-l:#e2f5f7; --ink:#0e2333; --ink-2:#3c5f79; --ink-3:#6d8ba3; --rule:#dbe8f1; --rule-2:#edf4f9; --ground:#fff; --surface:#fff; --tint-b:#f2f9fd; --tint-g:#f4fbf3; --sh:0 1px 2px rgba(14,35,51,.05),0 8px 26px rgba(14,35,51,.07); --sh-lg:0 2px 8px rgba(14,35,51,.07),0 22px 56px rgba(14,35,51,.13); --r:16px; --r-lg:24px; --c-uk:#1e4fa3; --c-uk-l:#e8eefa; --c-ca:#c8102e; --c-ca-l:#fceaec; --c-us:#0a3161; --c-us-l:#e6edf6; --c-ie:#12855a; --c-ie-l:#e5f5ee; --c-ae:#00732f; --c-ae-l:#e3f3e9; } @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){ --blue:#5cade1; --blue-d:#8dcaf0; --blue-xd:#c4e3f7; --blue-l:#153148; --blue-ll:#101f2e; --green:#4fc441; --green-d:#7ddc71; --green-l:#12301a; --green-ll:#0f2616; --amber:#e0a15a; --amber-l:#33260f; --violet:#5fc9d8; --violet-l:#0f2e33; --ink:#e9f3fa; --ink-2:#bacfe0; --ink-3:#85a2b8; --rule:#213e57; --rule-2:#192e44; --ground:#091520; --surface:#10222e; --tint-b:#0c1d2a; --tint-g:#0c2119; --c-uk:#7ba4e8; --c-uk-l:#16264a; --c-ca:#f08a97; --c-ca-l:#3a1a1f; --c-us:#9a97dd; --c-us-l:#22213f; --c-ie:#54c795; --c-ie-l:#123528; --c-ae:#57c07d; --c-ae-l:#0f2e1c; --sh:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.34); --sh-lg:0 2px 8px rgba(0,0,0,.34),0 22px 56px rgba(0,0,0,.45); }} :root[data-theme="dark"]{ --blue:#5cade1; --blue-d:#8dcaf0; --blue-xd:#c4e3f7; --blue-l:#153148; --blue-ll:#101f2e; --green:#4fc441; --green-d:#7ddc71; --green-l:#12301a; --green-ll:#0f2616; --amber:#e0a15a; --amber-l:#33260f; --violet:#5fc9d8; --violet-l:#0f2e33; --ink:#e9f3fa; --ink-2:#bacfe0; --ink-3:#85a2b8; --rule:#213e57; --rule-2:#192e44; --ground:#091520; --surface:#10222e; --tint-b:#0c1d2a; --tint-g:#0c2119; --c-uk:#7ba4e8; --c-uk-l:#16264a; --c-ca:#f08a97; --c-ca-l:#3a1a1f; --c-us:#9a97dd; --c-us-l:#22213f; --c-ie:#54c795; --c-ie-l:#123528; --c-ae:#57c07d; --c-ae-l:#0f2e1c; } *{box-sizing:border-box} html{overflow-x:clip;max-width:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%} /* clip, not hidden: hidden would make body a scroll container and break position:sticky on the nav */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} a{color:inherit} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px} h1,h2,h3,h4{font-family:var(--fd);margin:0;letter-spacing:-.033em;font-weight:800;text-wrap:balance;line-height:1.11} p{margin:0} img{display:block;max-width:100%} .ico{width:24px;height:24px;flex:none} /* labels — no mono anywhere */ .eyebrow{display:inline-block;font-family:var(--fb);font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--blue)} .eyebrow.g{color:var(--green-d)} section{padding:80px 0} section.tintb{background:var(--tint-b);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} section.tintg{background:var(--tint-g);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .sec-head{max-width:60ch} .sec-head h2{font-size:clamp(1.75rem,3.3vw,2.5rem);margin-top:11px} .sec-head p{color:var(--ink-2);margin-top:14px;font-size:1.05rem} .sec-head.mid{margin:0 auto;text-align:center} .btn{font-family:var(--fb);font-weight:800;white-space:nowrap;border-radius:999px;border:1.5px solid transparent;cursor:pointer;font-size:15.5px;padding:14px 28px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s} .btn .ico{width:19px;height:19px} .b-blue{background:var(--blue);color:#fff;box-shadow:0 12px 30px rgba(43,127,189,.32)} .b-blue:hover{transform:translateY(-2px)} .b-green{background:var(--green);color:#fff;box-shadow:0 12px 30px rgba(33,148,21,.3)} .b-green:hover{transform:translateY(-2px)} .b-out{border-color:var(--rule);color:var(--blue);background:var(--surface)} .b-out:hover{border-color:var(--blue);transform:translateY(-2px)} .b-sm{padding:11px 21px;font-size:14.5px} /* flags */ .flagsvg{display:block;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(14,35,51,.13)} /* ── utility + nav ── */ .util{background:var(--blue-xd);color:rgba(255,255,255,.92);font-size:13px} .util-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:9px;flex-wrap:wrap} .util a{text-decoration:none;opacity:.92;color:#fff;display:inline-flex;align-items:center;gap:7px;font-weight:600} .util a:hover{opacity:1;text-decoration:underline} .util .flagsvg{width:20px;height:13.3px;box-shadow:0 0 0 1px rgba(255,255,255,.3)} .util .l,.util .r{display:flex;gap:22px;flex-wrap:wrap;align-items:center} @media(max-width:760px){.util .l{display:none}} .nav{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:0 1px 14px rgba(14,35,51,.05)} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto} .brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,var(--blue),var(--green));display:grid;place-items:center;flex:0 0 auto} .bw{display:flex;flex-direction:column;line-height:1.05} .bn{font-family:var(--fd);font-weight:900;font-size:22px;letter-spacing:-.045em} .bs{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap} .menu{display:flex;align-items:center;margin-left:auto;margin-right:12px} @media(max-width:1120px){.menu{display:none}} .mi{position:relative} .mi > a,.mi > button{font-family:var(--fb);font-weight:700;font-size:14.5px;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:10px 10px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s} .mi > a:hover,.mi > button:hover,.mi.open > button{background:var(--blue-ll);color:var(--blue)} .mi .cv{width:10px;height:10px;transition:transform .18s;opacity:.6} .mi.open .cv{transform:rotate(180deg)} .dd{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--sh-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70} .mi.open .dd{opacity:1;visibility:visible;transform:none} .dd.wide{min-width:370px} .dd a{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:12px;text-decoration:none;font-size:14.5px;font-weight:700;color:var(--ink)} .dd a:hover{background:var(--blue-ll);color:var(--blue)} .dd a .s{display:block;font-weight:500;font-size:12.8px;color:var(--ink-3);margin-top:2px;line-height:1.45} .dd a .flagsvg{width:24px;height:16px;margin-top:2px} .dd a .ico{width:20px;height:20px;margin-top:2px;color:var(--blue)} .dd .grp{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:11px 12px 5px} .burger{display:none;background:none;border:1px solid var(--rule);border-radius:11px;padding:9px 11px;cursor:pointer;color:var(--ink);min-height:44px;min-width:44px;align-items:center;justify-content:center} @media(max-width:1120px){.burger{display:inline-flex}} @media(max-width:560px){.nav .btn{display:none}} /* ── hero ── */ .hero{position:relative;min-height:72svh;display:flex;align-items:center;overflow:hidden;background:#071726} .hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero .still{background-size:cover;background-position:center 35%} .gA{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(4,14,24,.66) 0%,rgba(4,14,24,.38) 44%,rgba(4,14,24,.06) 76%,rgba(4,14,24,0) 100%)} .gB{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(4,14,24,.55) 0%,rgba(4,14,24,0) 40%)} .hbody{position:relative;z-index:3;width:100%;padding-block:48px} .hero h1{color:#fff;font-size:clamp(2.35rem,5.4vw,4.2rem);line-height:1.02;max-width:16ch;text-shadow:0 2px 34px rgba(0,0,0,.45)} .hrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px} /* destination flag tiles — real flags, name under */ .dests{margin-top:38px} .dests-lab{font-size:13px;font-weight:800;letter-spacing:.02em;color:rgba(255,255,255,.82);margin-bottom:14px} .flagrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start} /* Every destination gets the same tile width. A flex-grow here would let the odd one out stretch across its row and read as the featured country. */ .ftile{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;color:#fff; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3); border-radius:16px;padding:14px 12px 12px;flex:0 0 132px;min-width:0; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s} .ftile:hover,.ftile:focus-visible{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.75);transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.34)} .ftile .flagsvg{width:52px;height:34.7px;box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.35)} .ftile .nm{font-family:var(--fd);font-weight:800;font-size:13.5px;letter-spacing:-.01em;text-align:center;line-height:1.2} @media(max-width:640px){ /* three across, then two - equal widths, never a full-width orphan */ .flagrow{gap:9px;justify-content:center} .ftile{flex:0 0 calc(33.333% - 6px);min-width:0;padding:11px 6px 10px;border-radius:13px} .ftile .flagsvg{width:40px;height:26.7px} .ftile .nm{font-size:11.5px} } @media(max-width:340px){ .ftile{flex:0 0 calc(50% - 5px)} } .vidctl{position:absolute;right:22px;bottom:22px;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(7,23,38,.62);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:10px 16px;font-size:12.5px;font-weight:700;cursor:pointer} @media(max-width:820px){.vidctl{display:none}} /* ── search band ── */ .searchband{background:linear-gradient(168deg,var(--blue-ll),var(--blue-l));border-bottom:1px solid var(--rule)} .sb-in{padding-block:48px 52px} .cs-tabs{display:flex;gap:6px;margin-top:24px;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:5px;width:max-content;max-width:100%} .cs-tab{font-family:var(--fb);font-weight:800;font-size:14.5px;padding:11px 24px;border-radius:999px;border:0;background:none;cursor:pointer;color:var(--ink-2)} .cs-tab.on{background:var(--blue);color:#fff} .cs-panel{display:none;margin-top:18px} .cs-panel.on{display:block} .cs-box{background:var(--surface);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--sh-lg);padding:10px;display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:6px} @media(max-width:900px){.cs-box{grid-template-columns:1fr}} .cs-f{padding:11px 17px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--rule)} @media(max-width:900px){.cs-f{border-right:0;border-bottom:1px solid var(--rule)}} .cs-f:last-of-type{border-right:0} .cs-f label{font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)} .cs-f input,.cs-f select{border:0;background:none;font-family:var(--fb);font-size:15px;font-weight:700;color:var(--ink);padding:4px 0 0;width:100%;outline:none} .cs-f input::placeholder{color:var(--ink-3);font-weight:500} .cs-go{background:var(--blue);color:#fff;border:0;border-radius:16px;padding:0 28px;font-family:var(--fb);font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:58px} .cs-go:hover{background:var(--blue-d)} .cs-quick{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;align-items:center} .cs-quick .lbl{font-size:12.5px;font-weight:800;color:var(--ink-3)} .qp{background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:all .15s} .qp:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)} .qp.hot{border-color:var(--green);color:var(--green-d);background:var(--green-l)} /* ── counters ── */ .counters{background:var(--surface);border-bottom:1px solid var(--rule);padding:38px 0} .crow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media(max-width:820px){.crow{grid-template-columns:repeat(2,1fr);gap:28px}} .cstat{text-align:center} .cstat .k{font-family:var(--fd);font-size:clamp(2.1rem,4.4vw,3rem);font-weight:900;letter-spacing:-.05em;line-height:1} .cstat.b .k{color:var(--blue)} .cstat.g .k{color:var(--green)} .cstat.a .k{color:var(--amber)} .cstat.v .k{color:var(--violet)} .cstat .l{font-size:13.5px;font-weight:600;color:var(--ink-3);margin-top:9px;line-height:1.4} /* ── meaning-coded chips ── */ .mt{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px} .chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.005em;border-radius:8px;padding:5px 10px;line-height:1.35} .chip::before{content:"";width:7px;height:7px;border-radius:2px;flex:none;background:currentColor} .chip.visa{background:var(--blue-l);color:var(--blue-d)} .chip.money{background:var(--amber-l);color:var(--amber)} .chip.work{background:var(--green-l);color:var(--green-d)} .chip.info{background:var(--violet-l);color:var(--violet)} .dcard .chip{background:rgba(255,255,255,.19);color:#fff;border:1px solid rgba(255,255,255,.28)} .dcard .chip::before{opacity:.85} /* ── destination cards, per-country accent ── */ .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} @media(max-width:1000px){.dgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.dgrid{grid-template-columns:1fr}} .dcard{position:relative;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s} .dcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .dcard .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s} .dcard:hover .ph{transform:scale(1.07)} .dcard .bar{ height:5px; background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 70%, #fff) 0%, var(--ac) 46%, color-mix(in srgb, var(--ac) 70%, #000) 100%) !important; } .dcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .dcard .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .55s} .dcard:hover .ph{transform:scale(1.07)} .dcard .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,33,.93) 0%,rgba(6,20,33,.6) 40%,rgba(6,20,33,.12) 76%)} .dcard .bar{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3} .dcard .cb{position:relative;z-index:2;padding:24px 24px 26px;color:#fff} .dcard .fh{display:flex;align-items:center;gap:11px} .dcard .fh .flagsvg{width:40px;height:26.7px;box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.4)} .dcard h3{font-size:1.35rem;color:#fff} .dcard .pt{font-size:14.5px;opacity:.93;margin-top:9px;line-height:1.5} .dcard.big{grid-column:span 2;min-height:340px} @media(max-width:620px){.dcard.big{grid-column:span 1}} /* ── tool cards ── */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} @media(max-width:900px){.tgrid{grid-template-columns:1fr}} .tcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px 28px;text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden} .tcard::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ac)} .tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--ac)} .tic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--ac-l);color:var(--ac)} .tic .ico{width:27px;height:27px} .tcard h3{font-size:1.28rem;margin-top:20px} .tcard p{color:var(--ink-2);font-size:15px;margin-top:11px;line-height:1.58} .tbadge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;background:var(--ac-l);color:var(--ac);border-radius:8px;padding:6px 12px;margin-top:18px;width:max-content} .tbadge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .tcard .go{margin-top:auto;padding-top:22px;font-family:var(--fd);font-weight:800;font-size:15px;color:var(--ac);display:inline-flex;align-items:center;gap:8px} .tcard .go .ico{width:17px;height:17px;transition:transform .18s} .tcard:hover .go .ico{transform:translateX(3px)} /* ── quick grid ── */ .qgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:36px} @media(max-width:1000px){.qgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.qgrid{grid-template-columns:repeat(2,1fr)}} .qcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:24px 16px 20px;text-align:center;text-decoration:none;transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:13px} .qcard:hover{border-color:var(--ac);transform:translateY(-4px);box-shadow:var(--sh)} .qi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--ac-l);color:var(--ac)} .qi .ico{width:23px;height:23px} .qcard .t{font-family:var(--fd);font-weight:800;font-size:14.5px;letter-spacing:-.015em;line-height:1.25} /* ── language prep panel ── */ .lp{display:grid;grid-template-columns:280px 1fr;gap:26px;margin-top:36px;align-items:start} @media(max-width:860px){.lp{grid-template-columns:1fr}} .lp-list{display:grid;gap:8px} .lp-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:14px 16px;cursor:pointer;font-family:var(--fb);transition:all .16s} .lp-btn:hover{border-color:var(--blue)} .lp-btn[aria-selected="true"]{border-color:var(--ac);background:var(--ac-l)} .lp-btn .bx{width:38px;height:38px;border-radius:11px;background:var(--ac-l);color:var(--ac);display:grid;place-items:center;font-family:var(--fd);font-weight:900;font-size:12px;flex:none;letter-spacing:-.02em} .lp-btn[aria-selected="true"] .bx{background:var(--ac);color:#fff} .lp-btn .tx{font-weight:800;font-size:14.5px;color:var(--ink);line-height:1.25} .lp-btn .tx small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3);margin-top:2px} .lp-body{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px 30px 28px;box-shadow:var(--sh);min-height:340px} .lp-body h3{font-size:1.35rem} .lp-body .sub{color:var(--ink-3);font-size:14px;font-weight:700;margin-top:6px} .lp-body p.d{color:var(--ink-2);font-size:15.5px;margin-top:16px;line-height:1.6} .lp-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} @media(max-width:560px){.lp-facts{grid-template-columns:1fr}} .lp-fact{background:var(--tint-b);border-radius:13px;padding:14px 16px} .lp-fact .k{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .lp-fact .v{font-weight:800;font-size:15px;margin-top:4px;color:var(--ink);line-height:1.35} .lp-teach{margin-top:22px;background:var(--green-ll);border:1px solid #cfe8ca;border-left:4px solid var(--green);border-radius:13px;padding:16px 18px} .lp-teach h4{font-size:14.5px;color:var(--green-d)} .lp-teach p{font-size:14.5px;color:var(--ink-2);margin-top:7px;line-height:1.55} /* ── journey ── */ .tl{margin-top:40px;position:relative} .tl::before{content:"";position:absolute;left:25px;top:16px;bottom:16px;width:2.5px;background:linear-gradient(to bottom,var(--blue),var(--green));border-radius:2px} @media(min-width:900px){.tl::before{left:0;right:0;top:25px;bottom:auto;height:2.5px;width:auto}} .tsteps{display:grid;gap:24px} @media(min-width:900px){.tsteps{grid-auto-flow:column;grid-auto-columns:1fr;gap:16px}} .tstep{position:relative;padding-left:64px} @media(min-width:900px){.tstep{padding-left:0;padding-top:66px;text-align:center}} .tstep .dot{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:var(--surface);border:2.5px solid var(--ac);color:var(--ac);display:grid;place-items:center;z-index:2} @media(min-width:900px){.tstep .dot{left:50%;transform:translateX(-50%)}} .tstep .wk{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ac)} .tstep h4{font-size:15.5px;margin-top:7px} .tstep p{font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.5} .tnote{margin-top:34px;background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--amber);border-radius:14px;padding:17px 20px;font-size:15px;color:var(--ink-2);line-height:1.58} .tnote b{color:var(--ink)} /* ── agent band ── */ .agent{background:linear-gradient(150deg,var(--blue-xd),var(--blue-d) 58%,var(--blue));color:#fff;position:relative;overflow:hidden} .agent::before{content:"";position:absolute;top:-160px;right:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(33,148,21,.35),transparent 68%)} .agent .wrap{position:relative;z-index:2} .agent h2{color:#fff;font-size:clamp(1.75rem,3.3vw,2.4rem)} .agent .lede{color:rgba(255,255,255,.9);margin-top:14px;font-size:1.05rem;max-width:56ch} .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px} @media(max-width:860px){.pgrid{grid-template-columns:1fr}} .pcard{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.19);border-radius:18px;padding:24px 22px;backdrop-filter:blur(10px)} .pcard .pi{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff} .pcard h4{font-size:1.05rem;color:#fff;margin-top:15px} .pcard p{font-size:14.5px;color:rgba(255,255,255,.86);margin-top:9px;line-height:1.55} .pctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .b-white{background:#fff;color:var(--blue-xd)} .b-white:hover{transform:translateY(-2px)} .b-ghost-w{border-color:rgba(255,255,255,.45);color:#fff;background:transparent} .b-ghost-w:hover{border-color:#fff;transform:translateY(-2px)} .pnote{margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.72);max-width:74ch;line-height:1.6} /* ── offices ── */ .ogrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px} @media(max-width:820px){.ogrid{grid-template-columns:1fr}} .ocard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--sh);border-top:4px solid var(--ac)} .ocard .oh{display:flex;align-items:center;gap:13px} .ocard .oh .flagsvg{width:40px;height:26.7px} .ocard h3{font-size:1.3rem} .ocard .ad{color:var(--ink-2);font-size:15px;margin-top:14px;line-height:1.65;display:flex;gap:10px} .ocard .ad .ico{width:19px;height:19px;color:var(--ink-3);margin-top:3px} .orows{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);display:grid;gap:13px;font-size:15px} .orows > div{display:flex;gap:10px;align-items:flex-start} .orows .ico{width:19px;height:19px;color:var(--ink-3);margin-top:3px} .orows .k{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:1px} .orows a{color:var(--blue);font-weight:700;text-decoration:none} .orows a:hover{text-decoration:underline} .wa{display:inline-flex;align-items:center;gap:9px;background:#25d366;color:#062b14!important;font-weight:800;font-size:14.5px;border-radius:999px;padding:12px 22px;text-decoration:none!important;margin-top:20px;transition:transform .16s;box-shadow:0 8px 22px rgba(37,211,102,.32)} .wa:hover{transform:translateY(-2px)} .fill{font-size:12.5px;font-weight:700;background:var(--amber-l);color:var(--amber);border:1px dashed currentColor;padding:2px 8px;border-radius:6px} .bothnote{margin-top:24px;background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--green);border-radius:14px;padding:17px 20px;font-size:15px;color:var(--ink-2)} /* ── testimonials ── */ .tst{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} .tst-1{grid-template-columns:minmax(0,640px);justify-content:center} .tst-2{grid-template-columns:repeat(2,minmax(0,460px));justify-content:center} @media(max-width:900px){.tst-1,.tst-2{grid-template-columns:1fr}} @media(max-width:900px){.tst{grid-template-columns:1fr}} .tq{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px 26px;box-shadow:var(--sh);display:flex;flex-direction:column} .tq .stars{color:#b8720a;font-size:16px;letter-spacing:3px} .tq blockquote{margin:15px 0 0;font-size:15.5px;color:var(--ink);line-height:1.62} .tq .who{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:13px} .tq .av{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;flex:none;background-color:var(--blue-l)} .tq .av-ini{display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:15px;color:var(--blue);letter-spacing:.5px;background-image:none} .tq .nm{font-family:var(--fd);font-weight:800;font-size:15px} .tq .cr{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:6px;margin-top:2px} .tq .cr .flagsvg{width:18px;height:12px} /* ── book form ── */ .book{background:linear-gradient(155deg,var(--blue-xd),var(--blue-d) 60%,var(--blue));color:#fff} .book h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem)} .book .lede{color:rgba(255,255,255,.88);margin-top:14px;font-size:1.05rem;max-width:52ch} .bwrap{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start} @media(max-width:900px){.bwrap{grid-template-columns:1fr;gap:32px}} .bform{background:var(--surface);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--sh-lg);position:relative} .bform .fr{margin-bottom:17px} .bform label{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:7px} .bform input,.bform select{width:100%;font-family:var(--fb);font-size:15.5px;color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:12px;padding:13px 14px;outline:none} .bform input:focus,.bform select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,127,189,.15)} .phone-row{display:grid;grid-template-columns:158px 1fr;gap:9px} @media(max-width:420px){.phone-row{grid-template-columns:1fr}} .bform .hint{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.55} .blist{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:15px} .blist li{display:flex;gap:12px;font-size:15.5px;color:rgba(255,255,255,.93);line-height:1.55} .blist .ico{width:21px;height:21px;color:#7ee06e;margin-top:2px} .err{border-color:#d8452f!important} .errmsg{color:#d8452f;font-size:12.5px;font-weight:700;margin-top:6px} /* booking confirmation */ .confirm{display:none;text-align:center;padding:12px 4px 8px} .confirm.on{display:block} .bform.done .bfields{display:none} /* Arriving from a course in the finder: say what we have picked up, rather than silently filling three boxes in and leaving the student to notice. */ .coursenote{background:var(--green-l,#e7f6e4);border:1.5px solid rgba(33,148,21,.35); border-radius:12px;padding:12px 15px;margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--ink-2)} .coursenote b{color:var(--ink)} .coursenote[hidden]{display:none} .cring{width:76px;height:76px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:grid;place-items:center;margin:0 auto 20px} .cring .ico{width:40px;height:40px;stroke-width:2.2} .confirm h3{font-size:1.4rem} .confirm .ref{display:inline-block;margin-top:14px;background:var(--tint-b);border:1px dashed var(--rule);border-radius:10px;padding:8px 16px;font-size:14px;font-weight:800;color:var(--ink-2)} .confirm p{color:var(--ink-2);font-size:15px;margin-top:16px;line-height:1.6;text-align:left} .cnext{margin-top:20px;text-align:left;background:var(--tint-b);border-radius:14px;padding:18px 20px} .cnext h4{font-size:14px;color:var(--ink)} .cnext ol{margin:11px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2);line-height:1.5} .cbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;justify-content:center} footer{background:var(--surface);border-top:1px solid var(--rule);padding:50px 0 56px} .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px} @media(max-width:900px){.fcols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.fcols{grid-template-columns:1fr}} .fcol h4{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .fcol ul{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:10px} .fcol a{font-size:14.5px;color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:8px} .fcol a:hover{color:var(--blue)} .fcol a .flagsvg{width:20px;height:13.3px} .legal{font-size:13px;color:var(--ink-3);line-height:1.68;display:grid;gap:10px;max-width:90ch;border-top:1px solid var(--rule);padding-top:28px} .legal strong{color:var(--ink-2)} .draftbar{background:var(--amber-l);color:var(--amber);font-size:12.5px;font-weight:700;text-align:center;padding:10px 16px} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}} /* ── combobox: browse on click, filter on type ── */ .cbx{position:relative} .cbx-input-wrap{position:relative;display:flex;align-items:center;gap:8px} .cbx-caret{position:absolute;right:0;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--ink-3);pointer-events:none;transition:transform .18s} .cbx.open .cbx-caret{transform:translateY(-50%) rotate(180deg)} .cs-f.cbx input{padding-right:20px} .cbx-pop{position:absolute;top:calc(100% + 12px);left:-16px;right:-16px;background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--sh-lg);z-index:90;max-height:340px;overflow-y:auto;overscroll-behavior:contain;padding:8px;display:none} .cbx.open .cbx-pop{display:block} @media(max-width:900px){.cbx-pop{left:0;right:0;max-height:280px}} .cbx-grp{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:11px 12px 6px} .cbx-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-radius:11px;padding:10px 12px;cursor:pointer;font-family:var(--fb);transition:background .12s} .cbx-opt:hover,.cbx-opt.hi{background:var(--blue-ll)} .cbx-opt .flagsvg{width:22px;height:14.7px;flex:none} .cbx-opt .ol{min-width:0;flex:1;display:block} .cbx-opt .on{display:block;font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cbx-opt .os{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cbx-opt mark{background:transparent;color:var(--blue);font-weight:800;padding:0} .cbx-opt .cnt{font-size:12px;font-weight:700;color:var(--ink-3);background:var(--rule-2);border-radius:6px;padding:2px 8px;flex:none} .cbx-none{padding:18px 14px;text-align:center;color:var(--ink-3);font-size:14px;line-height:1.5} .cbx-none b{color:var(--ink);display:block;margin-bottom:4px} .cbx-foot{border-top:1px solid var(--rule);margin-top:6px;padding:11px 12px 6px;font-size:12.5px;color:var(--ink-3);line-height:1.5} /* ---- touch targets ---- */ @media(hover:none),(max-width:640px){ .bform input,.bform select{min-height:46px} .cs-f select,.cs-f input{min-height:34px;font-size:16px} .cs-f{padding-top:13px;padding-bottom:13px} .orows a{display:inline-block;padding:5px 0;min-height:32px} .qp{min-height:42px;display:inline-flex;align-items:center} .cbx-opt{min-height:54px} .lp-btn{min-height:58px} .cbtn{min-height:44px} .bs{font-size:10.5px} .btn{min-height:48px} .fchip,.ftile{min-height:48px} } @media(max-width:360px){ .wrap{padding-left:16px;padding-right:16px} } /* ══════════════════════════════════════════════════════════════ VIBRANCY LAYER — richer colour, depth and light. Added after the base so it wins on equal specificity. ══════════════════════════════════════════════════════════════ */ :root{ --glow-blue: 0 18px 44px -12px rgba(43,127,189,.5); --glow-green: 0 18px 44px -12px rgba(33,148,21,.46); --sh-warm: 0 2px 10px rgba(14,35,51,.06), 0 26px 60px -18px rgba(14,35,51,.22); } @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){ --glow-blue: 0 18px 46px -12px rgba(92,173,225,.36); --glow-green: 0 18px 46px -12px rgba(79,196,65,.32); --sh-warm: 0 2px 10px rgba(0,0,0,.36), 0 26px 60px -18px rgba(0,0,0,.6); }} :root[data-theme="dark"]{ --glow-blue: 0 18px 46px -12px rgba(92,173,225,.36); --glow-green: 0 18px 46px -12px rgba(79,196,65,.32); --sh-warm: 0 2px 10px rgba(0,0,0,.36), 0 26px 60px -18px rgba(0,0,0,.6); } /* ── 1. Section grounds: light, not flat paint ───────────────── */ section{position:relative} section.tintb{ background: radial-gradient(90% 70% at 12% 0%, color-mix(in srgb, var(--blue) 13%, transparent) 0%, transparent 62%), radial-gradient(70% 60% at 92% 12%, color-mix(in srgb, var(--violet) 10%, transparent) 0%, transparent 58%), linear-gradient(180deg, var(--tint-b) 0%, var(--ground) 100%); } section.tintg{ background: radial-gradient(85% 65% at 88% 0%, color-mix(in srgb, var(--green) 14%, transparent) 0%, transparent 60%), radial-gradient(60% 55% at 6% 20%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%), linear-gradient(180deg, var(--tint-g) 0%, var(--ground) 100%); } /* ── 2. Section headings get an accent flourish ──────────────── */ .sec-head > .eyebrow, .sb-in .sec-head > .eyebrow{ position:relative; padding-left:26px; } .sec-head > .eyebrow::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:3px; border-radius:2px; background:linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 20%, transparent)); } /* ── 3. Destination cards: each one carries its country's colour ─ */ .dcard .sc{ /* Brighter: the photograph is untouched across the top two-thirds and the scrim only deepens behind the text, where legibility actually needs it. */ background:linear-gradient(to top, rgba(6,20,33,.88) 0%, rgba(6,20,33,.72) 22%, rgba(6,20,33,.34) 46%, rgba(6,20,33,.08) 66%, rgba(6,20,33,0) 82%); } .dcard h3,.dcard .pt{text-shadow:0 1px 12px rgba(0,0,0,.55)} .dcard .chip{backdrop-filter:blur(3px)} /* colour glow, anchored low so the photograph stays clear at the top */ .dcard .bar{ height:5px; background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 70%, #fff) 0%, var(--ac) 46%, color-mix(in srgb, var(--ac) 70%, #000) 100%) !important; } .dcard:hover{ transform:translateY(-7px); box-shadow:var(--sh-lg), 0 26px 60px -22px color-mix(in srgb, var(--ac) 70%, transparent); } .dcard .cb{padding:26px 26px 28px} .dcard h3{text-shadow:0 2px 18px rgba(0,0,0,.4)} /* ── 4. Buttons: gradient fill and a coloured glow ───────────── */ .b-blue{ background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, #fff) 0%, var(--blue) 48%, var(--blue-d) 100%); box-shadow:var(--glow-blue); } .b-blue:hover{transform:translateY(-3px); box-shadow:0 24px 54px -14px rgba(43,127,189,.62)} .b-green{ background:linear-gradient(135deg, color-mix(in srgb, var(--green) 80%, #fff) 0%, var(--green) 48%, var(--green-d) 100%); box-shadow:var(--glow-green); } .b-green:hover{transform:translateY(-3px); box-shadow:0 24px 54px -14px rgba(33,148,21,.58)} .b-out{ background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--blue) 5%, var(--surface)) 100%); } .b-out:hover{ border-color:var(--blue); box-shadow:0 14px 32px -14px rgba(43,127,189,.42); } /* ── 5. Tool cards: light from the accent, not a grey box ────── */ .tcard{ background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--ac) 9%, transparent) 0%, transparent 58%), var(--surface); box-shadow:var(--sh-warm); } .tcard::after{ height:5px; background:linear-gradient(90deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 45%, #fff) 100%); } .tcard:hover{ transform:translateY(-7px); box-shadow:var(--sh-lg), 0 24px 54px -22px color-mix(in srgb, var(--ac) 62%, transparent); } .tic{ background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 22%, var(--ac-l)) 0%, var(--ac-l) 100%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent); } .tcard:hover .tic{ background:linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 72%, #fff) 100%); color:#fff; box-shadow:0 10px 24px -8px color-mix(in srgb, var(--ac) 60%, transparent); } .tic{transition:background .25s, color .25s, box-shadow .25s} /* ── 6. Quick tiles: colour on hover instead of a grey lift ──── */ .qcard{ background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--ac) 4%, var(--surface)) 100%); } .qcard:hover{ box-shadow:0 16px 36px -14px color-mix(in srgb, var(--ac) 52%, transparent); background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--ac) 10%, var(--surface)) 100%); } .qi{ background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 20%, var(--ac-l)) 0%, var(--ac-l) 100%); transition:background .22s, color .22s, transform .22s; } .qcard:hover .qi{ background:linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 70%, #fff) 100%); color:#fff; transform:scale(1.06); } /* ── 7. Flag tiles in the hero ───────────────────────────────── */ .ftile{ background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 100%); backdrop-filter:blur(8px); } .ftile:hover,.ftile:focus-visible{ background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.14) 100%); box-shadow:0 18px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); } /* ── 8. Journey steps: a coloured spine, not a grey one ──────── */ .tstep .dot{ background:linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--ac) 12%, var(--surface)) 100%); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--ac) 55%, transparent); } /* ── 9. Motion: a touch more travel, and a scale settle ──────── */ .reveal{transform:translateY(24px) scale(.988)} .reveal.in{transform:none} /* ── 10. Agent cards get glass depth ───────────────────────── */ .pcard{ background:linear-gradient(160deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.06) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 20px 44px -20px rgba(0,0,0,.5); } .pcard .pi{ background:linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.1) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } @media(prefers-reduced-motion:reduce){ .reveal{transform:none} } /* ── Photo framing: the US landmark is a tall portrait while every other card image is landscape, so a centred crop cuts the torch off on desktop. Anchor each card's crop rather than defaulting to centre. ── */ .dcard .ph{background-position:var(--ph-pos,center)} .dcard[href*="#us"] .ph{--ph-pos:center 30%} .dcard[href*="#ae"] .ph{--ph-pos:center 55%} /* ══ MOTION & IMAGERY LAYER ══════════════════════════════════════ No new video files. The liveliness comes from real photographs that move slowly (Ken Burns) and from content revealing as it is reached. Everything here is switched off by prefers-reduced-motion, which the global reduce block already enforces. */ /* Slow drift on the destination photographs. Long durations and alternate direction so it reads as breathing, not as a slideshow. Paused until the card is on screen so nothing burns battery animating something nobody can see. */ @keyframes kenburns{ from{transform:scale(1.04) translate3d(0,0,0)} to {transform:scale(1.13) translate3d(-1.4%,-1.2%,0)} } .dcard .ph{ animation:kenburns 26s ease-in-out infinite alternate; animation-play-state:paused; will-change:transform; } .dcard.in .ph,.dcard:hover .ph{animation-play-state:running} /* the hover zoom still wins, because a transition on the same property would fight the animation - so hover just speeds the drift up */ .dcard:hover .ph{animation-duration:14s} .dcard:nth-child(2) .ph{animation-delay:-6s} .dcard:nth-child(3) .ph{animation-delay:-12s} .dcard:nth-child(4) .ph{animation-delay:-18s} .dcard:nth-child(5) .ph{animation-delay:-3s} /* ── Photograph bands ── A full-width photograph set into a section, carrying one line of editorial copy. Used where the section is otherwise all text. */ .imgband{ position:relative; margin-top:38px; border-radius:var(--r-lg); overflow:hidden; min-height:230px; display:flex; align-items:flex-end; box-shadow:var(--sh-lg); isolation:isolate; } .imgband .ib-ph{ position:absolute;inset:0; background-image:var(--ib-img); background-size:cover; background-position:center; animation:kenburns 32s ease-in-out infinite alternate; animation-play-state:paused; will-change:transform; } .imgband.in .ib-ph{animation-play-state:running} .imgband .ib-sc{ position:absolute;inset:0; background:linear-gradient(to top, rgba(6,20,33,.88) 0%, rgba(6,20,33,.66) 26%, rgba(6,20,33,.24) 56%, rgba(6,20,33,0) 84%); } .imgband .ib-tx{ position:relative;z-index:2; padding:26px 28px 24px; color:#fff;max-width:62ch; } .imgband .ib-tx b{ display:block; font-family:var(--fd);font-weight:800; font-size:clamp(1.15rem,2.4vw,1.5rem); letter-spacing:-.02em; text-shadow:0 2px 18px rgba(0,0,0,.5); } .imgband .ib-tx span{ display:block;margin-top:8px; font-size:15px;line-height:1.55; color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(0,0,0,.55); } @media(max-width:560px){ .imgband{min-height:190px} .imgband .ib-tx{padding:20px 18px 18px} .imgband .ib-tx span{font-size:14px} } /* ── Reveal, refined ── Children of a revealed block come in just behind their heading, which reads as one movement rather than a dozen separate ones. */ .dgrid .dcard,.tgrid .tcard,.ogrid .ocard{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.6,.2,1),box-shadow .2s} .dgrid .dcard:not(.in),.tgrid .tcard:not(.in),.ogrid .ocard:not(.in){opacity:0;transform:translateY(20px)} .dgrid .dcard.in,.tgrid .tcard.in,.ogrid .ocard.in{opacity:1} /* ── Tool cards: a lit corner rather than a flat white box ── */ .tcard::before{ content:"";position:absolute;right:-30%;top:-60%; width:80%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--ac) 22%, transparent) 0%, transparent 68%); opacity:.75;transition:transform .5s ease, opacity .3s; pointer-events:none; } .tcard:hover::before{transform:scale(1.25) translate(-6%,8%);opacity:1} @media(prefers-reduced-motion:reduce){ .dcard .ph,.imgband .ib-ph{animation:none!important;transform:none!important} .dgrid .dcard:not(.in),.tgrid .tcard:not(.in),.ogrid .ocard:not(.in){opacity:1;transform:none} } /* ── Tool-card artwork ── Each tool gets a small drawing of what it actually does: a budget against the visa threshold, a profile against an entry bar, a stack of funding. They draw themselves once the card is on screen. */ .tart{display:block;width:100%;height:auto;margin-top:20px;overflow:visible} .tart .ta-rule{stroke:var(--rule);stroke-width:1.5} .tart .ta-need{stroke:var(--amber);stroke-width:2;opacity:.85} .tart .ta-bar{fill:var(--ac);opacity:.85;transition:y .7s cubic-bezier(.2,.8,.25,1),height .7s cubic-bezier(.2,.8,.25,1)} .tcard.in .tart .b1{y:38px;height:18px} .tcard.in .tart .b2{y:30px;height:26px} .tcard.in .tart .b3{y:34px;height:22px} .tcard.in .tart .b4{y:18px;height:38px} .tcard.in .tart .b5{y:26px;height:30px} .tcard.in .tart .b6{y:12px;height:44px} .tcard.in .tart .b2{transition-delay:.07s} .tcard.in .tart .b3{transition-delay:.14s} .tcard.in .tart .b4{transition-delay:.21s} .tcard.in .tart .b5{transition-delay:.28s} .tcard.in .tart .b6{transition-delay:.35s} .tart .ta-track{fill:none;stroke:var(--rule);stroke-width:9;stroke-linecap:round} .tart .ta-arc{fill:none;stroke:var(--ac);stroke-width:9;stroke-linecap:round; stroke-dasharray:164;stroke-dashoffset:164;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.25,1)} .tcard.in .tart .ta-arc{stroke-dashoffset:36} .tart .ta-dot{fill:var(--ac);opacity:0;transform:scale(.4);transform-origin:112px 26px; transition:opacity .3s .9s,transform .4s .9s cubic-bezier(.2,1.6,.4,1)} .tcard.in .tart .ta-dot{opacity:1;transform:scale(1)} .tart .ta-tick{fill:none;stroke:var(--ac);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .4s} .tcard.in .tart .t1{stroke-dashoffset:0;transition-delay:.35s} .tcard.in .tart .t2{stroke-dashoffset:0;transition-delay:.5s} .tcard.in .tart .t3{stroke-dashoffset:0;transition-delay:.65s} .tart .ta-coin ellipse{fill:var(--ac);opacity:.9;stroke:var(--surface);stroke-width:1.5} .tart .ta-coin{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.2,1.3,.4,1)} .tcard.in .tart .c1{opacity:1;transform:none;transition-delay:.05s} .tcard.in .tart .c2{opacity:1;transform:none;transition-delay:.2s} .tcard.in .tart .c3{opacity:1;transform:none;transition-delay:.35s} .tart .ta-spark{fill:var(--amber);opacity:0;transform:scale(.3);transform-origin:100px 24px; transition:opacity .3s .55s,transform .5s .55s cubic-bezier(.2,1.7,.4,1)} .tcard.in .tart .ta-spark{opacity:1;transform:none} .tcard .tbadge{margin-top:18px} @media(max-width:620px){.tart{margin-top:16px}} @media(prefers-reduced-motion:reduce){ .tart *{transition:none!important} .tart .ta-arc{stroke-dashoffset:36} .tart .ta-tick{stroke-dashoffset:0} .tart .ta-coin,.tart .ta-dot,.tart .ta-spark{opacity:1;transform:none} .tart .b1{y:38px;height:18px}.tart .b2{y:30px;height:26px}.tart .b3{y:34px;height:22px} .tart .b4{y:18px;height:38px}.tart .b5{y:26px;height:30px}.tart .b6{y:12px;height:44px} } /* ── Side-gutter guard ─────────────────────────────────────────── A `padding:` shorthand on any class that also carries .wrap silently zeroes the left and right gutter, which is invisible on desktop (the 1180px max-width hides it) and flush-to-the-edge on a phone. This rule is declared last so the gutter survives, whatever a component sets. Components must use padding-block, never the padding shorthand. */ .wrap{padding-inline:24px} @media(max-width:360px){.wrap{padding-inline:16px}} /* ===== DESTINATION PAGES ===== */ /* ── destination page ── */ .dhero{position:relative;min-height:38svh;display:flex;align-items:flex-end;overflow:hidden;background:#071726} .dhero .ph{position:absolute;inset:0;background-size:cover;background-position:center} .dhero .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,33,.94) 0%,rgba(6,20,33,.62) 42%,rgba(6,20,33,.22) 78%)} .dhero .bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ac);z-index:3} .dhero-in{position:relative;z-index:2;width:100%;padding-block:52px 46px;color:#fff} .dhero .fh{display:flex;align-items:center;gap:15px} .dhero .fh .flagsvg{width:64px;height:42.7px;box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.4)} .dhero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.04em} .dhero .tag{font-size:1.08rem;color:rgba(255,255,255,.9);margin-top:14px;max-width:52ch} .dhero .crumb{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.72);margin-bottom:18px} .dhero .crumb a{color:rgba(255,255,255,.85);text-decoration:none} .dhero .crumb a:hover{text-decoration:underline} .cswitch{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:55;box-shadow:0 1px 12px rgba(14,35,51,.05)} .cswitch-in{display:flex;gap:8px;padding-block:12px;overflow-x:auto;align-items:center} .cswitch-in::-webkit-scrollbar{height:0} .cs-lab{font-size:12.5px;font-weight:800;color:var(--ink-3);white-space:nowrap;padding-right:6px} .cbtn{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1.5px solid var(--rule);border-radius:999px;padding:8px 16px 8px 10px;font-family:var(--fb);font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;white-space:nowrap;text-decoration:none;transition:all .16s} .cbtn .flagsvg{width:24px;height:16px} .cbtn:hover{border-color:var(--ac);color:var(--ink)} .cbtn[aria-current="true"]{background:var(--ac);border-color:var(--ac);color:#fff} .dintro{font-size:1.12rem;color:var(--ink-2);max-width:70ch;line-height:1.7} .factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} @media(max-width:900px){.factgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.factgrid{grid-template-columns:1fr}} .fact{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;border-left:4px solid var(--ac)} .fact .k{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .fact .v{font-family:var(--fd);font-weight:800;font-size:15.5px;margin-top:6px;line-height:1.35} .fnote{margin-top:20px;background:var(--amber-l);border:1px solid #f0d3a8;border-left:4px solid var(--amber);border-radius:var(--r);padding:16px 19px;font-size:14.5px;color:var(--ink-2);line-height:1.6} .whygrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px} @media(max-width:760px){.whygrid{grid-template-columns:1fr}} .why{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px 24px;box-shadow:var(--sh)} .why .n{width:34px;height:34px;border-radius:10px;background:var(--ac-l);color:var(--ac);font-family:var(--fd);font-weight:900;font-size:15px;display:grid;place-items:center} .why h4{font-size:1.08rem;margin-top:15px} .why p{font-size:14.5px;color:var(--ink-2);margin-top:9px;line-height:1.6} .clist{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .clist a{background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:all .15s} .clist a:hover{border-color:var(--ac);color:var(--ac);transform:translateY(-1px)} .nursebox{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--green);border-radius:var(--r-lg);padding:26px 26px;margin-top:30px;box-shadow:var(--sh)} .nursebox .nh{display:flex;align-items:center;gap:12px} .nursebox .nh .ico{width:26px;height:26px;color:var(--green-d)} .nursebox h3{margin:0;font-size:1.15rem} .nursebox p{font-size:15px;color:var(--ink-2);margin-top:13px;line-height:1.65} .faq{margin-top:30px;display:grid;gap:10px} .faq details{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden} .faq summary{padding:17px 20px;cursor:pointer;font-family:var(--fd);font-weight:800;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ac);flex:none;line-height:1} .faq details[open] summary::after{content:"\2212"} .faq details[open] summary{border-bottom:1px solid var(--rule)} .faq .a{padding:16px 20px 20px;font-size:15px;color:var(--ink-2);line-height:1.65} .dctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .toolrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:30px} @media(max-width:820px){.toolrow{grid-template-columns:1fr}} .trow{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:20px 20px;text-decoration:none;display:flex;gap:14px;align-items:flex-start;transition:all .18s} .trow:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:var(--sh)} .trow .ti{width:40px;height:40px;border-radius:12px;background:var(--ac-l);color:var(--ac);display:grid;place-items:center;flex:none} .trow .ti .ico{width:21px;height:21px} .trow b{font-family:var(--fd);font-size:15px;display:block} .trow span{font-size:13.5px;color:var(--ink-3);display:block;margin-top:3px;line-height:1.45} @media(max-width:560px){ .dctas{flex-direction:column;align-items:stretch} .dctas .btn{width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.35} } @media(hover:none),(max-width:640px){ .crumb a{display:inline-block;min-height:34px;line-height:34px} } /* ══ VIBRANCY LAYER — destination pages ══════════════════════ */ /* Neutral dark scrim. The country's colour appears only in the thin bar and the switcher chip - a photograph should not be dyed. */ .dhero .sc{ background:linear-gradient(to top, rgba(6,20,33,.90) 0%, rgba(6,20,33,.74) 20%, rgba(6,20,33,.36) 44%, rgba(6,20,33,.10) 66%, rgba(6,20,33,0) 84%); } .dhero h1,.dhero .tag,.dhero .crumb{text-shadow:0 1px 14px rgba(0,0,0,.6)} .dhero .bar{ height:6px; background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 72%, #fff) 0%, var(--ac) 48%, color-mix(in srgb, var(--ac) 72%, #000) 100%); } .dhero h1{text-shadow:0 3px 24px rgba(0,0,0,.42)} /* Country switcher: the current country glows in its own colour */ .cbtn[aria-current="true"]{ background:linear-gradient(135deg, color-mix(in srgb, var(--ac) 82%, #fff) 0%, var(--ac) 100%); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--ac) 75%, transparent); } .cbtn:hover{ background:color-mix(in srgb, var(--ac) 7%, var(--surface)); transform:translateY(-1px); } /* Fact cards: a colour wash rather than a plain white box */ .fact{ background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 8%, var(--surface)) 0%, var(--surface) 62%); border-left-width:5px; box-shadow:0 1px 2px rgba(14,35,51,.04), 0 12px 28px -18px color-mix(in srgb, var(--ac) 60%, transparent); transition:transform .18s, box-shadow .18s; } .fact:hover{ transform:translateY(-3px); box-shadow:0 2px 6px rgba(14,35,51,.05), 0 20px 40px -20px color-mix(in srgb, var(--ac) 70%, transparent); } /* Reason cards */ .why{ background: radial-gradient(120% 85% at 0% 0%, color-mix(in srgb, var(--ac) 8%, transparent) 0%, transparent 58%), var(--surface); box-shadow:var(--sh-warm); transition:transform .18s, box-shadow .18s; } .why:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg), 0 22px 48px -24px color-mix(in srgb, var(--ac) 58%, transparent); } .why .n{ background:linear-gradient(135deg, var(--ac) 0%, color-mix(in srgb, var(--ac) 68%, #fff) 100%); color:#fff; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--ac) 65%, transparent); } /* Course chips */ .clist a{ background:linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--ac) 4%, var(--surface)) 100%); } .clist a:hover{ background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 10%, var(--surface)) 0%, color-mix(in srgb, var(--ac) 16%, var(--surface)) 100%); border-color:var(--ac); transform:translateY(-2px); box-shadow:0 10px 22px -12px color-mix(in srgb, var(--ac) 62%, transparent); } /* Tool row */ .trow{ background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ac) 7%, transparent) 0%, transparent 60%), var(--surface); } .trow:hover{ border-color:var(--ac); transform:translateY(-4px); box-shadow:0 18px 40px -20px color-mix(in srgb, var(--ac) 60%, transparent); } /* FAQ */ .faq details{transition:border-color .18s, box-shadow .18s} .faq details[open]{ border-color:color-mix(in srgb, var(--ac) 40%, var(--rule)); box-shadow:0 12px 30px -18px color-mix(in srgb, var(--ac) 55%, transparent); } /* Nursing box — keep it green, but give it light */ .nursebox{ background: radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--green) 9%, transparent) 0%, transparent 58%), var(--surface); box-shadow:var(--sh-warm); } /* ── Motion & imagery, destination pages ── The hero photograph drifts very slowly. Body content is injected by script after load, so these bands animate unconditionally rather than waiting on an observer that has already finished its pass. */ @keyframes kenburns{ from{transform:scale(1.04) translate3d(0,0,0)} to {transform:scale(1.13) translate3d(-1.4%,-1.2%,0)} } .dhero .ph.kb{animation:kenburns 30s ease-in-out infinite alternate;will-change:transform} /* Photograph bands: the picture is never dimmed and never cropped to a letterbox that chops the subject. A 4:3 window suits both the portrait and the landscape sources; the words sit beside it on a light ground. */ .imgband{ display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch; margin-top:30px;border:1px solid var(--rule);border-radius:var(--r-lg); overflow:hidden;background:var(--surface);box-shadow:var(--sh-lg); } .imgband .ib-ph{ position:static;inset:auto; background-image:var(--ib-img);background-size:cover;background-position:center; aspect-ratio:16/10;height:auto;width:100%; animation:kenburns 34s ease-in-out infinite alternate;will-change:transform; } .imgband .ib-sc{display:none} .imgband .ib-tx{ position:static;z-index:auto;max-width:none; padding:30px 32px;display:flex;flex-direction:column;justify-content:center; border-left:4px solid var(--ac); } .imgband .ib-tx b{ display:block;font-family:var(--fd);font-weight:800; font-size:clamp(1.2rem,2.3vw,1.6rem);letter-spacing:-.03em;color:var(--ink); text-shadow:none; } .imgband .ib-tx span{ display:block;margin-top:10px;font-size:15.5px;line-height:1.62;color:var(--ink-2); text-shadow:none; } .whygrid{margin-top:26px} @media(max-width:760px){ .imgband{grid-template-columns:1fr} .imgband .ib-ph{aspect-ratio:16/10;min-height:0} .imgband .ib-tx{padding:22px 20px;border-left:0;border-top:4px solid var(--ac)} } @media(prefers-reduced-motion:reduce){ .dhero .ph.kb,.imgband .ib-ph{animation:none!important;transform:none!important} } /* ══ FREE TOOLS ══════════════════════════════════════════════════ The tools are the reason to choose Vasco over an agent with a brochure, so they get a section that looks like it, not a thin strip of grey rows. Each tool carries its own colour and shows a real result rather than describing itself. */ .toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px} @media(max-width:820px){.toolgrid{grid-template-columns:1fr}} .tool{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--rule); border-radius:var(--r-lg);padding:28px 28px 26px; text-decoration:none;overflow:hidden; box-shadow:var(--sh); transition:transform .2s, box-shadow .2s, border-color .2s; } .tool::before{ content:"";position:absolute;top:0;left:0;right:0;height:5px; background:linear-gradient(90deg, color-mix(in srgb, var(--tc) 68%, #fff) 0%, var(--tc) 52%, color-mix(in srgb, var(--tc) 74%, #000) 100%); } .tool::after{ content:"";position:absolute;right:-26%;top:-52%;width:70%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tc) 20%, transparent) 0%, transparent 68%); pointer-events:none;transition:transform .5s ease; } .tool:hover{transform:translateY(-5px);border-color:var(--tc);box-shadow:var(--sh-lg)} .tool:hover::after{transform:scale(1.3) translate(-8%,10%)} .tool .ti{ width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none; background:color-mix(in srgb, var(--tc) 13%, var(--surface)); color:var(--tc);position:relative;z-index:1; } .tool .ti .ico{width:26px;height:26px} .tool b{ font-family:var(--fd);font-weight:800;font-size:1.32rem;letter-spacing:-.032em; margin-top:19px;color:var(--ink);position:relative;z-index:1;line-height:1.15; } .tool .td{ font-size:15px;color:var(--ink-2);line-height:1.6;margin-top:11px;position:relative;z-index:1; } .tool .tpk{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; margin-top:20px;padding:13px 17px;border-radius:13px; background:color-mix(in srgb, var(--tc) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--tc) 26%, transparent); position:relative;z-index:1; } .tool .tpv{font-family:var(--fd);font-weight:900;font-size:1.35rem;letter-spacing:-.04em;color:var(--tc)} .tool .tpl{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.4} .tool .tgo{ margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:9px; font-family:var(--fd);font-weight:800;font-size:15.5px;color:var(--tc);position:relative;z-index:1; } .tool .tgo svg{transition:transform .18s} .tool:hover .tgo svg{transform:translateX(4px)} .tool .tnew{ position:absolute;top:22px;right:24px;z-index:2; background:var(--tc);color:#fff;font-size:11.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 12px; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--tc) 80%, transparent); } .t-blue{--tc:var(--blue)} .t-green{--tc:var(--green)} .t-amber{--tc:var(--amber)} .t-teal{--tc:#0f8f9e} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-teal{--tc:#4fc3d1}} :root[data-theme="dark"] .t-teal{--tc:#4fc3d1} .toolfoot{ margin-top:22px;font-size:14px;color:var(--ink-3);line-height:1.6;max-width:80ch; } @media(max-width:560px){ .tool{padding:24px 22px 22px} .tool b{font-size:1.2rem} .tool .tpk{padding:12px 14px} } /* ===== SITE CHROME ===== Added when the single-file artifacts became a real multi-page site: skip link, footer grid, and the mobile menu drawer. */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff; padding:12px 20px;border-radius:0 0 10px 0;font-weight:800;text-decoration:none} .skip:focus{left:0} .menu.open{display:flex} @media(max-width:1040px){ .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface); border-bottom:1px solid var(--rule);box-shadow:0 18px 40px rgba(14,35,51,.12); flex-direction:column;align-items:stretch;gap:0;padding:8px 0;z-index:70} .menu.open{display:flex} .menu .mi{border-bottom:1px solid var(--rule-2)} .menu .mi:last-child{border-bottom:0} .menu .mi > a{display:block;padding:15px 24px;min-height:48px} .nav-in{position:relative} .burger{display:inline-flex} } @media(min-width:1041px){ .burger{display:none} } footer{background:var(--blue-xd);color:rgba(255,255,255,.82);padding-block:52px 34px;margin-top:0} footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px} @media(max-width:860px){footer .fgrid{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer .fgrid{grid-template-columns:1fr;gap:26px}} footer h4{color:#fff;font-size:14px;letter-spacing:.02em;margin-bottom:14px} footer .fgrid a{display:block;color:rgba(255,255,255,.8);text-decoration:none; font-size:14.5px;padding:5px 0;min-height:30px} footer .fgrid a:hover{color:#fff;text-decoration:underline} footer .brand .bn,footer .brand .bs{color:#fff} footer .fnote{color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.6;margin-top:14px;max-width:38ch} footer .legal{border-top:1px solid rgba(255,255,255,.16);margin-top:36px;padding-top:24px} footer .legal p{font-size:12.8px;line-height:1.7;color:rgba(255,255,255,.62);max-width:96ch} footer .legal p + p{margin-top:9px} footer .legal b,footer .legal strong{color:rgba(255,255,255,.85)} footer .legal .cr{margin-top:16px} /* imgband now carries background-image directly; keep the layer happy */ .imgband .ib-ph{background-size:cover;background-position:center} @media(max-width:860px){.lang3{grid-template-columns:1fr !important}} /* ---- contact / agents / about pages ---- */ .why .n .ico{width:18px;height:18px} .qa{display:grid;gap:14px;margin-top:30px} .qa details{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:0 22px;box-shadow:var(--sh)} .qa summary{font-family:var(--fd);font-weight:800;font-size:16.5px;padding:19px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";font-size:22px;font-weight:700;color:var(--blue);line-height:1;flex:none} .qa details[open] summary::after{content:"\2212"} .qa details p{font-size:15px;color:var(--ink-2);line-height:1.65;padding-bottom:20px;margin-top:-4px;max-width:78ch} .qa details p + p{padding-bottom:20px;margin-top:12px} .twocol{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px} .panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px 28px;box-shadow:var(--sh);border-top:4px solid var(--ac)} .panel h3{font-size:1.2rem} .panel ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px} .panel li{display:flex;gap:11px;font-size:15px;color:var(--ink-2);line-height:1.6} .panel li .ico{width:19px;height:19px;color:var(--ac);margin-top:3px} @media(max-width:860px){.twocol{grid-template-columns:1fr}} /* WhatsApp button. Kept as its own class rather than a ghost/outline variant: the vibrancy layer around line 515 paints .b-out with a white gradient, which overrode .b-ghost-w's white text and left the button looking empty. */ .btn.b-wa{background:#25D366;border-color:#25D366;color:#0b2e18;box-shadow:0 12px 30px rgba(37,211,102,.32)} .btn.b-wa:hover{background:#1fb457;border-color:#1fb457;color:#06230f;transform:translateY(-2px)} .btn.b-wa .ico{color:currentColor} .agent .btn.b-wa,.book .btn.b-wa{color:#06230f} /* Consent and the optional message on the booking form. The consent box is a real checkbox with a real label, not a line of small print under a button: consent has to be a positive act to be worth anything. */ .bform textarea{width:100%;border:1.5px solid var(--rule);border-radius:12px; padding:12px 15px;font-family:var(--fb);font-size:15px;line-height:1.55; background:var(--surface);color:var(--ink);resize:vertical} .bform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)} .bform .opt{font-weight:600;color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:12px} .consent{display:flex;gap:11px;align-items:flex-start;margin-top:16px; background:var(--blue-ll);border:1px solid var(--rule);border-radius:12px;padding:14px 16px} .consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--green);cursor:pointer} .consent label{font-size:13.5px;color:var(--ink-2);line-height:1.55;cursor:pointer; text-transform:none;letter-spacing:0;font-weight:500;margin:0} .consent input.err{outline:2px solid #c0392b;outline-offset:2px} .bform .errmsg{color:#c0392b;font-size:13px;font-weight:700;margin-top:7px} /* Scope banner on the course finder. Shown when a student arrives from a destination page, so that a filtered result never looks like the whole catalogue. It names the country, says how many courses exist elsewhere, and offers one click to widen the search. */ .scopebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:linear-gradient(135deg,var(--blue-l) 0%,var(--surface) 70%); border:1.5px solid var(--blue);border-radius:var(--r); padding:14px 18px;margin-bottom:16px} .scopebar .sflag{flex:none;display:grid;place-items:center} .scopebar .sflag .flagsvg{width:30px;height:20px;border-radius:3px; box-shadow:0 1px 3px rgba(14,35,51,.22)} .scopebar .stx{flex:1;min-width:200px;font-size:15px;color:var(--ink);line-height:1.45} .scopebar .stx b{font-family:var(--fd);font-weight:800} .scopebar .ssub{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;font-weight:500} .scopebar .btn{flex:none} @media(max-width:560px){ .scopebar{gap:10px} .scopebar .btn{width:100%;justify-content:center} } /* ---- contrast fixes ---- .fnote is an amber callout box on a page. Inside the dark footer it was picking up that cream background AND the footer's white text, which made the tagline invisible: white on cream. In the footer it is plain text. */ footer .fnote{background:none;border:none;padding:0;border-radius:0; color:rgba(255,255,255,.75)} /* The callout text was a light blue-grey on cream, which measured about 4.3:1 and read as washed out at small sizes. Darkened to sit comfortably above the WCAG AA threshold. */ .fnote{color:var(--ink)} .fnote b,.fnote strong{color:var(--ink)} /* Four-across fact grid, used on About. Each card carries a short explanation under the headline rather than leaving the claim to stand on its own. */ .factgrid.four{grid-template-columns:repeat(4,1fr)} .fact .fx{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:9px} @media(max-width:1080px){.factgrid.four{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.factgrid.four{grid-template-columns:1fr}} /* Build stamp. Small, unobtrusive, and the fastest way to tell whether the page you are looking at came from the current folder or an older copy. */ .buildstamp{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;padding-top:14px} .buildstamp .wrap{font-size:11.5px;color:rgba(255,255,255,.4);text-align:right; letter-spacing:.03em;font-variant-numeric:tabular-nums} /* City chips read as a complete list when they are a sample of the places we see most. Labelled at both ends so nobody assumes their city is excluded. */ .cities .clab,.cities .cetc{background:none;border:none;color:var(--ink-3); font-size:11.5px;font-style:italic;padding:4px 2px} /* Inner pages opened with a band of empty space that pushed the first real content below the fold. The landing page keeps its full-height hero. */ section:first-of-type > .wrap[style*="padding-block:40px"]{padding-block:22px 0 !important} /* Agent enquiry form. Two columns on desktop because the questions pair up naturally; one column on anything narrower. */ .pform{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg); padding:32px 32px 36px;box-shadow:var(--sh);margin-top:30px} .pfgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px} .pfgrid .full{grid-column:1 / -1} .pform .fr label{display:block;font-size:12px;font-weight:800;letter-spacing:.03em; text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .pform .opt{font-weight:600;color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:11.5px} .pform input,.pform select,.pform textarea{width:100%;border:1.5px solid var(--rule); border-radius:12px;padding:12px 15px;font-family:var(--fb);font-size:15px; background:var(--surface);color:var(--ink)} .pform textarea{resize:vertical;line-height:1.55} .pform input:focus,.pform select:focus,.pform textarea:focus{outline:none; border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)} .pform input.err,.pform select.err{border-color:#c0392b} .pform .phone-row{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:9px} .pform.done .pfgrid{display:none} .pform .confirm{display:none} .pform.done .confirm{display:block} @media(max-width:820px){ .pfgrid{grid-template-columns:1fr} .pform{padding:24px 20px 28px} } /* Visible scrollbars. A scrollable area with an invisible scrollbar looks like a clipped one, and a student stops reading at the fold rather than scrolling. */ *{scrollbar-width:thin;scrollbar-color:var(--ink-3) var(--rule-2)} *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-track{background:var(--rule-2);border-radius:6px} *::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:6px; border:2px solid var(--rule-2)} *::-webkit-scrollbar-thumb:hover{background:var(--ink-2)} /* Section heroes with a photograph behind them. Light by design: a pale tint over the picture, never a dark scrim, so the page stays bright. */ .phero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)} .phero .ph{position:absolute;inset:0;background-size:cover;background-position:center; opacity:.34} .phero .sc{position:absolute;inset:0;background: linear-gradient(105deg,var(--surface) 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,.55) 70%,rgba(255,255,255,.3) 100%)} .phero .wrap{position:relative;z-index:2} @media(max-width:820px){ .phero .ph{opacity:.22} .phero .sc{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.88))} } @media(max-width:1080px){.lang3{grid-template-columns:repeat(2,1fr) !important}} @media(max-width:620px){.lang3{grid-template-columns:1fr !important}} /* Build stamp in the top bar as well as the footer. Two copies of a folder look identical, and telling them apart has already wasted real time. */ .buildchip{font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:2px 7px; font-variant-numeric:tabular-nums;white-space:nowrap} @media(max-width:700px){.buildchip{display:none}} /* Home-currency picker sitting inline in the total line. */ .total-inr select{background:transparent;border:none;border-bottom:1.5px dashed currentColor; color:inherit;font:inherit;padding:0 2px 1px;cursor:pointer;max-width:16ch} .total-inr select:focus{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px} /* Tool-page header. Named apart from .hero, which belongs to the landing page's full-screen video and carries a white headline. Pinned dark here so a light header can never inherit light text again. */ .thero h1{color:var(--ink)} .thero .lede{color:var(--ink-2)} /* ---- sliders ---- A thin grey line with a small dot does not read as a control; students were not realising it could be moved. Now: a thick track that fills in blue up to the handle, a large handle with grip lines, - and + buttons either side for anyone who would rather tap, and a hint underneath. */ .rngwrap{display:flex;align-items:center;gap:10px;margin:12px 0 4px} .rngbtn{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--blue); background:var(--surface);color:var(--blue);font-size:21px;font-weight:800;line-height:1; cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s} .rngbtn:hover,.rngbtn:focus-visible{background:var(--blue);color:#fff;outline:none} input[type="range"].rng{flex:1;-webkit-appearance:none;appearance:none;height:12px;margin:0;border-radius:99px; border:1px solid #b9d3e6;cursor:pointer;min-height:0;padding:0;background-clip:border-box; background:linear-gradient(90deg,var(--blue) 0%,var(--blue) var(--pct,50%),#dde9f2 var(--pct,50%),#dde9f2 100%)} input[type="range"].rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px; border-radius:50%;cursor:grab;border:3px solid var(--blue); background:#fff repeating-linear-gradient(90deg,transparent 0 9px,var(--blue) 9px 11px,transparent 11px 13px,var(--blue) 13px 15px,transparent 15px 30px); box-shadow:0 3px 10px rgba(16,52,92,.35)} input[type="range"].rng::-moz-range-thumb{width:26px;height:26px;border-radius:50%;cursor:grab;border:3px solid var(--blue); background:#fff;box-shadow:0 3px 10px rgba(16,52,92,.35)} input[type="range"].rng::-moz-range-progress{background:var(--blue);height:12px;border-radius:99px} input[type="range"].rng:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)} input[type="range"].rng:focus-visible{outline:3px solid var(--blue-l);outline-offset:4px} .rnghint{font-size:12.5px;color:var(--blue-d);font-weight:700;margin-top:6px;display:flex;align-items:center;gap:6px} .rnghint::before{content:"\2194";font-size:16px} /* Agent cards: solid white with dark text. The glass version was hard to read on the blue band (reported 21 Sep). */ .agent .pcard{background:#fff;border:0;backdrop-filter:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)} .agent .pcard .pi{background:var(--blue-l);color:var(--blue-d);box-shadow:none} .agent .pcard h4{color:var(--ink);font-size:1.2rem} .agent .pcard p{color:var(--ink-2);font-size:16px;line-height:1.6} .agent .pnote{color:#fff;font-size:14.5px;opacity:.95} /* The form-wide "input{width:100%}" was stretching the consent tick box across the whole row and squeezing its label into a thin column. */ .pform .consent input[type="checkbox"],.bform .consent input[type="checkbox"]{width:19px;height:19px;min-height:0;padding:0;flex:none} .pform .consent label{flex:1;font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-2)} /* Drop-down lists open on the operating system's white panel, so an option must never inherit white text from a select sitting on a blue card. */ select option,select optgroup{color:#0e2333;background:#fff} /* The small print at the foot of each tool. It used to be a second