/* Retentio ? Solutions page styles extracted from solutions.html */

html{scroll-padding-top:100px}

.hero{
  padding:92px 0 78px;
  background:linear-gradient(180deg,#fbfbfd 0%,#f5f4fa 100%);
  border-bottom:1px solid var(--line)
}
.eyebrow{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:#777890;margin-bottom:18px
}
.hero h1{
  font-size:clamp(44px,6vw,70px);line-height:1.03;
  letter-spacing:-.055em;max-width:900px;margin:0 0 22px
}
.hero h1 span{color:var(--pink);font-style:italic}
.hero p{
  max-width:790px;margin:0;color:var(--muted);
  font-size:18px;line-height:1.75
}

.intro{padding:76px 0 44px}
.intro-grid{
  display:grid;grid-template-columns:1fr 1.25fr;
  gap:74px;align-items:start
}
.intro h2{
  font-size:clamp(30px,4vw,47px);line-height:1.08;
  letter-spacing:-.045em;margin:0
}
.intro p{font-size:16px;line-height:1.8;color:var(--muted);margin:3px 0 0}

.programmes{padding:20px 0 112px}
.programme{
  display:grid;grid-template-columns:40% 60%;
  min-height:560px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.visual{
  min-height:560px;
  padding:20px 18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#f7f5ff 0%,#f1effb 100%);
  position:relative;overflow:hidden
}
.visual::before{
  content:"";position:absolute;width:370px;height:370px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(190,166,255,.26) 0%,rgba(190,166,255,0) 72%);
  left:-110px;bottom:-120px
}
.visual img{
  width:100%;height:auto;max-width:560px;display:block;
  position:relative;z-index:1;
  filter:drop-shadow(0 22px 34px rgba(45,46,110,.10))
}
.visual-note{
  position:absolute;left:22px;bottom:17px;z-index:2;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:#898a9d
}

.copy{
  background:#fff;padding:70px 64px;
  display:flex;flex-direction:column;justify-content:center
}
.copy h2{
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.1;letter-spacing:-.045em;margin:0 0 20px
}
.copy p{font-size:16px;line-height:1.82;color:var(--muted);margin:0}
.business-copy{margin-top:28px!important;color:var(--ink)!important}
.business-copy b{font-weight:800;color:var(--ink)}

.debug{
  margin-top:32px;padding-top:22px;border-top:1px dashed #ddddeb
}
.debug-label{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:#8a8b9e;margin-bottom:8px
}
.debug p{font-size:13px;line-height:1.65;color:#7a7b90;margin:0}

.bottom{background:#1b1c2e;color:#fff;padding:78px 0}
.bottom .eyebrow{color:#72c6c8}
.bottom h2{
  font-size:clamp(31px,4.5vw,52px);line-height:1.05;
  letter-spacing:-.045em;max-width:770px;margin:0 0 17px
}
.bottom p{color:#a9aabd;font-size:16px;line-height:1.75;max-width:650px;margin:0}
.bottom-link{
  display:inline-flex;margin-top:28px;background:#fff;color:var(--navy);
  padding:12px 18px;border-radius:999px;font-size:13px;font-weight:700
}

footer{padding:28px 0;background:#12131f;color:#85869e;font-size:11px}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-mobile-toggle{display:flex}
  .intro-grid{grid-template-columns:1fr;gap:23px}
  .programme{grid-template-columns:1fr}
  .visual{min-height:420px;padding:26px}
  .copy{padding:48px 34px}
}
@media(max-width:600px){
  .container{width:calc(100% - 32px)}
  .hero{padding:68px 0 58px}
  .hero p{font-size:16px}
  .intro{padding:58px 0 34px}
  .programmes{padding-bottom:76px}
  .visual{min-height:310px;padding:18px}
  .copy{padding:36px 24px}
}

.card-section{
  --navy: #1E1B45;
  --navy-soft: #4B4876;
  --purple: #7C3AED;
  --magenta: #E63A8C;
  --lavender: #F6F3FF;
  --lavender-2: #EFEAFC;
  --border: #E7E3F5;
  --paper: #FFFFFF;
  --ink-body: #4A4768;
  --shadow: 0 20px 50px -20px rgba(30, 27, 69, 0.18);
  --max: 1180px;
  padding: 0 32px 60px;
  scroll-margin-top: 100px;
}
.solution-card{
  max-width: var(--max);
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 32px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 40% 60%;
  overflow: hidden;
}
.solution-card.reverse{
  grid-template-columns: 60% 40%;
}
.solution-card.reverse .solution-visual{
  order: 2;
}
.solution-card.reverse .solution-copy{
  order: 1;
}
.solution-visual{
  background: linear-gradient(160deg, var(--lavender) 0%, var(--lavender-2) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px;
}
.solution-visual img{
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}
.solution-copy{
  padding: 64px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 22px;
}
.solution-copy h3{
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--navy);
}
.solution-copy p{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0;
}
.solution-copy p.impact{
  color: var(--navy);
  font-weight: 500;
}
@media (max-width: 900px){
  .solution-card, .solution-card.reverse{
    grid-template-columns: 1fr;
  }
  .solution-card.reverse .solution-visual,
  .solution-card.reverse .solution-copy,
  .solution-card .solution-visual,
  .solution-card .solution-copy{
    order: initial;
  }
  .solution-copy{ padding: 44px 32px; }
  .solution-visual{ padding: 32px; }
}

/* Header logo: same horizontal lockup as the other pages */
.about-brand img{width:auto;height:36px;object-fit:contain}