/* ============================================================
   Bright Bound Education — Stylesheet v6
   Dark editorial layout. Navy and gold from the logo.
   ============================================================ */

:root{
  /* Brand — sampled from the logo */
  --navy:        #001658;
  --navy-mid:    #17357f;
  --gold:        #E39A12;
  --gold-deep:   #C67C01;

  /* Dark UI surface */
  --bg:          #0e1327;
  --bg-2:        #141a33;
  --bg-3:        #1b2240;
  --line:        rgba(255,255,255,.13);

  --white:       #ffffff;
  --heading:     #ffffff;
  --body:        rgba(255,255,255,.70);
  --muted:       rgba(255,255,255,.48);

  --nav-h:       104px;
  --transition:  .25s ease;
  --font:        'Poppins','Segoe UI',system-ui,sans-serif;
  --font-quote:  Georgia,'Times New Roman',serif;
  --wrap:        1240px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:calc(var(--nav-h) + 1.5rem)}
body{font-family:var(--font);background:var(--bg);color:var(--body);
  line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font);color:var(--heading);line-height:1.08;
  font-weight:700;letter-spacing:-.02em}
p{color:var(--body)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 2rem}
.band{padding:6rem 0}
.band-sm{padding:4rem 0}
.band-alt{background:var(--bg-2)}

/* ---------- Eyebrow: short dash then spaced caps ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:1rem;font-size:.82rem;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);margin-bottom:1.75rem}
.eyebrow::before{content:'';width:44px;height:4px;background:var(--gold);flex-shrink:0}
.eyebrow-plain{color:var(--gold);font-weight:600}
.eyebrow-plain::before{display:none}

/* ---------- Display headings ---------- */
.display{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:700;line-height:1.05;
  letter-spacing:-.03em;color:var(--heading)}
.display-sm{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700;line-height:1.08;
  letter-spacing:-.03em;color:var(--heading)}
.lede{font-size:1.02rem;line-height:1.9;color:var(--body);max-width:56ch;font-weight:300}

/* ---------- Buttons: sharp rectangles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.15rem 2.6rem;font-family:var(--font);font-size:.92rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;border:2px solid transparent;
  cursor:pointer;transition:all var(--transition);border-radius:0;white-space:nowrap}
.btn-accent{background:var(--gold);color:#12162b;border-color:var(--gold)}
.btn-accent:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline{background:transparent;color:var(--gold);border-color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#12162b}

/* ---------- Top info bar ---------- */
.info-bar{background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:.78rem;position:fixed;top:0;left:0;right:0;z-index:1001;height:38px;
  display:flex;align-items:center}
.info-bar-inner{display:flex;justify-content:space-between;align-items:center;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 2rem;gap:1rem}
.info-bar-items{display:flex;gap:1.75rem;align-items:center;color:var(--muted)}
.info-bar-items a:hover{color:var(--gold)}

/* ---------- Navigation: logo left, menu centred, CTA right ---------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;background:var(--bg);
  border-bottom:1px solid var(--line);transition:all var(--transition)}
.nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 2rem;gap:2rem}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:74px;width:auto;object-fit:contain}
.nav-menu{display:flex;align-items:center;justify-content:center;gap:2.4rem}
.nav-link{font-size:.95rem;font-weight:400;color:rgba(255,255,255,.82);
  letter-spacing:.01em;transition:color var(--transition);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--gold)}
.nav-cta{justify-self:end}

/* Mobile toggle */
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;
  padding:.5rem;background:none;border:none}
.hamburger span{display:block;width:26px;height:2px;background:var(--white);
  transition:all var(--transition)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

/* ---------- Framed image: offset square outline behind ---------- */
.framed{position:relative;display:block}
.framed::before{content:'';position:absolute;inset:-14% -8% 22% 18%;
  border:5px solid var(--gold);z-index:0}
.framed img{position:relative;z-index:1;width:100%;
  filter:saturate(1.08) contrast(1.04) brightness(1.02)}
.framed.no-grey img{filter:none}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--nav-h) + 5rem);padding-bottom:5rem;
  position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center}
.hero h1{margin-bottom:2.5rem}
.hero-social{display:flex;align-items:center;gap:1.75rem;margin-bottom:2rem;
  position:relative;padding-left:2.25rem}
.hero-social::before{content:'';position:absolute;left:0;top:-.5rem;bottom:-.5rem;
  width:6px;background:var(--gold)}
.hero-social a{color:var(--gold);font-size:1.15rem;transition:opacity var(--transition)}
.hero-social a:hover{opacity:.65}
.hero-note{max-width:46ch;font-size:.98rem;line-height:1.85}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.25rem}

/* ---------- Quote band ---------- */
.quote-band{padding:7rem 0;text-align:center}
.quote-band blockquote{font-family:var(--font-quote);font-style:italic;
  font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.5;color:rgba(255,255,255,.72);
  max-width:20ch;margin:0 auto;max-width:900px;font-weight:400}
.quote-rule{width:76px;height:5px;background:var(--gold);margin:3.5rem auto 0}

/* ---------- Split band: copy one side, framed image the other ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.split.media-left .split-media{order:1}
.split.media-left .split-copy{order:2}
.split-copy h2{margin-bottom:2rem}
.split-copy p{margin-bottom:1.25rem}
.split-rule{height:1px;background:var(--line);margin:2.5rem 0 2rem}

/* ---------- Inline values list with chevrons ---------- */
.values-inline{display:flex;flex-wrap:wrap;gap:.9rem 2rem;margin-bottom:2.5rem}
.values-inline li{display:flex;align-items:center;gap:.7rem;
  font-size:1rem;color:rgba(255,255,255,.8);font-weight:300}
.values-inline li::before{content:'\00bb';color:var(--gold);font-size:1.15rem;font-weight:700}

/* ---------- Services band ---------- */
.svc-media{position:relative;padding-left:2.5rem}
.svc-media::before{content:'';position:absolute;left:0;top:0;bottom:18%;
  width:7px;background:var(--gold)}
.svc-media img{filter:none;width:100%}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}
.contact-photo{position:relative;margin-bottom:2.5rem}
.contact-photo::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,rgba(14,19,39,.88),rgba(14,19,39,0));
  pointer-events:none;z-index:1}
.contact-photo img{filter:saturate(1.08) contrast(1.04);width:100%}
.contact-photo .overlay-word{position:absolute;z-index:2;left:1.25rem;bottom:1.5rem;
  font-size:clamp(2rem,4.4vw,3.4rem);font-weight:700;letter-spacing:-.02em;
  color:var(--gold);line-height:1;pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.field{margin-bottom:2rem}
.field input,.field textarea,.field select{width:100%;background:transparent;
  border:none;border-bottom:1px solid rgba(255,255,255,.22);padding:.85rem 0;
  font-family:var(--font);font-size:1rem;font-weight:300;color:var(--white);
  transition:border-color var(--transition)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(227,154,18,.62)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--gold)}
.field select{color:var(--body)}
.field select option{background:var(--bg-2);color:var(--white)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.submit-btn{width:100%;background:transparent;color:var(--white);
  border:1px solid var(--gold);padding:1.15rem;font-family:var(--font);
  font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:all var(--transition)}
.submit-btn:hover{background:var(--gold);color:#12162b}
.contact-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 2rem;margin-top:3rem}
.contact-detail h4{font-size:1.15rem;font-weight:600;margin-bottom:.6rem;color:var(--white)}
.contact-detail p,.contact-detail a{font-size:.95rem;color:var(--body);font-weight:300}
.contact-detail a:hover{color:var(--gold)}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg-2);border:1px solid var(--line);padding:2.25rem 1.75rem;
  transition:all var(--transition)}
.card:hover{border-color:rgba(227,154,18,.5);transform:translateY(-4px)}
.card h3{font-size:1.12rem;margin-bottom:.8rem;font-weight:600}
.card p{font-size:.92rem;line-height:1.75}
.card-num{font-size:.78rem;letter-spacing:.16em;color:var(--gold);
  font-weight:600;margin-bottom:1rem;display:block}

/* ---------- Figures ---------- */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center}
.fig-num{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:700;color:var(--white);
  letter-spacing:-.03em;line-height:1}
.fig-num em{font-style:normal;color:var(--gold)}
.fig-lbl{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:.75rem}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:calc(var(--nav-h) + 5rem) 0 5rem;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero-inner{position:relative;z-index:2;max-width:760px}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.9rem);margin-bottom:1.25rem}
.page-hero p{font-size:1.05rem;max-width:54ch;line-height:1.85}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 .6rem;opacity:.5}

/* ---------- Search ---------- */
.search-box{position:relative;display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.22);padding:.6rem 0;margin-bottom:2.5rem}
.search-box input{flex:1;background:transparent;border:none;color:var(--white);
  font-family:var(--font);font-size:1.05rem;font-weight:300;padding:.5rem 0}
.search-box input:focus{outline:none}
.search-box input::placeholder{color:var(--muted)}
.search-icon{color:var(--gold)}
.search-clear{display:none;background:none;border:none;color:var(--muted);
  font-size:1.3rem;cursor:pointer;padding:0 .35rem}
.search-count{font-size:.85rem;color:var(--muted);margin-bottom:2rem}

/* ---------- Footer ---------- */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding:5rem 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
.footer .logo-img{height:64px;margin-bottom:1.5rem}
.footer-brand p{font-size:.92rem;line-height:1.8;max-width:34ch}
.social-links{display:flex;gap:.75rem;margin-top:1.6rem}
.social-link{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--gold);flex-shrink:0;
  transition:background var(--transition),border-color var(--transition),
             color var(--transition),transform var(--transition)}
.social-link svg{width:19px;height:19px;fill:currentColor;display:block}
.social-link:hover{background:var(--gold);border-color:var(--gold);
  color:#12162b;transform:translateY(-2px)}
.social-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* a link still pointing at "#" has no destination yet — keep it out of sight
   rather than showing visitors something that goes nowhere */
.social-link[href="#"]{display:none}
.footer-col h4{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);margin-bottom:1.5rem;font-weight:600}
.footer-links li{margin-bottom:.85rem}
.footer-links a{font-size:.93rem;color:var(--body);font-weight:300;
  transition:all var(--transition)}
.footer-links a:hover{color:var(--gold);padding-left:5px}
.footer-contact-item{display:flex;gap:.75rem;margin-bottom:1rem;
  font-size:.92rem;line-height:1.7;font-weight:300}
.footer-contact-icon{color:var(--gold);flex-shrink:0}
.footer-contact-item a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--line);margin-top:4rem;padding:2rem 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;font-size:.86rem;color:var(--muted)}
.footer-legal{display:flex;gap:2rem}
.footer-legal a:hover{color:var(--gold)}

/* ---------- Long-form legal pages ---------- */
.legal{max-width:860px;margin:0 auto}
.legal h2{font-size:1.5rem;margin:3rem 0 1rem;padding-top:2rem;
  border-top:1px solid var(--line);color:var(--white)}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal h3{font-size:1.1rem;margin:2rem 0 .7rem;color:var(--white);font-weight:600}
.legal p{margin-bottom:1.1rem;line-height:1.9}
.legal ul{margin:0 0 1.5rem 1.35rem}
.legal li{margin-bottom:.7rem;line-height:1.85;list-style:disc}
.legal a{color:var(--gold);text-decoration:underline}
.legal table{width:100%;border-collapse:collapse;margin:1.5rem 0 2rem;font-size:.92rem}
.legal th{background:var(--bg-3);color:var(--white);text-align:left;
  padding:.9rem 1rem;font-weight:600}
.legal td{padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.legal-box{background:var(--bg-2);border-left:4px solid var(--gold);
  padding:1.5rem 1.75rem;margin:1.75rem 0}
.legal-box p:last-child{margin-bottom:0}
.legal-toc{background:var(--bg-2);border:1px solid var(--line);padding:2rem;margin-bottom:3rem}
.legal-toc h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem}
.legal-toc ol{margin:0 0 0 1.25rem;columns:2;column-gap:2.5rem}
.legal-toc li{margin-bottom:.55rem;font-size:.93rem;list-style:decimal}
.legal-toc a{text-decoration:none;color:var(--body)}
.legal-toc a:hover{color:var(--gold)}
.legal-updated{display:inline-block;background:var(--bg-3);color:var(--gold);
  font-size:.82rem;padding:.5rem 1.1rem;margin-bottom:2.5rem;letter-spacing:.05em}

/* ---------- Dropzone (upload page) ---------- */
.dropzone{position:relative;border:2px dashed rgba(255,255,255,.25);
  background:var(--bg-2);padding:3.5rem 2rem;text-align:center;cursor:pointer;
  transition:all var(--transition)}
.dropzone:hover,.dropzone.dragover{border-color:var(--gold);background:var(--bg-3)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dz-icon{font-size:2.4rem;margin-bottom:1rem}
.dz-title{font-weight:600;color:var(--white);font-size:1.08rem;margin-bottom:.4rem}
.dz-sub{font-size:.92rem;color:var(--body)}
.dz-formats{font-size:.82rem;color:var(--muted);margin-top:1rem}
.file-list{margin-top:1.5rem;display:none}
.file-list.has-files{display:block}
.file-item{display:flex;align-items:center;gap:1rem;background:var(--bg-2);
  border:1px solid var(--line);padding:.9rem 1.1rem;margin-bottom:.7rem}
.file-ico{width:40px;height:40px;flex-shrink:0;background:var(--bg-3);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600}
.file-meta{flex:1;min-width:0}
.file-name{font-size:.92rem;color:var(--white);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:.8rem;color:var(--muted)}
.file-remove{background:none;border:none;color:var(--muted);font-size:1.3rem;
  cursor:pointer;padding:.3rem .5rem}
.file-remove:hover{color:#ff6b6b}
.file-item.too-big{border-color:rgba(255,107,107,.5)}
.file-error{color:#ff6b6b;font-size:.8rem;font-weight:500}
.up-total{display:flex;justify-content:space-between;font-size:.85rem;
  color:var(--muted);padding-top:.8rem;border-top:1px solid var(--line);margin-top:.8rem}
.up-consent{display:flex;gap:.9rem;align-items:flex-start;background:var(--bg-2);
  padding:1.25rem 1.4rem;margin:2rem 0;border:1px solid var(--line)}
.up-consent input{width:18px;height:18px;margin-top:.2rem;flex-shrink:0;accent-color:var(--gold)}
.up-consent label{font-size:.9rem;line-height:1.7;font-weight:300}
.up-consent a{color:var(--gold);text-decoration:underline}
.up-note{background:var(--bg-2);border-left:4px solid var(--gold);
  padding:1.5rem 1.75rem;margin-bottom:2.5rem}
.up-note p{font-size:.92rem;margin:0}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem 2rem;margin-top:1.25rem}
.checklist li{font-size:.9rem;display:flex;gap:.6rem;font-weight:300}
.checklist .tick{color:var(--gold);font-weight:700}
.up-alert{display:none;padding:1.15rem 1.4rem;margin-bottom:2rem;font-size:.95rem}
.up-alert.ok{display:block;background:rgba(46,160,90,.14);
  border:1px solid rgba(46,160,90,.45);color:#7fd6a2}
.up-alert.err{display:block;background:rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.4);color:#ff9d9d}
.req{color:#ff8f8f}
label{display:block;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem;font-weight:500}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .nav-inner{grid-template-columns:auto auto}
  .hamburger{display:flex;justify-self:end}
  .nav-menu{position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:1rem 2rem 2rem;
    display:none}
  .nav-menu.open{display:flex}
  .nav-menu li{width:100%}
  .nav-link{display:block;padding:1rem 0;border-bottom:1px solid var(--line);width:100%}
  .nav-cta{display:none}
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:3rem}
  .split.media-left .split-media,.split.media-left .split-copy{order:0}
  .framed::before{inset:-8% -5% 14% 12%}
  .figures{grid-template-columns:1fr;gap:2.5rem}
  .legal-toc ol{columns:1}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media(max-width:640px){
  :root{--nav-h:74px}
  .wrap{padding:0 1.25rem}
  .band{padding:3.5rem 0}
  .hero{padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:3rem}
  .logo-img{height:52px}
  .info-bar{font-size:.72rem}
  .info-bar-items:last-child{display:none}
  .info-bar-items{gap:1rem}
  .quote-band{padding:4rem 0}
  .card-grid,.card-grid-3,.field-row,.contact-detail-grid,
  .checklist,.footer-grid{grid-template-columns:1fr}
  .btn{width:100%;padding:1rem 1.5rem}
  .hero-actions{flex-direction:column}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .legal table,.legal thead,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal thead{display:none}
  .legal tr{border:1px solid var(--line);margin-bottom:1rem;padding:.5rem 0}
  .legal td{border-bottom:none;padding:.5rem 1rem}
  .legal td:first-child{color:var(--white);font-weight:600}
}

/* Keep the offset frame inside the viewport on narrower screens */
@media(max-width:1100px){
  .framed::before{inset:-8% 0 14% 10%}
}
@media(max-width:900px){
  .framed::before{inset:-5% 0 10% 8%}
  .svc-media{padding-left:1.5rem}
}

/* ---------- Form status banner ---------- */
.form-alert{display:none;padding:1.15rem 1.4rem;margin-bottom:2rem;font-size:.95rem;
  border-left:4px solid transparent}
.form-alert.ok{display:block;background:rgba(46,160,90,.14);
  border-color:#3fbd76;color:#8fe0b0}
.form-alert.err{display:block;background:rgba(255,107,107,.12);
  border-color:#ff6b6b;color:#ffa8a8}

/* ---------- Course list ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.filter-chip{background:transparent;border:1px solid var(--line);color:var(--body);
  font-family:var(--font);font-size:.86rem;font-weight:400;letter-spacing:.04em;
  padding:.6rem 1.4rem;cursor:pointer;transition:all var(--transition)}
.filter-chip:hover{border-color:var(--gold);color:var(--gold)}
.filter-chip.active{background:var(--gold);border-color:var(--gold);
  color:#12162b;font-weight:600}

.course-group{margin-bottom:3.5rem}
.group-title{display:flex;align-items:center;gap:1rem;width:100%;
  background:var(--bg-2);border:1px solid var(--line);border-radius:0;
  padding:1.15rem 1.4rem;margin:0 0 .6rem;cursor:pointer;font:inherit;
  color:var(--white);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  text-align:left;transition:border-color var(--transition),background var(--transition)}
.group-title:hover{border-color:rgba(227,154,18,.5);background:var(--bg-3)}
.group-title:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.group-name{flex:1}
.group-count{flex-shrink:0;font-size:.75rem;font-weight:600;letter-spacing:.06em;
  color:var(--gold);background:rgba(227,154,18,.12);padding:.25rem .6rem;
  border:1px solid rgba(227,154,18,.3)}
.group-title::after{content:'';flex-shrink:0;width:10px;height:10px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-3px) rotate(45deg);transition:transform .3s ease}
.course-group.open .group-title::after{transform:translateY(2px) rotate(225deg)}
.course-group.open .group-title{border-color:rgba(227,154,18,.45)}
/* closed by default — this is what keeps the page from dumping 45 cards at once */
.course-group:not(.open) .course-grid{display:none}
.course-group{margin-bottom:.6rem}
.course-group.open .course-grid{margin-bottom:2.25rem;animation:grp-in .35s ease both}
@keyframes grp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.course-card{background:var(--bg-2);border:1px solid var(--line);
  padding:1.9rem 1.6rem;display:flex;flex-direction:column;gap:.85rem;
  transition:all var(--transition)}
.course-card:hover{border-color:rgba(227,154,18,.55);transform:translateY(-4px)}
.course-level{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.course-card h3{font-size:1.06rem;line-height:1.35;font-weight:600;flex:1}
.course-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--white);
  font-size:.84rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  transition:all var(--transition)}
.course-link::after{content:'\2192';transition:transform var(--transition)}
.course-card:hover .course-link{color:var(--gold)}
.course-card:hover .course-link::after{transform:translateX(5px)}
.no-results{display:none;padding:2.5rem;text-align:center;background:var(--bg-2);
  border:1px solid var(--line);color:var(--body)}

@media(max-width:1000px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .course-grid{grid-template-columns:1fr}
  .filter-chip{flex:1;text-align:center;padding:.6rem .9rem}
}

/* ---------- Study locations strip ---------- */
.locations-band{background:var(--bg-3);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.locations-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
.locations-inner p{font-size:1rem;line-height:1.9}
@media(max-width:900px){
  .locations-inner{grid-template-columns:1fr;gap:1.5rem}
}

/* ---------- Trustpilot band ---------- */
.trustpilot-band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustpilot-band .tp-inner{text-align:center;max-width:640px;margin:0 auto}
.trustpilot-band .eyebrow{justify-content:center}
.trustpilot-band .tp-lead{margin:1.25rem auto 1.5rem;max-width:52ch}
.trustpilot-band .tp-read{margin:0 0 2rem}
.trustpilot-band .tp-read a{color:var(--gold);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(227,154,18,.4);padding-bottom:2px}
.trustpilot-band .tp-read a:hover{border-bottom-color:var(--gold)}
.trustpilot-band .trustpilot-widget{min-height:52px}
.trustpilot-band .trustpilot-widget > a{color:var(--gold);text-decoration:none;font-weight:500}
.trustpilot-band .trustpilot-widget > a:hover{text-decoration:underline}
.fig-note{margin-top:.45rem;font-size:.72rem;letter-spacing:.02em;
  color:rgba(255,255,255,.32);font-weight:300}

/* Single-column variant of .split, used where there is no photo */
.split.no-media{grid-template-columns:1fr;max-width:820px;gap:0}

/* ---------- Cookie consent ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--bg-2);border-top:2px solid var(--gold);
  box-shadow:0 -18px 50px rgba(0,0,0,.45);
  transform:translateY(100%);transition:transform .3s ease}
.cookie-banner.open{transform:translateY(0)}
.cookie-inner{max-width:var(--wrap);margin:0 auto;padding:2rem 2.5rem;
  display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:center}
.cookie-copy h2{font-size:1.15rem;color:var(--white);margin:0 0 .65rem;letter-spacing:-.01em}
.cookie-copy p{margin:0 0 .5rem;font-size:.9rem;line-height:1.65;max-width:70ch}
.cookie-more{margin:0}
.cookie-more a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(227,154,18,.4)}
.cookie-more a:hover{border-bottom-color:var(--gold)}
.cookie-actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch;min-width:210px}
.cookie-actions .btn{width:100%;justify-content:center;text-align:center;padding:.85rem 1.5rem;font-size:.78rem}
.cookie-link{background:none;border:0;color:var(--muted);font:inherit;font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:.35rem;
  text-decoration:underline;text-underline-offset:3px}
.cookie-link:hover{color:var(--gold)}

.cookie-prefs{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.25rem}
.cookie-row{display:flex;gap:2rem;align-items:flex-start;justify-content:space-between;
  padding:.9rem 0;border-bottom:1px solid var(--line)}
.cookie-row strong{display:block;color:var(--white);font-size:.92rem;font-weight:600;margin-bottom:.2rem}
.cookie-row span{display:block;font-size:.82rem;color:var(--body);line-height:1.55;max-width:68ch}
.cookie-always{flex-shrink:0;color:var(--muted);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;padding-top:.2rem}
.cookie-switch{flex-shrink:0;position:relative;width:46px;height:26px;cursor:pointer;margin-top:.15rem}
.cookie-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cookie-switch span{position:absolute;inset:0;background:var(--bg-3);border:1px solid var(--line);
  border-radius:26px;transition:background .2s,border-color .2s;pointer-events:none}
.cookie-switch span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.cookie-switch input:checked + span{background:var(--gold-deep);border-color:var(--gold)}
.cookie-switch input:checked + span::after{transform:translateX(20px);background:var(--white)}
.cookie-switch input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.cookie-prefs .btn{margin-top:1.5rem}

@media (max-width:900px){
  .cookie-inner{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem 1.25rem;
    max-height:85vh;overflow-y:auto}
  .cookie-actions{min-width:0}
  .cookie-row{flex-direction:row;gap:1.25rem}
}

/* ============================================================
   MOTION COMPONENTS
   ============================================================ */

/* ---------- A. Marquee ---------- */
.marquee{overflow:hidden;position:relative;padding:1.6rem 0;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee.on-alt{background:var(--bg-2)}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;
  width:110px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.marquee.on-alt::before{background:linear-gradient(to right,var(--bg-2),transparent)}
.marquee.on-alt::after{background:linear-gradient(to left,var(--bg-2),transparent)}
.marquee-track{display:flex;gap:3.5rem;width:max-content;
  animation:bb-slide 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:1rem;white-space:nowrap;
  font-size:1.02rem;font-weight:400;color:var(--body)}
.marquee-item::before{content:'';width:6px;height:6px;background:var(--gold);flex-shrink:0}
@keyframes bb-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:700px){
  .marquee-track{gap:2.25rem;animation-duration:22s}
  .marquee-item{font-size:.92rem}
  .marquee::before,.marquee::after{width:50px}
}

/* ---------- E. FAQ: heading + photo one side, question cards the other ---------- */
.faq-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
.faq-intro{position:sticky;top:calc(var(--nav-h) + 2rem)}
.faq-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.75rem}
.faq-badge::before{content:'?';display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--gold);color:#12162b;
  font-size:.7rem;font-weight:800}
.faq-intro p{margin-top:1.5rem;max-width:42ch}
.faq-photo{margin-top:2.5rem;overflow:hidden;border-radius:18px;
  box-shadow:0 22px 50px rgba(0,0,0,.4)}
.faq-photo img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

/* the cards */
.accordion{display:flex;flex-direction:column;gap:.85rem}
.acc-item{background:var(--bg-3);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:border-color .3s ease,background .3s ease}
.acc-item:hover{border-color:rgba(227,154,18,.35)}
.acc-item.open{border-color:rgba(227,154,18,.5);background:var(--bg-2)}
.acc-q{display:flex;align-items:center;gap:1.25rem;width:100%;
  background:none;border:0;color:var(--white);font:inherit;font-size:1.02rem;
  font-weight:600;text-align:left;line-height:1.5;padding:1.5rem 1.6rem;cursor:pointer;
  transition:color .3s ease}
.acc-item.open .acc-q{color:var(--gold)}
.acc-q:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
/* the circular +/− */
.acc-q::after{content:'';flex-shrink:0;margin-left:auto;width:34px;height:34px;
  border-radius:50%;background:rgba(255,255,255,.07);
  background-image:
    linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold));
  background-size:13px 2px, 2px 13px;
  background-position:center, center;
  background-repeat:no-repeat;
  transition:background-color .3s ease,background-size .3s ease,transform .3s ease}
.acc-item.open .acc-q::after{background-color:var(--gold);
  background-image:linear-gradient(#12162b,#12162b),linear-gradient(#12162b,#12162b);
  background-size:13px 2px, 0 13px;   /* the upright stroke collapses: + becomes − */
  transform:rotate(180deg)}
.acc-a{overflow:hidden;height:0;transition:height .35s ease}
.acc-a p{margin:0 0 1rem;padding:0 1.6rem;color:var(--body);line-height:1.8;font-size:.94rem}
.acc-a p:first-child{padding-top:.25rem}
.acc-a p:last-child{margin-bottom:1.6rem}

@media (max-width:960px){
  .faq-split{grid-template-columns:1fr;gap:2.5rem}
  .faq-intro{position:static}
  .faq-photo{margin-top:2rem;max-width:520px}
  .acc-q{font-size:.97rem;padding:1.3rem 1.25rem;gap:1rem}
  .acc-a p{padding:0 1.25rem}
  .acc-a p:last-child{margin-bottom:1.35rem}
}

/* ---------- F. Journey steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:1rem}
.steps::before{content:'';position:absolute;top:26px;left:12.5%;right:12.5%;
  height:1px;background:var(--line)}
.steps-fill{position:absolute;top:26px;left:12.5%;height:1px;background:var(--gold);
  width:0;transition:width 1.6s ease}
.step{text-align:center;padding:0 1rem;position:relative;z-index:2}
.step-dot{width:52px;height:52px;margin:0 auto 1.6rem;border:1px solid var(--line);
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;color:var(--muted);
  transition:background .4s ease,border-color .4s ease,color .4s ease}
.band-alt .step-dot{background:var(--bg-2)}
.step.on .step-dot{border-color:var(--gold);background:var(--gold);color:#12162b}
.step h4{font-size:1rem;color:var(--white);margin-bottom:.6rem}
.step p{font-size:.88rem;color:var(--muted);line-height:1.65;margin:0}
@media (max-width:880px){
  .steps{grid-template-columns:1fr;gap:2rem}
  .steps::before,.steps-fill{display:none}
  .step{display:grid;grid-template-columns:52px 1fr;gap:1.5rem;
    text-align:left;align-items:start;padding:0}
  .step-dot{margin:0}
}

/* ---------- H. Journey selector ----------
   Timer-driven. The active step carries a progress bar underneath it;
   when the bar fills, the next step takes over. Clicking jumps straight
   to a step and restarts its timer. Works identically on mobile, where
   the panel sits above the list instead of beside it.
   ------------------------------------------------------------------ */
.jrn{display:grid;grid-template-columns:.78fr 1.22fr;gap:3.25rem;align-items:center}

.jrn-list{display:flex;flex-direction:column;gap:.3rem}
.jrn-step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  text-align:left;background:transparent;border:0;cursor:pointer;font:inherit;width:100%;
  padding:1.35rem 1.4rem 1.5rem;border-radius:14px;
  transition:background .4s ease,box-shadow .4s ease}
.jrn-step:hover{background:rgba(255,255,255,.035)}
.jrn-step.on{background:var(--bg-3);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.jrn-step:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.jrn-n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--muted);
  background:transparent;border-radius:9px;
  transition:background .4s,color .4s}
.jrn-step.on .jrn-n{background:var(--gold);color:#12162b}

.jrn-txt{display:block;min-width:0}
.jrn-txt strong{display:block;color:rgba(255,255,255,.45);font-size:1.05rem;
  font-weight:600;margin-bottom:.32rem;transition:color .4s}
.jrn-step.on .jrn-txt strong{color:var(--white)}
.jrn-txt em{display:block;font-style:normal;font-size:.86rem;color:var(--muted);
  line-height:1.6;transition:color .4s}
.jrn-step.on .jrn-txt em{color:var(--body)}

/* the timer bar — visible only on the active step */
.jrn-prog{display:block;height:2px;margin-top:1.05rem;background:rgba(255,255,255,.13);
  opacity:0;transition:opacity .3s}
.jrn-step.on .jrn-prog{opacity:1}
.jrn-prog i{display:block;height:100%;width:0;background:var(--gold)}
.jrn-step.on .jrn-prog i.run{animation:jrn-fill var(--jrn-dur,7s) linear forwards}
@keyframes jrn-fill{from{width:0}to{width:100%}}

/* the panel — the photograph is the hero, content sits at the bottom */
.jrn-stage{position:relative;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);border-radius:22px;min-height:580px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:2.25rem}
.jrn-photos{position:absolute;inset:0;z-index:0}
.jrn-photo{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  background-size:cover;background-position:center;
  background-image:linear-gradient(150deg,#17357f 0%,#0e1327 70%)}
.jrn-photo.on{opacity:1}
.jrn-stage.has-photo::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(9,13,28,.97) 0%, rgba(9,13,28,.92) 28%, rgba(9,13,28,.68) 50%,
    rgba(9,13,28,.28) 72%, rgba(9,13,28,.05) 100%)}

.jrn-chips{position:absolute;top:1.6rem;left:1.6rem;right:1.6rem;z-index:3;
  display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.jrn-chips .chip{display:inline-flex;align-items:center;gap:.45rem;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:#0f1428;border:0;padding:.5rem 1.05rem;
  border-radius:999px;font-weight:500;box-shadow:0 4px 14px rgba(0,0,0,.22);white-space:nowrap}
.jrn-chips [data-jrn-chip]::before{content:'';width:13px;height:13px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:var(--chip-icon) center/contain no-repeat;
          mask:var(--chip-icon) center/contain no-repeat}
.jrn-chips .chip b{color:#0f1428;font-weight:700}

.jrn-panel{display:none;grid-template-columns:1.12fr .88fr;gap:2rem;
  align-items:end;position:relative;z-index:2}
.jrn-panel.on{display:grid;animation:jrn-in .55s ease both}
@keyframes jrn-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.jrn-big{display:flex;align-items:center;gap:.7rem;font-size:2.9rem;font-weight:800;
  color:var(--gold);line-height:1;letter-spacing:-.04em;margin-bottom:.6rem}
.jrn-big::after{content:'';width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.jrn-body h3{font-size:2.1rem;margin-bottom:.5rem;line-height:1.06;
  text-shadow:0 2px 18px rgba(0,0,0,.5)}
.jrn-sub{color:var(--gold);font-weight:600;font-size:.97rem;margin-bottom:1rem;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.jrn-body p{font-size:.94rem;line-height:1.8;color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.6)}

.jrn-time{background:rgba(8,11,24,.88);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:1.35rem 1.25rem;min-width:0}
.jrn-time-h{display:flex;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:1.05rem}
.jrn-time-h::before{content:'\25F4';font-size:.9rem;color:rgba(255,255,255,.62)}
.jrn-time li{position:relative;padding-left:1.15rem;margin-bottom:.9rem;font-size:.85rem}
.jrn-time li:last-child{margin-bottom:0}
.jrn-time li::before{content:'';position:absolute;left:0;top:.42rem;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.jrn-time li.dim::before{background:rgba(255,255,255,.4)}
.jrn-time li b{display:block;color:var(--white);font-weight:600;margin-bottom:.1rem;line-height:1.4}
.jrn-time li span{color:rgba(255,255,255,.6);font-size:.8rem}

@media(max-width:1100px){
  .jrn{gap:2.5rem}
  .jrn-panel{grid-template-columns:1fr}
  .jrn-time{margin-top:.5rem}
}
/* MOBILE: panel on top, list underneath. Same timer, same bar. */
@media(max-width:960px){
  .jrn{grid-template-columns:1fr;gap:1.75rem}
  .jrn-media{order:-1}
  .jrn-stage{min-height:440px;padding:5.75rem 1.6rem 1.75rem}
  .jrn-body h3{font-size:1.75rem}
  .jrn-big{font-size:2.4rem}
  .jrn-step{padding:1.1rem 1rem 1.2rem}
  .jrn-chips{top:1.1rem;left:1.1rem;right:1.1rem}
}
@media(max-width:520px){
  .jrn-stage{min-height:400px;padding:5.5rem 1.25rem 1.5rem}
  .jrn-body h3{font-size:1.45rem}
  .jrn-big{font-size:2.1rem}
  .jrn-chips .chip{font-size:.62rem;padding:.38rem .6rem;letter-spacing:.03em}
  .jrn-n{width:30px;height:30px;font-size:.72rem}
  .jrn-txt strong{font-size:.97rem}
}

/* ============================================================
   FOOTER — white on every screen size, with a wave breaking
   into it from the dark page above.
   The navy logo is used throughout, since the white-out version
   would disappear against white.
   ============================================================ */
.footer-wave{display:block;line-height:0;margin-top:-1px}
.footer-wave svg{display:block;width:100%;height:70px}
.footer-wave path{fill:#ffffff}

/* one logo, not two: the navy one, everywhere */
.footer .logo-on-dark{display:none}
.footer .logo-on-light{display:block}

.footer{background:#ffffff;border-top:0;color:#41506e}
.footer-brand p{color:#41506e}
.footer-col h4{color:#0f1428}
.footer-links a,
.footer-contact-item,
.footer-contact-item a,
.footer-contact-item span{color:#41506e}
.footer-links a:hover,
.footer-contact-item a:hover{color:var(--gold-deep)}
.footer-contact-icon{color:var(--gold-deep)}
.footer-bottom{border-top:1px solid rgba(15,20,40,.14)}
.footer-bottom p{color:#5a6a86}
.footer-legal a{color:#41506e}
.footer-legal a:hover{color:var(--gold-deep)}
.footer .social-link{border-color:rgba(15,20,40,.2);color:#0f1428}
.footer .social-link:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}

@media (max-width:960px){ .footer-wave svg{height:52px} }
@media (max-width:520px){ .footer-wave svg{height:40px} }
}

/* ============================================================
   SCROLL REVEAL — applied site-wide by motion.js
   Blocks rise gently as they come into view. Runs once each.
   Anyone with reduce-motion on sees everything already in place.
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.seen{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
}


/* small mark on the right-hand chip, matching theirs */
.jrn-chips [data-jrn-chip]{--chip-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm-8 1a3 3 0 1 0-3-3 3 3 0 0 0 3 3Zm0 2c-2.7 0-8 1.34-8 4v3h9v-3c0-1.1.62-2.06 1.6-2.77A13.6 13.6 0 0 0 8 14Zm8 0c-3 0-9 1.5-9 4.5V21h18v-2.5c0-3-6-4.5-9-4.5Z'/%3E%3C/svg%3E")}

/* ============================================================
   FLOATING PHOTO CARDS
   Overlapping squares, each drifting on its own clock so they
   never fall into step. Square corners, to match the rest of
   the site. Reduce-motion holds them still.
   ============================================================ */
.collage{position:relative;aspect-ratio:1/.94;min-height:360px}
.pc{position:absolute;overflow:hidden;border:6px solid rgba(255,255,255,.94);
  box-shadow:0 26px 60px rgba(0,0,0,.42);background:var(--bg-3);will-change:transform}
.pc img{width:100%;height:100%;object-fit:cover;display:block}
.pc-1{left:0;    top:6%;   width:47%; aspect-ratio:3/4; z-index:3;
  animation:drift-a 7.5s ease-in-out infinite}
.pc-2{right:2%;  top:0;    width:50%; aspect-ratio:4/3; z-index:2;
  animation:drift-b 9.2s ease-in-out infinite}
.pc-3{right:8%;  bottom:0; width:44%; aspect-ratio:1/1; z-index:4;
  animation:drift-c 8.1s ease-in-out infinite}
.pc-4{left:12%;  bottom:4%;width:34%; aspect-ratio:4/5; z-index:1;
  animation:drift-d 10.4s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) rotate(-1.4deg)}
                   50%    {transform:translate3d(0,-16px,0) rotate(-.4deg)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,-8px,0) rotate(1.6deg)}
                   50%    {transform:translate3d(0,10px,0) rotate(.5deg)}}
@keyframes drift-c{0%,100%{transform:translate3d(0,6px,0) rotate(.8deg)}
                   50%    {transform:translate3d(0,-14px,0) rotate(-.6deg)}}
@keyframes drift-d{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
                   50%    {transform:translate3d(0,12px,0) rotate(-.8deg)}}
.collage::before{content:'';position:absolute;right:-10%;top:-16%;width:62%;height:125%;
  background:radial-gradient(closest-side,rgba(120,170,255,.16),transparent 72%);
  pointer-events:none;z-index:0}
@media (max-width:960px){
  .collage{min-height:330px;max-width:520px;margin:0 auto;width:100%}
}
@media (max-width:520px){
  .collage{min-height:280px}
  .pc{border-width:4px}
}
@media (prefers-reduced-motion: reduce){
  .pc{animation:none!important}
}

/* ============================================================
   Website assistant — the professor and his panel (chat.js)
   ============================================================ */
.bb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bb-link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:inherit;color:var(--gold);text-decoration:underline}

.bb-chat{position:fixed;right:1.4rem;bottom:1.4rem;z-index:9500;
  font-family:var(--font);display:flex;flex-direction:column;align-items:flex-end;gap:.85rem}
body:has(.cookie-banner) .bb-chat{display:none}

/* ---------- the professor ---------- */
.bb-prof{display:block;width:100%;height:100%}
.bb-prof .bb-prof-head{transform-box:view-box;transform-origin:50px 78px;
  transition:transform .45s cubic-bezier(.34,1.3,.64,1)}
.bb-prof .bb-prof-eyes,
.bb-prof .bb-prof-brows{transform-box:view-box;transform-origin:50px 53px;
  transition:transform .35s ease}
.bb-prof .bb-prof-eye{transform-box:fill-box;transform-origin:center;
  animation:bb-blink 6.5s infinite}
.bb-prof .bb-prof-tassel{transform-box:view-box;transform-origin:50px 34px;
  animation:bb-tassel 4.2s ease-in-out infinite}
@keyframes bb-blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes bb-tassel{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}

/* mouth: the resting smile is the default, the rest fade in on cue */
.bb-prof .bb-prof-purse,
.bb-prof .bb-prof-grin,
.bb-prof .bb-prof-talk{opacity:0}
.bb-prof .bb-prof-talk{transform-box:fill-box;transform-origin:center}

/* the waving arm sits out of frame until he uses it */
.bb-prof .bb-prof-arm{transform-box:view-box;transform-origin:70px 98px;
  transform:rotate(52deg) translateY(16px);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.4,.64,1),opacity .25s ease}

/* a slow breath, so he is never quite still */
.bb-prof-live .bb-prof-head{animation:bb-breathe 5.4s ease-in-out infinite}
@keyframes bb-breathe{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-.7px) rotate(.8deg)}}

/* thinking — head tilts, eyes go up and away, mouth pursed */
.is-thinking .bb-prof-head{animation:none;transform:rotate(-8deg) translateY(-1px)}
.is-thinking .bb-prof-eyes{transform:translate(2px,-2px)}
.is-thinking .bb-prof-brows{transform:translateY(-2px)}
.is-thinking .bb-prof-smile{opacity:0}
.is-thinking .bb-prof-purse{opacity:1}

/* talking — the lips move */
.is-talking .bb-prof-head{animation:bb-talk-nod 1.6s ease-in-out infinite}
.is-talking .bb-prof-smile{opacity:0}
.is-talking .bb-prof-talk{opacity:1;animation:bb-lips .26s ease-in-out infinite}
@keyframes bb-lips{0%,100%{transform:scaleY(.22) scaleX(.92)}
  40%{transform:scaleY(1) scaleX(1)}70%{transform:scaleY(.5) scaleX(.96)}}
@keyframes bb-talk-nod{0%,100%{transform:rotate(0) translateY(0)}
  50%{transform:rotate(1.6deg) translateY(-.8px)}}

/* pleased — a proper grin */
.is-happy .bb-prof-smile{opacity:0}
.is-happy .bb-prof-grin{opacity:1}
.is-happy .bb-prof-eye{animation:none;transform:scaleY(.55)}

/* waving — hello and goodbye */
.is-waving .bb-prof-arm{opacity:1;transform:rotate(0);
  animation:bb-wave 1.5s ease-in-out 2}
@keyframes bb-wave{0%,100%{transform:rotate(-4deg)}
  25%{transform:rotate(16deg)}75%{transform:rotate(-16deg)}}

@media (prefers-reduced-motion:reduce){
  .bb-prof *{animation:none!important;transition:none!important}
}

/* ---------- launcher ---------- */
.bb-chat-fab{order:2;display:inline-flex;align-items:center;gap:.7rem;
  padding:.45rem 1.25rem .45rem .5rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--gold);color:#12162b;font-family:inherit;font-size:.95rem;
  font-weight:600;line-height:1;
  box-shadow:0 14px 34px rgba(0,0,0,.34);transition:transform var(--transition),box-shadow var(--transition)}
.bb-chat-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.42)}
.bb-chat-fab-face{width:44px;height:44px;flex-shrink:0;border-radius:50%;
  overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.bb-chat-fab-close{display:none}
.bb-chat-fab-close svg{width:20px;height:20px;display:block}
.bb-chat.open .bb-chat-fab-face,
.bb-chat.open .bb-chat-fab-label{display:none}
.bb-chat.open .bb-chat-fab-close{display:block}
.bb-chat.open .bb-chat-fab{padding:.85rem;border-radius:50%}

/* ---------- panel ---------- */
.bb-chat-panel{order:1;width:min(390px,calc(100vw - 2.8rem));
  max-height:min(640px,calc(100vh - 7rem));display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.5);
  animation:bb-chat-in .22s ease both}
/* display:flex would otherwise beat the hidden attribute and the panel
   would sit open on every page load. */
.bb-chat-panel[hidden]{display:none}
@keyframes bb-chat-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bb-chat-panel{animation:none}}

/* The header keeps room above the title so his speech bubble always has
   somewhere to sit without spilling out of the panel. */
.bb-chat-head{position:relative;display:flex;align-items:flex-end;gap:.85rem;
  padding:2.6rem 1.15rem 1rem;background:var(--navy);border-bottom:1px solid var(--line)}
.bb-prof-stage{width:60px;height:60px;flex-shrink:0;border-radius:50%;
  overflow:visible;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
.bb-prof-stage .bb-prof{border-radius:50%}
.bb-chat-title{flex:1;min-width:0}
.bb-chat-title strong{display:block;color:var(--white);font-size:1.02rem;font-weight:600;line-height:1.3}
.bb-chat-status{display:block;color:var(--muted);font-size:.75rem;line-height:1.4}

/* his own little speech bubble */
.bb-prof-says{position:absolute;left:5.05rem;right:2.6rem;top:.62rem;z-index:2;
  width:fit-content;max-width:none;padding:.4rem .7rem;border-radius:12px;border-bottom-left-radius:4px;
  background:var(--white);color:#12162b;font-size:.79rem;font-weight:500;line-height:1.35;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  opacity:0;transform:translateY(6px) scale(.94);transform-origin:0 100%;
  pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.4,.64,1)}
.bb-prof-says::after{content:'';position:absolute;left:.7rem;top:100%;
  border:6px solid transparent;border-top-color:var(--white);border-bottom:0}
.bb-prof-says.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bb-prof-says{transition:none}}

.bb-chat-x{background:none;border:0;padding:.3rem;cursor:pointer;color:var(--muted);
  transition:color var(--transition)}
.bb-chat-x:hover{color:var(--white)}
.bb-chat-x svg{width:19px;height:19px;display:block}

/* ---------- log ---------- */
.bb-chat-log{flex:1;overflow-y:auto;padding:1.15rem 1.1rem;display:flex;
  flex-direction:column;gap:.7rem}
.bb-msg{display:flex}
.bb-msg-you{justify-content:flex-end}
.bb-bubble{max-width:88%;padding:.7rem .95rem;border-radius:15px;
  font-size:.92rem;line-height:1.6;font-weight:300;white-space:pre-wrap;word-break:break-word;
  min-height:1.2em}
.bb-msg-bot .bb-bubble{background:var(--bg-3);color:rgba(255,255,255,.88);border-bottom-left-radius:5px}
.bb-msg-you .bb-bubble{background:var(--gold);color:#12162b;font-weight:400;border-bottom-right-radius:5px}
.bb-note{font-size:.84rem;line-height:1.55;color:var(--muted);text-align:center;padding:.2rem .5rem}
.bb-offer{color:rgba(255,255,255,.62)}

.bb-thinking .bb-bubble{display:flex;gap:5px;align-items:center;padding:.85rem 1rem}
.bb-thinking span{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:bb-dot 1.2s infinite ease-in-out}
.bb-thinking span:nth-child(2){animation-delay:.18s}
.bb-thinking span:nth-child(3){animation-delay:.36s}
@keyframes bb-dot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.bb-thinking span{animation:none;opacity:.6}}

/* ---------- handing over to a person ---------- */
.bb-stuck{background:var(--bg-3);border:1px solid var(--line);border-radius:15px;
  padding:.95rem 1rem}
.bb-stuck > p{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.86);margin-bottom:.75rem}
.bb-wa{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.05rem;
  border-radius:999px;background:#25D366;color:#06301a;font-size:.88rem;font-weight:600;
  transition:transform var(--transition),filter var(--transition)}
.bb-wa:hover{transform:translateY(-1px);filter:brightness(1.06)}
.bb-wa svg{width:19px;height:19px;flex-shrink:0}
.bb-stuck-alt{margin-top:.75rem;font-size:.82rem;line-height:1.55;color:var(--muted)}
.bb-stuck-alt a{color:var(--gold);text-decoration:underline}

/* ---------- leaving details ---------- */
.bb-lead{background:var(--bg-3);border:1px solid var(--line);border-radius:15px;
  padding:1rem 1.05rem}
.bb-lead-intro{font-size:.89rem;line-height:1.6;color:rgba(255,255,255,.86);margin-bottom:.85rem}
.bb-lead-form label{display:block;font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.bb-lead-form input[type=text],
.bb-lead-form input[type=email]{width:100%;margin-top:.32rem;padding:.6rem .8rem;
  border:1px solid var(--line);border-radius:11px;background:var(--bg);
  color:var(--white);font-family:inherit;font-size:.92rem;font-weight:300}
.bb-lead-form input:focus{outline:none;border-color:var(--gold)}
.bb-check{display:flex!important;gap:.6rem;align-items:flex-start;
  text-transform:none!important;letter-spacing:0!important;font-size:.79rem!important;
  line-height:1.55;color:var(--body)!important}
.bb-check input{flex-shrink:0;margin-top:.22rem;width:16px;height:16px;accent-color:var(--gold)}
.bb-check a{color:var(--gold);text-decoration:underline}
.bb-lead-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.3rem}
.bb-lead-actions .btn{padding:.6rem 1.15rem;font-size:.85rem}
.bb-lead-no{background:none;border:0;padding:.3rem;cursor:pointer;color:var(--muted);
  font-family:inherit;font-size:.85rem;text-decoration:underline}
.bb-lead-no:hover{color:var(--white)}
.bb-lead-err{margin-top:.7rem;font-size:.82rem;line-height:1.5;color:#ffb4a8}

/* ---------- composer ---------- */
.bb-chat-form{display:flex;align-items:flex-end;gap:.6rem;padding:.8rem .9rem;
  border-top:1px solid var(--line);background:var(--bg-2)}
.bb-chat-form textarea{flex:1;resize:none;max-height:120px;padding:.65rem .85rem;
  border:1px solid var(--line);border-radius:13px;background:var(--bg);
  color:var(--white);font-family:inherit;font-size:.92rem;font-weight:300;line-height:1.55}
.bb-chat-form textarea::placeholder{color:var(--muted)}
.bb-chat-form textarea:focus{outline:none;border-color:var(--gold)}
.bb-chat-send{flex-shrink:0;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:var(--gold);color:#12162b;display:grid;place-items:center;
  transition:opacity var(--transition)}
.bb-chat-send svg{width:19px;height:19px}
.bb-chat-send:disabled{opacity:.45;cursor:default}

.bb-chat-foot{padding:0 1.1rem .95rem;font-size:.71rem;line-height:1.5;color:var(--muted)}
.bb-chat-foot a{color:var(--gold);text-decoration:underline}

/* ---------- small screens ---------- */
@media (max-width:520px){
  .bb-chat{right:.9rem;bottom:.9rem;left:.9rem;align-items:stretch}
  .bb-chat-fab{align-self:flex-end}
  .bb-chat-panel{width:100%;max-height:calc(100vh - 8.5rem)}
  .bb-prof-says{font-size:.75rem}
}

/* ============================================================
   Language switcher (i18n.js)
   ============================================================ */
.footer-langs{padding:1.6rem 0 .4rem;border-top:1px solid rgba(0,0,0,.08)}
.lang-switch{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.lang-label{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#5a6274}
.lang-label svg{width:16px;height:16px}
.lang-list{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.lang-list button{display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:.2rem .82rem;border:1px solid rgba(0,0,0,.14);
  border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--font);font-size:.83rem;font-weight:400;line-height:1.5;
  color:#39404f;transition:background var(--transition),color var(--transition),
  border-color var(--transition)}
.lang-list button:hover{border-color:var(--gold);color:#12162b}
.lang-list button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
/* Arabic needs a touch more headroom than the Latin scripts. */
.lang-list button[lang="ar"]{font-size:.95rem;line-height:1.7}

@media (max-width:600px){
  .lang-switch{flex-direction:column;align-items:flex-start;gap:.7rem}
  .lang-list{gap:.35rem}
  .lang-list button{font-size:.8rem;padding:.3rem .66rem}
}

/* ---------- right-to-left (Arabic) ----------
   The layout is built from flexbox and grid, which flip on their own once
   dir="rtl" is set. These are the handful of places that need telling. */
.is-rtl body{direction:rtl}
.is-rtl .eyebrow::before{margin-left:0}
.is-rtl .breadcrumb,
.is-rtl .footer-bottom,
.is-rtl .lang-switch{direction:rtl}
.is-rtl .marquee-track{animation-direction:reverse}
.is-rtl .bb-chat{right:auto;left:1.4rem}
.is-rtl .bb-msg-you{justify-content:flex-start}
.is-rtl .bb-msg-bot{justify-content:flex-end}
.is-rtl .bb-msg-bot .bb-bubble{border-bottom-left-radius:15px;border-bottom-right-radius:5px}
.is-rtl .bb-msg-you .bb-bubble{border-bottom-right-radius:15px;border-bottom-left-radius:5px}
.is-rtl .bb-prof-says{left:auto;right:5.05rem}
.is-rtl .bb-prof-says::after{left:auto;right:.7rem}
.is-rtl .cookie-actions{flex-direction:row-reverse}
/* numbers, phone numbers, emails and URLs stay left-to-right inside RTL text */
.is-rtl a[href^="tel:"],
.is-rtl a[href^="mailto:"],
.is-rtl .jrn-n,
.is-rtl .step-num,
.is-rtl .counter{direction:ltr;unicode-bidi:embed;display:inline-block}
@media (max-width:520px){ .is-rtl .bb-chat{left:.9rem;right:.9rem} }

/* Spam honeypot. Must be hidden without being pushed off the canvas —
   an off-canvas offset flips side under dir="rtl" and creates real
   overflow, which drags the whole page sideways. */
.hp-field{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
html{overflow-x:hidden}