/* Fluent Finance Abroad — Design System v2.0 shared stylesheet */
:root{
  --navy-950:#031427; --navy-900:#07284f; --navy-800:#0a3c76;
  --blue-600:#0d509d; --blue-400:#4a7cb6; --blue-200:#86a8ce;
  --blue-100:#c3d3e7; --blue-50:#eef3f9;
  --sand:#f7f4ee; --white:#ffffff;
  --ink:#0b1c30; --muted:#51637a; --line:#dfe6ef;
  --success:#1e7a4f; --warning:#b97a12; --error:#b23a3a;
  --fs-display:clamp(2.6rem,5.5vw,4.25rem);
  --fs-h1:clamp(2.1rem,4vw,3.1rem);
  --fs-h2:clamp(1.6rem,3vw,2.2rem);
  --fs-h3:clamp(1.25rem,2vw,1.5rem);
  --fs-body:1.0625rem; --fs-small:.9rem; --fs-micro:.78rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(7,40,79,.08);
  --sh-2:0 4px 14px rgba(7,40,79,.10);
  --sh-3:0 12px 32px rgba(7,40,79,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Figtree',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;font-size:var(--fs-body)}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--navy-900)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{max-width:68ch}
a{color:var(--blue-600)}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--sp-5)}
.kicker{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600);font-weight:700;margin-bottom:var(--sp-2)}
.lead{color:var(--muted);font-size:1.125rem;max-width:60ch}

/* Header */
.topbar{background:var(--navy-950);color:var(--blue-200);font-size:var(--fs-micro);padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
header.site{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:40}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
header.site img{height:44px}
nav.main{display:flex;gap:var(--sp-5);align-items:center}
nav.main a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
nav.main a:hover{color:var(--blue-600)}
nav.main a.active{color:var(--blue-600);font-weight:700}
@media(max-width:900px){nav.main{display:none}}

/* Buttons */
.btn{display:inline-block;font-weight:600;font-size:.95rem;padding:12px 24px;border-radius:var(--r-pill);border:none;cursor:pointer;margin:4px 8px 4px 0;text-decoration:none;transition:background .15s}
.btn-primary{background:var(--blue-600);color:#fff}
.btn-primary:hover{background:var(--navy-800)}
.btn-secondary{background:transparent;color:var(--blue-600);border:1.5px solid var(--blue-600)}
.btn-ghost{background:transparent;color:var(--navy-900);border:1.5px solid var(--line)}
.btn-dark{background:var(--navy-900);color:#fff}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-800) 65%,var(--blue-600) 100%);color:#fff;padding:var(--sp-9) 0 var(--sp-9);position:relative;overflow:hidden}
.hero.hero-photo{padding:calc(var(--sp-10)) 0}
.hero.hero-photo::before{content:"";position:absolute;inset:0;background-image:var(--hero-img);background-size:cover;background-position:center;opacity:.45}
.hero.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,20,39,.92) 0%,rgba(7,40,79,.78) 55%,rgba(10,60,118,.45) 100%)}
.hero.hero-photo .wrap{position:relative;z-index:1}
.hero h1{color:#fff;font-size:var(--fs-display);max-width:16ch}
.hero p{color:var(--blue-100);font-size:1.125rem;margin:var(--sp-4) 0 var(--sp-5)}
.hero .kicker{color:var(--blue-200)}

/* Sections */
section.block{padding:var(--sp-9) 0}
section.block.sand{background:var(--sand)}
section.block.tint{background:var(--blue-50)}
section.block.dark{background:var(--navy-900);color:var(--blue-100)}
section.block.dark h2,section.block.dark h3{color:#fff}
.grid{display:grid;gap:var(--sp-5)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1)}
.card h3{margin-bottom:var(--sp-2)}
.card p{font-size:var(--fs-small);color:var(--muted)}
.card .img{aspect-ratio:4/3;width:100%;border-radius:var(--r-md);margin-bottom:var(--sp-4);background:linear-gradient(120deg,var(--blue-100),var(--blue-400))}
.card.dark-on{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.card.dark-on p{color:var(--blue-100)}

/* Badges & alerts */
.badge{display:inline-block;font-size:var(--fs-micro);font-weight:700;padding:4px 12px;border-radius:var(--r-pill);margin:0 6px 6px 0}
.badge-blue{background:var(--blue-50);color:var(--blue-600)}
.badge-green{background:#e7f3ec;color:var(--success)}
.alert{border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-small);margin:var(--sp-3) 0;border-left:4px solid}
.alert.info{background:var(--blue-50);border-color:var(--blue-600);color:var(--navy-900)}
.alert.success{background:#e7f3ec;border-color:var(--success);color:#134d31}

/* Forms */
input,select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:'Figtree',sans-serif;font-size:.95rem;margin-bottom:var(--sp-4);background:#fff}
input:focus,select:focus{outline:2px solid var(--blue-600);outline-offset:1px;border-color:var(--blue-600)}
label{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:6px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-2);max-width:560px}

/* Stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);text-align:center}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats .num{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:600;color:var(--blue-600)}
.stats .lbl{font-size:var(--fs-small);color:var(--muted)}
section.block.dark .stats .num{color:var(--blue-200)}
section.block.dark .stats .lbl{color:var(--blue-100)}

/* Footer */
footer.site{background:var(--navy-950);color:var(--blue-200);padding:var(--sp-8) 0 var(--sp-6);font-size:var(--fs-small)}
footer.site a{color:#fff;text-decoration:none}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-6)}
@media(max-width:700px){footer.site .cols{grid-template-columns:1fr}}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-6);padding-top:var(--sp-4);font-size:var(--fs-micro)}
/* Mobile nav */
.nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy-900);margin:4px 0;transition:.2s}
@media(max-width:900px){
  .nav-toggle{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);gap:0}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line)}
  header.site .wrap{position:relative}
}
/* Language switcher */
.langs{display:flex;gap:2px}
.langs a{color:var(--blue-200);text-decoration:none;font-weight:600;padding:2px 6px;border-radius:4px;font-size:var(--fs-micro)}
.langs a:hover{color:#fff;background:rgba(255,255,255,.12)}
.langs a.on{color:#fff;background:var(--blue-600)}

/* Interaction polish */
.card,.video-embed{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.btn{transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{box-shadow:0 2px 8px rgba(13,80,157,.25)}
header.site.scrolled{box-shadow:var(--sh-2)}
header.site .wrap{transition:padding .2s}
header.site.scrolled .wrap{padding-top:8px;padding-bottom:8px}

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(16px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
}

/* Back to top */
.to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;border:none;background:var(--blue-600);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(8px);z-index:60}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--navy-800)}

/* Form validation */
input.invalid{border-color:var(--error);outline-color:var(--error)}
input.invalid:focus{outline:2px solid var(--error)}

/* Testimonial quote styling */
.card.blockquote p:first-of-type{font-family:'Fraunces',serif;font-size:1.1rem;line-height:1.5;color:var(--navy-900)}
.card.blockquote{border-left:4px solid var(--blue-600)}


/* ============ RESPONSIVE REFINEMENTS ============ */

/* Tablet: tighten rhythm */
@media(max-width:900px){
  section.block{padding:var(--sp-7) 0}            /* 48px, was 96px */
  .hero{padding:var(--sp-7) 0}
  .hero.hero-photo{padding:var(--sp-8) 0}         /* 64px, was 128px */
  .hero h1{font-size:clamp(2rem,7vw,2.8rem)}
  .hero p{font-size:1rem}
  header.site img{height:38px}
  header.site .btn{padding:9px 16px;font-size:.85rem}
  .stats .num{font-size:2rem}
}

/* Phones */
@media(max-width:600px){
  .wrap{padding:0 var(--sp-4)}                    /* 16px gutters */
  section.block{padding:var(--sp-6) 0}            /* 32px */
  .hero{padding:var(--sp-6) 0}
  .hero.hero-photo{padding:var(--sp-7) 0}
  .hero .btn{display:block;text-align:center;margin:8px 0;width:100%}
  .hero .btn + .btn{margin-left:0}

  /* Topbar: drop the phone list, keep languages */
  .topbar .wrap > span:first-child{display:none}
  .topbar .wrap{justify-content:center}

  /* Header: logo + hamburger only; CTA moves out of the way */
  header.site .wrap{gap:var(--sp-3)}
  header.site > .wrap > .btn-primary{display:none}
  header.site img{height:34px}

  /* Cards & media */
  .card{padding:var(--sp-4)}
  .video-embed{border-radius:var(--r-sm)}

  /* Forms */
  .form-card{padding:var(--sp-5) var(--sp-4)}
  input,select{font-size:16px}                    /* kills iOS zoom-on-focus */

  /* Stats */
  .stats{gap:var(--sp-4)}
  .stats .num{font-size:1.7rem}

  /* Footer */
  footer.site{padding:var(--sp-6) 0 var(--sp-5)}
  footer.site .cols{gap:var(--sp-5)}
  footer.site img[alt*="Fluent"]{height:44px}

  /* Full-width buttons in forms */
  .form-card .btn{width:100%;text-align:center;margin:8px 0 0}

  /* Accreditation badges */
  .accred{gap:var(--sp-3)}
  .accred img{height:52px}
}

/* Small phones */
@media(max-width:380px){
  .hero h1{font-size:1.9rem}
  .stats{grid-template-columns:1fr 1fr}
}

/* Very wide screens: cap hero photo height */
@media(min-width:1600px){
  .hero.hero-photo .wrap{max-width:1160px}
}


/* ============ CARD SYSTEM REFINEMENT ============ */
.card{display:flex;flex-direction:column}
.card h3{font-size:1.2rem;margin-bottom:6px}
.card p{line-height:1.5}
/* Consistent image ratio — no more awkward fixed-height crops */
.card img.img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center}
/* Team card emails: small, muted, never break layout */
.card a[href^="mailto"]{font-size:.8rem;word-break:break-all;color:var(--blue-600)}
/* Cards in a row share equal height; content top-aligned */
.grid{align-items:stretch}
/* Video cards keep 16:9 */
.video-embed{aspect-ratio:16/9;padding-top:0}
/* Footer logo: let media queries win over inline style */
footer.site .cols img{height:52px}
@media(max-width:600px){
  footer.site .cols img{height:44px!important}
  .card h3{font-size:1.1rem}
}


/* ============ VIDEOS PAGE ============ */
.video-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.vfilter{font-size:.85rem;font-weight:600;padding:8px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.vfilter:hover{border-color:var(--blue-200);color:var(--blue-600)}
.vfilter.on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.video-facade{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);cursor:pointer;background:#000}
.video-facade img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s,transform .3s}
.video-facade:hover img{opacity:1;transform:scale(1.02)}
.video-facade .play{position:absolute;inset:0;margin:auto;width:64px;height:44px;border-radius:12px;background:rgba(13,80,157,.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-facade .play::before{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cat{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);margin-bottom:4px}
.video-card{display:none}
.video-card.show{display:block}
/* Featured */
.video-featured{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-6);align-items:center;margin-bottom:var(--sp-8)}
@media(max-width:900px){.video-featured{grid-template-columns:1fr}}