/* Success Stories — editorial case-study layout.
   Brand palette only: #012F38 dark teal, #6aba5a green, #f8f7f4 off-white, white.
   Images lead; text sits on off-white or white. No card-directory look, no
   equal-height white boxes, no sidebar. */

.ss-wrap{background:#f8f7f4}
.ss-inner{max-width:1200px;margin:0 auto;padding:0 2rem}
@media (max-width:760px){.ss-inner{padding:0 1.25rem}}

/* ── intro / philosophy bands ──────────────────────────────────────────── */
.ss-band{padding:5rem 0}
.ss-band.tight{padding:3.5rem 0}
.ss-band.dark{background:#012F38}
.ss-eyebrow{font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;margin:0 0 1rem}
/* .ss-eyebrow is itself a <p> inside .ss-band, so the plain class selector
   ties on specificity with .ss-band p below and loses on source order —
   scope both explicitly so the eyebrow color always wins */
.ss-band .ss-eyebrow{color:var(--teal,#48A3A6)}
.ss-band.dark .ss-eyebrow{color:var(--lime,#A2C243)}
.ss-band h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.18;color:#012F38;font-weight:700;margin:0 0 1.4rem;max-width:20ch}
.ss-band.dark h2{color:#fff}
.ss-band p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.06rem;line-height:1.8;
  color:var(--muted,#5A5A5A);margin:0 0 1.1rem;max-width:62ch}
.ss-band.dark p{color:rgba(255,255,255,.8)}
.ss-lede{font-size:1.18rem !important;color:#012F38 !important;font-weight:400}
.ss-band.dark .ss-lede{color:#fff !important}

/* ── featured story ────────────────────────────────────────────────────── */
.ss-featured{display:block;text-decoration:none;background:#fff;overflow:hidden;
  border-radius:4px;box-shadow:0 30px 70px rgba(1,47,56,.10);transition:box-shadow .25s,transform .25s}
.ss-featured:hover{box-shadow:0 38px 90px rgba(1,47,56,.16);transform:translateY(-3px)}
/* 16/9 made this ~520px tall on a desktop and the skyline shot dominated the
   whole card before the headline got a look in. A wider, shorter crop keeps the
   photo doing its job as a banner without swallowing the story. The max-height
   stops it growing again on very wide monitors. Mobile keeps 16/9 -- 21/9 at
   375px wide is a letterbox slot. */
.ss-featured-img{display:block;width:100%;height:auto;aspect-ratio:21/9;max-height:340px;
  object-fit:cover;background:#012F38}
@media (max-width:760px){.ss-featured-img{aspect-ratio:16/9;max-height:none}}
.ss-featured-body{display:block;padding:2.6rem 3rem 3rem}
.ss-featured h3{font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15;color:#012F38;margin:.7rem 0 1rem;
  font-weight:700;max-width:22ch}
.ss-featured p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.05rem;line-height:1.78;
  color:var(--muted,#5A5A5A);margin:0 0 1.6rem;max-width:64ch}
.ss-meta{display:block;font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal,#48A3A6);font-weight:500}
.ss-go{display:inline-block;font-family:'DM Sans',system-ui,sans-serif;font-size:.95rem;font-weight:500;color:#012F38;
  border-bottom:2px solid #6aba5a;padding-bottom:2px}

/* result strip */
.ss-stats{display:flex;flex-wrap:wrap;gap:2.6rem;margin:0 0 1.8rem;padding:1.5rem 0 0;
  border-top:1px solid #e6e3dc}
.ss-stat b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;
  color:#012F38;font-weight:700;line-height:1}
.ss-stat span{display:block;font-family:'DM Sans',system-ui,sans-serif;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#5A5A5A);margin-top:.4rem}
@media (max-width:760px){
  .ss-featured-body{padding:1.8rem 1.5rem 2rem}
  .ss-stats{gap:1.6rem}
  .ss-stat b{font-size:1.5rem}
}

/* ── filters ───────────────────────────────────────────────────────────── */
.ss-filters{display:flex;gap:.55rem;overflow-x:auto;padding:0 0 .5rem;margin:0 0 2.2rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.ss-filters::-webkit-scrollbar{display:none}
.ss-chip{flex:0 0 auto;font-family:'DM Sans',system-ui,sans-serif;font-size:.86rem;
  padding:.55rem 1.15rem;border:1px solid #d5d0c6;background:#fff;color:#012F38;
  border-radius:99px;cursor:pointer;white-space:nowrap;transition:.18s}
.ss-chip:hover{border-color:#6aba5a}
.ss-chip[aria-pressed="true"]{background:#012F38;border-color:#012F38;color:#fff}

/* ── story grid (editorial, deliberately uneven) ───────────────────────── */
.ss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.8rem}
@media (max-width:1000px){.ss-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.ss-grid{grid-template-columns:1fr;gap:2.4rem}}
.ss-card{display:flex;flex-direction:column;text-decoration:none;background:transparent}
.ss-card.is-hidden{display:none}
/* One ratio for every card. The staggered aspect ratios read as inconsistency
   rather than as rhythm once the cards sit side by side. */
.ss-card-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  background:#012F38;border-radius:3px;transition:transform .3s;will-change:transform}
.ss-card:hover .ss-card-img{transform:scale(1.02)}
.ss-card h3{font-family:'Playfair Display',Georgia,serif;font-size:1.32rem;line-height:1.25;
  color:#012F38;font-weight:700;margin:.85rem 0 .5rem}
.ss-card .ss-meta{display:block;margin:.9rem 0 0}
.ss-card p{font-family:'DM Sans',system-ui,sans-serif;font-size:.94rem;line-height:1.72;
  color:var(--muted,#5A5A5A);margin:0 0 .9rem}
.ss-card .ss-go{font-size:.88rem;align-self:flex-start;margin-top:auto}

/* ── individual story page ─────────────────────────────────────────────── */
.st-hero{position:relative;min-height:clamp(380px,52vh,560px);display:flex;align-items:flex-end;
  overflow:hidden;background:#012F38}
/* The hero photo is a real <img> so it carries alt text and is indexable.
   It sits under the gradient scrim; the copy sits above both. */
.st-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;margin:0;display:block}
.st-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(1,47,56,.94) 0%,rgba(1,47,56,.72) 38%,rgba(1,47,56,.22) 100%)}
.st-hero-in{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;
  padding:5.5rem 2rem 3.2rem}
.st-hero h1{font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;color:#fff;font-weight:700;
  margin:.8rem 0 .9rem;max-width:20ch}
.st-hero .st-sum{font-family:'DM Sans',system-ui,sans-serif;font-size:1.08rem;line-height:1.7;
  color:rgba(255,255,255,.86);margin:0;max-width:58ch}
@media (max-width:760px){.st-hero-in{padding:4.5rem 1.25rem 2.2rem}}

.st-strip{background:#012F38;border-top:1px solid rgba(255,255,255,.1)}
.st-strip-in{max-width:1200px;margin:0 auto;padding:2.1rem 2rem;display:flex;flex-wrap:wrap;
  gap:3rem}
.st-strip b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:2.1rem;
  color:#6aba5a;font-weight:700;line-height:1}
.st-strip span{display:block;font-family:'DM Sans',system-ui,sans-serif;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:.45rem}
@media (max-width:760px){
  .st-strip-in{padding:1.5rem 1.25rem;gap:1.5rem 2rem}
  .st-strip b{font-size:1.6rem}
}

.st-body{background:#f8f7f4;padding:4.5rem 0 3rem}
.st-body-in{max-width:760px;margin:0 auto;padding:0 2rem}
.st-body h2{font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;color:#012F38;
  font-weight:700;margin:2.8rem 0 1rem;line-height:1.25}
.st-body h2:first-child{margin-top:0}
.st-body p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.09rem;line-height:1.85;
  color:var(--muted,#5A5A5A);margin:0 0 1.25rem}
.st-body ul{margin:0 0 1.4rem;padding-left:1.2rem}
.st-body li{font-family:'DM Sans',system-ui,sans-serif;font-size:1.05rem;line-height:1.8;
  color:var(--muted,#5A5A5A);margin-bottom:.5rem}
.st-body a{color:#0e7c66;text-decoration:none;border-bottom:1px solid rgba(106,186,90,.5)}
.st-body a:hover{border-bottom-color:#6aba5a}
.st-note{font-size:.9rem !important;color:var(--muted,#5A5A5A) !important;font-style:italic;
  border-left:2px solid #d5d0c6;padding-left:1rem;margin-top:2rem !important}
@media (max-width:760px){.st-body{padding:2.8rem 0 2rem}.st-body-in{padding:0 1.25rem}}

/* related links + CTA */
.st-links{max-width:760px;margin:2.8rem auto 0;padding:1.8rem 2rem 0;border-top:1px solid #e6e3dc}
.st-links h3{font-family:'DM Sans',system-ui,sans-serif;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted,#5A5A5A);font-weight:500;margin:0 0 .9rem}
.st-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.st-links a{font-family:'DM Sans',system-ui,sans-serif;font-size:.9rem;color:#012F38;
  background:#fff;border:1px solid #e0dcd3;border-radius:99px;padding:.5rem 1rem;
  text-decoration:none;transition:.18s}
.st-links a:hover{border-color:#6aba5a}
@media (max-width:760px){.st-links{padding:1.5rem 1.25rem 0}}

.st-cta{background:#012F38;padding:4.2rem 0}
.st-cta-in{max-width:760px;margin:0 auto;padding:0 2rem;text-align:center}
.st-cta h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.6rem,3.2vw,2.2rem);
  color:#fff;font-weight:700;margin:0 0 .9rem;line-height:1.2}
.st-cta p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.05rem;line-height:1.75;
  color:rgba(255,255,255,.78);margin:0 auto 1.8rem;max-width:52ch}
.st-btn{display:inline-block;background:#6aba5a;color:#012F38;font-family:'DM Sans',system-ui,sans-serif;
  font-size:.88rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:.95rem 2rem;border-radius:2px;text-decoration:none;transition:background .2s}
.st-btn:hover{background:#7cc76c}
.st-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);
  margin-left:.6rem}
.st-btn.ghost:hover{background:rgba(255,255,255,.08)}
@media (max-width:600px){
  .st-cta-in{padding:0 1.25rem}
  .st-btn{display:block;text-align:center}
  .st-btn.ghost{margin:.7rem 0 0}
}

/* breadcrumb */
.st-bc{background:#fff;border-bottom:1px solid #e6e3dc}
.st-bc-in{max-width:1200px;margin:0 auto;padding:.9rem 2rem;font-family:'DM Sans',system-ui,sans-serif;
  font-size:.82rem;color:var(--muted,#5A5A5A)}
.st-bc-in a{color:#012F38;text-decoration:none}
.st-bc-in a:hover{color:#0e7c66}
.st-bc-in span{margin:0 .5rem;color:#b9c2c1}
@media (max-width:760px){.st-bc-in{padding:.8rem 1.25rem}}

/* story teaser embedded in guides / community pages */
.ss-embed{background:#012F38;border-radius:4px;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);margin:2.5rem 0}
.ss-embed-img{background-size:cover;background-position:center;min-height:210px}
.ss-embed-body{padding:1.9rem 2rem}
.ss-embed .ss-meta{color:var(--lime,#A2C243)}
.ss-embed h3{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;color:#fff;
  font-weight:700;margin:.6rem 0 .6rem;line-height:1.25}
.ss-embed p{font-family:'DM Sans',system-ui,sans-serif;font-size:.95rem;line-height:1.7;
  color:rgba(255,255,255,.78);margin:0 0 1.1rem}
.ss-embed a.ss-go{color:#fff;border-bottom-color:#6aba5a}
@media (max-width:700px){
  .ss-embed{grid-template-columns:1fr}
  .ss-embed-img{min-height:180px}
  .ss-embed-body{padding:1.5rem 1.35rem}
}


/* ── situations list — Crystal's category copy, editorial not card-grid ──── */
.ss-sit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem 2.6rem;
  margin:1.6rem 0 0;padding:1.8rem 0 0;border-top:1px solid #e6e3dc}
.ss-sit div{max-width:34ch}
.ss-sit b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.08rem;
  color:#012F38;font-weight:700;margin:0 0 .35rem}
.ss-sit p{font-family:'DM Sans',system-ui,sans-serif;font-size:.92rem;line-height:1.65;
  color:var(--muted,#5A5A5A);margin:0}

/* ── the three-part story framework ─────────────────────────────────────── */
.ss-frame{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:1.8rem 0 0}
@media (max-width:760px){.ss-frame{grid-template-columns:1fr;gap:1.4rem}}
.ss-frame div{border-top:3px solid #6aba5a;padding-top:1.1rem}
.ss-frame b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;
  color:#012F38;font-weight:700;margin:0 0 .45rem}
.ss-frame p{font-family:'DM Sans',system-ui,sans-serif;font-size:.96rem;line-height:1.7;
  color:var(--muted,#5A5A5A);margin:0}

/* ── "Featured Success Stories" body copy ───────────────────────────────────
   Crystal rejected the card treatment here — she wants the writing to read as
   writing. One column, measured line length, headings that separate the seven
   blocks without boxing them. */
.ss-prose{max-width:66ch;margin:2rem 0 0}
.ss-prose h3{font-family:'Playfair Display',Georgia,serif;font-size:1.35rem;color:#012F38;
  font-weight:700;margin:2.4rem 0 .7rem;padding-top:1.6rem;
  border-top:1px solid rgba(1,47,56,.12)}
.ss-prose h3:first-child{margin-top:0;padding-top:0;border-top:0}
.ss-prose p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.02rem;line-height:1.8;
  color:var(--muted,#5A5A5A);margin:0 0 1rem}
.ss-prose p:last-child{margin-bottom:0}

/* ── cross-link block: community and guide pages pointing at a story ────────
   Deliberately not a card. Crystal wants these to read as a note in the flow
   of the page, the same call she made on the hub. */
.ss-xlink{max-width:1180px;margin:2.5rem auto;padding:1.6rem 1.8rem;
  background:#f8f7f4;border-left:3px solid #6aba5a;font-family:'DM Sans',system-ui,sans-serif}
.ss-xlink-lbl{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal,#48A3A6);margin-bottom:.55rem}
.ss-xlink a{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;color:#012F38;
  font-weight:700;text-decoration:none;line-height:1.35;display:inline-block;
  border-bottom:2px solid #6aba5a;transition:color .2s}
.ss-xlink a:hover{color:#6aba5a}
.ss-xlink p{font-size:.95rem;line-height:1.72;color:var(--muted,#5A5A5A);margin:.7rem 0 0;max-width:70ch}
@media (max-width:760px){.ss-xlink{margin:2rem 1.25rem;padding:1.3rem 1.4rem}
  .ss-xlink a{font-size:1.1rem}}