:root{
  --bg:#07111f;--panel:#0f2038;--line:#31445f;--text:#f3f7ff;--muted:#d9e6f7;--soft:#a9b8cd;
  --green:#22c55e;--violet:#a855f7;--cyan:#15d1ff;--shadow:0 18px 48px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top,#0c1f38 0,#07111f 42%,#040912 100%);color:var(--text)}
a{color:inherit}.page{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:26px 0 42px}.topbar{position:sticky;top:14px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;padding:14px 18px;border:1px solid rgba(49,68,95,.66);border-radius:18px;background:rgba(8,16,32,.84);backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.brand{font-weight:800;letter-spacing:.3px}.nav{display:flex;gap:14px;flex-wrap:wrap}.nav a{text-decoration:none;color:var(--muted);font-weight:700}.nav a:hover{color:#fff}.panel{margin:0 0 22px;padding:28px;border:1px solid rgba(49,68,95,.56);border-radius:28px;background:linear-gradient(180deg,rgba(15,32,56,.94),rgba(10,21,38,.86));box-shadow:var(--shadow)}
.hero{display:grid;grid-template-columns:1.03fr .97fr;gap:28px;align-items:center}.eyebrow{margin:0 0 8px;font-size:.84rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#8fb7ff}.hero h1{margin:0 0 14px;font-size:clamp(2.9rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.03em}.tagline{margin:0 0 14px;font-size:1.22rem;color:var(--muted);max-width:46rem}.availability{margin:0;color:#c5d4e8;font-weight:700}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;background:linear-gradient(135deg,#1277ff,#5c8cff);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 12px 30px rgba(18,119,255,.22)}.btn.ghost{background:rgba(10,24,44,.42);border-color:rgba(143,183,255,.35);box-shadow:none}.btn.small{min-height:40px;padding:0 15px;font-size:.95rem}
.hero-highlights{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.hero-highlights span,.tag-row span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(49,68,95,.66);background:rgba(10,24,44,.66);color:var(--text);font-weight:700;font-size:.92rem}.hero-image,.section-image{width:100%;height:auto;display:block;border-radius:24px;border:1px solid rgba(49,68,95,.48);background:#07111f}
h2{margin:0 0 10px;font-size:2rem;line-height:1.08;letter-spacing:-.02em}h3{margin:0 0 10px;font-size:1.38rem;line-height:1.15}p{margin:0 0 12px;color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:20px}.method-callout{max-width:360px;padding:18px 18px;border-radius:22px;border:1px solid rgba(49,68,95,.56);background:linear-gradient(180deg,rgba(9,19,35,.88),rgba(12,27,46,.72))}.method-callout strong{display:block;margin-bottom:8px;font-size:1rem}.method-callout span{display:block;color:var(--soft);line-height:1.65}
.positioning-grid,.work-grid.refined,.image-grid.upgraded{display:grid;gap:18px}.positioning-grid{grid-template-columns:1.05fr .95fr}.image-grid.upgraded{grid-template-columns:1.08fr .92fr;align-items:start}.work-grid.refined{grid-template-columns:repeat(3,minmax(0,1fr))}.positioning-card,.work-card,.visual-card{padding:24px;border-radius:24px;border:1px solid rgba(49,68,95,.56);background:rgba(8,20,37,.58)}.positioning-card.emphasis{background:linear-gradient(180deg,rgba(14,33,58,.84),rgba(8,19,34,.74));border-color:rgba(34,197,94,.34)}.signal-list{margin:0;padding-left:20px;color:var(--muted)}.signal-list li{margin:0 0 10px;line-height:1.68}.signal-list.compact li{margin-bottom:12px}
.visual-card{padding:18px;background:linear-gradient(180deg,rgba(9,18,34,.92),rgba(9,18,34,.68))}.visual-card figcaption,.evidence-figure figcaption{margin-top:12px;color:var(--soft);font-size:.97rem;line-height:1.6}.work-card{display:flex;flex-direction:column;gap:8px}.work-card.primary{border-color:rgba(34,197,94,.72)}.work-card.flagship{border-color:rgba(168,85,247,.75)}.work-card.secondary{border-color:rgba(6,182,212,.58)}.work-card .btn{margin-top:auto;align-self:flex-start}.work-card.featured{box-shadow:0 18px 40px rgba(34,197,94,.08)}.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.evidence-figure{margin:22px 0 0;padding:20px;border-radius:24px;border:1px solid rgba(49,68,95,.52);background:rgba(7,17,31,.45)}.supporting-note{margin-top:18px;padding:18px 20px;border-radius:20px;border:1px solid rgba(49,68,95,.5);background:rgba(7,17,31,.52);color:var(--soft);line-height:1.72}.boundary{border-color:rgba(251,191,36,.44)}.footer{padding:24px;text-align:center;color:var(--soft)}.inline-link{color:#93c5fd;text-decoration:none;font-weight:800}.inline-link:hover,.work-card a:hover{text-decoration:underline}
.deploy-badge{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(49,68,95,.66);border-radius:999px;padding:8px 14px;background:rgba(8,16,32,.78);box-shadow:0 10px 28px rgba(0,0,0,.18)}.deploy-badge img{display:block;height:24px;width:auto}.deploy-badge.inline{padding:6px 10px}.badge-callout{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
#methods .section-image,#work .work-card,#positioning .positioning-card,.visual-card,.evidence-figure{transition:transform .18s ease,box-shadow .18s ease}#methods .section-image:hover,#work .work-card:hover,#positioning .positioning-card:hover,.visual-card:hover,.evidence-figure:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
@media(max-width:1024px){.hero,.positioning-grid,.image-grid.upgraded,.work-grid.refined,.section-head{grid-template-columns:1fr;display:grid}.method-callout{max-width:none}.page{width:min(1240px,calc(100% - 22px))}.topbar{position:relative;align-items:flex-start;flex-direction:column}.panel{padding:24px}}


.deploy-badge img{display:block;max-height:28px}.deploy-badge.inline img{max-height:24px}
.nav a{padding:6px 10px;border-radius:999px;transition:all .18s ease}.nav a:hover{background:rgba(255,255,255,.06)}
.hero{padding:34px}.hero-copy{max-width:640px}.hero-highlights span{background:rgba(13,28,50,.85);border-color:rgba(110,144,192,.45)}
.section-head h2{margin-bottom:8px}.mini-rule{width:76px;height:3px;margin:10px 0 12px;border-radius:999px;background:linear-gradient(90deg,#15d1ff,#a855f7,#22c55e)}
.visual-feature{position:relative;overflow:hidden}.visual-feature::after{content:"";position:absolute;inset:auto 18px 16px 18px;height:1px;background:linear-gradient(90deg,rgba(21,209,255,.0),rgba(21,209,255,.45),rgba(168,85,247,.45),rgba(34,197,94,.0))}.visual-feature figcaption{font-size:.98rem;line-height:1.7}.visual-card.accent{box-shadow:0 0 0 1px rgba(21,209,255,.14), 0 18px 48px rgba(0,0,0,.22)}
.work-grid.refined{grid-template-columns:repeat(6,minmax(0,1fr))}.guide-card{background:linear-gradient(180deg,rgba(11,25,43,.96),rgba(9,18,34,.82));border-color:rgba(143,183,255,.28)}
.work-card h3{font-size:1.48rem}.work-card p{font-size:1.02rem}.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}.tag-row span{font-size:.9rem}
.evidence-figure{margin:22px 0 0}.evidence-figure img{width:100%;display:block;border-radius:24px;border:1px solid rgba(49,68,95,.48)}.evidence-figure figcaption{margin-top:12px;color:var(--soft);line-height:1.7}.supporting-note{margin-top:18px;padding:16px 18px;border-radius:18px;border:1px solid rgba(143,183,255,.18);background:rgba(10,24,44,.5);color:var(--muted)}
@media (max-width:1100px){.work-grid.refined{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.hero,.positioning-grid,.image-grid.upgraded{grid-template-columns:1fr}.section-head{flex-direction:column}.topbar{position:static}.page{width:min(100% - 24px,1240px)}.work-grid.refined{grid-template-columns:1fr}.hero h1{font-size:clamp(2.4rem,9vw,3.5rem)} }


/* --------------------------------------------------------------------------
   Final GH Pages micro-adjustments
   Objective:
   - preserve the original visual language;
   - reduce dead space after adding ERL;
   - keep the header and hero flagship professional, balanced, and elegant;
   - make ERL visible without weakening PSRP as the primary proof.
-------------------------------------------------------------------------- */

.topbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.topbar .brand{justify-self:start}
.topbar .nav{justify-self:center}
.topbar .deploy-badge{justify-self:end}

.hero{
  grid-template-columns:1fr;
  gap:26px;
  padding:36px;
}

.hero-copy{max-width:980px}
.hero h1{max-width:860px}

.hero-image{
  max-height:660px;
  object-fit:contain;
  object-position:center;
  box-shadow:0 26px 70px rgba(0,0,0,.30),0 0 0 1px rgba(59,130,246,.18);
}

.work-grid.refined{
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
}

.work-grid.refined > .guide-card,
.work-grid.refined > .work-card.primary,
.work-grid.refined > .work-card.flagship{
  grid-column:span 2;
}

.work-grid.refined > .work-card.secondary{
  grid-column:span 3;
}

.work-card.erl-card,
.work-card[data-project="erl"]{
  border-color:rgba(245,158,11,.54);
  background:
    radial-gradient(circle at 20% 0%,rgba(245,158,11,.13),transparent 34%),
    linear-gradient(180deg,rgba(20,29,46,.92),rgba(9,18,34,.72));
  box-shadow:0 18px 42px rgba(245,158,11,.07);
}

.work-card.erl-card .eyebrow,
.work-card[data-project="erl"] .eyebrow{
  color:#fcd34d;
}

.work-card.erl-card .tag-row span,
.work-card[data-project="erl"] .tag-row span{
  border-color:rgba(245,158,11,.42);
  background:rgba(120,53,15,.22);
}

.work-card{min-width:0}

.work-card p,
.work-card h3,
.supporting-note,
.evidence-figure figcaption{
  overflow-wrap:break-word;
}

.tag-row{
  gap:10px;
  row-gap:10px;
}

.tag-row span{
  white-space:normal;
  line-height:1.25;
}

.evidence-figure{margin-top:24px}
.supporting-note{margin-top:18px}

@media (max-width:1100px){
  .topbar{
    grid-template-columns:1fr;
    justify-items:start;
  }

  .topbar .brand,
  .topbar .nav,
  .topbar .deploy-badge{
    justify-self:start;
  }

  .work-grid.refined{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .work-grid.refined > .guide-card,
  .work-grid.refined > .work-card.primary,
  .work-grid.refined > .work-card.flagship,
  .work-grid.refined > .work-card.secondary{
    grid-column:span 1;
  }
}

@media (max-width:760px){
  .hero{padding:24px}
  .work-grid.refined{grid-template-columns:1fr}
}


/* --------------------------------------------------------------------------
   Architecture & Methods final readability pass
   Objective:
   - use the available horizontal space more effectively;
   - make methodology images readable without changing the visual identity;
   - reduce dead space caused by undersized graphics;
   - preserve the original card/panel design language.
-------------------------------------------------------------------------- */

#methods .image-grid.upgraded{
  grid-template-columns:1fr;
  gap:22px;
}

#methods .visual-card{
  padding:22px;
}

#methods .visual-card .section-image{
  width:100%;
  max-height:none;
  object-fit:contain;
  border-radius:22px;
}

#methods .visual-card figcaption{
  max-width:980px;
  margin:14px auto 0;
  font-size:1rem;
  line-height:1.65;
  text-align:left;
}

/* Make the two Architecture & Methods visuals use the same readable stage size. */
#methods .visual-card.visual-feature,
#methods .visual-card.accent{
  max-width:1060px;
  width:100%;
  margin-inline:auto;
}

/* The first architecture stack image is dense; give it more readable visual presence. */
#methods .visual-card.visual-feature .section-image,
#methods .visual-card.accent .section-image{
  min-height:360px;
}

/* Avoid tiny infographics on wide displays while preserving responsive behavior. */
@media (min-width:1025px){
  #methods .visual-card.visual-feature .section-image,
  #methods .visual-card.accent .section-image{
    min-height:420px;
  }
}

/* On smaller screens, keep the layout clean and avoid forced vertical overflow. */
@media (max-width:760px){
  #methods .visual-card{
    padding:16px;
  }

  #methods .visual-card.visual-feature .section-image,
  #methods .visual-card.accent .section-image{
    min-height:auto;
  }

  #methods .visual-card figcaption{
    font-size:.95rem;
  }
}