/* Compact spacing: tighter vertical rhythm between sections on every page. Loaded last so it wins over page styles. */
main>.section,main>.proof-strip,main>.bio-grid,main>.bring-section,main>.scroll-story,main>.home-portfolio,
main>.reviews-section,main>.starting-points,main>.faq-section,main>.ct-how,main>.ct-topics,main>.pf-work,main>.pf-care,
main>.sv-services,main>.sv-process,main>.sv-faq,main>.exr-intro,main>.exr-journey,main>.exr-cycle,main>.exr-skills{padding-top:44px!important;padding-bottom:44px!important}
main>.tech-strip{padding-top:18px!important;padding-bottom:18px!important}
main>.proof-strip{padding-top:6px!important}
main>.sv-services{padding-top:28px!important}
main>.cta-future{padding-top:44px!important;padding-bottom:44px!important}
/* Space between a section heading and its content */
.section-heading,.portfolio-heading,.sv-head,.exr-head,.exr-skills-head,.journey-heading{margin-bottom:24px!important}
.exr-promises{margin-top:28px!important}
.exr-cycle-foot{margin-top:26px!important}
@media(max-width:760px){
  main>.section,main>.proof-strip,main>.bio-grid,main>.bring-section,main>.scroll-story,main>.home-portfolio,
  main>.reviews-section,main>.starting-points,main>.faq-section,main>.ct-how,main>.ct-topics,main>.pf-work,main>.pf-care,
  main>.sv-services,main>.sv-process,main>.sv-faq,main>.exr-intro,main>.exr-journey,main>.exr-cycle,main>.exr-skills,main>.cta-future{padding-top:32px!important;padding-bottom:32px!important}
  main>.tech-strip{padding-top:14px!important;padding-bottom:14px!important}
  .section-heading,.portfolio-heading,.sv-head,.exr-head,.exr-skills-head,.journey-heading{margin-bottom:18px!important}
}

/* ---------- Mobile polish ---------- */
@media(max-width:760px){
  /* Footer: keep the last line clear of the floating back-to-top and chat buttons */
  .site-footer .footer-base{padding-bottom:88px!important}

  /* Homepage story steps: number sits beside the text, not above it */
  .story-step{display:grid!important;grid-template-columns:28px 1fr 18px!important;align-items:start!important;gap:10px!important;text-align:left!important}
  .story-step .story-step-index{justify-self:start;margin:0!important;padding-top:3px}
  .story-step .story-step-copy{text-align:left!important}

  /* Services explorer: full-width buttons, no awkward wrapping */
  .svx-actions{flex-direction:column}
  .svx-actions a{width:100%;justify-content:center;white-space:nowrap}

  /* Services "How it works": tighter cards */
  .sv-process .sv-steps li{padding:22px 18px 20px!important}
  .sv-process .sv-steps .ico{width:52px!important;height:52px!important;border-radius:15px!important}
  .sv-process .sv-steps .ico svg{width:26px!important;height:26px!important}
  .sv-process .sv-steps li>span:not(.ico){margin-bottom:12px!important}
  .sv-process .sv-steps h3{margin:14px 0 6px!important;font-size:21px!important}

  /* Experience: centred quote mark, left-aligned story and promise text */
  .exr-quote:before{left:50%!important;transform:translateX(-50%);top:-24px!important;font-size:100px!important}
  .exr-intro-copy,.exr-intro-copy p{text-align:left!important}
  .exr-promises li{text-align:left!important;align-items:center!important}
  .exr-promises li *{text-align:left!important}

  /* Experience timeline: drop the outlined number that collides with the date pill */
  .exr-bignum{display:none}

  /* Experience client cycle: two columns so it isn't four tall cards */
  .exr-cycle-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .exr-cycle-grid li{padding:20px 12px 18px!important;border-radius:18px!important}
  .exr-cycle-grid .exr-ico{width:46px!important;height:46px!important;border-radius:14px!important}
  .exr-cycle-grid .exr-ico svg{width:22px!important;height:22px!important}
  .exr-cycle-grid h3{margin:14px 0 6px!important;font-size:19px!important}
  .exr-cycle-grid p{font-size:12.5px!important;line-height:1.5!important}
  .exr-cycle-num{margin-bottom:10px!important}
}

/* FAQ: hand further questions to the AI assistant */
.faq-ask{display:flex;align-items:center;gap:16px;margin-top:14px;padding:18px 20px;border:1px solid #bfd8b0;border-radius:16px;background:linear-gradient(120deg,#eef7e4,#f8fbf3);text-align:left}
.faq-ask-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;background:#102b32;color:#ccf275}
.faq-ask-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.faq-ask strong{display:block;margin-bottom:2px;font-size:16px;color:#142e36}
.faq-ask p{margin:0;color:#536970;font-size:13.5px;line-height:1.5}
.faq-ask>div{flex:1;min-width:0}
.faq-ask-btn{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 18px;border-radius:12px;background:#102b32;color:#ccf275;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s}
.faq-ask-btn:hover{background:#18414a;transform:translateY(-2px)}
@media(max-width:760px){.faq-ask{flex-wrap:wrap;padding:16px}.faq-ask-btn{width:100%;justify-content:center}}

/* Email as a second contact route */
.contact-email{margin:14px 0 0;color:#c5d6d5;font-size:14px}
.contact-email a{color:#ccf275;font-weight:700;text-decoration:none;border-bottom:1px solid #ccf27566}
.footer-email{display:inline-block;margin-top:14px;color:#ccf275;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1px solid #ccf27555}
.footer-email:hover{border-color:#ccf275}

/* Homepage story: diagram shown inline under the selected step on phones */
@media(max-width:760px){
  .story-visual.is-inline{margin:2px 0 4px!important;width:100%!important;animation:story-in .35s ease}
  .story-hint{display:none}
}
@keyframes story-in{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.story-visual.is-inline{animation:none}}

/* Project carousel: each card carries its client review */
.carousel-review{margin:0;padding:0 20px 20px;border-top:1px solid #ffffff1a}
.carousel-stars{margin:14px 0 6px;color:#ccf275;font-size:13px;letter-spacing:.12em}
.carousel-review blockquote{margin:0 0 10px;color:#dce9e4;font-size:13.5px;line-height:1.55}
.carousel-review figcaption{color:#9fc2b6;font-size:11.5px;font-weight:750;letter-spacing:.02em}
.home-portfolio .carousel-card{display:flex;flex-direction:column}
@media(max-width:760px){.carousel-review{padding:0 16px 16px}.carousel-review blockquote{font-size:13px}}

/* Homepage hero: capability tags with real logos */
.hero-capabilities span{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px!important;border-radius:999px!important;font-size:12px!important;font-weight:650}
.hero-capabilities i{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#fff}
.hero-capabilities i svg{width:15px;height:15px}
.hero-capabilities i.hc-dark{background:#ccf275}
.hero-capabilities .hc-line{fill:none;stroke:#102b32;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Services explorer on phones: centre the icon/logo above its label, and the tool tags, to match the centred text */
@media(max-width:760px){
  .svx-panel-top{flex-direction:column;justify-content:center;gap:12px!important;margin-bottom:16px!important;text-align:center}
  .svx-tools{justify-content:center}
  .svx-panel .svx-label{text-align:center}
}