/* ============================================================
   SAPPHIRE — Success (how we help) + Success Stories
   ============================================================ */

/* ============ Ribbon medal (reusable) ============ */
.medal{position:relative;width:48px;height:48px;flex:none}
.medal .disc{width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--periwinkle), var(--sapphire) 75%);
  color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;
  font-size:1.1rem;box-shadow:0 6px 18px -6px rgba(42,57,209,.7), inset 0 0 0 3px rgba(255,255,255,.25);
  position:relative;z-index:2}
.medal::before,.medal::after{content:"";position:absolute;top:32px;width:13px;height:24px;
  background:var(--sapphire);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.medal::before{left:9px;transform:rotate(10deg);transform-origin:top center}
.medal::after{right:9px;transform:rotate(-10deg);transform-origin:top center}

/* ============ SUCCESS — how we make you successful ============ */
.success{position:relative;overflow:hidden;background:var(--paper)}
.success-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,86px);align-items:center}
.success h2{font-size:var(--t-h1)}
.success h2 .serif{color:var(--sapphire)}
.success-intro{color:var(--muted);font-size:var(--t-lead);line-height:1.5;margin:24px 0 4px;max-width:46ch}
.lift-list{display:grid;gap:0;margin-top:20px}
.lift{display:grid;grid-template-columns:auto 1fr;gap:24px;padding-block:24px;border-bottom:1px solid var(--line);align-items:start}
.lift:first-child{border-top:1px solid var(--line)}
.lift h3{font-size:1.32rem;letter-spacing:-.01em;margin-bottom:6px}
.lift p{color:var(--muted);font-size:1.02rem;line-height:1.5;max-width:44ch}

/* media: balloons + ribbon streamers + badge */
.success-media{position:relative;aspect-ratio:4/4.7;display:grid;place-items:center}
.success-media .streamers{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.success-media .streamers path{fill:none;stroke-width:6;stroke-linecap:round;opacity:.5}
.balloons{position:relative;z-index:2;width:82%;max-width:380px;mix-blend-mode:multiply;
  filter:drop-shadow(0 30px 44px rgba(16,24,92,.16));
  animation:balloonFloat 7s var(--ease) infinite alternate}
@keyframes balloonFloat{from{transform:translateY(-10px) rotate(-1.6deg)}to{transform:translateY(14px) rotate(1.6deg)}}
.success-badge{position:absolute;z-index:3;left:2%;bottom:6%;display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:16px;padding:16px 20px 16px 16px;
  box-shadow:0 24px 50px -20px rgba(16,24,92,.32), 0 0 0 1px var(--line-soft)}
.success-badge .sb-num{font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;line-height:1;color:var(--sapphire)}
.success-badge .sb-lbl{font-size:.82rem;color:var(--muted);line-height:1.3;max-width:14ch}

@media (prefers-reduced-motion:reduce){ .balloons{animation:none} }

/* ============ SUCCESS STORIES ============ */
.stories{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.stories .girih-light{position:absolute;inset:0;opacity:.07;z-index:0;
  -webkit-mask-image:radial-gradient(circle at 18% 12%, #000, transparent 60%);
  mask-image:radial-gradient(circle at 18% 12%, #000, transparent 60%)}
.stories>.wrap{position:relative;z-index:2}
.stories .sec-head h2{color:#fff}
.stories .sec-head .sec-head-aside{color:rgba(255,255,255,.6)}
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.story{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);padding:clamp(28px,2.6vw,38px);display:flex;flex-direction:column;
  overflow:hidden;transition:transform .5s var(--ease),background .4s var(--ease)}
.story:hover{transform:translateY(-6px);background:rgba(255,255,255,.07)}
.story.feat{background:var(--sapphire);border-color:transparent}
.story.feat:hover{background:var(--sapphire-600)}
.story .qm{font-family:var(--font-serif);font-style:italic;font-size:3.4rem;line-height:.5;height:.42em;color:var(--periwinkle-2)}
.story.feat .qm{color:rgba(255,255,255,.7)}
.story blockquote{font-family:var(--font-display);font-weight:600;font-size:1.18rem;line-height:1.36;
  letter-spacing:-.01em;margin:18px 0 24px}
.story .result{display:flex;align-items:baseline;gap:.5em;margin-bottom:auto}
.story .result .r-num{font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--periwinkle-2)}
.story.feat .result .r-num{color:#fff}
.story .result .r-lbl{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.25;max-width:16ch}
.story.feat .result .r-lbl{color:rgba(255,255,255,.85)}
.story-person{display:flex;align-items:center;gap:13px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13)}
.story.feat .story-person{border-color:rgba(255,255,255,.28)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-weight:700;font-size:1rem;background:var(--periwinkle);color:#fff}
.story.feat .avatar{background:#fff;color:var(--sapphire)}
.sp-name{font-weight:600;font-size:1rem}
.sp-co{font-size:.86rem;color:rgba(255,255,255,.55)}
.story.feat .sp-co{color:rgba(255,255,255,.82)}
/* corner ribbon on featured */
.ribbon-corner{position:absolute;top:20px;right:-42px;transform:rotate(45deg);
  background:#fff;color:var(--sapphire);font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 46px;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:4}
.stories-note{margin-top:30px;font-size:.92rem;color:rgba(255,255,255,.42);font-style:italic}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .success-grid{grid-template-columns:1fr;gap:46px}
  .success-media{order:-1;max-width:440px;margin-inline:auto;width:100%;aspect-ratio:4/3.4}
  .stories-grid{grid-template-columns:1fr 1fr}
  .story.feat{grid-column:1/-1}
}
@media (max-width:620px){
  .stories-grid{grid-template-columns:1fr}
  .story.feat{grid-column:auto}
}