/* ================= hero ================= */
#sgss-hero{
  --navy:#16294a; --navy-2:#1c3153; --navy-deep:#0c1830;
  --teal:#17a2ac; --teal-light:#2dc6cb; --teal-deep:#0f7c84; --mint:#00bfad;
  --ink:#182338; --grey:#616d80; --grey-soft:#8892a1; --line:#e1e7f0; --paper:#f5f8fb;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-sizing:border-box;
  background:var(--paper); padding:64px 0;
}
#sgss-hero *,#sgss-hero *::before,#sgss-hero *::after{box-sizing:inherit;}
#sgss-hero h1{font-family:'Anek Latin','Inter',sans-serif; font-weight:700; margin:0; color:var(--ink); letter-spacing:-.01em; font-size:clamp(28px,3.4vw,42px); line-height:1.12; max-width:16ch;}
#sgss-hero p{margin:0;}
#sgss-hero img{max-width:100%; display:block;}
#sgss-hero a{text-decoration:none; color:inherit;}
#sgss-hero .sgss-wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

#sgss-hero .sgss-crumb{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px;
}
#sgss-hero .sgss-crumb a{color:var(--teal-deep);}
#sgss-hero .sgss-crumb span{color:var(--grey-soft); font-weight:600;}
#sgss-hero .sgss-crumb b{color:var(--ink);}

#sgss-hero .sgss-hero-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center;}
#sgss-hero .sgss-hero-grid.no-media{grid-template-columns:1fr;}

#sgss-hero .sgss-referent{display:flex; align-items:center; gap:12px; margin-top:24px;}
#sgss-hero .sgss-referent-avatar{width:42px; height:42px; border-radius:50%; flex:none; object-fit:cover;}
#sgss-hero .sgss-referent-initials{
  background:linear-gradient(135deg, var(--teal) 0%, var(--mint) 100%);
  display:flex; align-items:center; justify-content:center; color:#06262a; font-weight:800; font-size:15px;
}
#sgss-hero .sgss-referent b{display:block; font-size:14.5px; color:var(--ink);}
#sgss-hero .sgss-referent span{font-size:12.5px; color:var(--grey);}

#sgss-hero .sgss-hero-photo{
  aspect-ratio:16/10.5; border-radius:18px; overflow:hidden; position:relative;
  background:linear-gradient(200deg, var(--navy-2), var(--navy-deep));
  box-shadow:0 24px 48px -28px rgba(12,24,48,.4);
}
#sgss-hero .sgss-hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

@media (max-width:900px){
  #sgss-hero .sgss-hero-grid{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:600px){
  #sgss-hero .sgss-wrap{padding:0 18px;}
}

/* ================= facts + pullquote + prose ================= */
#sgss-body{
  --teal:#17a2ac; --teal-light:#2dc6cb; --teal-deep:#0f7c84; --mint:#00bfad;
  --ink:#182338; --grey:#616d80; --grey-soft:#8892a1; --line:#e1e7f0; --card:#ffffff; --paper:#f5f8fb;
  --tealtint:color-mix(in srgb, var(--teal) 10%, transparent);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-sizing:border-box;
  line-height:normal;
}
#sgss-body *,#sgss-body *::before,#sgss-body *::after{box-sizing:inherit;}
#sgss-body h2,#sgss-body h3{font-family:'Anek Latin','Inter',sans-serif; font-weight:600; color:var(--ink);}
#sgss-body p{color:var(--grey); line-height:1.7; margin:0;}
#sgss-body a{text-decoration:none;}
#sgss-body img{max-width:100%; display:block;}
#sgss-body .sgss-wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
#sgss-body .sgss-layout{display:grid; grid-template-columns:252px 1fr; gap:56px; align-items:start; padding:56px 0 64px;}

#sgss-body .sgss-facts{
  position:sticky; top:calc(var(--sgss-rail-top, 0px) + 28px); align-self:start;
  display:flex; flex-direction:column; gap:26px;
}
#sgss-body .sgss-facts-name{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:'Anek Latin','Inter',sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:.02em; color:var(--ink); padding-bottom:14px; border-bottom:2px solid var(--ink);
}
#sgss-body .sgss-facts-name-lockup{display:flex; align-items:center; gap:10px;}
#sgss-body .sgss-facts-logo{width:96px; height:96px; object-fit:contain; flex:none;}
#sgss-body .sgss-facts-name svg{width:14px; height:14px; stroke:var(--grey-soft); fill:none; stroke-width:2; flex:none; transition:stroke .15s ease;}
#sgss-body .sgss-facts-name a:hover svg{stroke:var(--teal-deep);}
#sgss-body .sgss-facts-about{font-size:13.5px; line-height:1.6; color:var(--grey);}

#sgss-body .sgss-facts-block{display:flex; flex-direction:column; gap:8px;}
#sgss-body .sgss-facts-label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-soft);}
#sgss-body .sgss-facts-block p{font-size:13.5px; color:var(--grey);}
#sgss-body .sgss-facts-tag{
  display:inline-flex; align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--teal-deep);
  background:var(--tealtint); padding:5px 12px; border-radius:99px; margin:2px 6px 2px 0;
}
#sgss-body .sgss-facts-block ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
#sgss-body .sgss-facts-block li{display:flex; align-items:center; gap:8px; font-size:13.5px; line-height:1.5; color:var(--ink); font-weight:600;}
#sgss-body .sgss-facts-block li svg{width:14px; height:14px; stroke:var(--teal); fill:none; stroke-width:2; flex:none;}

#sgss-body .sgss-main{min-width:0; display:flex; flex-direction:column; gap:44px;}

#sgss-body .sgss-pullquote{
  background:var(--tealtint); border-left:3px solid var(--teal); border-radius:4px 14px 14px 4px;
  padding:26px 30px; display:flex; flex-direction:column; gap:16px;
}
#sgss-body .sgss-pullquote-mark{font-family:Georgia,serif; font-size:40px; line-height:.5; color:var(--teal); font-weight:700;}
#sgss-body .sgss-pullquote blockquote{margin:0; font-size:15px; line-height:1.7; color:var(--ink); font-weight:600;}
#sgss-body .sgss-pullquote-lede{font-size:15px; color:var(--teal-deep); font-weight:600; line-height:1.7;}

/* Every real success_story post opens its narrative with an <h4> lede line
   (confirmed across all 15 posts) before the first real <h2> section - style
   it explicitly instead of leaving it to fall back to the browser's default
   h4, which read as an inconsistent, unstyled jump in the text. Rules below
   target direct children only (">"), not all descendants: one post (IB
   Langenthal) embeds a hand-authored wp:html block that brings its own
   scoped <style> several levels deep - a blanket descendant selector would
   stomp that block's own typography. */
#sgss-body .sgss-prose{min-width:0; display:flex; flex-direction:column; gap:16px;}
#sgss-body .sgss-prose > *:first-child{margin-top:0;}
#sgss-body .sgss-prose > h2{font-size:22px; line-height:1.3; margin:14px 0 0; font-weight:600;}
#sgss-body .sgss-prose > h3{font-size:18px; line-height:1.3; margin:10px 0 0; font-weight:600;}
#sgss-body .sgss-prose > h4,#sgss-body .sgss-prose > h5,#sgss-body .sgss-prose > h6{
  font-family:'Inter','system-ui',sans-serif; font-size:15px; line-height:1.7; margin:0; color:var(--ink); font-weight:600;
}
#sgss-body .sgss-prose > p{font-size:15px; line-height:1.7; margin:0; font-weight:400;}
#sgss-body .sgss-prose > ul,#sgss-body .sgss-prose > ol{margin:0; padding-left:22px; color:var(--grey); line-height:1.7; font-size:15px;}
#sgss-body .sgss-prose li{margin-bottom:8px;}
#sgss-body .sgss-prose > p strong,#sgss-body .sgss-prose > p b,
#sgss-body .sgss-prose > ul strong,#sgss-body .sgss-prose > ul b{color:var(--ink); font-weight:600;}
#sgss-body .sgss-prose em{color:var(--ink);}
#sgss-body .sgss-prose > p a,#sgss-body .sgss-prose > ul a,#sgss-body .sgss-prose > ol a{color:var(--teal-deep); text-decoration:underline;}
#sgss-body .sgss-prose > figure{margin:0;}
#sgss-body .sgss-prose > figure figcaption{font-size:13px; color:var(--grey-soft); margin-top:8px; text-align:center;}
#sgss-body .sgss-prose > .wp-block-table table,#sgss-body .sgss-prose > table{width:100%; border-collapse:collapse; font-size:14.5px;}
#sgss-body .sgss-prose > .wp-block-table th,#sgss-body .sgss-prose > .wp-block-table td,
#sgss-body .sgss-prose > table th,#sgss-body .sgss-prose > table td{padding:12px 16px; border:1px solid var(--line); text-align:left; vertical-align:top;}
#sgss-body .sgss-prose > .wp-block-table th,#sgss-body .sgss-prose > table th{background:var(--paper); color:var(--ink); font-weight:700;}
#sgss-body .sgss-prose > .wp-block-table td,#sgss-body .sgss-prose > table td{color:var(--grey);}
#sgss-body .sgss-prose > hr{border:none; border-top:1px solid var(--line); margin:8px 0;}

@media (max-width:900px){
  #sgss-body .sgss-layout{grid-template-columns:1fr; gap:40px;}
  #sgss-body .sgss-facts{position:static;}
}
@media (max-width:600px){
  #sgss-body .sgss-wrap{padding:0 18px;}
}

/* ================= similar stories ================= */
#sgss-similar{
  --teal:#17a2ac; --teal-deep:#0f7c84; --navy-2:#1c3153; --navy-deep:#0c1830;
  --ink:#182338; --grey:#616d80; --line:#e1e7f0; --card:#ffffff; --paper:#f5f8fb;
  --tealtint:color-mix(in srgb, var(--teal) 10%, transparent);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  box-sizing:border-box;
  line-height:normal;
  background:var(--card); padding:64px 0;
}
#sgss-similar *,#sgss-similar *::before,#sgss-similar *::after{box-sizing:inherit;}
#sgss-similar .sgss-wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
#sgss-similar h2{font-family:'Anek Latin','Inter',sans-serif; font-weight:600; color:var(--ink); font-size:26px; text-align:center; margin:0 0 34px;}
#sgss-similar p{margin:0; color:var(--grey); line-height:1.65;}
#sgss-similar a{text-decoration:none; color:inherit;}
#sgss-similar img{max-width:100%; display:block;}

#sgss-similar .sgss-sim-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
#sgss-similar .sgss-sim-card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
#sgss-similar .sgss-sim-card:hover{transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(20,37,63,.28);}
#sgss-similar .sgss-sim-img{aspect-ratio:16/10; overflow:hidden; background:linear-gradient(145deg, var(--navy-2), var(--navy-deep)); position:relative;}
#sgss-similar .sgss-sim-img > img{width:100%; height:100%; object-fit:cover;}
#sgss-similar .sgss-sim-logo{
  position:absolute; left:14px; bottom:-18px; width:132px; height:64px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); box-shadow:0 10px 22px -8px rgba(20,37,63,.28);
  display:flex; align-items:center; justify-content:center; padding:8px 12px;
}
#sgss-similar .sgss-sim-logo img{width:100%; height:100%; object-fit:contain;}
#sgss-similar .sgss-sim-body{padding:32px 18px 20px; display:flex; flex-direction:column; gap:12px; flex:1;}
#sgss-similar .sgss-sim-tags{display:flex; flex-wrap:wrap; gap:6px;}
#sgss-similar .sgss-sim-tags span{align-self:flex-start; font-size:11px; font-weight:600; color:var(--teal-deep); background:var(--tealtint); padding:4px 10px; border-radius:99px;}
#sgss-similar .sgss-sim-card h3{font-family:'Anek Latin','Inter',sans-serif; font-weight:700; font-size:15.5px; line-height:1.35; color:var(--ink);}
#sgss-similar .sgss-sim-card p{font-size:13.5px; line-height:1.6; flex:1;}
#sgss-similar .sgss-sim-referent{display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--grey);}
#sgss-similar .sgss-sim-referent img{width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none;}
#sgss-similar .sgss-sim-ref-fallback{width:32px; height:32px; border-radius:50%; background:var(--line); flex:none; display:inline-block;}
#sgss-similar .sgss-sim-referent b{color:var(--ink); font-weight:600;}
#sgss-similar .sgss-sim-link{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--teal-deep);}
#sgss-similar .sgss-sim-link span{transition:transform .18s ease;}
#sgss-similar .sgss-sim-link:hover span{transform:translateX(3px);}

@media (max-width:800px){
  #sgss-similar .sgss-sim-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  #sgss-similar .sgss-wrap{padding:0 18px;}
}

/* ================= shared reveal-on-scroll (matches .sgr-reveal elsewhere) ================= */
#sgss-hero .sgss-reveal,#sgss-body .sgss-reveal,#sgss-similar .sgss-reveal,#sgref-cta .sgss-reveal{
  opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
#sgss-hero .sgss-reveal.in,#sgss-body .sgss-reveal.in,#sgss-similar .sgss-reveal.in,#sgref-cta .sgss-reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  #sgss-hero .sgss-reveal,#sgss-body .sgss-reveal,#sgss-similar .sgss-reveal,#sgref-cta .sgss-reveal{opacity:1; transform:none; transition:none;}
}