/*
 * Phoenix story-family visual system.
 * Shared by Our Story, Our Studio, Our Leaders, Our Community and
 * Community in Action. Content and layout stay intact; this file supplies
 * the same measured pastel rhythm used on Home.
 */
.phoenix-story-family main > .phoenix-tone-white{background:#fff!important}
.phoenix-story-family main > .phoenix-tone-sage{background:var(--green-pale,#C8DDCA)!important}
.phoenix-story-family main > .phoenix-tone-lilac{background:var(--purple-pale,#D8CEEE)!important}
.phoenix-story-family main > .phoenix-tone-blue{background:var(--navy-pale,#D8E3EB)!important}
.phoenix-story-family main > .phoenix-tone-gold{background:var(--gold-pale,#EDD9B0)!important}

/* One intentional card language: surface + fine border + gentle lift. */
.phoenix-story-family :is(.card,.leader-card,.profile-card,.ownership-card,.reach-card,.video-feature-card,.lky-panel){
  border:1px solid rgba(26,43,60,.11)!important;
  border-top-width:1px!important;
  border-radius:12px!important;
  box-shadow:0 8px 24px rgba(26,43,60,.07)!important;
  overflow:hidden;
}

/* Colour belongs to the section or image; cards do not gain random stripes. */
.phoenix-story-family :is(.card,.leader-card,.profile-card,.ownership-card,.reach-card,.video-feature-card,.lky-panel)::before{
  display:none!important;
}

/* A left rule is reserved for a person's own words. */
.phoenix-story-family :is(blockquote,.leader-why){
  border-top:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-left:3px solid var(--gold,#C9A96E)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Icon circles are for guidance and facts, never decoration by themselves. */
.phoenix-story-family :is(.phoenix-icon-badge,.choice-icon,.fact-icon){
  inline-size:48px;
  block-size:48px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  color:var(--navy,#1A2B3C);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(26,43,60,.10);
}

@media(max-width:640px){
  .phoenix-story-family :is(.card,.leader-card,.profile-card,.ownership-card,.reach-card,.video-feature-card,.lky-panel){
    border-radius:9px!important;
    box-shadow:0 5px 16px rgba(26,43,60,.06)!important;
  }
}

/* Our Story: one progressive editorial narrative. */
.story-flow .story-origin-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(40px,7vw,88px);align-items:center}
.story-flow .story-copy>p{font-size:17px;line-height:1.8;color:var(--text-mid);font-weight:300}
.story-flow .story-image{margin:0}
.story-flow .story-image img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%;border-radius:12px;display:block}
.story-flow .story-quote{margin:30px 0 0;padding:6px 0 6px 24px}
.story-flow .story-quote p{font-family:'Aleo',serif;font-size:clamp(18px,2vw,24px);font-style:italic;color:var(--navy);line-height:1.55;margin-bottom:12px}
.story-flow .story-quote cite,.story-flow .story-voices cite{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--green)}
.story-flow .story-quote a{color:inherit;border-bottom:1px solid currentColor}
.story-flow .story-section-intro{max-width:760px;margin:0 auto 40px;text-align:center}
.story-flow .story-section-intro>p{font-size:17px;line-height:1.75;color:var(--text-mid)}
.story-flow .story-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.story-flow .story-proof{background:rgba(255,255,255,.75);border:1px solid rgba(26,43,60,.1);border-radius:12px;padding:28px}
.story-flow .story-proof h3{margin:18px 0 8px}
.story-flow .story-proof p{font-size:15px;color:var(--text-mid);line-height:1.7;margin:0}
.story-flow .story-meaning{margin-top:30px;padding:30px 34px;background:var(--navy);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.story-flow .story-meaning .eyebrow{color:var(--gold)}
.story-flow .story-meaning h3{color:#fff;margin:5px 0 8px}
.story-flow .story-meaning p{color:rgba(255,255,255,.76);margin:0;max-width:680px}
.story-flow .story-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.story-flow .story-value-card{background:#fff;border:1px solid rgba(26,43,60,.1);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(26,43,60,.07)}
.story-flow .story-value-card img{width:100%;height:220px;object-fit:cover;display:block}
.story-flow .story-value-card>div{padding:26px}
.story-flow .story-value-card h3{margin-bottom:10px}
.story-flow .story-value-card p{font-size:15px;line-height:1.7;color:var(--text-mid);margin:0}
.story-flow .story-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.story-flow .story-voices blockquote{margin:0;padding:6px 0 6px 22px}
.story-flow .story-voices p{font-family:'Aleo',serif;font-size:16px;font-style:italic;line-height:1.7;color:var(--navy)}
.story-flow .story-people-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:38px}
@media(max-width:900px){
  .story-flow .story-origin-grid{grid-template-columns:1fr}
  .story-flow .story-image img{aspect-ratio:16/9}
  .story-flow .story-proof-grid,.story-flow .story-values-grid{grid-template-columns:1fr}
  .story-flow .story-voices{grid-template-columns:1fr}
}
@media(max-width:640px){
  .story-flow .story-meaning{align-items:flex-start;flex-direction:column;padding:26px 22px}
  .story-flow .story-value-card img{height:190px}
}