/* ---------------------------------------------
   KPM Analytics LLP — design tokens
   Navy Deep:   #0A2A4D  (primary dark, headlines, nav)
   Navy Mid:    #123A6B  (secondary dark surface)
   Blue Bright: #2F8FEF  (accent — the logo's arrow blue)
   Steel:       #8FA6BC  (secondary text, icon strokes)
   Paper:       #F5F9FD  (page background, pale blue-white)
   Line:        #DCE6F0  (hairline borders)
--------------------------------------------- */

:root{
  --navy:#0A2A4D;
  --navy-mid:#123A6B;
  --blue:#2F8FEF;
  --blue-soft:#E8F2FD;
  --steel:#8FA6BC;
  --paper:#F5F9FD;
  --white:#FFFFFF;
  --line:#DCE6F0;
  --ink-soft:#4A5C71;
  --radius:10px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }

body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:'Inter', system-ui, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Sora', 'Inter', sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0 0 0.5em;
}

a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:58px; width:auto;}
.brand span{font-family:'Sora', sans-serif; font-weight:600; font-size:1.05rem; color:var(--navy);}
.navlinks{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
.navlinks a{text-decoration:none; font-size:0.93rem; font-weight:500; color:var(--ink-soft);}
.navlinks a:hover{color:var(--blue);}
.nav-cta{
  background:var(--navy); color:#fff !important; padding:10px 20px;
  border-radius:999px; font-size:0.88rem; font-weight:600; text-decoration:none;
  transition:background 0.2s ease;
}
.nav-cta:hover{background:var(--blue);}

/* ---------- Hero ---------- */
.hero{padding:88px 0 70px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(2.1rem, 3.6vw, 2.9rem); line-height:1.18; max-width:14ch;}
.hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:48ch; margin:18px 0 32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px;}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
  border-radius:999px; font-weight:600; font-size:0.95rem; text-decoration:none;
  border:1px solid transparent; transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--blue); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue);}

.pillars{display:flex; gap:0; border-top:1px solid var(--line); padding-top:28px;}
.pillar{display:flex; align-items:center; gap:12px; padding-right:28px; margin-right:28px; border-right:1px solid var(--line);}
.pillar:last-child{border-right:none; margin-right:0; padding-right:0;}
.pillar .icon{
  width:42px; height:42px; border-radius:50%; border:1.5px solid var(--blue);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--blue);
}
.pillar .lbl{font-size:0.86rem; font-weight:600; color:var(--navy);}

/* Hero graphic: custom skyline + ascending line, not a stock photo */
.hero-visual{position:relative;}
.hero-visual svg{width:100%; height:auto; display:block;}
.hv-line{
  fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:500; stroke-dashoffset:500;
  animation:draw 1.6s cubic-bezier(.4,0,.2,1) forwards 0.25s;
}
.hv-dot{opacity:0; animation:popin 0.4s ease forwards 1.7s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes popin{to{opacity:1;}}

/* ---------- Section shell ---------- */
section{padding:84px 0;}
.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:620px; margin-bottom:46px;}
.section-head h2{font-size:clamp(1.6rem, 2.4vw, 2.1rem);}
.section-head p{color:var(--ink-soft); font-size:1.02rem;}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:60px; align-items:start;}
.about-grid p{color:var(--ink-soft); margin-bottom:16px; max-width:58ch;}
.stat-block{
  background:var(--navy); color:#fff; border-radius:var(--radius);
  padding:34px 30px; text-align:left;
}
.stat-block .num{font-family:'Sora', sans-serif; font-size:3rem; font-weight:700; color:var(--blue); line-height:1;}
.stat-block .cap{font-size:0.95rem; color:#C7D6E8; margin-top:10px;}

/* ---------- Offer (2 asymmetric blocks) ---------- */
.offer-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.offer-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px;
  background:var(--white);
}
.offer-card h3{font-size:1.2rem; margin-bottom:12px;}
.offer-card p{color:var(--ink-soft); font-size:0.97rem; margin:0;}
.offer-card .tag{
  display:inline-block; font-size:0.76rem; font-weight:600; color:var(--blue);
  background:var(--blue-soft); padding:5px 12px; border-radius:999px; margin-bottom:16px;
}

/* ---------- Approach (real sequence) ---------- */
.approach-row{display:flex; align-items:flex-start; gap:0;}
.approach-step{flex:1; position:relative; padding-right:30px;}
.approach-step .step-num{
  font-family:'Sora', sans-serif; font-weight:700; font-size:1.6rem; color:var(--blue);
  margin-bottom:14px; display:block;
}
.approach-step h3{font-size:1.1rem; margin-bottom:8px;}
.approach-step p{color:var(--ink-soft); font-size:0.93rem; margin:0; max-width:32ch;}
.approach-arrow{
  flex:none; width:40px; display:flex; align-items:center; justify-content:center;
  color:var(--steel); padding-top:6px; font-size:1.3rem;
}

/* ---------- Careers (bold navy band) ---------- */
.careers-band{
  background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding:90px 0;
}
.careers-band::before{
  content:""; position:absolute; right:-80px; top:-80px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle, rgba(47,143,239,0.28), transparent 70%);
}
.careers-inner{position:relative; max-width:640px;}
.careers-band h2{color:#fff; font-size:clamp(1.8rem, 3vw, 2.5rem);}
.careers-band p{color:#C7D6E8; font-size:1.05rem; max-width:52ch; margin:16px 0 32px;}
.careers-band .btn-primary{background:var(--blue);}
.careers-band .btn-primary:hover{background:#fff; color:var(--navy);}

/* ---------- Team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;}
.team-card{border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--white);}
.team-head{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.avatar{
  width:56px; height:56px; border-radius:50%; flex:none;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Sora', sans-serif; font-weight:700; font-size:1.05rem;
}
.team-head h3{font-size:1.05rem; margin:0 0 3px;}
.team-head .role{font-size:0.84rem; color:var(--blue); font-weight:600;}
.team-card p{color:var(--ink-soft); font-size:0.9rem; margin:0;}

/* ---------- Testimonials ---------- */
.testi-placeholder{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:46px 36px; text-align:center; color:var(--ink-soft); font-size:0.98rem;
  max-width:620px;
}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px;}
.contact-info p{color:var(--ink-soft); margin-bottom:26px;}
.contact-row{display:flex; gap:14px; margin-bottom:18px;}
.contact-row .lbl{font-size:0.8rem; font-weight:600; color:var(--steel); width:80px; flex:none; padding-top:2px;}
.contact-row .val{font-size:0.96rem; color:var(--navy);}
.contact-row a{text-decoration:none; color:var(--navy);}
.contact-row a:hover{color:var(--blue);}

form.contact-form{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; display:grid; gap:18px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
label{font-size:0.82rem; font-weight:600; color:var(--navy); display:block; margin-bottom:6px;}
input, textarea, select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  font-family:'Inter', sans-serif; font-size:0.94rem; background:var(--white); color:var(--navy);
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,143,239,0.15);}
textarea{resize:vertical; min-height:110px;}
.honeypot{position:absolute; left:-9999px; opacity:0;}
button[type="submit"]{justify-self:start; border:none; cursor:pointer;}
.form-disclaimer{font-size:0.8rem; color:var(--steel); margin-top:-6px;}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:#9FB4CB; padding:50px 0 26px;}
.banner-strip{display:block; width:100%; border-bottom:1px solid var(--line);}
.banner-strip img{width:100%; height:auto; display:block;}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap;
  gap:30px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-brand span{color:#fff; font-family:'Sora', sans-serif; font-weight:600;}
.footer-links{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.footer-links a{color:#9FB4CB; text-decoration:none; font-size:0.9rem;}
.footer-links a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:20px; font-size:0.78rem; color:#6F8499; flex-wrap:wrap; gap:10px;}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr;}
  .offer-grid, .team-grid{grid-template-columns:1fr;}
  .approach-row{flex-direction:column; gap:28px;}
  .approach-arrow{display:none;}
  .navlinks{display:none;}
  .pillars{flex-wrap:wrap; gap:18px;}
  .pillar{border-right:none; margin-right:0; padding-right:0;}
}
@media (max-width: 560px){
  .form-row{grid-template-columns:1fr;}
  .hero{padding:60px 0 44px;}
  section{padding:60px 0;}
  .careers-band{padding:64px 0;}
}