:root{
  --ink:#17355a;
  --ink-2:#274e7e;
  --soft:#f5f7f9;
  --line:#d7dfe7;
  --muted:#728197;
  --white:#fff;
  --deep:#12263f;
  --pillar-1:#17355a;
  --pillar-1-soft:#eaf0f7;
  --pillar-2:#0e7c66;
  --pillar-2-soft:#e7f4f0;
  --pillar-3:#a9682f;
  --pillar-3-soft:#f7eee1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Rajdhani",Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit;text-decoration:none}

.site-header{
  position:fixed;z-index:30;top:0;left:0;right:0;height:84px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;border-bottom:1px solid rgba(23,53,90,.08);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px)
}
.brand img{width:116px;height:auto;display:block}
nav{display:flex;gap:28px;font-size:14px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
nav a{opacity:.8;transition:opacity .2s ease}
nav a:hover{opacity:1}

.hero{
  position:relative;padding-top:84px;overflow:hidden;background:#f8f9fb;
  border-bottom:1px solid var(--line)
}
.hero-image-wrap{overflow:hidden}
.hero-image{
  display:block;width:100%;height:auto;
  animation:heroFloat 18s ease-in-out infinite alternate;
  transform-origin:center center
}
@keyframes heroFloat{
  from{transform:scale(1.005) translate3d(-0.15%,0.10%,0)}
  to{transform:scale(1.018) translate3d(0.15%,-0.10%,0)}
}

.section{padding:110px 7vw;display:grid;grid-template-columns:1fr 3fr;gap:48px;border-top:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;color:var(--muted)}
.section-copy{max-width:980px}
h1,h2,h3,p{margin-top:0}
h1,.section-copy h2,.clients h2,.contact p{font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(48px,5.5vw,78px);line-height:.96;margin-bottom:28px;text-transform:uppercase}
.section-copy h2{font-size:clamp(42px,5vw,64px);line-height:.98;margin-bottom:0;text-transform:uppercase}
.lead{font-size:clamp(24px,2.1vw,32px);line-height:1.25;max-width:920px;font-weight:600;color:var(--ink)}
.section-copy>p:not(.lead){max-width:780px;font-size:22px;line-height:1.45;color:var(--muted);margin-top:24px;font-weight:500}

.experience-banner{padding:56px 7vw;background:var(--deep);color:#fff}
.experience-heading{text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:700;opacity:.78;margin-bottom:10px}
.experience-subheading{font-size:18px;color:#b6c2cf;margin-bottom:28px;font-weight:500}
.logo-strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.logo-card{
  min-height:120px;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;
  padding:20px 18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  transition:background .2s ease,border-color .2s ease
}
.logo-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.logo-mark{display:flex;align-items:baseline;gap:2px;line-height:1}
.logo-name{font-size:26px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#fff;text-transform:none}
.logo-city{margin-top:10px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9fb1c4}

/* Per-brand mark accents */
.logo-card.mark-sp .logo-mark{color:#fff}
.logo-card.mark-sp .logo-accent{color:#3aa0ff}
.logo-card.mark-ey .logo-mark{background:#111;color:#ffe600;padding:4px 10px;font-weight:800}
.logo-card.mark-ey .logo-sub{display:block;margin-top:8px;font-size:15px;font-weight:600;color:#dfe7ee}
.logo-card.mark-hsbc .logo-icon{display:inline-block;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:19px solid #db0011;margin-right:8px}
.logo-card.mark-hsbc .logo-mark{color:#fff}
.logo-card.mark-plg .logo-name{font-size:22px;letter-spacing:.02em}
.logo-card.mark-plg .logo-sub{display:block;margin-top:6px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#9fb1c4;font-weight:700}
.logo-card.mark-dv .logo-mark{color:#fff}
.logo-card.mark-dv .logo-accent{color:#57c9a4}

.what{padding-bottom:60px}
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 7vw 110px;background:#fff
}
.pillar{
  --accent:var(--pillar-1);--accent-soft:var(--pillar-1-soft);
  padding:42px 32px 42px;border:1px solid var(--line);border-top:4px solid var(--accent);
  background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
  min-height:560px;box-shadow:0 12px 32px rgba(20,45,75,.04);transition:transform .25s ease,box-shadow .25s ease
}
.pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,45,75,.08)}
.pillar--two{--accent:var(--pillar-2);--accent-soft:var(--pillar-2-soft)}
.pillar--three{--accent:var(--pillar-3);--accent-soft:var(--pillar-3-soft)}
.pillar-index{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:16px;letter-spacing:.12em;font-weight:700;margin-bottom:32px
}
.pillar h3{
  font-weight:700;font-size:clamp(32px,2.65vw,40px);line-height:1.02;letter-spacing:-.02em;margin-bottom:22px;text-transform:uppercase;color:var(--ink)
}
.pillar p{font-size:22px;line-height:1.42;color:var(--muted);min-height:150px;font-weight:500}
.pillar ul{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid var(--line)}
.pillar li{padding:14px 0 14px 22px;border-bottom:1px solid var(--line);font-size:18px;font-weight:600;letter-spacing:.01em;position:relative}
.pillar li::before{content:"";position:absolute;left:0;top:22px;width:9px;height:9px;border-radius:50%;background:var(--accent)}

.clients{padding:110px 7vw;background:var(--soft);border-top:1px solid var(--line)}
.clients h2{font-size:clamp(38px,4.6vw,62px);line-height:1;max-width:1180px;margin:22px 0 58px;text-transform:uppercase}
.clients h2 em{font-style:italic;color:var(--ink-2)}
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #c9d3dd;border-left:1px solid #c9d3dd}
.client-grid div{padding:30px 22px;border-right:1px solid #c9d3dd;border-bottom:1px solid #c9d3dd;font-size:22px;font-weight:600;min-height:94px;background:#fff}

.contact{padding:92px 7vw;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;background:var(--deep);color:#fff}
.contact-brand{display:flex;flex-direction:column;justify-content:center}
.contact-brand img{width:min(26vw,300px);height:auto;display:block;margin-bottom:24px}
.contact-brand p{max-width:760px;font-size:22px;line-height:1.45;color:#b9c6d4;font-weight:500}
.contact-details{display:flex;flex-direction:column;gap:26px;justify-content:center}
.detail-item{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}
.detail-label{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8fa4bb;margin-bottom:8px;font-weight:700}
.contact-details a,.contact-details p{font-size:24px;line-height:1.3;font-weight:600;margin:0}
footer{background:#0c1f33;color:#8ea1b6;padding:22px 7vw;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

@media(max-width:1180px){
  .logo-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:940px){
  .site-header{height:76px;padding:0 20px}.brand img{width:100px}nav{display:none}
  .hero{padding-top:76px}.hero-logo{width:min(58vw,360px)}
  .section{padding:76px 22px;grid-template-columns:1fr;gap:24px}
  .experience-banner{padding:40px 22px}.logo-strip{grid-template-columns:1fr 1fr}
  .logo-name{font-size:24px}
  .pillars{grid-template-columns:1fr;padding:0 22px 76px}.pillar{min-height:0}
  .pillar p{min-height:0}
  .clients{padding:76px 22px}.client-grid{grid-template-columns:1fr 1fr}
  .contact{padding:76px 22px;grid-template-columns:1fr}.contact-brand img{width:min(52vw,260px)}
}
@media(max-width:560px){
  .logo-strip{grid-template-columns:1fr}.client-grid{grid-template-columns:1fr}
  .logo-name{font-size:22px}.client-grid div,.contact-details a,.contact-details p{font-size:20px}
  .section-copy>p:not(.lead), .pillar p, .contact-brand p{font-size:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image{animation:none}}