/* =========================================================================
Mpoweroverseas — design system (Theme 1 "Momentum" default)
Switch themes with
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
/* shared brand foundation */
:root{
--grad:linear-gradient(92deg,#6DB42D 0%,#F5B400 22%,#F58A00 38%,#2BA8F0 62%,#F0306E 100%);
--brand-purple:#2E0048;
--brand-purple-deep:#1C0030;
--brand-blue:#2BA8F0;
--brand-pink:#F0306E;
--brand-yellow:#F5B400;
--brand-orange:#F58A00;
--brand-green:#6DB42D;
--radius-sm:10px; --radius-md:18px; --radius-lg:24px; --radius-pill:999px;
--space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:96px;
--maxw:1180px;
--ease:cubic-bezier(.22,1,.36,1);
}
/* THEME 1 — Momentum (default) — bold, dark purple canvas, gradient energy */
:root, [data-theme="momentum"]{
--bg:#1C0030;
--bg-elevated:#2E0048;
--surface:rgba(255,255,255,.04);
--ink:#FFFFFF;
--ink-muted:rgba(255,255,255,.66);
--accent:#2BA8F0;
--accent-2:#F0306E;
--cta-bg:var(--grad);
--cta-ink:#FFFFFF;
--border:rgba(255,255,255,.12);
--shadow:0 24px 60px -28px rgba(0,0,0,.7);
--font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--font-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
/* legacy aliases — keeps every existing rule working under the new palette */
--cream:var(--bg);
--cream-deep:var(--bg-elevated);
--ink-soft:rgba(255,255,255,.86);
--ink-deep:#120020;
--paper:var(--bg-elevated);
--amber:var(--accent);
--amber-deep:var(--accent-2);
--sunset:var(--brand-orange);
--muted:var(--ink-muted);
--line:var(--border);
--serif:var(--font-display);
--sans:var(--font-body);
}
/* THEME 2 — Daylight (light, friendly, student-focused)
Warm cream canvas + Bricolage Grotesque headings = approachable yet
trustworthy. Brand purple CTAs read confident, blue + pink used
sparingly as energy accents. Welcoming for students, reassuring
for parents. */
[data-theme="daylight"]{
--bg:#FFFBF4;
--bg-elevated:#FFFFFF;
--surface:#F6EFE3;
--ink:#241236;
--ink-muted:#4D3D5C;
--accent:#2BA8F0;
--accent-2:#F0306E;
--accent-text:#0D6FA9;
--accent-2-text:#B0185A;
--cta-bg:var(--brand-purple);
--cta-ink:#FFFFFF;
--border:rgba(46,0,72,.10);
--shadow:0 18px 50px -30px rgba(46,0,72,.30);
--font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--font-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--cream:var(--bg); --cream-deep:var(--surface); --ink-soft:#352048;
--ink-deep:#1C0030; --paper:var(--bg-elevated);
--amber:var(--accent-text); --amber-deep:var(--accent-2-text); --sunset:var(--brand-orange);
--muted:var(--ink-muted); --line:var(--border);
--serif:var(--font-display); --sans:var(--font-body);
}
/* THEME 3 — Playground (bright, friendly) */
[data-theme="playground"]{
--bg:#FFF8EE;
--bg-elevated:#FFFFFF;
--surface:#FFFFFF;
--ink:#2E0048;
--ink-muted:#7A6A88;
--accent:#F0306E;
--accent-2:#2BA8F0;
--cta-bg:#F0306E;
--cta-ink:#FFFFFF;
--border:rgba(46,0,72,.08);
--shadow:0 16px 0 -2px rgba(46,0,72,.08);
--radius-md:22px; --radius-lg:30px;
--font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--font-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--cream:var(--bg); --cream-deep:var(--surface); --ink-soft:#4A2B6B;
--ink-deep:#1C0030; --paper:var(--bg-elevated);
--amber:var(--accent); --amber-deep:var(--accent-2); --sunset:var(--brand-orange);
--muted:var(--ink-muted); --line:var(--border);
--serif:var(--font-display); --sans:var(--font-body);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:clip;}
::selection{background:var(--amber);color:var(--ink);}
a{color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.section{padding:92px 0;}
.bg-cream-deep{background:var(--cream-deep);}
.bg-ink{background:var(--ink);}
/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:700;font-size:15px;cursor:pointer;border:none;
border-radius:999px;padding:15px 26px;display:inline-flex;align-items:center;gap:9px;
text-decoration:none;transition:all .25s ease;box-shadow:0 6px 16px rgba(16,42,67,.12);}
.btn svg{width:18px;height:18px;transition:transform .25s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,42,67,.22);}
.btn:hover svg.arr{transform:translateX(3px);}
.btn-amber{background:var(--amber);color:var(--ink);}
.btn-dark{background:var(--ink);color:var(--cream);}
.btn-block{width:100%;justify-content:center;}
/* ---------- eyebrow / heads ---------- */
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--amber-deep);display:inline-flex;align-items:center;gap:8px;}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--amber-deep);display:inline-block;}
.eyebrow.center{justify-content:center;}
.section-head{margin:0 0 50px;}
.section-head.center{text-align:center;max-width:720px;margin-left:auto;margin-right:auto;}
.section-head h2{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.02em;
font-size:clamp(30px,4vw,46px);line-height:1.08;margin:16px 0 0;}
.section-head p{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--muted);
margin:16px 0 0;max-width:560px;}
.section-head.center p{margin-left:auto;margin-right:auto;max-width:620px;}
.on-ink h2{color:var(--cream);}
.on-ink p{color:rgba(248,244,236,.7);}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;transition:all .3s ease;border-bottom:1px solid transparent;}
.site-header.scrolled{background:rgba(248,244,236,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand .badge{width:42px;height:42px;border-radius:12px;background:var(--ink);display:grid;place-items:center;flex-shrink:0;}
.brand .badge span{font-family:var(--serif);font-weight:700;color:var(--amber);font-size:22px;}
.brand .badge.amber{background:var(--amber);} .brand .badge.amber span{color:var(--ink);}
.brand .name{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--ink);line-height:1;}
.brand .tagline{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;color:var(--muted);
text-transform:uppercase;margin-top:3px;}
.nav{display:flex;align-items:center;gap:26px;}
.nav-item{position:relative;}
.nav-link{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink-soft);
text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:10px 0;}
.nav-link:hover{color:var(--amber-deep);}
.nav-link svg{width:15px;height:15px;}
/* dropdown */
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;
box-shadow:0 24px 48px rgba(16,42,67,.16);min-width:230px;opacity:0;visibility:hidden;
transition:all .22s ease;z-index:60;}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px);}
.dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
text-decoration:none;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);}
.dropdown a:hover{background:var(--cream-deep);color:var(--amber-deep);}
.dropdown a .fl{font-size:18px;}
.dropdown.wide{min-width:280px;}
/* grid dropdown (flag / brand-icon cards) */
.dropdown.grid{padding:14px;min-width:440px;max-width:calc(100vw - 32px);
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;}
.nav-item:last-of-type .dropdown.grid,
.nav-item:nth-last-of-type(2) .dropdown.grid{left:auto;right:0;transform:translateX(0) translateY(8px);}
.nav-item:last-of-type:hover .dropdown.grid,
.nav-item:nth-last-of-type(2):hover .dropdown.grid{transform:translateX(0) translateY(4px);}
.dropdown.grid a{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px 12px;}
.dropdown.grid a .flag-img{width:48px;height:32px;object-fit:cover;border-radius:5px;
box-shadow:0 1px 3px rgba(16,42,67,.18);display:block;}
.dropdown.grid a .lbl{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);line-height:1.2;display:block;}
.dropdown.grid a:hover .lbl{color:var(--amber-deep);}
.dropdown.grid a:hover .flag-img{transform:translateY(-2px);transition:transform .2s ease;}
/* exam logo image slot (real brand PNG / SVG) — kept small */
.dropdown.grid a .logo-slot{display:flex;align-items:center;justify-content:center;
height:24px;width:100%;}
.dropdown.grid a .exam-logo{max-width:48px;max-height:20px;width:auto!important;height:auto!important;
object-fit:contain;display:block;transition:transform .2s ease;}
.dropdown.grid a:hover .exam-logo{transform:translateY(-2px);}
/* brand-styled exam badge (fallback if a logo image fails to load) */
.exam-badge{display:flex;align-items:center;justify-content:center;height:34px;min-width:68px;padding:0 12px;
border-radius:5px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.5px;
border:1.5px solid transparent;background:var(--paper);line-height:1;white-space:nowrap;}
.ex-ielts{color:#a31b27;border-color:#a31b27;}
.ex-toefl{color:#0a3781;border-color:#0a3781;font-family:var(--serif);font-style:italic;}
.ex-gmat{color:#111;border-color:#111;font-family:var(--serif);font-style:italic;}
.ex-gre{color:#003c71;border-color:#003c71;font-family:var(--serif);font-style:italic;}
.ex-sat{color:#fff;background:#0066cc;border-color:#0066cc;}
.ex-pte{color:#fff;background:#b00020;border-color:#b00020;}
.ex-duo{color:#fff;background:#58cc02;border-color:#58cc02;border-radius:999px;width:34px;min-width:34px;
height:34px;font-weight:900;}
@media (max-width:980px){.dropdown.grid{min-width:0;}}
.header-cta{display:flex;align-items:center;gap:14px;}
.phone-link{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--ink);
text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.phone-link svg{width:16px;height:16px;color:var(--amber-deep);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;}
.menu-toggle svg{width:26px;height:26px;}
/* mobile menu */
.mobile-menu{display:none;background:var(--cream);border-top:1px solid var(--line);padding:10px 24px 24px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:13px 0;font-family:var(--sans);font-weight:600;color:var(--ink);
text-decoration:none;border-bottom:1px solid var(--line);}
.mobile-menu .grp{font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--amber-deep);padding:16px 0 4px;}
.mobile-menu .sub{padding-left:14px;font-weight:500;font-size:14px;}
.mobile-menu .btn{margin-top:18px;}
/* Buttons inside the mobile menu keep their pill shape + contrast (override the .mobile-menu a base) */
.mobile-menu a.btn{padding:15px 26px;border-bottom:none;justify-content:center;}
.mobile-menu a.btn.btn-dark{color:#FFFFFF;}
.mobile-menu a.btn.btn-amber{color:var(--ink);}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero .blob{position:absolute;border-radius:50%;pointer-events:none;}
.hero .blob.a{top:-120px;right:-80px;width:480px;height:480px;
background:radial-gradient(circle at 30% 30%, rgba(230,155,45,.2), transparent 70%);}
.hero .blob.b{bottom:-160px;left:-100px;width:460px;height:460px;
background:radial-gradient(circle at 50% 50%, rgba(16,42,67,.07), transparent 70%);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
padding:60px 0 80px;position:relative;}
.hero h1{font-family:var(--serif);font-weight:600;color:var(--ink);margin:22px 0 0;
font-size:clamp(40px,5.5vw,66px);line-height:1.02;letter-spacing:-.02em;}
.hero h1 em{font-style:italic;color:var(--amber-deep);}
.hero .lede{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--muted);max-width:520px;margin:24px 0 32px;}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.hero .mini-stats{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap;}
.hero .mini-stats .n{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--ink);}
.hero .mini-stats .l{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:2px;}
.lead-form{background:var(--paper);border-radius:24px;padding:30px 28px;
box-shadow:0 30px 60px rgba(16,42,67,.14);border:1px solid var(--line);}
.lead-form h3{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--ink);margin:0;}
.lead-form p.fp{font-family:var(--sans);font-size:14px;color:var(--muted);margin:6px 0 22px;}
.lead-form .fields{display:grid;gap:13px;}
.field{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);padding:14px 16px;
border-radius:12px;border:1px solid var(--line);background:var(--cream);outline:none;}
.field:focus{border-color:var(--amber);}
.form-note{display:flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--sans);
font-size:12.5px;color:var(--muted);}
.form-note svg{width:15px;height:15px;color:var(--amber-deep);}
.form-success{display:none;background:#E7F4EC;border:1px solid #BfE3CC;color:#1B6B3A;
border-radius:12px;padding:14px 16px;font-family:var(--sans);font-size:14px;margin-top:14px;}
/* ---------- service cards ---------- */
.cards{display:grid;gap:22px;}
.cards.c4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.svc-card{background:var(--paper);border-radius:20px;padding:30px 26px;border:1px solid var(--line);
height:100%;transition:all .3s ease;text-decoration:none;display:block;}
.svc-card:hover{background:var(--ink);transform:translateY(-6px);box-shadow:0 24px 44px rgba(16,42,67,.18);}
.svc-card .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
background:var(--cream-deep);transition:all .3s;}
.svc-card .ic svg{width:26px;height:26px;color:var(--amber-deep);}
.svc-card:hover .ic{background:var(--amber);}
.svc-card:hover .ic svg{color:var(--ink);}
.svc-card h3{font-family:var(--serif);font-weight:600;font-size:23px;margin:20px 0 10px;color:var(--ink);transition:color .3s;}
.svc-card p{font-family:var(--sans);font-size:14.5px;line-height:1.6;margin:0;color:var(--muted);transition:color .3s;}
.svc-card:hover h3{color:var(--cream);}
.svc-card:hover p{color:rgba(248,244,236,.78);}
/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
background:rgba(248,244,236,.12);border-radius:20px;overflow:hidden;}
.stat{background:var(--ink);padding:34px 26px;height:100%;}
.stat .n{font-family:var(--serif);font-weight:700;font-size:50px;color:var(--amber);line-height:1;}
.stat .l{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--cream);margin-top:14px;}
.stat .s{font-family:var(--sans);font-size:13.5px;color:rgba(248,244,236,.6);margin-top:5px;line-height:1.5;}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px;}
.promise{display:flex;gap:14px;align-items:center;padding:18px 22px;background:rgba(248,244,236,.06);
border-radius:14px;border:1px solid rgba(248,244,236,.1);}
.promise svg{width:26px;height:26px;color:var(--amber);flex-shrink:0;}
.promise .t{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--cream);}
.promise .d{font-family:var(--sans);font-size:13px;color:rgba(248,244,236,.6);}
/* ---------- test cards ---------- */
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.test-card{display:flex;align-items:center;gap:18px;background:var(--paper);border-radius:16px;
padding:20px 22px;border:1px solid var(--line);text-decoration:none;transition:all .25s ease;}
.test-card:hover{transform:translateX(4px);box-shadow:0 14px 28px rgba(16,42,67,.1);}
.test-card .tg{width:58px;height:58px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
background:var(--cream);transition:background .25s;}
.test-card .tg span{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--amber-deep);}
.test-card:hover .tg{background:var(--amber);}
.test-card .tt{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);}
.test-card .tf{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
.test-card .arr2{width:20px;height:20px;color:var(--muted);}
.test-card:hover .arr2{color:var(--amber-deep);}
/* ---------- destinations ---------- */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.dest-card{display:block;text-decoration:none;border-radius:20px;padding:32px 28px;border:1px solid var(--line);
background:var(--paper);transition:all .3s ease;}
.dest-card:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(16,42,67,.2);
background:linear-gradient(135deg,var(--ink),var(--ink-soft));}
.dest-card .fl{font-size:44px;line-height:1;margin-bottom:18px;}
.dest-card .nm{font-family:var(--serif);font-weight:600;font-size:27px;color:var(--ink);transition:color .3s;}
.dest-card .nt{font-family:var(--sans);font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.5;transition:color .3s;}
.dest-card .go{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-family:var(--sans);
font-weight:700;font-size:14px;color:var(--amber-deep);transition:color .3s;}
.dest-card .go svg{width:16px;height:16px;}
.dest-card:hover .nm{color:var(--cream);}
.dest-card:hover .nt{color:rgba(248,244,236,.75);}
.dest-card:hover .go{color:var(--amber);}
/* ---------- why abroad ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.feat{background:var(--paper);border-radius:18px;padding:28px 24px;border:1px solid var(--line);height:100%;}
.feat .ic{width:50px;height:50px;border-radius:13px;background:var(--cream);display:grid;place-items:center;}
.feat .ic svg{width:24px;height:24px;color:var(--amber-deep);}
.feat h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin:18px 0 8px;line-height:1.3;}
.feat > h3:first-child{margin-top:0;padding-top:0;}
.feat > h3:first-child::before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:var(--grad-amber,linear-gradient(90deg,#f7b733,#fc4a1a));margin-bottom:14px;}
.feat p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;}
.cta-band{margin-top:56px;background:linear-gradient(120deg,var(--ink),var(--ink-soft));border-radius:24px;
padding:48px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;
flex-wrap:wrap;position:relative;overflow:hidden;}
.cta-band .glow{position:absolute;top:-60px;right:-40px;width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(230,155,45,.2),transparent 70%);}
.cta-band .txt{position:relative;max-width:560px;}
.cta-band h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,34px);color:var(--cream);margin:0;line-height:1.15;}
.cta-band p{font-family:var(--sans);font-size:16px;color:rgba(248,244,236,.75);margin-top:12px;}
.cta-band .btn{position:relative;}
/* ---------- methodology ---------- */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.check-list{display:grid;gap:14px;}
.check-row{display:flex;align-items:center;gap:12px;}
.check-row .cb{width:26px;height:26px;border-radius:8px;background:var(--amber);display:grid;place-items:center;flex-shrink:0;}
.check-row .cb svg{width:16px;height:16px;color:var(--ink);}
.check-row span{font-family:var(--sans);font-size:16px;color:var(--ink);font-weight:500;}
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.format{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 22px;text-align:center;}
.format.dark{background:var(--ink);}
.format svg{width:32px;height:32px;color:var(--amber-deep);margin:0 auto;}
.format.dark svg{color:var(--amber);}
.format .l{font-family:var(--sans);font-weight:700;font-size:15px;margin-top:14px;color:var(--ink);}
.format.dark .l{color:var(--cream);}
/* ---------- testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;}
.tst{background:rgba(248,244,236,.05);border:1px solid rgba(248,244,236,.12);border-radius:20px;padding:30px 28px;height:100%;}
.tst .q{width:32px;height:32px;color:var(--amber);}
.tst p{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.55;color:var(--cream);margin:16px 0 24px;}
.tst .who{display:flex;align-items:center;gap:13px;}
.tst .av{width:46px;height:46px;border-radius:50%;background:var(--amber);display:grid;place-items:center;
font-family:var(--serif);font-weight:700;color:var(--ink);font-size:18px;}
.tst .nm{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--cream);}
.tst .rt{font-family:var(--sans);font-size:12.5px;color:rgba(248,244,236,.6);}
.tst .stars{display:flex;gap:3px;margin-top:16px;}
.tst .stars svg{width:15px;height:15px;color:var(--amber);fill:var(--amber);}
/* ---------- partners ---------- */
.partners-head{text-align:center;}
.partners-head h2{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(28px,3.6vw,42px);
margin:16px auto 0;max-width:760px;letter-spacing:-.02em;}
.uni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:48px;}
.uni{background:var(--cream-deep);border-radius:12px;height:70px;display:grid;place-items:center;
font-family:var(--serif);font-weight:600;font-size:13px;color:var(--muted);border:1px solid var(--line);}
.featured{margin-top:64px;padding-top:40px;border-top:1px solid var(--line);}
.featured .lbl{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);margin-bottom:24px;}
.featured .row{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;opacity:.65;}
.featured .row span{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);}
/* ---------- footer ---------- */
.site-footer{background:var(--ink-deep);color:var(--cream);}
.footer-inner{padding:72px 0 40px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1.6fr;gap:48px;}
.footer-brand .row{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.footer-brand .badge{width:40px;height:40px;border-radius:11px;background:var(--amber);display:grid;place-items:center;}
.footer-brand .badge span{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:21px;}
.footer-brand .nm{font-family:var(--serif);font-weight:700;font-size:22px;}
.footer-brand p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:rgba(248,244,236,.65);max-width:320px;}
.socials{display:flex;gap:12px;margin-top:22px;}
.socials a{width:38px;height:38px;border-radius:10px;background:rgba(248,244,236,.08);display:grid;place-items:center;color:var(--cream);}
.socials a:hover{background:var(--amber);color:var(--ink);}
.socials svg{width:17px;height:17px;}
.footer-col .ttl{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.1em;
text-transform:uppercase;margin-bottom:18px;color:var(--amber);}
.footer-col a{display:block;font-family:var(--sans);font-size:14.5px;color:rgba(248,244,236,.7);text-decoration:none;padding:7px 0;}
.footer-col a:hover{color:var(--amber);}
.footer-contact{font-family:var(--sans);font-size:14.5px;line-height:1.7;color:rgba(248,244,236,.7);}
.footer-contact .ln{display:flex;gap:10px;margin-top:12px;}
.footer-contact .ln:first-child{margin-top:0;}
.footer-contact svg{width:18px;height:18px;color:var(--amber);flex-shrink:0;margin-top:2px;}
.footer-locations{margin-top:56px;padding-top:40px;border-top:1px solid rgba(248,244,236,.12);}
.footer-locations .ttl{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.1em;
text-transform:uppercase;margin-bottom:22px;color:var(--amber);}
.loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;}
.loc-col .region{font-family:var(--serif);font-weight:600;font-size:16px;margin-bottom:10px;}
.loc-col a{display:block;font-family:var(--sans);font-size:13.5px;color:rgba(248,244,236,.6);text-decoration:none;padding:4px 0;}
.loc-col a:hover{color:var(--amber);}
.footer-bottom{margin-top:48px;padding-top:26px;border-top:1px solid rgba(248,244,236,.12);
display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--sans);font-size:13px;color:rgba(248,244,236,.5);}
.footer-bottom a{color:rgba(248,244,236,.5);text-decoration:none;}
.footer-bottom a:hover{color:var(--amber);}
.footer-bottom .links{display:flex;gap:20px;}
/* ---------- floating whatsapp ---------- */
.wa{position:fixed;bottom:26px;right:26px;z-index:60;width:58px;height:58px;border-radius:50%;
background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.4);transition:transform .25s;}
.wa:hover{transform:scale(1.08);}
.wa svg{width:28px;height:28px;color:#fff;fill:#fff;}
/* ---------- sub-page hero ---------- */
.page-hero{background:linear-gradient(135deg,var(--ink),var(--ink-soft));color:var(--cream);position:relative;overflow:hidden;}
.page-hero .glow{position:absolute;top:-80px;right:-60px;width:360px;height:360px;border-radius:50%;
background:radial-gradient(circle,rgba(230,155,45,.18),transparent 70%);}
.page-hero .inner{padding:80px 0 72px;position:relative;max-width:760px;}
.page-hero .crumbs{font-family:var(--sans);font-size:13px;color:rgba(248,244,236,.6);margin-bottom:18px;}
.page-hero .crumbs a{color:var(--amber);text-decoration:none;}
.page-hero .flag{font-size:54px;line-height:1;margin-bottom:14px;}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,56px);line-height:1.05;
letter-spacing:-.02em;margin:0;}
.page-hero p{font-family:var(--sans);font-size:18px;line-height:1.6;color:rgba(248,244,236,.8);margin:20px 0 0;}
.page-hero .btn{margin-top:30px;}
/* ---------- prose / content blocks ---------- */
.prose-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:50px;align-items:start;}
.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,38px);color:var(--ink);
letter-spacing:-.02em;margin:0 0 18px;}
.prose h3{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--ink);margin:34px 0 12px;}
.prose p{font-family:var(--sans);font-size:16.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 16px;}
.prose ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:12px;}
.prose ul li{position:relative;padding-left:34px;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink-soft);}
.prose ul li strong{color:var(--ink);font-weight:700;}
.prose ul li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:7px;background:var(--amber);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102A43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:14px;background-repeat:no-repeat;background-position:center;}
.aside{background:var(--cream-deep);border:1px solid var(--line);border-radius:20px;padding:28px 26px;position:sticky;top:96px;}
.aside h4{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 16px;color:var(--ink);}
.aside .stat-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);
font-family:var(--sans);font-size:14.5px;}
.aside .stat-row:last-of-type{border-bottom:none;}
.aside .stat-row .k{color:var(--muted);} .aside .stat-row .v{font-weight:700;color:var(--ink);}
.aside .btn{margin-top:20px;}
.quick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:8px;}
.quick-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px 24px;}
.quick-card .ic{width:48px;height:48px;border-radius:12px;background:var(--cream-deep);display:grid;place-items:center;margin-bottom:16px;}
.quick-card .ic svg{width:24px;height:24px;color:var(--amber-deep);}
.quick-card h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin:0 0 8px;}
.quick-card p{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted);margin:0;}
/* official sources attribution */
.sources-note{max-width:820px;margin:56px auto 0;padding:24px 28px;background:var(--cream);border:1px solid var(--line);border-radius:16px;text-align:center;}
.sources-note .lbl{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep);display:inline-block;margin-bottom:10px;}
.sources-note p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 10px;}
.sources-note .links{font-family:var(--sans);font-size:14px;line-height:1.8;}
.sources-note .links a{color:var(--amber-deep);font-weight:600;text-decoration:none;margin:0 6px;}
.sources-note .links a:hover{color:var(--ink);text-decoration:underline;}
.sources-note .links .sep{color:var(--line);margin:0 2px;}
/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.info-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;gap:16px;margin-bottom:16px;}
.info-card .ic{width:48px;height:48px;border-radius:12px;background:var(--cream-deep);display:grid;place-items:center;flex-shrink:0;}
.info-card .ic svg{width:22px;height:22px;color:var(--amber-deep);}
.info-card h4{font-family:var(--sans);font-weight:700;font-size:15px;margin:0 0 4px;color:var(--ink);}
.info-card p{font-family:var(--sans);font-size:14.5px;color:var(--muted);margin:0;line-height:1.5;}
/* office cards */
.office-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.office-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;}
.office-card .region{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--amber-deep);margin-bottom:10px;}
.office-card h3{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);margin:0 0 14px;}
.office-card .branches{display:flex;flex-wrap:wrap;gap:8px;}
.office-card .branches span{font-family:var(--sans);font-size:13px;color:var(--ink-soft);
background:var(--cream-deep);border-radius:999px;padding:6px 12px;}
/* reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.show{opacity:1;transform:none;}
/* ---------- responsive ---------- */
@media (max-width:980px){
.nav,.header-cta .phone-link,.header-cta .btn{display:none;}
.menu-toggle{display:block;}
.hero-grid{grid-template-columns:1fr;}
.method-grid{grid-template-columns:1fr;}
.footer-top{grid-template-columns:1fr;}
.prose-grid{grid-template-columns:1fr;}
.aside{position:static;}
.contact-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
.section{padding:64px 0;}
.cta-band{padding:34px 26px;}
.format-grid{grid-template-columns:1fr 1fr;}
}
/* =========================================================================
ADVANCED STYLES — layered enhancements (additive)
========================================================================= */
/* ---------- design tokens ---------- */
:root{
--grad-amber:linear-gradient(135deg,#F2B658 0%,#E69B2D 45%,#C97E16 100%);
--grad-ink:linear-gradient(135deg,#102A43 0%,#1E3A57 60%,#0B1E30 100%);
--grad-warm:linear-gradient(120deg,#FFE6BC 0%,#F8F4EC 45%,#EFE7D7 100%);
--shadow-sm:0 2px 6px rgba(16,42,67,.06),0 1px 2px rgba(16,42,67,.04);
--shadow-md:0 12px 28px rgba(16,42,67,.10),0 4px 10px rgba(16,42,67,.06);
--shadow-lg:0 30px 60px rgba(16,42,67,.18),0 10px 20px rgba(16,42,67,.08);
--shadow-glow:0 0 0 1px rgba(230,155,45,.30),0 20px 50px rgba(230,155,45,.18);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;
}
/* ---------- global polish ---------- */
html{scroll-padding-top:96px;}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:var(--amber);color:var(--ink);text-shadow:none;}
/* custom scrollbar (webkit) */
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--cream-deep);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--amber),var(--amber-deep));
border:3px solid var(--cream-deep);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--amber-deep);}
html{scrollbar-color:var(--amber-deep) var(--cream-deep);scrollbar-width:thin;}
/* accessible focus rings */
a:focus-visible,button:focus-visible,.field:focus-visible,.btn:focus-visible{
outline:2px solid var(--amber);outline-offset:3px;border-radius:8px;}
/* respect motion preferences */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
/* ---------- keyframes ---------- */
@keyframes adv-float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-14px) translateX(6px);}}
@keyframes adv-drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-12px) scale(1.04);}}
@keyframes adv-spin-slow{to{transform:rotate(360deg);}}
@keyframes adv-pulse-ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}70%{box-shadow:0 0 0 18px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
@keyframes adv-shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
@keyframes adv-shine{0%{transform:translateX(-120%) skewX(-20deg);}100%{transform:translateX(220%) skewX(-20deg);}}
@keyframes adv-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes adv-grad-shift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes adv-pop-in{0%{opacity:0;transform:translateY(8px) scale(.96);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes adv-rise{0%{opacity:0;transform:translateY(40px);}100%{opacity:1;transform:translateY(0);}}
/* ---------- header refinement ---------- */
.site-header{background:rgba(248,244,236,.0);}
.site-header.scrolled{box-shadow:0 8px 32px rgba(16,42,67,.06);}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
.site-header.scrolled{background:rgba(248,244,236,.72);backdrop-filter:saturate(180%) blur(16px);
-webkit-backdrop-filter:saturate(180%) blur(16px);}
}
.brand .badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 8px 18px rgba(16,42,67,.18);
transition:transform .35s var(--ease-spring);}
.brand:hover .badge{transform:rotate(-6deg) scale(1.05);}
/* animated nav underline */
.nav-link{position:relative;}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--amber);
border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-item:hover > .nav-link svg{transform:rotate(180deg);transition:transform .3s var(--ease-out);}
/* dropdown polish + entry animation */
.dropdown{box-shadow:0 18px 50px rgba(16,42,67,.18),0 2px 6px rgba(16,42,67,.08);
border:1px solid rgba(16,42,67,.06);background:linear-gradient(180deg,#fff 0%,#FCF8F0 100%);}
.dropdown a{position:relative;overflow:hidden;}
.dropdown a::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--amber);
border-radius:2px;transform:translateY(-50%);transition:height .25s var(--ease-out);}
.dropdown a:hover::before{height:60%;}
.dropdown a:hover{transform:translateX(2px);}
/* ---------- buttons: shine + spring ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;
transition:transform .25s var(--ease-spring),box-shadow .3s var(--ease-out),background .25s ease,color .25s ease;}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
transform:translateX(-120%) skewX(-20deg);pointer-events:none;z-index:-1;}
.btn:hover::before{animation:adv-shine .9s var(--ease-out);}
.btn-amber{background:var(--grad-amber);background-size:200% 200%;}
.btn-amber:hover{animation:adv-grad-shift 3s ease infinite;box-shadow:0 18px 36px rgba(230,155,45,.35);}
.btn-dark{background:var(--grad-ink);}
.btn-dark:hover{box-shadow:0 18px 36px rgba(16,42,67,.32);}
.btn:active{transform:translateY(0) scale(.98);}
/* magnetic-button pointer follow (set by JS via --mx/--my) */
.btn[data-magnetic]{transform:translate(calc(var(--mx,0px)),calc(var(--my,0px)));}
.btn[data-magnetic]:hover{transition:transform .15s var(--ease-out),box-shadow .3s var(--ease-out);}
/* ---------- hero ---------- */
.hero{background:radial-gradient(1200px 600px at 80% -10%,rgba(230,155,45,.10),transparent 60%),
radial-gradient(900px 500px at -10% 110%,rgba(16,42,67,.06),transparent 60%),var(--cream);}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(16,42,67,.06) 1px,transparent 1px);
background-size:28px 28px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);}
.hero .blob.a{animation:adv-drift 14s ease-in-out infinite;}
.hero .blob.b{animation:adv-drift 18s ease-in-out infinite reverse;}
.hero h1 em{background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:200% 200%;animation:adv-grad-shift 6s ease infinite;}
.hero .mini-stats > div{position:relative;padding-left:14px;}
.hero .mini-stats > div::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
background:var(--grad-amber);border-radius:3px;}
.hero .mini-stats .n{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* lead form: glassmorphism */
.lead-form{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.95));
border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.7);
backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);}
.lead-form::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(230,155,45,.45),transparent 40%,rgba(16,42,67,.18));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.field{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.field:focus{border-color:var(--amber);box-shadow:0 0 0 4px rgba(230,155,45,.18);background:#fff;}
/* ---------- service / quick / feat cards: gradient border + lift ---------- */
.svc-card,.quick-card,.feat,.dest-card,.info-card,.test-card,.office-card{position:relative;isolation:isolate;
transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-out),background .3s ease,color .3s ease;}
.svc-card::after,.quick-card::after,.feat::after,.dest-card::after,.office-card::after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(230,155,45,.0),rgba(230,155,45,.45) 50%,rgba(16,42,67,.0));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.svc-card:hover::after,.quick-card:hover::after,.feat:hover::after,.dest-card:hover::after,.office-card:hover::after{opacity:1;}
.quick-card:hover,.feat:hover,.office-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.svc-card .ic,.feat .ic,.quick-card .ic{transition:transform .35s var(--ease-spring),background .3s ease;}
.svc-card:hover .ic,.feat:hover .ic,.quick-card:hover .ic{transform:rotate(-6deg) scale(1.08);}
/* tilt-ready (JS sets --rx/--ry) */
[data-tilt]{transform-style:preserve-3d;will-change:transform;}
[data-tilt]:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);}
/* destination card image-feel header glow */
.dest-card{overflow:hidden;}
.dest-card::before{content:"";position:absolute;inset:auto -30% -60% auto;width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(230,155,45,.25),transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:-1;}
.dest-card:hover::before{opacity:1;}
.dest-card .fl{transition:transform .4s var(--ease-spring);display:inline-block;}
.dest-card:hover .fl{transform:scale(1.12) rotate(-6deg);}
/* ---------- stats: animated number ring ---------- */
.stat{position:relative;overflow:hidden;}
.stat::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;
background:conic-gradient(from 0deg,rgba(230,155,45,.18),transparent 40%,rgba(230,155,45,.18));
animation:adv-spin-slow 18s linear infinite;opacity:.6;}
.stat .n{background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:200% 200%;animation:adv-grad-shift 5s ease infinite;}
/* promises: subtle hover lift */
.promise{transition:transform .25s var(--ease-out),background .25s ease,border-color .25s ease;}
.promise:hover{transform:translateY(-2px);background:rgba(248,244,236,.10);border-color:rgba(230,155,45,.3);}
/* ---------- test cards: amber bar reveal ---------- */
.test-card{position:relative;overflow:hidden;}
.test-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-amber);
transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease-out);}
.test-card:hover::before{transform:scaleY(1);}
.test-card:hover .tg{transform:rotate(-6deg);}
.test-card .tg{transition:transform .3s var(--ease-spring),background .25s ease;}
/* ---------- partners: animated marquee ---------- */
.uni-grid{position:relative;display:flex;gap:14px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.uni-grid::before{content:"";flex:0 0 0;}
.uni-grid{animation:adv-marquee 38s linear infinite;}
.uni-grid:hover{animation-play-state:paused;}
.uni{flex:0 0 150px;transition:transform .25s var(--ease-out),background .25s ease,color .25s ease;}
.uni:hover{transform:translateY(-3px);background:var(--paper);color:var(--ink);border-color:var(--amber);}
/* featured row hover */
.featured .row span{transition:opacity .25s,transform .25s;}
.featured .row span:hover{opacity:1;transform:translateY(-2px);color:var(--amber-deep);}
/* ---------- testimonials ---------- */
.tst{position:relative;overflow:hidden;transition:transform .35s var(--ease-out),border-color .3s ease,background .3s ease;}
.tst::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,rgba(230,155,45,.35),transparent 60%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;pointer-events:none;}
.tst:hover{transform:translateY(-4px);background:rgba(248,244,236,.08);}
.tst:hover::before{opacity:1;}
.tst .av{box-shadow:0 6px 14px rgba(230,155,45,.35);}
/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--ink),var(--ink-soft));}
.cta-band::after{content:"";position:absolute;inset:0;
background:radial-gradient(600px 300px at 110% 130%,rgba(230,155,45,.16),transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(248,244,236,0.08)'/%3E%3C/svg%3E");
background-size:auto,28px 28px;pointer-events:none;mix-blend-mode:overlay;}
.cta-band .glow{animation:adv-drift 16s ease-in-out infinite;}
/* ---------- sub-page hero (animated grid + aurora) ---------- */
.page-hero{position:relative;}
.page-hero::before{content:"";position:absolute;inset:0;
background:linear-gradient(transparent 95%,rgba(230,155,45,.10) 95%),
linear-gradient(90deg,transparent 95%,rgba(230,155,45,.10) 95%);
background-size:42px 42px;mask-image:radial-gradient(ellipse 70% 80% at 50% 0,#000 30%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0,#000 30%,transparent 80%);pointer-events:none;}
.page-hero::after{content:"";position:absolute;bottom:-160px;left:-80px;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(230,155,45,.14),transparent 70%);filter:blur(20px);animation:adv-drift 22s ease-in-out infinite;}
.page-hero .glow{animation:adv-drift 18s ease-in-out infinite reverse;}
.page-hero h1{background:linear-gradient(180deg,#fff 0%,#F8F4EC 70%,rgba(248,244,236,.85) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero .flag{filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));animation:adv-float 6s ease-in-out infinite;}
/* ---------- prose links + drop cap ---------- */
.prose p a,.prose li a{position:relative;color:var(--amber-deep);text-decoration:none;font-weight:600;
background-image:linear-gradient(var(--amber),var(--amber));background-repeat:no-repeat;
background-position:0 100%;background-size:100% 1px;transition:background-size .3s var(--ease-out),color .25s;}
.prose p a:hover,.prose li a:hover{color:var(--ink);background-size:100% 100%;
background-image:linear-gradient(rgba(230,155,45,.25),rgba(230,155,45,.25));}
.prose > h2:first-child + p::first-letter,.prose > p:first-of-type::first-letter{
font-family:var(--serif);font-weight:700;font-size:3.4em;line-height:1;float:left;margin:6px 12px 0 0;color:var(--amber-deep);}
.prose > p.note:first-of-type::first-letter,.prose > p.note::first-letter{
font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;float:none;margin:0;color:inherit;}
/* aside refinement */
.aside{background:linear-gradient(180deg,var(--cream-deep),var(--cream));position:sticky;top:96px;
box-shadow:var(--shadow-md);transition:transform .3s var(--ease-out);}
.aside:hover{transform:translateY(-2px);}
/* ---------- footer enhancements ---------- */
.site-footer{position:relative;overflow:hidden;}
.site-footer::before{content:"";position:absolute;top:-200px;right:-160px;width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(230,155,45,.10),transparent 70%);pointer-events:none;}
.footer-col a{position:relative;transition:color .2s,padding-left .25s var(--ease-out);}
.footer-col a:hover{padding-left:10px;}
.footer-col a::before{content:"→";position:absolute;left:-6px;opacity:0;transition:opacity .25s,left .25s;color:var(--amber);}
.footer-col a:hover::before{opacity:1;left:0;}
.socials a{transition:transform .3s var(--ease-spring),background .3s ease,color .25s ease;}
.socials a:hover{transform:translateY(-3px) rotate(-6deg);}
/* ---------- whatsapp pulse ---------- */
.wa{animation:adv-pulse-ring 2.4s ease-out infinite;}
.wa::before{content:"";position:absolute;inset:-6px;border-radius:50%;
background:conic-gradient(from 0deg,rgba(37,211,102,.5),transparent 60%);
animation:adv-spin-slow 6s linear infinite;z-index:-1;filter:blur(6px);opacity:.6;}
/* ---------- reveal variants ---------- */
.reveal-zoom{opacity:0;transform:scale(.94);transition:opacity .7s var(--ease-out),transform .7s var(--ease-spring);}
.reveal-zoom.show{opacity:1;transform:scale(1);}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.reveal-left.show{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.reveal-right.show{opacity:1;transform:none;}
/* ---------- utility classes ---------- */
.text-gradient{background:var(--grad-amber);-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:200% 200%;animation:adv-grad-shift 6s ease infinite;}
.glass{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);border-radius:var(--r-lg);box-shadow:var(--shadow-md);}
.shimmer{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--cream-deep) 25%,#fff 50%,var(--cream-deep) 75%);
background-size:200% 100%;animation:adv-shimmer 1.8s linear infinite;border-radius:8px;}
.hover-lift{transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-out);}
.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(16,42,67,.18),transparent);margin:32px 0;}
.divider.on-ink{background:linear-gradient(90deg,transparent,rgba(248,244,236,.2),transparent);}
/* ---------- print ---------- */
@media print{
.site-header,.mobile-menu,.wa,.cta-band,.lead-form,.aside,.socials{display:none!important;}
body{background:#fff;color:#000;}
a{color:#000;text-decoration:underline;}
}
/* ---------- image system ---------- */
.media-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--cream-deep);
box-shadow:var(--shadow-md);}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s var(--ease-out);}
.media-frame:hover img{transform:scale(1.05);}
.media-frame.ratio-4-3{aspect-ratio:4/3;}
.media-frame.ratio-16-9{aspect-ratio:16/9;}
.media-frame.ratio-1-1{aspect-ratio:1/1;}
.media-frame.ratio-3-4{aspect-ratio:3/4;}
/* student-photo strip below hero — equal columns, equal aspect */
.image-strip{padding:32px 0 56px;}
.image-strip .container{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
.image-strip .media-frame{aspect-ratio:5/4;}
.image-strip .badge-pill{position:absolute;bottom:14px;left:14px;background:rgba(248,244,236,.94);
color:var(--ink);padding:8px 14px;border-radius:999px;font-family:var(--sans);font-weight:700;
font-size:13px;backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);}
@media (max-width:760px){.image-strip .container{grid-template-columns:1fr;}}
/* page images: sit inside the content container, above the prose / contact grid */
.page-images{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch;
margin:0 0 48px;}
.page-images .media-frame{aspect-ratio:4/3;}
@media (max-width:760px){.page-images{grid-template-columns:1fr;margin-bottom:32px;}}
/* merge block: image on left, content card on right that overlaps the image */
.merge-block{position:relative;display:grid;grid-template-columns:1.05fr 1fr;
gap:0;align-items:center;margin:0 0 64px;}
.merge-image{position:relative;border-radius:18px;overflow:hidden;
box-shadow:var(--shadow-md);aspect-ratio:4/3;background:var(--cream-deep);}
.merge-image img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s var(--ease-out);}
.merge-image:hover img{transform:scale(1.04);}
.merge-card{position:relative;z-index:2;background:var(--paper);border-radius:22px;
padding:44px 42px;box-shadow:var(--shadow-lg);margin-left:-72px;
border:1px solid var(--line);}
.merge-card h2{font-family:var(--serif);font-weight:600;color:var(--ink);
font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.02em;
margin:0 0 18px;}
.merge-card p{font-family:var(--sans);font-size:16px;line-height:1.65;
color:var(--ink-soft);margin:0 0 12px;}
.merge-card p:last-child{margin-bottom:0;}
@media (max-width:860px){
.merge-block{grid-template-columns:1fr;}
.merge-card{margin-left:24px;margin-right:24px;margin-top:-48px;padding:30px 26px;}
}
@media (max-width:480px){
.merge-card{margin-left:14px;margin-right:14px;margin-top:-32px;padding:24px 20px;}
}
/* "happy moments" gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.gallery-grid .media-frame{aspect-ratio:3/4;}
.gallery-grid .media-frame .label{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 14px;
background:linear-gradient(transparent,rgba(11,30,48,.85));color:var(--cream);
font-family:var(--sans);font-weight:700;font-size:14.5px;}
/* feature row: image + text side-by-side */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.feature-row.reverse{direction:rtl;}
.feature-row.reverse > *{direction:ltr;}
.feature-row .media-frame{aspect-ratio:4/3;}
.feature-row .ftxt h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,38px);
color:var(--ink);letter-spacing:-.02em;margin:14px 0 16px;line-height:1.1;}
.feature-row .ftxt p{font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--muted);margin:0 0 14px;}
@media (max-width:860px){.feature-row{grid-template-columns:1fr;gap:28px;}}
/* (testimonial avatars use the original letter-circle look) */
/* destination card photo header */
.dest-card.with-photo{padding:0;overflow:hidden;}
.dest-card.with-photo .photo{position:relative;aspect-ratio:16/10;overflow:hidden;}
.dest-card.with-photo .photo img{width:100%;height:100%;object-fit:cover;
transition:transform .7s var(--ease-out);}
.dest-card.with-photo:hover .photo img{transform:scale(1.08);}
.dest-card.with-photo .photo::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(11,30,48,.7));}
.dest-card.with-photo .photo .fl{position:absolute;top:14px;left:16px;font-size:38px;margin:0;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));z-index:1;}
.dest-card.with-photo .body{padding:22px 24px 26px;}
.dest-card.with-photo .nm,.dest-card.with-photo .nt,.dest-card.with-photo .go{margin-left:0;margin-right:0;}
.dest-card.with-photo:hover{background:var(--paper);}
.dest-card.with-photo:hover .nm{color:var(--ink);}
.dest-card.with-photo:hover .nt{color:var(--muted);}
/* about / contact image card */
.image-card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.image-card img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.image-card .cap{position:absolute;left:18px;bottom:18px;right:18px;color:var(--cream);
font-family:var(--sans);font-weight:700;font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
/* =========================================================================
THEME 1 ("Momentum") overrides — fixes legacy rules that hard-baked the
old light palette so the dark canvas reads correctly.
========================================================================= */
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);}
::selection{background:var(--accent-2);color:#FFFFFF;}
.section-head h2,.on-ink h2{color:var(--ink);}
.section-head p,.on-ink p{color:var(--ink-muted);}
.eyebrow{color:var(--accent-2);}
.eyebrow::before{background:var(--accent-2);}
/* sections — keep visual rhythm */
.bg-ink,.bg-cream-deep{background:var(--bg-elevated);}
/* nav + header */
.site-header{background:transparent;}
.site-header.scrolled{background:rgba(28,0,48,.85)!important;backdrop-filter:saturate(180%) blur(16px);
-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--border);}
.nav-link{color:var(--ink-muted);}
.nav-link:hover{color:var(--accent);}
.phone-link{color:var(--ink);}
.phone-link svg{color:var(--accent);}
/* brand wordmark + icon */
.brand{gap:10px;align-items:center;}
.brand-icon{width:42px;height:42px;flex-shrink:0;border-radius:12px;object-fit:cover;
filter:drop-shadow(0 4px 14px rgba(43,168,240,.35));
transition:transform .35s var(--ease);}
.brand:hover .brand-icon{transform:rotate(-8deg) scale(1.05);}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.03em;
color:var(--ink);line-height:1;}
.brand-name .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* dropdown */
.dropdown{background:var(--bg-elevated)!important;border-color:var(--border)!important;
box-shadow:0 24px 48px rgba(0,0,0,.55)!important;}
.dropdown a{color:var(--ink);}
.dropdown a:hover{background:var(--surface);color:#FFFFFF;}
.dropdown.grid a .lbl{color:var(--ink);}
.dropdown.grid a:hover .lbl{color:var(--accent);}
/* mobile menu */
.mobile-menu{background:var(--bg-elevated);border-top-color:var(--border);}
.mobile-menu a{color:var(--ink);border-bottom-color:var(--border);}
.mobile-menu .grp{color:var(--accent-2);}
/* buttons */
.btn-amber{background:var(--cta-bg);background-size:200% 200%;color:var(--cta-ink);
box-shadow:0 6px 18px rgba(240,48,110,.25);}
.btn-amber:hover{box-shadow:0 14px 32px rgba(240,48,110,.40);filter:brightness(1.08);}
.btn-dark{background:var(--bg-elevated);color:var(--ink);border:1px solid var(--border);}
.btn-dark:hover{background:var(--brand-purple);box-shadow:0 14px 32px rgba(43,168,240,.30);}
/* hero */
.hero{background:radial-gradient(900px 500px at 90% -10%,rgba(43,168,240,.20),transparent 60%),
radial-gradient(800px 500px at -5% 110%,rgba(240,48,110,.18),transparent 60%),var(--bg);}
.hero h1{color:var(--ink);}
.hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
font-style:italic;background-size:200% 200%;animation:adv-grad-shift 6s ease infinite;}
.hero .lede{color:var(--ink-muted);}
.hero .mini-stats .n{color:var(--ink);background:none;-webkit-background-clip:initial;background-clip:initial;
-webkit-text-fill-color:initial;}
.hero .mini-stats .l{color:var(--ink-muted);}
/* lead form */
.lead-form{background:var(--bg-elevated);border-color:var(--border);box-shadow:var(--shadow);}
.lead-form h3{color:var(--ink);}
.lead-form p.fp{color:var(--ink-muted);}
.field{background:var(--surface);color:var(--ink);border-color:var(--border);}
.field::placeholder{color:rgba(255,255,255,.42);}
.field:focus{border-color:var(--accent);background:rgba(255,255,255,.08);
box-shadow:0 0 0 4px rgba(43,168,240,.18);}
.form-note{color:var(--ink-muted);}
/* page-hero (sub-pages) */
.page-hero{background:linear-gradient(135deg,var(--brand-purple-deep) 0%,var(--brand-purple) 100%);}
.page-hero h1{color:var(--ink);background:none;-webkit-background-clip:initial;background-clip:initial;
-webkit-text-fill-color:initial;}
.page-hero p{color:var(--ink-muted);}
.page-hero .crumbs{color:var(--ink-muted);}
.page-hero .crumbs a{color:var(--accent);}
/* cards: service, dest, feat, quick, office, info, test */
.svc-card,.dest-card,.feat,.quick-card,.office-card,.info-card,.test-card{
background:var(--bg-elevated);border-color:var(--border);color:var(--ink);}
.svc-card:hover{background:linear-gradient(135deg,var(--brand-purple),var(--brand-purple-deep));}
.svc-card .ic,.feat .ic,.quick-card .ic,.info-card .ic{background:var(--surface);}
.svc-card .ic svg,.feat .ic svg,.quick-card .ic svg,.info-card .ic svg{color:var(--accent);}
.svc-card:hover .ic{background:var(--accent);}
.svc-card:hover .ic svg{color:#FFFFFF;}
.svc-card h3,.feat h3,.quick-card h3,.info-card h4{color:var(--ink);}
.svc-card p,.feat p,.quick-card p,.info-card p{color:var(--ink-muted);}
.svc-card:hover h3{color:#FFFFFF;}
.svc-card:hover p{color:rgba(255,255,255,.78);}
/* destinations */
.dest-card .nm{color:var(--ink);}
.dest-card .nt{color:var(--ink-muted);}
.dest-card .go{color:var(--accent);}
.dest-card:hover{background:linear-gradient(135deg,var(--brand-purple),var(--brand-pink));}
.dest-card:hover .nm,.dest-card:hover .go{color:#FFFFFF;}
.dest-card:hover .nt{color:rgba(255,255,255,.85);}
/* test cards */
.test-card .tg{background:var(--surface);}
.test-card .tg span{color:var(--accent);}
.test-card:hover .tg{background:var(--accent);}
.test-card:hover .tg span{color:#FFFFFF;}
.test-card .tt{color:var(--ink);}
.test-card .tf{color:var(--ink-muted);}
.test-card .arr2{color:var(--ink-muted);}
.test-card:hover .arr2{color:var(--accent);}
/* office cards */
.office-card .region{color:var(--accent-2);}
.office-card h3{color:var(--ink);}
.office-card .branches span{background:var(--surface);color:var(--ink);}
/* aside */
.aside{background:var(--bg-elevated)!important;border-color:var(--border);box-shadow:var(--shadow);}
.aside h4{color:var(--ink);}
.aside .stat-row{border-bottom-color:var(--border);}
.aside .stat-row .k{color:var(--ink-muted);}
.aside .stat-row .v{color:var(--ink);}
/* prose */
.prose h2,.prose h3{color:var(--ink);}
.prose p{color:var(--ink-muted);}
.prose ul li{color:var(--ink-muted);}
.prose ul li::before{background-color:var(--accent);}
.prose p a,.prose li a{color:var(--accent);}
/* merge block */
.merge-card{background:var(--bg-elevated);border-color:var(--border);box-shadow:var(--shadow);}
.merge-card h2{color:var(--ink);}
.merge-card p{color:var(--ink-muted);}
.merge-image{box-shadow:var(--shadow);}
/* stats / promises */
.stats-grid{background:var(--border);}
.stat{background:var(--bg-elevated);}
.stat .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:200% 200%;animation:adv-grad-shift 5s ease infinite;}
.stat .l{color:var(--ink);}
.stat .s{color:var(--ink-muted);}
.promise{background:var(--surface);border-color:var(--border);}
.promise svg{color:var(--accent);}
.promise .t{color:var(--ink);}
.promise .d{color:var(--ink-muted);}
/* testimonials */
.tst{background:var(--surface)!important;border-color:var(--border);}
.tst .q{color:var(--accent);}
.tst p{color:var(--ink);}
.tst .av{background:var(--accent);color:#FFFFFF;}
.tst .nm{color:var(--ink);}
.tst .rt{color:var(--ink-muted);}
.tst .stars svg{color:var(--brand-yellow);fill:var(--brand-yellow);}
/* method / format */
.format{background:var(--bg-elevated);border-color:var(--border);}
.format.dark{background:var(--brand-purple-deep);}
.format svg{color:var(--accent);}
.format.dark svg{color:var(--accent-2);}
.format .l,.format.dark .l{color:var(--ink);}
.check-row span{color:var(--ink);}
.check-row .cb{background:var(--accent);}
.check-row .cb svg{color:#FFFFFF;}
/* partners */
.partners-head h2{color:var(--ink);}
.uni{background:var(--bg-elevated);color:var(--ink-muted);border-color:var(--border);}
.uni:hover{color:var(--ink);border-color:var(--accent);}
.featured .lbl{color:var(--ink-muted);}
.featured .row span{color:var(--ink-muted);}
.featured .row span:hover{color:var(--accent);}
/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--brand-purple),var(--brand-purple-deep)),var(--grad);
background-blend-mode:normal,overlay;}
.cta-band h3{color:var(--ink);}
.cta-band p{color:var(--ink-muted);}
/* footer */
.site-footer{background:var(--brand-purple-deep);color:var(--ink);}
.site-footer::before{background:radial-gradient(circle,rgba(43,168,240,.18),transparent 70%);}
.footer-brand .badge{background:var(--bg-elevated);}
.footer-brand .badge span{color:var(--accent);}
.footer-brand .nm{color:var(--ink);}
.footer-brand p{color:var(--ink-muted);}
.footer-col .ttl{color:var(--accent);}
.footer-col a{color:var(--ink-muted);}
.footer-col a:hover{color:var(--accent);}
.footer-contact{color:var(--ink-muted);}
.footer-contact svg{color:var(--accent);}
.footer-locations .ttl{color:var(--accent);}
.loc-col .region{color:var(--ink);}
.loc-col a{color:var(--ink-muted);}
.loc-col a:hover{color:var(--accent);}
.footer-bottom{color:var(--ink-muted);border-top-color:var(--border);}
.footer-bottom a{color:var(--ink-muted);}
.footer-bottom a:hover{color:var(--accent);}
.socials a{background:var(--surface);}
.socials a:hover{background:var(--accent);color:#FFFFFF;}
/* contact info card */
.info-card{background:var(--bg-elevated);border-color:var(--border);}
.info-card .ic{background:var(--surface);}
.info-card h4{color:var(--ink);}
.info-card p{color:var(--ink-muted);}
/* form success */
.form-success{background:rgba(109,180,45,.15);border-color:rgba(109,180,45,.4);color:var(--brand-green);}
/* exam badges keep their brand colours but on dark, lift them with white pill */
.exam-badge{background:#FFFFFF;}
.ex-sat,.ex-pte,.ex-duo{background:var(--brand-blue);}
.ex-sat{background:#0066cc;}
.ex-pte{background:#b00020;}
.ex-duo{background:#58cc02;}
/* gradient ring decoration utility (signature streak motif) */
.streak{position:absolute;height:2px;background:var(--grad);border-radius:2px;opacity:.6;
filter:blur(.3px);pointer-events:none;}
/* =========================================================================
THEME 2 ("Daylight") overrides — keep the canvas light & editorial
========================================================================= */
[data-theme="daylight"] .page-hero{
background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);
border-bottom:1px solid var(--border);
}
[data-theme="daylight"] .page-hero::before{opacity:.4;}
[data-theme="daylight"] .page-hero .glow{
background:radial-gradient(circle,rgba(43,168,240,.10),transparent 70%);
}
[data-theme="daylight"] .page-hero h1{color:var(--ink-deep);}
[data-theme="daylight"] .page-hero p{color:var(--ink-deep);font-weight:500;}
[data-theme="daylight"] .page-hero .crumbs{color:var(--ink-deep);}
[data-theme="daylight"] .page-hero .crumbs a{color:var(--accent);}
/* CTA band stays purple but tighten ink/muted contrast for Daylight too */
[data-theme="daylight"] .cta-band{
background:linear-gradient(120deg,var(--brand-purple),var(--brand-purple-deep));
}
[data-theme="daylight"] .cta-band h3{color:#FFFFFF;}
[data-theme="daylight"] .cta-band p{color:rgba(255,255,255,.78);}
/* Sections that used a dark "on-ink" style — keep those dark even in Daylight */
[data-theme="daylight"] .bg-ink{background:var(--brand-purple);}
[data-theme="daylight"] .bg-ink .section-head h2,
[data-theme="daylight"] .on-ink h2{color:#FFFFFF;}
[data-theme="daylight"] .bg-ink .section-head p,
[data-theme="daylight"] .on-ink p{color:rgba(255,255,255,.72);}
[data-theme="daylight"] .stat{background:var(--brand-purple);}
[data-theme="daylight"] .stat .l{color:#FFFFFF;}
[data-theme="daylight"] .stat .s{color:rgba(255,255,255,.7);}
[data-theme="daylight"] .promise{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}
[data-theme="daylight"] .promise .t{color:#FFFFFF;}
[data-theme="daylight"] .promise .d{color:rgba(255,255,255,.7);}
[data-theme="daylight"] .tst{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
[data-theme="daylight"] .tst p,
[data-theme="daylight"] .tst .nm{color:#FFFFFF;}
[data-theme="daylight"] .tst .rt{color:rgba(255,255,255,.65);}
/* Footer keeps dark purple in Daylight — text contrast already correct */
[data-theme="daylight"] .site-footer{background:var(--brand-purple-deep);color:#FFFFFF;}
[data-theme="daylight"] .footer-brand p,
[data-theme="daylight"] .footer-col a,
[data-theme="daylight"] .footer-contact,
[data-theme="daylight"] .loc-col a,
[data-theme="daylight"] .footer-bottom,
[data-theme="daylight"] .footer-bottom a{color:rgba(255,255,255,.68);}
[data-theme="daylight"] .footer-col .ttl,
[data-theme="daylight"] .footer-locations .ttl{color:var(--accent);}
[data-theme="daylight"] .loc-col .region{color:#FFFFFF;}
/* Header scroll: light blur instead of dark */
[data-theme="daylight"] .site-header.scrolled{
background:rgba(255,255,255,.85)!important;border-bottom-color:var(--border);}
[data-theme="daylight"] .nav-link{color:var(--ink-muted);}
[data-theme="daylight"] .nav-link:hover{color:var(--accent);}
[data-theme="daylight"] .phone-link{color:var(--ink);}
/* Mobile menu light */
[data-theme="daylight"] .mobile-menu{background:var(--bg-elevated);}
[data-theme="daylight"] .mobile-menu a{color:var(--ink);}
/* Dropdown light */
[data-theme="daylight"] .dropdown{background:var(--bg-elevated)!important;
border-color:var(--border)!important;
box-shadow:0 24px 48px rgba(28,0,48,.15)!important;}
[data-theme="daylight"] .dropdown a{color:var(--ink);}
[data-theme="daylight"] .dropdown a:hover{background:var(--surface);color:var(--accent);}
/* Cards light */
[data-theme="daylight"] .svc-card,
[data-theme="daylight"] .dest-card,
[data-theme="daylight"] .feat,
[data-theme="daylight"] .quick-card,
[data-theme="daylight"] .office-card,
[data-theme="daylight"] .info-card,
[data-theme="daylight"] .test-card,
[data-theme="daylight"] .lead-form,
[data-theme="daylight"] .aside,
[data-theme="daylight"] .merge-card{
background:var(--bg-elevated);border-color:var(--border);}
[data-theme="daylight"] .svc-card:hover{background:var(--brand-purple);}
[data-theme="daylight"] .svc-card:hover h3{color:#FFFFFF;}
[data-theme="daylight"] .svc-card:hover p{color:rgba(255,255,255,.78);}
[data-theme="daylight"] .dest-card:hover{
background:linear-gradient(135deg,var(--brand-purple),var(--brand-pink));}
[data-theme="daylight"] .dest-card:hover .nm,
[data-theme="daylight"] .dest-card:hover .go{color:#FFFFFF;}
[data-theme="daylight"] .dest-card:hover .nt{color:rgba(255,255,255,.85);}
/* Service / feat / quick / info icons */
[data-theme="daylight"] .svc-card .ic,
[data-theme="daylight"] .feat .ic,
[data-theme="daylight"] .quick-card .ic,
[data-theme="daylight"] .info-card .ic,
[data-theme="daylight"] .test-card .tg{background:var(--surface);}
/* Lead-form fields */
[data-theme="daylight"] .field{background:var(--surface);color:var(--ink);border-color:var(--border);}
[data-theme="daylight"] .field::placeholder{color:var(--ink-muted);}
[data-theme="daylight"] .field:focus{background:#FFFFFF;}
/* Hero glow tones for Daylight (subtler) */
[data-theme="daylight"] .hero{
background:radial-gradient(900px 500px at 90% -10%,rgba(43,168,240,.10),transparent 60%),
radial-gradient(800px 500px at -5% 110%,rgba(240,48,110,.08),transparent 60%),var(--bg);}
[data-theme="daylight"] .hero h1 em{
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
/* btn-dark stays purple in Daylight (good contrast on cream) */
[data-theme="daylight"] .btn-dark{background:var(--brand-purple);color:#FFFFFF;border:none;}
[data-theme="daylight"] .btn-dark:hover{background:var(--brand-purple-deep);}
/* Inside the mobile menu, the .mobile-menu a rule has higher specificity than .btn-dark,
so we need a more specific selector to force the button's white text on its purple bg. */
[data-theme="daylight"] .mobile-menu a.btn-dark{background:var(--brand-purple);color:#FFFFFF;border:none;}
[data-theme="daylight"] .mobile-menu a.btn-amber{color:var(--ink);}
/* btn-amber uses solid purple in Daylight per the doc (gradient reserved for one hero moment) */
[data-theme="daylight"] .btn-amber{
background:var(--brand-purple);color:#FFFFFF;
box-shadow:0 6px 18px rgba(46,0,72,.20);}
[data-theme="daylight"] .btn-amber:hover{
background:var(--brand-purple-deep);box-shadow:0 14px 32px rgba(46,0,72,.30);}
/* =========================================================================
Daylight contrast pass — every text element using bright accents on a
light bg gets darkened to meet WCAG AA. Bright accents stay for UI
(icons, focus rings, badges) where surface contrast carries them.
========================================================================= */
[data-theme="daylight"] .eyebrow{color:var(--accent-2-text);}
[data-theme="daylight"] .eyebrow::before{background:var(--accent-2-text);}
/* nav + header text */
[data-theme="daylight"] .nav-link:hover{color:var(--accent-text);}
[data-theme="daylight"] .phone-link svg{color:var(--accent-text);}
[data-theme="daylight"] .menu-toggle{color:var(--ink);}
/* dropdown */
[data-theme="daylight"] .dropdown a:hover{color:var(--accent-text);background:var(--surface);}
[data-theme="daylight"] .dropdown.grid a:hover .lbl{color:var(--accent-text);}
/* hero */
[data-theme="daylight"] .hero h1{color:var(--ink-deep);}
[data-theme="daylight"] .hero .lede{color:var(--ink-deep);font-weight:500;}
[data-theme="daylight"] .hero .mini-stats .n{color:var(--ink-deep);}
[data-theme="daylight"] .hero .mini-stats .l{color:var(--ink-deep);}
/* page-hero on sub-pages */
[data-theme="daylight"] .page-hero p{color:var(--ink-deep);font-weight:500;}
[data-theme="daylight"] .page-hero .crumbs{color:var(--ink-deep);}
[data-theme="daylight"] .page-hero .crumbs a{color:var(--accent-text);font-weight:600;}
/* section copy */
[data-theme="daylight"] .section-head p{color:var(--ink-muted);}
/* cards — body copy and accent text inside */
[data-theme="daylight"] .svc-card p,
[data-theme="daylight"] .feat p,
[data-theme="daylight"] .quick-card p,
[data-theme="daylight"] .info-card p,
[data-theme="daylight"] .merge-card p{color:var(--ink-muted);}
[data-theme="daylight"] .svc-card .ic svg,
[data-theme="daylight"] .feat .ic svg,
[data-theme="daylight"] .quick-card .ic svg,
[data-theme="daylight"] .info-card .ic svg{color:var(--accent-text);}
/* destinations */
[data-theme="daylight"] .dest-card .nt{color:var(--ink-muted);}
[data-theme="daylight"] .dest-card .go{color:var(--accent-text);font-weight:700;}
/* test cards */
[data-theme="daylight"] .test-card .tg span{color:var(--accent-text);}
[data-theme="daylight"] .test-card .tf{color:var(--ink-muted);}
[data-theme="daylight"] .test-card:hover .arr2{color:var(--accent-text);}
/* office cards */
[data-theme="daylight"] .office-card .region{color:var(--accent-2-text);}
[data-theme="daylight"] .office-card .branches span{color:var(--ink-soft);background:var(--surface);}
/* prose */
[data-theme="daylight"] .prose p,
[data-theme="daylight"] .prose ul li{color:var(--ink-soft);}
[data-theme="daylight"] .prose p a,
[data-theme="daylight"] .prose li a{color:var(--accent-text);}
/* aside */
[data-theme="daylight"] .aside .stat-row .k{color:var(--ink-muted);}
[data-theme="daylight"] .aside .stat-row .v{color:var(--ink);}
/* lead form */
[data-theme="daylight"] .lead-form p.fp{color:var(--ink-muted);}
[data-theme="daylight"] .form-note{color:var(--ink-muted);}
[data-theme="daylight"] .field{color:var(--ink);background:var(--surface);border-color:var(--border);}
[data-theme="daylight"] .field::placeholder{color:var(--ink-muted);}
/* contact info */
[data-theme="daylight"] .info-card .ic svg{color:var(--accent-text);}
/* check rows (methodology) */
[data-theme="daylight"] .check-row span{color:var(--ink);}
/* partners */
[data-theme="daylight"] .partners-head h2{color:var(--ink);}
[data-theme="daylight"] .uni{color:var(--ink-soft);background:var(--surface);border-color:var(--border);}
[data-theme="daylight"] .uni:hover{color:var(--ink);border-color:var(--accent-text);background:var(--bg-elevated);}
[data-theme="daylight"] .featured .lbl{color:var(--ink-muted);}
[data-theme="daylight"] .featured .row span{color:var(--ink-soft);}
[data-theme="daylight"] .featured .row span:hover{color:var(--accent-text);}
/* mobile menu */
[data-theme="daylight"] .mobile-menu a{color:var(--ink);border-bottom-color:var(--border);}
[data-theme="daylight"] .mobile-menu .grp{color:var(--accent-2-text);}
/* footer is on dark purple — bright accent is fine there, keep as is */
[data-theme="daylight"] .footer-col .ttl,
[data-theme="daylight"] .footer-locations .ttl{color:var(--brand-yellow);}
[data-theme="daylight"] .footer-col a:hover,
[data-theme="daylight"] .footer-bottom a:hover,
[data-theme="daylight"] .loc-col a:hover{color:var(--brand-yellow);}
[data-theme="daylight"] .socials a:hover{background:var(--brand-yellow);color:var(--ink-deep);}
/* dark accent sections (cta-band, .bg-ink, stat, promise, tst) keep
their bright accents — bg is dark so contrast is fine — but bump
muted text on those to .8 white instead of .65/.7 so it's clearer */
[data-theme="daylight"] .cta-band p,
[data-theme="daylight"] .stat .s,
[data-theme="daylight"] .promise .d,
[data-theme="daylight"] .tst .rt{color:rgba(255,255,255,.80);}
[data-theme="daylight"] .tst p{color:#FFFFFF;}
/* hero gradient italic stays vibrant — sufficient contrast at 60px */
/* destination card flag image (replaces emoji) */
.dest-flag{width:64px;height:48px;object-fit:cover;border-radius:6px;
box-shadow:0 2px 10px rgba(46,0,72,.18);display:block;}
.dest-card .fl{font-size:0;line-height:0;} /* contains ![]()
now, drop the emoji sizing */
.dest-card:hover .dest-flag{box-shadow:0 6px 18px rgba(46,0,72,.28);}
/* =========================================================================
Footer-on-dark fixes (any theme): footer stays dark purple even in
Daylight, so anything that resolves to a dark colour via tokens needs
to be explicitly white-on-dark inside .site-footer.
========================================================================= */
.site-footer .brand-name{color:#FFFFFF;} /* "mov" must be white on dark */
.site-footer .brand-name .grad{ /* "ersees" gradient — re-affirm */
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.site-footer .brand-icon{filter:drop-shadow(0 4px 14px rgba(43,168,240,.40));}
.site-footer .footer-brand .nm{color:#FFFFFF;}
/* Daylight footer socials — surface is light cream globally; force a dark
translucent surface inside the dark footer so the icons stay legible. */
[data-theme="daylight"] .socials a{background:rgba(255,255,255,.10);color:#FFFFFF;}
[data-theme="daylight"] .socials a:hover{background:var(--brand-yellow);color:var(--ink-deep);}
/* Daylight: footer contact + locations + bottom were tinted via tokens;
re-state at the .site-footer scope so they don't pick up dark --ink. */
[data-theme="daylight"] .site-footer{color:#FFFFFF;}
[data-theme="daylight"] .footer-brand p{color:rgba(255,255,255,.72);}
[data-theme="daylight"] .footer-col a,
[data-theme="daylight"] .loc-col a,
[data-theme="daylight"] .footer-bottom,
[data-theme="daylight"] .footer-bottom a,
[data-theme="daylight"] .footer-contact{color:rgba(255,255,255,.72);}
[data-theme="daylight"] .footer-locations{border-top-color:rgba(255,255,255,.12);}
[data-theme="daylight"] .footer-bottom{border-top-color:rgba(255,255,255,.12);}
/* country flag images (replaces emoji flags) */
.flag-mini{display:inline-block;width:22px;height:14px;object-fit:cover;border-radius:3px;
vertical-align:-2px;margin-right:6px;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.flag-hero{display:block;width:96px;height:64px;object-fit:cover;border-radius:10px;
box-shadow:0 12px 32px rgba(0,0,0,.30);margin:0 0 14px;}
.page-hero .flag{font-size:0;line-height:0;margin-bottom:14px;animation:adv-float 6s ease-in-out infinite;}
.aside .stat-row .v .flag-mini{margin-right:6px;}
.mobile-menu .sub .flag-mini{margin-right:8px;}
/* "More test programs" cards on each test page — mini cards with the same
exam logos used in the Test Prep dropdown */
.more-tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:12px;margin-top:8px;}
.more-test{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;padding:18px 12px;background:var(--bg-elevated);border:1px solid var(--border);
border-radius:14px;text-decoration:none;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s ease;}
.more-test:hover{transform:translateY(-3px);box-shadow:var(--shadow);
border-color:var(--accent);}
.more-test .logo-slot{display:flex;align-items:center;justify-content:center;
height:28px;width:100%;}
.more-test .exam-logo{max-width:60px;max-height:24px;width:auto!important;height:auto!important;
object-fit:contain;display:block;}
.more-test .lbl{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink);
line-height:1.2;}
[data-theme="daylight"] .more-test:hover{border-color:var(--accent-text);}
[data-theme="daylight"] .more-test:hover .lbl{color:var(--accent-text);}
/* =========================================================================
page-hero with contextual background photo
The per-page image (set via --hero-img inline on the section) sits
behind a strong cream overlay so headings/copy stay AA-readable, plus
brand-coloured radial blobs for visual richness.
========================================================================= */
.page-hero.has-bg{
position:relative;overflow:hidden;
background-image:
linear-gradient(100deg,rgba(255,251,244,.62) 0%,rgba(255,251,244,.45) 45%,rgba(255,251,244,.22) 75%,rgba(255,251,244,.12) 100%),
radial-gradient(900px 500px at 100% -10%,rgba(43,168,240,.12),transparent 55%),
radial-gradient(700px 400px at -5% 110%,rgba(240,48,110,.08),transparent 55%),
var(--hero-img,none);
background-size:auto,auto,auto,cover;
background-position:center,center,center,center;
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
}
[data-theme="daylight"] .page-hero.has-bg{
background-image:
linear-gradient(100deg,rgba(255,251,244,.62) 0%,rgba(255,251,244,.45) 45%,rgba(255,251,244,.22) 75%,rgba(255,251,244,.12) 100%),
radial-gradient(900px 500px at 100% -10%,rgba(43,168,240,.12),transparent 55%),
radial-gradient(700px 400px at -5% 110%,rgba(240,48,110,.08),transparent 55%),
var(--hero-img,none);
}
[data-theme="daylight"] .page-hero.has-bg h1,
[data-theme="daylight"] .page-hero.has-bg p,
[data-theme="daylight"] .page-hero.has-bg .crumbs{text-shadow:none;}
[data-theme="momentum"] .page-hero.has-bg{
background-image:
radial-gradient(900px 500px at 100% -10%,rgba(43,168,240,.20),transparent 55%),
radial-gradient(700px 400px at -5% 110%,rgba(240,48,110,.18),transparent 55%),
linear-gradient(180deg,rgba(28,0,48,.78) 0%,rgba(28,0,48,.88) 60%,rgba(28,0,48,.96) 100%),
var(--hero-img,none);
}
[data-theme="playground"] .page-hero.has-bg{
background-image:
radial-gradient(900px 500px at 100% -10%,rgba(240,48,110,.14),transparent 55%),
radial-gradient(700px 400px at -5% 110%,rgba(43,168,240,.10),transparent 55%),
linear-gradient(180deg,rgba(255,248,238,.86) 0%,rgba(255,248,238,.94) 60%,rgba(255,248,238,.98) 100%),
var(--hero-img,none);
}
/* thin brand-gradient strip at the very top for polish */
.page-hero.has-bg::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:var(--grad);pointer-events:none;z-index:2;}
.page-hero.has-bg .inner,
.page-hero.has-bg .container{position:relative;z-index:1;}
/* homepage hero with contextual background photo */
.hero.has-bg{position:relative;overflow:hidden;
background-image:
linear-gradient(100deg,rgba(255,251,244,.62) 0%,rgba(255,251,244,.45) 45%,rgba(255,251,244,.22) 75%,rgba(255,251,244,.12) 100%),
radial-gradient(900px 500px at 90% -10%,rgba(43,168,240,.10),transparent 60%),
radial-gradient(800px 500px at -5% 110%,rgba(240,48,110,.06),transparent 60%),
var(--hero-img,none);
background-size:auto,auto,auto,cover;
background-position:center,center,center,center;
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;}
.hero.has-bg h1,
.hero.has-bg .hero-sub,
.hero.has-bg .lede{text-shadow:none;}
.hero h1{color:var(--ink-deep);}
.hero .lede{color:var(--ink-deep);font-weight:500;}
.hero .mini-stats .n{color:var(--ink-deep);}
[data-theme="momentum"] .hero.has-bg{
background-image:
radial-gradient(900px 500px at 90% -10%,rgba(43,168,240,.20),transparent 60%),
radial-gradient(800px 500px at -5% 110%,rgba(240,48,110,.18),transparent 60%),
linear-gradient(180deg,rgba(28,0,48,.82) 0%,rgba(28,0,48,.90) 60%,rgba(28,0,48,.96) 100%),
var(--hero-img,none);}
[data-theme="playground"] .hero.has-bg{
background-image:
radial-gradient(900px 500px at 90% -10%,rgba(240,48,110,.14),transparent 60%),
radial-gradient(800px 500px at -5% 110%,rgba(43,168,240,.10),transparent 60%),
linear-gradient(180deg,rgba(255,248,238,.86) 0%,rgba(255,248,238,.92) 60%,rgba(255,248,238,.98) 100%),
var(--hero-img,none);}
.hero.has-bg > .container{position:relative;z-index:1;}
.hero.has-bg .blob{z-index:0;}
/* =========================================================================
MOBILE POLISH — comprehensive responsive pass
========================================================================= */
/* Universal safety: prevent any element from causing horizontal scroll.
Uses overflow-x:clip (not :hidden) so position:sticky on body children
still works. :clip prevents horizontal overflow without establishing a
scroll containing block. */
html,body{max-width:100%;overflow-x:clip;}
img,svg,video{max-width:100%;height:auto;}
/* Long URLs / words break instead of forcing horizontal scroll */
.prose p,.prose li,.merge-card p,.tst p,.section-head p{overflow-wrap:break-word;word-break:break-word;}
/* iOS: form fields with font < 16px trigger auto-zoom on focus.
Bump to 16px on mobile so the page doesn't jump. */
@media (max-width:760px){
.field,select.field{font-size:16px;}
}
/* Touch-friendly sizing on mobile (44x44 minimum hit area) */
@media (max-width:760px){
.btn{padding:14px 22px;min-height:44px;}
.nav-link,.mobile-menu a,.mobile-menu .sub,.dropdown a,
.footer-col a,.loc-col a,.footer-bottom a{min-height:44px;}
.mobile-menu a,.mobile-menu .sub{display:flex;align-items:center;padding:12px 0;}
.menu-toggle{padding:10px;} /* easier to tap */
}
/* Tighter sub-page padding on mobile */
@media (max-width:760px){
.section{padding:48px 0;}
.page-hero .inner,
.page-hero.has-bg .inner{padding:48px 0 40px;}
.hero-grid{padding:32px 0 48px;gap:32px;}
.lead-form{padding:24px 22px;}
.cta-band{padding:32px 24px;gap:20px;}
.merge-block{margin-bottom:40px;}
.footer-inner{padding:48px 0 28px;}
.footer-top{gap:32px;}
}
/* Typography scale-down for small phones */
@media (max-width:560px){
body{font-size:15.5px;}
.hero h1{font-size:clamp(30px,8vw,40px);}
.page-hero h1{font-size:clamp(28px,7vw,38px);}
.section-head h2{font-size:clamp(24px,6.5vw,32px);}
.merge-card h2{font-size:clamp(22px,6vw,28px);}
.merge-card{padding:24px 20px;}
.hero .mini-stats{gap:20px;}
.hero .mini-stats .n{font-size:26px;}
.stat .n{font-size:38px;}
.stat{padding:24px 20px;}
.section{padding:40px 0;}
.brand-name{font-size:19px;}
.brand-icon{width:36px;height:36px;}
.footer-brand .nm,.footer-brand .brand-name{font-size:20px;}
.info-card,.feat,.quick-card,.svc-card,.dest-card,
.office-card,.test-card,.tst{padding:22px 20px;}
}
/* Very small phones (320–380px) — give critical components more breathing room */
@media (max-width:380px){
.hero h1{font-size:28px;}
.page-hero h1{font-size:26px;}
.section-head h2{font-size:22px;}
.btn{padding:12px 18px;font-size:14px;}
.cta-row{flex-direction:column;align-items:stretch;}
.cta-row .btn{width:100%;justify-content:center;}
.hero .mini-stats{justify-content:space-between;gap:14px;}
.hero .mini-stats > div{flex:1 1 calc(50% - 14px);}
.lead-form{padding:20px 18px;border-radius:18px;}
.lead-form h3{font-size:21px;}
.merge-card{padding:20px 16px;border-radius:18px;}
.footer-bottom{flex-direction:column;align-items:flex-start;}
}
/* Mobile menu: scrollable if too tall, smooth animation */
@media (max-width:980px){
.mobile-menu{max-height:calc(100vh - 76px);overflow-y:auto;
-webkit-overflow-scrolling:touch;padding-bottom:max(24px,env(safe-area-inset-bottom));}
.mobile-menu.open{animation:adv-pop-in .22s ease-out;}
}
/* Disable hover-only / desktop effects on touch (perf + correctness) */
@media (hover:none){
[data-tilt]:hover{transform:none!important;}
[data-magnetic]{transform:none!important;}
.media-frame:hover img,.merge-image:hover img{transform:none;}
.svc-card:hover,.dest-card:hover{transform:none;}
}
/* On small screens, kill the heavy parallax / drifting blobs (perf) */
@media (max-width:760px){
.hero .blob,.page-hero .glow,.page-hero::after{animation:none!important;}
.hero.has-bg::before,.page-hero.has-bg::before{display:none;}
}
/* Section heads centre nicely on mobile */
@media (max-width:560px){
.section-head{margin-bottom:32px;}
.section-head p{font-size:15.5px;}
}
/* Sticky aside drops to inline on mobile; ensure spacing */
@media (max-width:980px){
.aside{margin-top:24px;}
}
/* Footer locations + bottom: better wrap behaviour */
@media (max-width:760px){
.loc-grid{grid-template-columns:1fr 1fr;}
.footer-bottom .links{flex-wrap:wrap;}
}
@media (max-width:480px){
.loc-grid{grid-template-columns:1fr;}
}
/* CTA band: stack on mobile */
@media (max-width:760px){
.cta-band{flex-direction:column;align-items:flex-start;}
.cta-band .txt{max-width:100%;}
.cta-band .btn{width:100%;justify-content:center;}
}
/* WhatsApp button: pull in a little so it doesn't crowd the WhatsApp logo */
@media (max-width:560px){
.wa{bottom:18px;right:18px;width:52px;height:52px;}
.wa svg{width:24px;height:24px;}
}
/* Country page hero flag scale down */
@media (max-width:560px){
.flag-hero{width:72px;height:48px;}
.page-hero .crumbs{font-size:12.5px;}
}
/* Brand layout safety: keep wordmark + icon on one line, no wrap */
.brand{white-space:nowrap;}
.brand-name{white-space:nowrap;}
/* Dropdown grid never opens on touch (covered by hover) — explicitly suppress
absolutely-positioned grids on small screens */
@media (max-width:980px){
.dropdown.grid{display:none!important;}
}
/* mobile menu: exam logo before the test name */
.mobile-menu .sub .exam-logo-mini{
display:inline-block;width:auto;height:14px;max-width:36px;object-fit:contain;
vertical-align:-2px;margin-right:10px;}
/* iOS notch / safe-area aware container padding
On notched iPhones in landscape, env(safe-area-inset-left/right) is
non-zero — without max() the container's 24px gets eaten by the
notch and content sits flush against the screen edge.
On every other device env() returns 0, so the max() falls back to
24px exactly as before. */
.container{
padding-left:max(24px, env(safe-area-inset-left));
padding-right:max(24px, env(safe-area-inset-right));
}
/* Allow content to extend below the iOS bottom safe area but keep
the footer's last line padded clear of the home indicator. */
.site-footer{padding-bottom:env(safe-area-inset-bottom);}
/* test-card logo image inside the .tg tile (test-prep hub grid) */
.test-card .tg .exam-logo{max-width:44px;max-height:24px;width:auto!important;height:auto!important;
object-fit:contain;display:block;transition:transform .25s var(--ease);}
.test-card:hover .tg .exam-logo{transform:scale(1.06);}
.test-card .tg{padding:8px;} /* a little breathing room around the logo */
/* =========================================================================
Testimonial readability fix on the dark purple section
========================================================================= */
/* Card itself: lift opacity so it visibly separates from the purple bg */
.tst,
[data-theme="daylight"] .tst{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:0 12px 28px rgba(0,0,0,.18);
}
/* Avatar letter — must read clearly inside the round badge.
--amber + --ink both resolve to dark colours under Daylight, so the
letter becomes dark-on-dark. Force a vivid accent fill with white. */
.tst .av,
[data-theme="daylight"] .tst .av{
background:var(--accent)!important;
color:#FFFFFF!important;
box-shadow:0 6px 16px rgba(43,168,240,.40);
}
[data-theme="momentum"] .tst .av{background:var(--accent)!important;color:#FFFFFF!important;}
/* Quote glyph + text stay crisp white */
.tst .q,
[data-theme="daylight"] .tst .q{color:var(--brand-yellow);}
.tst p,
[data-theme="daylight"] .tst p{color:#FFFFFF;}
.tst .nm,
[data-theme="daylight"] .tst .nm{color:#FFFFFF;}
.tst .rt,
[data-theme="daylight"] .tst .rt{color:rgba(255,255,255,.78);}
/* Stars use brand yellow on dark — already in place but re-affirm */
.tst .stars svg,
[data-theme="daylight"] .tst .stars svg{color:var(--brand-yellow);fill:var(--brand-yellow);}
/* =========================================================================
Mobile menu: collapsible groups (Test Prep / Study Abroad / Immigration)
========================================================================= */
.mobile-menu details.m-group{border-bottom:1px solid var(--border);}
.mobile-menu details.m-group > summary{
list-style:none;cursor:pointer;user-select:none;
display:flex;align-items:center;justify-content:space-between;
padding:14px 0;
font-family:var(--font-body);font-weight:800;font-size:12px;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2-text);
min-height:44px;
}
.mobile-menu details.m-group > summary::-webkit-details-marker{display:none;}
.mobile-menu details.m-group > summary::after{
content:"";width:14px;height:14px;flex-shrink:0;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:contain;
transition:transform .25s ease;
}
.mobile-menu details.m-group[open] > summary::after{transform:rotate(180deg);}
.mobile-menu details.m-group > .sub{
display:flex;align-items:center;
padding:12px 0 12px 14px;font-weight:500;font-size:14.5px;
border-bottom:1px solid var(--border);
}
.mobile-menu details.m-group > .sub:last-of-type{border-bottom:none;padding-bottom:16px;}
.mobile-menu details.m-group[open]{padding-bottom:4px;}
/* gentle slide-in for the disclosed list */
.mobile-menu details.m-group[open] > .sub{animation:adv-pop-in .18s ease-out;}
/* Momentum: chevron should be white on dark canvas */
[data-theme="momentum"] .mobile-menu details.m-group > summary::after{
background-image:url("data:image/svg+xml;utf8,");
}
/* =========================================================================
Partners slider (homepage: 350+ partnered universities)
========================================================================= */
.partners-slider{position:relative;overflow:hidden;margin-top:36px;padding:8px 0;}
.partners-track{display:flex;transition:transform .6s var(--ease);}
.partners-slide{flex:0 0 100%;min-width:100%;padding:8px;}
.partners-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:center;
justify-items:center;}
.partner-logo{display:block;max-width:100%;max-height:54px;width:auto;height:auto;
object-fit:contain;filter:grayscale(1);opacity:.75;
transition:filter .25s ease, opacity .25s ease, transform .25s var(--ease);}
.partner-logo:hover{filter:none;opacity:1;transform:translateY(-2px);}
.partners-dots{display:flex;justify-content:center;gap:8px;margin-top:28px;}
.partners-dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--border);
cursor:pointer;padding:0;transition:all .25s ease;}
.partners-dot.is-active{background:var(--accent);width:26px;border-radius:4px;}
.partners-dot:hover{background:var(--accent-text);}
@media (max-width:960px){.partners-grid{grid-template-columns:repeat(4,1fr);gap:20px;}}
@media (max-width:760px){.partners-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}
@media (max-width:480px){.partners-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
.partner-logo{max-height:44px;}}
/* Daylight: slightly darker dots so they read on the cream bg */
[data-theme="daylight"] .partners-dot{background:rgba(46,0,72,.18);}
[data-theme="daylight"] .partners-dot.is-active{background:var(--brand-purple);}
/* =========================================================================
Featured media marquee (As featured in leading media)
========================================================================= */
.media-marquee{position:relative;overflow:hidden;margin-top:20px;
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.media-track{display:flex;align-items:center;gap:64px;width:max-content;
animation:adv-marquee 28s linear infinite;}
.media-track:hover{animation-play-state:paused;}
.media-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
min-width:220px;height:88px;}
.media-logo{max-height:64px;max-width:220px;width:auto;height:auto;object-fit:contain;
filter:grayscale(1);opacity:.75;transition:filter .25s ease, opacity .25s ease;}
.media-logo:hover{filter:none;opacity:1;}
@media (max-width:760px){
.media-track{gap:48px;animation-duration:24s;}
.media-item{min-width:170px;height:68px;}
.media-logo{max-height:48px;max-width:170px;}
}
/* =========================================================================
Notifications strip (JSON-driven, injected at top of body)
========================================================================= */
.notification-strip{background:var(--brand-purple);color:#fff;
border-bottom:1px solid rgba(255,255,255,.10);}
.notification-strip.notification-success{background:var(--brand-green);}
.notification-strip.notification-warning{background:var(--brand-orange);color:#1C0030;}
.notification-inner{max-width:var(--maxw);margin:0 auto;padding:12px 24px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.notification-label{background:var(--brand-yellow);color:var(--brand-purple);
padding:3px 10px;border-radius:999px;font-family:var(--font-body);font-weight:800;
font-size:11px;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;}
.notification-message{flex:1;min-width:0;font-family:var(--font-body);font-weight:600;
font-size:14.5px;line-height:1.4;}
.notification-link{color:var(--brand-yellow);text-decoration:none;font-weight:700;
font-size:14px;white-space:nowrap;}
.notification-link:hover{text-decoration:underline;}
.notification-close{background:none;border:0;color:#fff;font-size:22px;line-height:1;
cursor:pointer;padding:4px 8px;opacity:.7;border-radius:6px;}
.notification-close:hover{opacity:1;background:rgba(255,255,255,.10);}
@media (max-width:560px){
/* Two-row layout: [label .... ×] then [message] then [link]
Close lives in the top row alongside the label so it can't
ever sit beside the message and clip into the text. */
.notification-inner{padding:10px 16px 12px;gap:8px 12px;align-items:center;}
.notification-label{order:1;flex-shrink:0;}
.notification-close{order:2;margin-left:auto;flex-shrink:0;
width:32px;height:32px;display:grid;place-items:center;padding:0;font-size:20px;}
.notification-message{order:3;flex-basis:100%;font-size:13.5px;line-height:1.4;padding-right:0;}
.notification-link{order:4;flex-basis:100%;}
}
/* =========================================================================
Upcoming Events grid (JSON-driven, homepage)
========================================================================= */
.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.event-card{display:flex;gap:18px;background:var(--bg-elevated);border:1px solid var(--border);
border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);
transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.event-card:hover{transform:translateY(-4px);
box-shadow:0 24px 50px rgba(46,0,72,.18);}
.event-date{flex-shrink:0;width:64px;text-align:center;padding:10px 0;border-radius:14px;
background:var(--brand-purple);color:#fff;align-self:flex-start;
box-shadow:0 8px 18px rgba(46,0,72,.22);}
.event-month{font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;opacity:.9;}
.event-day{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1;margin-top:4px;}
.event-body{flex:1;min-width:0;}
.event-body h3{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;
margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;}
.event-meta{display:flex;gap:14px;font-family:var(--font-body);font-size:13px;
color:var(--ink-muted);margin-bottom:10px;flex-wrap:wrap;}
.event-meta span{position:relative;}
.event-meta span:not(:last-child)::after{content:"·";margin-left:14px;color:var(--ink-muted);}
.event-card p{color:var(--ink-muted);font-size:14.5px;line-height:1.55;margin:0 0 14px;}
.event-cta{color:var(--accent-text);font-weight:700;text-decoration:none;font-size:14px;
display:inline-flex;align-items:center;gap:4px;}
.event-cta:hover{color:var(--brand-purple);}
@media (max-width:560px){
.event-card{padding:20px;gap:14px;}
.event-date{width:56px;}
.event-day{font-size:24px;}
}
/* =========================================================================
Pinned upcoming-events ticker (site-wide, top of body, above header)
Distinct from .notification-strip — uses the brand gradient as an
attention-grabbing top bar with a date pill + auto-rotating title.
========================================================================= */
.events-pin{position:sticky;top:0;z-index:60;background:var(--brand-purple);
color:#fff;border-bottom:1px solid rgba(255,255,255,.10);
box-shadow:0 2px 12px rgba(0,0,0,.10);}
.events-pin::before{content:"";display:block;height:3px;background:var(--grad);}
.events-pin-inner{max-width:var(--maxw);margin:0 auto;padding:10px 24px;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pin-label{flex-shrink:0;background:var(--brand-yellow);color:var(--brand-purple);
padding:4px 10px;border-radius:999px;font-family:var(--font-body);font-weight:800;
font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.pin-track{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
animation:adv-pop-in .35s var(--ease);}
.pin-date{font-family:var(--font-body);font-weight:800;font-size:13px;
color:var(--brand-yellow);letter-spacing:.02em;text-transform:uppercase;
background:rgba(255,255,255,.10);padding:4px 10px;border-radius:6px;
border:1px solid rgba(245,180,0,.40);white-space:nowrap;}
.pin-sep{color:rgba(255,255,255,.35);font-weight:700;}
.pin-title{font-family:var(--font-display);font-weight:700;font-size:14.5px;
color:#fff;line-height:1.3;letter-spacing:-.005em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
.pin-cta{flex-shrink:0;background:#fff;color:var(--brand-purple);
padding:6px 14px;border-radius:999px;font-family:var(--font-body);font-weight:800;
font-size:12.5px;text-decoration:none;letter-spacing:.02em;white-space:nowrap;
transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.pin-cta:hover{transform:translateY(-1px);
box-shadow:0 6px 16px rgba(255,255,255,.18);}
.pin-dots{display:flex;gap:6px;flex-shrink:0;}
.pin-dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:rgba(255,255,255,.30);transition:all .25s ease;}
.pin-dot.is-active{background:var(--brand-yellow);width:22px;border-radius:3px;}
.pin-dot:hover{background:rgba(255,255,255,.60);}
.pin-close{flex-shrink:0;background:none;border:0;color:#fff;font-size:20px;
line-height:1;cursor:pointer;padding:4px 8px;opacity:.7;border-radius:6px;}
.pin-close:hover{opacity:1;background:rgba(255,255,255,.10);}
/* Theme tint refresh for the other two themes */
[data-theme="momentum"] .events-pin{background:#150024;}
[data-theme="playground"] .events-pin{background:var(--brand-pink);}
[data-theme="playground"] .pin-label{background:var(--brand-yellow);color:var(--brand-purple);}
[data-theme="playground"] .pin-cta{color:var(--brand-pink);}
/* Mobile re-layout
Two-row layout:
Row 1: [LABEL] [• ─ • •] ......................... [×]
Row 2: [Date · Title · CTA wraps as needed ]
Dots stay on mobile so users discover that there are more events;
swipe is just an additional gesture. */
@media (max-width:760px){
.events-pin-inner{padding:10px 16px 12px;gap:8px 10px;align-items:center;}
.pin-label{order:1;flex-shrink:0;}
.pin-dots{order:2;flex-shrink:0;margin-left:2px;}
.pin-close{order:3;margin-left:auto;flex-shrink:0;position:static;top:auto;right:auto;
width:32px;height:32px;display:grid;place-items:center;padding:0;font-size:20px;}
.pin-track{order:4;flex-basis:100%;gap:8px;}
.pin-title{white-space:normal;font-size:13.5px;line-height:1.35;}
.pin-date{font-size:12px;padding:3px 8px;}
.pin-cta{padding:5px 12px;font-size:12.5px;}
/* Slightly smaller dots on mobile so 4 of them comfortably fit */
.pin-dot{width:6px;height:6px;}
.pin-dot.is-active{width:18px;}
}
/* Pinned ticker: hint that it's clickable / swipeable */
.events-pin{user-select:none;-webkit-user-select:none;}
.events-pin-inner{touch-action:pan-y;}
.events-pin .pin-title{pointer-events:none;} /* let clicks fall through to the bar */
/* =========================================================================
Sticky topbar stack — wraps NEW notification + UPCOMING events ticker +
site header so all three pin together as one block while scrolling.
========================================================================= */
.topbar-stack{position:sticky;top:0;z-index:60;background:var(--bg);}
/* Children no longer need their own sticky; the wrapper handles it. */
.topbar-stack > .notification-strip,
.topbar-stack > .events-pin,
.topbar-stack > .site-header{position:relative;top:auto;z-index:auto;}
/* Header's own scrolled-state backdrop blur isn't needed inside the
stack — the stack background covers it — but keep the existing
.scrolled rules in case the class is added by app.js. */