/* Our Solutions page — layout measured proportionally from the client mock-up
   (portrait 1024×1536 → 1440×2160 design canvas). Tokens from the design system. */

.solutions-body{background:#ded0c2}
.sol{
  position:relative;overflow:hidden;
  /* aligned to the locked solution-detail template: same scene render
     (oval-less variant) and fade tones, colours preserved */
  background:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-plain.webp') center top / 100% auto no-repeat,
    #ded0c2;
}
.sol__inner{max-width:1440px;margin:0 auto;padding:170px 105px 66px;position:relative}
.pink{color:var(--accent)}
.strong{font-weight:var(--fw-semibold)}
.strong-soft{font-weight:var(--fw-regular);color:var(--text-heading)}

/* Header ------------------------------------------------------- */
.sol__head{margin-left:148px}
.sol__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.sol__eyebrow-rule{display:block;width:28px;height:3px;margin-top:12px;background:var(--accent)}
.sol__title{
  margin:24px 0 0;font-size:68px;line-height:1.12;letter-spacing:-.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.sol__strap{margin:22px 0 0;font-size:24px;line-height:1.4}
.sol__lede{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--text-body)}
.sol__explore{
  margin:38px 0 0;font-size:16px;font-weight:var(--fw-semibold);color:var(--accent);
}

/* Five solution cards ------------------------------------------ */
.scards{display:flex;gap:17px;margin:28px 0 0 30px}
.scard{
  position:relative;flex:1 1 0;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:30px 24px 24px;
  background:var(--surface-card);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
  text-align:left;
}
.scard__icon{align-self:center;color:var(--text-heading)}
.scard__title{margin:20px 0 0;font-size:21px;line-height:1.25;font-weight:var(--fw-semibold);color:var(--text-heading)}
.scard__rule{display:block;width:24px;height:2px;margin-top:12px;background:var(--accent)}
.scard__body{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-body)}
.scard__link{position:absolute;inset:0;border-radius:20px}
.scard:has(.scard__link):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-raised)}
.scard__arrow{margin-top:auto;align-self:flex-end;color:var(--accent);padding-top:16px;box-sizing:content-box}

/* Drop line into the banner ------------------------------------ */
.sol__drop{display:block;width:2px;height:34px;margin:0 auto;background:var(--accent)}

/* Orchestrating banner ----------------------------------------- */
.banner{
  display:flex;align-items:center;gap:44px;
  width:860px;margin:0 auto;
  padding:44px 56px;
  background:var(--surface-card);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
}
.banner__badge{
  flex:0 0 auto;width:112px;height:112px;border-radius:50%;
  border:1.5px solid var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-heading);
}
.banner__title{margin:0;font-size:27px;line-height:1.25;font-weight:var(--fw-semibold);color:var(--text-heading)}
.banner__body{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--text-body)}

/* Approach ----------------------------------------------------- */
.approach{margin:70px 0 0 148px}
.approach__title{
  margin:24px 0 0;font-size:44px;line-height:1.15;letter-spacing:-.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.approach__lede{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--text-body)}

/* Approach band ------------------------------------------------ */
.steps{
  display:flex;
  margin-top:44px;
  padding:44px 12px;
  background:var(--surface-card);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
}
.step{
  position:relative;flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;
  padding:0 18px;text-align:center;
}
.step + .step{border-left:1px solid rgba(38,38,38,.10)}
/* pink connector segments between icons */
.step + .step::before{
  content:"";position:absolute;left:-19px;top:32px;width:38px;height:2px;
  background:var(--accent);
}
.step__icon{color:var(--text-heading)}
.step__title{margin:20px 0 0;font-size:20px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-heading)}
.step__body{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-body)}

/* CTA band ----------------------------------------------------- */
.cta{
  display:flex;align-items:center;gap:36px;
  margin-top:36px;
  padding:34px 56px 34px 44px;
  background:var(--surface-card);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
}
.cta__badge{
  flex:0 0 auto;width:92px;height:92px;border-radius:50%;
  border:1.5px solid var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-heading);
}
.cta__title{margin:0;font-size:26px;line-height:1.25;font-weight:var(--fw-semibold);color:var(--text-heading)}
.cta__body{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--text-body)}
.cta__btn{margin-left:auto;flex:0 0 auto}

/* Footer ------------------------------------------------------- */
.sol__footer{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:64px;
}
.sol__footer-brand{color:var(--text-heading);font-size:13px}
.sol__tagline{
  position:relative;margin:0;
  font-size:20px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-heading);
  white-space:nowrap;
}
.sol__tagline .tagline__human{position:relative;display:inline-block}
.sol__tagline .tagline__human::after{
  content:"";position:absolute;left:0;bottom:-10px;
  width:calc(100% - 26px);height:2px;background:var(--accent);
}
.sol__tagline .tagline__ai{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .sol__inner{padding:160px 44px 60px}
  .sol__head,.approach{margin-left:0}
  .scards{margin-left:0}
}
@media (max-width:1180px){
  .scards{flex-wrap:wrap;justify-content:center}
  .scard{flex:0 1 260px;min-width:224px}
  .sol__title{font-size:clamp(42px,5.6vw,68px)}
  .steps{flex-wrap:wrap;gap:36px 0}
  .step{flex:0 1 33%}
  .step + .step::before{display:none}
  .step + .step{border-left:0}
  .banner{width:auto}
  .cta{flex-wrap:wrap}
  .cta__btn{margin-left:0}
}
@media (max-width:760px){
  .sol__inner{padding:128px 24px 48px}
  .sol__lede br,.approach__lede br,.banner__body br,.cta__body br{display:none}
  .scard{flex:1 1 100%;max-width:360px}
  .banner{flex-direction:column;align-items:flex-start;gap:24px;padding:36px 28px}
  .steps{flex-direction:column;align-items:center;gap:40px}
  .step{flex:1 1 auto}
  .cta{padding:32px 28px}
  .sol__footer{flex-direction:column;gap:28px;align-items:flex-start}
  .sol__drop{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none}
}

/* MOBILE SCENE: the 1672px render is 3-4x wider than a phone needs; serve the
   900px variant below the tablet breakpoint. Position/size/repeat carry over
   from the shorthand above — only the image layers are swapped. */
@media (max-width:820px){
  .sol{background-image:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-plain-mobile.webp');}
}