/* Keep the global portfolio header identical even when a solution defines local accent variables. */
body.solution-page .site-header{
  --text:#f5f8fc;
  --soft:#d8e4ef;
  --muted:#91a5bb;
  --line:#243c5a;
  --accent:#35d4f1;
  --accent-2:#8c70ff;
}
html[data-theme="light"] body.solution-page .site-header{
  --text:#0d1f35;
  --soft:#2a4060;
  --muted:#607898;
  --line:#c0d5e8;
  --accent:#0891b2;
  --accent-2:#6c50e0;
}

/* Shared portfolio shell for detailed solution pages.
   Header, progress bar and theme controls intentionally inherit the global site.css shell. */

/* =========================================================
   FULL SOLUTION PAGE INTEGRATION
   Match the Experience / Framework portfolio page language.
   Page-specific accent colors remain available through --accent.
   ========================================================= */

body.solution-page{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:16px!important;
  color:#d5e6f2;
  background:
    radial-gradient(circle at 16% -7%,rgba(26,98,154,.22),transparent 27%),
    radial-gradient(circle at 87% 9%,rgba(53,212,241,.08),transparent 25%),
    linear-gradient(180deg,#04101d 0%,#06111e 56%,#030914 100%)!important;
}

/* Match the 1380px inner-page canvas used by Experience / Framework. */
body.solution-page .p3-content{
  width:min(1380px,100%)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:24px 32px 48px!important;
}

/* Page introduction follows the same quiet editorial hierarchy. */
body.solution-page .back-nav{
  margin:0 0 18px!important;
  color:#6f8aa3!important;
  font-size:.68rem!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  transition:color .18s ease,transform .18s ease!important;
}
body.solution-page .back-nav:hover{
  color:#35d4f1!important;
  transform:translateX(-2px);
}
body.solution-page .hero{
  margin:0 0 18px!important;
  padding:10px 0 6px!important;
}
body.solution-page .hero-eyebrow{
  margin-bottom:14px!important;
}
body.solution-page .hero-num{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:var(--accent)!important;
  font-size:.78rem!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
}
body.solution-page .hero h1{
  margin:0 0 16px!important;
  max-width:900px;
  color:#eef5fb!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:clamp(1.7rem,2.8vw,2.4rem)!important;
  line-height:1.1!important;
  letter-spacing:-.02em!important;
  font-weight:200!important;
}
body.solution-page .hero-lead{
  max-width:720px!important;
  margin:0!important;
  color:#bac8d8!important;
  font-size:clamp(.95rem,1.35vw,1.12rem)!important;
  line-height:1.62!important;
}

/* Metadata rows use the same restrained chip treatment as the rest of the site. */
body.solution-page .stack-row{
  gap:8px!important;
  margin:0 0 14px!important;
}
body.solution-page .stack-label{
  color:#6f8aa3!important;
  font-size:.66rem!important;
  letter-spacing:.08em!important;
}
body.solution-page .stack-chip{
  padding:5px 10px!important;
  border:1px solid rgba(86,127,164,.34)!important;
  border-radius:999px!important;
  background:rgba(7,22,37,.72)!important;
  color:#a9bfd1!important;
  font-size:.68rem!important;
}
body.solution-page .value-row{
  gap:8px!important;
  margin:0 0 14px!important;
}
body.solution-page .solution-scope-note{
  max-width:920px;
  margin:-2px 0 16px;
  padding:8px 11px;
  border-left:2px solid color-mix(in srgb,var(--accent) 48%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,rgba(7,22,37,.72));
  color:#8fa7ba;
  font-size:.68rem;
  line-height:1.55;
}
body.solution-page .solution-scope-note strong{
  color:color-mix(in srgb,var(--accent) 78%,#eef7ff);
  font-weight:800;
}
body.solution-page .value-chip{
  padding:6px 12px!important;
  border-radius:999px!important;
  border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(64,93,120,.4))!important;
  background:color-mix(in srgb,var(--accent) 10%,rgba(7,22,37,.78))!important;
  color:color-mix(in srgb,var(--accent) 82%,#eef7ff)!important;
  font-size:.68rem!important;
}

/* Major content regions become the same glass-panel family used elsewhere. */
body.solution-page .sol-two-col,
body.solution-page .sol-two-col-wide{
  gap:14px!important;
  margin-bottom:14px!important;
}
body.solution-page .sol-two-col>div,
body.solution-page .sol-two-col-wide>div{
  min-width:0;
  padding:22px 24px!important;
  border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(73,105,139,.52))!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 32%),
    linear-gradient(145deg,rgba(8,24,40,.95),rgba(3,12,23,.93))!important;
  box-shadow:0 20px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

body.solution-page .sol-col-label,
body.solution-page .section-label{
  margin-bottom:12px!important;
  color:var(--accent)!important;
  font-size:.70rem!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

/* At-a-glance cards become nested quiet surfaces instead of a separate UI language. */
body.solution-page .glance-grid{
  gap:10px!important;
}
body.solution-page .glance-item{
  padding:14px 16px!important;
  border:1px solid rgba(88,124,158,.25)!important;
  border-radius:11px!important;
  background:rgba(5,17,29,.68)!important;
  box-shadow:none!important;
}
body.solution-page .glance-label{
  margin-bottom:6px!important;
  color:var(--accent)!important;
  font-size:.61rem!important;
  letter-spacing:.08em!important;
}
body.solution-page .glance-value{
  color:#b5c6d6!important;
  font-size:.76rem!important;
  line-height:1.52!important;
}

/* AI / Agent / Human cards align with portfolio card depth and hover behavior. */
body.solution-page .aaa-grid{
  gap:10px!important;
}
body.solution-page .aaa-card{
  padding:15px 16px!important;
  border:1px solid rgba(88,124,158,.25)!important;
  border-radius:12px!important;
  background:rgba(5,17,29,.68)!important;
  box-shadow:none!important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease!important;
}
body.solution-page .aaa-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 46%,rgba(88,124,158,.25))!important;
  background:rgba(7,23,39,.86)!important;
}
body.solution-page .aaa-text{
  color:#b5c6d6!important;
  font-size:.74rem!important;
  line-height:1.55!important;
}

/* Workflow is presented as one portfolio panel, with steps inside it. */
body.solution-page .flow-strip{
  gap:8px!important;
  margin:0 0 14px!important;
  padding:14px!important;
  overflow-x:auto!important;
  border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(73,105,139,.52))!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(8,24,40,.94),rgba(3,12,23,.92))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
}
body.solution-page .flow-step{
  min-height:66px;
  margin-left:0!important;
  padding:12px 10px!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(88,124,158,.24)!important;
  border-radius:10px!important;
  background:rgba(5,17,29,.70)!important;
  color:#b8c8d8!important;
  font-size:.70rem!important;
  transition:border-color .18s ease,transform .18s ease!important;
}
body.solution-page .flow-step:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 44%,rgba(88,124,158,.24))!important;
}
body.solution-page .flow-step small{
  color:var(--accent)!important;
  font-size:.58rem!important;
}

/* Ownership, architecture and evidence elements inherit the same restrained surfaces. */
body.solution-page .owned-list{
  gap:7px!important;
}
body.solution-page .owned-tag{
  padding:5px 10px!important;
  border:1px solid rgba(88,124,158,.28)!important;
  border-radius:999px!important;
  background:rgba(5,17,29,.62)!important;
  color:#b5c6d6!important;
  font-size:.68rem!important;
}
body.solution-page .arch-flow{
  gap:7px!important;
  padding:14px 16px!important;
  border:1px solid rgba(88,124,158,.26)!important;
  border-radius:12px!important;
  background:rgba(5,17,29,.64)!important;
}
body.solution-page .arch-step{
  padding:5px 9px!important;
  border:1px solid rgba(88,124,158,.25)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.025)!important;
  color:#b8c8d8!important;
  font-size:.67rem!important;
}
body.solution-page .arch-step.hi{
  color:var(--accent)!important;
  border-color:color-mix(in srgb,var(--accent) 48%,transparent)!important;
  background:color-mix(in srgb,var(--accent) 10%,transparent)!important;
}
body.solution-page .arch-arrow{color:#6f8aa3!important}

/* Technical design now reads like the same collapsible glass panel, not a separate app. */
body.solution-page details{
  margin:0 0 14px!important;
  border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(73,105,139,.52))!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,rgba(8,24,40,.95),rgba(3,12,23,.93))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
}
body.solution-page summary{
  min-height:54px;
  padding:16px 20px!important;
  color:#91a8bc!important;
  font-size:.70rem!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
}
body.solution-page details[open] summary{
  color:var(--accent)!important;
  border-bottom-color:rgba(88,124,158,.22)!important;
}
body.solution-page .details-inner{
  padding:20px!important;
  gap:20px!important;
}
body.solution-page .scenario{
  padding:12px 14px!important;
  border:1px solid rgba(88,124,158,.24)!important;
  border-radius:10px!important;
  background:rgba(5,17,29,.64)!important;
}
body.solution-page .sc-text,
body.solution-page .control-item{
  color:#b5c6d6!important;
  font-size:.73rem!important;
  line-height:1.55!important;
}
body.solution-page .control-item{
  border-color:rgba(88,124,158,.20)!important;
}

/* More deliberate page rhythm. */
body.solution-page .p3-content> .section-label{
  margin-top:22px!important;
}
body.solution-page .p3-content>details:last-child,
body.solution-page .p3-content>.sol-two-col-wide:last-child{
  margin-bottom:0!important;
}

/* Light mode exactly follows the rest of the portfolio's inner-page palette. */
html[data-theme="light"] body.solution-page{
  color:#0d1f35!important;
  background:
    radial-gradient(circle at 82% -4%,rgba(150,200,240,.35),transparent 30%),
    linear-gradient(180deg,#f0f5fb 0%,#e8f0f8 57%,#f2f7fc 100%)!important;
}
html[data-theme="light"] body.solution-page .hero h1{color:#0d1f30!important}
html[data-theme="light"] body.solution-page .hero-lead{color:#2a4a62!important}
html[data-theme="light"] body.solution-page .back-nav{color:#607898!important}
html[data-theme="light"] body.solution-page .back-nav:hover{color:#0891b2!important}
html[data-theme="light"] body.solution-page .stack-label{color:#607898!important}
html[data-theme="light"] body.solution-page .stack-chip{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(8,145,178,.20)!important;
  color:#3a5a74!important;
}
html[data-theme="light"] body.solution-page .value-chip{
  background:color-mix(in srgb,var(--accent) 7%,#fff)!important;
  color:color-mix(in srgb,var(--accent) 74%,#17364d)!important;
  border-color:color-mix(in srgb,var(--accent) 32%,#c0d5e8)!important;
}
html[data-theme="light"] body.solution-page .solution-scope-note{
  background:color-mix(in srgb,var(--accent) 4%,#fff);
  border-left-color:color-mix(in srgb,var(--accent) 42%,transparent);
  color:#58758d;
}
html[data-theme="light"] body.solution-page .solution-scope-note strong{
  color:color-mix(in srgb,var(--accent) 72%,#17364d);
}
html[data-theme="light"] body.solution-page .sol-two-col>div,
html[data-theme="light"] body.solution-page .sol-two-col-wide>div,
html[data-theme="light"] body.solution-page .flow-strip,
html[data-theme="light"] body.solution-page details{
  background:
    radial-gradient(circle at 92% 4%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 32%),
    linear-gradient(145deg,#ffffff,#f4f8fd)!important;
  border-color:color-mix(in srgb,var(--accent) 18%,rgba(13,31,53,.14))!important;
  box-shadow:0 10px 30px rgba(13,31,53,.055),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
html[data-theme="light"] body.solution-page .glance-item,
html[data-theme="light"] body.solution-page .aaa-card,
html[data-theme="light"] body.solution-page .flow-step,
html[data-theme="light"] body.solution-page .arch-flow,
html[data-theme="light"] body.solution-page .scenario{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(13,31,53,.12)!important;
}
html[data-theme="light"] body.solution-page .aaa-card:hover,
html[data-theme="light"] body.solution-page .flow-step:hover{
  background:#ffffff!important;
  border-color:color-mix(in srgb,var(--accent) 36%,rgba(13,31,53,.12))!important;
}
html[data-theme="light"] body.solution-page .glance-value,
html[data-theme="light"] body.solution-page .aaa-text,
html[data-theme="light"] body.solution-page .flow-step,
html[data-theme="light"] body.solution-page .owned-tag,
html[data-theme="light"] body.solution-page .arch-step,
html[data-theme="light"] body.solution-page .sc-text,
html[data-theme="light"] body.solution-page .control-item{
  color:#3a5a74!important;
}
html[data-theme="light"] body.solution-page .owned-tag{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(8,145,178,.18)!important;
}
html[data-theme="light"] body.solution-page .arch-step{
  background:#f4f8fd!important;
  border-color:rgba(13,31,53,.12)!important;
}
html[data-theme="light"] body.solution-page summary{color:#607898!important}

@media(max-width:820px){
  body.solution-page .p3-content{padding:20px 20px 40px!important}
  body.solution-page .sol-two-col>div,
  body.solution-page .sol-two-col-wide>div{padding:20px!important}
}
@media(max-width:580px){
  body.solution-page .p3-content{padding:16px 16px 34px!important}
  body.solution-page .hero h1{font-size:clamp(2rem,10vw,3rem)!important}
  body.solution-page .flow-strip{padding:10px!important}
}
@media(prefers-reduced-motion:reduce){
  body.solution-page .aaa-card:hover,
  body.solution-page .flow-step:hover,
  body.solution-page .back-nav:hover{transform:none!important}
}