/* ============================================================================
   SOLUTION DETAIL TEMPLATE — LOCKED (28-08-2026)
   Background scene (assets/img/room-oval.png, colours preserved), oval frame,
   card/mini/outcome/CTA styling are the approved template for every solution
   detail page. Only page TEXT and ICONS may vary per page.
   Pages: people-leadership, growth-market-engagement, process-operations-
   governance, technology-digital, ai-transformation.
   ========================================================================= */

.pl-body{background:#ded0c2}
.pl{
  position:relative;overflow:hidden;
  /* colours preserved: the scene render is shown with no tint or overlay */
  background:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 56.8vw,#ded0c2 60.5vw),
    url('../assets/img/room-oval-v2.webp') center top / 100% auto no-repeat,
    #ded0c2;
}
.pl__inner{max-width:1440px;margin:0 auto;padding:150px 100px 66px;position:relative}

/* Back link ---------------------------------------------------- */
.pl__back{
  display:inline-flex;align-items:center;gap:10px;
  margin-left:118px;
  font-size:15px;font-weight:var(--fw-semibold);color:var(--text-heading);
}
.pl__back:hover{color:var(--accent-pressed)}

/* Header ------------------------------------------------------- */
/* the scene is 1672x988 drawn at 100% width, so it ends at 59.09vw; reserve
   that height so the floor and its step are fully visible above the cards */
.pl__head{
  display:flex;align-items:flex-start;gap:60px;margin-top:54px;
  /* raised as far as it can go while still clearing the step: the step's foot
     is at 0.901 of the scene height (53.24vw), so the cards stop just below it */
  min-height:calc(59.09vw - 344px);
}
.pl__intro{margin-left:118px;flex:0 0 auto}
.pl__title{
  margin:0;font-size:68px;line-height:1.1;letter-spacing:.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);text-transform:uppercase;
}
.pl__rule{display:block;width:64px;height:4px;margin-top:26px;background:var(--accent)}
.pl__strap{margin:30px 0 0;font-size:26px;line-height:1.45;font-weight:var(--fw-semibold);color:var(--text-heading)}
.pl__lede{margin:24px 0 0;font-size:17px;line-height:1.6;color:var(--text-body)}

/* Hero — the oval frame and shelves are part of the room render itself
   (assets/img/room-oval.png). Only the icon is overlaid, positioned in
   percentages of the scene so it tracks the oval at every viewport width. */
.medallion{position:relative;flex:1;min-height:440px}
.pl__scene{
  position:absolute;left:0;top:0;width:100%;aspect-ratio:1672/988;
  pointer-events:none;
}
.pl__scene svg{
  /* Measured from room-oval-v2.png (1672x988, the 940-tall render with 48 rows of
     wall added on top): the oval's axis is x=1096 (65.55%), the top shelf's face is at y=408 and the gap between the two shelves is
     34px. Each icon is placed so the gap above the top shelf matches that 34px,
     and so its GLYPH (not its square box) is centred on the oval's axis — the
     glyphs sit off-centre in their own viewBoxes by differing amounts, so each
     page overrides left/top with its own measured values. */
  position:absolute;left:65.40%;top:33.32%;transform:translate(-50%,-50%);
  width:9.8%;height:auto;color:var(--text-heading);
}

/* Big cards ---------------------------------------------------- */
.plcard{
  position:relative;
  margin-top:44px;
  padding:56px 64px;
  background:var(--surface-card);
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
}
.pl__head + .plcard{margin-top:64px}
.plcard__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.plcard__eyebrow-rule{display:block;width:32px;height:3px;margin-top:12px;background:var(--accent)}

/* How we help minis ------------------------------------------- */
.minis{display:flex;gap:22px;margin-top:34px}
.mini{
  --icon-occlusion:#f5efe4;
  flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;
  padding:34px 16px 30px;text-align:center;
  background:linear-gradient(180deg,#f7f1e8,#f3ebe0);
  border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 24px -14px rgba(38,38,38,.25);
}
.mini__icon{color:var(--text-heading)}
.mini__title{margin:20px 0 0;font-size:17.5px;line-height:1.3;font-weight:var(--fw-semibold);color:var(--text-heading)}
.mini__rule{display:block;width:26px;height:2px;margin-top:12px;background:var(--accent)}
.mini__body{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-body)}

/* Outcomes ----------------------------------------------------- */
.outcomes{display:flex;margin-top:34px}
.outcome{
  position:relative;flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:6px 20px;text-align:center;
}
.outcome + .outcome{border-left:1px solid rgba(38,38,38,.14)}
.outcome p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-heading)}

/* CTA ---------------------------------------------------------- */
.plcard--cta{display:flex;align-items:center;gap:36px;padding:38px 56px 38px 44px}
.cta__badge{
  flex:0 0 auto;width:96px;height:96px;border-radius:50%;
  background:#fdf6f0;
  box-shadow:0 10px 22px -12px rgba(38,38,38,.3),inset 0 0 0 1.5px rgba(243,131,145,.35);
  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:15.5px;line-height:1.55;color:var(--text-body)}
.cta__btn{margin-left:auto;flex:0 0 auto;border-radius:29px}

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

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .pl__inner{padding:150px 44px 60px}
  .pl__back,.pl__intro{margin-left:0}
}
@media (max-width:1180px){
  .pl__head{flex-direction:column;gap:48px}
  .medallion{display:none}
  .minis{flex-wrap:wrap;justify-content:center}
  .mini{flex:0 1 240px;min-width:206px}
  .outcomes{flex-wrap:wrap;gap:28px 0}
  .outcome{flex:0 1 33%}
  .outcome + .outcome{border-left:0}
  .plcard--cta{flex-wrap:wrap}
  .cta__btn{margin-left:0}
  .pl__title{font-size:clamp(48px,6.5vw,76px)}
}
@media (max-width:760px){
  .pl__inner{padding:124px 24px 48px}
  /* long single words (GOVERNANCE, TRANSFORMATION) need a lower floor here */
  .pl__title{font-size:clamp(30px,8.4vw,48px)}
  .pl__strap{font-size:20px}
  .pl__strap br,.pl__lede br,.cta__body br{display:none}
  .plcard{padding:40px 26px}
  .mini{flex:1 1 100%;max-width:340px}
  .outcomes{flex-direction:column;align-items:center;gap:32px}
  .pl__footer{flex-direction:column;gap:28px;align-items:flex-start}
}
@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){
  .pl{background-image:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 56.8vw,#ded0c2 60.5vw),
    url('../assets/img/room-oval-v2-mobile.webp');}
}