/* homepage-step-panels.css
   One simple embossed "shell" per homepage narrative step (Step 1: the
   archive, Step 2: the programs, Step 3: staying current) — a single
   raised box in the site's own page color, told apart from the page only
   by the sitewide soft-shadow "raise" effect (the same var(--raise) used
   on cards elsewhere on the site). No ridge, no nested inner panel, no
   color change — just one box, one shadow, per step.
   Loaded after homepage-layout-revision.css, so it overrides the older
   flat band/border treatment that section previously used. */

.step-shell{
  position:relative;
  width:min(1340px,calc(100% - 100px));
  margin:52px auto;
  padding:40px 40px 44px;
  border-radius:20px;
  background:#f0eee8;
  box-shadow:var(--raise);
}

/* The ridge/inner-panel wrapper divs stay in the markup (added in the
   prior pass) but are flattened to invisible pass-throughs — the single
   .step-shell box above is the only thing that draws a shadow now. */
.step-shell-ridge{display:none}
.step-shell-body{margin:0;padding:0;background:none;box-shadow:none;border-radius:0}

/* Steps 1 & 3 wrap existing hub-width sections; the shell now owns the
   width, so the inner section just fills it. */
.step-shell-body>.featured-conversation,
.step-shell-body>.collection-section{
  width:100%;
  margin:0;
  padding:0;
}

/* Step 2 keeps its own tag (the shell IS the <section>); its inner
   .hub-width just needs to fill the shell instead of re-applying the
   sitewide hub-width formula inside an already-narrower parent. */
.project-section.step-shell{
  border-block:0;
  background:#f0eee8;
  padding:40px 40px 44px;
}
.project-section.step-shell>.step-shell-body>.hub-width{
  width:100%;
  margin-inline:0;
}

/* The "Step 1/2/3" pill sits at the top of the box. */
.step-shell .step-eyebrow{margin-bottom:16px}

/* Let every step headline choose its own line breaks instead of leaving an
   orphaned word or a lopsided last line. */
.step-shell h2{text-wrap:balance}

/* Step 1's monitor graphic: a single static image (it already has real
   transparency) instead of the old two-image crossfade. */
.feature-photo-solo{
  position:relative;
  width:100%;
  height:350px;
  overflow:hidden;
  background:#f0eee8;
  border-radius:20px;
}
.feature-photo-computer{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px 26px;
  box-sizing:border-box;
}

@media(max-width:850px){
  .step-shell{width:calc(100% - 60px);border-radius:20px;margin:38px auto;padding:30px 28px 34px}
  .project-section.step-shell{padding:30px 28px 34px}
  .feature-photo-solo{height:260px}
}

@media(max-width:600px){
  .step-shell{width:calc(100% - 40px);border-radius:20px;margin:28px auto;padding:24px 20px 28px}
  .project-section.step-shell{padding:24px 20px 28px}
  .feature-photo-solo{height:220px}
}

@media(prefers-contrast:more){
  .step-shell{box-shadow:0 0 0 1px #b7ae99}
}

/* Steps 1-3 share one heading and description format; Step 1 is the model */
body .step-shell .feature-copy h2,body .step-shell .section-heading h2{font-size:clamp(30px,3vw,43px);line-height:1.15;letter-spacing:-.04em;font-weight:550;color:#243747;margin:0}
body .step-shell.step-shell .feature-copy>p:not(.eyebrow),body .step-shell.step-shell .section-heading-copy>p:not(.eyebrow){font-size:19px;line-height:1.5;color:#4a545c;margin:22px 0 0;max-width:560px}
body .step-shell.step-shell .section-heading-copy>p:not(.eyebrow)+p:not(.eyebrow){margin-top:14px}
body .step-shell.step-shell-1 .feature-copy>p:not(.eyebrow){max-width:430px;margin:22px 0}
@media(max-width:600px){body .step-shell .feature-copy h2,body .step-shell .section-heading h2{font-size:29px}}

/* Step 3: a stack of blog posts on the right, mirroring Step 1's picture */
.step-shell-3 .section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.step-shell-3 .section-heading-copy{flex:1 1 0;max-width:none}
.blog-stack{position:relative;flex:0 0 min(48%,560px);height:345px;margin-top:-6px}
.bs-card{position:absolute;width:64%;padding:8px;background:#f0eee8;border:1px solid #ffffffb3;border-radius:20px;box-shadow:var(--raise)}
.blog-stack .bs-card>img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1.9;object-fit:cover;border-radius:14px}
.bs-eyebrow{margin:10px 8px 4px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8f713e}
.bs-title{margin:0 8px 8px;font-size:14px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:#243747}
.bs-3{right:0;top:10px;transform:rotate(4deg);z-index:1}
.bs-2{left:18%;top:46px;transform:rotate(-2.5deg);z-index:2}
.bs-1{left:0;top:86px;z-index:3}
@media(max-width:800px){.step-shell-3 .section-heading{flex-direction:column;align-items:stretch;gap:24px}.blog-stack{order:-1;flex:none;width:100%;height:340px}.bs-card{width:66%}}
@media(max-width:600px){.blog-stack{height:290px}.bs-card{width:72%}.bs-title{font-size:13px}.bs-2{left:14%;top:30px}.bs-1{top:62px}}

/* Step 2: role tags and "find your door" strip */
.step-shell-2 .role-tag{display:block;margin:14px 0 0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8f713e}
.step-shell-2 .role-tag+p{margin-top:6px !important}
.step-shell-2 .door-finder{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 0 !important}
.step-shell-2 .door-finder span{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4a545c;margin-right:4px}
.step-shell-2 .door-finder a{display:inline-block;padding:9px 16px;border-radius:999px;background:#f0eee8;border:1px solid #ffffffb3;box-shadow:var(--raise);font-size:14px;font-weight:600;color:#243747;text-decoration:none}
.step-shell-2 .door-finder a:hover,.step-shell-2 .door-finder a:focus-visible{color:#8f713e;outline:2px solid #a68862;outline-offset:2px}

/* Step 2 graphic: crisis-checklist monitor beside the headline, with a slow screen gleam */
#programs.step-shell-2 .section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
#programs.step-shell-2 .section-heading-copy{flex:1 1 0;max-width:none}
.step2-monitor{flex:0 0 min(48%,560px);margin-top:-6px}
.step2-monitor .monitor-wrap{position:relative;width:100%;aspect-ratio:1671/941}
.step2-monitor .feature-photo-computer{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
.screen-gleam{position:absolute;left:17.4%;top:8%;width:65.7%;height:67.5%;overflow:hidden;border-radius:4px;pointer-events:none}
.screen-gleam::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:42%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.62) 50%,transparent 100%);transform:translateX(-160%) skewX(-18deg);animation:screen-gleam 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes screen-gleam{0%{transform:translateX(-160%) skewX(-18deg)}30%,100%{transform:translateX(420%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.screen-gleam::before{animation:none;opacity:0}}
@media(max-width:800px){#programs.step-shell-2 .section-heading{flex-direction:column;align-items:stretch;gap:24px}.step2-monitor{order:-1;flex:none;width:100%;max-width:520px;margin:0 auto}}