/* ============================================================
   PASSION — "HR and training managers" page
   A clear, confident training prospectus for a budget-holding
   professional buyer. Own structure; leans on styles.css for
   tokens, nav, buttons, blobs, reveal, golden-circle motif,
   dividers, footer. Re-uses .elsewhere-sec / .linkcards.
   ============================================================ */

/* ---------- 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;}
.txtlink-light{
  display:inline-flex;align-items:center;gap:.5em;font-weight:600;
  color:#fff;position:relative;font-size:1.05rem;
}
.txtlink-light svg{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.txtlink-light::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.txtlink-light:hover::after{transform:scaleX(1);}
.txtlink-light:hover svg{transform:translateX(5px);}

/* ============================================================
   HERO (ivory, prospectus confidence)
   ============================================================ */
.h-hero{padding:196px 0 116px;position:relative;overflow:hidden;}
.h-hero .hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.04fr .96fr;gap:72px;align-items:center;
}
.h-hero h1{font-size:clamp(2.9rem,5.7vw,4.9rem);font-weight:520;line-height:1.06;color:var(--ink);}
.h-hero h1 .pink{color:var(--pink);display:inline-block;position:relative;margin:0 .05em;}
.h-hero .hero-sub{font-size:1.26rem;color:var(--ink-soft);margin:34px 0 42px;max-width:31em;line-height:1.64;}
.h-hero .hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.h-hero-media{position:relative;}
.h-hero-media .gc-hero{top:-10%;right:-14%;width:120%;z-index:1;}
.h-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;
}
.h-hero-frame{position:relative;z-index:2;aspect-ratio:5/5.3;}

/* ============================================================
   WHAT WE COVER (slate, curriculum cards)
   ============================================================ */
.h-cover{padding:134px 0;}
.h-cover .sec-head{text-align:center;max-width:680px;margin:0 auto;position:relative;z-index:2;}
.h-cover .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.h-cover .sec-head p{color:rgba(255,255,255,.82);font-size:1.16rem;margin-top:16px;}
.h-cover .gc-c{top:-12%;left:-8%;width:42%;z-index:0;}
.h-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px;position:relative;z-index:2;}
.h-topic{
  background:#fff;border-radius:var(--r-md);padding:32px 30px 34px;
  box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:10px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
}
.h-topic:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.h-topic-tag{
  display:inline-flex;align-items:center;background:var(--pink-soft);color:var(--pink);
  font-weight:600;font-size:.88rem;padding:.42em 1em;border-radius:999px;width:fit-content;
}
.h-topic h3{font-size:1.22rem;font-weight:580;color:var(--ink);}
.h-topic p{color:var(--ink-soft);font-size:1rem;line-height:1.55;}
.h-cover-note{text-align:center;margin-top:40px;color:rgba(255,255,255,.78);font-size:1.08rem;position:relative;z-index:2;}
.h-cover-note strong{color:#fff;font-weight:600;}
@media(max-width:860px){.h-topic-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.h-topic-grid{grid-template-columns:1fr;}}

/* ============================================================
   NEVER BORING (ivory, vivid editorial)
   ============================================================ */
.h-never{padding:138px 0;}
.h-never .sec-head{text-align:center;max-width:720px;margin:0 auto;}
.h-never .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;}
.h-never .sec-head p{color:var(--ink-soft);font-size:1.18rem;margin-top:18px;line-height:1.64;}
.h-never-pts{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:60px;}
.h-npt{
  background:#fff;border-radius:var(--r-lg);padding:38px 36px 40px;
  box-shadow:var(--shadow-soft);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
}
.h-npt:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.h-npt h3{
  font-family:var(--font-head);font-size:1.5rem;font-weight:560;
  color:var(--ink);margin-bottom:12px;line-height:1.2;
}
.h-npt h3 span{color:var(--pink);}
.h-npt p{color:var(--ink-soft);font-size:1.06rem;line-height:1.58;}
@media(max-width:700px){.h-never-pts{grid-template-columns:1fr;}}

/* ============================================================
   HOW WE DELIVER (slate, curved three-stage process)
   ============================================================ */
.h-deliver{padding:138px 0 144px;}
.h-deliver .sec-head{text-align:center;max-width:640px;margin:0 auto 18px;position:relative;z-index:2;}
.h-deliver .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.h-deliver .sec-head p{color:rgba(255,255,255,.82);font-size:1.16rem;margin-top:16px;}
.h-journey{position:relative;margin-top:72px;}
.h-journey-line{
  position:absolute;top:46px;left:0;width:100%;height:160px;
  z-index:0;pointer-events:none;overflow:visible;
}
.h-journey-line path{
  fill:none;stroke:rgba(255,255,255,.34);stroke-width:2.4;
  stroke-linecap:round;stroke-dasharray:3 13;
}
.h-steps{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:38px;
}
.h-step{display:flex;flex-direction:column;align-items:center;text-align:center;}
.h-step:nth-child(2){margin-top:84px;}
.h-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;
}
.h-step-node svg{width:38px;height:38px;stroke:var(--pink);fill:none;stroke-width:1.7;}
.h-step h3{font-size:1.42rem;font-weight:560;color:#fff;}
.h-step p{color:rgba(255,255,255,.82);font-size:1.06rem;margin-top:12px;max-width:20em;line-height:1.58;}
@media(max-width:820px){
  .h-steps{grid-template-columns:1fr;gap:48px;max-width:420px;margin:0 auto;}
  .h-step:nth-child(2){margin-top:0;}
  .h-journey-line{display:none;}
}

/* ============================================================
   WHAT PEOPLE SAY (ivory, feedback-forward testimonials)
   ============================================================ */
.h-proof{padding:138px 0;}
.h-proof .sec-head{text-align:center;max-width:640px;margin:0 auto;}
.h-proof .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;}
.h-proof .sec-head p{color:var(--ink-soft);font-size:1.16rem;margin-top:16px;}
.h-quotes{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.h-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px;}
.h-stat{
  background:#fff;border-radius:var(--r-md);padding:28px 24px;text-align:center;
  box-shadow:var(--shadow-soft);
}
.h-stat .num{font-family:var(--font-head);font-size:2.6rem;color:var(--pink);line-height:1;}
.h-stat p{color:var(--ink-soft);font-size:.98rem;margin-top:8px;}
@media(max-width:840px){
  .h-quotes{grid-template-columns:1fr;}
  .h-stat-row{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   RELIABLE, FLEXIBLE, EXPERIENCED (slate, credentials)
   ============================================================ */
.h-creds{padding:134px 0;}
.h-creds .sec-head{text-align:center;max-width:680px;margin:0 auto;position:relative;z-index:2;}
.h-creds .sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500;color:#fff;}
.h-creds .sec-head p{color:rgba(255,255,255,.82);font-size:1.16rem;margin-top:16px;}
.h-cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px;max-width:880px;margin-left:auto;margin-right:auto;position:relative;z-index:2;}
.h-cred{
  display:flex;gap:20px;align-items:flex-start;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:28px 26px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .4s;
}
.h-cred:hover{transform:translateY(-4px);background:rgba(255,255,255,.13);}
.h-cred-ic{flex:none;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.42);display:grid;place-items:center;}
.h-cred-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;}
.h-cred h3{font-size:1.12rem;font-weight:600;color:#fff;margin-bottom:6px;}
.h-cred p{color:rgba(255,255,255,.78);font-size:1.02rem;line-height:1.55;}
@media(max-width:660px){.h-cred-grid{grid-template-columns:1fr;}}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .h-hero{padding:150px 0 70px;}
  .h-hero .hero-grid{grid-template-columns:1fr;gap:50px;}
  .h-hero-media{max-width:440px;margin:0 auto;}
}