/*
  Shared case-study architecture.

  This file owns the portfolio-wide treatment for long-form project pages:
  project routing, phased section navigation, alignment, typography hierarchy,
  process/evidence primitives, responsive behavior, and shared closing/footer.
*/
:root {
  --case-rail-width:122px;
  --case-shell-gap:96px;
  --case-content-inset:24px;
  --case-closing-size:1.05rem;
  --case-section-pad:82px;
  --case-section-pad-mobile:58px;
}
.projectRoute { position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); background:#f6f3ecef; backdrop-filter:blur(10px); }
.routeWrap { width:min(1440px,calc(100% - var(--route-gutter))); min-height:var(--route-header-height); margin:auto; display:grid; grid-template-columns:190px minmax(0,1fr) 80px; align-items:center; gap:28px; }
.projectNav { display:flex; align-items:stretch; justify-content:center; min-width:0; }
.projectLink { display:flex; min-height:64px; flex:1; flex-direction:column; justify-content:center; gap:1px; padding:6px 26px; border-left:1px solid var(--line); color:var(--ink); text-decoration:none; }
.projectLink:last-child { border-right:1px solid var(--line); }
.projectLink > span { color:var(--blue); font:700 .68rem/1 var(--sans); letter-spacing:.12em; }
.projectLink strong { font:1rem/1.2 var(--serif); font-weight:normal; white-space:nowrap; }
.projectLink.active { position:relative; }
.projectLink.active::after { position:absolute; right:26px; bottom:-1px; left:26px; height:3px; background:var(--lime); content:""; }
.projectLink.active strong { font-weight:bold; }
.projectLink .projectLinkTitle--mobile { display:none; }
.routeContacts { justify-content:flex-end; }
.routeContacts .contactIcon { color:var(--blue); }
.pageJump { display:none; border:0; background:transparent; color:var(--blue); cursor:pointer; }
.pageJumpIcon { display:block; font:1.45rem/1 var(--sans); }
.pageJumpLabel { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.pageIndexHeader,.pageIndexClose,.pageIndexScrim,.pageIndexFooter { display:none; }
.pageIndex--home { display:none; }

.caseShell { display:grid; grid-template-columns:var(--case-rail-width) minmax(0,1fr); width:min(1440px,calc(100% - 32px)); margin:auto; align-items:start; gap:var(--case-shell-gap); }
.caseShell > main { min-width:0; }
.pageIndex { position:sticky; top:108px; z-index:20; padding:86px 0 36px; background:var(--paper); }
.pageIndex nav { display:flex; flex-direction:column; gap:19px; }
.pageIndexGroup { display:flex; flex-direction:column; gap:13px; }
.pageIndexGroup + .pageIndexGroup { padding-top:15px; border-top:1px solid var(--line); }
.pageIndexPhase { margin:0; color:var(--blue); font:700 .94rem/1.15 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.pageIndex a { position:relative; display:block; padding:0 0 0 5px; color:var(--mute); font:.88rem/1.3 var(--sans); text-decoration:none; }
.pageIndex a::before { position:absolute; top:.15em; bottom:.15em; left:0; width:2px; background:transparent; content:""; }
.pageIndex a:hover,.pageIndex a:focus-visible,.pageIndex a.active { color:var(--blue); }
.pageIndex a.active { font-weight:bold; }
.pageIndex a.active::before { background:var(--lime); }

.hero { padding:92px 0 88px; background:linear-gradient(115deg,#f6f3ec 0%,#edf4f0 100%); }
.caseShell > main > .hero > .wrap,
.caseShell > main > .section > .wrap,
.caseShell > main > .section > .narrow { padding-right:var(--case-content-inset); padding-left:var(--case-content-inset); }
.heroGrid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.62fr); gap:72px; align-items:start; }
.eyebrow,.index,.card-index { margin:0 0 15px; color:var(--blue); font-size:.69rem; font-weight:bold; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { margin:0; color:var(--ink); font-family:var(--serif); font-weight:normal; line-height:1.01; }
h1 { max-width:850px; font-size:clamp(3.4rem,7.1vw,6.25rem); letter-spacing:-.055em; }
h1 i { color:var(--blue); font-weight:normal; }
h2 { font-size:clamp(2.55rem,5vw,4.8rem); letter-spacing:-.05em; }
/* Keep section headings visually separated from the explanatory paragraph that follows. */
.section h2 + p:not(.index) { margin-top:24px; }
.lead { max-width:735px; margin:28px 0 25px; color:var(--blue); font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.4; }
.intro { max-width:710px; margin:27px 0 25px; color:var(--mute); font-size:1.04rem; }
.heroSeparator { max-width:520px; margin:25px 0; border-top:1px solid var(--line); }
/* Shared default: a slightly extended, secondary operating-question panel. */
.hero aside,.question { padding:34px 32px 40px; background:var(--deep); color:#fff; }
.hero aside .eyebrow,.question .eyebrow { color:#aee4dd; }
.hero aside h3,.question h2 { color:#fff; font-family:var(--sans); font-size:clamp(1.35rem,2vw,1.85rem); font-weight:600; letter-spacing:-.035em; line-height:1.08; }
.hero aside hr,.question hr { width:52px; margin:29px 0 21px; border:0; border-top:3px solid var(--lime); }
.hero aside p:last-child,.question p:last-child { margin:0; color:#fff; font-size:1rem; font-weight:normal; letter-spacing:normal; line-height:1.7; }

.section { padding:var(--case-section-pad) 0; }
.capabilities { padding:var(--case-section-pad) 0; }
.paper { background:var(--white); }
.mint { background:var(--mint); }
.aqua { background:var(--aqua); }
.gold { background:var(--gold); }
.navy { background:var(--deep); color:#e9f4f2; }
.navy h2,.navy h3 { color:#fff; }
.navy .index,.navy .eyebrow { color:#aee4dd; }
.center { text-align:center; }
/*
  Section-header alignment primitive:
  keep each eyebrow attached to the heading it labels.
  Centered sections share one center axis; left/split sections share one
  content edge. Card-level eyebrows remain local to their card.
*/
.sectionHeader { min-width:0; }
.sectionHeader--left { text-align:left; }
.sectionHeader--center { text-align:center; }
.sectionHeader--center > p:not(.index):not(.closing) { max-width:700px; margin:24px auto 0; }
.sectionHeader--left > p:not(.index) { margin:24px 0 0; }
/* Wrapped section headers need the same breathing room that direct heading/paragraph pairs receive. */
.sectionHeader + p:not(.index) { margin-top:28px; }
/* Keep a deliberate pause between supporting copy and the cards it introduces. */
.sectionHeader + .cards,
.sectionHeader + .roles,
.sectionHeader + .evidence,
.sectionHeader + .evidenceGrid,
.sectionHeader + .outputCards,
.sectionHeader + .useCards { margin-top:36px; }
.sectionHeader + p + .roles,
.sectionHeader + p + .evidence,
.sectionHeader + p + .outputCards { margin-top:36px; }
.center > p:not(.index) { max-width:700px; margin:24px auto 0; }
.navy .center > p:not(.index) { color:#e9f4f2; }
/* Split headers and supporting copy share a baseline: the right column sits at the bottom of the heading block. */
.split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr); gap:70px; align-items:end; margin-bottom:50px; }
.split > p { margin:0; color:var(--mute); font-size:1.08rem; }
.flow { position:relative; }
.flow h3 { font:700 1.04rem/1.18 var(--sans); letter-spacing:-.02em; }
.flow em,.flow b { color:var(--deep); font-family:var(--sans); }
.cards,.roles,.evidence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.roles article,.evidence article { padding:40px 43px; }
/*
  Capability tags use a deliberate 3/2 pyramid:
  three primary signals lead, with two supporting signals centered below.
*/
.tags {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  max-width:960px;
  margin:36px auto 0;
  gap:8px;
}
.tags span:nth-child(1) { grid-column:1 / span 2; }
.tags span:nth-child(2) { grid-column:3 / span 2; }
.tags span:nth-child(3) { grid-column:5 / span 2; }
.tags span:nth-child(4) { grid-column:2 / span 2; }
.tags span:nth-child(5) { grid-column:4 / span 2; }
.tags span { border:1px solid #6d939b; padding:8px 12px; color:#f2fbf9; font-size:.82rem; text-align:center; }
.closing { margin-top:33px !important; color:#fff !important; font:var(--case-closing-size)/1.38 var(--sans); font-size:var(--case-closing-size) !important; }
.toolCallout .eyebrow { color:var(--deep); }
footer { margin-top:28px; padding:25px 0 27px; background:#0b2c3b; color:#e6f0ed; }
.foot { width:min(1440px,calc(100% - 64px)); display:flex; align-items:center; justify-content:space-between; gap:32px; }
.foot .contactIcons { flex:none; }
.foot strong { font-size:.94rem; }
.foot p { max-width:520px; margin:6px 0 0; color:#b9d2cc; font-size:.78rem; line-height:1.45; }

@media(max-width:1100px) {
  .routeWrap { grid-template-columns:165px minmax(0,1fr) 80px; }
  .routeContacts { justify-content:flex-end; }
  .projectLink { padding-right:16px; padding-left:16px; }
  .projectLink.active::after { right:16px; left:16px; }
  .caseShell { grid-template-columns:var(--case-rail-width) minmax(0,1fr); gap:71px; }
  .caseShell > main > .hero > .wrap,.caseShell > main > .section > .wrap,.caseShell > main > .section > .narrow { padding-right:20px; padding-left:20px; }
}
@media(max-width:980px) {
  .heroGrid,.split { grid-template-columns:1fr; gap:38px; }
}
@media(max-width:720px) {
  .routeWrap { width:calc(100% - 8px); min-height:90px; grid-template-columns:54px var(--brand-mark-size-mobile) minmax(0,1fr); gap:6px; }
  .portfolioHome { display:flex; width:var(--brand-mark-size-mobile); height:var(--brand-mark-size-mobile); gap:0; }
  .portfolioHome b { width:var(--brand-mark-size-mobile); height:var(--brand-mark-size-mobile); font-size:var(--brand-mark-initials-size-mobile); }
  .portfolioHome span { display:none; }
  .projectNav { display:flex; width:auto; min-width:0; align-self:stretch; margin-left:6px; overflow:visible; }
  .projectLink { min-width:0; min-height:90px; flex:1 1 0; justify-content:flex-start; gap:12px; padding:18px 2px 4px; text-align:center; }
  .projectLink > span { display:block; width:100%; height:9px; color:var(--blue); font:700 .62rem/1 var(--sans); letter-spacing:.08em; }
  .projectLink strong { width:100%; height:2.2em; align-self:stretch; overflow-wrap:anywhere; color:var(--ink); font:400 .75rem/1.02 var(--serif); text-align:center; white-space:normal; }
  .projectLink .projectLinkTitle--desktop { display:none; }
  .projectLink .projectLinkTitle--mobile { display:inline; }
  .projectLink.active strong { font-weight:normal; }
  .projectLink:last-child { border-right:1px solid var(--line); }
  .projectLink.active::after { right:2px; left:2px; }
  .pageJump { display:grid; grid-column:1; grid-row:1; width:34px; height:44px; place-items:center; justify-self:center; padding:0; }
  .pageJump:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
  .pageJumpIcon { display:block; width:34px; height:20px; color:var(--blue); font-size:0; line-height:0; background:linear-gradient(to bottom,var(--blue) 0 3px,transparent 3px 8px,var(--blue) 8px 11px,transparent 11px 16px,var(--blue) 16px 19px,transparent 19px 20px); }
  .routeContacts { display:none; }
  .pageIndexScrim { position:fixed; inset:0; z-index:40; display:block; border:0; background:rgba(23,36,45,.22); cursor:default; opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .pageIndex { position:fixed; top:0; right:auto; bottom:0; left:0; z-index:50; display:flex; flex-direction:column; width:min(320px,calc(100% - 48px)); height:100dvh; overflow-y:auto; padding:26px 24px 34px; border:0; border-right:1px solid var(--line); background:var(--paper); box-shadow:18px 0 35px rgba(23,36,45,.12); transform:translateX(-100%); visibility:hidden; pointer-events:none; transition:transform .25s ease,visibility 0s linear .25s; }
  .pageIndex.pageIndex--home { display:flex; }
  .pageIndex.is-open { transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
  .pageIndexHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 31px; color:var(--blue); font:700 .75rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
  .pageIndexHeader > div { display:flex; flex-direction:column; gap:10px; min-width:0; }
  .pageIndexTitle { color:var(--ink); font:700 1.1rem/1.12 var(--sans); letter-spacing:-.025em; text-transform:none; }
  .pageIndexHome { color:var(--blue); font:700 .78rem/1 var(--sans); letter-spacing:.08em; text-decoration:underline; text-underline-offset:4px; text-transform:none; }
  .pageIndexClose { display:grid; width:34px; height:34px; place-items:center; padding:0; border:0; background:transparent; color:var(--ink); cursor:pointer; font:2rem/1 var(--sans); }
  .pageIndexClose:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
  .pageIndex nav { gap:28px; }
  .pageIndexGroup { gap:13px; }
  .pageIndexGroup + .pageIndexGroup { padding-top:20px; }
  .pageIndexPhase { display:block; font-size:.72rem; }
  .pageIndex a { padding-left:0; font-size:1rem; }
  .pageIndex a::before { top:.15em; right:auto; bottom:.15em; left:-11px; width:3px; height:auto; }
  .pageIndex > nav { flex:none; }
  .pageIndexFooter { display:flex; flex-direction:column; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
  .pageIndexContactLabel { color:var(--blue); font:700 .72rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
  .pageIndexContacts { display:flex; flex-direction:row !important; gap:14px; }
  .pageIndexContacts .contactIcon { width:25px; height:25px; }
  .pageIndexContacts .contactIconImage--linkedin { width:22px; height:22px; }
  .pageIndexContacts .contactIconImage--email { width:25px; height:25px; }
  body.pageIndexOpen { overflow:hidden; }
  body.pageIndexOpen .pageIndexScrim { opacity:1; pointer-events:auto; }
  .caseShell { display:block; width:100%; }
  .foot { align-items:flex-start; flex-direction:column; gap:15px; }
  .hero { padding:70px 0 66px; }
  .caseShell > main > .hero > .wrap,.caseShell > main > .section > .wrap,.caseShell > main > .section > .narrow { padding-right:16px; padding-left:16px; }
  .section { padding:var(--case-section-pad-mobile) 0; }
  .flow,.cards,.roles,.evidence { grid-template-columns:1fr; }
}

/* On narrow screens, prioritize readable tag width over the desktop pyramid. */
@media(max-width:720px) {
  .tags { grid-template-columns:1fr; }
  .tags span:nth-child(n) { grid-column:auto; }
}
/* DESIGN-REVIEW:START */
/* Generated by local design-review mode. All targets are shared by owner decision. */

/* DESIGN-REVIEW:END */