/* ============================================================
   PASSION — "Stuck and fed up" page
   A quiet, warm, coaching-led layout with its own structure.
   Leans on styles.css for tokens, nav, buttons, blobs, reveal,
   golden-circle motif, dividers and footer. Everything below is
   specific to this page.
   ============================================================ */

/* ---------- shared helpers ---------- */
.slate{background:var(--slate);color:#fff;position:relative;overflow:hidden;}
.gc-white circle{stroke:#fff;opacity:.16;}

.soft-frame{
  position:relative;border-radius:var(--arch);overflow:hidden;
  box-shadow:var(--shadow-soft);background:var(--stone);
}
.soft-frame img{width:100%;height:100%;object-fit:cover;display:block;}

.pinkword{color:var(--pink);}

/* generous, unhurried rhythm */
.s-sec{padding:128px 0;position:relative;}
.s-sec-lg{padding:148px 0;}

/* ============================================================
   HERO (ivory, generous whitespace)
   ============================================================ */
.s-hero{padding:196px 0 116px;position:relative;overflow:hidden;}
.s-hero .hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.04fr .96fr;gap:72px;align-items:center;
}
.s-hero h1{
  font-size:clamp(3rem,6.2vw,5.4rem);font-weight:520;line-height:1.02;
  color:var(--ink);
}
.s-hero h1 .pink{color:var(--pink);display:inline-block;position:relative;margin:0 .14em;}
.s-hero .hero-sub{
  font-size:1.26rem;color:var(--ink-soft);margin:34px 0 42px;max-width:30em;
  line-height:1.62;
}
.s-hero .hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}

.s-hero-media{position:relative;}
.s-hero-media .gc-hero{top:-10%;right:-14%;width:120%;z-index:1;}
.s-hero-media .blob-hero{
  width:74%;aspect-ratio:1;left:-12%;bottom:-14%;
  border-radius:46% 54% 62% 38% / 52% 44% 56% 48%;z-index:0;
}
.s-hero-frame{position:relative;z-index:2;aspect-ratio:5/5.4;}

/* ============================================================
   WE SEE THIS A LOT (ivory) — one large empathy passage
   ============================================================ */
.s-see{padding:40px 0 132px;text-align:center;}
.s-see .wrap{max-width:880px;}
.s-see-text{
  font-family:var(--font-head);font-weight:480;
  font-size:clamp(1.85rem,3.5vw,2.95rem);line-height:1.28;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance;
}
.s-see-text span{color:var(--pink);}

/* ============================================================
   WHEN DID YOU LAST STOP TO THINK (slate) — reflective block
   ============================================================ */
.s-pause{padding:132px 0;}
.s-pause .wrap{
  display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center;
}
.s-pause-copy h2{
  font-size:clamp(2.2rem,4.4vw,3.5rem);font-weight:500;color:#fff;
  max-width:11em;
}
.s-pause-copy p{
  font-size:1.22rem;color:rgba(255,255,255,.84);margin-top:26px;
  max-width:28em;line-height:1.62;
}
.s-pause-frame{aspect-ratio:5/4.6;}
.s-pause .gc-pause{bottom:-30%;left:-14%;width:48%;z-index:0;}

/* ============================================================
   THE LIGHTBULB MOMENT (ivory) — glowing concentric circles
   ============================================================ */
.s-bulb{padding:156px 0;text-align:center;overflow:hidden;}
.s-bulb-stage{position:relative;max-width:760px;margin:0 auto;padding:60px 0;}
.s-bulb-rings{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(640px,90vw);aspect-ratio:1;z-index:0;
}
.s-bulb-rings circle{fill:none;stroke:var(--pink);opacity:.20;}
.s-bulb-rings .ring-dash{stroke-dasharray:6 14;}
.s-bulb-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);
  width:46%;aspect-ratio:1;border-radius:50%;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(255,222,128,.9),rgba(255,206,96,0) 66%);
  filter:blur(4px);
}
.reveal.in .s-bulb-glow{animation:bulbBreathe 6s ease-in-out 0s infinite;}
@keyframes bulbBreathe{
  0%,100%{opacity:.34;transform:translate(-50%,-50%) scale(.78);}
  50%{opacity:.62;transform:translate(-50%,-50%) scale(.92);}
}
.s-bulb-line{
  position:relative;z-index:2;font-family:var(--font-head);font-weight:480;
  font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.24;letter-spacing:-.012em;
  color:var(--ink);max-width:15em;margin:0 auto;text-wrap:balance;
}
.s-bulb-line span{color:var(--pink);}

/* ============================================================
   HOW WE'D GET YOU THERE (slate) — flowing three-step path
   ============================================================ */
.s-path{padding:138px 0 144px;}
.s-path .sec-head{text-align:center;max-width:640px;margin:0 auto 18px;position:relative;z-index:2;}
.s-path .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.s-path .sec-head p{color:rgba(255,255,255,.82);font-size:1.16rem;margin-top:16px;}

.s-journey{position:relative;margin-top:72px;}
.s-journey-line{
  position:absolute;top:46px;left:0;width:100%;height:160px;z-index:0;
  pointer-events:none;overflow:visible;
}
.s-journey-line path{
  fill:none;stroke:rgba(255,255,255,.34);stroke-width:2.4;
  stroke-linecap:round;stroke-dasharray:3 13;
}
.s-steps{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:38px;
}
.s-step{display:flex;flex-direction:column;align-items:center;text-align:center;}
.s-step:nth-child(2){margin-top:84px;}
.s-step-node{
  width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--pink-soft);border:2px solid rgba(255,255,255,.5);
  box-shadow:0 14px 38px -18px rgba(31,22,32,.5);margin-bottom:26px;
}
.s-step-node svg{width:38px;height:38px;stroke:var(--pink);fill:none;stroke-width:1.7;}
.s-step h3{font-size:1.42rem;font-weight:560;color:#fff;}
.s-step p{color:rgba(255,255,255,.82);font-size:1.06rem;margin-top:12px;max-width:19em;line-height:1.58;}

/* ============================================================
   ONE STORY (ivory) — a single full testimonial
   ============================================================ */
.s-story{padding:140px 0;text-align:center;}
.s-story .wrap{max-width:900px;position:relative;}
.s-story-mark{
  font-family:var(--font-head);font-size:7rem;line-height:.5;color:var(--pink);
  display:block;height:.6em;opacity:.92;
}
.s-story blockquote{
  margin:0;font-family:var(--font-head);font-weight:440;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.34;letter-spacing:-.01em;
  color:var(--ink);text-wrap:balance;
}
.s-story figcaption{
  margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:3px;
}
.s-story figcaption b{font-weight:600;font-size:1.12rem;color:var(--ink);}
.s-story figcaption span{color:var(--ink-soft);font-size:1rem;}

/* ============================================================
   AND WHOEVER YOU ARE (slate, slim reassurance)
   ============================================================ */
.s-whoever{padding:96px 0;}
.s-whoever .wrap{
  max-width:1000px;display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
}
.s-whoever p{
  color:#fff;font-size:1.2rem;font-weight:500;line-height:1.5;max-width:32em;
}
.s-whoever p .soft{color:rgba(255,255,255,.78);font-weight:400;}

/* ============================================================
   CTA (plum, rings) — soft, not a hard sell
   ============================================================ */
.s-cta{padding:150px 0;background:var(--ink);text-align:center;overflow:hidden;position:relative;}
.s-cta .gc-cta{top:50%;left:50%;transform:translate(-50%,-50%);width:min(820px,96vw);z-index:0;}
.s-cta .gc-cta circle{stroke:var(--pink);opacity:.18;}
.s-cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;}
.s-cta h2{color:#fff;font-size:clamp(2.4rem,5vw,4rem);font-weight:500;}
.s-cta .s-cta-btn{margin:38px 0 22px;}
.s-cta-note{color:rgba(246,238,242,.74);font-size:1.12rem;}

/* ============================================================
   QUIET LINK (ivory) before footer
   ============================================================ */
.s-elsewhere{padding:92px 0 116px;text-align:center;background:var(--canvas);}
.s-elsewhere .txtlink{font-size:1.12rem;}

/* footer rounded top corners sit over the ivory strip — keep default .foot */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .s-hero{padding:150px 0 70px;}
  .s-hero .hero-grid{grid-template-columns:1fr;gap:50px;}
  .s-hero-media{max-width:440px;margin:0 auto;}
  .s-pause .wrap{grid-template-columns:1fr;gap:44px;}
  .s-pause-frame{max-width:460px;}
}
@media(max-width:820px){
  .s-steps{grid-template-columns:1fr;gap:48px;max-width:420px;margin:0 auto;}
  .s-step:nth-child(2){margin-top:0;}
  .s-journey-line{display:none;}
}
@media(max-width:680px){
  .s-whoever .wrap{flex-direction:column;align-items:flex-start;gap:24px;text-align:left;}
}