/* Staff-Link website styles
   Colours are taken from the logo: deep blue background, bright yellow mark. */
:root{
  --navy:#0a4a94;        /* main brand blue (logo background) */
  --navy-dark:#073a78;
  --navy-deep:#052b5a;
  --gold:#f5d10a;        /* logo yellow */
  --gold-dark:#d4b005;
  --ink:#0d1b33;         /* main text */
  --muted:#52617a;       /* secondary text */
  --line:#dbe3ef;
  --paper:#f4f7fb;       /* light section background */
  --white:#ffffff;
  --display:"Lexend","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1180px;
  --radius:14px;
  --shadow:0 10px 30px rgba(5,43,90,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--display); line-height:1.15; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:20px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; border:0; border-radius:10px; padding:13px 22px; font-family:var(--display); font-weight:600; font-size:15.5px; cursor:pointer; text-decoration:none; transition:transform .18s, background .18s, box-shadow .18s, color .18s}
.btn svg{width:18px; height:18px}
.btn-gold{background:var(--gold); color:#1b1400}
.btn-gold:hover{background:#ffe23d; transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,209,10,.35)}
.btn-outline{background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-outline:hover{box-shadow:inset 0 0 0 2px var(--gold); color:var(--gold)}
.btn-blue{background:var(--navy); color:#fff}
.btn-blue:hover{background:var(--navy-dark); transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.18)}
.site-header .wrap{display:flex; align-items:center; gap:22px; padding-block:8px}
.brand img{height:70px; width:auto}
.main-nav{display:flex; gap:4px; margin-left:auto}
.main-nav a{text-decoration:none; padding:8px 14px; border-radius:8px; font-weight:600; font-size:16px; color:#e9f0fb; position:relative}
.main-nav a::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .2s}
.main-nav a:hover{color:#fff}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.main-nav a.active{color:var(--gold)}
.header-tools{display:flex; align-items:center; gap:10px}
.lang{background:var(--navy-dark); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:7px 8px; font:inherit; font-size:14px}
.menu-btn{display:none; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:7px 11px; font-size:18px; cursor:pointer}
@media (max-width: 960px){
  .menu-btn{display:block; margin-left:auto}
  .main-nav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--navy-dark); padding:10px 20px 18px; margin:0}
  .site-header.open .main-nav{display:flex}
  .header-tools .btn{display:none}
  .brand img{height:58px}
}

/* ---------- hero ---------- */
.hero{position:relative; color:#fff; background:var(--navy-deep) center/cover no-repeat; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(5,43,90,.96) 0%, rgba(10,74,148,.88) 45%, rgba(10,74,148,.45) 100%)}
.hero .wrap{padding-block:96px 104px}
.hero-inner{max-width:640px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--navy)}
.eyebrow::before{content:""; width:26px; height:3px; border-radius:2px; background:var(--gold)}
.hero .eyebrow, .on-dark .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(34px, 5vw, 56px); font-weight:600; margin-top:16px; letter-spacing:-.01em}
.hero h1 .hl{color:var(--gold)}
.hero p.lead{font-size:19px; color:#dce6f5; margin-top:20px; max-width:56ch}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:36px}
.hero-tags span{font-size:14.5px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22)}
.page-hero .wrap{padding-block:72px 76px}
.page-hero h1{font-size:clamp(32px, 4.4vw, 48px)}

/* ---------- sections ---------- */
section.block{padding-block:88px}
section.tint{background:var(--paper)}
section.dark{background:var(--navy); color:#fff}
.sec-head{max-width:760px; margin-bottom:44px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(28px, 3.5vw, 42px); font-weight:600; margin-top:12px}
.sec-head p{color:var(--muted); font-size:18.5px; margin-top:14px}
section.dark .sec-head p{color:#cfdcf0}
@media (max-width:640px){ section.block{padding-block:62px} }

/* two-column text + image */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split > *{min-width:0}
.split-img{position:relative}
.split-img img{border-radius:18px; width:100%; aspect-ratio:11/8; object-fit:cover; box-shadow:var(--shadow)}
.split-img .badge{position:absolute; left:-18px; bottom:-18px; background:var(--gold); color:#1b1400; font-family:var(--display); font-weight:600; padding:16px 20px; border-radius:14px; box-shadow:var(--shadow); max-width:240px; font-size:15.5px; line-height:1.3}
.split h2{font-size:clamp(28px, 3.4vw, 40px); font-weight:600; margin-top:12px}
.split p{color:var(--muted); margin-top:16px; font-size:18px}
.checks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.checks li{display:flex; gap:12px; align-items:flex-start; font-weight:600}
.checks li::before{content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052b5a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width: 900px){ .split{grid-template-columns:1fr; gap:40px} .split-img .badge{left:12px; bottom:-16px} }

/* ---------- service cards (home) ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.svc-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; text-decoration:none}
.svc-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(5,43,90,.16)}
.svc-card .img{position:relative; aspect-ratio:3/2; overflow:hidden}
.svc-card .img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.svc-card:hover .img img{transform:scale(1.06)}
.svc-card .icon{position:absolute; left:18px; bottom:-22px; width:48px; height:48px; border-radius:12px; background:var(--navy); color:var(--gold); display:grid; place-items:center; box-shadow:0 6px 16px rgba(5,43,90,.3)}
.svc-card .icon svg{width:26px; height:26px}
.svc-card .body{padding:34px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.svc-card h3{font-size:20px; font-weight:600}
.roles{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.roles li{display:flex; gap:10px; align-items:center; color:var(--muted); font-size:16px}
.roles li::before{content:"▸"; color:var(--gold-dark); font-size:13px}
.svc-card .more{margin-top:auto; padding-top:8px; font-family:var(--display); font-weight:600; color:var(--navy); font-size:15px}
@media (max-width: 960px){ .svc-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .svc-grid{grid-template-columns:1fr} }

/* ---------- feature blocks ---------- */
.features{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px}
.feature{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:28px 24px; transition:background .2s, transform .2s}
.feature:hover{background:rgba(255,255,255,.1); transform:translateY(-4px)}
.feature .ic{width:52px; height:52px; border-radius:12px; background:var(--gold); color:var(--navy-deep); display:grid; place-items:center}
.feature .ic svg{width:28px; height:28px}
.feature h3{font-size:19px; font-weight:600; margin-top:18px}
.feature p{color:#cfdcf0; margin-top:8px; font-size:16px}
@media (max-width: 960px){ .features{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .features{grid-template-columns:1fr} }

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; position:relative}
.steps::before{content:""; position:absolute; top:34px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg, var(--gold-dark) 0 10px, transparent 10px 18px)}
.step{position:relative; text-align:center; padding:0 6px}
.step .n{position:relative; display:inline-grid; place-items:center; width:68px; height:68px; border-radius:50%; background:var(--navy); color:var(--gold); font-family:var(--display); font-size:24px; font-weight:600; border:5px solid var(--white); box-shadow:0 0 0 2px var(--gold-dark)}
section.tint .step .n{border-color:var(--paper)}
.step h3{font-size:19px; font-weight:600; margin-top:18px}
.step p{color:var(--muted); margin-top:8px; font-size:16px}
@media (max-width: 900px){ .steps{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:40px} .steps::before{display:none} }
@media (max-width: 520px){ .steps{grid-template-columns:1fr} }

/* ---------- founders ---------- */
.founders{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px}
.founder{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:240px 1fr; transition:box-shadow .2s}
.founder:hover{box-shadow:var(--shadow)}
.founder img{width:100%; height:100%; object-fit:cover; min-height:300px}
.founder .info{padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px; min-width:0}
.founder h3{font-size:23px; font-weight:600}
.founder .role{display:inline-block; align-self:flex-start; background:var(--gold); color:#1b1400; font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:6px}
.founder .where{color:var(--muted); font-size:15px}
.founder p.bio{color:var(--ink); font-size:16px}
.founder .tags{display:flex; flex-wrap:wrap; gap:6px}
.founder .tags span{font-size:13.5px; padding:4px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--navy-dark); font-weight:600}
.li-btn{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:auto; text-decoration:none; font-weight:600; color:#fff; background:#0a66c2; padding:9px 14px; border-radius:8px; font-size:15px; transition:background .2s}
.li-btn:hover{background:#004182}
.li-btn svg{width:18px; height:18px}
.founder.compact{grid-template-columns:1fr}
.founder.compact img{aspect-ratio:4/4.2; min-height:0; height:auto}
@media (max-width: 1000px){ .founders{grid-template-columns:1fr} }
@media (max-width: 560px){ .founder{grid-template-columns:1fr} .founder img{aspect-ratio:4/4.4; height:auto; min-height:0} }
.founders.mini{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:820px; margin-inline:auto}
@media (max-width:620px){ .founders.mini{grid-template-columns:1fr} }

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg, var(--navy-deep), var(--navy)); color:#fff; border-radius:22px; padding:52px 48px; display:flex; gap:28px; align-items:center; justify-content:space-between; flex-wrap:wrap; position:relative; overflow:hidden}
.cta-band::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:28px solid rgba(245,209,10,.18)}
.cta-band h2{font-size:clamp(26px, 3vw, 36px); font-weight:600; max-width:22ch}
.cta-band p{color:#cfdcf0; margin-top:10px; max-width:52ch}
.cta-band > *{position:relative; z-index:1}

/* ---------- services page ---------- */
.dept-nav{position:sticky; top:86px; z-index:20; background:#fff; border-bottom:1px solid var(--line)}
.dept-nav .wrap{display:flex; gap:6px; overflow-x:auto; padding-block:10px; scrollbar-width:thin}
.dept-nav a{flex:none; text-decoration:none; padding:8px 14px; border-radius:999px; font-weight:600; font-size:15px; color:var(--navy-dark); border:1px solid var(--line); transition:background .2s, color .2s}
.dept-nav a:hover{border-color:var(--navy)}
.dept-nav a.active{background:var(--navy); color:#fff; border-color:var(--navy)}
@media (max-width:960px){ .dept-nav{top:74px} }
.dept{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; padding-block:64px; border-bottom:1px solid var(--line); scroll-margin-top:150px}
.dept:last-child{border-bottom:0}
.dept:nth-child(even) .dept-img{order:2}
.dept > *{min-width:0}
.dept-img img{border-radius:18px; aspect-ratio:3/2; width:100%; object-fit:cover; box-shadow:var(--shadow)}
.dept h2{font-size:clamp(26px, 3vw, 34px); font-weight:600; display:flex; gap:14px; align-items:center}
.dept h2 .icon{flex:none; width:50px; height:50px; border-radius:12px; background:var(--navy); color:var(--gold); display:grid; place-items:center}
.dept h2 .icon svg{width:26px; height:26px}
.dept p.desc{color:var(--muted); margin-top:14px; font-size:18px}
.chips{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px}
.chips li{padding:9px 14px; border-radius:10px; background:var(--paper); border:1px solid var(--line); font-weight:600; font-size:15.5px; display:flex; gap:8px; align-items:center}
.chips li::before{content:""; width:8px; height:8px; background:var(--gold-dark); border-radius:2px; transform:rotate(45deg)}
.dept .btn{margin-top:26px}
@media (max-width:900px){ .dept{grid-template-columns:1fr; gap:28px} .dept:nth-child(even) .dept-img{order:0} }

/* ---------- about ---------- */
.facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:30px}
.fact{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.fact dt{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.fact dd{margin:4px 0 0; font-family:var(--display); font-weight:600; font-size:17px}
.values{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.value{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px}
.value .ic{width:46px; height:46px; border-radius:12px; background:var(--navy); color:var(--gold); display:grid; place-items:center}
.value .ic svg{width:24px; height:24px}
.value h3{font-size:19px; margin-top:16px; font-weight:600}
.value p{color:var(--muted); margin-top:8px; font-size:16px}
@media (max-width: 860px){ .values,.facts{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start}
.contact-grid > *{min-width:0}
.cinfo{display:grid; gap:14px}
.citem{display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.citem .ic{flex:none; width:46px; height:46px; border-radius:12px; background:var(--navy); color:var(--gold); display:grid; place-items:center}
.citem .ic svg{width:22px; height:22px}
.citem .k{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.citem .v{font-family:var(--display); font-weight:600; font-size:17.5px; word-break:break-word}
.citem a.v{text-decoration:none}
.citem a.v:hover{color:var(--navy)}
.contact-photo{margin-top:6px}
.contact-photo img{border-radius:16px; aspect-ratio:11/8; object-fit:cover; width:100%}
.form{background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px; display:grid; grid-template-columns:1fr 1fr; gap:16px; box-shadow:var(--shadow)}
.form .full{grid-column:1/-1}
.form label{display:block; font-weight:600; font-size:15px; margin-bottom:6px}
.form input,.form select,.form textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:12px 13px; transition:border-color .2s, box-shadow .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,74,148,.15)}
.form textarea{min-height:140px; resize:vertical}
.form .hp{position:absolute; left:-9999px}
.form .note{grid-column:1/-1; background:#fff8cc; border:1px solid var(--gold-dark); border-radius:10px; padding:12px 14px; font-size:15px}
@media (max-width: 900px){ .contact-grid{grid-template-columns:1fr} }
@media (max-width: 560px){ .form{grid-template-columns:1fr; padding:22px} }

/* ---------- legal ---------- */
.legal h2{font-size:26px; margin-top:40px}
.legal p{margin-top:12px; color:var(--muted)}
.todo{display:block; margin-top:12px; padding:14px 16px; border:2px dashed var(--gold-dark); border-radius:10px; background:#fffbe0; color:#5a4700}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:#c3d0e6; padding-block:60px 28px; font-size:15.5px}
.foot-cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.foot-cols > *{min-width:0}
.site-footer img{height:92px; width:auto}
.site-footer h4{color:#fff; font-size:16px; margin-bottom:12px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.foot-tag{margin-top:14px; max-width:34ch}
.social{display:flex; gap:10px; margin-top:16px}
.social a{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.social a:hover{background:var(--gold); color:var(--navy-deep)}
.social svg{width:20px; height:20px}
.foot-bottom{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14.5px}
@media (max-width: 860px){ .foot-cols{grid-template-columns:1fr 1fr} .foot-cols > :first-child{grid-column:1/-1} }

/* ---------- gentle scroll-in (content stays visible without JS) ---------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}

/* ---------- "¼ of the cost" highlight ---------- */
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center}
.quarter{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; max-width:260px}
.q-ring{width:210px; height:210px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #ffe55a, var(--gold) 60%, var(--gold-dark)); box-shadow:0 0 0 10px rgba(245,209,10,.18), 0 0 0 22px rgba(245,209,10,.08), 0 24px 50px rgba(0,0,0,.35); animation:qpulse 3.5s ease-in-out infinite}
.q-big{font-family:var(--display); font-weight:700; font-size:120px; line-height:1; color:var(--navy-deep)}
.q-txt{font-family:var(--display); font-weight:600; font-size:19px; color:#fff; line-height:1.3}
@keyframes qpulse{0%,100%{box-shadow:0 0 0 10px rgba(245,209,10,.18), 0 0 0 22px rgba(245,209,10,.08), 0 24px 50px rgba(0,0,0,.35)} 50%{box-shadow:0 0 0 16px rgba(245,209,10,.12), 0 0 0 32px rgba(245,209,10,.05), 0 24px 50px rgba(0,0,0,.35)}}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .quarter{flex-direction:row; max-width:none; text-align:left} .q-ring{width:110px; height:110px; flex:none} .q-big{font-size:62px} .q-txt{font-size:17px} }

.stats{background:var(--gold); color:var(--navy-deep)}
.stats-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; padding-block:30px}
.stat{display:flex; align-items:center; gap:16px; min-width:0}
.stat b{font-family:var(--display); font-size:46px; font-weight:700; line-height:1; flex:none; font-variant-numeric:tabular-nums}
.stat span{font-weight:600; font-size:17px; line-height:1.3}
.stat + .stat{border-left:2px solid rgba(5,43,90,.18); padding-left:22px}
@media (max-width:760px){ .stats-row{grid-template-columns:1fr; gap:14px} .stat + .stat{border-left:0; padding-left:0; border-top:2px solid rgba(5,43,90,.15); padding-top:14px} }
.hl-pill{display:inline-block; background:var(--gold); color:var(--navy-deep); padding:0 .3em; border-radius:6px}
.stat b small{display:block; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px}
@media (max-width:900px){ .hero-home .quarter{display:none} }