/* =====================================================
   THREADS EDUCATION & MIGRATION
   Global Stylesheet v4 — Genix-inspired redesign
   Brand: Navy #374874 · Blue #1570e4 · White · Teal #299ba5 · Yellow #fff000
   Font: Poppins
===================================================== */

/* ── RESET & BASE ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Poppins',sans-serif;color:#26304a;background:#fff;
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit}

/* ── VARIABLES ────────────────────────────────────── */
:root{
  --navy:#374874;--navy-dark:#2b3a5f;--navy-deep:#1f2b47;
  --blue:#1570e4;--blue-dark:#0e57bd;--blue-soft:#eaf2fe;
  --teal:#299ba5;--teal-dark:#1e7982;--teal-soft:#e6f5f6;
  --yellow:#fff000;--yellow-dark:#ffd400;
  --ink:#26304a;--muted:#5f6b85;--line:#e6eaf3;
  --bg:#f6f8fc;--bg2:#eef3fb;--white:#fff;
  --shadow-sm:0 2px 10px rgba(31,43,71,.06);
  --shadow:0 10px 34px rgba(31,43,71,.10);
  --shadow-lg:0 24px 60px rgba(31,43,71,.16);
  --r-sm:10px;--r:16px;--r-lg:22px;--r-xl:28px;
  --t:.25s cubic-bezier(.4,0,.2,1);--bounce:.45s cubic-bezier(.34,1.56,.64,1);
  --maxw:1240px;
}

/* ── TYPOGRAPHY ───────────────────────────────────── */
h1,h2,h3,h4,h5{font-weight:700;line-height:1.18;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800}
h3{font-size:clamp(1.2rem,2.4vw,1.55rem)}
h4{font-size:1.1rem}
p{color:var(--muted);line-height:1.85;margin-bottom:1rem}
p:last-child{margin-bottom:0}
strong{color:var(--navy);font-weight:600}
.text-blue{color:var(--blue)!important}.text-teal{color:var(--teal)!important}
.text-yellow{color:var(--yellow)!important}.text-white{color:#fff!important}
.text-center{text-align:center}

/* ── LAYOUT ───────────────────────────────────────── */
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.section{padding:92px 0}
.section-sm{padding:64px 0}
.bg-soft{background:var(--bg)}
.bg-soft2{background:var(--bg2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue);border-radius:2px}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:var(--yellow)}
.eyebrow.on-dark::before{background:var(--yellow)}

.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.section-head p{font-size:1.05rem;margin-top:14px}
.section-head.left{margin-left:0;text-align:left}

/* ── BUTTONS ──────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:50px;font-size:.94rem;font-weight:600;
  cursor:pointer;border:2px solid transparent;transition:all var(--t);
  white-space:nowrap;line-height:1;letter-spacing:.2px;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 20px rgba(21,112,228,.28)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,112,228,.4)}
.btn-yellow{background:var(--yellow);color:var(--navy);font-weight:700;box-shadow:0 6px 20px rgba(255,212,0,.35)}
.btn-yellow:hover{background:var(--yellow-dark);transform:translateY(-3px);box-shadow:0 12px 32px rgba(255,212,0,.5)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-dark);transform:translateY(-3px);box-shadow:var(--shadow)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 20px rgba(41,155,165,.28)}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-3px)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)}
.btn-ghost-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-white:hover{background:#fff;color:var(--blue);transform:translateY(-3px)}
.btn-lg{padding:17px 40px;font-size:1.02rem}
.btn-sm{padding:10px 22px;font-size:.85rem}

/* ── PILL / BADGE ─────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;
  font-size:.72rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.pill-blue{background:var(--blue-soft);color:var(--blue)}
.pill-teal{background:var(--teal-soft);color:var(--teal-dark)}
.pill-navy{background:rgba(55,72,116,.1);color:var(--navy)}
.pill-yellow{background:rgba(255,212,0,.18);color:#8a6d00}

/* ── TOP UTILITY BAR ──────────────────────────────── */
.topbar{background:var(--navy-deep);color:rgba(255,255,255,.82);font-size:.8rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:42px}
.topbar-left{display:flex;gap:26px;flex-wrap:wrap}
.topbar-left a{display:inline-flex;align-items:center;gap:7px;transition:color var(--t)}
.topbar-left a:hover{color:var(--yellow)}
.topbar-left svg{width:14px;height:14px;stroke:var(--teal);flex-shrink:0}
.topbar-right{display:flex;align-items:center;gap:16px}
.topbar-social{display:flex;gap:10px}
.topbar-social a{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.topbar-social a:hover{background:var(--blue);transform:translateY(-2px)}
.topbar-social svg{width:13px;height:13px;stroke:#fff;fill:none}

/* ── NAVBAR ───────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.navbar.scrolled{box-shadow:0 6px 30px rgba(31,43,71,.1)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
/* The horizontal lockup is wider than the old mark (≈4.9:1), so the
   height is capped and trimmed at narrower desktop widths to stop it
   crowding the nav links. */
.logo img{height:44px;width:auto;max-width:230px}
@media(max-width:1100px){.logo img{height:38px}}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>a,.nav-dropdown>a{
  display:flex;align-items:center;gap:5px;padding:9px 15px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;color:var(--navy);transition:all var(--t);white-space:nowrap;position:relative;
}
.nav-links>a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav-links>a:hover,.nav-links>a.active{color:var(--blue)}
.nav-links>a:hover::after,.nav-links>a.active::after{transform:scaleX(1)}
.nav-dropdown{position:relative}
.nav-dropdown>a::before{content:"▾";font-size:.6rem;opacity:.6;order:2;transition:transform var(--t)}
.nav-dropdown:hover>a{color:var(--blue)}
.nav-dropdown:hover>a::before{transform:rotate(180deg)}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:262px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--t);z-index:200;
}
.nav-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:.87rem;font-weight:500;color:var(--navy);border-radius:var(--r-sm);transition:all var(--t)}
.dropdown a:hover{background:var(--blue-soft);color:var(--blue);padding-left:19px}
.dropdown a svg{width:16px;height:16px;stroke:var(--teal);flex-shrink:0}
.nav-cta{margin-left:8px}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer}
.hamburger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:all var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;inset:0;top:0;background:#fff;z-index:1200;padding:24px;overflow-y:auto}
.mobile-menu.open{display:block;animation:fadeIn .3s ease}
.mobile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mobile-head img{height:42px}
.mobile-close{background:none;border:none;font-size:2rem;color:var(--navy);cursor:pointer;line-height:1}
.mobile-menu a{display:block;padding:14px 4px;font-size:1.05rem;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line)}
.mobile-menu .m-sub{font-size:.9rem;font-weight:500;color:var(--muted);padding-left:18px}
.mobile-menu .btn{margin-top:22px;width:100%}

/* ── HERO ─────────────────────────────────────────── */
.hero{position:relative;background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 48%,#1a3a75 100%);color:#fff;overflow:hidden;padding:90px 0 120px}
.hero::before{content:"";position:absolute;top:-160px;right:-120px;width:640px;height:640px;background:radial-gradient(circle at 60% 40%,rgba(21,112,228,.5),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-140px;left:-100px;width:520px;height:520px;background:radial-gradient(circle,rgba(41,155,165,.35),transparent 60%);pointer-events:none}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:8px 20px;border-radius:50px;font-size:.76rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#ffe24d;background:rgba(255,240,0,.1);border:1px solid rgba(255,240,0,.5)}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 .hl{color:var(--yellow);position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:10px;background:rgba(255,240,0,.25);z-index:-1;border-radius:3px}
.hero-lead{color:rgba(255,255,255,.82);font-size:1.12rem;font-weight:500;margin-bottom:14px}
.hero p{color:rgba(255,255,255,.72);font-size:1.02rem;margin-bottom:34px;max-width:560px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap}
.hero-trust .t{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.78)}
.hero-trust svg{width:18px;height:18px;stroke:var(--yellow);flex-shrink:0}

/* Hero visual */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.hero-ring{position:absolute;border:1.5px solid rgba(255,255,255,.14);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.hero-ring.r1{width:340px;height:340px;animation:spin 26s linear infinite}
.hero-ring.r2{width:460px;height:460px;animation:spin 40s linear infinite reverse}
.hero-book{position:relative;z-index:2;width:240px;filter:drop-shadow(0 24px 50px rgba(0,0,0,.35)) brightness(0) invert(1)}
.hero-float{position:absolute;z-index:3;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:13px 17px;display:flex;align-items:center;gap:11px;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.hero-float svg{width:26px;height:26px;stroke:var(--yellow);flex-shrink:0}
.hero-float b{color:#fff;font-size:1.2rem;display:block;line-height:1}
.hero-float span{color:rgba(255,255,255,.7);font-size:.72rem}
.hero-float.f1{top:8%;left:-4%;animation:floaty 5s ease-in-out infinite}
.hero-float.f2{bottom:16%;right:-6%;animation:floaty 6s ease-in-out infinite .8s}
.hero-float.f3{bottom:2%;left:6%;animation:floaty 5.5s ease-in-out infinite .4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:2}
.hero-wave svg{width:100%;display:block}

/* ── STAT STRIP ───────────────────────────────────── */
.stat-strip{position:relative;z-index:5;margin-top:-58px}
.stat-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;max-width:1040px}
.stat-cell{padding:32px 22px;text-align:center;border-right:1px solid var(--line)}
.stat-cell:last-child{border-right:none}
.stat-num{font-size:2.5rem;font-weight:800;color:var(--blue);line-height:1;display:block}
.stat-cell:nth-child(2) .stat-num{color:var(--teal)}
.stat-cell:nth-child(3) .stat-num{color:var(--navy)}
.stat-cell:nth-child(4) .stat-num{color:var(--blue)}
.stat-label{font-size:.85rem;color:var(--muted);font-weight:500;margin-top:6px}

/* ── DESTINATION CARDS ────────────────────────────── */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.dest-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:270px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);transition:all var(--bounce);isolation:isolate}
.dest-card::before{content:"";position:absolute;inset:0;z-index:-2}
.dest-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,rgba(20,28,50,.86));z-index:-1}
.dest-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.dest-au::before{background:linear-gradient(140deg,#0b3d91,#1570e4)}
.dest-nz::before{background:linear-gradient(140deg,#1e7982,#299ba5)}
.dest-uk::before{background:linear-gradient(140deg,#2b3a5f,#374874)}
.dest-us::before{background:linear-gradient(140deg,#0e57bd,#3a6fd8)}
.dest-ca::before{background:linear-gradient(140deg,#8a1c2b,#c0392b)}
.dest-inner{padding:24px;position:relative;z-index:1;width:100%}
.dest-flag{font-size:2rem;position:absolute;top:20px;right:22px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}
.dest-inner h3{color:#fff;margin-bottom:4px}
.dest-inner p{color:rgba(255,255,255,.85);font-size:.83rem;margin:0}
.dest-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.82rem;font-weight:700;color:var(--yellow);transition:gap var(--t)}
.dest-card:hover .dest-link{gap:12px}

/* ── SERVICE CARDS ────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 28px;transition:all var(--bounce);position:relative;overflow:hidden;display:block}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .4s}
.svc-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{width:66px;height:66px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));box-shadow:0 10px 26px rgba(21,112,228,.3);transition:all var(--bounce)}
.svc-card:hover .svc-icon{transform:rotate(-8deg) scale(1.08)}
.svc-icon svg{width:32px;height:32px;stroke:#fff}
.svc-card:nth-child(2) .svc-icon{background:linear-gradient(135deg,var(--teal),var(--teal-dark))}
.svc-card:nth-child(3) .svc-icon{background:linear-gradient(135deg,var(--navy),var(--navy-dark))}
.svc-card:nth-child(4) .svc-icon{background:linear-gradient(135deg,#e67e22,#d35400)}
.svc-card:nth-child(5) .svc-icon{background:linear-gradient(135deg,#8e44ad,#6c3483)}
.svc-card:nth-child(6) .svc-icon{background:linear-gradient(135deg,#27ae60,#1e8449)}
.svc-card h3{font-size:1.18rem;margin-bottom:10px}
.svc-card p{font-size:.9rem}
.svc-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:.86rem;font-weight:700;color:var(--blue);transition:gap var(--t)}
.svc-card:hover .svc-more{gap:12px}

/* ── SPLIT / ABOUT ────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split-visual{position:relative}
.split-media{border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(140deg,var(--navy),var(--blue));min-height:420px;display:flex;align-items:center;justify-content:center;position:relative}
.split-media img{width:56%;filter:brightness(0) invert(1)}
.split-media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px}
.float-stat{position:absolute;bottom:-24px;right:-16px;background:var(--yellow);color:var(--navy);border-radius:50%;width:124px;height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;box-shadow:0 14px 40px rgba(255,212,0,.5);animation:floaty 5s ease-in-out infinite}
.float-stat b{font-size:2.2rem;line-height:1}
.float-stat span{font-size:.72rem}
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;font-weight:500;color:var(--navy)}
.check-list li .ck{width:22px;height:22px;background:var(--teal-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.check-list li .ck svg{width:12px;height:12px;stroke:var(--teal);stroke-width:3}

/* ── WHY (dark) ───────────────────────────────────── */
.dark{background:linear-gradient(140deg,var(--navy-deep),var(--navy) 55%,#1a3567);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;top:-120px;right:-80px;width:500px;height:500px;background:radial-gradient(circle,rgba(21,112,228,.25),transparent 65%)}
.dark .section-head h2,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .section-head p{color:rgba(255,255,255,.72)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;position:relative;z-index:1}
.why-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:32px 24px;transition:all var(--bounce);backdrop-filter:blur(6px)}
.why-card:hover{background:rgba(255,255,255,.12);transform:translateY(-8px);border-color:rgba(255,240,0,.3)}
.why-ic{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:all var(--bounce)}
.why-card:hover .why-ic{background:rgba(255,240,0,.16);transform:rotate(-8deg)}
.why-ic svg{width:30px;height:30px;stroke:var(--yellow)}
.why-card h4{margin-bottom:9px}
.why-card p{font-size:.87rem;color:rgba(255,255,255,.66);margin:0}

/* ── PROCESS ──────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;position:relative}
.step{text-align:center;position:relative}
.step-num{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;box-shadow:0 10px 28px rgba(21,112,228,.35);transition:all var(--bounce);position:relative;z-index:2}
.step:hover .step-num{transform:scale(1.12) rotate(-6deg)}
.step h4{margin-bottom:8px}
.step p{font-size:.86rem}

/* ── UNIVERSITY MARQUEE ───────────────────────────── */
.uni-wrap{overflow:hidden;position:relative}
.uni-wrap::before,.uni-wrap::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.uni-wrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.uni-wrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.uni-track{display:flex;gap:16px;width:max-content;animation:marq 48s linear infinite;padding:8px 0}
.uni-track.rev{animation:marqRev 44s linear infinite}
.uni-track:hover{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.uni-badge{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 30px;min-width:210px;height:92px;transition:all var(--bounce)}
.uni-badge:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-soft)}
.uni-logo{height:44px;width:auto;max-width:170px;object-fit:contain}
/* legacy abbr/name tiles (kept for fallback) */
.uni-abbr{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.72rem;flex-shrink:0;text-align:center;line-height:1.05}
.uni-name{font-size:.82rem;font-weight:700;color:var(--navy)}
.uni-loc{font-size:.7rem;color:var(--muted)}

/* ── TESTIMONIALS ─────────────────────────────────── */
.tst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.tst-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;position:relative;transition:all var(--bounce)}
.tst-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.tst-quote{font-size:4rem;line-height:1;color:var(--blue-soft);font-family:Georgia,serif;position:absolute;top:14px;right:24px}
.tst-stars{color:#ffb800;font-size:1rem;margin-bottom:14px;letter-spacing:2px}
.tst-text{font-size:.92rem;color:var(--muted);line-height:1.85;margin-bottom:24px;position:relative;z-index:1}
.tst-author{display:flex;align-items:center;gap:14px}
.tst-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex-shrink:0}
.tst-name{font-weight:700;font-size:.9rem;color:var(--navy)}
.tst-from{font-size:.76rem;color:var(--muted)}

/* ── CTA BANNER ───────────────────────────────────── */
.cta{background:linear-gradient(135deg,var(--blue),var(--blue-dark) 60%,#0a4aa8);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px}
.cta h2{color:#fff;margin-bottom:14px}
.cta p{color:rgba(255,255,255,.85);font-size:1.08rem;max-width:600px;margin:0 auto 32px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* ── PAGE HERO (inner) ────────────────────────────── */
.page-hero{background:linear-gradient(135deg,var(--navy-deep),var(--navy) 55%,#1a3a75);color:#fff;padding:74px 0;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.page-hero::after{content:"";position:absolute;top:-100px;right:-80px;width:460px;height:460px;background:radial-gradient(circle,rgba(21,112,228,.3),transparent 65%)}
.page-hero>.container{position:relative;z-index:1}
.page-hero h1{color:#fff;margin-bottom:12px}
.page-hero p{color:rgba(255,255,255,.8);font-size:1.08rem;max-width:620px;margin:0 auto}
.crumb{display:flex;gap:8px;justify-content:center;align-items:center;font-size:.83rem;color:rgba(255,255,255,.55);margin-bottom:18px}
.crumb a{color:rgba(255,255,255,.8)}.crumb a:hover{color:var(--yellow)}

/* ── CONTENT BLOCKS ───────────────────────────────── */
.prose h2{margin:8px 0 16px}
.prose h3{margin:28px 0 12px}
.prose p{margin-bottom:14px}
.prose ul{margin:12px 0 18px;padding-left:0}
.prose ul li{position:relative;padding-left:30px;margin-bottom:10px;font-size:.94rem;color:var(--muted)}
.prose ul li::before{content:"";position:absolute;left:0;top:9px;width:16px;height:16px;background:var(--blue-soft);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231570e4' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}

.info-box{background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:0 var(--r) var(--r) 0;padding:20px 26px;margin:22px 0}
.info-box.teal{background:var(--teal-soft);border-left-color:var(--teal)}
.info-box h4{margin-bottom:6px;color:var(--blue)}
.info-box.teal h4{color:var(--teal-dark)}
.info-box p{font-size:.9rem;margin:0}

.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:all var(--bounce)}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.feature-card h4{margin-bottom:8px;color:var(--navy)}
.feature-card p{font-size:.88rem;margin:0}
.feature-ic{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feature-ic svg{width:26px;height:26px;stroke:var(--blue)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}

/* Anchor offset for sticky nav + subnav */
.anchor{scroll-margin-top:150px}

/* Chip list */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:50px;padding:8px 18px;font-size:.85rem;font-weight:600;color:var(--navy);transition:all var(--t)}
.chip:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}

/* ── OFFICIAL SOURCE LINK ─────────────────────────── */
/* Used wherever a figure would otherwise go stale (fees, points,
   durations, work-hour caps). Points the reader at Home Affairs
   instead of at a number we would have to maintain. */
.src{display:flex;gap:12px;align-items:flex-start;background:var(--blue-soft);border-radius:var(--r);padding:16px 20px;margin:18px 0}
.src svg{width:19px;height:19px;stroke:var(--blue);flex-shrink:0;margin-top:2px}
.src p{font-size:.86rem;margin:0;color:var(--muted)}
.src a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.src a:hover{color:var(--blue-dark)}
.src.teal{background:var(--teal-soft)}
.src.teal svg{stroke:var(--teal-dark)}
.src.teal a{color:var(--teal-dark)}
.src-inline{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.src-inline:hover{color:var(--blue-dark)}

/* ── ACCORDION ────────────────────────────────────── */
.acc{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:all var(--t);background:#fff}
.acc.open{box-shadow:var(--shadow);border-color:var(--blue)}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;background:#fff}
.acc-head h4{font-size:1rem;margin:0}
.acc.open .acc-head{background:var(--blue-soft)}
.acc-head .arw{width:22px;height:22px;stroke:var(--blue);flex-shrink:0;transition:transform var(--t)}
.acc.open .acc-head .arw{transform:rotate(180deg)}
.acc-body{display:none;padding:8px 24px 24px}
.acc.open .acc-body{display:block;animation:fadeUp .3s ease}

/* ── TABS ─────────────────────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:2px solid var(--line);margin-bottom:32px}
.tab-btn{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;font-size:.9rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--t)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-pane{display:none}.tab-pane.active{display:block;animation:fadeUp .35s ease}

/* ── TABLES ───────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:.88rem;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.tbl th{background:var(--navy);color:#fff;padding:13px 16px;text-align:left;font-weight:600}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.tbl tr:nth-child(even) td{background:var(--bg)}
.tbl tr:hover td{background:var(--blue-soft)}

/* ── FORM ─────────────────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:44px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.84rem;font-weight:600;color:var(--navy);margin-bottom:7px}
.field .req{color:var(--blue)}
.field input,.field select,.field textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:inherit;font-size:.9rem;color:var(--ink);background:#fafbff;transition:all var(--t)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(21,112,228,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374874' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
.check-agree{display:flex;gap:10px;align-items:flex-start;margin-bottom:22px;font-size:.84rem;color:var(--muted)}
.check-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue);flex-shrink:0}
.check-agree a{color:var(--blue);font-weight:600}

/* ── CONTACT INFO CARDS ───────────────────────────── */
.ci-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;gap:16px;align-items:flex-start;transition:all var(--bounce)}
.ci-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ci-ic{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-ic svg{width:24px;height:24px;stroke:var(--blue)}
.ci-card h4{margin-bottom:4px;font-size:1rem}
.ci-card p,.ci-card a{font-size:.88rem;color:var(--muted);margin:0}
.ci-card a:hover{color:var(--blue)}

/* ── TEAM ─────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-align:center;transition:all var(--bounce)}
.team-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.team-top{height:120px;background:linear-gradient(135deg,var(--navy),var(--blue));position:relative}
.team-ava{width:104px;height:104px;border-radius:50%;border:4px solid #fff;background:linear-gradient(135deg,var(--teal),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.2rem;font-weight:800;margin:-52px auto 0;position:relative;z-index:2}
.team-ava{overflow:hidden}
/* Initials sit underneath; the photo covers them when it loads.
   If the photo 404s, onerror removes the <img> and the initials show through. */
.team-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.team-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:50%;display:block;z-index:2}
.team-body{padding:16px 22px 28px}
.team-body h3{font-size:1.12rem;margin-bottom:2px}
.team-role{color:var(--blue);font-size:.84rem;font-weight:600;display:block;margin-bottom:12px}
.team-body p{font-size:.86rem;margin-bottom:0}
.team-creds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.team-cred{background:var(--bg);border:1px solid var(--line);border-radius:50px;padding:4px 12px;font-size:.7rem;font-weight:700;color:var(--navy)}

/* ── VALUE CARDS ──────────────────────────────────── */
.val-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;text-align:center;transition:all var(--bounce);position:relative;overflow:hidden}
.val-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--teal))}
.val-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.val-ic{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--blue),var(--teal));display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 10px 26px rgba(21,112,228,.28)}
.val-ic svg{width:30px;height:30px;stroke:#fff}

/* ── PARTNER LOGOS ────────────────────────────────── */
.partner-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px}
.partner-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 24px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:all var(--bounce);min-width:150px;min-height:70px}
.partner-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue-soft)}
.partner-card img{height:38px;width:auto;max-width:150px;object-fit:contain}
/* square/boxed marks read smaller than wordmarks at the same height */
.partner-card img.logo-square{height:46px}

/* ── AUSTRALIA SHOWCASE + WAVING FLAG ─────────────── */
.au-showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.flag-stage{position:relative;padding-left:14px}
.flag-pole{position:absolute;left:0;top:-6px;bottom:-14px;width:8px;border-radius:8px;background:linear-gradient(180deg,#d7dbe6,#9aa3b8 40%,#6c7690);box-shadow:2px 0 6px rgba(0,0,0,.15);z-index:3}
.flag-pole::before{content:"";position:absolute;top:-9px;left:-3px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe680,#e0b300);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.flag-cloth{position:relative;margin-left:8px;border-radius:3px 6px 6px 3px;overflow:hidden;box-shadow:0 18px 44px rgba(31,43,71,.26);aspect-ratio:2/1;border:1px solid rgba(0,0,0,.06)}
.aus-flag-img,.aus-flag-svg{width:100%;height:100%;display:block}
.au-badge{position:absolute;right:-14px;bottom:-20px;z-index:4;background:var(--yellow);color:var(--navy);border-radius:50%;width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;line-height:1.1;box-shadow:0 12px 34px rgba(255,212,0,.5);animation:floaty 5s ease-in-out infinite}
.au-badge b{font-size:1.5rem}
.au-badge span{font-size:.62rem}

/* ── FOOTER ───────────────────────────────────────── */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.62);padding:52px 0 0;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background:url('assets/world-map.svg') center/115% no-repeat;opacity:.06;pointer-events:none}
.footer .container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.4fr;gap:48px;padding-bottom:36px}
.footer-brand img{height:42px;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer-brand p{font-size:.85rem;line-height:1.75;color:rgba(255,255,255,.58);max-width:300px}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:all var(--bounce)}
.footer-social a:hover{background:var(--blue);transform:translateY(-4px)}
.footer-social svg{width:17px;height:17px;stroke:#fff;fill:none}
.footer h5{color:#fff;font-size:.92rem;margin-bottom:16px;position:relative;padding-bottom:10px}
.footer h5::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:2px}
.footer-col li{margin-bottom:8px}
.footer-col a{font-size:.85rem;color:rgba(255,255,255,.58);transition:all var(--t);display:inline-flex}
.footer-col a:hover{color:var(--yellow);padding-left:4px}
.footer-contact div{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.62)}
.footer-contact svg{width:17px;height:17px;stroke:var(--teal);flex-shrink:0;margin-top:3px}
.footer-contact a:hover{color:var(--yellow)}

/* Same contact layout, but on a LIGHT card (office cards on the contact
   page). Kept separate from .footer-contact, whose colours are tuned for
   the dark footer and are invisible on white. */
.office-contact div{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.88rem;line-height:1.6;color:var(--muted)}
.office-contact div:last-child{margin-bottom:0}
.office-contact svg{width:17px;height:17px;stroke:var(--teal);flex-shrink:0;margin-top:3px}
.office-contact a{color:var(--blue);font-weight:600}
.office-contact a:hover{color:var(--blue-dark);text-decoration:underline;text-underline-offset:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem}
.footer-bottom a{margin-left:18px}.footer-bottom a:hover{color:var(--yellow)}

/* ── REVEAL ANIMATION ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.2,.7,.2,1)}
.reveal.vis{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── WHATSAPP FLOAT ───────────────────────────────── */
.wa-float{position:fixed;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.5);z-index:900;transition:all var(--bounce);animation:floaty 3s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ── RESPONSIVE ───────────────────────────────────── */
@media(max-width:960px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr;gap:48px;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-btns,.hero-trust{justify-content:center}
  .hero-visual{display:none}
  .split{grid-template-columns:1fr;gap:44px}
  .split-visual{order:-1}
  .check-list{max-width:520px}
  .stat-strip .container{grid-template-columns:1fr 1fr}
  .stat-cell:nth-child(2){border-right:none}
  .stat-cell:nth-child(1),.stat-cell:nth-child(2){border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:640px){
  .section{padding:64px 0}
  .form-row,.grid-2,.check-list{grid-template-columns:1fr}
  .stat-strip .container{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-bottom a{margin:0 9px}
  .form-card{padding:28px 22px}
  .hero{padding:64px 0 100px}
  .topbar-left a:not(:first-child){display:none}
  h2{font-size:1.7rem}
}

/* ═══════════════════════════════════════════════════
   ENHANCEMENTS (v4.1)
═══════════════════════════════════════════════════ */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;background:linear-gradient(90deg,var(--blue),var(--teal),var(--yellow));box-shadow:0 0 10px rgba(21,112,228,.5);transition:width .1s linear}

/* Back-to-top */
.to-top{position:fixed;right:28px;bottom:94px;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--bounce);z-index:900}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--blue);transform:translateY(-4px) scale(1.06)}
.to-top svg{width:20px;height:20px}

/* Animated hero glows */
.hero::before{animation:glowDriftA 14s ease-in-out infinite}
.hero::after{animation:glowDriftB 16s ease-in-out infinite}
@keyframes glowDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes glowDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}

/* Gradient text accent */
.gradient-text{background:linear-gradient(100deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Connected process timeline */
.steps{position:relative}
.steps::before{content:"";position:absolute;top:35px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0,var(--blue) 8px,transparent 8px,transparent 18px);opacity:.35;z-index:0}
.step{z-index:1}
@media(max-width:900px){.steps::before{display:none}}

/* Section curve divider (place a <div class="curve-divider"></div>) */
.curve-divider{line-height:0;margin-top:-1px}
.curve-divider svg{display:block;width:100%;height:60px}

/* Card sheen on service cards */
.svc-card::after{content:"";position:absolute;top:-60%;left:-30%;width:40%;height:220%;background:linear-gradient(90deg,transparent,rgba(21,112,228,.06),transparent);transform:rotate(18deg);opacity:0;transition:opacity .4s}
.svc-card:hover::after{opacity:1}

/* ═══ INNER-PAGE POLISH (v4.2) ═══ */

/* Sticky sub-nav with scroll-spy */
.subnav{position:sticky;top:78px;z-index:900;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 6px 22px rgba(31,43,71,.05)}
.subnav-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{padding:16px 18px;font-size:.86rem;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent;transition:all var(--t);position:relative}
.subnav a:hover{color:var(--blue)}
.subnav a.active{color:var(--blue);border-bottom-color:var(--blue)}

/* Numbered section timeline node */
.tl-node{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--teal));box-shadow:0 10px 26px rgba(21,112,228,.3);margin:0 auto 22px}
.tl-node.left{margin:0 0 22px}
.tl-node::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:2px;height:56px;margin-bottom:8px;background:repeating-linear-gradient(180deg,var(--blue) 0 6px,transparent 6px 15px);opacity:.4}
.tl-node.first::before{display:none}

/* Enquiry form status message */
.form-note{display:none;margin-top:14px;padding:12px 16px;border-radius:10px;font-size:.86rem;font-weight:600;line-height:1.45}
.form-note.is-ok{background:#e8f7ee;border:1px solid #27ae60;color:#1e8449}
.form-note.is-err{background:#fdecea;border:1px solid #e74c3c;color:#c0392b}

/* ═════════════════════════════════════════════════════════
   ACCESSIBILITY & INTERACTION LAYER (v4.3)
   Keyboard focus · skip link · reduced motion · touch targets
   · form validation states. Purely additive — no visual change
   for mouse users in the default state.
   ═════════════════════════════════════════════════════════ */

/* ── 1. VISIBLE KEYBOARD FOCUS ───────────────────────────
   Mouse/touch users never see these (:focus-visible only fires
   for keyboard interaction), so the design is untouched. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}
/* On dark/navy backgrounds the blue ring loses contrast — use yellow. */
.topbar :focus-visible,
.footer :focus-visible,
.cta-band :focus-visible,
.bg-navy :focus-visible,
.btn-ghost-white:focus-visible,
.wa-float:focus-visible{
  outline-color:var(--yellow);
}
/* Pills/round controls keep their own radius */
.btn:focus-visible,.topbar-social a:focus-visible,.wa-float:focus-visible{border-radius:50px}

/* ── 2. SKIP LINK ────────────────────────────────────────
   Off-screen until focused; first tab stop on every page. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy-deep);color:#fff;
  padding:14px 24px;border-radius:0 0 var(--r-sm) 0;
  font-size:.92rem;font-weight:600;
}
.skip-link:focus{
  left:0;
  outline:3px solid var(--yellow);
  outline-offset:-3px;
}

/* Give the main landmark a scroll anchor clear of the sticky navbar */
#main{scroll-margin-top:120px}

/* ── 3. KEYBOARD-ACCESSIBLE NAV DROPDOWNS ────────────────
   Previously hover-only, so keyboard and touch users could
   never reach the sub-items. Now driven by :focus-within and
   an aria-expanded toggle as well as hover. */
.nav-dropdown:hover .dropdown,
.nav-dropdown:focus-within .dropdown,
.nav-dropdown.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown:focus-within>a,
.nav-dropdown.open>a{color:var(--blue)}
.nav-dropdown:focus-within>a::before,
.nav-dropdown.open>a::before{transform:rotate(180deg)}

/* The parent link and the new caret button must sit on one row —
   .nav-dropdown>a is display:flex, so without this the button wraps. */
.nav-dropdown{display:flex;align-items:center}

/* Caret becomes a real button so it can be tabbed to and toggled.
   Sized to stay inside the existing nav row height. */
.dd-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:-6px;
  background:none;border:none;cursor:pointer;color:inherit;
  border-radius:50%;transition:background var(--t);
}
.dd-toggle svg{width:11px;height:11px;stroke:currentColor;stroke-width:3;fill:none;transition:transform var(--t)}
.dd-toggle:hover{background:var(--blue-soft)}
.nav-dropdown.open .dd-toggle svg,
.nav-dropdown:focus-within .dd-toggle svg{transform:rotate(180deg)}
/* The CSS ▾ caret is replaced by the real button — hide the pseudo-element. */
.nav-dropdown>a::before{content:none}

/* ── 4. TOUCH TARGETS (min 44×44 per WCAG 2.5.8) ─────────
   On touch devices the small icon buttons grow to a real 44px
   with spacing to match; pointer devices keep the tighter look. */
@media (pointer:coarse){
  .topbar-social a,.footer-social a{width:44px;height:44px}
  .topbar-social,.footer-social{gap:8px}
  .topbar .container{height:auto;padding-top:6px;padding-bottom:6px}
  .topbar-left a{min-height:44px}
  .dd-toggle{width:44px;height:44px}
}
/* Nav + dropdown links get real height */
.dropdown a{min-height:44px}
.subnav a{min-height:44px;display:flex;align-items:center}
.mobile-menu a{min-height:44px;display:flex;align-items:center}
.hamburger,.mobile-close{min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* ── 5. FORM VALIDATION STATES ───────────────────────────
   Inline, per-field, tied to the input via aria-describedby. */
.field-error{
  display:none;margin-top:6px;
  font-size:.8rem;font-weight:600;line-height:1.4;
  color:#b3261e;
}
.field-error::before{
  content:"";display:inline-block;vertical-align:-2px;
  width:14px;height:14px;margin-right:6px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3261e'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V8h2v5z'/%3E%3C/svg%3E");
}
.field.has-error .field-error{display:block}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#b3261e;
  background:#fff6f5;
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus{
  border-color:#b3261e;
  box-shadow:0 0 0 3px rgba(179,38,30,.15);
}
/* Required marker gets a text equivalent for screen readers via
   the visually-hidden span in the markup. */
.field .req{color:#b3261e;font-weight:700}

/* Focusable error summary at the top of the form */
.error-summary{
  display:none;margin-bottom:22px;padding:16px 20px;
  background:#fdecea;border:2px solid #b3261e;border-left-width:6px;
  border-radius:var(--r-sm);
}
.error-summary.show{display:block}
.error-summary:focus-visible{outline:3px solid #b3261e;outline-offset:3px}
.error-summary h3{font-size:1rem;color:#b3261e;margin-bottom:8px}
.error-summary ul{margin:0;padding:0}
.error-summary li{margin-top:6px}
.error-summary a{
  color:#b3261e;font-weight:600;font-size:.88rem;
  text-decoration:underline;text-underline-offset:3px;
}
.check-agree.has-error{padding:10px;border-radius:8px;background:#fff6f5;border:1px solid #b3261e}

/* Visually hidden but available to screen readers */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── 6. REDUCED MOTION ───────────────────────────────────
   The site runs 8+ infinite animations (hero rings, floats,
   logo marquees, WhatsApp pulse). For users who ask the OS to
   reduce motion these are stopped outright rather than sped up,
   and scroll reveals render in their final state. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .hero-ring,.hero-float,.float-stat,.au-badge,.wa-float{animation:none!important}
  .uni-track,.uni-track.rev{animation:none!important;transform:none!important}
  /* Marquee rows become a normal wrapping row instead of a dead strip */
  .uni-track{flex-wrap:wrap;width:100%;justify-content:center}
  .reveal{opacity:1!important;transform:none!important}
  /* Kill lift-on-hover so nothing moves under the pointer */
  .btn:hover,.svc-card:hover,.topbar-social a:hover{transform:none!important}
}

/* ── 7. MISC A11Y POLISH ─────────────────────────────────*/
/* Decorative SVGs inside links shouldn't swallow the pointer */
a svg,button svg{pointer-events:none}
/* Anything clickable shows it */
a,button,[role="button"],summary{cursor:pointer}
/* Sticky sub-nav anchors clear the navbar */
[id]{scroll-margin-top:110px}
/* Selection uses brand colours */
::selection{background:var(--blue);color:#fff}


/* ═════════════════════════════════════════════════════════
   DESIGN SYSTEM LAYER (v5.0)
   Pattern: Trust & Authority + Conversion.
   Brand palette and Poppins are per the Threads guideline and
   are deliberately unchanged — this layer adds a type scale,
   spacing scale and elevation scale on top of them.
   ═════════════════════════════════════════════════════════ */

:root{
  /* ── Fluid type scale (1.250 major third, viewport-interpolated).
     Every step is clamped so nothing gets illegible on small
     screens or absurd on large ones. */
  --fs-xs:clamp(.75rem,.72rem + .15vw,.82rem);
  --fs-sm:clamp(.85rem,.82rem + .18vw,.92rem);
  --fs-base:clamp(1rem,.96rem + .2vw,1.06rem);
  --fs-md:clamp(1.1rem,1.04rem + .3vw,1.22rem);
  --fs-lg:clamp(1.3rem,1.18rem + .55vw,1.6rem);
  --fs-xl:clamp(1.6rem,1.35rem + 1.1vw,2.1rem);
  --fs-2xl:clamp(2rem,1.55rem + 1.9vw,2.9rem);
  --fs-3xl:clamp(2.4rem,1.7rem + 3vw,3.9rem);

  /* ── Line heights: tighter as type gets bigger */
  --lh-tight:1.14;
  --lh-snug:1.32;
  --lh-normal:1.6;
  --lh-relaxed:1.8;

  /* ── Letter-spacing: large type needs negative tracking to
     avoid looking loose; small caps need the opposite. */
  --ls-tight:-.022em;
  --ls-snug:-.012em;
  --ls-wide:.02em;
  --ls-caps:.14em;

  /* ── Spacing scale (density 4/10 — standard) */
  --space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;
  --space-lg:24px;--space-xl:32px;--space-2xl:48px;
  --space-3xl:64px;--space-4xl:96px;--space-5xl:128px;

  /* Fluid section rhythm — sections breathe on desktop, tighten on mobile */
  --section-y:clamp(56px,4vw + 32px,104px);
  --section-y-sm:clamp(40px,2.6vw + 24px,72px);

  /* ── Measure: caps line length for comfortable reading */
  --measure:68ch;
  --measure-tight:56ch;

  /* ── Elevation scale.
     Two shadows per level: a tight contact shadow for the edge
     and a wide ambient one for the lift. Single-shadow cards
     read flat; this is most of the "premium" difference. */
  --e1:0 1px 2px rgba(31,43,71,.06),0 1px 3px rgba(31,43,71,.05);
  --e2:0 2px 4px rgba(31,43,71,.05),0 4px 12px rgba(31,43,71,.07);
  --e3:0 4px 8px rgba(31,43,71,.05),0 12px 28px rgba(31,43,71,.09);
  --e4:0 8px 16px rgba(31,43,71,.06),0 24px 52px rgba(31,43,71,.12);
  --e5:0 12px 24px rgba(31,43,71,.07),0 40px 80px rgba(31,43,71,.16);
  /* Coloured elevation for brand-tinted surfaces */
  --e-blue:0 4px 10px rgba(21,112,228,.14),0 16px 36px rgba(21,112,228,.22);
  --e-blue-lift:0 8px 18px rgba(21,112,228,.18),0 26px 54px rgba(21,112,228,.30);

  /* ── Motion tokens: distinct durations per interaction weight.
     One duration for everything is the classic tell of an
     unconsidered interface. */
  --dur-instant:.12s;
  --dur-fast:.18s;
  --dur-base:.26s;
  --dur-slow:.42s;
  --ease-out:cubic-bezier(.16,1,.3,1);       /* expo-ish, for entrances */
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
}

/* ── TYPOGRAPHY REFINEMENT ────────────────────────────────*/
body{font-size:var(--fs-base);line-height:var(--lh-normal)}

h1{font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h3{font-size:var(--fs-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-snug)}
h4{font-size:var(--fs-md);line-height:var(--lh-snug);letter-spacing:var(--ls-snug)}

/* Stop headings breaking with a single orphan word on the last line */
h1,h2,h3{text-wrap:balance}
/* Body copy avoids a lone trailing word */
p,li{text-wrap:pretty}

p{font-size:var(--fs-base);line-height:var(--lh-relaxed)}

/* Constrain reading measure wherever prose runs full-width */
.section-head p,.prose p,.about-copy p{max-width:var(--measure)}
.section-head{max-width:min(var(--measure),720px)}
.hero p{max-width:var(--measure-tight)}

/* Eyebrow labels: small caps need generous tracking to stay legible */
.eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-caps)}

/* Numerals in stats/counters line up in columns when tabular */
.counter,.stat-box b,.stat-num{font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}

/* ── SECTION RHYTHM ───────────────────────────────────────*/
.section{padding:var(--section-y) 0}
.section-sm{padding:var(--section-y-sm) 0}
.section-head{margin-bottom:clamp(36px,3vw,60px)}

/* ── ELEVATION APPLIED ────────────────────────────────────
   Cards move from a single flat shadow to the paired scale,
   and lift on a spring rather than a linear ease. */
.svc-card{
  box-shadow:var(--e1);
  transition:transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
  will-change:transform;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--e4)}
.svc-card:focus-visible{transform:translateY(-6px);box-shadow:var(--e4)}
/* The gradient top-edge sweeps in slightly slower than the lift,
   so the two reads as one gesture rather than a simultaneous flash. */
.svc-card::before{transition:transform var(--dur-slow) var(--ease-out)}

.svc-icon{transition:transform var(--dur-base) var(--ease-spring)}
.svc-card:hover .svc-icon{transform:rotate(-6deg) scale(1.06)}

.stat-strip .container{box-shadow:var(--e5)}
.acc{box-shadow:var(--e1);transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.acc.open{box-shadow:var(--e3)}
.form-card{box-shadow:var(--e4)}

/* Buttons: contact shadow at rest, ambient lift on hover, and a
   press state so clicks feel physical. */
.btn{transition:transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background-color var(--dur-fast) linear,
                color var(--dur-fast) linear,
                border-color var(--dur-fast) linear}
.btn-primary{box-shadow:var(--e-blue)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--e-blue-lift)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:var(--dur-instant)}

/* ── NAVBAR: refined glass ────────────────────────────────
   Saturating the backdrop keeps brand colour alive behind the
   blur instead of washing it grey. */
.navbar{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  transition:box-shadow var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out);
}
.navbar.scrolled{background:rgba(255,255,255,.94);box-shadow:var(--e2)}
/* Browsers without backdrop-filter get an opaque bar rather than
   unreadable text over content. */
@supports not (backdrop-filter:blur(1px)){
  .navbar{background:rgba(255,255,255,.98)}
}
.dropdown{box-shadow:var(--e4)}

/* ── SURFACE DEPTH ────────────────────────────────────────
   A very low-contrast mesh replaces the flat grey section
   backgrounds. Deliberately subtle — it should register as
   "not flat", not as a visible gradient. */
.bg-soft{
  background:
    radial-gradient(900px 420px at 12% -10%,rgba(21,112,228,.045),transparent 60%),
    radial-gradient(760px 380px at 92% 110%,rgba(41,155,165,.05),transparent 62%),
    var(--bg);
}
.bg-soft2{
  background:
    radial-gradient(820px 400px at 88% -12%,rgba(21,112,228,.05),transparent 58%),
    var(--bg2);
}

/* Hairline dividers between stacked light sections give edges
   definition without a heavy border. */
.section + .section{border-top:1px solid rgba(230,234,243,.7)}
.section + .section.bg-soft,.bg-soft + .section{border-top:none}

/* ── GSAP HANDOFF ─────────────────────────────────────────
   When GSAP drives the reveals it writes inline styles; leaving
   the CSS transition on would animate the same properties twice
   and produce a visible double-step. */
.gsap-ready .reveal{transition:none}
.gsap-ready .reveal.d1,.gsap-ready .reveal.d2,.gsap-ready .reveal.d3,
.gsap-ready .reveal.d4,.gsap-ready .reveal.d5{transition-delay:0s}

/* No-JS safety net: if scripts never run, reveal content anyway
   rather than leaving the page permanently blank. */
@media (scripting:none){
  .reveal{opacity:1!important;transform:none!important}
}

/* ── LOGO MARQUEE ─────────────────────────────────────────*/

/* Fade the marquee edges so logos enter and leave instead of being
   sliced off. Applied to the track group only — a mask on .uni-wrap
   would inherit down and fade the heading and button too. */
#uniTracks{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

.uni-badge{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 22px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--e1);transition:box-shadow var(--dur-base) var(--ease-out);
}
/* Logos sit back until hovered, so they read as a texture of proof
   rather than eight competing brand marks. */
.uni-logo{
  filter:grayscale(1);opacity:.62;
  transition:filter var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.uni-badge:hover .uni-logo{filter:grayscale(0);opacity:1}
.uni-badge:hover{box-shadow:var(--e3)}

/* Under reduced motion the rows are static, so show them at
   full strength — there's no movement to de-emphasise. */
@media (prefers-reduced-motion:reduce){
  .uni-logo{filter:grayscale(0);opacity:1}
  #uniTracks{-webkit-mask-image:none;mask-image:none}
}

/* ── STICKY CONVERSION BAR ────────────────────────────────
   The pattern calls for a persistent CTA path. Appears once the
   hero CTA has scrolled away, on mobile only, where the navbar
   CTA is hidden behind the hamburger. */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:880;
  display:none;align-items:center;gap:var(--space-sm);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(31,43,71,.10);
  transform:translateY(110%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{flex:1;min-height:44px;padding:12px 18px}
.sticky-cta .sc-call{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:0 0 48px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue);
}
.sticky-cta .sc-call svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:900px){
  .sticky-cta{display:flex}
  /* Keep the floating WhatsApp button clear of the bar */
  .sticky-cta.show ~ .wa-float{bottom:88px}
}