/* eZephyr v2 — /support/: Technology & Business Support (this page only).
 * Builds on service.css (theme, hero, buttons, enquiry block) with a compact hero, two service
 * panels (anchored from the SUPPORT cards on /services/), a "who it's for" strip and no
 * illustrations or animation loops. Uses tokens.css and components.css.
 */

.sv--support { --c: var(--ez-sky-light); }

/* Compact hero: copy only. */
.sp-hero .sv-hero__copy { padding-bottom: clamp(36px, 5vw, 64px); }
.sp-jump { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(20px, 2.6vw, 28px); }

/* ================= The two services ================= */
.sp-services {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding-block: clamp(40px, 5.5vw, 72px);
}
@media (min-width: 900px) { .sp-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sp-panel {
  --accent: var(--ez-sea);
  --on-accent: #fff;
  scroll-margin-top: calc(var(--header-h) + 16px);
  border: 3px solid var(--ez-ink);
  border-radius: var(--ez-radius);
  background: #fff;
  box-shadow: 6px 6px 0 var(--ez-ink);
  overflow: hidden;
}
.sp-panel--workspace { --accent: var(--ez-yellow); --on-accent: var(--ez-ink); }
.sp-panel__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.6vw, 30px);
  border-bottom: 3px solid var(--ez-ink);
  background: var(--accent);
  color: var(--on-accent);
}
.sp-panel__icon {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 6px;
  border: 2px solid var(--ez-ink);
  border-radius: var(--ez-radius);
  background: #fff;
}
.sp-panel__title { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--ez-font-display); text-transform: uppercase; }
.sp-panel__body { padding: clamp(20px, 2.6vw, 30px); }
.sp-panel__lead { max-width: 52ch; font-size: 1.0625rem; line-height: 1.5; }
.sp-panel__note { margin-top: 16px; font-size: 0.8125rem; color: var(--ez-ink-soft); }

/* Ticked list (the same tick as the service pages' "A good fit if…"). */
.sp-list { display: grid; gap: 10px; margin-top: 18px; }
.sp-list li { position: relative; padding-left: 34px; font-size: 1.0625rem; line-height: 1.45; }
.sp-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ez-ink);
}
.sp-list li::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 11px;
  border: solid var(--ez-yellow);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ================= Who it's for ================= */
.sp-fit { padding-block: 0 clamp(48px, 6vw, 80px); }
.sp-fit__inner {
  display: grid;
  gap: 8px clamp(32px, 5vw, 64px);
  padding-top: clamp(28px, 3.6vw, 44px);
  border-top: 3px solid var(--ez-ink);
}
@media (min-width: 900px) { .sp-fit__inner { grid-template-columns: 4fr 8fr; align-items: start; } }
.sp-fit__title { font-size: clamp(2rem, 3.6vw, 3rem); }
.sp-fit__list { margin-top: 4px; }
@media (min-width: 900px) { .sp-fit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; } }

/* Enquiry: the shared block, a little tighter on this compact page. */
.sv--support .sv-cta { padding-block: clamp(48px, 6vw, 80px); }

/* "Enquire about this service": a quiet link at the foot of each panel, opening /contact/ with
   that service chosen (/contact/?service=<id>#ct-brief; js/prototype/contact.js selects it). */
.sp-panel__enquire { margin-top: 20px; font-size: 0.9375rem; }