/* ===================================================================
   Coaching page — additions on top of gorillo-2026.css.
   The macro-calculator keeps its own original inline <style>; the rules
   here only give it a frame and make it behave on small screens.
   =================================================================== */

/* ---------- hero ---------- */
.g-coach-hero{ padding-block:clamp(72px,10vw,140px); }
.g-coach-hero .g-h1 em{ font-style:normal; color:var(--g-gold); }
.g-coach-hero__lead{ margin-top:22px; max-width:60ch; }
.g-coach-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
@media (max-width:600px){
  .g-coach-hero__cta .g-btn{ flex:1 1 100%; }
}

/* ---------- clickable service strip ---------- */
.g-strip__in--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .g-strip__in--3{ grid-template-columns:1fr; } }
a.g-strip__item{ transition:background .2s ease, color .2s ease; }
a.g-strip__item:hover{ background:var(--g-surface-2); }
a.g-strip__item:hover strong{ color:var(--g-gold); }

/* ---------- service section head ---------- */
.g-svc__head{ display:flex; gap:clamp(18px,3vw,32px); align-items:flex-start; }
.g-svc__icon{
  width:72px; height:72px; flex:none; border-radius:12px;
  background:var(--g-surface); border:1px solid var(--g-line-2);
  padding:12px; object-fit:contain;
}
@media (max-width:640px){
  .g-svc__head{ flex-direction:column; gap:18px; }
  .g-svc__icon{ width:60px; height:60px; }
}

/* ---------- macro calculator mount ----------
   #macro-app carries its own width/padding/border from the original embed.
   Centre it and stop its 55px inner padding from overflowing on phones. */
.g-macro-mount{ display:flex; justify-content:center; }
.g-macro-mount #macro-app{ margin:0; }
@media (max-width:560px){
  .g-macro-mount #macro-app{ padding:28px 20px; }
}