
/* Layout refresh — reduce reading density and add structured visual layouts */
:root{
  --lr-bg:#f8f6f1;
  --lr-card:#ffffff;
  --lr-line:rgba(8,8,8,.11);
  --lr-text:rgba(8,8,8,.72);
  --lr-muted:rgba(8,8,8,.55);
}
.story-body > .lead-compact{
  max-width:760px;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.7;
  color:var(--lr-text);
  margin:0 0 22px;
}
.sa-quick-grid,
.sa-break-grid,
.sa-layer-grid,
.sa-touchpoint-grid,
.sa-experience-grid,
.impact-overview-grid,
.impact-case-stats,
.impact-mini-grid{
  display:grid;
  gap:16px;
}
.sa-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:30px;}
.sa-break-grid{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:16px;}
.sa-layer-grid{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px;}
.sa-touchpoint-grid{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px;}
.sa-experience-grid{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:22px;}
.impact-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:14px;}
.impact-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px;}
.sa-quick-card,
.sa-break-card,
.sa-layer-card,
.sa-touch-card,
.sa-experience-card,
.impact-overview-card,
.impact-story-card,
.impact-mini-card,
.sa-check-panel,
.sa-quote-panel,
.sa-proof-card{
  min-width:0;
  border-radius:22px;
  border:1px solid var(--lr-line);
  background:rgba(255,255,255,.68);
  padding:20px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.03);
}
.story-section--dark .sa-touch-card,
.story-section--dark .sa-proof-card,
.story-section--red .impact-story-card,
.story-section--dark .impact-overview-card,
.story-section--dark .impact-mini-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.sa-quick-card span,
.sa-layer-card span,
.impact-overview-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(213,31,50,.1);
  border:1px solid rgba(213,31,50,.28);
  color:#d51f32;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  margin-bottom:14px;
}
.sa-quick-card h3,
.sa-break-card h3,
.sa-layer-card h3,
.sa-touch-card h3,
.sa-experience-card h3,
.impact-overview-card h3,
.impact-story-card h3,
.impact-mini-card h3,
.sa-check-panel h3,
.sa-proof-card h3{
  margin:0 0 8px;
  font-size:clamp(19px,1.65vw,28px);
  line-height:1.1;
}
.sa-break-card p,
.sa-quick-card p,
.sa-layer-card p,
.sa-touch-card p,
.sa-experience-card p,
.impact-overview-card p,
.impact-story-card p,
.impact-mini-card p,
.sa-check-panel p,
.sa-proof-card p,
.sa-quote-panel p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--lr-text);
}
.sa-break-card b,
.impact-story-card b,
.impact-mini-card b,
.sa-proof-card b{
  display:block;
  margin-bottom:8px;
  font-size:10px;
  letter-spacing:.12em;
  color:#d51f32;
}
.sa-touchpoint-ribbon{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
}
.sa-touchpoint-ribbon span,
.sa-chip-list span,
.impact-case-tags span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--lr-line);
  background:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.story-section--dark .sa-touchpoint-ribbon span,
.story-section--red .impact-case-tags span,
.story-section--dark .sa-chip-list span{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.12);
}
.sa-check-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  margin-top:22px;
}
.sa-check-list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.sa-check-list li{
  position:relative;
  padding:0 0 0 18px;
  font-size:14px;
  line-height:1.6;
  color:var(--lr-text);
}
.sa-check-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#d51f32;
}
.sa-quote-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(145deg,rgba(213,31,50,.07),rgba(255,255,255,.64));
}
.sa-quote-panel blockquote{
  margin:0;
  font-size:clamp(24px,2.2vw,36px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.sa-quote-panel small{margin-top:18px; font-size:11px; letter-spacing:.1em; color:var(--lr-muted);}
.sa-proof-card{
  background:linear-gradient(145deg,rgba(213,31,50,.08),rgba(255,255,255,.62));
}
.sa-proof-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:18px;}
.sa-chip-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}

.impact-overview-card h3{font-size:18px;}
.impact-story-split{display:grid; grid-template-columns:1fr; gap:18px;}
.impact-case-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.impact-case-stats{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px;}
.impact-story-card{padding:18px 18px 20px;}
.impact-story-card p strong{font-weight:700;color:#080808;}
.impact-story-card .impact-accent{margin-top:8px; color:#d51f32; font-weight:700;}
.impact-note-compact{
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(213,31,50,.18);
  background:rgba(213,31,50,.04);
  font-size:14px;
  line-height:1.6;
  color:#080808;
}
.story-section--red .impact-note-compact,
.story-section--dark .impact-note-compact{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}
.impact-compact-copy{max-width:820px;}
.impact-compact-copy p{font-size:14px; line-height:1.7; color:var(--lr-text);}
.impact-client-panel{
  border-radius:24px;
  border:1px solid var(--lr-line);
  background:rgba(255,255,255,.68);
  padding:24px;
  margin-top:18px;
}
.impact-client-panel .client-tags{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.impact-client-panel .client-tags span{
  display:inline-flex; align-items:center; justify-content:center; min-height:38px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--lr-line);
  background:#fff; font-size:12px; line-height:1.3; font-weight:600;
}
@media (max-width:1100px){
  .sa-quick-grid,.impact-overview-grid,.sa-layer-grid,.sa-experience-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sa-touchpoint-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .sa-break-grid,.sa-layer-grid,.sa-quick-grid,.sa-touchpoint-grid,.sa-experience-grid,.impact-overview-grid,.impact-case-stats,.impact-mini-grid,.sa-proof-grid,.sa-check-grid{grid-template-columns:1fr;}
  .sa-check-list{grid-template-columns:1fr;}
  .sa-quote-panel blockquote{font-size:28px;}
}


/* Additional infographic-inspired layouts */
.sa-stagger-flow{
  position:relative;
  display:grid;
  gap:18px;
  margin-top:18px;
  padding:10px 0;
}
.sa-stagger-flow::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(213,31,50,.08), rgba(213,31,50,.45), rgba(213,31,50,.08));
}
.sa-stagger-card{
  position:relative;
  width:min(78%,760px);
  padding:22px 26px;
  border-radius:22px;
  border:1px solid rgba(8,8,8,.10);
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,246,241,.72));
  box-shadow:0 14px 40px rgba(0,0,0,.05);
}
.sa-stagger-card:nth-child(odd){justify-self:start;}
.sa-stagger-card:nth-child(even){justify-self:end;}
.sa-stagger-card::before{
  content:"";
  position:absolute;
  top:50%;
  width:36px;
  height:2px;
  background:rgba(213,31,50,.38);
}
.sa-stagger-card:nth-child(odd)::before{right:-36px;}
.sa-stagger-card:nth-child(even)::before{left:-36px;}
.sa-stagger-card::after{
  content:attr(data-no);
  position:absolute;
  top:50%;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:2px solid #d51f32;
  color:#080808;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  transform:translateY(-50%);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.sa-stagger-card:nth-child(odd)::after{right:-72px;}
.sa-stagger-card:nth-child(even)::after{left:-72px;}
.sa-stagger-card b,
.impact-ribbon-card b,
.impact-band b{
  display:block;
  margin-bottom:8px;
  color:#d51f32;
  letter-spacing:.12em;
  font-size:10px;
}
.sa-stagger-card h3,
.impact-ribbon-card h3,
.impact-band h3{margin:0 0 8px; font-size:clamp(20px,1.8vw,30px); line-height:1.08;}
.sa-stagger-card p,
.impact-ribbon-card p,
.impact-band p{margin:0; font-size:14px; line-height:1.7; color:rgba(8,8,8,.72);}

.sa-tree-visual{
  position:relative;
  margin-top:24px;
  padding:22px 0 0;
}
.sa-tree-trunk{
  position:absolute;
  left:50%;
  top:0;
  bottom:46px;
  width:10px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #d51f32 0%, #b4142a 55%, #7e0b1e 100%);
  border-radius:999px;
  opacity:.9;
}
.sa-tree-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 90px;
  padding-top:8px;
}
.sa-tree-card{
  position:relative;
  border-radius:999px;
  border:1px solid rgba(8,8,8,.10);
  background:#fff;
  padding:22px 24px 22px 26px;
  box-shadow:0 14px 34px rgba(0,0,0,.05);
}
.sa-tree-card:nth-child(odd)::before,
.sa-tree-card:nth-child(even)::before{
  content:"";
  position:absolute;
  top:50%;
  width:52px;
  height:2px;
  background:rgba(76,153,31,.45);
}
.sa-tree-card:nth-child(odd)::before{right:-52px;}
.sa-tree-card:nth-child(even)::before{left:-52px;}
.sa-tree-card h3{margin:0 0 6px; font-size:clamp(18px,1.55vw,26px);}
.sa-tree-card p{margin:0; font-size:14px; line-height:1.65; color:rgba(8,8,8,.72);}

.impact-ribbon-track{position:relative; display:grid; gap:18px; margin-top:18px;}
.impact-ribbon-card{
  position:relative;
  min-height:104px;
  padding:20px 28px 20px 104px;
  border-radius:24px;
  border:1px solid rgba(8,8,8,.10);
  background:linear-gradient(90deg, rgba(213,31,50,.95) 0 22%, rgba(255,255,255,.92) 22% 100%);
  box-shadow:0 12px 34px rgba(0,0,0,.05);
}
.impact-ribbon-card::before{
  content:attr(data-no);
  position:absolute;
  left:24px; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:#080808; font-size:14px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.impact-ribbon-card:nth-child(even){margin-left:34px;}
.impact-ribbon-card:nth-child(odd){margin-right:34px;}
.impact-ribbon-card h3,.impact-ribbon-card p{color:#080808;}

.impact-case-bands{display:grid; gap:14px; margin-top:18px;}
.impact-band{
  position:relative;
  padding:18px 20px 18px 88px;
  border-radius:18px;
  border:1px solid rgba(8,8,8,.10);
  background:linear-gradient(90deg, rgba(26,26,26,.95) 0 16%, rgba(255,255,255,.92) 16% 100%);
  box-shadow:0 12px 28px rgba(0,0,0,.04);
}
.impact-band::before{
  content:attr(data-no);
  position:absolute;
  left:20px; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:#080808; font-weight:800; font-size:12px;
}
.impact-band p strong{color:#080808;}
.impact-band:nth-child(2){margin-left:32px;}
.impact-band:nth-child(3){margin-left:64px;}
.impact-band--red{background:linear-gradient(90deg, rgba(213,31,50,.96) 0 16%, rgba(255,255,255,.92) 16% 100%);} 
.impact-band--cream{background:linear-gradient(90deg, rgba(244,240,232,.95) 0 16%, rgba(255,255,255,.98) 16% 100%);} 

@media(max-width:820px){
  .sa-stagger-flow::before{left:22px; transform:none;}
  .sa-stagger-card, .sa-stagger-card:nth-child(even), .sa-stagger-card:nth-child(odd){width:calc(100% - 66px); justify-self:end;}
  .sa-stagger-card::before{left:-30px!important; right:auto!important; width:30px;}
  .sa-stagger-card::after{left:-66px!important; right:auto!important; width:44px; height:44px; font-size:10px;}
  .sa-tree-trunk{left:18px; transform:none; width:8px; bottom:18px;}
  .sa-tree-grid{grid-template-columns:1fr; gap:14px; padding-left:44px;}
  .sa-tree-card::before{left:-44px!important; right:auto!important; width:44px!important;}
  .impact-ribbon-card, .impact-ribbon-card:nth-child(even), .impact-ribbon-card:nth-child(odd){margin:0; padding-left:88px; background:linear-gradient(90deg, rgba(213,31,50,.95) 0 18%, rgba(255,255,255,.94) 18% 100%);} 
  .impact-band, .impact-band:nth-child(2), .impact-band:nth-child(3){margin-left:0; padding-left:78px; background:linear-gradient(90deg, rgba(26,26,26,.95) 0 18%, rgba(255,255,255,.94) 18% 100%);} 
}
