/* Service pages (phone, chat, reviews, office admin). Loads after style.css and uses its tokens.
   Each page sets --svc on <main> to its own service colour. */

/* ---------- hero ---------- */
.svc-hero .panel { margin-top: 0; }
.svc-title {
  margin: 0;
  font: 850 clamp(44px, 5.6vw, 84px)/.95 var(--display);
  font-variation-settings: "wdth" 115;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.clip-note { margin: 12px 0 0; font-size: 14px; color: var(--on-flood-soft); text-align: center; }
/* the clips are 720 x 748: show the whole frame at its own shape, never cropped */
.svc-hero .clip video { aspect-ratio: 720 / 748; height: auto; object-fit: contain; }

/* ---------- shared section look ---------- */
.svc-block { padding: clamp(56px, 7vw, 104px) 0; }
.svc-block + .svc-block { padding-top: 0; }
.svc-block h2 {
  margin: 0; font: 780 clamp(30px, 3.6vw, 52px)/1 var(--display);
  font-variation-settings: "wdth" 112; letter-spacing: -.02em;
}

/* ---------- how it works: three steps ---------- */
.svc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: 40px 0 0; padding: 0; list-style: none; counter-reset: step; }
.svc-steps li { padding-top: 20px; border-top: 3px solid var(--ink); counter-increment: step; }
.svc-steps h3 { margin: 0; font: 700 22px/1.25 var(--body); }
.svc-steps h3::before { content: counter(step) ". "; color: var(--svc, var(--ink)); }
.svc-steps p { margin: 10px 0 0; color: var(--ink-soft); max-width: 24em; }

/* ---------- questions ---------- */
.svc-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 80px); margin: 40px 0 0; }
.svc-faq div { padding-top: 20px; border-top: 1px solid rgba(26, 24, 64, .16); }
.svc-faq dt { margin: 0; font: 700 20px/1.3 var(--body); }
.svc-faq dd { margin: 8px 0 0; color: var(--ink-soft); max-width: 30em; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .svc-steps { grid-template-columns: 1fr; gap: 28px; }
  .svc-faq { grid-template-columns: 1fr; gap: 24px; }
  .svc-hero .clip { margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .svc-title { font-variation-settings: "wdth" 108; }
  .svc-hero .back { margin-bottom: 20px; }
  .svc-hero .actions .btn { flex: 1 1 100%; }
  .svc-faq dt { font-size: 19px; }
}

/* style.css gives .panel-copy .btn its own top margin; the actions row already spaces it */
.svc-hero .panel-copy .actions .btn { margin-top: 0; }

/* a longer heading ("Your office admin, handled") runs smaller so it sits on two lines at desktop, not four */
.svc-title-long { font-size: clamp(40px, 3.5vw, 52px); }
@media (max-width: 640px) {
  /* on a phone the long heading filled the line right up to the edge; a touch smaller leaves it room */
  .svc-title-long { font-size: 36px; }
}

/* ---------- sales-page sections (30 Sep): the problems, then what you get ---------- */
.svc-hero .svc-note { margin: 14px 0 0; font-size: 15px; color: var(--on-flood-soft); }
.svc-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: 40px 0 0; padding: 0; list-style: none; }
.svc-pains li { padding: 24px; border-radius: 20px; background: var(--frost); }
.svc-pains h3 { margin: 0; font: 700 21px/1.25 var(--body); }
.svc-pains p { margin: 8px 0 0; color: var(--ink-soft); }
.svc-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(32px, 5vw, 80px); margin: 40px 0 0; padding: 0; list-style: none; }
.svc-gets li { position: relative; padding-left: 38px; font: 500 20px/1.4 var(--body); max-width: 26em; }
.svc-gets li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 999px;
  background: var(--svc, var(--ink)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
@media (max-width: 900px) {
  .svc-pains { grid-template-columns: 1fr; gap: 14px; }
  .svc-gets { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .svc-pains li { padding: 20px; }
  .svc-gets li { font-size: 18px; }
}